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

网页文本排版实例未应用csS羊式网页：第10章Dreamweaver中层叠样式表的创建及使用教案教学目标层叠样式表（CSS是网页设计工作者制作网页时经常使用的工具利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上通过本章的教学，要求学生掌握以下基本内容：1. 了解层叠样式表的基本知识2. 掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法3. 掌握将CSS羊式应用到各种网页元素上的方法4. 掌握修改CSS羊式的方法，并观察到该修改对网页外观的影响5. 掌握管理CSSS叠样式表的基本方法，学会将外部样式表链接到网站的多个网页上，以便直接应用已创建好的csS 羊式，统一多个网页的外观教学内容* CSSS叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表在Dreamweaver中，使用CSS面板创建、应用、修改CSSS叠样式链接外部样式表教学重点*创建csS羊式应用csS羊式修改csS羊式链接外部样式表教学形式课堂讲授与网络自学相结合教学辅助手段?通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。

学生可以访问网络教学站点教学站点提供了重点操作的Flash动画演示教学时间安排：1课时（45分钟）?层叠样式表的基础知识：10分钟创建和应用CSS样式：15分钟修改CSS样式：5分钟链接外部样式表：5分钟小结：10分钟教学方法与过程首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识然后介绍层叠样式表的基本种类接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法其后，介绍如何为网站的多个网页链接已有的外部样式表最后，进行小结在小结过程中，引导学生辨认和判断三种样式表在网页的HTML弋码中具体的代码表示，并引导学生总结这些代码是如何通过CSS0板进行设置的，使得学生进一步加深对理论知识的理解布置课外作业，要求学生完成指定练习，巩固所学知识具体教学内容一、引言（引入学习本章节的原因，简单介绍有关概念，并提示本节课程的主要内容）1 ?什么是样式？样式是用来控制网页外观的一组格式2. 为什么在网页设计中使用样式？当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法如果把一组格式归纳起来，用一个名称命名，那么，这组格式就变成了一个样式对网页中的多个元素，只需给他们应用样式，他们就具有了相同的格式。

此外，当样式中的格式被修改之后，网页中所有应用了该样式的元素，其格式也发生了自动更新3什么是层叠样式表？层叠样式表CSS(Cascading Style Sheet ) 是统一管理网页中各种样式的一种方式它是一组格式设置规则，用于控制网页外观一个网页对象 ( 文本、图象、表格等)可以被多层的样式表来修饰，但是最终以优先级最高的样式表所定义的格式来显示这也是“层叠”样式表名称的由来层叠样式表可以同时被多个网页链接当样式表内的样式更新或被修改之后，所 有应用了该样式表的文档都会被自动更新下面，我们首先了解一下层叠样式表有哪些类型，然后学习Dreamweaver中CSS样式的创建、应用及修改二、层叠样式表的类型三类内联式样式表、嵌入式样式表、外部样式表1内联式样式表：是在某个特定的标签内使用style属性定义CSS样式这种定义只对使用了style 属性的标签有效，子标签可以继承父标签的样式 这段文字背景色为 黄色 2嵌入式样式表：是一系列包含在HTML 文档head 部分的style 标签内的CSS 样式 P color:red; font-family: 宋体; font-weight:bold v/style v/head 3 ?外部样式表：是一系列存储在一个单独的外部.css文件中的CSS样式。

利用HTML文档head部分中的link标签，该文件被链接到Web站点中的一页或多页上 li nk rel=stmystyle.css ” type= ” text/css ” 例：参考 css.htm 向学生演示三种不同的样式表代码）三、创建 CSS 样式1 ?操作方法：使用CSS面板2 ?操作步骤：（结合后续示例向学生进行重点演示）?选择“窗口”菜单一“ CS样式”命令，打开CSS面板，点击面板底部的“ +”按钮，打开“新建样式”对话框选择样式种类创建自定义样式：创建一个可以作为class属性应用到某网页元素的样式重定义HTMI标签：对指定的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 （访问过的超链接）选择样式保存的位置：定义样式是保存在某个外部样式表文件中还是仅对本文档有效点击确定，出现样式定义对话框为新的CSS样式进行格式定义例：打开 css.htm ，创建一个外部样式表结合上面的述讲述内容向学生进行重点演示）（1）新建一个外部样式表文件mycss.css2）在外部样式表中创建自定义的超级链接样式3）在外部样式表中创建自定义“列表”样式，使用列表面板设置一幅图象作为项目符号3） 仅对本文档修改body标签，使用背景面板设置背景图象 （不重复、右对 齐、固定）例：打开 poem1.htm, 创建仅对当前文档有效的CSS 羊式由学生课后自行观看Flash动画演示）（1）创建自定义的CSS样式标题1、标题2等，使用类型面板设计字体样式，并应用到当前网页中。

2）定义body和td标签设置网页与表格字体大小为10点数3） 创建自定义的CSS样式“正文”，字体大小为9点数，字体幼圆，1.5倍 行高4）修改自定义标题2样式，设置自选背景5）修改自定义标题1样式，使用区块面板设置文本对齐方式为居中6）修改自定义“正文”样式，缩进2个汉字7）新建自定义标题3样式，使用边框面板设置一条下边框，样式为双线、颜色为红色例：打开 filter.htm ，创建仅对当前文档有效的CSS 羊式由学生课后自行观看Flash动画演示）（1）新建一个样式Alpha ，仅应用到当前文档，设置透明度为50%（在扩展面板的滤镜下拉列表框中选择Alpha（Opacity=50 ）2）新建一个样式invert ，仅应用到当前文档，（在扩展面板的滤镜下拉列表框中选择invert）3） 新建一个样式gray ， 仅应用到当前文档，（在扩展面板的滤镜下拉列表框中选择gray）4）在文档中插入图片后分别设置以上新建的样式后在浏览器中查看效果5）新建一个样式mouse ，设置当光标滑过样式控制的对象时改变光标的图像为help 四、 应用 csS 羊式（结合后续示例向学生进行重点演示）1 ?使用“重定义HTML标签”或“ CSS选择器”定义的样式，由系统自动应用。

2 ?自定义CSS羊式由网页设计者手动应用1）在文档中，选择要应用csS羊式的文本或其它网页元素2）在属性检查器中，从“羊式”列表框中选择要应用的羊式3清除已应用的羊式1） 选择要清除羊式的对象或文本2） 在属性检查器中，从“羊式”列表框中选择“无”例：将刚才创建的csS羊式分别应用到文档的各个元素中五、 修改 csS羊式（结合后续示例向学生进行重点演示）1 操作步骤：（1）打开“ csS羊式”面板2）选择要修改的css羊式，单击面板的“编辑”按钮3）按需要修改羊式例：修改mycss.css 中的超级链接羊式观察文档的羊式变化六、链接外部羊式表（结合后续示例向学生进行重点演示）1 ?操作步骤 : (1)打开“ csS羊式”面板2)单击面板的“链接样式表”按钮，将指定外部样式表文件链接到当前文档3)在当前文档中应用外部样式表中的CSS羊式例：打开poem1.htm,将外部样式表mycss.css链接到poem1.htm七、小结引导学生在网页的HTML弋码中辨认和判断上述示例中建立的样式表，弓I导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解鼓励学生课后自行试验多层样式表对页面元素格式的影响。

本章要点1?创建CSS样式(1)打开csS羊式面板 - 面板底部的“ +”图标2)样式的种类：?自定义样式：自己创建一个网页样式重定义HTM标签：对指定的HTML标签进行重新定义使用CSS选择器：对链接的格式进行重新疋义3)样式存放位置：存放在样式表文件中或仅对本文档4)在样式对话框中打开类型、背景、区块、边框、扩展等面板进行设置应用CSS羊式(1)选择要应用样式的对象一在属性面板中选择要应用的样式(2)选择要取消样式的对象一在属性面板中从“样式菜单中选择“无”修改csS羊式打开CSS羊式面板一选择要编辑的样式一单击CSS面板底部的“编辑样式” ”按钮一按需要修改样式更改将立即应用于当前文档及其它链接到该样式表的文档链接外部样式表可以给文档链接一个CSS外部样式表来应用样式当对一个CSS样式表进行了编辑后， 所有链接到该CSS样式表的文档都会自动更新八、布置作业：csS羊式实验由学生自行访问教学网站，浏览作业内容，查看作业范例和操作演示。