全国计算机类说课大赛一等奖:CSS样式表的使用教学设计
CSS教学设计

第八课定义CSS样式一、教学目标1.知识和技能目标(1)理解什么是CSS样式表;(2)掌握运用CSS进行样式设置的方法2.过程和方法目标通过学习运用CSS样式表优化网页制作,让学生学习正确、合理运用技术,了解技术服务于内容的原则。
3.情感态度和价值目标培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力;激发学生学习信息技术的兴趣。
二、教学重点CSS样式设置的方法。
三、教学难点运用CSS标签美化网页四、教学内容处理思路遵循“用任务驱动”的思路,努力将理论与实践相结合,让学生自主探究,提高学习技能的兴趣。
根据学生的实际情况,创造性、实用性和新颖性的原则安排教学实例。
七、教学过程教学程序教师活动学生活动引入新课认识CSS 导入:这节课我们学习课本的第八课定义CSS样式。
那么什么是CSS呢?CSS中文翻译成“层叠样式表”,是一种制作网页的新技术。
成为网页设计必不可少的工具之一,在当今的网页制作中,几乎所有漂亮的网页都用了CSS。
借助于CSS的强大功能,网页将在你丰富的想像力下千变万化。
这节课我们就来初步领略CSS打造精彩的页面效果。
学生激发了学习的兴趣,产生学习的欲望明确目标自主探索一、用CSS轻松美化文字我们知道,在网页中字体的好看与否是直接关系到页面的整体效果,因此对文字的控制就显得很重要。
下面我们可以用CSS轻松美化文字打开网页文件tuijian1.htm1、教师演示操作:创建CSS 样式方法1:“文本——CSS 样式——新建”,打开“新建CSS 规则”对话框方法2:“窗口——CSS 样式”,打开CSS 面板,单击“全部”标签,单击“新建CSS 规则”按钮,打开“新建CSS 规则”对话框2、教师讲解对话框的选项含义●【类】是一种新的样式表示符,可以任意命名。
它是将CSS 样式应用于选定的区域,若要在整个页面的相关区域应用CSS 样式,则需选择【标签】和【高级】方式。
●【标签】是将页面源文件中的html 标记重定义。
CSS样式表课程设计

CSS样式表课程设计一、课程目标知识目标:1. 理解CSS的基本概念,掌握CSS的选择器、属性和值的使用方法;2. 学会使用CSS样式表对HTML文档进行美化,包括文本样式、颜色、布局等方面的设置;3. 掌握CSS的盒模型,理解并应用边距、边框、填充和尺寸等属性;4. 了解CSS的继承、优先级和层叠规则,能够解决样式冲突问题。
技能目标:1. 能够编写简单的CSS代码,对HTML页面进行样式设计;2. 能够使用CSS选择器对特定元素进行样式设置,实现对页面元素的精确控制;3. 能够运用CSS盒模型进行页面布局,实现基本的页面排版;4. 能够调试和解决CSS样式表中存在的问题,保证页面显示效果的正确性。
情感态度价值观目标:1. 培养学生对前端开发的兴趣和热情,激发他们主动探索和学习的欲望;2. 培养学生的审美观念,使他们重视网页设计中的美感和用户体验;3. 培养学生良好的团队合作意识,使他们学会与他人共同解决问题,分享经验和成果;4. 培养学生遵守网络道德规范,注重版权和知识产权保护,养成良好的编程习惯。
本课程针对初中年级学生,结合学科特点和教学要求,以实用性和操作性为核心,注重培养学生的实际动手能力和审美能力。
通过本课程的学习,学生将掌握CSS的基本知识和技能,为后续学习前端开发打下坚实基础。
同时,课程中注重情感态度价值观的培养,引导学生形成积极的学习态度和良好的编程习惯。
二、教学内容1. CSS基础概念:介绍CSS的定义、作用和基本语法,让学生理解样式表的概念及其与HTML的关系。
- 选择器:包括通用选择器、类型选择器、类选择器、ID选择器、属性选择器等;- 属性和值:讲解字体、颜色、文本、背景等基本样式属性及其取值。
2. CSS样式设置:学习如何使用CSS对HTML元素进行美化,包括以下内容:- 文本样式:字体、大小、颜色、行间距、文本对齐等;- 颜色和背景:颜色表示方法、背景颜色、背景图片、背景重复等;- 边框和边距:边框样式、边框宽度、边框颜色、内边距、外边距等。
说课PPT——网页文本中CSS样式表的应用(林世鑫)

课堂实训任务书
课程名称 专业班级 实训项目 网页设计 2012F49 指导老师 实训时间 林世鑫 2013-5-25
CSS样式表在静态文本中的应用 实训内容 操作要求
附件
思考 实施环境 与工具软 件、素材 Windows XP,Dreamweaver cs3 仿真花制造企业网素材
任务评价表
内容 技 能 能 力 任务主题 附件 评价项目 3 评价 2 1
教学设计——教学重难点
重点
CSS样式的建立与修改 CSS样式表类型
难点
CSS样式表类型的选择 CSS样式面板各参数的含义
教学过程设计
以“实用、够用、必需”为原则,培养学生的实际应用能力; 以传授知识为基础,以解决问题为核心; 以提高能力为目标,以工作过程为导向;
问题导入
谢谢!
1、避开单一的代码讲解 对 2、以网站项目为线索,重 策 新贯穿教材章节知识点之间 的联系
课程说明
DW中的表 格布局,文本 编辑,图片的 相关操作
前导
CSS样式 表在静态 文本中的 应用
后续
CSS样式表 在链接文本中 的应用 外部CSS样 式表的导入与 应用 CSS+DIV的 应用
学情分析
知识解析
技能训练
小结评价
教Hale Waihona Puke 过程教师:问题引出 学生:学生思考
教师:知识解析
学生:操作练习
学生:观察、思考、笔记
教师:指导监督
教师:评价小结
学生:复习、思考
教学过程
教师归纳总结要点 1.总结本课题主要知识点。 2.解答学生在实验过程中遇到的普遍性问题? 3. 抛出下节课的问题:对于添加了链接的文本,我们应当如何利 用CSS样式表来美化?
实验八 CSS样式表的创建及运用

实验八 CSS样式表的创建及运用一、实验目的1、掌握CSS样式表功能;2、掌握内部样式表的创建,并会在网页中运用样式表;3、掌握外表样式表文件的创建,并会将该文件运用到整个站点文件;4、掌握样式表的管理,会编辑、删除、重命名样式表;二、实验内容对文件夹中的文件进行css样式表的设置,要求:1、整个文件夹下的文件超链接格式“字体:宋体,大小:18pt,颜色:黄色,无下划线“,访问后的超链接的格式”字体:宋体,大小:18pt,颜色:黑色,无下划线”,鼠标移到超链接的文字上显示十字型光标。
2、整个文件夹下文件正文格式“字体:宋体,大小:24pt,颜色:白色,文字行间距为20px”,背景颜色#333333,字体为“华文楷体”,鼠标显示十字型光标样式。
3、所有页面中标题的格式字体:"华文琥珀",大小:24pt,颜色:红色图2-14-1 index.html效果图图2-14-2 2000.html效果图4、2000.html中所获奖项的项目列表符号用图像来显示,效果图如图2-14-2所示。
5、2005.html 中图像边框格式“样式:脊状,宽度:中,颜色:红色”,效果图如图2-14-3所示。
6、2006.html中“夜宴”图像格式“滤镜:去色(Gray),使用id选择器实现,效果图如图2-14-4所示。
图2-14-3 wenxue.html效果图图2-14-4 2006.html效果图三、知识点分解该实验主要涉及到整个站点的一个外部样式表文件的创建、编辑及应用,每个网页内部样式表的创建、编辑及应用。
四、实验步骤1、打开index.html页面,选择[文本]\[CSS样式]\[新建]菜单命令,弹出如图2-14-5所示的“新建CSS规则”对话框,将选择器类型选择为“高级(ID、伪类选择器等)”,在“选择器”下拉列表框中选择“a:link”,“定义在””新建样式表文件”,单击“确定”按钮,弹出“保存样式表文件为”对话框,在文件名中输入文件名new,单击“保存”按钮,弹出“a:link的CSS规则定义(在new.css中)”对话框,在“分类”中选择“类型”,设置为“字体:Verdana, Arial, Helvetica, sans-serif,大小:18pt,颜色:黄色,修饰:无”,单击“确定”按钮。
广东省创新杯说课大赛计算机类一等奖作品:CSS样式表的使用现场说课课件

新课讲授
游戏小结
问题导入
巩固提升
交流拓展
信息化教学设计 《 CSS样式表的使用》
2 新课讲授
任务一
观看“美美的换装秀”——认识CSS
任务二
体验网页的换装——添加外部样式表
任务三
“服装搭配师”——修改CSS选择器属性值
信息化教学设计 《CSS样式表的使用》
2 新课讲授
理论知识 枯燥
学习积极性大打折扣
教材 分析
学情 分析
教法 学法
教学 过程
教学 反思
3 2 4
1
5
教材 分析
学情 分析
教法 学法
教学 过程
教学 反思
3 2 4
1
5
信息化教学设计 《CSS样式表的使用》
1 教材出处
第二章 HTML 基础
CSS 的应用 第四章
HTML 高级应 用
对前面章节
第一章 站点的 后续知识点 配置
综合深化 知识对接
2 新课讲授
学习平台 任务手册
信息化教学设计 《 CSS样式表的使用》
2 新课讲授
信息化教学设计 《 CSS样式表的使用》
新课讲授
游戏小结
问题导入
巩固提升
交流拓展
信息化教学设计 《 CSS样式表的使用》
3 情境创设
教 创设情境 师
情境创设
A公司请了网站设计公司设计一个 宣传网站,网页设计师已经设计了 初稿,现在A公司对该网站进行初 步的验收。
人员 分配
两名学生:验收人员 两名学生:设计师
信息化教学设计 《 CSS样式表的使用》
3 情境创设
CSS样式表美化页面
信息化教学设计 《 CSS样式表的使用》
全国计算机类说课大赛一等奖:CSS样式表的使用教学设计

一课时本次课设计课时为2课时。
二教材分析(一)知识内容分析本课内容选自高等教育出版社的《网页设计与制作(HTML+CSS+JavaScript)》,第四章《CSS 的应用》,设计课时为2个课时。
本章在整个课程体系里起到承上启下的作用,它既是对前面的基础章节的综合深化,又开启了后续DIV+CSS知识对接。
在本课之前,学生基本掌握网页制作的主要知识点,有一定的代码基础。
而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。
学生通过理解CSS样式、选择器的概念,掌握应用外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页,并能对所设计的作品进行评价,培养学生的设计、审美能力及职业素养和创新精神。
本次教学活动对学生的网页制作与设计起着基础、提高作用。
(二)我对教材的处理方法1、把教材所涉及的知识点进行分层,使学生由简入深理解和掌握CSS样式表的使用。
2、对教材内容进行二次处理,制作原创案例,使内容更加适合我班学生学习。
3、由CSS样式表的使用引导学生对网页界面设计的分析。
三学生分析教学对象为我校计算机应用专业中职二年级的学生。
学生学习网页制作已有一个学期,对这节课之前的学生情况分析如下:(一)学生知识能力分析1、学生能熟练使用Dreamweaver软件2、对于静态页面的设计有一定的基础3、学生有简单的代码基础4、在以往的学习过程中有简单接触过嵌入式的CSS样式5、学生缺乏动手能力6、对作品的评价缺乏系统的认识和理解7、学生技能水平出现分化现象(二)学生自学能力分析我在课堂教学过程中,注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握,从中培养学生的自学能力。
开始自学的内容简单,等学生认为自学不是一件很难的事情且乐于参与时,再适当加大自学的难度。
在教学过程中,长期渗透自学理念,学生们已经有了较强的自学能力和良好的课前预习习惯。
因此,尽管本课是一节综合项目设计课程,我还是在教学方法中渗透自主探究学习法,相信学生有能力获得成功。
最新全国创新杯计算机说课大赛一等奖课件网页换装----用CSS改变网页外观

说教材
【学情分析】: 中专二年级,计算机应用专业学生,班级人数 35人。 通过前面的学习学生已经掌握了使用 Dreamweaver软件设计网页的基础操作,能够比较 熟练的进行简单的网页设计。但是中专学生在学习 过程中相对来说主动思考能力不强,学习的条理性, 总结归纳能力有待提高。
说
课:宋
说
课:宋
妍
说教材
【学习任务】:
1、什么是CSS 学习目标: 2、认识CSS面板
3、创建及应用CSS类样式
学习重点: 创建及应用CSS类样式
学习难点:
CSS类样式应用
关 键 点:
创建及应用CSS类样式
说
课:宋
妍
说教法
【教学方法】: 讲授法、演示法、启发法、课堂讨论法、练习法。 【教具准备】: 多媒体网络机房
不足之处:
个别学生学习主动性有待进一步调动。
有待改进: 和监督制度,注意结合学生层次和性格分组。
再上类似的实训课时,应注重完善课 课:宋 妍
妍
说教材
【教学目标】:
知识与技能: 掌握创建及应用CSS类样式的操作方法。 本着“以能力为本位”的指导思想, 培养学生正确的分析、处理和解决实际问 题的能力以及协作能力。 以职业教育“五个对接”为指导,培 养学生学习能力、创新能力、团队精神, 使学生富有责任感,能够终身学习。
过程与方法:
情感、态度 与价值观:
【授课时间】:
一课时
说
课:宋
妍
说学法指导
说
课:宋
妍
说教学过程
激趣 导入 讲授 新课 课堂 练习 小结 作业 课堂 答疑
说
课:宋
妍
说教学过程
《CSS样式表的使用》教学设计

一课时本次课设计课时为2课时。
二教材分析(一)知识内容分析本课内容选自高等教育出版社的《网页设计与制作(HTML+CSS+JavaScript)》,第四章《CSS 的应用》,设计课时为2个课时。
本章在整个课程体系里起到承上启下的作用,它既是对前面的基础章节的综合深化,又开启了后续DIV+CSS知识对接。
在本课之前,学生基本掌握网页制作的主要知识点,有一定的代码基础。
而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。
学生通过理解CSS样式、选择器的概念,掌握应用外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页,并能对所设计的作品进行评价,培养学生的设计、审美能力及职业素养和创新精神。
本次教学活动对学生的网页制作与设计起着基础、提高作用。
(二)我对教材的处理方法1、把教材所涉及的知识点进行分层,使学生由简入深理解和掌握CSS样式表的使用。
2、对教材内容进行二次处理,制作原创案例,使内容更加适合我班学生学习。
3、由CSS样式表的使用引导学生对网页界面设计的分析。
三学生分析教学对象为我校计算机应用专业中职二年级的学生。
学生学习网页制作已有一个学期,对这节课之前的学生情况分析如下:(一)学生知识能力分析1、学生能熟练使用Dreamweaver软件2、对于静态页面的设计有一定的基础3、学生有简单的代码基础4、在以往的学习过程中有简单接触过嵌入式的CSS样式5、学生缺乏动手能力6、对作品的评价缺乏系统的认识和理解7、学生技能水平出现分化现象(二)学生自学能力分析我在课堂教学过程中,注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握,从中培养学生的自学能力。
开始自学的内容简单,等学生认为自学不是一件很难的事情且乐于参与时,再适当加大自学的难度。
在教学过程中,长期渗透自学理念,学生们已经有了较强的自学能力和良好的课前预习习惯。
因此,尽管本课是一节综合项目设计课程,我还是在教学方法中渗透自主探究学习法,相信学生有能力获得成功。
高中信息技术教科版选修3第五章第2-2课《CSS样式表》省级名师优质课教案比赛获奖教案示范课教案公开课教案

高中信息技术教科版选修3第五章第2-2课《CSS样式表》省级名师优质课教案比赛获奖教案示范课教案公开课教案
【省级名师教案】
1教学目标
1、知识与技能目标:
1.了解常见的CSS样式表几种常见效果
2.了解几种常见CSS样式表的异同
3.会书写简单CSS代码动态网页
2学情分析
CSS样式表,它主要是靠代码来实现效果的,而且属性代码又多,学生掌握起来很困难,所以这部分的内容应当以简单易学的实例为主,从学生感兴趣的地方入手,首先选择学生感兴趣的素材,然后给学生一些简单可行的任务来实践。
主要是要教给学生用CSS来控制页面风格的方法,更多具体的效果还是要求学生课后自己探索获得。
而通过上节课脚本语言的学习,学生基本掌握了Java文件实现和调用的方法,所以对本课CSS的学习也有一定帮助。
另外考虑到学生间有差异,所以上课之前将学生进行分组,以小组合作学习方法进行,每组都分配个别动手能力、理解强的学生以好带差,尽可能的让每一位学生都能动起来,避免部分学生因动手能力差而产生挫折感。
3重点难点
教学重点:CSS样式表的功能和应用。
教学难点: 嵌入、内联、外联三种样式表的合理选择使用。
4教学过程
教学活动
1【导入】CSS样式表
以评析上一节课作业为切入点,使用上一课技能完成的作业,页面比较单调、死板,缺少活力,无法抓住人的眼球,那么我们有没有办法改变下呢?有什么技术能使整个页面活跃起来,层次色彩丰富多彩呢?提出问题后让学生自己学习相关内容。
全国“创新杯”计算机类说课大赛一等奖作品:《DIV+CSS布局网页》教学设计方案

网页设计与制作——使用DIV+CSS布局网页《网页设计与制作——网页布局》教学设计【课题】网页布局——使用DIV+CSS布局网页【教材】《网页设计与制作》【授课班级】中等职业学校网络专业二年级【教时】 4课时【教材分析及学情分析】本次课采用的教材是国家十二五规划教材《网页设计与制作》,其中DIV+CSS布局网页是重要的教学单元。
本教材内容通俗易懂、图文并茂,并且包含有丰富的信息化实训案例。
本次课的教学对象为中职学校二年级学生,他们未来主要从事网页前端设计师的工作,要求具备网页前端设计的能力。
在本次课之前,我们的学生已经掌握了Dreamweaver网页设计的相关知识,具备了网页美工的基础,学生学习热情较高,喜欢团队合作的探究学习方式,但学生自主创新能力不足,学习代码编写有一定困难,因此本课重点讲解如何使用DIV+CSS布局网页的知识内容。
【教学目标】依据本教材的内容,结合学生的学情分析,本着提高学生的知识水平及分析处理能力为宗旨,我制定了知识目标、技能目标、情感目标相结合的三维教学目标:知识目标:(1)学会DIV+CSS网页布局方式(2)掌握DIV+CSS布局的定位方法技能目标:(1)能熟练使用CSS对网页中对象的位置精确排版;(2)灵活应用DIV+CSS进行网页布局;情感目标:(1)培养学生团队合作意识;(2)提高学生责任感和职业素养;【教学重点与难点】●教学重点:DIV+CSS网页布局方式、方法。
●教学难点:灵活使用DIV+CSS布局定位。
【教学设计】课前利用该课程的学习网站和微课资源库让学生自主预习。
课中采用信息化的混合式教学法、项目驱动法等多种方法相结合的形式来激发学生的学习兴趣,并且利用微课资源库来突破教学难点;在教学效果上采用多元评价检测方法,让学生体验成功的乐趣;最后老师进行归纳总结,进行知识拓展,延伸学生的知识面。
使学生在不知不觉中实现知识的传递、迁移和融合。
【学法分析】学生是学习的主体,教师是组织者和引导者,引导学生学会学习的方法,才能构建有效的课堂。
CSS样式表应用PPT教学课件

外部样式表并不是它们所适用的文档的一部分。 外部样式表单独存储,并且在所有使用它们的 文档中都要进行说明。
2020/12/10
12
外部样式表
可以用MIME类型text/css将外部样式表编写成一些文 本文件,它们可以存储在因特网上的任何一台计算机 中,浏览器获取外部样式表就如同获取文档一样。
2020/12/10
17
样式说明格式
<style>元素中的type属性向浏览器指明了在 <style>元素中样式说明的类型。
在上面这个例子中,type属性被设置成 “text/css‘’,即层叠样式表。
由于还有许多其他类型的样式表,因此样式说 明的类型还是必要的。
2020/12/10
18
样式说明格式
与元素属性的属性/值不同(在元素符属性的每 一对属性/值中,两个部分之间使用等号相分 隔,而所形成的列表使用双引号进行界定);
在一个样式规则中,样式属性一值的各部分使 用冒号相分隔,而所形成的列表则出现在大括 弧之间。
2020/12/10
15
样式说明格式
内置样式说明的作用范围只限于所处元素中的 内容部分。
文档层样式说明在文档头部以一个<style>元 素内容的形式出现,该说明的格式与内置样式 表的格式有很大的区别。
2020/12/10
16
样式说明格式
在<style>元素中内容的一般形式如下:
<style type=”text/css”> <!-rule_list --> </style>
注意,<style>元素中的规则列表是出现在 HTML注释中的。
《CSS样式表》教学设计

《CSS样式表》教学设计盐城市第一中学刘永亚教材分析《CSS样式表》是普通高中课程标准实验教科书(选修)第五章第二节的内容,本节主要是学习CSS样式表的三种基本类型,教材没有给学生提供一些实例,只是简单介绍了什么是CSS样式表以及实现方法,这就需要教师能创设学习的情境上要多花一些功夫,这样才能激发学生的学习兴趣,同时避免教师的过度讲解,应充分发挥学生的自主探究和自主学习的能力。
学生分析授课对象是高一年级学生,有一定的自主学习的能力,学生在第四章已经学习了网站的规划、设计及实现,初步掌握了网站的制作,同时在学习本节之前已经对动态HTML 的知识有所了解,会编写一些HTML代码。
CSS样式表如果直接传授相关知识,对学生没有吸引力,因此要想让学生掌握本节的内容,必须让学生在教师的引导下通过自主学习,完成学习任务。
教学目标知识与技能:1、让学生理解什么是CSS样式表;2、让学生掌握在HTML中加入CSS样式表的方法;3、使学生掌握简单的CSS样式表代码。
过程与方法:1、通过学习使学生会运用CSS样式表优化网页制作;2、通过学习使学生学习正确、合理运用技术。
情感态度价值观:1、培养学生独立思考、自主探究、动手实践的能力;2、激发学生学习信息技术的兴趣。
教学重点CSS样式表设置的方法。
教学难点三种CSS样式表的选择应用。
教学过程一、创设情境,感受CSS样式表网站风格的三要素是网站标志、标准色彩和标准字体,我们说不同的网页色彩体现不同的风格,高一(21)班站点采用什么风格呢?教师快速切换网页的背景,我们用哪种风格的网页背景呢?老师利用修改简单的代码就实现了网页整体的风格的改变,这就是当前网页制作中的一个常用技术——CSS样式表,今天我们就学习神奇的网页外衣——CSS样式表。
设计意图:CSS样式表的内容比较枯燥,导入课题时,教师利用班级网站的风格作为切入点,快速的网页换装给学生以视觉冲击力,同时抓住了学生的眼球,激发了学生的求知欲,为后面的学习作好铺垫。
超级“魔术师”——《CSS样式表》教学设计

四 学情 分 析
学生 已经历 了站点 的制作及发布过 程,初 步认识 的 Ta 定 义 了 网 页 的 内容 , 而 CSS 决 定 网 页 内容 如 g
HTM 基 本标 签 及 动 态 网 页 的相 关 概 念 , 了解 了客 户 L 端 脚本 语 言 的特 点 并学 会 输入 简 单 的 J v c Pt代 a a i s r 码 , 为 CSS 的学 习做 了铺 垫 。
知 识 与技 能 : 体 会 C SS 样 式 表 在 网 页 制 作 中 的 功 能 ; 初 步 认 识 样 式 表 的 书 写格 式 及 基 本 含 义 ; 会 简 单 应 用 自定 义 样 式 。
过 程 与 方 法 :掌 握 C C S 的 应 用 方 法 。
教师 打开 “ 皮肤”文件 夹,包括 主模 板与分模 板
2 D .7 l9 中 阜 塑【直夔 D 97 l 0 小 堡 2 焦 囊
案 例 园 地
息 忡
夹, 用记事 本打 开名 为 q. S的文件 ,把 代码 中 b 1 c S g .
设 问 引 入 , 解 决 第 二 个 问题 。
E P 改 E.P C 技j 为 b j g,得样 式 文 件 ,SS就 是外联样 式 文件 , ~网 站 中应 外 联 图 2。q. 之 后 可 以通 过 修 改 此 先在 用
学生 思考 。 师 : 内联 样 式 表 可 以 解 决 这 个 难 题 , 这 种 样 式 的 应 用方 式 只 能 控 制 本 页 面 。 打 开 素 材 包 中名 为 “ 内联 样 式 代 码 ” 的 文 本 文 件 , 复 制 , 然 后 用 记 事 本 打 开 i x 文件 ,把 代码 粘 贴 到首 页 的 he e nd ad区,浏 览网 页 是否 有变 化 ?
表格表单css样式设计教案

一体化课程教案编号:QD-0707-05版本号:D/0 流水号:编制:教研室批准:成振洋2011/2012 学年度第二学期计算机系(部)任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数 6 授课日期2012.5.17 周次13 审批年月日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求,通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。
本次课程的学习内容应该是学生比较感兴趣的知识,我们可以从简单例子入手,到复杂的网页效果实现,再结合书本要求完成的综合实例,还可以让学生自由创作。
这样学生既理解了书上的表格表单CSS样式设计的用法,真正具备进行网页设计的能力。
学习重点:分析并制作出网页表格、表单的样式表。
学习难点及其化解方法学习难点:指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子,例如google的日历视图等网页上实例。
教学准备➢教学设备:电脑、投影、PowerPoint软件、Dreamweaver软件➢教学准备:示例网页、素材图片、任务书教学内容(课时 6 ):学习任务书教学任务一绘制交换颜色变化的表格【任务内容】讲解表格CSS样式表设置的方式方法【任务目的】使学生掌握表格样式,学会熟练设置表格边框、背景色、单元格间距等属性。
【学习重点】CSS样式表的灵活运用【学习难点】理解表格的各个属性、间距设置的意义【教学方式】案例分析式、任务教学【教学内容】一、制作4X5的表格,并输入相应的文字内容提示:没有特殊合并格式的表格,可以使用<table>、<tr>、<td>标签完成。
或直接用dw生成。
二、设置表格CSS样式1、设置table的样式为border-collapse:collapse;2、设置tbody、td的样式为color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bottom-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;3、设置两种颜色的表格单元格样式类分别为in\on,颜色可自行设计。
CSS样式优质获奖课件

常用旳样式属性
说明 设置对象旳上边距 设置对象旳右边距 设置对象旳下边距 设置对象旳左边距 设置边框旳样式 设置边框旳宽度 设置边框旳颜色 设置内容与上边框之间旳距离 设置内容与右边框之间旳距离 设置内容与下边框之间旳距离 设置内容与左边框之间旳距离
17
常用旳样式属性
要实现下图所示旳效果,该怎样编写样式规则?
27
行内(嵌入)样式表
假如希望某段文字和其他段落文字显示风格不同, 该怎样处理?
使用行内(嵌入)样式表能够处理
28
行内(嵌入)样式表
查看源代码
<HTML>
<HEAD> <TITLE>设置属本用性段<了</T行PIT>内L标E样签>式采 </HEAD>
<BODY>
<P style = "color:red;font-size:30px;font-family:隶书;"> 这个段落应用了样式
margin border padding
margin-right 右边界
padding-left 左填充
margin-bottom 下边界
border-width 边框旳宽度
padding-bottom 下填充
16
方框属性
属性
边界属性
边框属性 填充属性
CSS名称
margin-top margin-right margin-bottom margin-left border-style border-width border-color padding-top padding-right padding-bottom padding-left
CSS样式表设计与应用教程

CSS样式表设计与应用教程第一章:CSS概述CSS(层叠样式表,Cascading Style Sheets)是一种用于描述网页样式和布局的标记语言,通过为HTML文档添加样式,可以改变网页的外观和结构。
本章将介绍CSS的基本概念和语法规则。
1.1 CSS的作用CSS的主要作用是控制网页的表现层,包括字体、颜色、布局等方面的样式。
它可以将内容和样式分离,使得网页的结构更加清晰,维护和修改变得更加容易。
1.2 CSS语法CSS规则由选择器和一组声明组成。
选择器用于选取HTML文档中的元素,声明则定义了选中元素的样式。
CSS的语法包括选择器、属性和属性值,还可以使用一些CSS的特殊功能,如继承、层叠和优先级。
第二章:CSS选择器选择器是CSS中非常重要的一部分,它用于定位HTML文档中的元素并应用相应的样式。
本章将介绍CSS中常用的选择器,包括元素选择器、类选择器、ID选择器以及一些高级选择器。
2.1 元素选择器元素选择器是CSS中最基本的选择器,它选中HTML文档中的特定元素,并为其应用样式。
例如,p选择器可以选择所有的段落元素,并为其设置样式。
2.2 类选择器类选择器是CSS中非常常用的一种选择器,它通过给HTML 元素添加class属性来选择元素,并为其应用样式。
例如,.red类选择器可以选择所有具有red类的元素,并设置其颜色为红色。
2.3 ID选择器ID选择器用于选中HTML文档中具有特定id属性的元素,并为其应用样式。
ID选择器是唯一的,每个HTML文档中的元素只能拥有一个ID属性。
例如,#header选择器可以选择id为header 的元素,并设置其样式。
2.4 高级选择器高级选择器包括后代选择器、子代选择器、通用选择器和属性选择器等,它们可以根据元素之间的关系、元素的属性等方式选中元素,并为其应用样式。
这些选择器的灵活运用可以提高样式表的效率和减少代码量。
第三章:CSS样式属性CSS样式属性决定了元素的外观和布局。
广东省创新杯说课大赛计算机类一等奖作品:《CSS样式表的使用》说课稿

广东省创新杯说课大赛计算机类一等奖作品:《CSS样式表的使用》说课稿《网页换装秀》——CSS样式表的使用讲解稿尊敬各位专家、各位评委:大家好!今天我给大家带来的信息化教学设计是《网页换装秀》——CSS样式表的使用。
下面我将从五个方面阐述我的教学设计。
一、教材分析教材出处与地位:本课程选用教材为高等教育出版社的《网页设计与制作(HTML+CSS+JavaScript),本课内容为第4单元《CSS的应用》任务一CSS的引用、任务二页面样式设置。
本章对前面的基础章节的做了综合深化,又开启了后续DIV+CSS知识对接,起到承上启下的作用。
教学目标:根据专业培养目标,我将达到以下三方面的教学目标。
教学重难点:经过分析,本课的教学重点为理解CSS样式表的概念、外部样式表的应用;难点为CSS选择器属性值的修改。
二、学情分析我所教授的对象为计算机应用中职二年级的学生,学生能熟练使用DW软件独立制作简单的网页,有一定的代码基础。
但是在美化页面这方面的知识较为欠缺,学习代码缺乏耐心。
三、教法学法经过以上教材与学情的分析,本课采用以下教法与学法。
四、教学流程教学流程分为三大模块:课前准备课堂教学课后拓展课前准备:课前,我准备了微课视频,三维动画,交互课件,任务手册,利用蓝墨云班课移动学习平台为载体,学生自主地在平台上预习、观看微课、讨论问题。
一切准备就绪,开始进入我们的《网页换装秀》。
课堂教学:我将信息化手段融入于导入、新授、提升、小结、交流五个环节,从而达到教学目标。
导入:首先,我向学生展示了一个没有美化的网页界面,接着仅用了一个操作,便把刚才的界面摇身一变,变成了同学们再熟悉不过的淘宝网首页。
接着我提出问题,如果是你们,会用什么方法来修改这个页面呢?同学们纷纷提出自己的想法。
带着疑问,我领着学生走进我们的新课讲授环节。
新课讲授分为三个任务,层层递进任务一:观看《美美的换装秀》,认识CSS样式表的概念理论知识讲解在中职课堂上往往是学生较为排斥的,加上该知识点以代码为基础,学生的学习积极性更是大打折扣。
高中信息技术选修:网络技术应用 CSS 样式表-国赛一等奖

CSS样式表江苏省上冈高级中学信息组吴银华教材:教育科学出版社《网络技术应用》(选修)学生:高一年级课时:1课时一、教材分析1、教学内容分析CSS样式表是本章动态网页制作中的一个重点和难点。
这一节是在学生了解了客户端脚本语言的基础上的学习,要求学生了解CSS基本知识、体验CSS对网页设计的美化作用、掌握运用CSS进行样式设置的方法。
2、教学内容处理CSS样式表这部分内容取自教育科学出版社《网络技术应用》第五章第二节,教材中对于样式表功能特点进行了详细介绍,但对具体应用方面有些欠缺,没有给教师更多范例。
因此对于这部分内容的教学,教师需要自寻课堂突破口,设计情境,完成教学。
二、学情分析1、学生基本情况高一学生在必修课本中已经掌握网站制作基本要领,但对于动态网页这部分内容较生疏。
2、可能遇到的困难及解决策略由于CSS概念较为抽象,CSS样式表对于学生来说枯燥、无趣,堵塞了学生学习的情绪,让学生产生一种退缩心理。
通过对提供FrontPage格式菜单可视化而非代码方式操作插入样式方法对网页素材进行美化,引导学生积极主动探究、摸索,以实践带动理论。
三、教学目标分析1、知识与技能:理解什么是CSS样式表;掌握运用CSS进行样式设置的方法和技巧。
2、过程与方法:培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力。
3、情感态度与价值观:通过学习运用CSS样式表优化网页制作,让学生学习正确、合理运用技术,了解技术服务于内容的原则。
四、教学重、难点分析1、教学重点:CSS样式表的功能及格式和使用原理2、教学难点:外联、内联和嵌入三类样式表的选择应用五、教学策略1、通过观察法、设疑法引入学习。
2、提供学习资源,指导学生自主学习。
3、通过问答法帮助学生归纳、梳理所学的知识,提升对知识的理解和认识。
4、利用启发法引导学生运用理论创新实践,提高理论联系实践的能力。
5、通过交流评价,加深学生对知识内容的理解,促进其对技能的认识。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
一课时本次课设计课时为2课时。
二教材分析(一)知识内容分析本课内容选自高等教育出版社的《网页设计与制作(HTML+CSS+JavaScript)》,第四章《CSS 的应用》,设计课时为2个课时。
本章在整个课程体系里起到承上启下的作用,它既是对前面的基础章节的综合深化,又开启了后续DIV+CSS知识对接。
在本课之前,学生基本掌握网页制作的主要知识点,有一定的代码基础。
而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。
学生通过理解CSS样式、选择器的概念,掌握应用外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页,并能对所设计的作品进行评价,培养学生的设计、审美能力及职业素养和创新精神。
本次教学活动对学生的网页制作与设计起着基础、提高作用。
(二)我对教材的处理方法1、把教材所涉及的知识点进行分层,使学生由简入深理解和掌握CSS样式表的使用。
2、对教材内容进行二次处理,制作原创案例,使内容更加适合我班学生学习。
3、由CSS样式表的使用引导学生对网页界面设计的分析。
三学生分析教学对象为我校计算机应用专业中职二年级的学生。
学生学习网页制作已有一个学期,对这节课之前的学生情况分析如下:(一)学生知识能力分析1、学生能熟练使用Dreamweaver软件2、对于静态页面的设计有一定的基础3、学生有简单的代码基础4、在以往的学习过程中有简单接触过嵌入式的CSS样式5、学生缺乏动手能力6、对作品的评价缺乏系统的认识和理解7、学生技能水平出现分化现象(二)学生自学能力分析我在课堂教学过程中,注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握,从中培养学生的自学能力。
开始自学的内容简单,等学生认为自学不是一件很难的事情且乐于参与时,再适当加大自学的难度。
在教学过程中,长期渗透自学理念,学生们已经有了较强的自学能力和良好的课前预习习惯。
因此,尽管本课是一节综合项目设计课程,我还是在教学方法中渗透自主探究学习法,相信学生有能力获得成功。
(三)学生个性特点分析可以通过4个词语来高度概括:“乐于探索”、“喜欢挑战”、“个性鲜明”、但却“缺乏毅力”。
四教学目标(一)知识与技能1、理解CSS样式表、CSS选择器的概念。
2、学会为HTML页面添加外部CSS样式表。
3、修改CSS样式表的属性值。
(二)过程与方法依托班级学习网站、校园网资源库、蓝墨云班课移动教学平台为载体,使用交互式课件、三维动画、微课视频辅助教学,通过小组合作探究、自主学习等方式,让学生掌握添加CSS样式表的过程和修改属性值的方法。
(三)情感目标在辅导学生完成任务的过程中,激发学生的审美情操,创设与实际岗位相结合的情境,培养学生的职业素养。
五教学重点及难点(一)教学重点外部CSS样式表的添加应用。
(二)教学难点修改CSS样式表的属性值。
六教法与学法(一)教学思想当前职业中学计算机专业教学的主流取向是以建构主义的教学思想与学习理论为指导去组织和实施各项教学活动。
在探索基于建构主义理论的教学模式的过程中,本次教学活动采用信息化教学设计理念,利用信息技术创设情景、开发教学资源学习网站,利用移动教学平台,以学生为中心,学生在老师精心创设的情境、自主探究空间、交流与协作活动、自我评价体系等学习环境中充分发挥自身的主动性和积极性,对所学的知识进行意义建构,并用其所学解决实际问题。
(二)教学策略1、课堂融入信息化手段微课视频、三维动画、交互式课件,依托班级学习网、蓝墨云班课移动学习平台为载体,引导学生积极主动参与到教学活动中,激发学生学习的兴趣和求知欲。
2、通过采用任务驱动、小组合作学习的教学方法,引导学生在共同完成作品的模仿和创作过程中,培养“互帮互学、宽容待人、荣辱与共”的合作精神。
3、通过采用自主探究学习的教学方法,引导学生充分利用教学资源网站完成自己的课前任务,从而增强学生自主探究学习的精神和解决问题的能力。
4、通过学生对作品的相互评价,培养他们客观、辩证地判别事物的能力,又有利于老师掌握教学信息的反馈,及时调整和改进教学方法。
5、我将混合教学模式运用于此次课程教学中,很好地衔接了“课前—课堂—课后”。
让学生充分发挥自己的自主探究能力,做好课前预习的功课;让学生充分利用课下的时间来巩固技能,提高创作能力;该模式的开展充分调动了学生的积极性、主动性和创造性。
逐步让学生从被动学习,转变成主动学习。
七教学媒体班级学习网站、蓝墨云移动学习平台、交互式课件、场景动画、微课视频、班级学习网、音乐、极域教室系统、多媒体网络教学平台、计算机八教学流程整个教学过程实施,主要分三部分:(一)课前准备(二)课堂教学(三)课后拓展第一部分:【课前准备】(一)教师准备1、制作准备本课主要知识点,提前把本课学习资源发放到蓝墨云班课学习平台上。
2、在蓝墨云班课学习平台及班级学习网先发布学习问题供学生预习思考,并收集学生在网上提交的问题回答,充分了解学生对本节课的预习情况。
3、制作准备《CSS样式表的使用》交互式课件。
4、制作准备《CSS样式的使用》系列微课视频——《添加外部CSS样式表》、《CSS样式属性值的修改》等。
5、制作准备《美美的换装秀》、《美美的搭配秀》系列的动画。
6、制定学生课堂表现评价量规表以及设计作品的评价量规表。
7、在平常的教学过程中,就有意识地根据水平差异让学生结成学习伙伴,形成了相对固定的合作小组。
(二)学生准备1、自主预习《CSS样式表的使用》交互式课件,观看微课视频,完成微课配套问题。
2、课前按要求尝试解释什么是CSS样式表,并思考教师在蓝墨云班课学习平台上发布的学习思考问题。
3、全体学生按“异质分组”的方法进行分组,为小组协作学习做好准备。
本次课将学生分为6个小组,每小组7人左右,每组1名组长。
根据学情准备以下学习资源,设计课前预习题目,让学生做好课前任务:班级学习网1、在手机端上,使用蓝墨云班课平台浏览教师推送的学习资料小组评价平台CSS样式表系列微课交互式课件学生任务手册2、观看微课视频《美美的换装秀》,视频中利用类比的方法,把小姑娘比作是没有换装前的网页界面,美丽的服饰比作CSS样式表,通过选择不同的服饰(CSS 样式表),来装扮小姑娘(网页界面),使得小姑娘体验了一场“换装秀”。
学生完成观看以下两个观看任务:问题一:视频中的小女孩在做什么?她和CSS样式表有什么关系?问题二:请结合其他学习材料,写出CSS样式表的概念。
并把问题答案准备好,带到课堂上,教师进行检查。
3、下载学生任务手册,提前预习本节课的知识重点和难点。
重点:外部样式表的添加应用;难点:修改CSS样式表的属性值。
4、学生按“异质分组”的方法进行分组,为小组协作学习做好准备。
第二部分:【课堂教学】案例导入:教师先向学生展示排版混乱、还没有美化的HTML网页:接着教师仅仅用了一个操作,帮网页添加了一个CSS 样式表,便帮网页摇身一变,变成同学们所熟悉的淘宝网首页。
观察学生反映,了解学生的课前预习情况。
解读案例:理解教师给出的案例,认真分析。
学生聚精会神,欣赏教师变的“小魔术”。
集中注意力,回顾课前预习的内容。
课前预习的微课任务二:体验“换装秀”——添加外部样式表学生已经了解了CSS样式表的概念及分类,准备动手体验网页的“换装”。
(1)教师结合交互式课件示范案例,课堂演示教师一边操作一边讲解如何在页面中导入CSS外部样式表:第一步:点击CSS样式面板——附加样式表第二步:在弹出对话框中点击浏览按钮,选择指定文件第三步:保存网页,刷新,观察浏览器中网页的变化。
(2)播放“添加外部CSS样式表”微课视频教师演示完毕,播放添加外部CSS样式表相关知识点的微课视频,帮助学生更好地记住操作步骤。
(3)学生小试牛刀,微课相辅任务要求:1、下载素材,在原始的网页界面添加外部CSS样式表2、对比添加不同的CSS样式表,页面的变化如何?教师进行分层指导:1、学习能力强——利用交互式课件独立完成任务;2、学习能力一般——教师巡堂时给予辅导;3、学习能力弱——在极域电子课室举手,教师再次演示,反复观看微课视频,掌握知识点。
任务三:化身“服装设计师”——修改CSS选择器属性值学生发现,添加外部样式表后的网页存在几个局部问题。
(1)引导学生发现网页存在的问题,鼓励学生大胆说出解决方法。
同学们在添加外部CSS样式表后,对于网页上一些不满意的局部,该怎么去修改?是否添加外部CSS样式表后就不能改动?如何提高灵活度?(2)引入CSS选择器属性值概念,动画视频帮助理解。
认真观看微课,熟记几个重要的操作步骤。
下载素材,观察还没添加CSS样式表之前的网页界面;借助微课,边学边做,观察添加CSS后的页面变化。
跟不上学习进度的学生可以在电子举手,观看教师的再次演示。
观察添加CSS样式表的页面,发现与界面格格不入的地方,并思考用什么方法改进。
观看《美美的搭配秀》,思考微课的类比关系教师播放动画微课,微课还是把网页类比成小姑娘,这次的视频不同于前面视频的是小姑娘的服装已经不是固定的套装,而是一件件上衣、裙子、裤子、鞋子等服饰单品,可以自由地搭配,准确地说明了CSS选择器属性值的概念及作用。
(4)交互课件,展示CSS选择器属性值的修改交互式课件分步骤演示了CSS选择器属性值的修改及完成结果,帮助学生熟悉操作过程。
1、修改网页字体第一步:在Dreamweaver中打开reset.css样式表第二步:找到名称为body的CSS选择器第三步:对font-size:22px进行修改2、修改布局大小第一步:在Dreamweaver中打开style.css样式表第二步:找到名称为two-code的CSS选择器第三步:对width和height进行修改(4)发放学生练习手册和微课视频,学生分组完成任务学生之间进行讨论,对任务二练习中网页界面不协调的地方进行讨论、修改,学习过程中借助教师的练习手册和微课视频,达到学习目标。
4、作品展示,教师点评教师及时对学生作品进行点评、肯定及表扬。
1、情景创设A公司请了网站设计公司设计一个公司的宣传网站,网站设计公司已经设计了初稿,现在A公司对该网站进行初步的验收。
人员分配:1、全体学生按“异质分组”的方法进行分组2、组内选出两位同学为A公司的网站验收人员,对公司网站进行验收,指出网页需要修改的地方。
3、组内选出两位同学为网站设计公司的设计师,针对A公司提出的要求,对网站进行修改。
2、发放素材,学生开始模拟情景情境模拟过程中,教师发放任务手册在学习平台上,开放网络让学生在互联网上浏览收集更多学习资源。
教师巡堂,对于学生的疑问及时指导与解决。
3、小组互评,教师点评登录14计算机评价平台,小组长把小组作品上传到平台上,其他小组对所有的小组作品在科学性、思想性、技术性、艺术创作性等方面进行评价打分。