网页设计与制作项目式教程（HTML+CSS）电子教案 06.制作“著名诗人”模块.docx
网页设计与制作教案
授课教师
授课班级
授课日期
课题
制作“著名诗人”模块
计划学时
教学目标
知识目标
掌握CSS选择器（标签、类、ID、群组）的使用方法。
理解盒子模型（内容区、内边距、边框、外边距）的组成及属性设置。
掌握浮动布局的原理及清除浮动的方法。
能力目标
能根据设计需求搭建网页结构，合理运用CSS样式美化页面。
能综合运用浮动布局实现多元素排列效果
素质目标
通过传统文化主题网页的制作，增强文化传承意识。
通过规范编码习惯，培养精益求精的工匠精神。
教学重点
CSS选择器的应用规则。
盒子模型属性的设置方法。
浮动布局的实现与清除浮动技巧。
教学难点
浮动布局导致的高度塌陷问题解决。
复杂页面结构的拆分与样式控制。
教学模式
及教学方法
理实一体化、线上+线下混合教学模式
项目教学法、任务驱动法、讲授法。
教学活动及主要环节
素质培养
课前导学
1.观看学习平台相关微课视频。
2.让学生搜集诗人的图片及介绍
3.完成课前测试题。
课中践学
【情景导入】
情境描述：
国风社团负责人阿文邀请学生制作“古诗词”网站，需完成“著名诗人”模块。
任务明确：
分析模块功能需求，展示设计效果图，明确学习目标。
【项目实施】
任务3.1：创建网站项目
任务分析：
项目名称：古诗词网站
模块文件：poet.html、commend.html等
资源目录：css（样式表）、img（图片）
二、操作实施
1.新建网站项目
打开开发软件HBuilderX，选择“文件”菜单中的“新建”→“项目”命令。在“选择模板”区域中选择“基本HTML项目”，填写项目名称“古诗词”，设置存储位置。
2.网站资源管理
根据网站资源需求新建目录和文件，基于模板基础，在“古诗词”根目录上右击，选择“新建”→“目录”和“新建”→“html文件”命令，建立commend.html、introduce.html、poet.html、translate.html文件。
任务4.2制作“助农乐购”网站注册页面
一、任务分析
“古诗词”网站中“著名诗人”模块会列出历史上著名诗人的信息，包括图像、姓名、朝代。了解诗人的信息可以帮助我们更好地理解古代诗词文化。根据页面的设计需求和最终效果图，分析页面的框架结构
二、知识储备
根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS选择器基础、盒子模型基础和浮动布局。
新知学习1：CSS选择器基础
知识讲解
1.标签选择器：h2{color:#333;}
2.类选择器：.poet-item{float:left;}
3.ID选择器：#poet-container{width:700px;}
4.群组选择器：h2,p{font-family:宋体;}
实践操作：
为标题设置蓝色背景（标签选择器）
为诗人卡片添加公共样式（类选择器）
新知学习2:盒子模型
知识讲解：
1.内容区：width:150px;height:200px;
2.内边距：padding:10px;
3.边框：border:1pxsolid#ccc;
4.外边距：margin:15px;
通过例题让学生巩固练习其编码规则。
.poet-card{width:150px;
padding:10px;
border:2pxsolid#e0e0e0;
margin:20px;}
新知学习3:浮动布局
原理分析：
float:left实现多列排列
清除浮动方案：
.clearfix::after{
content:;
display:block;
clear:both;}
操作实施：
设置诗人卡片左浮动
添加清除浮动代码防止父容器塌陷
三、操作实施
任务实践3.2.：制作“著名诗人”模块
学生在知识学习的基础上，对照任务分析，进行操作实践，完成?“著名诗人”模块的制作。（学生动手操作，教师巡回指导，对共性问题进行讲解，对个性问题进行答疑。）
四、任务拓展
布置拓展任务：为诗人卡片添加阴影效果（box-shadow）。（学生可在完成基本任务的前提下，完成拓展任务。）
课后拓学
1.完成任务3.2的课后练习。
2.扫码观看任务3.3中的微课视频，预习新课。
3.完成项目延伸任务，将结果文件上传至教学平台。
通过学习平台学习相关内容，让学生养成自主学习的习惯。
通过“著名诗人”网页内容的制作，激发学生对古诗词文化的兴趣。
通过任务分析，锻炼学生分析问题的能力，以及用数字化、图形化的方式来呈现，培养其数字素养。
通过学习新知，积极思考，引导学生培养创新思维和解决问题的能力。
通过规范编码习惯，培养学生精益求精的工匠精神，提升职