Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元6 制作非遗项目申报指南页面—CSS 高级应用.docx

PAGE1

《Web前端开发技术》

课程教案

适用专业：

授课班级：

授课教师：

编制日期：

教案名称

单元6制作非遗项目申报指南页面—CSS高级应用

计划学时

4学时

本次授课类型

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

教学目标

知识目标

1.学会有序列表和无序列表的创建。

2.掌握列表的嵌套使用及样式设置。

3.掌握超链接、边框、背景的样式设置。

4.理解CSS高级应用在实际项目中的整合与美化。

能力目标

1.能够独立创建和美化列表、导航栏及页面区域。

2.能够运用CSS高级样式解决实际页面设计问题。

素质目标

1.培养持续学习、深度学习的能力。

2.关注前沿技术，培养创新思维。

思政目标

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

2.培养团队协作精神，提升解决问题的能力。

教学重点

列表的创建与样式设置（有序列表、无序列表、嵌套列表）。

边框与背景的样式设置。

超链接的样式设置与水平导航栏的美化。

教学难点

列表嵌套的逻辑与样式冲突解决。

多浏览器环境下边框与背景样式的兼容性问题。

页面整体布局与样式整合的协调性。

教学设计思路

教学效果及改进思路

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

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

教学实施过程

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

备注

一、课前自主学习

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

（二）学生严格遵守预习要求，详细记录需要解惑的要点。

（三）教师科学分析学习成效曲线，为特殊需求学员提供定制化辅导方案，营造全员共进的学习氛围。

二、课上探究学习

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

小新计划为非遗网站制作非遗项目申报指南页面，并决定通过列表来实现非遗项目申报指南区域和水平导航栏的设计。他意识到，仅凭之前掌握的入门技能无法实现更加美观的网页效果，因此需要深入学习CSS3的高级应用，包括列表样式、背景样式和边框样式等，以提升页面的整体视觉效果。为此，小新制定了详细的任务规划：首先设计非遗项目申报指南页面的整体框架，接着创建列表并完成申报指南区域的制作，然后通过设置边框样式完善文件下载区域，再制作并美化水平导航栏，最后通过背景样式的调整进一步优化页面效果。

（二）任务1认识网页

1.任务描述

2.任务准备

具备非遗项目申报指南页面原型图

3.任务实施

1.主要内容：

根据网页内容来规划和设计页面布局。打开Axurc，建立非遗项目申报指南页面原型，设计页面，原型图如图所示。

2.师生活动：

教师提供操作指导手册，巡回检查学生操作规范，进行过程性评价。

学生按照步骤完成实践任务，拍摄操作视频进行自我检查。

3.教学方法：

采用翻转课堂教学模式，课前提供学习资料，课中重点指导实践操作。

任务2边框样式设置—制作非遗项目文件下载区域

1.任务描述

使用列表制作申报指南区域的侧边栏，通过列表间的嵌套形成二级目录结构，并设置列表的CSS属性以美化列表样式。

2.任务准备

(1)能够创建有序无序两种列表

(2)能够设置列表的样式属性

(3)能够使用overflow属性用于控制内容溢出元素边框时显示的方式

(4)能够使用white-space属性用于指定元素内空白的处理方式

(5)能够使用text-overflow属性用于指定当文本溢出包含它的元素时应该如何显示

3.任务实施

1.主要内容：

(1)在站点目录下新建非遗项目申报指南页面。

(2)在页面中创建一级标题元素“申报指南”，令其居中显示。

(3)使用无序列表创建第一级申报指南目录。

(4)使用有序列表创建第二级申报指南目录。在第3步无序列表的{}li{}{}/i{}标记中插入用有序列表表示的二级目录。

(5)使用iist-style-image属性设置无序列表的列表项符号为箭头图片。这样，.级目录的列表项符号也会随之变化，需要同时设置有序列表的list-style-image为none。

(6)右侧正文部分放置在层{}divid=“right”}中，设置固定的大小，当长文本出现时需要进行文本的溢出控制，在右侧添加滚动条以便查看全文。

(7)为了使网页更加美观，将侧边栏和正文部分放置在不同的层中，实现左右分布显示，实现方法将在单元7的任务中详细介绍。

非遗项目申报指南区域参考代码如下

2.师生活动：

教师通过项目分析引入知识点，指导学生完成需求分析文档。

学生以小组为单位进行