网页设计实习报告

《网页制作与网页设计》教学实习报告

实习目的

1、通过实习，使学生加深对所学课程内容的认识、理解、掌握，达到对所学知识、技能系统化、条理化的目的，巩固、提高学习效果。

2、通过综合应用实习，熟练掌握DreamwerverMX8、Flash MX8、Fireworks 8的各项操作并能够掌握制作网页的技能，根据所学技能学以致用，解决实际问题，提高操作应用熟练程度。

知道DreamwerverMX8 是及网页制作和网站管理于一身的网页制作软件，它是专门为网页设计师量身定制的可视化网页制作软件，利用它可以为方便、快捷地制作跨平台话浏览的动感网业。

了解Fireworks是处理图片的软件，使用它可以创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，例如动画、转换图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为TEML 文件，还能输出在Photoshop、Illustrator和Flash等软件中编辑的格式。

通过对flash的学习，掌握如何处理矢量图形，制作矢量动画，掌握如何添加音乐、时动作控制在flash内容和集成flash影片，了解ActionScript脚本语言创建交换形式、

在实习的过程中巩固了对前面的知识的学习，加深对知识的了解，进一步对网页设计的见解，也突出了个人的特点，运用所学的知识做出了让自己满意的作品。

四、实习内容及方法

一、实习任务：

1、通过仔细阅读网页设计及网站规划课程教材、网上资料、教参等相关内

容，加深对相关概念的理解、理论的理解、掌握、运用。

2、严格按照实习指导书的相关要求，完成了各项综合操作，并将相应图像制作、动画制作和页面设计的作品进行了保存。

3、及时积极完成各项实习报告的撰写。

4、实习结果及实习项目严格按照要求及时保存、展示。

二、实习内容：

（一）、使用DreamwerverMX8、Flash MX8、Fireworks 8完成惠尔公司网站。（二）、DreamwerverMX8、Flash MX8、Fireworks 8的使用方法和制作技巧。

1、创建一个站点：

站点的名称就是“惠儿网站”,站点创建成功命一个首页是index.html 再

下面创建了5个二级网页分别是联系我们.html、产品列表.html 、

top.html、惠儿邮箱.html、雁过留声.html。其示意图如下：

2、网页中的图像处理：

利用Photoshop、和Fireworks通过处理风景图

在里面运用到滤镜的工具目的是让图片更加的形象逼真，处理后的图

片效果如图所示：

3、布局与表格的编排：

在网页设计中我偏好用表单编排一般情况下我的布局是在一个大的表单里写很多文字插入许多图片。

其版面如图所示：

1.

二级页面制作方法如法炮制。

4、网页的链接

网站中重要的就是各个子网页与主页面之间的链接，如果没连接好或者链接错误就会影响整个网站运行的效果。列如我要把产品列表这个二级网页跟主网页index.html链接方法如下：

回到index.html/点击页面右下方的链接文件夹，找到我要链接的二级网页产品列表.html。

打开/链接后我的链接字体会变成我所设置的字体颜色，这样表明我的链接成功。

预览后在主页面点击“产品列表”就会显示到我的产品列表二级页面。

其他页面方法同上。

产品列表：将“产品列表”同index.html首页进行链接，然后预览成功！

邮箱登陆：将“邮箱登陆”同index.html首页进行链接，然后预览成功！

联系我们：将“联系我们”同index.html首页进行链接，然后预览成功！

公司简介：将“公司简介”同index.html首页进行链接，然后预览成功！

5、层与行为的应用

层在网页中相当于一张张的胶片，通常用来确定网络元素在浏览器中的起止位置层最重要的用途是动态效果设计。层可以包括文本、图像、表格，甚至其他图层

而且层对于制作网页部分重叠更是有特殊的效果。步骤如下：

1）打开一个页面，打开“修改”，“页面属性”，在页面属性中，选择“跟踪图像”。这个跟踪图像将作为“层”布局页面的参照对象。

2) 选择“查看”----“标尺”----“显示”，打开标尺

3) 选择“查看”----“网络”----“显示网络”，

4）在“网格设置”对话框中，选中“显示网格”和“靠齐到网格”

5）为了防止层的重叠，需要打开“层”面板。选择“窗口”，“层”，打开层面板。

6）在“层”面板中，选中“防止重叠”选项。

6、使用Flash MX8制作动态文字

1）打开flash软件，在里面建立8个图层。并且准备一副适合做标示的图片。

2）在图层1上做1帧到160幀的普通帧、在图层2上从第十帧开始插入关键帧25帧结束，在第10帧上写入“同”字，在25帧上写“心”

字，再回到第10帧创建补间动画。在图层3上创建帧从25帧到40

帧结束在25帧上写“协”字创建关键帧到40帧写“力”字，再返

回到25帧创建补间动画。在图层4上从40帧到55帧结束在40帧

上写“共”创建关键帧到55帧写“创”字，在图层7上从第十帧

开始插入关键帧25帧结束，在第10帧上写入“辉”字，在25帧

上写“煌”依次而下做到160帧。

3）帧做好后敲击Enter键就可以播放flash动画，如果想插入网页就按步骤走，文件—导出—导出影片，默认的是.swf/最后点击保存。

7、网页特效设计

在这里我给自己的网页设计的特效是让一行字体在来回跑动方法如下：

1）选中你要设计特效的字体选择工具栏上的标“签选择器”,“HTML”

插入,关闭

2）然后预览就会出现从右到左的字幕。

8、控制多个影片的播放

制作的方法：

先看自己的影片里的帧长度，比如说：第一个影片剪辑的时间轴长是20，那么你第2个影片剪辑就放在主场景的第21贞）第2个影片剪辑就放在它的后一贞就可以了。无论几个影片剪辑都是一样的。

9、制作动态分隔条

网页分隔线可以说是网页中不可缺少的元素，它主要用于分隔网页内

容也可以用于装饰网页。在网页中插入一个层，然后在层中插入一个

表格，设置表格的间距，然后在表格的单元格中插入图片，设置时间

轴。调出时间轴，在时间轴必要的地方添加改变属性行为，并设置层

对象的属性添加行为和改变属性。

五、结论

1、收获

在新疆停网的状态下，我们只用了一周实习时间。在这一周的实习里我学到了很多也收获了很多，在老师和同学的帮助下顺利的完成了实习内容。对前面的知识精心的进行整理，把这一学期的知识作了复习和训练，更加牢固地掌握了学过的东西对Photoshop、Fireworks、Dreamweaver、Flash的应运更加熟练.

在制作网站的过程中，我们参照老师给的惠尔公司网站图片，尽可能地想把我们自己的网站做的美观、内容丰富。网页制作需要有很多的色调搭配能力和很好的布局能力，再加上自己的风格创新能力，才能做出精美的网站。在这几天的实习中，我学到无论作什么事都要有细心有耐心。尤其是在新疆停网的状态下，搜集不到素材，所以，在网页的制作上还是有一定的局限性。网站的布局上我也突出了自己的特点。尤其是在制作flash的时候老师给予了很大及时的帮助，让我在制作的时候不至于给我带来很大麻烦。同时，也希望我们能利用我们学习的知识技能更好的为学院，为同学们服务，也希望我们能够互相学习，互相取长补短，使我们每个同学能够更好的进步。

2、不足

在实习中我发觉网站的制作过程中，

1、自己脑袋里没有装东西（网站的综合布局、网页的构思和编排）甚

至老师把作业布置下来自己还不知道该从那个地方着手很是茫然。

2、自己的阅历不够，自己的网站应该是一个怎样的网站，里面要放些

啥内容，该怎样去组织这些内容，心里没底。

3、尤其是老师在前面教过的内容自己没有及时的练习和巩固，以至于

在实习的时候自己的速度跟不上，做出来的flash和gif小动画不令

人满意。

4、不能熟练掌握工具，不了解好多工具的属性和用途，导致好多图片

都不能做出自己想要的效果。最重要的是在制作网页的时候，色彩

搭配特别重要，而我自己对颜色的搭配不是很了解，感觉做出的东

西老是颜色深的地方特别深，淡的地方特别淡，感觉不协调。

5、新疆停网的原因，使我们在素材的搜集上变得很被动，所以导致做

出的东西很简单，所以我觉得，知识应用的全部全还要看准备是否

充分。

6、在以后的学习中我会更加认真地去学习，去掌握这些软件的用法，

便于在以后做东西的时候能更好地运用。

六、致谢

在网页实习结束的时候我要感谢辛勤的班主任老师，在这个学期代我们的网页设计以外还代了很多别的课，所以很辛苦，在上课期间和实习期间同学在学习中遇到问题都耐心的为他们讲解直到他们听懂为止。正是在老师的号召下我们对网页设计的兴趣也非常的浓厚，在实习中我发现很多同学的网站做的很好很有特色，这都少不了老师的指导。在老师的带领下我们学到很多书本上学不到的东西，相信在以后找工作中我们会多了一个筹码。

其次，要感谢学校给我们安排了期末的课程实习，让我们能在学期末重新温习和总结整个一学期以来学习的知识，并且总结自己的不足，在以后的学习中能够加以改正和补充。

最后，再次感谢学校和指导的老师！