网页制作实验报告

网页制作实验报告主题：NBA的“答案”阿伦·艾弗森

课程：网页制作与设计

班级：07级电信班

******

学号：***********

一、实验目的

网络在现今生活中的重要地位已经不言而喻，我们上网都避免不了浏览网页。本实验通过学习使用Dreamweaver 8设计网页，来达到熟知一个网站的网页整个设计过程是怎样进行的，并能自行设计一个具有鲜明主题的基本完整的静态简单网页的目的。

二、实验设计器材及环境

1、一台台式机或者笔记本

2、Windows xp操作系统

3、Dreamweaver 8软件、photshop软件

三、实验原理与方案

Dreamweaver 8是常见的设计工具，在设计过程中基本上不需要亲自动手设计源代码，初学者也不会设计源代码，要设计一个满意的网页仍要遵循一定的步骤：

1、确定网站主题、风格和布局

2、搜集相关素材，比如音频、图片、文本等

3、根据网站主题，在网站中放入相关元素和内容

四、实验步骤

(一)、准备素材

确定网页的主题和风格，收集各种可能需要的设计素材，素材包括图片，音

乐，动画，视频，由于刚刚开始学习制作网页，所以我主要搜集图片和必须的文本。并新建一个文件夹把搜集的素材放到该文件夹里面。

（二）、设计规划

规划网站，对网页的整体框架和结构进行设计，确定整个网站的内容，明确自己的网页需要满足的功能和内容。

（三）、具体设计

1、创建站点。点击“站点”下拉菜单的“创建站点”，名字站点名称和站点在计算机的路径。

2、在电脑里面运行Dreamweaver 8,在“文件”下拉菜单点击“新建”，打开“新建文档”对话框，选举“框架集”里的“上方固定，下方左侧嵌套”，并点击“创建”按钮

3、调整框架的大小，分别保存各个框架和框架集并命名（注：不能用汉字，只能用英文字母）

4、分别给各个框架加入合适的背景色或者或者插入图片

5、把用photshop做好的图片插入到顶部的框架中，调整图片的大小合适。在图片上面插入两个层，分别写入文本“NBA的答案”和“阿伦艾弗森”，调整字体类型和大小。如图

6、在左下方的框架选择合适的背景颜色，并加入五个层，分别输入文本“返回首页”、“经典名言”、“个人荣耀”、“进攻特点”、“薪水技术”和“精彩瞬间”。如图所示

7、创建5个不同的基本页面

（1）、点击“文件”下拉菜单的“创建”，创建基本页面，在打开的页面中设置背景色，并插入一个层，把准备好的文本插到层里面，设置好文本的字体类型、大小和颜色。

（2）、和上步一样设置一个页面，只是背景颜色不一样。插入一个一行两列的表格，分别在表格的两个单元格中插入文本，设置文本的大小、类型和颜色。（3）、前面同上方法，后面插入一个一行一列的表格，并插入文本，调整好文本大小、类型和颜色。

（4）、点击“文件”下拉菜单的“创建”，创建一个基本页面，在打开的页面设置背景颜色，在页面上插入一个一行两列的表格，在表格中的左单元格中插入他的历年的薪水情况，在右单元格中插入他的技术特点相关的资料文本。（5）、开始方法和上面一样，并插入一个两行两列的表格，并在表格的单元格中插入艾弗森在NBA的比赛精彩瞬间的图片，调整好图片的大小。在表格右边

空白处插入一个层，在层中插入文本，文本主要包括艾弗森的基本情况，并调整好文本的颜色、大小和类型。如图

8、在右下方的框架中设置背景颜色。并插入一个艾弗森为背景的图片，调整好图片的大小。在图片右边插入一个层，在层里面设置好文本的放进去，并调整好文本的大小、颜色和类型。

9、分别选中框架中的各个层，并在层里面选中文本，然后在下角的属性中点击链接，并把链接到上面设置好的页面中。还有点击目标的下拉条，设置成刚才右框架的名称。

10、选中左下家的框架，并选中以“返回首页”的层，链接到主页上的主页框架，目标也和上面的步骤一样，只是把那也设置成主页的一部分。

11、点击浏览器预览/调制，然后浏览情况，看看设计的情况，再度修改。如图

12、在最上框架上插入一个层，并在层里写入文本“mic”,并设置插入一段准备好的音频。如图

五、体会心得