网页制作综合实验.docx

网页制作综合实验.docx

《网页制作综合实验.docx》由会员分享，可在线阅读，更多相关《网页制作综合实验.docx（14页珍藏版）》请在冰豆网上搜索。

网页制作综合实验

华北科技学院计算机系综合性实验

实验报告

课程名称《网页制作A》

实验学期2011至2012学年第1学期

学生所在系部计算机系

年级2009级专业班级网络B093班

学生姓名沈亚强学号200907024313

任课教师沙嘉祥

实验成绩

计算机系制

《网页制作A》课程综合性实验报告

开课实验室：

信息楼基础二机房2011年11月24日

实验题目

《E淘网》网站的开发

一、实验目的

使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。

二、设备与环境

微机、Dreamwaver8、Fireworks8、Flash8

三、实验内容

1、按照特定的主题制作一个完整的网站。

2、使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。

3、网站中要包括表格/框架/层布局、图像、文本、超级链接、导航、CSS样式。

网站页面总数不少于6个。

4、至少要包括3个自己制作的Flash动画。

上交文件中要包括该动画文件的源文件*.fla文件和导出文件。

5、至少要包括3个自己用Fireworks制作的图像文件，并且在每个图像文件中应用至少两种学过的技术手段进行处理。

上交文件中要包括该图像文件的源文件*.png文件和导出文件。

6、尽可能多地使用学过的技术手段。

7、不允许抄袭其他同学的内容，如果两人有雷同，两个人都按照不及格处理。

8、不允许从网上下载别人的网站当作考试内容上交。

8、在上交文件中主页一律以index.htm命名。

9、把所有文件和文件夹放在一个总的目录下,目录以：

班级+姓名+学号最后两位的形式命名。

例如：

信管B061张三03.rar。

将index.html放在该文件夹下。

最后将该目录压缩成一个*.rar文件。

四、实验结果及分析

一．网站内容

1、《E淘网》网站是参照淘宝网网站的设计思路和风格进行规划和设计，在网站的建立过程中利用到Dreamwaver8、Fireworks8、Flash8一整套有关网站建设、图片处理、网页动画的制作软件。

2、网站建立涉及到的技术内容包括：

文本和图像超链接、锚点连接、电子邮件超链接；图像应用、导航条各模块制作、导航条超链接设计；网页模板的创建、网页模板套用；鼠标经过图像、网站相册创建；表格的应用及利用表格为网站页面布局；CSS样式的创建、导出、套用；表单的运用设计网站的注册页面、信息填写；行为的使用，为导航条的“显示弹出式菜单”的设计及表单中的项添加一些弹出式行为，便于网站页面信息填写规范；多媒体运用（网页背景音乐、flash对象的添加）。

3、E淘网网站主要包括以下内容：

E淘网主页，主页中包含GIF动画、表格布局、导航条设置、导航条模块的弹出式菜单及相关链接、文件名为“对碰.fla”动画、鼠标经过图像的设置、文本的超链接；另外还有几个有关E淘网所卖衣服宝贝的网页、VIP会员注册网页、网站发展历程网页、网站招聘信息网页，其文件名分别为：

ebaoxieyi、gengduobaobei、index、pinpaigushi、remaibaobei、zhaopinxinxi、zhuce，其中文件文件名为index的网页是E淘网网站主页。

ebaoxieyi网页的内容是注册E淘会员的相关协议，涉及到网页链接、锚点连接、CSS样式的使用；gengduobaobei网页的内容是E淘网热卖男装的网页，点击点击或连接该网页即可看到E淘网男装的热卖款式，涉及到网页链接、flash动画、表格布局；pinpaigushi网页的内容是讲述E淘网品牌男装的发展历程、设计理念、品牌文化、品牌定位、品牌释义、还有E淘网品牌男装的信誉；remaibaobei网页的主要内容是E淘网品牌女装的热卖款式，涉及到网页链接、表格布局；zhaopinxinxi网页主要是E淘网的招聘信息，涉及到网页链接、图片设置、表格布局；zhuce网页主要是设计一张表单，用于填写E淘网会员注册信息，此网页涉及到表格的运用、表单的设计、图片规划、为各个表单域添加相应的行为，使得注册信息的规范化和准确性。

4、E淘网整体布局是运用表格布局，使用表格布局的好处在于表格布局页面效果清晰，操作简便，易于实现，但要注意的是不要把整体页面全部放在一张大的表格里，这会使得链接网页时数据的读取慢。

5、E淘网虽然大体上是利用表格布局，但在布局时，各个模块是分开进行，而不是设置在一个大模块里面，在Dreamwaver8操作页面下可以在适当的位置插入HTML水平线，使得整个页面布局更加合理、模块更加清晰。

单靠Dreamwaver8是实现不了一个网页的美观和网页的动态性的，所以在网站的建立和网页制作工程中要利用Fireworks8、Flash8软件辅助，制作出网站和网页中的唯美图片和动态效果，另外，还得使网页有音乐的效果。

二．Dreamweaver部分

1、建立站点，Dreamweaver软件负责整个网站和网页的制作，为了使网站文件得到有效管理，进入Dreamweaver软件页面后，在制作网页之前应先规划站点的目录结构，然后定义一个站点，将站点中的全部文件分门别类地放在不同的文件夹下。

单击“站点”，在下拉列表中选择“新建站点”，然后根据提示完成本地站点的创建。

2、网页的新建，单击“文件”，在下拉列表中选择“新建”即可新建一个网页，然后给主网页命名“index”，此后有关网页的布局、表格、图形、导航条、超链接、flash动画插入、鼠标经过图像等一系列有关主页的内容尽可在“index”工作区下完成。

3、首先进入“index”页面，根据事先规划好的布局方式进行操作，鼠标点击“插入”，在下拉列表中选择表格，在弹出的对话框中设置表格属性，或者在工作区下方有个属性设置框，也可进行设置。

然后在表格编辑区域内插入GIF动画图片，使得页面有动画效果，单击“插入”选择“HTML”—>选择水平线即可插入水平线。

在相应的位置插入表格，在表格内进行文本编辑（所有宝贝、品牌街、促销区）、图片插入（“男装”“女装”），然后分别选中文本和图片，在属性中设置文本和图片相应的超链接，然后单击“插入”选择“水平线”。

4、导航条设置，设置完网页顶部后，进行导航条的设置，首先，插入表格，设置表格边框及边框颜色属性，分别在相应单元格中插入图片（“首页”“羽绒服”“棉衣”“毛衣”“连衣裙”“热卖区”）做导航条，并为各导航项添加“弹出式菜单行为”及设置相应超链接。

5、鼠标经过图像设置，选择“插入”表格，设置表格属性，在相应单元格中插入“图像对象”，设置原始图片和鼠标经过后的图像，并设置超链接。

6、插入flash动画，单击【插入】→【媒体】→【Flash】菜单命令，打开【选择文件】对话框。

选择一个Flash动画文件*.swf，插入到网页中，单击【确定】按钮，打开【对象标签辅助功能属性】对话框，在对话框的【标题】文本框中输入“Flash动画”，单击【确定】按钮，在网页上插入了一个Flash动画。

7、其他网页图片和图片超链接设置，根据规划的布局方式，在相应的位置插入表格，然后在单元格中插入服装图片并设置图片超链接。

8、其他网页的布局方式、操作方式、图片和文本设置方式与主业“index”的制作工程相仿。

在对nanzhuang、nvzhuang网页制作时，运用了模板的创建和使用。

三．Fireworks部分

1、文字处理，包括导航条的制作、输入文本、编辑文本、文本变形、字体属性设置（大小、形状、字体、颜色）、颜色填充等内容。

2、图形图像处理，向收集的图片中添加文本、编辑文本、文本变形、添加文字；图形制作（背景色填充、文字处理）、滤镜和效果的运用。

3、GIF动画制作，包括图形、文本闪动、文字跳动处理、文字图形滤镜特效设置。

4、导航条制作工程：

（1）单击【文件】→【新建】菜单命令，新建一个宽度为“600像素”，高度为“400像素”的文档。

（2）单击【编辑】→【插入】→【新建按钮】菜单命令，打开按钮编辑窗口，在按钮编辑器窗口中的

图标表明按钮中心的位置。

（3）单击“圆角矩形”工具

，设置导航条颜色为蓝色在【释放】状态选项卡中拖动鼠标绘制一个圆角矩形作为按钮主体。

（4）在【属性】检查器中单击滤镜右侧的添加按钮

右下角的小黑三角，打开效果菜单，选择【斜角和浮雕】→【内斜角】命令，打开【内斜角】弹出窗口。

设置【斜角宽度】为“4”，设置【对比度】为“75%”，设置【柔和度】为“3”，设置【角度】为“135”。

（5）选择【阴影和光晕】→【投影】命令，设置【距离】为4，设置【不透明度】为65%，设置【阴影颜色】为“蓝色”，设置【柔和化】为4，设置【角度】为315。

（6）单击工具箱【矢量】栏内的“文本”工具按钮

，将鼠标移到圆角矩形上，按下鼠标左键拖动鼠标绘制文本块，输入文本“首页”，作为按钮文字。

（7）在【属性】检查器中设置文本【字体】为“宋体”，设置文本【大小】为“20”，设置文本【颜色】为“白色”。

（8）其余导航条项制作过程按照上述步骤即可完成制作。

在制作工程中不设置其他效果。

（9）对于其他文本的输入、编辑，单击工具箱【矢量】栏内的“文本”工具按钮

，鼠标变成

形状，按下鼠标左键拖动鼠标绘制文本块。

在文本编辑区域可设置文字的大小、字体、形状、颜色滤镜特效等效果。

5、图像处理过程：

（1）单击【文件】—>【打开】菜单命令，选择需要处理、需要添加文本的图像，如需要添加矩形并填充颜色的，单击“矩形”工具

，按下“u”可进行切换不同图形的制作，然后在矩形填充颜色位置输入文本，单击工具箱【矢量】栏内的“文本”工具按钮

，鼠标变成

形状，按下鼠标左键拖动鼠标绘制文本块。

在文本编辑区域可设置文字的大小、字体、形状、颜色滤镜特效等效果。

（2）在图像中添加花纹，收集合适花纹，单击【文件】—>【打开】菜单命令，打开需要的花纹，在工具箱中选择“拖动”工具，单击花纹图片并拖动到当前文档，然后选择工具箱中的“缩放”工具对花纹图片缩小到适当大小。

（3）根据需要的网页效果，在工具栏下可选择合适的工具对图形进行处理、美化，使处理过的图形在网页中显示出唯美效果。

制作过程大致可按照

（1）步骤进行加工处理。

6、图形制作过程，在制作鼠标经过图像的图形时，根据需要图形的大小，在创建文档时设置文档的高度和宽度，点击“创建”，进入编辑区后当即工具箱的“矩形”工具按钮选中需要填充颜色区域，在单击“油漆桶”工具按钮，设置油漆桶颜色，矩形区域单击完成颜色填充。

单击工具箱【矢量】栏内的“文本”工具按钮

，鼠标变成

形状，按下鼠标左键拖动鼠标绘制文本块。

在文本编辑区域可设置文字的大小、字体、形状、颜色滤镜特效等效果。

重复上述步骤完成所需图形制作。

7、GIF动画制作过程：

（1）打开已经编辑完的图像并打开。

单击工具箱【矢量】栏内的“矩形”工具组内的“星形”工具

。

在【属性】检查器中设置“星形”填充颜色为白色，拖动鼠标绘制星形。

根据需要和闪动效果，单击【窗口】→【自动形状属性】菜单命令，在【自动形状属性】面板中设置图形相关属性可得不同形状图形。

（2）双击【层1】的名称，在弹出的层名称窗口中选择“共享交叠帧”，将层1在所有帧中共享。

单击【窗口】→【帧】菜单命令，打开【帧面板】。

单击帧1将帧1选中，拖动鼠标至【帧面板】底部【新建/重制帧】按钮，复制帧1。

（3）保持帧2被选中的状态，单击【层面板】中的文字图层，重新设置文字的属性（大小、颜色、形状、滤镜特效都可），使同样的文字出现不同闪动效果。

（4）保持帧2被选中的状态，单击【层面板】中的星形图形，重新设置星形图形的属性（大小、形状、颜色、不透明度、滤镜特效等），使星形图形出现不同闪动效果。

（5）单击【窗口】→【优化】菜单命令，打开【优化】面板。

在【优化】面板中设置导出格式为“GIF动画”。

单击【文件】→【导出】菜单命令，打开【导出】对话框，输入要保存的文件名。

四．Flash部分

1、网页中涉及到的flash动画有三个，包括两组服装宣传图片自动播放、文字和数字对碰动画、

遮罩灯动画。

2、服装宣传图片自动播放动画制作过程：

（1）新建一个Flash文档，单击【文件】→【导入】→【导入到库】菜单命令，导入服装图像。

单击【库】面板中的位图，按下鼠标左键拖动鼠标将位图对象拖入舞台左侧的位置。

（2）保持位图对象被选中的状态,单击工具内任意变形工具

按钮，拖动鼠标将位图对象缩小。

（3）选中缩小后的全部图片，点击鼠标右键打开弹出菜单，单击【转换为元件】菜单命令。

打开【转换为元件】对话框，在【名称】文本框中输入“男装”，选择【类型】为“图形”。

（4）单击【服装】层【时间轴】面板第80帧的位置，单击【插入】→【时间轴】→【关键帧】菜单命令，在第80帧的位置插入一个关键帧，这样放置在第1帧上的对象就被复制到第80帧中。

（5）单击【服装】层【时间轴】面板第1帧的位置，点击鼠标右键，在弹出菜单中单击【创建补间动画】菜单命令，创建补间动画。

创建补间之后，【服装】层【时间轴】面板中第1帧和第80帧中间的补间帧有一个浅蓝色背景的黑色箭头，代表补间成功。

（6）同时按下键盘上的【Ctrl】和【Enter】，对影片进行测试。

（7）测试达到效果后，单击【文件】→【导出】→【】菜单命令，导出影片并命名为“男装”，保存格式为“.swf”影片。

3、文字和数字对碰动画制作过程：

（1）新建一个Flash文档，单击【文件】→【导入】→【导入到库】菜单命令，导入服装图像。

单击【库】面板中的位图，按下鼠标左键拖动鼠标将位图对象拖入舞台中间的位置。

（2）单击【视图】→【标尺】菜单命令，在场景左侧和上方显示标尺。

单击工具箱【工具】栏内选择工具

按钮，将鼠标移到上方标尺上，当鼠标指针变成

形状时，按下鼠标左键拖动鼠标，在舞台左方和上方的位置拖出一条水平辅助线。

同样的方法再次拖出多条条辅助线，交织成方格。

（3）单击工具箱【工具】栏内文本工具按钮

，设置【文字类型】为静态文本，同时设置文字属性（字体、颜色、大小），按住鼠标左键不放的同时拖动鼠标，在工作区中拖出一个文本输入框，输入文本“2012”。

重复上述操作，分别输入文本“时尚冬装”“温暖冬天”。

（4）保持文本对象被选中的状态，单击【修改】→【分离】，将文本分离。

单击【修改】→【时间轴】→【分散到图层】菜单命令，将文本分散到各个图层。

分散后的图层自动命名为“2”“0”“1”“2”，“时”“尚”“冬”“装”，“温”“暖”“冬”“天”。

（5）单击【层】面板中的图层1将其选中，按下鼠标左键拖动鼠标至【层】面板底部的删除图层按钮

中，将图层2、7、8删除。

（6）单击【2】层【时间轴】面板第1帧的位置，点击鼠标右键，在弹出菜单中单击【创建补间动画】菜单命令，创建补间动画。

（7）单击【2】层【时间轴】面板第100帧的位置，按下【F6】键，在第100帧的位置插入一个关键帧，这样放置在第1帧上的对象就被复制到第100帧中。

之后，将对象移至要下落的位置即第二条辅助线的位置。

（8）单击【2】层【时间轴】面板第1帧的位置，选中第1帧，在【属性】面板中设置【缓动】为“-82”。

则运动过程中速度为慢慢加速的，运动会显得更真实。

（9）单击【2】层【时间轴】面板第19帧的位置，按下【F6】键，在第19帧的位置插入一个关键帧，移动该帧的对象到要下落的位置即第二条辅助线的位置。

（10）单击【2】层【时间轴】面板第29帧的位置，按下【F6】键，在第29帧的位置插入一个关键帧，把该帧的对象稍微向上抬高一点即第一条辅助线的位置。

（11）单击【2】层【时间轴】面板第39帧的位置，按下【F6】键，在第39帧的位置插入一个关键帧，移动该帧的对象到第二条辅助线的位置。

这样就做好了文字“2”的弹跳的动作。

（12）其他数字和文字的动态制作过程可按照上述步骤进行制作。

4、遮罩灯动画制作过程：

（1）新建一个Flash文档,单击【文件】→【导入】→【导入到库】菜单命令，导入服装背景图像和男装图像。

（2）在【库】面板中选择背景位图按住鼠标左键，拖动鼠标至动画文档的舞台中，释放鼠标左键，将位图对象放置在舞台中。

（3）点击鼠标右键打开弹出菜单，单击【转换为元件】菜单命令。

打开【转换为元件】对话框，在【名称】文本框中输入“背景”，选择【类型】为“图形”。

单击【确定】按钮完成图形到元件的转换

（4）在该层【时间轴】面板中第40帧的位置按下【F5】键，插入帧。

将背景延续到40帧。

（5）单击【层】面板底部【插入图层按钮】

，插入一个新图层【图层2】，将图层名称修改为“毛衣”。

（6）鼠标拖动毛衣图片拖到舞台中，保持位图对象“毛衣”被选中的状态，单击【修改】→【位图】→【转换位图为矢量图】菜单命令，打开【转换位图为矢量图】对话框，设置【颜色阀值】为“60”，设置【最小区域】为“10像素”，单击【确定】按钮完成位图到矢量图的转换。

（7）单击工具箱内选择工具按钮

，按下【Shift】键不放的同时，选择矢量图形的白色部分。

按下【Delete】键将所选部分删除。

（8）按下鼠标左键从位图对象“毛衣”左上角拖动到右下角，释放鼠标将位图对象选中，点击鼠标右键打开弹出菜单，单击【转换为元件】菜单命令。

打开【转换为元件】对话框，在【名称】文本框中输入“毛衣”，选择【类型】为“图形”。

单击【确定】按钮完成图形到元件的转换。

（9）单击【窗口】→【变形】菜单命令，打开【对齐&信息&变形】面板，选择【约束】选框，设置【宽度】为“50%”，按下键盘上【Enter】键完成变形。

拖动鼠标将该元件拖动到舞台中央的位置。

（10）单击该层的【时间轴】面板第21帧的位置，按下【F6】键，在第21帧的位置插入一个关键帧。

将毛衣对象移动到舞台的左侧。

（11）单击该层的【时间轴】面板第25帧的位置，按下【F6】键，在第25帧的位置插入一个关键帧。

单击【修改】→【变形】→【水平翻转】菜单命令，将对象变形。

（12）单击该层的【时间轴】面板第80帧的位置，按下【F6】键，在第80帧的位置插入一个关键帧。

将毛衣对象移动到舞台的右侧。

（13）单击该层【时间轴】面板第1、21帧的位置，在【属性】面板中选择【补间】为动画。

（14）单击【层】面板底部【插入图层按钮】

，插入一个新图层将其名称修改为“遮罩”。

（15）单击【遮罩层】的【时间轴】面板第1帧的位置，然后单击工具箱【工具】栏内椭圆工具按钮

，设置任意颜色的填充色。

（16）将鼠标移入舞台右上角，按下【Shift】键同时按下鼠标左键拖动鼠标绘制一个圆形，释放鼠标。

（17）选中绘制的圆形，点击鼠标右键打开弹出菜单，单击【转换为元件】菜单命令。

打开【转换为元件】对话框，在【名称】文本框中输入“遮罩”，选择【类型】为图形。

（18）单击【遮罩层】的【时间轴】面板第10帧的位置，按下【F6】键，在第10帧的位置插入一个关键帧。

在【对齐&信息&变形】面板中设置【宽度】为“150%”，设置【高度】为“150%”，按下键盘上【Enter】键完成变形。

并将圆形图形对象移动到舞台的中间，放置在毛衣图形的上方的位置。

（19）单击【遮罩层】的【时间轴】面板第20帧的位置，按下【F6】键，在第20帧的位置插入一个关键帧。

并将圆形图形对象移动到舞台的左侧。

（20）单击【遮罩层】的【时间轴】面板第80帧的位置，按下【F6】键，在第80帧的位置插入一个关键帧。

并将圆形图形对象移动到舞台的右侧。

（21）单击该层【时间轴】面板第1、10、20帧的位置，在【属性】面板中选择【补间】为动画。

（22）在【层】面板中单击【遮罩】层，点击鼠标右键在弹出菜单中单击【遮罩层】菜单命令。

将该图层类型修改为遮罩层。

（23）则Flash默认将遮罩层下方的图层修改为被遮罩层。

其中遮罩层前方显示

图标，被遮罩层前方显示

图标。

（24）在【层】面板中单击【背景】层，点击鼠标右键在弹出菜单中单击【属性】菜单命令。

在弹出【图层属性】对话框中，选择【类型】为被遮罩。

（25）单击工具箱【工具】栏内选择工具按钮

，将鼠标移到工作区域单击鼠标，则【属性】面板显示为文档的属性。

在【帧频】文本框中输入12，按下【Enter】键确定。

（26）同时按下键盘上的【Ctrl】和【Enter】，对影片进行测试。

五．小结

此次E淘网服装网站的设计灵感和思路来源于淘宝网，在对E淘网服装网站的建立时，首先要事先对网站的整体规划和网页布局进行设计，设计完成后，在淘宝网有关服装网页上进行素材的收集、素材处理，使设置在网页上的图片更加唯美和为人接受。

除了收集相关的素材外，还得利用Fireworks软件进行导航条的制作、有关图片的修饰、文字和颜色的添加、动态图片的制作（GIF动画）等；另外，为了使页面出现动态效果，还得利用Flash软件制作一些符合服装宣传的flash动画。

通过此次网页制作综合实验，使我对平时上机进行网页制作的操作更加熟练、对网页的布局方式和设计，还有网页上对图片添加行为等技术有进一步掌握；另外，对Fireworks软件对图像处理、GIF动态图像制作的操作进一步熟悉和掌握，使我更加熟练的运用Fireworks软件达到对网页有关图像、图形界面处理效果；同时在利用flash软件制作网页动画时，使我对flash动画制作有进一步认识，虽然只是初步的对flash动画，但收获匪浅。

不过，在网页制作出的效果中还存在很多不足（文字、颜色的设置、页面布局等存在不合理），希望在以后学习动态网站制作中结合静态网站制作的优点，进一步对这方面知识进行学习和研究，使自己在网页制作这方面有更大的进步。

教师评价

评定项目

A

B

C

D

评定项目

A

B

C

D

界面美观，布局合理

技术水平

内容完整

操作熟练

实验结果正确

设计丰富

报告规范

文字流畅

其他：

评价教师签名：

沙嘉祥

2011年12月1日