版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、网页文本排版实例未应用CSS样式网页：第10章 Dreamweaver中层叠样式表的创建及使用教案教学目标层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。通过本章的教学，要求学生掌握以下基本内容：1. 了解层叠样式表的基本知识。2. 掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。3. 掌握将CSS样式应用到各种网页元素上的方法。4. 掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。5. 掌握管理CSS
2、层叠样式表的基本方法，学会将外部样式表链接到网站的多个网页上，以便直接应用已创建好的CSS样式，统一多个网页的外观。教学内容· CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。· 在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。· 链接外部样式表。教学重点· 创建CSS样式。· 应用CSS样式。· 修改CSS样式。· 链接外部样式表。教学形式课堂讲授与网络自学相结合教学辅助手段· 通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。· 学生可以访问
3、网络教学站点。教学站点提供了重点操作的Flash动画演示。教学时间安排：1课时（45分钟）· 层叠样式表的基础知识：10分钟。· 创建和应用CSS样式：15分钟。· 修改CSS样式：5分钟。· 链接外部样式表：5分钟。· 小结：10分钟。教学方法与过程首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识。然后介绍层叠样式表的基本种类。接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法。其后，介绍如何为网站的多个网页链接已有的外部样式表。最后，进行小结。在小结过程中，引导学生辨认和判断三
4、种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。布置课外作业，要求学生完成指定练习，巩固所学知识。具体教学内容一、引言（引入学习本章节的原因，简单介绍有关概念，并提示本节课程的主要内容）1什么是样式？ 样式是用来控制网页外观的一组格式。2为什么在网页设计中使用样式？当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法。如果把一组格式归纳起来，用一个名称命名，那么，这组格式就变成了一个样式。对网页中的多个元素，只需给他们应用样式，他们就具有了相同的
5、格式。此外，当样式中的格式被修改之后，网页中所有应用了该样式的元素，其格式也发生了自动更新。3什么是层叠样式表？层叠样式表CSS（Cascading Style Sheet）是统一管理网页中各种样式的一种方式。它是一组格式设置规则，用于控制网页外观。一个网页对象（文本、图象、表格等）可以被多层的样式表来修饰，但是最终以优先级最高的样式表所定义的格式来显示。这也是“层叠”样式表名称的由来。层叠样式表可以同时被多个网页链接。当样式表内的样式更新或被修改之后，所有应用了该样式表的文档都会被自动更新。下面，我们首先了解一下层叠样式表有哪些类型，然后学习Dreamweaver中CSS样式的创建、应用及修
6、改。二、层叠样式表的类型三类。内联式样式表、嵌入式样式表、外部样式表。1内联式样式表：是在某个特定的标签内使用style属性定义CSS样式。这种定义只对使用了style属性的标签有效，子标签可以继承父标签的样式。<p style=”color:#000000; background:yellow;” >这段文字背景色为<I>黄色</I></p>2嵌入式样式表：是一系列包含在 HTML 文档 head 部分的 style 标签内的CSS 样式。<head><style type=”text/css”><!- ->
7、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。（向学生演示三种不同的样式表代码）三、创建CSS样式1操作方法：使用
8、CSS面板。2操作步骤：（结合后续示例向学生进行重点演示）· 选择“窗口”菜单“CSS样式”命令，打开CSS面板，点击面板底部的“+”按钮，打开“新建样式”对话框。· 选择样式种类。· 创建自定义样式：创建一个可以作为 class 属性应用到某网页元素的样式。 · 重定义HTML标签：对指定的 HTML 标签的默认格式进行重新定义。· 使用CSS选择器：为某个标签组合或所有包含特定 Id 属性的标签定义格式。或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:vi
9、sited。· 为新样式输入名字、选择标签、或者选择标签组合。· 样式的名字前边必须要有一个句点。如果没有输入这个句点，Dreamweaver 自动输入。名字可以包含任何字母和数字的组合，但文字必须放在句号后。例如 .myhead1。· 要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择一个。· 选择CSS 选择器后，可以输入任何一个有效的表达式（例如，td p或 #myStyle)，或者从弹出列表中选择。可供选择：a:active（选中超链接), a:hover（光标位于超链接上), a:link（超链接没有任何动作时),
10、 和 a:visited（访问过的超链接)。· 选择样式保存的位置：定义样式是保存在某个外部样式表文件中还是仅对本文档有效。· 点击确定，出现样式定义对话框。· 为新的 CSS 样式进行格式定义。例：打开css.htm，创建一个外部样式表。（结合上面的述讲述内容向学生进行重点演示）（1）新建一个外部样式表文件mycss.css。（2）在外部样式表中创建自定义的超级链接样式。（3）在外部样式表中创建自定义“列表”样式，使用列表面板设置一幅图象作为项目符号。（3）仅对本文档修改body标签，使用背景面板设置背景图象。（不重复、右对齐、固定)。例：打开poem1.htm
11、，创建仅对当前文档有效的CSS样式。（由学生课后自行观看Flash动画演示）（1）创建自定义的CSS样式标题1、标题2等，使用类型面板设计字体样式，并应用到当前网页中。（2）定义body和td标签设置网页与表格字体大小为10点数。（3）创建自定义的CSS样式“正文”，字体大小为点数，字体幼圆，1.5倍行高。（4）修改自定义标题2样式，设置自选背景。（5）修改自定义标题样式，使用区块面板设置文本对齐方式为居中。（6）修改自定义“正文”样式，缩进个汉字。（7）新建自定义标题3样式，使用边框面板设置一条下边框，样式为双线、颜色为红色。例：打开filter.htm，创建仅对当前文档有效的CSS样式。（
12、由学生课后自行观看Flash动画演示）（1）新建一个样式Alpha，仅应用到当前文档，设置透明度为50%（在扩展面板的滤镜下拉列表框中选择Alpha(Opacity=50)。（2）新建一个样式invert，仅应用到当前文档，(在扩展面板的滤镜下拉列表框中选择invert) 。（3）新建一个样式gray，仅应用到当前文档，(在扩展面板的滤镜下拉列表框中选择gray) 。（4）在文档中插入图片后分别设置以上新建的样式后在浏览器中查看效果。（5）新建一个样式mouse ，设置当光标滑过样式控制的对象时改变光标的图像为help。四、应用CSS样式（结合后续示例向学生进行重点演示）1使用“重定义HTML
13、标签”或“CSS选择器”定义的样式，由系统自动应用。2自定义CSS样式由网页设计者手动应用。（1）在文档中，选择要应用CSS样式的文本或其它网页元素。（2）在属性检查器中，从“样式”列表框中选择要应用的样式。 3清除已应用的样式。（1）选择要清除样式的对象或文本。 （2）在属性检查器中，从“样式”列表框中选择“无”。 例：将刚才创建的CSS样式分别应用到文档的各个元素中。五、修改CSS样式（结合后续示例向学生进行重点演示）1操作步骤：（1）打开“CSS样式”面板。（2）选择要修改的CSS样式，单击面板的“编辑”按钮。 （3）按需要修改样式。例：修改mycss.css中的超级链接样式。观察文档的
14、样式变化。六、链接外部样式表（结合后续示例向学生进行重点演示）1操作步骤：（1）打开“CSS样式”面板。（2）单击面板的“链接样式表”按钮，将指定外部样式表文件链接到当前文档。（3）在当前文档中应用外部样式表中的CSS样式。例：打开poem1.htm，将外部样式表mycss.css链接到poem1.htm。七、小结引导学生在网页的HTML代码中辨认和判断上述示例中建立的样式表，引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。鼓励学生课后自行试验多层样式表对页面元素格式的影响。本章要点·创建CSS 样式（1）打开CSS样式面板面板底部的“+”图标。（2）样式的种类：· 自定义样式：自己创建一个网页样式。· 重定义HTML标签：对指定的 HTML 标签进行重新定义。· 使用CSS选择器：对链接的格式进行重新定义。（3）样式存放位置：存放在样式表文件中或仅对本文档。（4）在样式对话框中打开类型、背景、区块、边框、扩展等面板进行设置。·应用CSS样式（1）选择要应用样式的对象在属性面板中选择要应用的样式（2）选择要取消样式的对象在属性面板中从“样式菜单中选
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论