5.2.1用CSS美化网页.docVIP

备课人 编号 备课日期 课题 5.2.1用CSS美化网页 （1）理解什么是CSS样式表； （2）掌握运用CSS进行样式设置的方法和格式； （3）掌握在 HTML 中加入CSS的三种方法。 过程与方法 培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合素质。 情感态度价值观 通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 在HTML中加入CSS的三种方法展示CSS实例 代码： SPAN style=BACKGROUND-IMAGE: URL(across．gif); WIDTH: 300px DIV style=FILTER: Chroma( Color=#CCCCCC); COLOR: #CCCCCC; BACKGROUND-COLOR: #FFFFFF; WIDTH: 300px; FONT: bold 55pt 宋体 设计在线 /DIV /SPAN 提示学生观察上面代码。 今天我们来学习CSS样式表，这是制作动态网页的另一核心技术。 那么，什么是 CCS 样式表呢？使用CSS的优点有哪些？ 请同学们学习教材第112 ～113页内容。 然后小组汇报。 展示以下例子： 如果我们想做出上面这样一个文字样式，那么可以用如下的 HTML 样式来实现。 body emfont face= 宋体 color=green h3 欢迎进入机器人做学玩网站 !/h3 /font/em /body 讲解CSS的实现。 分析CSS与 HTML 代码的不同。 讲解使用CSS的注意事项： 有的比较老的浏览器不支持样式表语法，不会将 style type=text/css 和 /style 之间的文本显示出来，若要避免这种情况的发生，就要加入 ! - - 和 -- 代码。 学生观察文字样式 在教师指导下 用CSS样式表来对 HTML 文档进行编辑，在 body 标签前加入下面CSS代码， 学生实践： 1．用 FrontPage 打开“机器人做学玩”网站的首页，观察在这张网页上，是否利用CSS进行了样式设置，如果有，请仔细观察它的语句。 2．请大家在自己做的网站上，编写一到两个CSS文字样式，来替换原有的 HTML 文字样式，并观察其效果。 演示 在 HTML 中加入CSS的三种方法 1．嵌入式样式表 2．内联式样式表 3．外联式样式表 ? 给出部分CSS代码，由学生用不同方法实现其效果。 学生自主实践探究在 HTML 中加入CSS的三种方法。 1．试着用CSS来改变“机器人做学玩”网站中浏览器默认的超链接样式，可以用任意一种加入 HTML 的CSS方式。 2．要求样式：当鼠标划过时，设为超链接的文字，变成淡蓝色，字体由 9pt 变成 10pt，并出现下划线。 代码： style type=text/css !-- a { font-size ：9pt ； color ：#0000ff ； text-decoration ：none ； } a ：active { font-size ：9pt ； color ：#0000ff ； text-decoration ：none ； } a ：hover { font-size ：10pt ； color ：#66ccff ； text-decoration ：underline ； } a ：link { font-size ：10pt ； color ：#66ccff ； text-decoration ：underline ； } -- /style 教师评价学生CSS样式表应用效果 作业布置 每组完成课后实践部分并进行组内自评和小组互评。 教 学 反 思： 城南高级中学网络技术应用教案