实验8 在网页中添加样式

1、实验8 在网页中添加样式 实验要求通过实验，了解如何在网页中添加样式，定义CSS样式有三种：类、标签和高级，分别如何设置这三类样式。 说明 默认情况下，Dreamweaver使用层叠样式表（CSS）样式设置文本格式。使用属性检查器或菜单命令应用于文本的样式都将创建CSS规则，这些规则嵌入在当前文档的head部分中。CSS样式使用用户可以更加灵活地控制页面外观，从精确的布局定位到特定的字体和文本样式。对应知识点：创建CSS样式应用自定义CSS样式对应Macromedia Dreamweaver MX 2004标准教程第7章的内容。实验课时：2课时实验素材没有添加CSS样式的网页（可在本书配套光盘

2、exp8-9sucai08中查找）。实验步骤1.启动Dreamweaver MX 2004程序，打开本书配套光盘素材中准备的实验素材“page08.htm”。如图8-1所示。 说明 这是一个没有进行任何样式设置的纯文本网页。我们通过这个网页来完成在网页中添加样式的操作。2.选择菜单“窗口”à“CSS样式”命令，打开CSS样式面板，如图8-2 图8-1 网页素材 图8-2CSS样式面板 说明 按照定义CSS的方式，CSS在页面中的使用方式主要有三种不同的类型。（1） 局部套用CSS样式。将CSS语法定义在HTML标记旁边，这时定义的CSS样式只能影响该HTML标记，对于其他的HTML标

3、记则无影响。（2） 在页面开头定义。这种方式是将CSS样式表写在<style></style>标签之间，内置到HTML 的头部，CSS样式将影响整个页面。这种方式适用于单个页面的情况。（3） 链接外部样式表。将编辑好的CSS样式表存为CSS 文件，其扩展名为.css.在设计网页的过程中可以采用链接的方式将编辑好的CSS样式表套用在页面中，而无须在HTML中出现CSS语法。采用这种方法有个很大的优点，就是可以一次让多个页面同时使用一个样式表，当更新或修改CSS样式表的源文件.css时，所有使用该CSS样式表的页面将自动更新。3.在CSS样式面板中单击“新建CSS样式”按钮

4、 ，或选择菜单“文本”à “CSS样式”> “新建”命令，打开“新建CSS样式”对话框。如图8-3所示。 说明 在Dreamweaver 中所能定义CSS样式有三种。（1） 类（可应用于各种标签）。即自定义CSS样式，可以将CSS自定义样式应用到任何范围或任何文本段中。（2） 标签（重新定义特定标签的外观）。标签样式将重新定义标签的格式，当创建或修改标签的CSS样式时，所有以该标签格式化的文本都将更新。（3） 高级（ID、上下文选择器等）。CSS选择器样式将重新定义一些标签的特定格式或包含某指定属性的所有标签的格式。4. 在“新建CSS样式”对话框中，单击“标签（重新定义特定标

5、签的外观）”单选钮，在“标签”下拉列表中选择“td”选项，并单击“仅对该文档”单选钮。如图8-4所示。5.单击“确定”按钮，打开“td的CSS 样式定义”对话框。在“大小”下拉列表中选择“12像素”，单击“颜色”调色板选择黑色（色标值为000000）。如图8-5所示 图8-4设置仅对该文档定义td标签 图8-5“td的CSS样式定义 ”对话框6 单击“确定”按钮，在CSS 样式面板上显示标签td样式，。如图8-6所示此时网页中的文字显示为12px。7选中CSS 样式面板上的“<样式>”选项，单击“编辑样式表”按钮 ，打开“样式”对话框，在列表中显示了已设置的CSS 样式标签项。如图

6、8-7所示。 图8-6在CSS样式面板上添加标签td样式 图8-7 样式 对话框8单击“新建”按钮，打开“新建CSS 样式”对话框。单击“类（可应用于任何标签）”单选钮，在“名称”编辑框中输入“.title”，单击“仅对该文档”单选钮。如图8-8所示。9单击“确定”按钮，打开“.title”的CSS 样式定义“对话框。在对话框中选择字体为”黑体“。如果在”字体菜单“中没有”黑体“选项，则可选择”编辑字体列表“进行设置，方法与本书前面实验介绍的相同。在”大小“下拉列表中选择”24像素“。在”粗细“下拉列表中选择”特粗“选项。在”颜色“调色板中选取蓝色（色标值为0033CC）。如图8-9所示。10

7、单击“确定“按钮，返回”样式“对话框，在列表中显示了”.title“项，单击“完成”按钮，完成“.title“的CSS样式定义。图8-8 设置仅对该文档定义.title类11选中“时尚生活“标题，选择菜单”文本“>”CSS样式“>” title“选项，或右击标题在菜单中选择”CSS样式“>” title“选项，标题应用了title的样式定义。如图8-10所示。 图8-9定义.title的CSS样式 图8-10 标题应用title的样式定义 12再次选择CSS样式面板中的“编辑样式表“按钮，在”样式“对话框中单击”新建“，在”新建CSS样式“对话框中选择”高级（ID、上下文选择

8、器等）“单选钮，在”选择器“下拉列表中选择”a:link”选项，单击“仅对该文档”单选钮，如图8-11所示。13单击“确定”按钮，打开“a:link的CSS 样式定义”对话框。在“颜色”调色板中选择深蓝色（色标值为#003399），并单击“修饰”区的“无”多选框。如图8-12所示。 图8-11仅对该文档新建a:link样式 图8-12设置a:link的CSS样式14单击“确定”按钮，返回“样式”对话框。再次单击“新建”按钮，设置“高级”选择器中的其他项的CSS样式，设置方法以上步骤相同。需要注意的是在设置“a:hover”的CSS样式时，选择颜色为红色（色标值为#FF0000”）,“修饰”区中

9、选择“下划线”多选框。如图8-13所示。 说明 “a:hover”的CSS样式，表示当鼠标经过链接文字时，所显示的样式。15单击“确定”按钮，返回网页编辑窗口。选中“时尚话题”文字，在属性面板“链接”编辑框内输入“”，创建无址链接。如图8-14所示。 图 8-13 设置a:hover的CSS样式 图8-14 选中文字在连接编辑框输入“#”16按Ctrl+S键保存网页后，按F12键在浏览器中可以查看链接效果，如图8-15所示。 鼠标指针经过链接文字鼠标指针在链接文字外 图8-15浏览完也链接效果17返回Dreamweaver编辑窗口，单击“显示代码视图”按钮 ，切换到代码视图模式，在网页代码&l

10、t;head></head>中显示了如下CSS代码：<style type=”text/css”><!TdFont-size:12px;Color:#000000;.titleFont-family:”黑体”；Font-size:24px;Font-weight:bolder;Color:#0033CC;a:linkcolor:#003399;text-decoration:none;A:visitedColor:#003399;Text-decoration:none;A:hoverColor:#FF0000;Text-decoration:underli

11、ne; -></style>18. 选择“文件”>“导出”>“CSS样式”命令，打开“导出样式为CSS文件”对话框。在“保存在”列表中选择导出的路径，在“文件名”编辑框中输入保存CSS文件的名称“styli08”。如图8-16所示。19. 单击“保存”按钮，完成CSS文件的保存。实验作业模仿1.打开本书配套光盘07sucai08中提供的网页page08.htm。2.创建标签“td”的CSS样式。3.创建类“.titli”的CSS样式。4.在标题文字在应用“.titli”CSS样式。5.创建链接效果的“高级”CSS样式。6.创建文字标题无址链接，在浏览器中查看链接效果。7.导出CSS样式表。创作1.创建HTML网页，使用表格布局网页结构。2.在表格和单元格内插入图像和文字内容，填充网页。3.在网页中创建CSS样式，定义网页整体文字样式。4.创建局部文字的CSS样式，并在文字中