CSS样式表应用.docVIP

CSS样式表的应用 主备人：潘文学 审核人：李雪芳 一、教学目标 了解CSS样式表的定义； 了解CSS样式表的优点； 掌握嵌入式、内联式、外联式三种样式表的实现方法；通过对三种样式表的亲身实践，感受这三种样式表的优缺点。 二、教学重点 嵌入式、内联式、外联式三种样式表的实现方法 三、教学难点 嵌入式、内联式、外联式三种样式表的实现方法 四、教学过程 教学步骤 师生活动 备注 引入新课 教师：打开一个没有添加格式的文字网页，同时再打开一个利用CSS做出的网页； 教师：我们在前面的课程中学习了利用FRONTPAGE来制作网页，那么大家看看这个网页（教师打开利用CSS做出的网页）； 教师：前面我们学过可以利用什么样的方法看出网页中作者所做的操作； 学生：查看源文件的方法； 教师：打开一个普通网页，并查看其源代码，再打开一个CSS特效网页，同时也打开其源文件窗口；将网页在计算机的屏幕上并列排开进行比较，让同学看看到底不一样的地方在哪里? ? ? style type=text/css 样式表的内容 /style span class=样式名应用文本/span ? ? ? 通过对比，让学生对什么是CSS 样式表有一个初步的了解，从而得出CSS样式表的基本格式和书写方法。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 书写格式：在HEAD区中定义： 引用定义好的样式表时,强调是在被应用文本的位置处加上SPAN语句 活动一 学生层叠样式表（CSS）格式学习活动 活动描述：利用教师提供的CSS层叠样式表学习文件，通过选择CSS样式表的一些参数进行简单的CSS样式设计。通过观察参数的不同对应网页中文字的变化，来直观的学习CSS样式设计。 教师活动：先向同学们示范“CSS层叠样式表”的基本操作，从而带领同学走近CSS样式表。做一个网页，演示如何开始新建样式表 活动要求：任务一：制作出带有文字格式效果的文字网页，注意生成的CSS代码。 学生活动：（1）通过教师对学习网页的操作演示了解学习网页的基本操作； （2）通过对CSS样式表的学习来掌握CSS的基本参数变化与书定格式； 教师总结：CSS中的常见问题并展示同学们的设计效果。 ? ? ? ? ? ? ? ? ? ? ? 强调书写方法,避免在细节处出错 活动二 在网页中应用 CSS 样式表。 教师活动：先向同学们讲解常见的CSS层叠样式表应用一种格式内联样式表，并对任务二网页中的文字进行应用CSS样式表 学生活动：通过教师对学习网页的操作演示了解在网页中应用CSS的操作；打开老师的网页，在其中把编辑好的CSS应用在文本上。 教师活动：在同学们练习将CSS样式表应用于不同的网页时教师需要在教室内巡视并针对同学的操作提出合理的建议和指导，并对同学的亮点与操作失误做好记录以便于后面的总结与展示活动的开展。 ? ? ? ? ? 进一步巩固内联样式表的掌握,教师收集学生的操作失误,并适时给同学们以指导. 活动三 完成任务三的网页，根据自己的风格进行CSS创建，并应用，形成新的格式的网页作品。 ? ? 给学生发挥的余地,根据自己的创意做出不一样的效果的网页,增加学生的成就感. 总结 Css样式表的分类： 1、嵌入式样式表 2、内联式样式表 3、外联式样式表 三种样式表在网页中的使用方法 再次强调本节课的内容及所需掌握的知识点。