网页文本排版实例详解

网页文本排版实例

未应用CSS样式网页：

《第10章 Dreamweaver中层叠样式表的创建及使用》教案

教学目标

层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。

通过本章的教学，要求学生掌握以下基本内容：

1.了解层叠样式表的基本知识。

2.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。

3.掌握将CSS样式应用到各种网页元素上的方法。

4.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。

5.掌握管理CSS层叠样式表的基本方法，学会将外部样式表链接到网

站的多个网页上，以便直接应用已创建好的CSS样式，统一多

个网页的外观。

教学内容

∙CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。

∙在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。

∙链接外部样式表。

教学重点

∙创建CSS样式。

∙应用CSS样式。

∙修改CSS样式。

∙链接外部样式表。

教学形式

课堂讲授与网络自学相结合

教学辅助手段

∙通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。

∙学生可以访问网络教学站点。教学站点提供了重点操作的Flash动画演示。

教学时间安排：1课时（45分钟）

∙层叠样式表的基础知识：10分钟。

∙创建和应用CSS样式：15分钟。

∙修改CSS样式：5分钟。

∙链接外部样式表：5分钟。

∙小结：10分钟。

教学方法与过程

首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识。然后介绍层叠样式表的基本种类。接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法。其后，介绍如何为网站的多个网页链接已有的外部样式表。最后，进行小结。

在小结过程中，引导学生辨认和判断三种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。

布置课外作业，要求学生完成指定练习，巩固所学知识。

具体教学内容

一、引言（引入学习本章节的原因，简单介绍有关概念，并提示本节

课程的主要内容）

1．什么是样式？

样式是用来控制网页外观的一组格式。

2．为什么在网页设计中使用样式？

当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法。

如果把一组格式归纳起来，用一个名称命名，那么，这组格式就变成了一个样式。

对网页中的多个元素，只需给他们应用样式，他们就具有了相同的格式。此外，当样式中的格式被修改之后，网页中所有应用了该样式的元素，其格式也发生了自动更新。

3．什么是层叠样式表？

层叠样式表CSS（Cascading Style Sheet）是统一管理网页中各种样式的一种方式。它是一组格式设置规则，用于控制网页外观。

一个网页对象（文本、图象、表格等）可以被多层的样式表来修饰，但是最终以优先级最高的样式表所定义的格式来显示。这也是“层叠”样式表名称的由来。

层叠样式表可以同时被多个网页链接。当样式表内的样式更新或被修改之后，所有应用了该样式表的文档都会被自动更新。

下面，我们首先了解一下层叠样式表有哪些类型，然后学习Dreamweaver中CSS 样式的创建、应用及修改。

二、层叠样式表的类型

三类。内联式样式表、嵌入式样式表、外部样式表。

1．内联式样式表：

是在某个特定的标签内使用style属性定义CSS样式。这种定义只对使用了style属性的标签有效，子标签可以继承父标签的样式。

这段文字背景色为黄色

2．嵌入式样式表：

是一系列包含在 HTML 文档 head 部分的 style 标签内的CSS 样式。

3．外部样式表：

是一系列存储在一个单独的外部 .css 文件中的 CSS 样式。利用HTML文档head 部分中的link标签，该文件被链接到 Web 站点中的一页或多页上。

例：参考css.htm。（向学生演示三种不同的样式表代码）

三、创建CSS样式

1．操作方法：使用CSS面板。

2．操作步骤：（结合后续示例向学生进行重点演示）

∙选择“窗口”菜单→“CSS样式”命令，打开CSS面板，点击面板底部的“+”按钮，打开“新建样式”对话框。

∙选择样式种类。

∙创建自定义样式：创建一个可以作为 class 属性应用到某网页元素的样式。

∙重定义HTML标签：对指定的 HTML 标签的默认格式进行重新定义。

∙使用CSS选择器：为某个标签组合或所有包含特定 Id 属性的标签定义格式。或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:visited。

∙为新样式输入名字、选择标签、或者选择标签组合。

∙样式的名字前边必须要有一个句点。如果没有输入这个句点，Dreamweaver 自动输入。名字可以包含任何字母和数字的组合，但文字必须放在句号后。

例如 .myhead1。

∙要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择一个。

∙选择CSS 选择器后，可以输入任何一个有效的表达式（例如，td p或#myStyle)，或者从弹出列表中选择。可供选择：a:active（选中超链接), a:hover（光标位于超链接上), a:link（超链接没有任何动作时), 和

a:visited（访问过的超链接)。