项目6图书介绍——样式的应用选编.docVIP

项目6：图书介绍——样式的应用 一、新课引入 教师讲解：CSS的概念及作用 CSS称之为层叠样式表。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同的网页的外观和格式。 二、新课教学 活动一 了解及建立CSS样式 教师演示：设置页面属性，观察CSS规则 教师讲解：如何创建CSS样式选中菜单“窗口”“CSS样式”。打开CSS样式面板。 单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框。 在“选择器类型”选项中，可以选择创建CSS样式的方法以下三种：在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。单击“确定”按钮，如果选择了“新建样式表文件”选项，回弹出“保存样式表文件为”对话框，给样式表命名，保存后，回弹出“CSS规则定义”对话框。如果选择了“仅对该文档”，则单击“确定”后，直接弹出“CSS规则定义”，在其中设置CSS样式。 “CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以对所选标签做不同方面的定义，可以根据需要设定。定义完毕后，单击“确定”按钮，完成创建CSS样式。a:link 设定正常状态下链接文字的样式。 a:active 设定鼠标单击时链接的外观。 a:visited 设定访问过的链接的外观。a:hover 设定鼠标放置在链接文字之上时，文字的外观’bigfont’ 在浏览器中观察效果，当单击文字“大”时，正文字体变为16像素 同样的道理，设置文字“中”的onclick事件：body.className=’mediumfont’；“小”的onclick事件：body.className=’smallfont’ 学生练习：学生完成第六项任务。 学生探索：能够根据上述实例举一反三，完成即时改变网页背景的效果：当单击文字“花”时，网页背景变成花，而单击文字“星星”时，网页背景变成星星。 教师讲解演示：移动CSS规则与附加样式表 选择样式中的所有CSS规则（shift＋选择），单击右键，选择——移动CSS规则（M）... 移至外部样式表，选择新样式表,在弹出的窗口中新建文件style.css，放在站点根目录下： 图17 保存全部，观察：网站中多出style.css文件，而intro.html文件中的内部样式表中的CSS规则都移动至style.css中。 打开qianyan.html，在CSS面板中单击“附加样式表”按钮 在弹出的“链接外部样式表窗口”中选择style.css 学生练习：移动CSS规则与附加样式表 活动三 利用CSS样式设置滤镜效果 教师引入：通过定义CSS样式中的滤镜可以实现一些特殊的效果，可以实现PS的图片功能。 滤镜效果 描述 Alpha 设置透明效果 Blur 设置模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 设置投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 设置灯光投影效果 Mask 设置遮罩效果，Color指定遮罩的颜色 Shadow 设置阴影效果 Wave 设置水平方向和垂直方向的波动效果 Xray 设置X光照效果 项目 得分 完成项目情况（60%） CSS样式的基本操作 滤镜效果 导航条效果 自主学习能力（30%） 团结协作精神（5%） 创新能力（5%） 三、复习巩固 小结：这节课主要内容是了解CSS样式表的概念、掌握建立及编辑CSS样式表的方法。利用前几个项目完成的网页设置基本的CSS样式；设置CSS样式的滤镜效果；利用CSS样式设置特殊效果的超链接。 思考：CSS样式按其位置分可以分为几种？有什么区别？超链接有几种状态？设置样式时如何设置？ 复习：综合运用CSS样式设置页面的方法。 第 8 页 共 8 页