为网站穿上美丽的外衣

为网站穿上美丽的外衣 为网站穿上美丽的外衣 ——《CSS样式 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 》实践研修成果 教学基本信息 为网站穿上美丽的外衣 题目 ——《CSS样式表》教学设计 学科信息技术年级高一教材内容 教科版 个人信息 姓名 单位 设计者 汤开洋 扬州市弘扬中学 1. 教材分析 教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 2. 学情分析 学生对主题网站的设计、静态网页的制作及 JavaScript 客户脚本语言有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。 3. 教学目标(含重、难点) 【教学目标】 1(知识和技能目标 (1)理解什么是CSS样式表; (2)掌握运用CSS进行样式设置的方法和格式; (3)掌握在 HTML 中加入CSS的三种方法。 2、过程与方法: (1) 能够通过学习网站进行自主学习，理解在网页中加入CSS样式表 过程与方法。 (2)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。 (3)能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网 页。 3、情感态度与价值观: (1)通过CSS样式表的学习，提高学生美化网页的技能。 (2)培养利用网络进行自主学习、实践的能力，培养学生良好的科学研 究态度。 (3)通过实践过程中的合作学习，培养学生主动思考、积极参与、团结 协作的精神。 【教学重点】 1、什么是CSS样式表。 2、嵌入式、内联式、外联式三种样式表的使用方法。 3、体会CSS样式表的优点 【教学难点】 1、三种CSS样式表的格式 2、三种CSS样式表的使用场合和特点 4. 教学过程 2、CSS样式表的实现 观察文字样式 范 展示以下例子: 例 展 示 如果我们想做出上面这样一个文字样 观察并理解HTML和CSS两种实现方 式，那么可以用如下的 HTML 样式来实现。 法。

欢迎进入机器人做学玩网 站 !

讲解CSS的实现。 精 讲在教师指导下，用CSS样式表来对 释HTML 文档进行编辑， 疑 请同学上台改变样式:将字符改成如下 样式:字体为“黑体”;颜色为“红色”; 字号为“14pt”。 分析CSS与 HTML 代码的不同。(表 又识CSS代码，打消畏惧心理。 5-4) 讲解使用CSS的注意事项: 有的比较老的浏览器不支持样式表语 法，不会将 之间的文本显示出来，若要避免 这种情况的发生，就要加入 < ! - - 和 --> 代码。 3.在HTML中加入CSS 实 1)内联式样式表 践阅读教材，思考问题 提问:上两个范例主要是使用哪种方探 法加入CSS样式表的呢,让学生阅读教材究 回答:内联式样式表 115页至116页的内容。 内联式样式表的格式(教师强调) 理解掌握内联式的格式要求 (1)标记 (2)加入位置: 参考教师提供的“帮助”，自己动手或(3)type 属性 进行组内探究。 (4) 动手试试 (1)基本任务:设置超链接的4种状 态 演示内联式样式表的使用方法，在同 (2)提高任务:设置超链接的鼠标指 学的示范中互相学习。 针 给出帮助信息，让学生自主探究 点评学生的作品，让学生介绍完成的方 由新的需要引发新的问题，主动探究法，及时纠正学生的错误。 有效的解决方法 教师总结:内联式样式表直接加在网 页代码内部，并有一定的格式，可 以对这张网页设置效果，CSS样式表的优越 性初步体现。 2)外联样式表 一个网站的网页何止只有一张，一些大 型网站有几千张网页，那么如何使整个网 理解外联样式表的含义和使用方法 站的效果统一呢,每张网页都贴上这段代 码吗,这样好吗, 我们还有第二种方法:先把样式表写成 一个独立的文件，保存扩展名为.css,然后 反 将所有的网页和这个文件链接，这种共享 馈 链接样式表文件的方法叫“外联式”样式 表，也是样式表优点的最高体现。 巩 外联样式表格式(教师强调) 通过练习掌握外联样式表的使用方固 任务中达到简单修改外部样式表文件的能 动手试一试 力，使网站更具个性。 (1) 基本任务 提供给学生一个现成 bjcss.css文 件，要求学生能控制整个网站的风格。并 尝试根据个人喜好修改bjcss.css文件， 使网站更具个性。 (2) 提高任务 给学生提供帮助信息，要求学生修改观看演示，并进行组内评价，学习优 bjcss.css文件，实现鼠标在页面上变样的点，补充不足。 效果。 教师巡回指导，记下最先完成的组和 作品有欠缺的组，并让组内推选一名同学 的作品，以供演示。 演示学生作品，作出评价，突出优点， 指出不足，以供参考。 5(板书设计 为网站穿上美丽的外衣 ——《CSS样式表》教学设计 1、什么是CSS样式表。 2、嵌入式、内联式、外联式三种样式表的使用方法。 3、体会CSS样式表的优点 6(教学活动设计(含师生对话设计) 教 学 教师活动 学生活动 程 序 在浩如烟海的网站中，那些让游览者赏 心悦目、过目不忘的网站被设计者施了什 么魔法呢,只要也为我们的网站穿上美丽 的外衣，它们也会像被施了魔法似的更加 实 美观、更具特色。今天我们就来穿穿看， 例 先来看看下面的实例吧。 观察效果及代码。 展实例展示1:(两种输入框的比较) 示 提示学生认真观察代码。 普通输入框效果图: 横线式输入框效果图: 提示:左图效果是直接在“普通”视图 思考形成两种输入框的原因 下插入输入框产生的，右图是在源代码中 加入新的代码产生的。 实例展示2:(“百度_招聘”网页外观 改进) 观察网页，分析网页外观上的不足，思设计意图:让学生观察需要改变网页外 考如何迅速弥补。 观的“百度_招聘”网页的不足，如:页面 排列不整齐;字体大小、颜色不统一;超 链接太多、下划线太乱等等。如果逐一修 观察变化,惊讶不已,思考其中的原理，改，很麻烦，激发学生思考如何才能将其 对这些既枯燥又难度大的代码主动产生兴迅速改观。然后演示在其源代码中插入新引 趣，学习热情高涨。 代码，快速实现美观、新颖的效果，使学入 生惊讶于变化之快，从而激发学生浓厚的新 课 学习热情。 想一想:在两个实例中加入代码后效果 竟如此神奇，那么这些代码究竟是什么初识,,,样式表，感受其在改变网呢, 页外观上的巨大作用。 答案揭晓:这就是CSS样式表。 怎样才能为网站穿上美丽的外衣呢, 在网页中加入CSS样式表是制作动态网页 明的另一核心技术，有了这门技术，我们就 确会很容易地设计出风格统一、个性独特的 目 网站。 标 那么，什么是 CSS 样式表呢,使用联系刚才的实例，自学“什么是CSS CSS的优点有哪些, 样式表” 请同学们学习教材第112 ,113页内 容。 回答内容(理解CSS样式表的含义和优 然后请同学回答 点) 自教师总结:,,,是网页制作的一种1.什么是CSS样式表, 主新技术，能将网页的内容和样式分开，能2.使用CSS的优点是什么, 探用最简单的代码控制网站的整体风格，最 究 大限度地提高网页制作效率，更加容易地 维护和更新网站。 7.教学反思 本节课不仅通过两种输入框样式的引入，让学生见识了横线式输入框的设计，还让学生惊叹于“百度_招聘”网页外观瞬间的改变，引起学生强烈的探究激情，这比单纯地讲原理要好很多。本节课除了对文字字体、颜色作简单设置外，还对超链接、鼠标和表格样式的设置，内容丰富，能有效地调动学生的积极性，以任务驱动，自主探究，让学生有成就感，从而更加热爱学生信息技术。 本节课所用课件内容很有吸引力，防止学生的注意力只在这些动态效果上，要把学生的注意力引向任务的探究上;样式表格式又很复杂，容易遗忘，故要提醒学生加强记忆，特别是对外联样式表的掌握与灵活使用，可以保证整个网站风格的统一，并可高效率地更新和维护网站;更要鼓励学生能举一反三，利用CSS样式表的原理做出更多的网页效果。