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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.5设计一级栏目页面该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）了解常见外部样式表的命名习惯。（2）将需要复用的css样式保存到外部样式表能力目标：（1）具备合理拆分内部样式到外部样式表的思维与技能。素养目标：（1）在软件开发过程中，引导学生关注用户需求和使用体验，培养其用户导向的思维方式。CSS代码的整理及样式表外联常见外部样式表的命名。通过介绍常见样式表命名，引导学生自行应用到相关练习。将页面部分需要复用的css样式保存到外部样式表。将全部样式进行分解，通过提问、讨论等方式引导学生找出所需的样式。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习回忆翻页按钮中采用的标签。倘若为每个按钮增加交互效果，可以采用哪些特效？分别可以使用什么样式来达成预期？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入我们反复强调，代码的整理，有利于发现细节纰漏，同时对知识点的巩固，也有一定的帮助。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授8.5.5CSS代码的整理及样式表外联（1）去除css中的辅助边框、背景底色，body容器调整背景色为白色。代码如图8-51所示。图8-51CSS代码（2）将部分样式转到外部的样式表文件中，考虑到有些布局样式，在其他页面中也可以派上用场。比如新闻列表项的样式，可能极少机会在其他栏目中用的上。但页码区样式，只要存在需要翻页的情况，比如“解决方案”、“品牌”这些页面量较多的栏目，就极大几率也采用同样的页码样式。这样理解下来，我们的页码区样式就可以成为“公共”样式，在许多网站中，会采用common.css来存储公共样式，另外也可以采用如表8-1所示的分类，拆开来存储到不同的样式文件中。强调一个“拆”字，拆成不同规格的“积木”组件，方便以后反复拼成各种“布局作品”。用途文件名称用途文件名称主要的样式表master.css布局，版面layout.css专栏columns.css文字font.css打印样式print.css主题themes.css听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）在站点根目录下css文件夹中，创建common.css，如图8-52所示。（2）把页码区样式复制到common.css，并更新图片路径，如图8-53所示。（3）在news.html文件中追加一条链接指向common.css，如图8-54所示。（4）将所有文件保存，预览效果是否达到预期。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分代码整理编码习惯良好。20查漏补缺预览效果达成预期。40样式外置合理挑选能复用的css样式添加到外部样式表。40总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解常见外部样式表的命名习惯。（2）将需要复