《网页制作》13-16周教案-【镇江有作】中职教育网页制作（教案）

授课日期 第13周 授课班级 授课课时 2 授课形式 新授 授课章节 名 称 第7章 CCS样式 7.1 CSS样式的概念 7.2 CSS样式 7.3 样式的类型与创建 7.4 编辑样式 使用教具 多媒体教学系统 教学目的 1、 掌握CSS样式的概念 2、 掌握CSS样式面板的使用方法 3、 掌握CSS样式选择器的应用 4、 掌握样式的类型和创建方法 教学重点 CSS样式的创建与编辑 教学难点 能根据网页需求编辑CSS样式 更新、补 充、删节 内 容 课外作业 1．简要说明CSS的层叠次序。 2．简要说明在【新建CSS规则】对话框中可以创建的CSS样式的类型。 3．应用类样式有哪几种方法？ 教学反思 板 书 设 计 第7章 CCS样式 7.1 CSS样式的概念 7.2 CSS样式 7.2.1 “ CSS样式”面板 7.2.2 CSS样式的类型 7.3 样式的类型与创建 7.3.1 创建重定义HTML标签样式 7.3.2 创建CSS选择器 7.3.3 创建和应用自定义样式 7.3.4 创建和引用外部样式 7.4 编辑样式 课堂实例—新车上市资讯网页 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 课 堂 教 学 安 排 主要教学内容及步骤 备 注 1、 组织教学 检查学生出勤情况，师生互候问候，集中学生注意力。 2、 导入新课 网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML对象的格式；如果修改外部样式文件，则自动重新设置与它链接的所有HTML文档。 本次课主要通过一个课堂案例新车上市资讯网页制作掌握CSS样式面板的使用、CSS样式选择器的应用样式的类型和创建方法等操作。 呈现任务： 课堂案例一：新车上市资讯网页 3、 探究新知 【相关知识点】 1、 CSS样式的概念 CSS是Cascading Style Sheet的缩写，一般译为“层叠样式表”或“级联样式表”。层叠样式表是对HTML3.2之前版本语法的变革，将某些HTML标签属性简化。比如要将一段文字的大小变成36像素，在HTML3.2中写成“<p><font size="36">文字的大小</font></p>”，标签的层层嵌套使HTML程序臃肿不堪，而用层叠样式表可简化HTML标签属性，写成“<p style="font-size:36px">文字的大小</p>”即可。 层叠样式表是HTML的一部分，它将对象引入到HTML中，可以通过脚本程序调用和改变对象的属性，从而产生动态效果。比如，当鼠标指针放到文字上时，文字的字号变大，用层叠样式表写成“<p onMouseOver="className='aa'">动态文字</p>”即可。 2、CSS样式 （1）“CSS样式”控制面板 使用“CSS样式”控制面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。 1．打开“CSS样式” 面板 2．样式表的功能 （2）样式表的功能 层叠样式表是HTML格式的代码，浏览器处理起来速度比较快；方便网站设计师制作个性化网页。 2、 CSS样式的类型 层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，实现HTML无法实现的效果。在Deamweaver CS6中可以运用的样式分为重定义HTML标签样式、自定义样式、使用CSS选择器3类。 1．重定义HTML标签样式 2．CSS选择器样式 3．自定义样式 3、 样式的类型与创建 （1） 创建重定义HTML标签样式 当重新定义某HTML标签默认格式后，网页中的该HTML标签元素都会自动变化。因此，当需要修改网页中某HTML标签的所有样式时，只需重新定义该HTML标签样式即可。 · 启用新建CSS规则对话框 · 重新定义HTML标签样式 （2）创建CSS选择器 若要为具体某个标签组合或所有包含特定Id属性的标签定义格式，只需创建CSS选择器而无需应用。一般情况下，利用创建CSS选择器的方式设置链接文本的4种状态，它们分别为鼠标指针点击时的状态“a:active”、鼠标指针经过时的状态“a:hover”、未点击时的状态“a:link”和已访问过的状态“a:visited” 。 （3）创建和应用自定义样式 若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然后将它应用到文档的网页元