网站设计报告

1

网页设计与制作实训报告

一.实训意义：

网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是

根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业

技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,

实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好

实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的

作用.

二.实训目的:

1.通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。

(1)掌握规划网站的内容结构,目录结构,链接结构的方法。

(2)熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。

(3)掌握页面的整体控制和头部内容设置的方法。

(4)熟练掌握网页页面布局的各种方法。

(5)熟练掌握在网页中输入,设置标题和正文文字的方法。

(6)熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。

(7)熟练建立各种形式的超级链接的方法。

(8)掌握表单网页制作方法。

(9)掌握网页特效制作方法。

2

(10)掌握网站测试的方法。

2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手

能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像

资料、Flash动画和网页特效等。

3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的

能力及基本工作素质。

4.培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的

能力,树立自信心。

网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热

度是一种执著。

学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰

到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解

决，我就碰到过一个问题，用了很长时间才解决。

学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的

更新，因此我们要不断的学习并且学习网页设计不要掉入技术的陷阱，如

果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但

是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技

术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配

等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编

程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动

感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅

3

力和多维空间的超强功能.并且我认为网页设计应该注重实用性，因为它

是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简

单的美。

三．实验步骤:

1.网站主题

我的网站的主题在于从各个方面全面的介绍网络游戏专题,包括每个页

面都有介绍不同的游戏资料，、心得、图片等内容。同时，网站里的每一

个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色，给人带来一

种温和舒适的感觉。最重要给浏览者好的欣赏感受。

2．网站材料

网站材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的

资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资

料，图像资料，Flash动画和网页特效等，用以得来更加具有说服力的页

面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作

网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就

可以做好一个好的网站。

3．网站规划

我的网站共有6个主页面：首页、图片专区、视频专区、玩家交流、帮助中心和联

4

系我们。每一个页面用统一的背景，以保证网站统一的页面风格。如下图：

网站整体色为浅蓝色，突出主题，颜色没有过多，过杂，用以避免给人

一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的

自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，

再用表格具体定位。位置的设计也是重要的一个部分，根据具体内容

决定大体结构，相同的风格调用CSS设计一个样式，以保证随时、准

确的调用。另外，为了网页布局的协调，我加入适当的Flash动态图

片，用以达到更好的浏览效果。

4．网站的制作工具

做网页时主要使用的是Deamweaver8软件。另外，为了处理网页中的其

他元素，还使用了Photoshop、GifAnimator等软件。

5．制作网站的网页

素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网

站时，首先要做到站点的规划，建立一个本地站点“TT”，建立的各个

页面都应该放在本地站点中，在网页制作时所需的各个元素都进行统

Index

5

一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了

“images”文件夹存放图片专用的，网页中的CSS样式文件也统一管

理，做到有条理，我设计的网站首页如下图：

以导航栏为界，上面插入一个自己制作的Flash动画，用为给浏览者

好的视角享受。Flash动画制作过程：首先在网上下载下来的背景图

片，以背景图片的内容做标题，设计“梦幻西游”四个字为主题突出

网页游戏效果，还有网页的网址，加上字体颜色闪动效果，给人带来

一种梦幻的感觉，中间也插入标语，分别上下字体移动，由淡到实的

颜色闪动效果，在由左右变换颜色弹走，显得整个Flash动画比较生

6

动些！

网站导航分别还有图片专区，视频专区，玩家交流等！介绍下图片专

区内容如下：

图片专区页面中四副图片都是上网搜索下来加以PS之后成品的，页面

要设置好位置，每张图片大小格式一样，排整对齐有列序，给人一个

舒适的浏览感觉，例如第一张图片在Photoshop中加以相框的外表显

得图片比较生动点！第二张图片加以光晕滤镜效果！使图片明亮清晰，

第三，四张图片加以修饰亮度暗度光泽等效果，显得图片真实动人。

7

跟住到视频专区页面介绍如下：

视频专区页面比较简单点，只是自己制作一个简单的Flash动画插入

去页面中间显示的。制作的过程就是：新建个深蓝色的背景，在从左

上角设计梦幻西游这四个字标题，右下角输入主页网址格式内容。中

间制作一个IE的图片加入旋转一周动态代码，使IE图片能自动播放

转动，中间也插入文字设置为放大缩细感觉和颜色变换。完成后测试

过就直接发布上页面中排好。还有其他导航都插入相关的资料文字来

完成的，主页左边也做好相关内容的资料题目，每个链接都有吾同资

8

料内容显示。每一个标题都好做相关链接资料的内容题材。在主页、

图片专区、视频专区这三个页面都插入吾同的倾听动人的音乐了。最

后，形成一个统一的整体的，方便给浏览者进行了各个页面间的跳转

6网页视觉效果

视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用

于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，

就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最

基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、

名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。

视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计

都将与目标客户发生直接的接触。

7．上传测试网站

网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运

行自己的网站，用以发现设计中的缺陷并及时改正。

四.设计特色

我觉得我的网页设计最大特点就是色彩谈雅，布局协调，结构清晰。

给人以清丽，纯朴的感觉。另外，设计过程插入大量搜集资料和图片

等，还加入倾听动人的音乐。

9

五．心得体会

我通过这次实训中非常感谢学校给了我这次制作网页的机会，通过这

次实训，我学到了很多有价值的东西。我独立的完成网站设计的全过

程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了

很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，

我搜集了大量的素材和网页设计的技术技巧方面的书，增加知识面，

给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。

最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。

好的素材需要多放面查找资料的，可以从图书、网站和新闻上查找的。

好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精

湛的技能就可以做出最精湛的网页。

这次学习，在制作时想想使自己的网页更加丰富多彩，在网页中插入

图象，动画，动态特效。可是总遇到这样那样的问题，但在同学的帮

助和自己摸索的情况下完成了这个实习的成果。看到了一些知名的网

站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，

五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软

件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应

付自如的。因此反映出学习的还不够，缺点疏漏。虚在加以刻苦钻研

及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出

10

色的网页而努力。

网页设计实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地

去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网

页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，

并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中

的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次

实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了

不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。