Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面—CSS 基础.docx

PAGE1

《Web前端开发技术》

课程教案

适用专业：

授课班级：

授课教师：

编制日期：

教案名称

单元5制作非遗活动详情页面—CSS基础

计划学时

4学时

本次授课类型

□理论□实验?理实一体□实训□实习

教学目标

知识目标

1.掌握CSS基本语法，能正确编写CSS语句。

2.理解CSS选择器的作用及使用方法。

3.掌握文本字体样式的设置方法。

4.学习文本精细排版的技巧。

能力目标

1.能够在网页中正确引入CSS代码。

2.能够使用CSS美化网页头部和正文区域。

3.能够制作并美化非遗活动详情页面。

素质目标

1.培养用户导向的设计思维。

2.提升网页审美能力和艺术修养。

3.培养精益求精的职业素养。

思政目标

1.激发学生对传统文化的兴趣，增强文化自信。

2.培养学生团队协作和沟通能力。

教学重点

1.CSS基本语法与选择器的使用。

2.文本字体样式和精细排版的实现方法。

教学难点

1.CSS选择器的灵活运用。

2.多浏览器兼容性问题处理。

3.响应式设计的初步实践。

教学设计思路

教学效果及改进思路

绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。

学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。

教学实施过程

要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写

备注

一、课前自主学习

（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元5的相关微课视频，完成在线测试。

（二）学生主动完成预习任务，系统整理需要深化的知识模块。

（三）教师精准识别学习薄弱环节，开展有针对性的线上助学活动，确保教学起点公平一致。

二、课上探究学习

（一）情境引入，任务导入

通过前期的学习，小新已经掌握了网页内容搭建的基础技能，但在实际制作非遗网站时发现，自己设计的页面在美观度和用户体验方面与主流网站存在明显差距。为了提升网页质量，小新决定通过学习CSS技术来优化页面样式，包括调整字体颜色、段落间距等视觉效果。为此，他制定了分阶段的任务规划：首先设计完整的非遗活动详情页面框架；接着通过CSS美化页面头部区域的字体样式；然后对正文部分的文本进行精细排版；最终完成整个页面的制作与美化，从而打造出更具吸引力和专业感的非遗网站页面。

（二）任务1CSS基础与选择器（1课时）

1.任务描述

2.任务准备

打开Axure，建立非遗活动详情页面原型，设计页面。根据任务描述给出以下3种版式设计

版式设计1:左上区域为当前位置区域，中间靠上区域是标题区域，中间部分显示正文，右下区域显示编辑部信息。页面上的图片可以放在正文中间显示。非遗活动详情页面版式设计1如所示。

版式设计2:页面上的图片放在正文下面显示，一行显示多张图片。

非遗活动详情页面版式设计2如图所示。

版式设计3:正文内容只显示文字。非遗活动详情页面版式设计3如图所示。

3.任务实施

1.主要内容：

根据要求进行操作。

2.师生活动：

教师提供操作检查清单，指导学生进行自我评估。

学生对照清单检查操作结果，完善实践报告。

3.教学方法：

采用案例教学法，分析典型工作案例，引导学生举一反三。

任务2CSS字体样式—美化非遗活动详情页面头部区域（1课时）

1.任务描述

设置网页文字的样式。非遗活动详情页面头部区域的网页效果如图所示

2.任务准备

(1)了解CSS基本语法如下

selector{property:value;property:value。

(2)了解CSS基本选择器：类选择器、id选择器、标记选择器。

(3)了解CSS复合选择器：交集选择器、并集选择器、包含选择器。

(4)了解CSS代码的四种方式：链入外部样式表、导入外部样式表、内部样式表、行内样式表。

(5)了解字体样式的设计。

(6)了解文本对齐方式。

3.任务实施

1.主要内容：

(1)创建新网页文件。

打开HBuilderX，在非遗项目站点中创建网页文件。

(2)在body/body标记之间创建网页元素。

(3)使用内部样式表引人CSS代码。在当前编辑的网页文件头部插人{}style{}{}/style{}标记，设置type属性。

(4)设置当前位置信息和标题区域的文字样式。

2.师生活动：

教师建立学习小组，安排组长协助指导组员练习。

学生互帮互助，共同完成实践任务。

3.教学方法：

运用模拟仿真教学，通过虚拟实训平台强化操作技能。

任务3精细排版文本—美化非遗活动详情页面正文区域（1课时）

1.任务描述

非遗