课 程 实 验 报 告
专 业 年 级 2012级网络工程
课 程 名 称 网页设计与制作
指 导 教 师
学 生 姓 名
学 号 013
实 验 日 期 2014年11月19日
实 验 地 点 笃行楼A栋 306
实 验 成 绩
教务处制
2014 年 11 月 19 日
实验项目名称
DreamWeaver工具的基本使用
实验目的及要求
熟悉DreamWeaver工具的基本使用
了解CSS样式面板的使用。
实验内容
利用给定素材，生成一HTML文档，并向该文档添加基本的HTML元素。
利用CSS修改HTML文档的外观
实验步骤
步骤1 制作简单的页面
打开素材文件夹，根据提供的素材，。该页面的一些html元素说明参见图中标注。
具体的要求如下：
Html代码书写要符合规范
步骤2
使用内部样式表，，达到如图所示的效果，
步骤3 为不同的段落文字设置不同的样式。
修改段落文字的样式规则。第一个p元素文字和香蕉有关的，文字颜色设为黄色，第个p元素文字和西红柿有关的，文字颜色设为红色，以此类推。
步骤4，使用div标记作为容器
将与香蕉有关的html元素，用一个div标记包含起来，并将id设置为banana，以此类推，将与西红柿有关的html元素，用一个div标记包含起来，并将id设置为tomato。
步骤5，使用id选择符，为步骤5添加的各个div设置不同的背景色以及边框。
步骤6，修改链接文字的样式
实验环境
基于DreamWeaver软件环境下编辑并在互联网网页里面呈现来完成
实验结果与
分析
步骤1完成页面的浏览效果截图
提供步骤1完成页面的html源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "-">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>fruit</title>
</head>
<body >
<h1>水果的营养价值您知道吗？</h1>
<h2>香蕉</h2>
<img src="file:///D|/网页代码/" width="130" height="130" />
<p >荷兰科学家研究认为：最符合营养标准又能为人脸上增添笑容的水果是香蕉。它所含有的泛酸等成分，是人体的“开心激素”，能减轻心理压力、排解紧张、提高注意力、解除忧郁，令人快乐开心。香蕉的营养价值非常丰富，含有多种人体所需的有效成分，如蛋白质、脂肪、碳水化合物、钙、磷、铁以及<a href="">胡萝卜</a>素，维生素A、B、C、E等物质。</p>
<h2>西红柿</h2>
<img src="file:///D|/网页代码/tomato (2).jpg" width="130" height="130" />
<p>在现代研究发现中，西红柿含有较多<a href="">苹果</a>酸、<a href="">柠檬</a>酸等有机酸、有机酸除了保护维他命C不被破坏外，尚可软化血管、促进钙、铁元素的吸收，帮助胃液消化脂肪和蛋白质，这是其他蔬菜所不及的。这也证实了西红柿减肥的可信度。 </p>
<h2>葡萄</h2>
<p><img src="file:///D|/网页代码/" width="130" height="130" /></p>
<p>葡萄含糖量高达10%-30
网页设计1实验报告 来自淘豆网m.daumloan.com转载请标明出处.
