HTML5+CSS3网页设计实战 教案 8.5 设计一级栏目页面-2

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.5设计一级栏目页面该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）主体内容的ul结构及样式设置。（2）翻页按钮的ul结构及样式设置。能力目标：（1）具备多种思路完成每个新闻项容器的交互效果的能力。（2）具备完成翻页按钮的ul结构及样式设置的能力。素养目标：（1）通过实际案例、项目实践等方式，让学生将理论知识与实际应用相结合，培养其实践能力和创新精神。完成一级页面中内容区的制作。主体内容的ul结构及样式设置，翻页按钮的ul结构及样式设置。采用深加工法将复杂的知识点或难点进行分解，找出其中的技术难点，分别进行分析。每个新闻项容器的交互效果的制作。教学中引导学生自主探究、主动思考，通过自己的思考和探究来理解和掌握难点。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习外部样式的导入语句。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入上节课已经完成页头部分，紧接着开始完成内容区的设计。与首页版式有点类似，内容区主要是一些图文元素，增加了一个翻页功能。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授内容区的效果分析，容器结构采用的标签。翻页功能区采用的标签，主要采用的样式属性。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施8.5.4内容区的设计（1）完成容器大体布局，对应的HTML代码如图8-37所示。对应的CSS代码如图8-38所示。（2）先给第一个li容器添加元素，完成效果后给其他li也添加相同内容，期间采用复制完整的第一个容器对应的代码，再修改图片及文字内容，提高编写效率。对应的CSS代码如图8-40所示。（3）制作图片区域的交互效果。思路三：用并列的两个1px高的空白容器，一个灰色背景色，一个蓝色背景色，它俩采用绝对定位方式实现位置的重叠，hover状态时把蓝色容器显示出来，并将width属性做一个过渡效果。对应的CSS代码如图8-42所示。（4）滚屏时，下方的图片内容却覆盖到导航栏上的异常，在样式中申明顶部导航容器的z-index为一个足够大的数值。（5）制作“页码”部分。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10新闻子项布局结构正确30交互效果准确，与效果一致。30翻页按钮容器对应代码正确10样式呈现效果一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）主体内容的ul结构及样式设置。（2）翻页按钮的ul结构及样式设置。（3）具备多种思路完成每个新闻项容器的交互效果的能力。（4）具备完成翻页按钮的ul结构及样式设置的能力。（5）通过实际案例、项