网页教案设计6.docVIP

网页教案设计6 - PAGE 1 - 第六章 层叠样式表 本章教学目标： 1．理解掌握CSS的概念和作用； 2．熟练掌握类样式的创建和应用； 3．熟练掌握标签样式的创建和应用； 4．熟练掌握高级样式的创建和应用； 5．熟练掌握外部样式表的创建； 6．熟练掌握CSS特效的应用； 7．熟练使用样式表美化网页。 教学重点： 1．掌握创建类样式、标签样式、高级样式及应用； 2．掌握样式表文件的创建及应用； 教学难点： 创建和应用类样式 教学时间 8课时（4节理论课，4节实验课） 教学过程 §6.1 创建类样式 一、样式表的三种基本类型 1．类样式 类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元素中。如果将类样式应用于一整段文字，那么会在相应的标签中出现“Class”属性，该属性值即为类样式名称。 2．HTML标签样式 可以针对某一个标签来定义层叠样式表，也就是说所定义的层叠样式表将只应用于选择的标签。例如：为Body标签定义了层叠样式表，那么所有包含在Body、/Body标签范围内的内容将遵循所定义的层叠样式表。 3．高级样式 高级样式为特殊的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有四种，分别为a:link、a:active、a:visited、a:hover。其中： §6.3修改超级链接外观 一、高级样式 （1）高级样式允许用户一次给多个标签定义样式； （2）也可以给由ID标识的指定对象定义样式； （3）还可以给伪类选择器定义样式。 二、知识链接 在Dreamweaver CS 3中，若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出菜单中选择一个标签。弹出菜单中提供的选择器（称为伪类选择器）有：a:active、a:hover、a:link 和 a:visited。 §6.4 多个网页共享CSS样式 一、链接和导入的区别 1．链接 若要创建当前文档和外部样式表之间的链接，请选择“链接”。该选项在 HTML 代码中创建一个 link href 标签，并引用已发布的样式表所在的 URL。Microsoft Internet Explorer 和 Netscape?Navigator 都支持此方法。 2．导入 不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用导入指令。大多数浏览器还能识别页面中（而不仅仅是样式表中）的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表，请选择“导入”。 二、编辑外部CSS样式表 编辑外部CSS样式表时，链接到该CSS样式表的所有文档全部更新以反映所做的编辑。可以导出文档中包含的 CSS 样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。 您可以将创建的或复制到站点中的任何样式表附加到页面。此外，Dreamweaver 附带了预置的样式表，这些样式表可以自动移入站点并附加到页面。 §6.5制作光晕字 一、滤镜的作用 使用过滤器，可对对样式所控制的对象应用特殊效果（例如模糊和反转）。过滤器是由参数和参数值组成的，这些参数和值的变化组合，能使对象产生各种效果。其功能并不比PhotoShop软件中的滤镜效果逊色。相反不少图像处理软件进行特殊效果处理之后的图片体积会有所增加，而使用过滤器对图片进行处理能保持图片原有的属性，大大加快网页装载速度。过滤器参数属性过多，针对不同的施加对象，各类参数要根据使用者的喜好、需求以及对象本身的属性进行设置调试。 二、常见滤镜 1．Alpha滤镜 参数名称 功能 参数值 Opacity 设置图片不透明的程度，单位为“百分比” 0~100，0表示完全透明，100表示完全不透明 FinishOpacity 与Opacity配合使用，可以制作出透明渐进的效果 0~100，0表示完全透明，100表示完全不透明 Style 当同时设定了Opacity和FinishOpacity产生透明效果时，它主要用来指定渐进的显示形状 0（没有渐进），1（直线渐进），2（圆形渐进），3（矩形辐射） StartX 渐进开始的X坐标值 StartY 渐进开始的Y坐标值 FinishX 渐进结束的X坐标值 FinishY 渐进结束的Y坐标值 作用：让对象呈现渐变半透明的效果。 示例： Alpha(Opacity=100,FinishOpacity=30,Style=2,Startx=0,StartY=0,Fini