网页设计实训报告
河南工程学院
实习报告
专业信息管理
班级
姓名
年月日
实习（训）报告评语
等级：
评阅人：职称：
年月日
河南工程学院
实习（训）报告
实习目的（内容）：网页设计与制作--个人网站
实习时间：自12 月26 日至12月30日
共 5 天
实习地点：C507
实习单位：河南工程学院
指导老师：系主任：
一、实训意义
通过校内的实际训练，使自己掌握在Windows环境下Dreamweaver CS5的基本操作和使用技能的基本方法，掌握相关理论知识；培养了自己设计网页的技能，提高自己学习课程的积极性，为今后学习其它有关网页设计与制作打下一个良好的基础。
二、实训目的
1、通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能；
(1) 掌握规划网站的内容结构，目录结构,链接结构的方法；
(2) 熟练掌握网页制作软件Dreamweaver CS5的基本操作和使用技能；
(3) 掌握页面的整体控制和头部内容设置的方法；
(4) 熟练掌握网页页面布局的各种方法；
(5) 熟练掌握在网页中输入，设置标题和正文文字的方法。
(6) 熟练掌握在网页中插入图像、flash动画和背景音乐的方法；
(7) 熟练建立各种形式的超级链接的方法；
(8) 掌握表单网页制作方法；
(9) 掌握网页特效制作方法；
(10)掌握网站测试的方法。
2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等；
3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质；
4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。
三、实训步骤
站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。
进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化
设计。
网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、内容录入等。
动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。
综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）
网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。
1、网站主题
我的网站的主旨在于从各个方面全面的介绍木头羊，展示木头羊的想法，包括资料、相片。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅红色，用以展示木头羊性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。
2、网站材料
主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。
3、网站规划
我的网站共有7个主页面：进站页、首页、注册、关于木头羊、留言版和两个相册页面。每个页面都贴近网站本身的风格。
我是用“勇敢一点”命名网站名，用以方便存储和转发。网站整体色调为浅红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。
4、网站的制作工具
做网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop、Flash等软件。
5、制作网站的网页
素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“个人网站”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“wo”文件夹来存放图片。同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的网站的进站页面如下图：
部分代码如下：