HTML5+CSS3网页设计实战 教案 8.4 制作首页布局-4

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.4制作首页布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）完成页头、内容区、页脚区域的静态CSS代码的优化。（2）完成页面中具备交互效果的代码优化，包括：盒子阴影特效、导航交互特效。能力目标：（1）具备利用原型法，逐步优化页面效果的能力。素养目标：（1）通过原型法，强调在编程细节上追求卓越和完美，引导学生树立精益求精的工匠精神。首页效果优化盒子阴影特效、导航交互特效。提前讲解阴影参数等知识，在案例中进行实际应用。语言选择区域的代码优化、搜索区域的设计。通过教师讲解思路，让学生在制作思路上有所扩展。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习页脚区域的栏目导航通常也称之为站点地图，反映着整个网站的栏目结构。为用户提供了一个清晰、简洁的网站结构概览，帮助他们快速找到所需的信息。站点地图（Sitemap）在搜索引擎优化（SEO）中具有多重重要意义。有助于确保所有页面都能被用户或搜索引擎爬虫有效访问，从而提高网站在搜索引擎中的可见性和排名。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入从之前的页头、主内容、页脚部分的项目进展来看，我们依然有许多样式细节并没有完成，页面看上去甚至有点丑陋。当我们完成框架布局后，接下来就要对细节进行优化设计。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授8.4.2原型优化阶段这一阶段，我们分别从页头、主内容、页脚部分，一点点完善元素的外观表现，但第一轮的优化，我们还不打算涉及到动态交互效果。☆ 思政讲解：设计师不仅要有敏锐的艺术触觉，更要有对细节的极致追求。从色彩搭配到布局规划，从字体选择到交互设计，每一步都需精雕细琢，力求完美。设计师们需要像匠人一样，耐心打磨每一个元素，不断测试与优化，确保网页在视觉上既美观大方，又能在功能上满足用户需求。他们深知，一个细微的改动，或许就能带来用户体验的显著提升。正是这种对卓越的不懈追求，让网页设计作品焕发出独特的魅力，成为连接用户与信息的桥梁。精益求精的工匠精神，正是网页设计师们不断攀登艺术与技术高峰的动力源泉。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施1.静态CSS代码的优化CSS代码尽可能把通用样式、页头样式、内容区样式、页脚样式对应代码集中放置。（1）页头区样式的微调，代码如图8-14所示。（2）内容区样式的微调，代码如图8-15所示。（3）页脚区样式的微调，代码如图8-16所示。2.交互效果的优化（1）盒子阴影样式box-shadow，能为元素添加投影效果。（2）导航栏的级联菜单效果：先完成光标落在导航菜单时背景色、字体颜色改变的效果。修改HTML对应代码，先制作一个子菜单，做好效果后以此类推。调整对应的CSS代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展3.语言选择区域、搜索区域的设计思路。语言选择区域，由于盒子面积跟前面导航子菜单面积样式很多不一样，加上代码量现在有点多，我们建议不要采用复用样式，还是另外再申明一个新样式可能效率更高。搜索区域的实现，我们就停留在构思就可以了，不要求完成对应效果。这里大体说一下设计思路：第一个思路，按照前面子菜单项的做法。第二个思路,使用js脚本，通过点击“搜索”的放大镜图标，将原来隐藏的子菜单容器显示出来。当然这需要百度搜索一下相关知识，搜索关键词可以为“javascript显示指定元素”，也可以简写成“js显示指定元素”。任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分页头区优化元素定位准确，外观与原图一致。20内容区优化元素定位准确，外观与原图一致。10页脚区优化元素定位准确，外观与原图一致。10盒子阴影特效交互效果符合要求，属性值合理。30导航交互特效交互效果符合要求，属性值合理。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习，要求我们：（1）完成页头、内容区、页脚区域的静态CSS代码的优化。（2）完成页面中具备交互效果的代码优