第4单元 CSS基础应用-美化公司简介页（教案6：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称CSS基础应用——美化公司简介页授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，接入超星教学平台）教学方法主导：项目引领任务驱动教学法；辅助：理实一体化教学法、案例演示法、讲练结合法、小组协作法教材分析本节选自教材第四单元4.1“美化公司简介页”实训内容，是CSS基础应用的核心实操课。涵盖超链接伪类、文本属性、背景属性、基础选择器等知识点，通过大湾区基建公司简介页美化实例，实现从HTML结构到可视化页面的转化，是培养学生页面美化能力的入门实训，为后续复杂页面开发奠定基础。学情分析1.前置基础：已掌握HTML基础标签、表格布局及CSS基本语法、外部样式表引入方法，能编写简单HTML页面结构，具备VSCode基本操作能力。

2.学情特点：动手能力强、具象思维突出，对页面美化效果兴趣浓厚，抽象逻辑较弱，对伪类、属性组合应用理解较慢。

3.衔接需求：需通过具象案例强化属性记忆，衔接后续CSS选择器、权重等知识，培养规范编码习惯。教学目标【知识目标】：

1.掌握CSS文本属性、背景属性及超链接伪类的用法，理解基础选择器应用场景。

2.熟悉AI工具辅助编写CSS代码的流程，能优化AI生成代码。

【能力目标】：

1.能独立完成公司简介页页眉、banner、内容区、页脚的美化，实现指定交互效果。

2.能运用AI工具排查代码错误，提升编码效率。

【素质目标】：

1.培养页面审美与细节把控能力，树立规范编码理念。

2.提升团队协作与问题解决能力，适应AI辅助开发场景。教学重点1.CSS文本、背景属性及超链接伪类的综合应用。

2.基于AI工具辅助编写并优化CSS代码，完成页面各模块美化。教学难点1.超链接伪类状态（默认、hover、当前状态）的样式区分与适配。

2.AI生成代码的优化与调试，解决样式冲突及显示异常问题。教学准备1.硬件：机房计算机、投影仪、网络环境。

2.软件：VSCode（安装通义灵码插件）、超星教学平台（上传案例源码、素材）。

3.素材：大湾区基建公司简介页HTML模板、背景图、logo素材、样式参考图。板书设计核心：1.核心属性（文本：缩进/行高；背景：颜色/图片；伪类：a:link/hover）；2.AI辅助：提词→生成→优化；3.模块美化：页眉→banner→内容→页脚。二、教学设计教学环节教学内容师生活动设计意图/时间环节一：情境导入，项目发布（亮点：AI协作+案例对比）1.情境展示：呈现大湾区基建公司简介页美化前后对比图，左侧为无样式HTML页面，右侧为完成后效果，聚焦页眉导航、banner、文本排版的差异。

2.任务拆解：明确本课时核心项目“美化公司简介页”，拆解为5个子任务：

（1）项目文件准备（创建CSS文件并关联HTML）；

（2）页眉导航链接美化（伪类+边框效果）；

（3）banner图响应式美化；

（4）内容区文本及二级导航美化；

（5）页脚美化（背景+居中）。

3.知识铺垫：简要回顾外部样式表引入语法，介绍通义灵码插件辅助编码的优势，明确AI提词核心要素。教师：展示对比案例，讲解页面美化的实用价值；拆解任务并明确每个子任务的成果标准；演示超星平台素材下载方法，介绍AI工具基本用法。

学生：观察案例差异，明确学习目标；下载素材并解压至指定目录（D:\design\DawanquWebsite）；启动VSCode并打开项目文件夹，熟悉素材结构。设计意图：通过视觉对比激发兴趣，拆解任务降低难度，引入AI工具贴合实训需求。时间：10分钟。环节二：新知讲授，案例演示（亮点：精准提词+代码优化）1.核心知识点讲解：

（1）超链接伪类：a:link（默认）、a:hover（悬停）、.active（当前状态）的优先级及样式设置；

（2）文本属性：text-indent（首行缩进）、line-height（行高）、text-align（对齐）的应用；

（3）背景与响应式：background-color、background-image及min-width、width:100%的响应式逻辑。

2.AI辅助编码演示：

（1）演示页眉导航美化提词：复制导航表格代码，提词“为表格添加类menu，定义表格宽1200px居中，链接默认无下划线、18px#333，hover时背景#cc3333、文字白，当前状态类menu-active加3px下边框”；

（2）讲解AI生成代码的优化要点：补充注释、调整line-height实现垂直居中、修正边框样式冲突。

3.难点提示：伪类样式书写顺序、banner图块级元素设置避免底部间隙。教师：结合VSCode实时演示知识点，逐行讲解属性含义；示范AI精准提词方法，对比生成代码与优化后代码的差异；标注易错点并强调解决方案。

学生：跟随演示记录知识点，仿写核心代码片段；掌握AI提词技巧，理解代码优化的必要性；记录易错点及解决方法。设计意图：具象化讲解知识点，演示AI辅助流程，为实操奠定基础，突破重点。时间：20分钟。环节三：分层实操，小组协作（亮点：分步闯关+AI答疑）1.基础任务（必做，独立完成，40分钟拆分）：

（1）文件准备（5分钟）：在css文件夹创建pub.css和about.css，在about.html中添加两个CSS文件链接，保存并测试关联有效性。

（2）页眉美化（10分钟）：复制导航表格代码，用AI生成样式并优化，添加menu类及menu-active类，测试hover及当前状态效果。

（3）banner图美化（5分钟）：为img标签添加banner类，用AI生成min-width:1200px、width:100%样式，设置为块级元素。

（4）内容区美化（12分钟）：为二级导航添加menu-sub类，AI生成样式；为正文td添加content类，设置文本缩进、行高，优化标题样式。

（5）页脚美化（8分钟）：为页脚td添加footer类，设置背景#ADACAC、行高150px、文本居中，测试垂直居中效果。

2.提升任务（选做，小组协作）：

（1）优化文本与背景对比度，调整颜色参数；

（2）用AI生成代码注释，规范编码格式；

（3）排查样式冲突，记录解决过程。教师：巡视指导，重点帮扶AI提词不精准、样式不生效的学生；针对共性问题（如路径错误、伪类顺序）集中讲解；组织小组内互助，解答AI生成代码的调试疑问。

学生：按步骤完成实操任务，独立运用AI工具生成代码并优化；实时预览效果，排查显示异常；小组协作完成提升任务，记录实操心得。设计意图：分步实操贴合职校生动手能力，分层任务适配差异，AI答疑提升效率，突破难点。时间：40分钟。环节四：成果展示，点评优化（亮点：多维点评+技巧分享）1.成果展示：随机抽取4名学生作品，通过投影仪展示，聚焦三个维度：

（1）样式完整性（是否完成所有模块美化）；

（2）交互效果（伪类状态是否正常）；

（3）代码规范性（注释、格式）。

2.点评优化：肯定亮点作品的AI提词技巧与代码优化方式，针对共性问题（如banner图间隙、文本缩进无效）现场演示修正方法。

3.技巧分享：邀请优秀学生分享AI精准提词经验，总结样式冲突排查技巧。教师：组织展示活动，精准点评优缺点；现场调试错误代码，强化知识点应用；整理核心技巧并上传超星平台。

学生：展示个人作品，倾听点评意见；修正自身作品错误，学习优秀经验；记录技巧要点，完善代码。设计意图：通过展示暴露问题，点评强化知识点，同伴分享提升学习效率。时间：5分钟。环节五：课堂小结，布置作业1.课堂小结：梳理核心知识点，包括超链接伪类、文本与背景属性的综合应用，AI辅助编码的“提词-生成-优化”流程，强调伪类顺序、响应式设置等易错点。

2.作业布置：

（1）独立完善公司简介页美化，确保所有交互效果正常，添加完整代码注释，上传超星平台；

（2）总结10条AI辅助CSS编码的精准提词技巧，结合本次实操案例编写，字数不限。教师：引导学生共同回顾知识点，构建知识框架；明确作业要求与提交时间，预告下节课内容（工匠技能认证网页制作）。

学生：跟随回顾整理笔记；记录作业要求，规划完成时间；保存项目文件并备份。设计意图：梳理知识体系，通过作业巩固实操能力，强化AI工具应用技巧。时间：5分钟。三、课后作业和教学反思课后作业1.独立完善大湾区基建公司简介页美化，确保页眉、banner、内容区、页