2022年HTML教案第四章 .pdf

《2022年HTML教案第四章 .pdf》由会员分享，可在线阅读，更多相关《2022年HTML教案第四章 .pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、名师精编优秀教案 HTML 理论课教案第 4 章 CSS 样式表一、整章授课思路100 分钟 . 2 1.回顾、预习检查、任务、目标部分 10分钟 . 2 2. 表单页面的基本结枸10 分钟 . 2 2.1为什么需要表单？. 2 2.2表单包含的控件：. 错误！未定义书签。2.3表单页面的基本结构。. 错误！未定义书签。3.各种表单控件的逐一介绍20 分钟 . 3 3.1表单元素的统一格式。. 错误！未定义书签。3.2各种表单元素逐一介绍，先讲解语法，然后举例错误！未定义书签。4.课堂练习 15 分钟 . 3 5.框架 25 分钟 . 错误！未定义书签。5.1框架窗口的组成. 3 5.2框架的

2、使用场合。. 错误！未定义书签。5.3框架的基本结构。. 错误！未定义书签。5.4如何创建多个复杂的窗口。. 错误！未定义书签。5.5如何设置窗口链接的显示位置。 . 错误！未定义书签。6.课堂练习215 分钟 . 5 7.总结 5 分钟 . 6 二、学员问题汇总. 错误！未定义书签。三、作业布置 . 7 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 名师精编优秀教案课时： 3 课时本章工作任务制作并美化“登

3、陆”页面：美化“宝贝分类”页面本章技能目标会创建无下划线的超链接样式会创建统一外观的字体文本会创建个性化的表单会创建个性化的表格本章重点样式的基本语法会创建常见的样式：统一的文字、颜色等外观、无下划线的超链接、细边框输入框本章难点内嵌样式、行内样式、样式表文件的使用场合本章单词一、整章授课思路100 分钟 采用边讲边练的方式，讲解顺序如下：1)为什么需要CSS 演示表。2)样式表的基本语法。3)逐一介绍常用的样式属性并举例：文本属性、背景属性、方框属性、无下划线的超文本链接样式，中间穿插课堂练习。4)样式表的三类应用方式：行内、内嵌、外部样式表。2.回顾、预习检查、任务、目标部分10 分钟 根

4、据PPT中提供的问题，逐一提问学员，注意给予学员引导，建立学员的信心。3.为什么需要CSS 样式表10 分钟 1)为什么需要CSS 样式表？引入：前几次课所学的标签，在网页中呈现出的效果，比较简单，样式比较单一。名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 名师精编优秀教案CSS 主要用于改变网页中标签的样式，使网页变得更华丽。可以从外观上更能吸引读者。CSS 相当于华丽的衣服样式表能实现内容与样式的分离，方

5、便团队开发。4.样式表的基本语法10 分钟 1)样式表的基本结构。2)样式规则并举例说明。3)引入类样式。课堂案例： 样式表的基本语法5.文本属性 5 分钟 引入：首先从文本的大小，颜色，字体等来描述文本属性。强调用样式来实现文本的大小颜色字体的显示的好处课堂案例：6.课堂练习 10 分钟 做“申请表”的表单练习，参考“课堂联系案例课堂练习 1” 。7.背景属性 5 分钟 引入：首先从文本的大小，颜色，字体等来描述文本属性。讲解要点：backcolor , background-image ,background-repeat 3 个属性的基本用法。注意：名师归纳总结 精品学习资料 - - -

6、 - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 名师精编优秀教案1)Background-repeat 的使用场合：当用较小的gif 图片作为网页背景时，就会用到如何重复的问题，是横向还是纵向。2)样式还有一种简洁的写法就是吧各种属性放置在一起，用空格隔开，如下所示：Body Background:#999ff00 url(./image/css_tutorials/background.jpg) no-repeatfixed 40px 100px

7、 课堂案例：8.方框属性 15 分钟 引入：首先从文本的大小，颜色，字体等来描述文本属性。讲解要点：1) 盒子模式： 以网页中放入的一副图片，说明盒子模式设计的各种边界、填充、边框的含义。2) 应用边框属性、填充属性，制作常见的表格多列中分界线样式。3) 应用边框属性，制作细边框输入框样式。课堂案例：名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 名师精编优秀教案9.特殊样式 5 分钟 讲解要点：无下划线的超俩

8、链接的制作方法。课堂案例：10.课堂练习 210 分钟 编写如下图所示效果对应的HTML 代码11.制作图片按钮 10 分钟 讲解要点：图片按钮的制作方法。课堂案例：名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 名师精编优秀教案12.三类样式的应用场合15 分钟 讲解要点：其他参考资料对三类样式的称呼可能不一样，例如有的称为“内嵌（即行内样式） ” 、 “内部 （内嵌样式） ” 、 “外部 （外部样式） ”样

9、式表。如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。如果希望某段文字和其他段落文字显示风格不一样，使用行内（嵌入）样式表可以解决如果希望一个网站中多个页面的样式保持一致，使用外部样式表文件样式表可以解决13.总结 5 分钟 方框属性有哪些常用属性？并分别说明其含义？超链接样式有哪几种？内嵌样式表、 行内样式表、 外部样式表文件分别适用什么场合？名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页，共 8 页 - - - - - - - - -

10、名师精编优秀教案二、作业布置参考答案： 外部样式表练习 拍拍用户登陆 QQ号码 忘记 QQ号码 >> 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 名师精编优秀教案 QQ密码 忘记密码 >> 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -精心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页，共 8 页 - - - - - - - - -