網页制作实验报告6个实验任务分配.docVIP

目 录 实验一 网页设计基础实验 2 实验二 HTML语言应用 4 实验三 CSS样式表的应用---CSS的引用 7 实验四 Dreamweaver的使用、个人网站的制作 9 实验五 用框架、模板设计网页 11 实验六 表单制作 16 实验一 网页设计基础实验一、实验目的1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．了解网页布局的形式。 二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,所以我们称之为T形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。 2.口型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3.三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式 找出使用大色块和抽象线条构图风格的网站（至少各2个）；例：大色块主页找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。 三、实验步骤与要求 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title我的第一个网页/title /head body pHello World!/p /body /html 2）把记事本文件扩展名改为.html，双击运行。  四、实验心得 自己写收获 实验二 HTML语言应用 一、实验目的: 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单网页。 3．学习将其它格式的文档转换成HTML格式的文档二、实验内容：1．打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML文件，然后以自己名字（用字母）另存为.htm文件，并在浏览器中运行。html head title王辉的主页/title/head body bgcolor=#f0ffFFbr!---换行---h2center王辉的个人主页/center/h2hr /body /html 2. 在以上程序的基础上一步一步的添加红色部分的语句并运行，浏览网页。html head title王辉的主页/title/head body bgcolor=#f0ffFFbr!---换行---h2center王辉的个人主页/center/h2hr font size=6我要变大/font font size=7我要更大/font font color=blue我要变成兰色/font font color=#A52A2A我要变成褐色/font /body /html (3)增加移动字幕html head title王辉的主页/title/head body bgcolor=#f0ffFFbr!---换行---h2center王辉的个人主页/center/h2hr font size=5字体变大/fontfont size=6字体要更大/fontfont color=blue字体变成兰色/fontfont color=#A52A2A字体变成褐色/font