网页制作实训总结

成都航空职业技术学院

《网页设计》

实训报告

专业：计算机网络技术

班级：

学号：

姓名：

指导教师：

2013年6月

《网页设计》实训报告

一、实训内容

本次实训内容是：制作网站

二、实训目的及要求

本次实训目的是：通过对网站的开发与设计，对理解网站的创建、网页的策

划、设计与制作都将起到很好的巩固课堂教学效果；加深理解制作网站和网页的

过程，并作了实际演练，检验了教学和学习效果，为日后的工作打下良好坚实

的基础，同时也为网站的后台开发提供前台支持。

要求：利用《指导书》、网络和其他可用资源独立完成实验内容，并完成实

训报告。

三、实训时间及进度安排

•周一：布置任务与站点创建与规划

•周二：收集和整理材料，页面素材设计

•周三：网站首页设计和开发

•周四：网站子页设计和开发

周五：网站调试和作业验收

四、实训场地、设备：

实训场地介绍：实训楼3楼A306教室

用到的主要设备、工具以及主要作用：电脑、Dreamweaver软件、ps

五、实训步骤及操作方法

1.总体功能介绍

制作一个以介绍自我与交友为目的的个人网站，让访问这个

网站的访客能够直观快速的了解我。

2.总体框架结构设计

首页以四个导航链接子页面，导航下为欣赏文段，文段下是Flash,整

个网页以蓝色为主色调。

3.页面设计

（1）首页（页面、设计思路、主要代码）

网站标志：是一张图片运用ps从中插入自己名字的拼音首字母。

导航：首页，个人简介，个人写作，个人照片。

首页主要内容为句子赏析•、诗歌连接与一个留言板

整个首页以蓝色为主浅灰色为辅，展现一种清新大方的风格。

（2）各子页（页面、设计思路、主要代码）

个人简介：在网页上有天蓝色的背景给人清爽大方的第一感

觉，同时写上个人的介绍，对来访者介绍自己。

个人写作：在这个页面上写上自己喜欢的作家的文章，并且

在本页面的二级子页面上附上作者的资料，让来访者更加了解我的

爱好。

个人照片：在页面中间放上我的生活照片，并以滚动的形式呈

现出来，让大家更能够直观的了解我认识我。

主要代码:留言板<divid=*Layer6zz>

<formname="fbrni1"method="post"action="">

<label><spanclass="STYLE5">留言

</span>

<textareaname="textfleld"ro\vs="10"></textarea>

</label>

<P>

<label>

<inputtype="subinil"

name="SubmiT'value="提交"〉

</label>

<label>

<inputtype="submit"name="Submit2"value="取消"》

</label>

</p>

</fbrm>

</div>

相片滚动

<marqueedirection=,,!eft"behavior="alternate">

4.项目实现

首先用PS做这个页面的布局，然后切片，注意把导航与要编辑的区域明确

的规划出来。在用DW打开网页进行编辑，把要编辑区域的图片改为背景图片然

后进行内容的补充

在首页中插入flash,并且把参数wmode的值设置为transparent

并且用单元格的层与子层的关系来固定flash所在的层

图片滚动，用〈marqueedirection="left"behavior="akernate”>实现

六、实训技术总结

学会PS与DW的联合运用

熟悉文本、图片、动画等多媒体素材处理

学会主页及其他页面内容设计

熟悉网站调试、发布和后期维护

七、主要收获及体会

更加熟悉了用PS与flash对素材进行处理，复习与改进了是用DW进行网页

设计的技巧

八、对本门课程的建议和意见

希望能够多在实训楼在老师的指导下学习与实践，这样能够提高同学们的

学习效率与对知识的理解却运用。

实训指导老师评语和成绩评定: