联系本站客服加+微信号15139388181 或QQ：983228566 |
视频标签：动态HTML,CSS样式表
所属栏目：信息技术优质课视频
视频课题：教科版高中信息技术选修三网络技术应用《理解动态HTML—CSS样式表》江苏
本视频配套资料的教学设计、课件 /课堂实录及教案下载可联本站系客服
教科版高中信息技术选修三网络技术应用《理解动态HTML—CSS样式表》江苏省句容高级中学
《理解动态HTML—CSS样式表》教学设计
学段 高一
学科 信息技术
课题
理解动态HTML—CSS样式表
教学 目标
知识与技能目标：
1. 知道什么是CSS样式表。
2. 体会CSS样式表在网页制作中的作用和优点。
3. 掌握嵌入式、内联式、外联式三种样式表的使用方法。 过程与方法目标：
1.能够通过学习网站进行自主学习，理解在网页中加入CSS样式表的过程与方法。 2.通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
3.能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网页。 情感态度与价值观目标：
1. 通过CSS样式表的学习，提高学生美化网页的技能。
2. 培养利用网络进行自主学习、实践的能力，培养学生良好的科学研究态度。 3. 通过实践过程中的合作学习，培养学生主动思考、积极参与、团结协作的精神。
教材
分析
（含重、
难点）
教材分析：
“CSS样式表”是高中信息技术选修(教科版)《网络技术应用》的第五章“动态网页制作”中的内容，本节内容是第五章的重点之一。这一节是在学生了解了客户端脚本语言的基础上的学习，教材首先是介绍了CSS样式表的概念和功能、然后是通过简单的例子来说明CSS的作用以及使用方法。因此“嵌入式、内联式、外联式三种样式表的使用方法”是本节的重点，同时“体会CSS样式表的优点”也应该是一个重点。学生以往做网页都习惯用菜单命令、工具按钮
来进行网页外观设置，使用代码对学生来说有难度不小，所以有必要通过让学生体会CSS样式
表的优点使学生明白为何我们要学习这部分内容。 学生分析：
教学对象是高一年级学生，经过以前的学习，已经认识了动态网页，他们已具有较熟练的
计算机操作技能和较强的利用网络学习的能力。而且在之前的课时里学生已经对小组网站进行了详细的规划，并学习了FrontPage软件的基本功能和简单的网页元素编辑，对HTML的标签及属性也有了了解。
教学重点：css样式表的功能和使用
教学难点：外联、内联和内嵌三类样式表的选择应用 教学 方法、 手段 1. 主题教学：激发学生兴趣最直接最有效的一个方法便是创设一个符合学生心理要求的情境。 2. 分组合作：切合主题，将学生分成小组合作学习，培养学生团队协作精神。
3. 任务驱动：根据主题设计好任务，层层递进，引领学生深入学习。 由情境进入状态，由任务引领学习，由团队相互配合，定能调动学生的积极性，完成本节课的各项目标。
4. 自主探究：用微课进行辅助教学，学生可以根据自己的作品需要有选择的进行自主探究学习。
2
教学过程
教学流程
学生活动
教师活动
设计意图
新课 教学
引入：
通过对博客、论坛、qq空间、及一些播放器的“换肤”功能引入主题
打开教师博客，进入后台，展示换肤过程。
师：换肤的过程很简单吧，大家一下就学会了（不要急着尝试哟）。现成的皮肤毕竟缺乏个性，要想独特点，行不行？
要想实现个性换肤，前提是得破解换肤秘诀，也就是换肤的机理是什么？
引入css样式表，通过分析“百年恩来”站点向学生展示神奇的代码！神奇的Css！为了我们的个性，让我们开始进一步的探秘旅程！ 通过引入环节让学生感受到css样式表的神奇。
成功引起学生兴趣以后再进一步分析css样式表的几种格式。
让学生行动起来： 任务一：
操作步骤：
1.使用外联样式表时，将下面外联式样式表的链接代码复制粘贴在首页index页面的head区域。 <link
rel="stylesheet" type="text/css" href="q.css"> 2.刷新设置页面，看修改后效果。
3.完成后将其他几个页面也加入外联样式表效果。 4.思考：如果更改q.css这个文件以后，都哪些内容会随之改变。 探索：将q.css文件用记事本打开，尝试修改代码（例如：可以更换背景图片 { background-image: url('images/bg.jpg') }，将bg.jpg改成bg1.jpg），观察页面变化。
演示讲解如何“换肤”：
引发学生思考到底是如何实现的？用到了哪些功能？
外联式样式表：
布置任务，发放素材： 分发素材——“百年恩来”站点（没有应用样式的半成品站点），包括现成的Css文件，四个网页文件，及image和其它（四个以文本形式存放的代码与应用提示）。
本环节引导学生从现有认知水平出发来思考外联式样式表。
任务布置， 通过创设情境，调动学生积极性，让学生自发的想要去完成这样一件事情。 希望通过这种方式，能改变之前布置任务让学生去做的教条式教法。首先调动学生情绪，让学生想要去做这件事情，然后引发思考，我该怎么去做这件事？从而引入到我们今天的教学目标上。
3
任务二：
操作步骤：
1.内联样式表放在相应网页码的head区域，注意代码前后加上样式表标签 （代码略）
2.将如上代码复制粘贴到“百年恩来”站点中index页面中的head区域。
3.设置完成以后，刷新页面看效果。
4.思考内联式样式表的特点。
内联式样式表：
讨论环节（发现问题） 师：大家来挑一挑本站的不足。[先讨论，后提问，教师有针对地选择记录]
结果预设如下：
1、字太大，颜色不协调 2、链接不好看，图去框。 3、周总理图要更突出。 4、单调，效果少。
内联样式表可以解决我们的难题。把样式内容放到某个应用的页面内，就可以实现。 [广播]复制“内联样式代码”放入index的head区域，浏览。
通过讨论，一步步让学生成为设计的引领者，使其发现问题并尝试解决问题，用这样一种自主探究的方法是原本枯燥的代码学习，变成有意义有意思的学习过程。
任务三：
操作步骤：
1.首先找到需要设置嵌入式样式的位置，建议可放入首页周总理图标签内
2.找到位置后，直接将如下代码复制到标签内
style="border-style: outset; border-width: 8px"
3.设置完成后，刷新查看效果。
5. 思考嵌入式样式表特点。
嵌入式样式表：
师：对于同样的标签，要想效果不同，我们这么办？我们如何让总理那幅图与众不同？这就涉及到标签的个性设置了，嵌入式样式能解决这个问题。
[广播]打开名为“嵌入式样式代码”的文本文件，分析一下代码(作了那些控制)，然后把它复制到，首页的周总理照片的img标签后，浏览效果。
体验在HTML中加入CSS并不是只有一种方法，在不同的情况下，可以采用不同的方式。 嵌入式样式表的实现很简单，这种方式主要用于对具体的标签做具体的调整，起作用的范围只限于本标签。
嵌入式样式表并没有充分体现出CSS样式表的优越性，所以应用场合不是很多。
4
探究 提高
扩展任务：
1.除了上面所讲的样式以外，还可以自定义样式表。只需将一些滤镜效果在head区域定义，然后在body区域调用即可，调用时只需要键入“class=名称”即可。
2.以下为几个滤镜效果，供大家参考，可尝试探索其功能。 扩展：自定义样式表
大家刚才也看到了，设计一个合适的效果要考虑很多方面，如只用一次，是不是有浪费之嫌疑？设想是不是可以像设计一顶漂亮的帽子一样，不为特定的对象，而是谁想用都可以。
[广播]教师根据学生的提议，应自定义样式。
因为每个网页文件的需要处理的情况不相同，又由于时间关系，所以对CSS样式表的代码的讲授不可能面面俱到。为了能够使学习的辐射范围更大，做了这部分内容的微视频，学生可以根据自己的编辑需求，自主学习，完成加工。
自我 评价
自我评测：
完成任务以后可以对本节课内容进行自我测评，点击进入此网站
http://www.newsjz.com/wxqgr/exam/login.asp
进入网站以后按照机号输入学号：10101 姓名：1 以此类推
对学生掌握的内容给予自我测评的方式进行观察，通过测评结果有选择的进行强调总结。
这部分其实是一个自我加强的部分，通过实测练习，自检掌握程度。养成一个好习惯，积少成多，为日后参加学业水平测试夯实基础。
总结
回忆整个创作流程，结合老师讲解的知识点进行梳理，进一步加深对这节课的印象。充分体验到了“做中学”的乐趣。
1、 CSS样式表的特点、优先级、功能总结 2、列表比较 插入方式
插入位置
控制范围
应用代码
优点
外联式样式表 <head>
所有链接样式表文件的网页（全站） <link > 可以复用、便于修改、提高网页显示的速度 内联式样式表 <head> 本页面 <style> 实现单个页面的个性 嵌入样式表 标签内 本标记 Style 实现单个标签的个性 自定义
标签内
本标记
Class
一次设置，多次使用
CSS样式表的优点：
1. 只需修改一个css代码文件就可以改变页数不定的网页外观和格式 2. 可以“随心所欲”地控制页面布局和外观。 3. 在所有浏览器和平台之间具有较好的兼容性。 4. 能够精简网页，提高下载速度。
视频来源：优质课网 www.youzhik.com
