2022年HTML教案第四章.docx
名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -名师精编 优秀教案 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框架的使用场合；. 错误！未定义书签；5.3框架的基本结构；. 错误！未定义书签；5.4如何创建多个复杂的窗口；. 错误！未定义书签；5.5如何设置窗口链接的显示位置； . 错误！未定义书签；6.课堂练习215 分钟 . 5 7.总结 5 分钟 . 6 学员问题汇总. 错误！未定义书签；作业布置 . 7 第 1 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -名师精编 优秀教案课时： 3 课时本章工作任务制作并美化“ 登陆” 页面：美化“ 珍宝分类” 页面本章技能目标会创建无下划线的超链接样式会创建统一外观的字体文本会创建个性化的表单会创建个性化的表格本章重点样式的基本语法会创建常见的样式：统一的文字、颜色等外观、无下划线的超链接、细边框输入框本章难点内嵌样式、行内样式、样式表文件的使用场合本章单词一、整章授课思路100 分钟 采纳边讲边练的方式,讲解次序如下：1 为什么需要 CSS 演示表；2 样式表的基本语法；3 逐一介绍常用的样式属性并举例：文本属性、背景属性、方框属性、无下划线的超文本链接样式,中间穿插课堂练习；4 样式表的三类应用方式：行内、内嵌、外部样式表；2. 回忆、预习检查、任务、目标部分 10 分钟 依据 PPT 中供应的问题,逐一提问学员,留意赐予学员引导,建立学员的信心；3.为什么需要CSS 样式表10 分钟 1为什么需要CSS 样式表？引入：前几次课所学的标签,在网页中出现出的成效,比较简洁,样式比较单一；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -名师精编优秀教案使网页变得更华丽；可以CSS 主要用于转变网页中标签的样式,从外观上更能吸引读者；CSS 相当于华丽的衣服样式表能实现内容与样式的分别,便利团队开发；4.样式表的基本语法10 分钟 1 样式表的基本结构；2 样式规章并举例说明；3 引入类样式；课堂案例： 样式表的基本语法5. 文本属性 5 分钟 引入：第一从文本的大小,颜色,字体等来描述文本属性；强调用样式来实现文本的大小颜色字体的显示的好处课堂案例：6. 课堂练习 10 分钟 7.做“ 申请表” 的表单练习,参考“ 课堂联系案例课堂练习 1” ；背景属性 5 分钟 引入：第一从文本的大小,颜色,字体等来描述文本属性；讲解要点：backcolor , background-image ,background-repeat 3 个属性的基本用法；留意：细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -1名师精编优秀教案gif 图片作为网页Background-repeat 的使用场合：当用较小的背景时,就会用到如何重复的问题,是横向仍是纵向；2样式仍有一种简洁的写法就是吧各种属性放置在一起,用空格隔开,如下所示：Body Background:#999ff00 url./image/css_tutorials/background.jpg no-repeatfixed 40px 100px 课堂案例：8. 方框属性 15 分钟 引入：第一从文本的大小,颜色,字体等来描述文本属性；讲解要点：1 盒子模式： 以网页中放入的一副图片,边界、填充、边框的含义；说明盒子模式设计的各种2 应用边框属性、填充属性,制作常见的表格多列中分界线样式；3 应用边框属性,制作细边框输入框样式；课堂案例：细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -9.特别样式 5 分钟 名师精编优秀教案讲解要点：无下划线的超俩链接的制作方法；课堂案例：10. 课堂练习 210 分钟 11.编写如下图所示成效对应的HTML 代码制作图片按钮 10 分钟 讲解要点：图片按钮的制作方法；课堂案例：细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -12.三类样式的应用场合名师精编优秀教案15 分钟 讲解要点：其他参考资料对三类样式的称呼可能不一样,例如有的称为“ 内嵌（即行内样式） ” 、“ 内部 （内嵌样式） ” 、“ 外部 （外部样式） ” 样式表；假如期望本网页内的全部同类标签都采纳统一样式,这时应采纳内 嵌样式；假如期望某段文字和其他段落文字显示风格不一样,使用行内（嵌 入）样式表可以解决 假如期望一个网站中多个页面的样式保持一样,使用外部样式表文 件样式表可以解决13. 总结 5 分钟 方框属性有哪些常用属性？并分别说明其含义？超链接样式有哪几种？内嵌样式表、 行内样式表、 外部样式表文件分别适用什么场合？细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页,共 8 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -二、作业布置名师精编优秀教案参考答案：<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>外部样式表练习 </TITLE> <LINK rel="stylesheet" type="text/css" href="css.css"> </HEAD> <BODY> <FORM> <TABLE > <TR> <TD colspan="2"><IMG src="images/top.jpg"></TD> </TR> <TR> <TD width="498" > <TABLE width="381" cellpadding="0" cellspacing="0" class="loginMain" > <TR> <TD colspan="2" height="27" class="loginHead"> </TR> <TR> 拍拍用户登陆 </TD> <TD width="120" class="lefttd">QQ号码 </TD> <A 第 7 页,共 8 页 <TD width="265"><INPUT type="text" class="inputMain"> href="#" >遗忘 QQ号码 >></A></TD> 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -名师精编 优秀教案 </TR> <TR><TD class="lefttd">QQ 密 码 </TD><TD><INPUT type="text" class="inputMain"> <A href="#"> 遗忘密码 >></A></TD></TR> <TR><TD colspan="2" align="center"><INPUT type="submit" value="" class="picButton"></TD></TR> </TABLE> </TD> <TD width="451"><IMG src="images/right.jpg"></TD> </TR> <TR><TD colspan="2"><IMG src="images/bottom.jpg"></TD></TR> </TABLE> </FORM> </BODY> </HTML> 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页,共 8 页 - - - - - - - - -
