网页设计与制作项目式教程（HTML+CSS）电子教案 06.制作“著名诗人”模块.docxVIP

网页设计与制作教案

授课教师

授课班级

授课日期

课题

制作“著名诗人”模块

计划学时

教学目标

知识目标

掌握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.完成项目延伸任务，将结果文件上传至教学平台。

通过学习平台学习相关内容，让学生养成自主学习的习惯。

通过“著名诗人”网页内容的制作，激发学生对古诗词文化的兴趣。

通过任务分析，锻炼学生分析问题的能力，以及用数字化、图形化的方式来呈现，培养其数字素养。

通过学习新知，积极思考，引导学生培养创新思维和解决问题的能力。

通过规范编码习惯，培养学生精益求精的工匠精神，提升职