HTML5+CSS3网页设计实战 教案 3.5 扩展练习 1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章扩展练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：分析新闻列表版块的容器构成，以及对应的样式设置。能力目标：具备制作常见新闻列表版块布局的能力。素养目标：（1） 引导学生关注社会热点新闻，培养他们的社会责任感，鼓励他们将所学技术用于服务社会、改善民生，成为有担当、有情怀的技术人才。（2） 通过课堂讨论、小组分工等形式，培养学生的沟通能力、协作精神和集体荣誉感。主要使用ul标签、float属性、border-radius属性完成布局效果。ul标签搭建主要框架，胶囊型容器的样式。通过提示ul标签结构、教师演示方式加强相关知识的掌握。css定义“>”元素。通过提供边框、旋转属性对应代码使得学生完成相关练习。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习border-radius属性中，按什么顺序定义四个角的圆角度？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入这节课我们探究一下网页新闻列表版块的布局，由于布局千变万化，但万变不离其宗，基本上采用ul标签作为主要的容器进行设计。接下来我们看一下今天要完成的案例。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1. 分析容器包含结构。2. 容器对应采用的标签。3. 确定装饰性元素的样式表现，探究采用的属性。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】主要使用ul标签、float属性、border-radius属性完成如图3-85所示的布局效果。【教师分发文字素材】文字量偏多，建议将文字分发给学生。【小组讨论环节】分为若干组，每组对布局进行探究，提出布局方案。【汇总小组讨论结果】对每组方案进行简单点评，理顺其设计思路。让每组按自己队伍思路完成对应代码。【参考操作策略】将整体结构分解为3列，每列容器设置尺寸。将每列从上往下，分为“标题”、“内容区”两部分。“一线传声”、“国资动态”列采用h2+ul，也可以采用dl进行布局。栏目标题的>元素，若想美观采用小容器设置2个边框，并旋转容器。也可以采用图标方式。“视频专区”中，视频采用截图即可。下方3个按钮使用一组ul标签，对第一个li元素设置id选择器完成特殊样式。（6）新闻列表的项目列表图标变成图中所示的桔色？思路1：图标采用小图片形式。思路2：在li元素内部加入一个无语义的标签，比如<span>、<i>等，设置该容器的圆角度。（7）强调图标元素处理上，务必反复实验线条粗细，达到最优视觉效果。（8）强调在写代码时，由于有大量结构相同的li容器，采用最优的快捷键进行复制——粘贴——修改文字。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Html结构容器关系正确，3列布局宽度正确。30栏目标题右侧的>元素借助元素的旋转和边框设置完成效果。或者采用图标。20视频专区下方的翻页按钮定位准确，外观一致。20列表图标设计知识点合理，效果一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课学习，要求我们：（1）分析新闻列表版块的容器构成，以及对应