《网页设计与制作》教学课件

《网页设计与制作》教学课件

第 12 章：使用 CSS 美化网页

主要教学环

节

五、知识讲解与操作示范

一、课程引导

二、明确知识技能目标

三、展示网页浏览效果

四、分析操作任务

六、课堂模仿实践

七、疑难解析

八、归纳总结

九、布置习题

（一）课程引导

本次课讲解使用 CSS 美化页面，重点介绍应用

外部样式。

（二）明确知识技能目标

（ 1 ）掌握样式的编辑方法。

（ 2 ）掌握如何使用 CSS 样式表美化页面。

（ 3 ）掌握如何使用外部样式美化页面。

（三）展示网页浏览效果

本章制作的网页 13.html 的浏览效果如图所示。

1 ．预览网页

图 12-1 　　网页 13.html 的预览效

果

（四）分析操作任务

（ 1 ）建立多种 CSS 样式，对 13.html 进行美化。

（ 2 ）建立 CSS 外部样式文件，应用外部样式对

13.html 进行美化。

（五）知识讲解与操作示范（ 1 ）

12.2 　使用 CSS 美化页面 按以下要求定义 CSS 样式，且应用样式对网页进行美化。

（ 1 ）制作图文混排效果。

（ 2 ）制作特殊边框效果。

（ 3 ）建立自定义的链接样式。

（五）知识讲解与操作示范（ 2 ）

4 、建立实现图文混排效果的样式 （ 1 ）建立样式 image_text1

单击菜单【文本】→【 CSS 样式】→【新建】，弹出一个 “ 新建 CSS 规则”对话框。 在“新建 CSS 规则”对话框中，“选择器类型”选项中选择“类” 单选按钮，在“名称”文本框中输入这个自定义样式的名称： “.image_text1” 。在“定义在”选项中选择“仅对该文档” 按钮。 在“ .image_text1 的 CSS 样式定义”对话框中“分类”选择“方 框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左 对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中 输入“ 10” ，单位为“像素”，其余选项保持默认设置。

（五）知识讲解与操作示范（ 3 ）

（ 2 ）应用样式

选中表格第三行中的左边的图像，单击菜单【文本】→【 CSS 样式】，在“ CSS 样式”菜单中选中“ image_text

1” 样式，把样式套用到图片中。保存网页，浏览网页效果。

（ 3 ）建立样式 image_text2

建立一个类似的样式 image_text2 ，在“ CSS 的规则定义”对话框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入“ 10” ，其他的属性设置与 image_text1 相同。然后将该样式应用于另一幅图像。

（五）知识讲解与操作示范（ 4 ）

5 ．建立实现特殊表格边框效果的样式 （ 1 ）建立样式 border

建立一个名为“ .border” ，在“ .border 的 CSS 样式定义”对话框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上”对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框选择“中”，“颜色”选择“ #CCCC3

3” ，其余选项保持默认设置。 （ 2 ）应用样式 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中

选择【 CSS 样式】→【 border 】，如图 12-14 所示，把样式套用到表格。

（五）知识讲解与操作示范（ 5 ）

6 ．建立高级样式

将页面表格中最后一行的链接设置成以下样式：默认的链

接是蓝色、宋体、 9pt 、没有下划线，访问过的链接为紫色、宋

体、 9pt 、没有下划线 , 而鼠标经过时的链接变成橘黄色、宋体、

9pt 、出现下划线。

具体的操作过程如下：

（ 1 ）在 CSS 样式面板中单击“新建 CSS 规则”按钮，弹出“新

建 CSS 规则”对话框，在该对话框中“选择器类型”位置选择“高

级”单选按钮。

（五）知识讲解与操作示范（ 6 ）

（ 2 ）定义链接默认样式，在“选择器”列表框中输入“ a.my.lin

k” ，其中 my 为自定义的链接样式。在“定义在”选项中，选择“仅对该文档”单选按钮，这样 CSS 样式就被定义在该文档中。

（ 3 ）单击【确定】按钮关闭对话框，这时会自动打开样式表编辑器，进入样式表的定义。

（ 4 ）在“ CSS 规则定义”对话框中，左边的分类选择“类型”，“字体”下拉列表框中选择“宋体”，“大小”列表框中选择字体大小为“ 9” ，单位为“点数 (pt)” ，在“颜色”处定义文本颜色为“ #0000FF” ，在“修饰”处选择“无”复选框，其他属性使用默认设置，设置完成后，单击【确定】按钮关闭对话框。这时，在 CSS 样式面板中会出现建立好的样式。

（五）知识讲解与操作示范（ 7 ）

（ 5 ）重复上述（ 2 ）～（ 4 ）步骤定义“ a.my.visited” 样式，

在“ CSS 规则定义”对话框中，“字体”设置为“宋体”，

“大小”设置为“ 9pt” ，“颜色”设置为“ #CCCCCC” ，

“修饰”处选择“无”复选框，其他属性使用默认设置。

（ 6 ）重复上述（ 2 ）～（ 4 ）步骤定义“ a.my.hover” 样式，

在“ CSS 规则定义”对话框中，“字体”设置为“宋体”，

“大小”设置为“ 9pt” ，“颜色”设置为“ #FF9900” ，

“修饰”处选择“下划线”复选框，其他属性使用默认设置。

（五）知识讲解与操作示范（ 8 ）

（ 7 ）样式设置完成以后，对于自定义的高级样式，需要进

行样式的应用。分别选中表格中最后一行的文字“返回

首页”、“公司简介”、“ 民族建筑”，然后在属性面

板上的“样式”下拉列表框中选择“ mylink” ，样式即

被应用到链接上。

（ 8 ）保存网页文档，浏览网页效果，当鼠标指向链接后，

可以看到链接设置的效果。

（五）知识讲解与操作示范（ 9）

7 ．应用 CSS滤镜制作文字特效

在 Dreamweaver 8 中， CSS滤镜只能作用于有区域限

制的对象，例如表格、单元格、图片等，不能直接作用于

文字，所以需要把设置特效的文字 事先放在表格的单元格

中，然后对单元格应用 CSS 样式，从而使文字产生特殊效

果。

（ 1 ）插入一个 1 行 1 列的表格

在图 12-3 中原有表格的下一行插入一个 1 行 1 列的表格。

（五）知识讲解与操作示范（ 10）

（ 2 ）设置表格属性

表格宽度设置为 95％，边框粗细设置为 0 ，单元格边框设置为 0 ，单元格间距设置 0 ，对齐设置为“居中对齐”。

（ 3 ）输入文字

在表格中输入一行文字“长沙世界之窗欢迎你”。

（ 4 ）在 Dreamweaver 8 主窗口中，单击菜单【文本】→【 C

SS 样式】→【新建】，弹出“新建 CSS 规则”对话框，在“选择器类型”位置选择“类”单选按钮，样式名称输入“ .

dropshadow_text” ，在“定义在”选项中，选择“仅对该文档”，单击【确定】按钮。

（五）知识讲解与操作示范（ 11 ）

（ 5 ）在弹出的“ .dropshadow_text 的 CSS 规则定义”对话框中，先在左侧选择“类型”分类，在右侧设置字体为“隶书”，大小为“ 30px” ，修饰为“无”，颜色为“ #DDDD00” 。

（ 6 ）接着在左侧选择“扩展”分类，在右侧的“滤镜”下拉列表框中，选择 DropShadow滤镜，即“ DropShadow(Color=?,

OffX=?, OffY=?, Positive=?)” ，这种滤镜能产生阴影文字效果。

（ 7 ）按“ Ctrl” 键单击选中新插入的 1 行 1 列表格，然后在属性面板“样式”列表框中选择“ dropshadow_text” ，对该单元格应用样式。

（ 8 ）保存网页文档，浏览其效果。

（五）知识讲解与操作示范（ 12 ）

8 ．编辑样式 下面修改样式 caption_text1 ，设置“区块”分类中的“文本

对齐”为“居中对齐”，“显示”为“表格标题”。 编辑 CSS 的步骤如下： （ 1 ）在 CSS 样式面板上，先单击选择样式“ caption_text1” ，

然后单击【编辑样式】按钮，打开“ .caption_text1 的 CSS

规则定义”对话框。 （ 2 ）在对话框中左侧分类选择“区块”，然后在右侧区域内

“文本对齐”列表框中选择“居中”，“显示”列表框中选择“表格标题”。然后单击【确定】按钮关闭对话框。

（ 3 ）在页面中选择表格标题，应用该 CSS 。

（五）知识讲解与操作示范（ 13 ）

9 ．使用范例样式

应用范例样式表的步骤如下：

（ 1 ）在“ CSS 样式”面板中，单击【附加样式表】按钮，打开“链接外部样式表”对话框。

（ 2 ）在“链接外部样式表”对话框中，单击“范例样式表”链接，出现“范式样式表”对话框。

（ 3 ）从左边的列表框中选择一个样式表，此时可以预览所选样式的效果。单击【预览】按钮，将会看到该样式应用到文本的效果。

（ 4 ）找到一种能满足需要的样式，单击【确定】按钮。

（五）知识讲解与操作示范（ 14 ）

10 ．应用外部样式 要应用外部样式，应 先创建 CSS 外部样式文件，然后附加或链接外部样式文件以应用其中的样式。 从文档中导出内部样式 （ 1 ）在 Dreamweaver 8 主窗口，单击菜单【文件】→【导

出】→【 CSS 样式】或者单击菜单【文本】→【 CSS 样式】→【导出】，也可以在“ CSS 样式”面板中单击右键，在弹出的快捷菜单中单击【导出】命令。

（ 2 ）在弹出的“导出样式为 CSS 文件”对话框中，选择存放外部样式表文件的路径，并输入样式表的名称，扩展名为“ .css” ，这里输入“ style1.css” 。

（ 3 ）单击【保存】按钮。 当前文档中所定义的内部样式表随即保存为外部 CSS 样式

表。

（五）知识讲解与操作示范（ 15 ）

链接或附加外部样式表

（ 1 ）单击“ CSS 样式”面板右下角的【附加样式表】按钮，打开“链接外部样式表”对话框。

（ 2 ）在“文件 /URL” 列表框输入外部样式表的路径和名称，也可以单击【浏览】按钮，打开 “选择样式表文件”对话框，在该对话框中选择外部样式文件。

（ 3 ）在“添加为”区域选择是“链接”外部样式表还是“导入”外部样式表，这里选择“链接”单选按钮。在“媒体”中可以根据网页应用的媒体类型做相应的选择。

（五）知识讲解与操作示范（ 16 ）

（ 4 ）设置完成后，单击【确定】按钮。所链接的外

部样式就会出现在“ CSS 样式”面板中。所有的样

式都会被附加到所创建的网页中，省去了重新建立

样式的麻烦。

（ 5 ）对网页的对象应用样式。

（六）课堂模仿实践

课堂实践 1 ．操作要求

（ 1 ）打开“课堂实践”网站文件夹“ 13 美化网页”中的网页文档“ 13.html” 。

（ 2 ）定义一个名为“ mystyle1.css” 的 CSS 样式文件，该样式文件的属性设置与前述的内部样式表相同。

（ 3 ）打开“课堂实践”网站文件夹“ 13 美化网页”中的网页文档“ 13_1.html” ，在该网页文档中链接外部样式文件“ mystyle1.css” 。

（六）课堂模仿实践

2 ．效果展示 网页 13.html和 13_1.html 的浏览效果相同，如图 12-24

所示。

图 12-24 　 　 应用 CSS样式的课堂实践网页的浏览效果

（六）课堂模仿实践

课外拓展实践

1 ．创建一个 CSS 样式文件，命名为“ style1.css” ，

该样式包含了控制表格中的文字、图像格式的代码。

2 ．在网页文档 13.html 中链接 CSS 样式文件 style

1.css ，然后对网页中的对象应用样式。

（八）归纳总结

CSS 样式弥补了 HTML语言的不足，可以实现

HTML代码一些无法实现的效果，使用 CSS 美化页

面更加简洁、方便。通过本章的学习应该掌握 CSS

样式的建立、编辑和应用。