《网页制作与设计》实验指导书

《网页制作与设计》课程实验指导书

第一部分前言

通过上机实验不仅要验证教材和讲课内容，更重要的是能通过上机实训帮助实训者深入了解网页制作与设计的方法，掌握Html语言知识。

第二部分目录

实验1 安装Dreamweaver实训

实验2 Html语言基本标记实训

实验3 用Html语言编写网页实训

实验4 认识超链接实训

实验5 创建带有多种超链接网页实训

实验6 查询并认识CSS样式实训

实验7 网页中应用CSS样式实训

实验8 查询并认识框架网页实训

实验9 框架网页实训

实验10 网站设计实训

第三部分实验内容

实验1 安装Dreamweaver实训

一、实验目的

熟悉Dreamweaver环境；该软件运行环境的配置；简单网页的编写和运行。

二、实验原理

Dreamweaver（把图像、动画、文字链接组合管理）是一个“所见即所得”的可视化网站开发工具。

三、实验条件

四、实验内容

安装Dreamweaver，并在其上运行简单的网页界面。

五、实验步骤

1、安装Dreamweaver

（1）、首先双击可打开安装文件，如图1-1所示。

图1-1 准备安装界面

（2）然后等一下，就会看到出现一个图形界面，在点下一步，如图1-2所示。

图1-2 欢迎界面

（3）然后就可以看到一个图形界面，然后点同意，如图1-3所示。

图1-3 安装界面

（4）就可以看到下面的一个安装图形界面，直到有个按扭是完成，如图1-4所示。

图1-4 安装完成界面

2、运行Html页面

（1）打开Dreamweaver8，如图1-5所示。

图1-5 打开Dreamweaver8

(2) 启动后的界面，如图1-6所示。

图1-6 开启界面

（3）然后点击一下，在“创建新项目”下面的HTML 就可以进去了如图1-7所示。

图1-7 html设计界面（1）

（4）在Html设计界面中输入一段文字，如图1-8所示。

图1-8 Html设计界面（2）

（5）运行网页，如图1-9所示。

图1-9 运行

六、实验结果

1、独立安装Dreamweamver8

2、独立运行网页文件

实验2 Html语言基本标记实训

一、实验目的

在internet网，查看至少三个网站首页的html代码的部分都使用了那些html标记。

二、实验原理

HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。HTML一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

三、实验条件

1、学生计算机

2、internet

3、dreamwearver

四、实验内容

浏览internet上的网页，查看网页上Html的基本标记，并查阅资料理解这些标记的含义。

五、实验步骤

1、打开“百度”首页，如图2-1所示。

图2-1 百度首页2、执行下一操作，如图2-2所示。

图2-2 打开源文件3、打开“源文件”的结果如图2-3所示。

图2-3 源代码界面

4、查看其中的基本标记。

基本标记包括：、