网页设计与制作实训报告.doc

网页设计与制作

实训报告

班级：G093501

姓名：孙建武

学号：47

指导老师：郭建明

实训时间：5.9——5.22

甘肃机电职业技术学院

201

一、实训目的：

1、进一步熟悉和掌握网站建设的基本流程和技术规范；

2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识；

3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识；

4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；

5、具备独立撰写实训报告基本能力；

6、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；

7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站开发、维护和管理奠定基础。、

二、实训项目——星空间街舞俱乐部网站设计

1、网站主题

我的网站的主旨在于从各个方面全面的介绍星空间街舞俱乐部，包括它的团队、环境和课程。另外，网站里还包括我的资料，建立了一个展示自我形象的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是橙色和蓝色搭配，用以展示星空间街舞俱乐部个性的效果。其实最重要的是要做出自己的风格，给浏览者好的欣赏感受。

2、网站材料

主要在网站上搜集所要的网页信息，包括图片、文字。同时，查询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

3、网站规划

我的网站共有7个主页面：首页、介绍、团队、环境、课程、联系我们和关于我。每一个页面用统一的模块，以保证网站统一的页面风格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用CSS设计一个样式，以保证随时、准确的调用。

4、网站的制作工具

做网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop等软件。

5、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“093501”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“img”文件夹来存放图片。网页中的CSS样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

导航栏下面插入了一个flash，用以给浏览者好的视觉享受。左上方插入了一个图片滚动效果，左侧有关于街舞的一些教程，是相关链接的菜单栏，一方面为了布局合理，弥补右边的空缺，另一方面给浏览者提供放便的导航。另外，右边插入的是表格，表格中的背景是蓝色的。用以体现网站的主题色彩，左边加入了图片滚动特效。当鼠标停在图片上时，图片停止滚动。特效代码如下：

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/

title向左无缝滚动/title

styletype=text/css

body,html,div,a{margin:0;padding:0}

#demo{

background:#FFF;

overflow:hidden;

border:1pxdashed#CCC;

width:500px;

}

#demoimg{

border:3pxsolid#F2F2F

}

#indemo{

float:left;

width:800%;

}

#demo1{

float:left;

}

#demo2{

float:left;

margin-left:7px;

}

/style

scriptt