网页制作实验报告.docVIP

PAGE

PAGE2

武汉工业学院

2009-2010学年第二学期

《网站开发工具》课程报告

网站主题：轻松一下——美丽の100%

学院计算机与信息工程系

专业信息管理与信息系统

班级09级信管二班

学号090502229

姓名钟雅婷

指导教师林菁

2010年6月10日

网站主题内容及总体结构描述。

1.·1网站主题：网站的总的主题是轻松一夏，主要的想法来自于想让人在炎炎夏日看到我们的网页时有一种轻松、愉悦的心情。

1·2总体结构：首页大概包含了我们四个人做的音乐、美食、旅游以及夏季护肤这四个不同子页的主要内容，依据我们的不同特点插入了图片，背景色等。然后通过导航条分别链接到四个子页上。

网页设计思路和过程论述。

2·1设计思路：我负责的是夏季护肤方面。本网页中用到了Flash、图像、框架集、导航条的设置应用、表单网页、表单的嵌套等。首先用一个Flash做网页的第一页，起到欢迎的作用。然后链接到第二页上，第二页相当于整个网页的目录，上插有导航条，分别链接到第三还有第四页上。

2·2设计过程：

2·2·1子页——Flash页的设计过程：

打开Dreamweaver的主界面新建一个HTML页。

选择插入/媒体/Flash(F)插入一个Flash

2·2·2二级子页——框架集的设计过程：

（1）打开Dreamweaver的主界面，点击文件、新建，出现新建网页对话框。

（2）在新建网页对话框中，选择：类别：框架页，框架集：垂直拆分，并点击创建。出

现框架标签对话框。

修改/框架页/拆分上框架对左边的框架进行拆分

然后分别通过页面属性/背景图像插入背景图。

选择插入/图像对象/导航条添加导航条，并设置鼠标滑过图片改变。如图（a）所示：

(a)

（6）选择插入/标签/HTML/bgsound/浏览进行背景音乐的添加。如图(b)所示：

(b)

（7）选择行为/转到URL/浏览链接，将Flash页链接到这一页上。

（8）保存全部。

2·2·3二级子页——food的设计过程：

（1）绘制布局单元格。如图（c）所示：

(c)

（2）选取所需部分进行文字编辑，剩余部分填充图片。并在该页底部设置返回链接，

连接到框架页。

（3）将框架页中的food导航条链接到本页。

（4）在浏览器中预览，再根据需要调整大小，然后保存。

2·2·4二级子页——sport的设计过程：

用布局表格对网页进行布局再填充相应的内容,如图（d）所示

(d)

（2）在浏览器中预览，再根据需要调整大小，并在该页底部设置返回链接，

连接到框架页。

（3）将框架页中的sport导航条链接到本页，然后保存。

3、结论和总结：

通过本次实验，我充分的领会到了DW的方便。也更加熟练的掌握了对它的的使用，学会了一些以前并不知道的知识如，如何才能在插入背景音乐的时候不要背景音乐的图标，如何让视屏在单击以后再链接到子页上而不是直接自动跳过去等。还学会了如何将以前课堂上学到的网页制作的基本知识串连起来对网页进行设计、处理。在一次又一次误删，被空白页覆盖等等的困难与失败中我学到了很多曾今被看作是小问题而忽视掉的知识。总之，网页设计的大作业让我的知识、细心程度还有耐心都得到了极大地提高。同时还增加我对网页设计的兴趣。