课程实验报告
专业年级2012级网络工程课程名称网页设计与制作
指导教师
学生姓名
学号20122205051013 实验日期2014年11月19日实验地点笃行楼A栋306 实验成绩
教务处制
2014 年11 月19 日
实验项目名称 DreamWeaver工具的基本使用
实验目的及要求 1.熟悉DreamWeaver工具的基本使用
2.了解CSS样式面板的使用。
实验内容 1.利用给定素材，生成一HTML文档，并向该文档添加基本的HTML元素。
2.利用CSS修改HTML文档的外观
实验步骤 步骤1 制作简单的页面
打开素材文件夹，根据提供的素材，完成一个如下图所示的简单页面fruit.html。该页面的一些html元素说明参见图中标注。
具体的要求如下：
Html代码书写要符合规范
步骤2 利用css改变fruit.html的外观
使用内部样式表，运用css修改fruit.html的外观，达到如图所示的效果，
步骤3 为不同的段落文字设置不同的样式。
修改段落文字的样式规则。第一个p元素文字和香蕉有关的，文字颜色设为黄色，第个p元素文字和西红柿有关的，文字颜色设为红色，以此类推。
步骤4，使用div标记作为容器
将与香蕉有关的html元素，用一个div标记包含起来，并将id设置为banana，以此类推，将与西红柿有关的html元素，用一个div标记包含起来，并将id设置为tomato。
步骤5，使用id选择符，为步骤5添加的各个div设置不同的背景色以及边框。
步骤6，修改链接文字的样式
实验环境 基于DreamWeaver软件环境下编辑并在互联网网页里面呈现来完成
实验结果与
1.步骤1完成页面的浏览效果截图
分析
2.提供步骤1完成页面的html源代码
"https://www.doczj.com/doc/dd18647986.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
荷兰科学家研究认为：最符合营养标准又能为人脸上增添笑容的水果是香蕉。它所含有的泛酸等成分，是人体的“开心激素”，能减轻心理压力、排解紧张、提高注意力、解除忧郁，令人快乐开心。香蕉的营养价值非常丰富，含有多种人体所需的有效成分，如蛋白质、脂肪、碳水化合物、钙、磷、铁以及胡萝卜素，维生素A、B、C、E等物质。
.jpg)
在现代研究发现中，西红柿含有较多苹果酸、柠檬酸等有机酸、有机酸除了保护维他命C不被破坏外，尚可软化血管、促进钙、铁元素的吸收，帮助胃液消化脂肪和蛋白质，这是其他蔬菜所不及的。这也证实了西红柿减肥的可信度。
葡萄含糖量高达10%-30%，以葡萄糖为主。葡萄中的多量果酸有助于消化，适当多吃些葡萄，能健脾和胃。葡萄中含有矿物质钙、钾、磷、铁以及多种维生素B1、B2、B6、C和P等，还含有多种人体所需的氨基酸，常食葡萄对神经衰弱、疲劳过度大有裨益。把葡萄制成葡萄干后，糖和铁的含量会相对高，是妇女、儿童和体弱贫血者的滋补佳品。
3.步骤2添加的css样式规则源代码（注意只需要css的
代码）
#hh {
color: #999999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
body {
font-size: 14px;
color: #862425;}
4.提供步骤2完成页面的浏览效果截图
5.提供步骤3添加的css样式规则源代码（注意只需要css的代码
改动的部分）
.yellow {
color: #ffb734;}
.red {
color: #ff3030;
}
.pure {
color: #d047d0;
6.步骤3完成页面的浏览效果截图
7.提供步骤4完成页面的html源代码
"https://www.doczj.com/doc/dd18647986.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
荷兰科学家研究认为：最符合营养标准又能为人脸上增添
笑容的水果是香蕉。它所含有的泛酸等成分，是人体的“开心激素”，能减轻心理压力、排解紧张、提高注意力、解除忧郁，令人快乐开心。香蕉的营养价值非常丰富，含有多种人体所需的有效成分，如蛋白质、脂肪、碳水化合物、钙、磷、铁以及胡萝卜素，维生素A、B、C、E等物质。
在现代研究发现中，西红柿含有较多苹果酸、柠檬酸等有机酸、有机酸除了保护维他命C不被破坏外，尚可软化血管、促进钙、铁元素的吸收，帮助胃液消化脂肪和蛋白质，这是其他蔬菜所不及的。这也证实了西红柿减肥的可信度。
葡萄含糖量高达10%-30%，以葡萄糖为主。葡萄中的多量果酸有助于消化，适当多吃些葡萄，能健脾和胃。葡萄中含有矿物质钙、钾、磷、铁以及多种维生素B1、B2、B6、C和P等，还含有多种人体所需的氨基酸，常食葡萄对神经衰弱、疲劳过度大有裨益。把葡萄制成葡萄干后，糖和铁的含量会相对高，是妇女、儿童和体弱贫血者的滋补佳品。
8.步骤5添加的css样式规则源代码（注意只需要css的代码）
#banana {background-color: #333333;
border: 1px solid #FF0000;}
#tomato { background-color: #FF99FF;
border: 1px solid #33CC33;}
#grapes {background-color: #CCCCCC;
border: 1px solid #330099;}
9.步骤5完成页面的浏览效果截图
10.提供步骤6添加的css样式规则源代码（注意只需要css的代码）
a:link { font-weight: bold;
color: #6699CC;text-decoration: none;}
11.你对网页的结构、内容与外观的分离是如何理解的。
我认为网页结构就是网页内容的布局。网页布局的好与坏对用户体验有极大的影响。而且，还在一定程度上影响网站的整体结构及页面被收录的数量。网
页的内容则是呈现给用户终端看到的文字、图片、表格及音频视频等。由网页
内容的表现形式及其元素可以将网页的分为两种形式，即是动态网页和静态网
页。
12.最后给出300字左右的实验总结。
通过老师的仔细讲解，我了解到，html语言不是一种编程与语言，而是一种
标记语言。这次的实验操作过后，对html标记语言有了更深的认识和了解。通
过标记控制网页内容的表现形式，如标题、段落、换行等。可根据自己需要，
改变属性的属性值，得到想要的结果，如，文字的字体、大小、和及颜色。通
过本次实验，我对网页制作及开发有了更深层次的了解。制作过程中应用了a，
a：link，a:hove实现链接的样式，实现相应的跳转操作。
在制作过程中也遇到了不少的问题，但在老师和同学的帮助下，都克服了
困难。这些经历让我对设计细节有了更深的关注，是十分宝贵的人生经验。网
页设计其实也很有趣，希望在今后的时间里，我能把这门课程学到实处，学得
更好，将其应用到以后的工作中。
教师评语