《网页制作与设计》课程实验指导书第一部分前言通过上机实验不仅要验证教材和讲课内容，更重要的是能通过上机实训帮助实训者深入了解网页制作与设计的方法，掌握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、独立安装Dreamweamver82、独立运行网页文件实验2 Html语言基本标记实训一、实验目的在internet网，查看至少三个网站首页的html代码的<head>部分都使用了那些html标记。
二、实验原理HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。
HTML一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。
三、实验条件1、学生计算机2、internet3、dreamwearver四、实验内容浏览internet上的网页，查看网页上Html的基本标记，并查阅资料理解这些标记的含义。
五、实验步骤1、打开“百度”首页，如图2-1所示。
图2-1 百度首页2、执行下一操作，如图2-2所示。
图2-2 打开源文件3、打开“源文件”的结果如图2-3所示。
图2-3 源代码界面4、查看其中的基本标记。
基本标记包括：<head>、<title>、<base>、<basefont>、<isindex></isindex>、<meta>、<style>、<link>、<script>。
5、在internet上搜索html基本标记的信息，了解这些标记的含义。
六、实验报告1、明确实验目的2、明确实验步骤3、Html的基本标记实验3 用Html语言编写网页实训时间：2012年3月18日一、实验目的用记事本编写一个网页文件netpage1.html。
其中包括网页标题“欢迎学习HTML语言”。
二、实验原理HTML只是标示语言，基本上只要明白了各种标记的用法便算学懂了html，html 的格式非常简单，只是由文字及标记组合而成，编辑方面，任何文字编辑器都可以，只要能将文件另存成ascii 纯文字格式即可，当然，以专业的网页编辑软件为佳。
三、实验条件1、学生计算机2、dreamwearver3、Html基础知识四、实验内容用记事本编写一个网页文件netpage1.html。
其中包括网页标题“欢迎学习HTML语言”，网页内容为“欢迎进入本网页！”。
实现网页信息的浏览。
五、实验步骤1、打开Windows操作系统中的记事本，如图3-1所示。
图3-1 记事本2、在记事本中编写html语言，如图3-2所示。
图3-2 netpage1.html编辑界面3、保存该网页，如图3-3所示。
图3-3 保存netpage1.html4、单击“保存”，得到netpage1.html网页，如图3-4所示。
图3-4 netpage1.html界面5、双击“netpage1.html”，浏览该页面，如图3-5所示。
图3-5 netpage1.html浏览界面6、用同样的方法练习编写其他网页内容的html网页。
六、实验报告1、明确实验目的2、明确实验步骤3、Html语言的基本结构4、实验体会实验4 认识超链接实训一、实验目的掌握html语言的网页链接标记，掌握html网页链接的基本形式，掌握如何修饰网页链接的状态。
二、实验原理内部链接, 外部链接(从链接的位置来分的话) ；文字链接,图片链接,图片热点链接,(链接的对像来分) ；其它的一些链接: 如本页刷新(主要做测试用),邮箱链接,锚点链接，下载文件超链接等。
三、实验条件1、学生计算机2、dreamwearver3、Windows记事本3、Html语言中超链接的标记知识四、实验内容上internet网，找出至少两个包含热点链接的网页，查看它们的源文件，找出其中的热点链接标记，并指出热点链接区域的形状。
五、实验步骤1、打开“新浪”网页首页，如图4-1所示。
图4-1 新浪首页2、打开“新浪”网页的源代码，如图4-2所示。
图4-2 新浪首页源代码3、查看源代码中的有关超链接的标记超链接包括：内部链接, 外部链接(从链接的位置来分的话) ；文字链接,图片链接,图片热点链接,(链接的对像来分) ；其它的一些链接: 如本页刷新(主要做测试用),邮箱链接,锚点链接，下载文件超链接。
4、在internet上搜索html超链接标记的信息，了解这些标记的含义，并指出这些超链接是什么类型的超链接。
六、实验报告1、明确实验目的2、明确实验步骤3、Html语言的超链接类型4、实验体会实验5 创建带有多种超链接网页实训时间：2012年4月15日一、实验目的用记事本编写一个网页文件Linkpage1.html。
其中包括文本链接，图像链接，锚点链接等。
二、实验原理文本链接<a href=“courses/course.htm”>学习园地</a> ；图片链接的HTML 标记示例：<a href="courses/course.htm"><img src="xihu.jpg" width="200" height="113" border="0" ></a>；热点图链接的HTML标记示例：<map name="Map"> <area shape="rect" coords="73,43,120,61" href="URL"></map>；E-mail链接的HTML标记示例：<a href="mailto:sj_lfg@">给我写信</a>；命名锚链接的HTML标记示例：命名锚：<a name="study"></a>链接锚：<a href="course.htm#study" target="_self">学习园地</a>等。
三、实验条件1、学生计算机2、dreamwearver3、Windows记事本3、Html语言中超链接的标记4、实验体会四、实验内容用记事本编写一个网页文件Linkpage1.html。
其中包括文本链接，图像链接，锚点链接等。
五、实验步骤1、在记事本中编写html语言，如图5-1所示。
图5-1 超链接源代码2、保存该网页，如图5-2所示。
图5-2 保存netpage1.html3、单击“保存”，得到netpage1.html网页，如图5-3所示。
图5-3 netpage1.html界面4、运行该网页，如图5-4所示。
图5-4 超链接运行界面六、实验报告1、明确实验目的2、明确实验步骤3、包含Html语言的超链接标记的网页。
4、实验体会实验6 查询并认识CSS样式实训一、实验目的在internet网，浏览至少两个网站，查看其中CSS代码部分，并说明都有哪些标识器的类型。
二、实验原理CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。
CSS 按其位置可以分成三种：内嵌样式(Inline Style) 、内部样式表(Internal Style Sheet) 、外部样式表(External Style Sheet)。
三、实验条件1、学生计算机2、dreamwearver3、Windows记事本3、CSS样式符号四、实验内容上internet网，找出至少两个包含CSS样式，查看这些网页中包含哪些类型的CSS样式。
五、实验步骤1、打开“新浪”网页首页，如图6-1所示。
图6-1 新浪首页2、打开“新浪”网页的源代码，如图6-2所示。
图6-2 新浪首页源代码界面3、查看源代码中的有CSS样式CSS样式包括：内嵌样式(Inline Style) 、内部样式表(Internal Style Sheet) 、外部样式表(External Style Sheet)。
4、在internet上搜索CSS样式的信息，了解这些CSS样式的含义，并指出这些CSS是什么类型的样式。
六、实验报告1、明确实验目的2、明确实验步骤3、包含CSS样式的网页。
4、实验体会实验7 网页中应用CSS样式实训一、实验目的掌握CSS样式表的书写规则；了解选择器及其写法；掌握CSS样式表的3种方式；使用CSS样式表编辑页面。
二、实验原理内嵌样式(Inline Style)，Inline Style是写在Tag里面的。
内嵌样式只对所在的Tag有效。
内部样式表(Internal Style Sheet) ，内部样式表是写在HTML的<head></head>里面的。