HTML5+CSS3网页设计实战 教案 8.6 设计详情页布局-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。28.6设计详情页布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）完成主要框架的代码复用。（2）页头区结构和样式的修改。（3）定义内容区容器结构，并添加图文元素。能力目标：（1）具备代码复用的意识与操作能力。（2）具备重定义页头区结构及样式的能力。（3）具备新闻图文排版的能力。素养目标：（1）通过对新能源的认识，引导学生关注能源消耗和资源利用问题，培养其环保意识和社会责任感。制作详情页的页头和内容区域。页头区的设计。通过代码复用，教师提示并引导学生对个别参数进行修正。内容区的布局与内容制作。及时了解学习情况和任务进度，调整教学策略，个别重要参数进行引导、解释。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习新闻栏目页中，内容区的设计主要采用的标签，主要的样式。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入当完成新闻栏目页后，浏览者点击某条新闻，就可以浏览具体的新闻资讯，这个跳转后的页面就是我们本次课要完成的新闻详情页。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授本节的目标是完成“宁德时代”官网的“新闻”栏目页的其中一个页面，如图8-57所示。先登录对应页面观察页面效果，同时将所需的图片、图标保存到news的img文件夹中。观察到详情页的海报区没有了图片，反而是文章的标题和日期放在原来海报区的位置上。从结构的角度出发，我们不能认为只是将背景图取消，文章标题和日期放在页头的容器中，这样处理的话，在内容区容器的文章岂不是没有了标题？听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施8.6.1复用首页中的相关代码在news文件夹下新建一个名为“news-2024-0001.html”的文件，把index.html代码复制到该文件中，得到页头、页脚区域的布局效果。修改一下<title>标签内容，把css样式表路径更换一下，并删除内容区代码。8.6.2页头区的设计建议大家同时打开index.css，快速的查找目标样式，也同样可以快速复制到正在编写的HTML文件中，操作如图8-59所示。文件预览后，我们发现由于导航栏容器的底色一直是白色，这也首页不同。正确的情况下，logo对应图片默认应该是蓝色logo图。 在news-2004-0001.html修正图片路径，如图8-60所示。不断修改样式，不断浏览测试观察效果。8.6.3内容区容器的布局我们将内容区的容器id命名为"content-detail"，搭建基本的结构，代码如图8-62所示。8.6.4往内容区添加图文混排内容该详情页的元素还算很简单，没有像门户网站的文章详情页包含了大量的外部链接、各种分享图标、大堆的友情链接，只需要完成文章标题，发布日期、小节标题、图片、图片标注这些元素的样式定义。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10代码复用正确链接外部样式。10内容区容器结构采用合理的标签，结构关系正确。30内容区图文样式预览效果与原图一致。50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）完成主要框架的代码复用。（2）页头区结构和样式的修改。（3）定义内容区容器结构