音乐网页设计实验报告

网页制作实验报告

课程名称：

班级：

学号：

姓名：

一、实验目的：

本实验通过学习使用Dreamweaver 8设计网页，来达到熟知一个网站的网页整个设计过程是怎样进行的，并能自行设计一个具有鲜明主题的完整网页的目的。

二、实验用仪器设备、器材或软件环境

HP电脑、Windows XP操作系统、Dreamweaver 8

三、实验原理及方案

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

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

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

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

四、实验步骤

1、确定网页的主题和风格，收集各种可能需要的设计素材（主要是图片，音乐，动画，视频）；

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

3、Windows环境下，运行Drameweaver8

4、创建框架

在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。

（1）、使用预制框架集

1)、新建一个框架集，在弹出德对话框中选择“上方固定，左方嵌套”。

2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。

5、保存框架

选择菜单栏>文件>保存全部，将框架集保存为yinyue.html，上方框架保存为kj1.html，左侧框架保存kj2.html，右侧框架保存为kj3.html。

这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。

6、编辑框架式网页

虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。

7、在框架中使用超级链接

在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。

分页1

分页2

分页3

“目标”下拉菜单中的选项：

* _blank 放在新窗口中。

* _parent 放到父框架集或包含该链接的框架窗口中。

* _self 放在相同窗口中（默认窗口无须指定）。

* _top 放到整个浏览器窗口并删除所有框架。

在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：

* mainFrame 放到名为mainFrame的框架中。

* leftFrame 放到名为leftFrame的框架中。

* topFrame放到名为topFrame的框架中。

8、制作框架页面

(1)、选择菜单栏>窗口>框架，打开框架面板，选中整个框架集，如下图所示：

在属性面板中，将行的值设置为100，单位为像素，如下图所示：

(2)、选择菜单栏>窗口>框架，打开框架面板，选中子框架集，如下图所示：

在属性面板中，将列的值设置为200，单位为像素，如下图所示：

这样，我们就完成了对整个框架的布局。下面我们来布局各个框架页面。

(3)、鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了“yinyue.html”。在页面属性中将上、下、左。右边距全部设为0。

插入一张背景图片，再插入一个层，在层上输入网页主题“用音乐疗伤”。然后再插入背景音乐“1.MP3”。

、

(4)、鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了UntitledFrame-2.html，在页面属性中将上、下、左。右边距全部设为0。

插入一个3行1列的表格，表格宽度为95％，居中对齐。将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。分别输入文字设置导航栏目。

分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，目标选择mainFrame框架。

(5)、鼠标在mainFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了UntitledFrame-3.html，在页面属性中将上、下、左。右边距全部设为0。

五、实验结果分析：

1、当所有工作完成后，在IE浏览器中测试所建网站，达到了预先设计的效果，实验是成功的！

2、该网站还可以进一不美化和丰富！

3、网页效果图附后

六、实验中存在的问题及解决方案：

1、对Dreamweaver 8环境不是很熟悉，收集的素材不是很好,设计不是很全面

2、由于缺乏美术功底，网页中大部分素材来源于Internet

七、心得体会：

1、做网页，在确定好网站的内容后，关键在于设计网站的风格和给网站布局！

2、网页是计算机技术和美学知识的结合，这不仅要求制作员要熟悉网页制作软件环境，而且还要有一定的美术功底！