《静态网页制作与素材加工实训报告》_静态网页制作实训报告

《静态网页制作与素材加工实训报告》由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“静态网页制作实训报告”。

山西工程职业技术学院 《静态网页制作》 实训报告书

系别：计算机工程系 专业：计算机网络 设计班级：网14班 姓名：张静龙

指导教师：乔文彪常娟

2012年12月27日

一、指导教师

乔文彪常娟

二、设计目的与要求

此次的网站设计使我们必须具备有：

（1）色彩构成、（2）图形、图像素材的获取与编辑处理、（3）音频、视频、动画素材的获取和处理、（4）简单数据库设计、（5）Dreamweaver软件的应用等相关知识。

本次《静态网页制作》《网页制作》设计可以培养我们的创新能力，把所学理论与实际操作紧密结合起来，提高其独立解决问题的能力。

三、设计内容、过程以及设计效果

1、设计内容：

我此次设计的网站主题是教育类网站，名为《思科网络学院》，设计中包含了4个导航信息，多个二级页面以及少许的三级页面，题型资料可供下载使用。

在此次期间主要是通过在网上搜集了相关的素材（题库以及各种页面效果的代码等）以及从图书馆借阅相关的书籍来进行对个人站点效果的设计。本次设计的网站主要是用来帮助大家快速了解思科网络学院的最新动态以及学习到思科网络知识，由于站点的容量有限，在这里我总结了几种学习思科网络的方式方法和经典题型。网站的设计来源主要是参考《思科网络学院》和《思科网络学习空间》两大网站，其中包含思科各种教程以及题库，在我的网站设计中也对这两个网站

进行了链接。

2、设计过程：

1、首先分析站点的设计思路及方法。

首先确定了自己的设计思路是思科网络学院，为了完成本次设计会用到相应的资料和素材，而网络和图书馆为我们提供了信息来源。

2、网站架构的确定以及目录链接的确定 架构的设计用到了word，网站的目录确定为 首页、概述、课程介绍、工具和资源、思科网络学院在中国5个导航信息栏，以及设计了各级页面中的导航信息。

链接则是由大量的二级页面，少量的三级页面，文本文档以及各种外部链接组成。

3、配置服务器及站点建立 开始进行配置服务器及站点的建立。本次建立的站点名为cisco，为防止站点目录下出现解析读取错误，所有目录下的所有文件均采用英文名字命名。

4、网站各级页面的设计 本次设计使用的是PS 7.0 专业绘图软件，通过使用PS的各项功能来设计网站的各级页面（一级页面，二级页面）。

5、网站各种标志的设计 此次网站logo的设计主要是模仿官方logo，然后再加以修饰。

6、网站导航及板块设计、版权信息设计 导航栏的设计主要用到的技术是PS中圆角矩形框工具以及文字工具进行设计，版权信息则是参考教材中的格式进行设计。

7、切片制作及各级页面的实现 通过PS的切片功能对设计好的全图像页面进行切片，然后通

过存储为Web格式来生成html格式的网页。

8、首页动态展示栏以及时钟的设计

完成上面的全图像页面设计后，就开始用Dreamweaver软件对首页进行动态设计。首先是从网上搜索到代码用以实现动态图片展示栏和时钟的效果。之前切片切好的页面用来做插入时钟代码的时候，结果造成网页拥挤，后来又重新进行切片，插入背景，然后再放入时钟代码，效果就做好了。

9、网页元素添加及格式设置

然后对首页中的图片滚动进行设计，在这里用到了书上相应的代码，至此一个网站的首页就完成了。在二级页面则是用到了大量的嵌入式框架，来对文字进行编辑。在其中一个二级页面（思科网院在中国）中用到了弹出式信息栏来显示各省思科网院的情况。

10、站点各级页面的链接添加及测试

对做好的各级页面进行链接，在这里可以用到库，避免了繁琐的步骤，最后测试网站。

3、设计效果：

在此次设计中使用的效果有：

Dreamweaver：动态信息展示栏、Flase动画、多次使用嵌入式框架、时钟、动态滚动图片、链接、弹出式信息栏、插入表格、背景，PS：切片工具、插入圆角矩形框、横排文字工具、魔棒、插入图片，渐变工具等。

四、设计地点与时间安排：

时间：第17-18教学周地点：实训楼