提交者:学员邹斌强所属单位:江苏省木渎高级中学提交时间: 2019-12-26 15:52:19 浏览数( 0 ) 【举报】

CSS层叠样式表入门（前）

课程名称	CSS层叠样式表入门
知识点来源	信息技术（选修）
知识点描述	利用外链CSS样式表体验CSS高效的网页样式管理功能
预备知识	掌握HTML语言基本的编写网页的能力
教学对象	高中学生
设计思路	CSS层叠样式表是高中信息技术（苏科版）选修模块内容，内容比较抽象、较难掌握。本课通过清晰简练的理论剖析，通俗易懂的实例讲解，并贯彻良好的设计意识，使学生能在一种轻松的学习环境中顺利入门。同时，学生通过自主对微课视频简单的播放控制，可反复学习、体会，缩小了学生知识掌握的差异性。整个微课本着从熟知的到未知的、提出问题到解决问题的设计思路进行，使学生在学习过程中能始终带着问题的兴趣学习，满足其解决问题的渴望进行，从而更好地理解CSS层叠样式表有效控制网站网页样式的优点，掌握利用外链样式表高效改变样式的方法。因CSS代码的学习和操作本身具体有枯燥性，在开始与结束配合舒缓的音乐，营造一种轻松愉悦的学习氛围，实现轻松“入门”。
教学过程（教学设计）
程序	内容
一、导入	网站设计时都具有整体风格（外观样式），根据学生掌握的知识，提出利用HTML语言标签属性设置来完成的任务。
二、讲授	第一部分：利用HTML语言标签属性设置式通过实例操作演示，说明必须对每个网页作单独修改HTML语言标签属性来完成。带来的问题：操作的工作量大，对网站风格控制力差。从而引出利用外链CSS样式表的必要性。
	第二部分：通过CSS外链样式表设置样式的方法 1、举例说明如何建立外链CSS样式表及如何在HTML语言的<head>区来指向此CSS文件 2、举例说明在建立好CSS文件后，如何修改样式表，以控制网页外观
	第三部分：通过两种方法的比较，指出利用CSS样式表控制网页样式的优点及其主要功能
三、小结	说明在实际设计制作网页过程中，采用外链CSS样式表设置网页外观的一般步骤
四、练习	练习：根据实例中的方法，利用CSS外链样式表设置样式。说明：本网站为实例中所演示的练习网站，练习前，先将整个网站内容（My Web）复制一份在其他位置，保留源练习网站，便于以后多次练习。提示： 1、例题中利用外链CSS层叠样式表建立的CSS文件内容，大家可以直接复制或照例题介绍输入以下设置内容： /修改网页背景色/ body { background:#00ccff; } /修改网页内标题文字的颜色/ h1 { color:#ff0000; } 2、拓展练习：尝试将以下代码加入到CSS文件对<h1>的设置中，看看网页会有什么变化？并试着理解代码的意思，与HTML代码标签属性写法上的区别： h1 { color:#ff0000; background:yellow; font-size: 18px; } 3、关于CSS内容的学习，推荐以下参考网站： http://www.w3school.com.cn http://www.dreamdu.com
五、反思	学生对新事物的认识得有个过程，同时有他的局限性和规律性。在上面的教学过程中，根据我校高中生的学习特点和认识，通过HTML语言内容的过渡，并产生新的问题，使学生在学习对CSS新内容的学习的必要性产生了渴望。为使整个课程能达到自言学习的易学性和操作内容的实用性，讲解上清晰，操作上有序，重要环境上，提示信息丰富，对其掌握知识产生了良好的教学效果。

CSS层叠样式表入门（后）

课程名称	CSS层叠样式表入门
知识点来源	信息技术（选修）
知识点描述	利用外链CSS样式表体验CSS高效的网页样式管理功能
预备知识	掌握HTML语言基本的编写网页的能力
教学对象	高中学生
设计思路	CSS层叠样式表是高中信息技术（苏科版）选修模块内容，内容比较抽象、较难掌握。本课通过清晰简练的理论剖析，通俗易懂的实例讲解，并贯彻良好的设计意识，使学生能在一种轻松的学习环境中顺利入门。同时，学生通过自主对微课视频简单的播放控制，可反复学习、体会，缩小了学生知识掌握的差异性。整个微课本着从熟知的到未知的、提出问题到解决问题的设计思路进行，使学生在学习过程中能始终带着问题的兴趣学习，满足其解决问题的渴望进行，从而更好地理解CSS层叠样式表有效控制网站网页样式的优点，掌握利用外链样式表高效改变样式的方法。因CSS代码的学习和操作本身具体有枯燥性，在开始与结束配合舒缓的音乐，营造一种轻松愉悦的学习氛围，实现轻松“入门”。
教学过程（教学设计）
程序	内容
一、导入	网站设计时都具有整体风格（外观样式），根据学生掌握的知识，提出利用HTML语言标签属性设置来完成的任务。
二、讲授	第一部分：利用HTML语言标签属性设置式通过实例操作演示，说明必须对每个网页作单独修改HTML语言标签属性来完成。带来的问题：操作的工作量大，对网站风格控制力差。从而引出利用外链CSS样式表的必要性。
	第二部分：通过CSS外链样式表设置样式的方法 1、举例说明如何建立外链CSS样式表及如何在HTML语言的<head>区来指向此CSS文件 2、举例说明在建立好CSS文件后，如何修改样式表，以控制网页外观练习：根据实例中的方法，利用CSS外链样式表设置样式。说明：本网站为实例中所演示的练习网站，练习前，先将整个网站内容（My Web）复制一份在其他位置，保留源练习网站，便于以后多次练习。提示： 1、例题中利用外链CSS层叠样式表建立的CSS文件内容，大家可以直接复制或照例题介绍输入以下设置内容： /修改网页背景色/ body { background:#00ccff; } /修改网页内标题文字的颜色/ h1 { color:#ff0000; } 2、拓展练习：尝试将以下代码加入到CSS文件对<h1>的设置中，看看网页会有什么变化？并试着理解代码的意思，与HTML代码标签属性写法上的区别： h1 { color:#ff0000; background:yellow; font-size: 18px; }
	第三部分：通过两种方法的比较，指出利用CSS样式表控制网页样式的优点及其主要功能
三、小结	说明在实际设计制作网页过程中，采用外链CSS样式表设置网页外观的一般步骤
四、拓展	关于CSS内容的学习，推荐以下参考网站： http://www.w3school.com.cn http://www.dreamdu.com

课前“自主学习任务单”

一、学习指南

1.课题名称：苏科版《CSS层叠样式表入门》

2.达成目标：

通过观看《CSS层叠样式表入门》教学视频，分别完成利用HTML标签属性设置的方法和利用外链CSS层叠样式表两种方法修改网站内网页背景色及字体等外观样式，并比较其差别，体验CSS层叠样式表管理网页样式的高效性。

3.学习方法建议：

建议在观看视频的过程中，通过控制视频播放进度，按视频实例和提供的微课辅带资料操作体会。同时，可查阅http://www.w3school.com.cn网站相关资料，进一步理解CSS的内容。

4.课堂学习形式预告：

同学们先汇报自己的自主学习成果，说出自己对CSS的体验，按照课堂学习流程分别完成：提出自己感兴趣的问 à把问题进行分类 à提炼活动主题

二、学习任务

同学们，通过对HTML语言的学习，我们掌握了利用其制作网页的方法。但对一个庞大的网站进行设计和维护，单靠HTML语言，是不够的，比如，当我们要对整个网站的外观样式进行修改，我们可以通过什么办法来完成呢？带着这个问题，让我们进入CSS的课堂。

序任务提示1为什么网站要设计成统一的网站风格或外观样式？可以查看一些知名的网站，了解一下这些网站的风格特点，并体验其可美观性和可访问性。2如果要让你修改若干个网页的字体或背景，你是如何操作的？若要修改的网页非常多，你会如何操作？按以前学习的方法，通过HTML语言标签属性的设置3、CSS是一种怎样的语言？CSS文件是一种怎样的文件，用什么来建立？CSS语言是一种外观样式设计语言，和HTML语言一样，可以利用纯文本的软件来建立，扩展名是.css4要利用外链CSS样式表改变网页样式，分哪些操作步骤来实现？分两大步：第一步，在网页的HTML文件的<head>区插入<link>语句第二步：利用文本编辑器建立CSS文件，设置外观样式（CSS语法可先了解，代码可按例题输入体验）5通过利用HTML标签属性和外链CSS层叠样式表两种方法修改网页样式，有什么区别？你体验到了什么？根据操作练习结果体验整个网站修改过程的操作量。

当前位置 :项目首页 > 课程作业 > 正文

高中信息技术作业三

老师评语