HTML5+CSS3网站设计基础（第三版）教案 朱翠苗 - 模块1-3 HTML的基本标签-CSS样式表

******学院教案课次1教师姓名授课班级授课地点授课日期2023年2月20日第1周授课时数2本次授课标题模块1HTML的基本标签任务1行级和块级标签组织页面内容教学目标能力（技能）目标知识目标会使用HTML的基本结构创建网页会使用行级和块级标签组织页面内容会使用图像标签实现图文并茂的页面了解HTML段落、标题、水平线基本标签能力训练任务及案例任务1行级和块级标签组织页面内容教学重点HTML中基本的块级、行级标签课外拓展任务用不同的方式完成指定的图文混排效果课后体会本班学生比较活跃，上课要注意控制好班级纪律，并且要引导学生保持上课的积极性。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234教材、课程介绍，考核方式介绍，学习建议介绍，课堂要求；完整知识体系的建立认识。知识讲解：HTML简介、HTML文档的基本结构网页的摘要信息HTML页面中的块和行块级标签任务一：完成唐诗三百首页面——基本块级标签知识讲解：行级标签W3C标准、XHTML1.0基本规范任务二：完成促销信息页面——行级元素课堂练习及布置课外拓展任务讲授演示讲授课件演示学生演示讲授分析引导讲授演示听讲思考讨论讨论消化听讲2040255

*******学院教案课次2教师姓名授课班级授课地点授课日期2023年2月21日第1周授课时数2本次授课标题模块1HTML的基本标签任务1行级和块级标签组织页面内容教学目标能力（技能）目标知识目标会使用HTML的基本结构创建网页会使用行级和块级标签组织页面内容会使用图像标签实现图文并茂的页面了解HTML图片、范围、换行等基本标签能力训练任务及案例任务1行级和块级标签组织页面内容教学重点HTML中基本的块级、行级标签课外拓展任务用不同的方式完成指定的图文混排效果课后体会学生参与度较高，都能完成课堂任务，效果不错。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12345作业分析评讲，复习巩固标题等标签知识讲解：常用于布局的块级标签任务一：完成商品信息页面——用于布局的块级标签知识讲解：行级标签W3C标准、XHTML1.0基本规范任务二：完成促销信息页面——行级元素课堂练习及布置课外拓展任务讲授演示讲授课件演示学生演示讲授演示分析学生演示讲授分析引导听讲讨论消化编程消化听讲15402510

*******学院教案课次3教师姓名授课班级授课地点授课日期2023年2月24日第1周授课时数2本次授课标题模块1HTML的基本标签任务1行级和块级标签组织页面内容教学目标能力（技能）目标知识目标会使用HTML的基本结构创建网页会使用行级和块级标签组织页面内容会使用图像标签实现图文并茂的页面了解HTML图片、范围、换行等基本标签能力训练任务及案例任务1行级和块级标签组织页面内容教学重点HTML中基本的块级、行级标签课外拓展任务用不同的方式完成指定的图文混排效果课后体会学生的打字速度、电脑操作水平都有限，所以进度不能快。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123作业评讲，复习巩固任务一：完成内容显示1）有序列表2）无序列表3）定义列表课堂练习及布置课外拓展任务讲授演示讲授课件演示学生演示讲授演示听讲思考讨论听讲107010*******学院教案课次4教师姓名授课班级授课地点授课日期2023年2月27日第2周授课时数2本次授课标题模块1HTML的基本标签任务2表单元素实现注册页面教学目标能力（技能）目标知识目标会使用各种表单元素实现注册页面表单、文本框、密码框、隐藏域、按钮、单选按钮、复选框、下拉列表、多行文本域、等基本标签能力训练任务及案例任务2表单元素实现注册页面教学重点表单的基本用法课外拓展任务手写一个注册页面课后体会学生对于表单的学习比较赋予热情，并且学习效果较好，源于平时网络接触。

教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123总结、回顾、引入知识讲解：表单常见的表单元素表单的基本语法表单的执行原理表单元素的基本格式表单元素的逐一介绍任务一：网站登录页课堂练习及展示学生展示讲授引导讲授引导回忆听讲思考编程听讲思考编程156015*******学院教案课次5教师姓名授课班级授课地点授课日期2023年2月28日第2周授课时数2本次授课标题模块1HTML的基本标签任务2表单元素实现注册页面教学目标能力（技能）目标知识目标会使用各种表单元素实现注册页面掌握表单元素的用法了解注释和特殊符号标签能力训练任务及案例任务3表单元素实现注册页面教学重点表单标签的综合使用课外拓展任务使用表单制作一个邮箱申请注册页面课后体会表单是数据交互的基础。表单的种类比较多，容易遗忘，需要多加练习教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234上次作业评点及内容回顾模块1HTML的基本标签任务3表单元素实现注册页面拓展任务：用表单元素设计并制作登录页面表单元素的高级用法课堂练习及布置课外拓展任务讲授分析引导分析引导分析引导思考讨论编程思考讨论编程操作消化1030455

*******学院教案课次6教师姓名授课班级授课地点授课日期2023年3月3日第2周授课时数2本次授课标题模块2表格的应用和布局任务1用表格显示数据教学目标能力（技能）目标知识目标使用表格显示数据表格的基本使用方法制作跨行跨列的表格表格的高级用法：添加表格标题、数据分组等能力训练任务及案例任务1用表格显示数据教学重点表格的高级使用课外拓展任务电子参考教材中P85的案例（任务2）课后体会大部分学生学习认真，善于思考，要求课下完成空中课堂作业。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234上次作业评点及内容回顾知识讲解：表格模块2表格的应用和布局任务1用表格显示数据制作简单表格表格中行、列的关系制作跨行跨列表格小任务完成跨行跨列表格的高级用法表格分组标签的使用课堂练习及布置课外拓展任务讲授讲授分析引导讲授分析讲授分析引导引导思考讨论编程讨论消化编程编程消化操作消化10102545*******学院教案课次7教师姓名授课班级授课地点授课日期2023年3月6日第3周授课时数2本次授课标题模块2表格的应用和布局任务2用表格实现页面布局教学目标能力（技能）目标知识目标使用表格实现页面布局表格的基本使用方法表格的高级用法：添加表格标题、数据分组等使用表格进行图文和表单的布局能力训练任务及案例任务2用表格实现页面布局教学重点表格的高级使用课外拓展任务电子参考教材中P85的案例（任务2）课后体会本次课内容是上一次课的延续，学生开拓思维还是可以跟上的根据作业反映出的问题，学生还需加强指导教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾知识讲解：表格模块2表格的应用和布局表格的高级用法表格布局2:贵美商品分类页表格和表单同时使用3：制作贵美注册页（表格和表单的综合）课堂练习及布置课外拓展任务讲授讲授分析引导讲授分析讲授分析引导引导讲授分析引导思考讨论编程讨论消化编程编程消化操作消化操作消化10102545*******学院教案课次8教师姓名授课班级授课地点授课日期2023年3月7日第3周授课时数4本次授课标题模块2表格的应用和布局任务2用表格实现页面布局教学目标能力（技能）目标知识目标使用表格实现页面布局表格的基本使用方法表格的高级用法：添加表格标题、数据分组等使用表格进行图文和表单的布局能力训练任务及案例任务2用表格实现页面布局教学重点表格的高级使用课外拓展任务泛雅作业课后体会根据作业反映出的问题，学生还需加强指导教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾知识讲解：表格模块2表格的应用和布局表格的高级用法表格布局2:贵美商品分类页表格和表单同时使用3：制作贵美注册页（表格和表单的综合）课堂练习及布置课外拓展任务讲授讲授分析引导讲授分析讲授分析引导引导讲授分析引导思考讨论编程讨论消化编程编程消化操作消化操作消化102545454510*******学院教案课次9教师姓名授课班级授课地点授课日期2023年3月10日第3周授课时数4本次授课标题模块2表格的应用和布局任务2用表格实现页面布局教学目标能力（技能）目标知识目标使用表格实现页面布局表格的基本使用方法表格的高级用法：添加表格标题、数据分组等使用表格进行图文和表单的布局能力训练任务及案例任务2用表格实现页面布局教学重点表格的高级使用课外拓展任务泛雅作业课后体会根据作业反映出的问题，学生还需加强指导教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾知识讲解：表格模块2表格的应用和布局表格的高级用法表格布局2:贵美商品分类页表格和表单同时使用3：制作贵美注册页（表格和表单的综合）课堂练习及布置课外拓展任务讲授讲授分析引导讲授分析讲授分析引导引导讲授分析引导思考讨论编程讨论消化编程编程消化操作消化操作消化102545454510*******学院教案课次10教师姓名授课班级授课地点授课日期2023年3月13日第4周授课时数2本次授课标题模块3CSS样式表任务1利用CSS制作芙蓉商城“商品分类”版块教学目标能力（技能）目标知识目标掌握CSS的基本语法使用文本和字体样式美化网页CSS样式表规则采用选择器、属性、属性值进行描述样式表的用途是页面元素的修饰和布局能力训练任务及案例任务1利用CSS制作芙蓉商城“商品分类”版块使用各类CSS选择器，实现页面美化效果任务2制作贵美“商品分类”版块任务3制作圆角矩形教学重点CSS选择器课外拓展任务参考电子教材中128页利用背景截取技术实现要求效果课后体会CSS技术有难度，尤其对刚接触的学生，加大学生课下学习、预习的力度。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾为什么使用CSS样式表CSS的用途CSS基本语法选择器的分类：使用各类CSS选择器，实现页面美化效果文本属性背景属性背景属性的经典应用任务1:图标截取--背景偏移量技术任务2制作贵美“商品步骤1实现“你好....”的段落修饰步骤2实现区域图片背景步骤3实现列表修饰步骤4整体布局调整任务3制作圆角矩形布置作业讲授讲授分析引导讲授分析思考讨论编程讨论消化编程1010060454510*******学院教案课次11教师姓名授课班级授课地点授课日期2023年3月14日第4周授课时数2本次授课标题模块3CSS样式表任务1利用CSS制作芙蓉商城“商品分类”版块教学目标能力（技能）目标知识目标掌握CSS的基本语法使用文本和字体样式美化网页CSS样式表规则采用选择器、属性、属性值进行描述样式表的用途是页面元素的修饰和布局能力训练任务及案例任务1利用CSS制作芙蓉商城“商品分类”版块使用各类CSS选择器，实现页面美化效果任务2制作贵美“商品分类”版块任务3制作圆角矩形教学重点CSS选择器课外拓展任务参考电子教材中128页利用背景截取技术实现要求效果课后体会CSS技术有难度，尤其对刚接触的学生，加大学生课下学习、预习的力度。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾为什么使用CSS样式表CSS的用途CSS基本语法选择器的分类：使用各类CSS选择器，实现页面美化效果文本属性背景属性背景属性的经典应用任务1:图标截取--背景偏移量技术任务2制作贵美“商品步骤1实现“你好....”的段落修饰步骤2实现区域图片背景步骤3实现列表修饰步骤4整体布局调整任务3制作圆角矩形布置作业讲授讲授分析引导讲授分析思考讨论编程讨论消化编程1010060454510

*******学院教案课次12教师姓名授课班级授课地点授课日期2023年3月17日第4周授课时数2本次授课标题模块3CSS样式表任务1利用CSS制作芙蓉商城“商品分类”版块教学目标能力（技能）目标知识目标掌握CSS的基本语法使用文本和字体样式美化网页CSS样式表规则采用选择器、属性、属性值进行描述样式表的用途是页面元素的修饰和布局能力训练任务及案例任务1利用CSS制作芙蓉商城“商品分类”版块使用各类CSS选择器，实现页面美化效果任务2制作贵美“商品分类”版块任务3制作圆角矩形教学重点CSS选择器课外拓展任务参考电子教材中128页利用背景截取技术实现要求效果课后体会CSS技术有难度，尤其对刚接触的学生，加大学生课下学习、预习的力度。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123456上次作业评点及内容回顾为什么使用CSS样式表CSS的用途CSS基本语法选择器的分类：使用各类CSS选择器，实现页面美化效果文本属性背景属性背景属性的经典应用任务1:图标截取--背景偏移量技术任务2制作贵美“商品步骤1实现“你好....”的段落修饰步骤2实现区域图片背景步骤3实现列表修饰步骤4整体布局调整任务3制作圆角矩形布置作业讲授讲授分析引导讲授分析思考讨论编程讨论消化编程1010060454510*******学院教案课次13教师姓名授课班级授课地点授课日期2023年3月20日第5周授课时数2本次授课标题模块3CSS样式表任务1利用CSS制作芙蓉商城“商品分类”版块教学目标能力（技能）目标知识目标掌握CSS的基本语法使用文本和字体样式美化网页CSS样式表规则采用选择器、属性、属性值进行描述样式表的用途是页面元素的修饰和布局能力训练任务及案例任务1制作贵美“商品分类”版块任务2制作圆角矩形教学重点CSS选择器课外拓展任务参考电子教材中128页利用背景截取技术实现要求效果课后体会学生对属性值不熟练，需要加强练习，常用的属性应该要能够记住才好使用教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配123上次课程内容回顾任务1制作贵美“商品步骤1实现“你好....”的段落修饰步骤2实现区域图片背景步骤3实现列表修饰步骤4整体布局调整任务2制作圆角矩形提问评讲分析引导指导评讲分析引导指导思考回答听讲思考实践听讲听讲思考实践105525

*******学院教案课次14教师姓名授课班级授课地点授课日期2023年3月21日第5周授课时数2本次授课标题模块3CSS样式表任务2利用CSS完成网上商城“登录页”的布局教学目标能力（技能）目标知识目标掌握CSS的基本语法使用盒子模型的基本属性美化网页了解盒子模型的概念与基本属性理解基本属性值能力训练任务及案例任务1认识盒子模型的三大属性margin、border与padding任务2实现网上商城的logo布局教学重点盒子模型课外拓展任务利用盒子模型进行顶部布局课后体会主要采取教师带领和指导方式进行授课，学生上课较认真，大部分能完成任务。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234上次课程内容回顾任务1认识盒子模型的三大属性margin、border与padding图标截取--背景偏移量技术分析实现效果，小组讨论如何实现的？引出定义两个类选择器的思路。<ul><liclass="menu-class">家用电器</li><liclass="menu-li">大家电</li><liclass="menu-li">洗衣机</li><liclass="menu-li">电冰箱</li><liclass="menu-li">DVD</li></ul>任务2实现网上商城的logo布局总结内容与问题提问评讲讲授分析演示评讲分析引导指导评讲讲授课件多媒体计算机演示多媒体计算机课件思考回答听讲思考实践听讲听讲思考实践听讲1035405

*******学院教案课次15教师姓名授课班级授课地点授课日期2023年3月24日第5周授课时数2本次授课标题模块3CSS样式表任务2利用CSS完成网上商城“登录页”的布局教学目标能力（技能）目标知识目标掌握盒子模型的基本属性的用法来美化网页掌握浮动属性与清除属性的使用理解盒子模型的基本属性理解浮动与清除属性能力训练任务及案例任务1float、clear属性的应用任务2实现实现“登录页”顶部的局部布局任务3补充练习教学重点盒子模型课外拓展任务补充练习课后体会主要采取教师带领和指导方式进行授课，学生上课较认真，大部分能完成任务。为加强对盒子模型理解，引导学生认真独立思考。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234上次课程内容回顾任务1float、clear属性的应用任务2实现实现“登录页”顶部的局部布局任务3补充练习提问评讲分析指导提问评讲分析引导指导评讲分析演示课件思考回答听讲实践思考思考实践听讲实践10253025*******学院教案课次16教师姓名授课班级授课地点授课日期2023年3月28日第6周授课时数2本次授课标题模块3CSS样式表任务2利用CSS完成网上商城“登录页”的布局教学目标能力（技能）目标知识目标掌握盒子模型的基本属性的用法来美化网页掌握浮动属性与清除属性的使用理解盒子模型的基本属性理解浮动与清除属性能力训练任务及案例任务1float、clear属性的应用任务2实现实现“登录页”顶部的局部布局任务3补充练习教学重点盒子模型课外拓展任务补充练习课后体会主要采取教师带领和指导方式进行授课，学生上课较认真，大部分能完成任务。为加强对盒子模型理解，引导学生认真独立思考。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配1234上次课程内容回顾任务1float、clear属性的应用任务2实现实现“登录页”顶部的局部布局任务3补充练习提问评讲分析指导提问评讲分析引导指导评讲分析演示课件思考回答听讲实践思考思考实践听讲实践10253025

*******学院教案课次17教师姓名授课班级授课地点授课日期2023年3月31日第6周授课时数2本次授课标题模块3CSS样式表任务3利用CSS制作典型的局部布局教学目标能力（技能）目标知识目标掌握使用div-ul-li布局页面的技术盒子模型的概念盒子具有的单个属性：边框、内边距、外边距浮动属性、清除属性盒子模型的概念盒子具有的单个属性：边框、内边距、外边距浮动属性清除属性能力训练任务及案例任务3利用CSS制作典型的局部布局1：修饰div-ul-li局部布局教学重点CSS选择器课外拓展任务以小组为单位，复习PPT课后体会让学生掌握典型布局的应用场合，有布局的意识。教学过程设计步骤教师活动及教学内容教学方法及教学手段学生活动时间分配12上次作业评点、内容回顾典型的局部布局结构div-ul(ol)-li：常用于分类导航或菜单等场合；div-dl-dt-dd：常用于图文混编场合；div-ul-li局部布局的样式修饰如何复用CSS代码1：修饰div-ul-li局部布局讲授分析引导讲授分析引导思考讨论编程讨论编程1045