项目5使用CSS控制页面元素

项目 5 使用 CSS控制页面元素一、教学建议该项目主要介绍CSS在网页制作中的应用。CSS是为弥补传统HTML功能的不足而开发的一种新的网页格式标准，它可以再网页中精确地设置文字的大小、间距、行距、 图层的绝对定位和相对定位，它还是实现了网页内容与样式的分离，可跨网页、跨网站使用，便于网站的维护。所以，学好CSS的应用，制作网页也会更加得心应手。该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，以“项目总结”的形式小结所学知识，加深学生的印象，增强学习效果。以掌握实际应用能力为导向，建议教师在教学的过程中辅导好项目后面“技能巩固” 的操作题， 让学生在实际操作的过程中提高专业技能，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。二、教学简案课题任务 1 使用 CSS设置页面、文本、段落的格式参考资料教材教学配套光盘素材教学方法教师讲解、演示。学生讨论，上机实践操作。授课节数2 课时教学目标1.理解 CSS样式表的含义、分类。2.掌握创建 CSS样式表的方法。1.什么是 CSS。相关知识2.CSS 分类。3.CSS 的创建及 CSS样式面板。4.CSS 规则的设置。学习重点教学内容1. 了解 CSS的定义、 CSS样式面板的属性以及 CSS规则属性。2. 能运用 CSS样式表对网页的页边距、文字段落格式进行控制。一、什么是CSSCSS（ Cascading Style Sheet，层叠样式表）是一组格式设置规则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。 页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则存放在在另一个文件中或网页文档的某一个部分发，通常为文件头部分。二、 CSS 分类CSS 可能通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。1 嵌入式样式表如果样式只在当前网页中使用，可以使用嵌入式样式表。嵌入式样式表一般放在网页头部的一个 和 标签之间。2 外部样式表如要样式要在多个网页中使用，可以使用外部样式表，外部样式是一个以 .CCS 为后缀的外部文件。网页要使用外部样式表来统一风格只需在中用 标签将外部样式表链接起来即可。三、 CSS 规则对话框单击“ CSS”面板中的“新建 CSS 规则”按钮，可打开“新建 CSS 规则”对话框。选择器类型的含义如下：类（可应用于任何标签） ：可以在文档窗口的任何区域或文本中应用类样式。标签（重新定义特定标签的外观）：重新定义HTML 标记的默认格式。高级（ ID 、伪类选择器等） ：为特定的组合标签定义层叠样式表，可以使用 ID 作为属性，以保证文档具有唯一可用的值。进入“规则定义”对话框后，各选项的含义如下：1“类型”选项用于设置CSS 样式的文本格式。字体：可以选择相应的字体。大小：大小就是字号，可以直接填入数字，然后选择单位。样式：设置文字的外观，包括正常、斜体、偏斜体。行高：设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。颜色：设置文字的色彩。注：行高的数值是包括字号数值在内的。 如文字设置为 12px，如果要创建一倍行距，则行高应该为 24px。2“背景”选项用于设置CSS 样式的背景格式。背景颜色：选择固定色作为背景。背景图像：选择图像作为背景。重复：使用图像作为背景的时，可以使用此项设置背景图像的重复方式。附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。水平位置：位置图像水平方向的位置。垂直位置：设置图像垂直方向的位置。3“区块”选项用于设置CSS 样式的区块格式。单词间距：英文单词之间的距离，一般使用默认设置。字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。垂直对齐：设置对象的垂直对齐方式。文本对齐：设置文本的水平对齐方式。文本缩进：可以设置首行缩进。4“方框”选项用于设置CSS 样式的方框格式。宽：设置对象的宽度。高：设置对象的高度。浮动：可以设置文字等对象的环绕效果。填充：指边和其中内容之间的空白区域。边界：是指边框外侧的空白区域。5“边框”选项可以给对象添加边框，设置边框的颜色、粗细、样式。样式：设置边框的样式。宽度：设置4 个方向边框的宽度。颜色：设置4 个方向边框对应的颜色。6“列表”选项设置 CSS 样式的列表格式。类型：设置引导列表项目的符号类型。项目符号图像：可以选择图像作为项目的引导符号。位置：决定列表项目缩进的程度。7“扩展”选项利用 CSS 实现一些扩展功能。分页：通过样式来网页添加分页符号。光标：通过样式改变鼠标形状。过滤器：使用CSS 语言实现过滤器（滤镜）效果。1. 从“任务分析”入手，分析该任务的制作思路，讲述CSS在网页设计中的重要功能。实施建议2. 通过完成任务 1 的实作，掌握 CSS设置页面、文本、段落、列表等格式的方法。CSS操作简单，功能丰富，但要运用自如，还需要学生多多练习，积累经课后评价验。课题任务 2 使用 CSS控制表格元素的外观参考资料教材教学配套光盘素材教学方法教师讲解、演示。学生讨论，上机实践操作。授课节数1 课时教学目标1. 掌握利用 CSS控制表格元素的方法。相关知识利用 CSS控制表格元素。学习重点1. 通过对类、标签的设置来设置表格元素的外观。任务实施1 打开站点 example 中的 company.html 文件。2 在 CSS 样式面板中单击“新建CSS 规则”按钮，打开的“新建CSS教学内容规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“ .tab_title ”；在“定义在”选项中选择“仅对该文档” 。单击“确定”按钮。3 选择“类型”选项，设置文本字体为“宋体” ，大小为“ 12 像素”，行高为“ 1.5 倍行高”，粗细为“粗体” ，颜色为“ #FFFFFF ”。4 选择“类型”选项，设置背景图像为“images/title01.jpg ”，如图5-14所示。5 选择“列表”选项，设置背景图像为“如图 5-15 所示。images/dotl.jpg ”，位置为“外” ，6 通过“标签选择器”选中“档目导航”所在的单元格，在：属性“面板中设置样式为“tab_title ”。7 同样的方法设置“联系方式”单元格样式。网页的浏览效果如图所示。1. 通过上机实践操作，讲解CSS样式表在表格中的应用；先教师演示再由5-16实施建议学生上机操作。2. 结合“任务拓展” ，进一步熟练使用 CSS控制表格元素。CSS操作简单，功能丰富，但要运用自如，还需要学生多多练习，积累经课后评价验。课题任务 3 使用 CSS设置超链接任务参考资料教材教学配套光盘素材教学方法教师讲解、演示。学生讨论，上机实践操作。授课节数1 课时教学目标1.了解网页中超链接的四中状态。2.掌握使用 CSS设置超链接的方法。相关知识1.利用 CSS设置网页中超链接的四种状态。2.将网页中不同位置的超链接设置为不同的链接样式。1.超链接在网页中应用广泛，且形式多样，利用CSS统一设置，可以使页学习重点面看起来清晰美观。2.掌握使用 CSS设置超链接的步骤。3.掌握调用外部样式表的方法。相关知识一、利用 CSS 设置超链接的四种状态超链接有四种显示状态，含义如下：a： link 超链接默认状态；a： visited已访问过的超链接状态；a： hover鼠标指向的超链接状态；a： active鼠标正在点击的超链接状态。教学内容二、将网页中不同位置的超链接设置成不同的样式。如果网页不同区块的内容超链接样式要求不同，则可以在“新建 CSS 规则”对话框中将超链接样式名前加上该区块元素的ID 名或者类名，即可设置出专门针对某些区块或某些标记的超链接样式。这样就能在同一个网页中制作不同的超链接样式。任务实施：一、建立超链接的四种状态CSS样式二、为导航菜单建立完整的超链接三、在网页中调用外部样式表四、在网页中设置不同的超链接样式1. 在 CSS规则对话框中，对超链接有四种状态，这四种状态所表示的顺序实施建议不能搞错。2. 认真完成任务 3 的实作，熟练掌握利用 CSS设置超链接的方法。课后评价通过该任务的学习，学生可以初步掌握利用CSS设置超链接的方法步骤课题任务 4 使用 CSS滤镜产生绚丽效果参考资料教材教学配套光盘素材教学方法教师讲解、演示。学生讨论，上机实践操作。授课节数2 课时教学目标1.了解 CSS滤镜。2.掌握在网页设计中使用CSS滤镜的方法。相关知识1.CSS 滤镜。2.滤镜类型及其参数。学习重点1.熟悉 CSS滤镜各种类型及其参数，能在网页制作中熟练应用。一、什么是 CSS 滤镜CSS 滤镜主要应用于 IE 浏览器，可以给网页的文字、图像等元素添加特殊效果。比如设置透明度、发光、翻转、阴影等。滤镜在HTML 中的语法是：filter ： fiitername （ parameters）二、滤镜的类型及其参数设置1 Alpha 滤镜：制作透明效果，其语法是：Filter：Alpha(opacity=?,finishopacity=?,style=?,startx=?starty=?,finishx=?.finishy=?)相关参数解析：Opacity ：无素透明度，当它为 0 时表示完全透明，为 100 时表示完全不透明； finishopacity ：结束区域的透明度，取值与 opacity 相同；教学内容Style：透明区域的形状， 0 代表一颜色的矩形， 1 代表线形， 2 代表放射状圆形， 3 代表放射状矩形；Startx：渐变透明效果开始处的Starty：渐变透明效果开始处的Finishx ：渐变透明效果结束处的Finishy ：渐变透明效果结束处的2 Blur 滤镜X 坐标；Y 坐标；X 坐标；Y 坐标；制作模糊效果，其语法是：Filter ： Blur(add=? ， direction=? ， strengh=?)相关参数解析：Add ：图像是否被制作成模糊效果，可以是true 或 false，默认是true：Direction ：模糊的角度 .0 表示垂直向上， 顺时针走向， 默认向左的值为270；Strength：模糊程度的大小，一般为整数，单位是像素。3 Chroma把指定的颜色设置为透明，其语法是：Filter ： Chroma(color= ？ )Color ：要设置成透明的颜色。4.Dropshadow制作投射阴影效果，可以指定阴影的偏移量Filter ： Dropshadow(color=?,offx=?,offy=?,positive=?)相关参数解析：Color ：阴影的颜色Offx ：水平方向阴影的偏移量，一般为整数Offy ：垂直方向阴影的偏移量，一般为整数Positive：给非透明像素部分建立可见阴影5.FlipH 滤镜制作水平翻转效果，其语法是：Filter ： FlipH6.flipv 滤镜制作垂直翻转效果，其语法是：Filter ： FlipV7.Glow 滤镜制作发光效果，其语法是：Filter :glow(color=?,strength=?)Color ：发光的颜色Strength：发光的强度，一般为整数，单位是像素8.Gray将彩色图片转为灰度显示，其语法是：Filter:Gray9.Invet 滤镜将色彩、饱和度以及亮度值完全反转建立底片效果，其语法是：Filter ： invet10.Mask 滤镜设置遮罩效果，其语法是：Fitler:Mask(color=?)Color ：指定遮罩的颜色11.Shadow 滤镜制作阴影效果，可以指定阴影的方向，其语法是：Filter:shadow(color=?,direction=?)Color ：阴影的颜色Direction ：阴影的角度，0 表示垂直向上，顺时针走向，默认向左的值是27012.wave 滤镜制作波纹效果，其语法是：Filter:Wave(add=?,freq=?,lightstrength=?,phase=?,strength=?)Add ：是否要添加波纹效果，默认为trueFreq：波纹的频率Lightstrength ：可以对于波纹增强光影的效果，取值范围0到 100Phase：设置正弦波的偏移量Strength：振幅大小13.Xray设置 X 光照效果，其语法是：Filter ： Xray1.CSS 滤镜可以将简单的文字、图像做出非常绚丽的效果。实施建议2. 浏览含有滤镜的网页时，不同的浏览器可能会有不同的效果。通过该项目的学习，学生认识了CSS，并且能自己动手利用CSS美化网页课后评价内容，应该鼓励学生多做练习，除了巩固CSS 的知识点，也为后面学习CSS+DIV布局做好基础。【组织教学】检查学生出勤情况，做好学生考勤记录。强调上课课堂纪律，活跃互动教学气氛。【课题导入】通过前面的学习，大家都能自己独立制作出漂亮精美的网页了吧，在制作网页过程中，大家有没有发现，网页中某些内容的格式（如字体、颜色、背景、属性等）如果统一，页面就会显得美观整洁，可页面元素众多且较分散，一个个设置比较麻烦，而且很容易出纰漏。CSS能在 Dreamweaver 网页设计中统一网页的设计风格， 不仅功能强大， 而且操作简单。CSS可以对布局、字体、颜色、背景和其它图文效果实现更加精确的样式控制，解决了网页界面排版的难题。也就是说CSS决定网页内容如何显示。如果我们要对网页中的某些格式（样式） 进行修改， 只需要修改CSS样式，就可以将站点的一个或多个网页中使用相同样式的内容进行修改，省时高效。【技能训练】（上机实训： 6 课时）一、项目任务任务一：使用CSS设置页面、文本、段落的格式，并能修改CSS规则的属性。任务二：使用CSS设置表格元素外观。任务三：使用CSS设置超链接任务。任务四：使用CSS滤镜产生绚丽效果。二、任务实训1. 学生根据该项目的任务要求进行上机操作，教师在机房巡回指导。2. 完成一个任务后，教师引导学生进行总结，然后进行下一个任务。3. 在完成该项目所有任务的基础上， 教师结合教材 “技能巩固” 的操作题及光盘中的实例题，布置课后上机题。【布置作业】1. 教材项目5 后面的“自我测评” 。