网页设计与制作项目式教程（HTML+CSS）电子教案 04.制作“中国民俗”网站首页.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

制作“中国民谷”网站首页

计划学时

4

教学目标

知识目标

知道块级元素与级行元素的区别。

理解块级元素与行级元素的作用及效果

了解网页中图片的作用。。

能力目标

掌握块元素的使用方法。

掌握行元素的使用方法。

掌握图片标签的使用方法。

素质目标

通过“中国民俗”网页内容的制作，让学生深刻了解中国传统节日，树立传承中国优秀传统文化意识，培养文化自信。

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

教学重点

块元素及行元素的区别以及两者的编码规则及设置方法。

图片的编码规则及设置方法。

教学难点

根据实际需求，合理应用块级元素及行级元素。

根据实际需求，合理应用图片效果。

教学模式

及教学方法

理实一体化、线上+线下混合教学模式

项目教学法、任务驱动法、讲授法。

教学活动及主要环节

素质培养

课前导学

1.观看学习平台相关微课视频。

2.让学生总结自己喜欢的网站首页与详情页的关系及异同点。

3.完成课前测试题。

课中践学

【情景导入】

通过微课视频进行情景导入，展示“中国民俗”网站的首页效果，让学生明确本次课的学习任务。

【项目实施】

任务2.3：制作“中国民俗”网站首页

一、任务分析

小丁已经完成了“中国民俗”网站“传统节日”详情页html内容部分的制作，现在开始制作网站首页。根据页面的设计需求和最终效果图，分析页面的框架结构，主要包括头部区、主体区2个部分，得到框架结构图及主要设置参数。

三个部分主要内容如下：

1.头部区

分成logo图片及导航区及分隔条区，导航超链接到相应的详情页面。

2.主体区

包含一张图片。

二、知识储备

根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有图片、块元素与行元素。

新知学习1：图片

1.图片标签img

（1）图片是通过插入img标签来实现的，是一个自闭合标签。

（2）基本语法格式：imgsrc=＂url＂alt=＂替代文字＂title=＂提示文字＂

（3）讲解img标签的属性：src、alt、title。

2.图片路径

讲解图片的相对地径和绝对地径。

新知学习2:块级元素与行内元素

提出问题：在已学的标签中，哪些标签占据独立的空间（行），哪些标签没有影响周围的空间？（学生分组讨论回答）

1.块级元素：在浏览器显示时以块的形式独占一行，呈现为一个独立的块，上下有一定的空间，如h1-h6、p元素等，可容纳其它块级元素和行内元素。

2.行内元素：用于包裹文本的一部分，不会在新行上换行，且不会在周围创建额外的空间，如strong、em元素等。可容纳其它的行内元素，但不能容纳块级元素。

3.div元素：块级元素，用于创建一个容器，对容器内整体设置样式属性。

4.span元素：行内元素，对文本设置样式或标记特定的部分。

通过例题让学生巩固练习其编码规则。

三、操作实施

任务实践2.3.1：搭建页面框架

任务实践2.3.2：制作图片页面内容

（1）制作头部区图片内容

（2）制作主体区图片内容

学生在知识学习的基础上，对照任务分析，进行操作实践，完成“中国民俗”网站首页的制作。（学生动手操作，教师巡回指导，对共性问题进行讲解，对个性问题进行答疑。）

四、任务拓展

布置拓展任务：利用所学知识，根据效果图，制作“饮食文化”主页。（学生可在完成基本任务的前提下，完成拓展任务。）

课后拓学

1.完成任务2.3的课后练习。

2.扫码观看任务2.4中的微课视频，预习新课。

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

通过微课视频，激发学生的学习兴趣，通过展示“中国民俗”网页首页的效果，让学生明确学习任务，同进增强学生传承中国传统文化意识，培养文化自信。

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

通过分组讨论，培养学生的合作意识和沟通协作能力。

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

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