网页文本排版实例详解.doc

网页文本排版实例 未应用CSS样式网页： 《第10章 Dreamweaver中层叠样式表的创建及使用》教案 教学目标 层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。 通过本章的教学，要求学生掌握以下基本内容： 了解层叠样式表的基本知识。 掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。 掌握将CSS样式应用到各种网页元素上的方法。 掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。 掌握管理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属性的标签有效，子标签可以继承父标签的样式。 p style=”color:#000000; background:yellow;” 这段文字背景色为I黄色/I/p 2．嵌入式样式表： 是一系列包含在 HTML 文档 head 部分的 style 标签内的CSS 样式。 head style type=”text/css” !- - P {color:red; font-family:宋体; font-weight:bold} … - - /style /head 3．外部样式表： 是一系列存储在一个单独的外部 .css 文件中的 CSS 样式。利用HTML文档 head 部分中的link标签，该文件被链接到 Web 站点中的一页或多页上。 head link rel=stylesheet href=”mystyle.css” type=”text/css” /head 例：参考css.htm。（向学生演示三种不同的样式表代码） 1．操作方法：使用CSS面板。2．操作步骤：（结合后续示例向学生进行重点演示） 选择“窗口”菜单→“CSS样式”命令，打开CSS面板，点击面板底部的“+”按钮，打开“新建样式”对话框。 选择样式种类。 创建自定义样式：创建一个可以作为