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

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.师生活动：教师通过项目分析引入知识点，指导学生完成需求分析文档。

学生以小组为单位进行需求讨论，绘制功能流程图。3.教学方法：采用项目导向教学法，结合企业真实案例，引导学生完成项目规划。任务3列表应用—制作与美化水平导航栏1.任务描述使用列表制作文件下载区域，每个列表项都是超链接，单击文件下载链接可以下载相关文件。通过CSS设置列表项的边框样式、背景样式、超链接样式等。文件下载区域网页效果如图所示。2.任务准备(1)了解边框样式的设计(2)了解CSS新增边框属性3.任务实施1.主要内容：(1)在站点目录下新建文件下载区域页面。(2)在页面上创建一级标题"文件下载"和无序列表，每个列表项即文件下载项，单击文件下载链接可以下载对应文件。(3)设置标题文字居中显示。(4)设置无序列表样式。不显示无序列表的列表项符号。(5)设置边框样式。每个列表项的下边框样式为点线、1像素、灰色(#b2b2b2)。(6)设置超链接样式。文字颜色为黑色，无下划线。(7)当鼠标指针悬停在某个文件下载项上方时，其背景颜色变为灰色。文件下载区域参考代码如下2.师生活动：教师现场演示代码调试技巧，巡回解答学生编程问题。

学生独立完成代码编写，通过单元测试验证功能。3.教学方法：采用案例教学法，通过典型错误分析，培养学生debug能力。任务4背景样式设置1.任务描述对列表进行文字样式设置、超链接样式设置等。导航栏的网页效果如图所示2.任务准备能够使用width与height设置元素的宽度与高度3.任务实施1.主要内容：(1)创建导航容器。创建一个id为"nav"的层作为导航栏容器，设置容器宽度为1000px，高度为60px，使容器在页面上水平居中，添加灰色背景便于查看容器范围。(2)添加导航列表结构。在容器内添加无序列表<ul>作为导航栏主体，列表包含5个导航项：首页、机构、资讯、名录、指南，每个导航项使用<li>标记包裹超链接，设置<ul>的宽度和高度与容器一致。(3)设置列表项浮动。由于<li>是块级元素，需要使用浮动属性使其横向排列，设置所有<li>元素向左浮动。(4)调整列表项样式，设置每个<li>宽度为200px，移除列表项符号，添加红色背景便于观察元素范围。(5)清除默认边距。清除<ul>元素的默认外边距和内边距，确保列表与容器完全贴合。(6)设置垂直居中。调整<li>高度与容器一致，通过设置行高实现文字垂直居中，设置文字水平居中显示。(7)美化超链接样式。设置导航文字大小为20px，文字颜色设为白色，移除超链接下划线，统一鼠标移入移出的视觉效果。(8)最终优化建议。可添加鼠标悬停效果（如背景变黑），可进一步调整间距和交互效果，可考虑响应式设计适配不同设备。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务5整合美化非遗项目申报指南页面1.任务描述制作页面头部区域，放置网站10g0、网站名称、水平导航栏，增加页面的背景样式设置，对CSS代码和HTML代码进行有效整合优化。设置水平导航栏背景2.任务准备(1)了解背景颜色设置(2)了解背景图片设置(3)了解背景图片平铺设置(4)了解背景图片附着设置(5)了解背景图片位置设置(6)了解背景组合属性3.任务实施1.主要内容：(1)在站点目录下新建网页文件(2)将网页划分为三个内容区块：页面头部区域、申报指南区域和文件下载区域，分别放置在不同层中(3)整合优化三个内容区块的CSS代码，避免样式冲突(4)设置页面背景图片，大小为50×50像素并默认平铺(5)在页面头部区域左上角显示网站logo和名称，logo设为背景图片并向右偏移100像素(6)设置网站名称的文字样式（颜色、大小、间距）并与logo保持垂直居中(7)统一调整各区域样式风格，提升页面整体美观度2.师生活动：教师组织课堂辩论，引导学生探讨技术方案优劣。

学生分组准备论据，进行技术方案答辩。3.教学方法：采用研讨式教学法，通过头脑风暴激发创新思维。三、课后拓展练习1.列表在网页上的默认样式有序列表和无序列表是组合标记，由{<}ul{>}{<}/ul{>}或{<}o|{>}{<}/ol{>}与{<}li{>}{<}/i{>}组成，都不能单独使用。这3种标记都是块级标记，即独占一行