《网页设计1实验报告.docVIP

课 程 实 验 报 告 专 业 年 级 2012级网络工程 课 程 名 称 网页设计与制作 指 导 教 师 学 生 姓 名 学 号 20122205051013 实 验 日 期 2014年11月19日 实 验 地 点 笃行楼A栋 306 实 验 成 绩 教务处制 2014 年 11 月 19 日 实验项目名称 DreamWeaver工具的基本使用 实验目的及要求 熟悉DreamWeaver工具的基本使用 了解CSS样式面板的使用。 实验内容 利用给定素材，生成一HTML文档，并向该文档添加基本的HTML元素。 利用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完成页面的html源代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titlefruit/title /head body h1水果的营养价值您知道吗？/h1 h2香蕉/h2 img src=file:///D|/网页代码/banana.jpg width=130 height=130 / p 荷兰科学家研究认为：最符合营养标准又能为人脸上增添笑容的水果是香蕉。它所含有的泛酸等成分，是人体的“开心激素”，能减轻心理压力、排解紧张、提高注意力、解除忧郁，令人快乐开心。香蕉的营养价值非常丰富，含有多种人体所需的有效成分，如蛋白质、脂肪、碳水化合物、钙、磷、铁以及a href=carrot.html胡萝卜/a素，维生素A、B、C、E等物质。/p h2西红柿/h2 img src=file:///D|/网页代码/tomato (2).jpg width=130 height=130 / p在现代研究发现中，西红柿含有较多a href=apple.html苹果/a酸、a href=lemon.html柠檬/a酸等有机酸、有机酸除了保护维他命C不被破坏外，尚可软化血管、促进钙、铁元素的吸收，帮助胃液消化脂肪和蛋白质，这是其他蔬菜所不及的。这也证实了西红柿减肥的可信度。 /p h2葡萄/h2 pimg src=file:///D|/网页代码/grape.jpg width=130 height=130 //p p葡萄含糖量高达10%-30%，以葡萄糖为主。葡萄中的多量果酸有助于消化，适当多吃些葡萄，能健脾和胃。葡萄中含有矿物质钙、钾、磷、铁以及多种维生素B1、B2、B6、C和P等，还含有多种人体所需的氨基酸，常食葡萄对神经衰弱、疲劳过度大有裨益。把葡萄制成葡萄干后，糖和铁的含量会相对高，是妇女、儿童和体弱贫血者的滋补佳品。 /p /body /html 步骤2添加的css样式规则源代码（注意只需要css的代码） #hh { color: #999999; border-b