《5.2.1用CSS美化网页.doc》由会员分享，可在线阅读，更多相关《5.2.1用CSS美化网页.doc（4页珍藏版）》请在金锄头文库上搜索。
1、城南高级中学网络技术应用教案备课人编号备课日期课题5.2.1用CSS美化网页 上课日期教学三维目标知识与能力（1）理解什么是CSS样式表； （2）掌握运用CSS进行样式设置的方法和格式； （3）掌握在 HTML 中加入CSS的三种方法。过程与方法培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合素质。情感态度价值观通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则教材分析教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本
2、知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 教学重点在HTML中加入CSS的三种方法教学难点CSS 样式设置的方法和格式教学方法讲授法、小组讨论法、问题激励法教学媒体多媒体微机教室、网络广播软件教学过程一、 导入展示CSS实例 代码： 设计在线 提示学生观察上面代码。二、 教学过程今天我们来学习CSS样式表，这是制作动态网页的另一核心技术。 那么，什么是 CCS 样式表呢？使用CSS的优点有哪些？ 请同学们学习教材第112 113页内容。 然后小组汇报。 展示以下例子：如果我们想做出上面这样一个文字样式，那么可以用如下的 HTML 样式来实现。 欢迎进入机器人做学玩
3、网站 ! 讲解CSS的实现。 分析CSS与 HTML 代码的不同。 讲解使用CSS的注意事项：有的比较老的浏览器不支持样式表语法，不会将 和 之间的文本显示出来，若要避免这种情况的发生，就要加入 代码。 学生观察文字样式 在教师指导下 用CSS样式表来对 HTML 文档进行编辑，在 标签前加入下面CSS代码， 学生实践：1用 FrontPage 打开“机器人做学玩”网站的首页，观察在这张网页上，是否利用CSS进行了样式设置，如果有，请仔细观察它的语句。 2请大家在自己做的网站上，编写一到两个CSS文字样式，来替换原有的 HTML 文字样式，并观察其效果。演示 在 HTML 中加入CSS的三种方法 1嵌入式样式表 2内联式样式表 3外联式样式表 给出部分CSS代码，由学生用不同方法实现其效果。 学生自主实践探究在 HTML 中加入CSS的三种方法。 1试着用CSS来改变“机器人做学玩”网站中浏览器默认的超链接样式，可以用任意一种加入 HTML 的CSS方式。 2要求样式：当鼠标划过时，设为超链接的文字，变成淡蓝色，字体由 9pt 变成 10pt，并出现下划线。 代码： 教师评价学生CSS样式表应用效果作业布置每组完成课后实践部分并进行组内自评和小组互评。教学反 思：
