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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章扩展练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：巩固Hbuilder快捷键操作了解新闻列表所涉及的ul标签结构。能力目标：具备快速构建代码的能力。具备独立完成局部页面效果的能力。素养目标：（1）从新闻列表内容引导学生关注社会热点问题，如数字鸿沟、网络安全、隐私保护等，培养他们的社会责任感，鼓励他们将所学技术用于服务社会、改善民生，成为有担当、有情怀的技术人才。通过hbuilder快捷键操作快速进行ul标签结构代码的输入，完成对应的分组练习。常规Hbuilder快捷键操作。通过上机敲打代码，强调快捷键操作来加强快速编写代码的能力。新闻列表布局的代码实现。通过快捷键快速构建，了解ul、li标签的结构及意义。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习搜索2023年中国百强企业名单，并以本人学号对应的百强排名找到相关企业的官网，将官网首页进行局部的截图（包含网址即可），保存为“姓名+企业名称.jpg”文件。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入企业网站或专题网站页面中，经常包含大量的看上去属于一个结构体的元素集合，无论是纯文字，或是纯图片，或者图文结合，只要是构成布局的小单元结构一致，我们基本上可以通过hbuilder快捷键操作快速进行代码的输入，这个场景经常使用<ul>列表标签。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1.hbuilder快捷键2.新闻列表的常见布局。3.ul标签的代码结构【练习4】完成下图红色区域效果对应的HTML代码，如图1-34所示。尽可能快速写完HTML结构代码，先使用<Ctrl>+<C>键和<Ctrl>+<V>键,快速出效果，有时间再改文字内容。☆思政讲解：几乎所有软件的复制、粘贴操作都是一样的快捷键。各学科之间要有知识衍射、类比推测的意识。好比我们知道筷子除了能夹饭菜以外，还能夹其他物品，小说中武功高者甚至可以做到夹苍蝇。专业课程知识，都具备有承上启下的作用，不能学完之后过一段时间又是一张白纸。听讲演示任务达到的效果，讲解代码。演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习4】完成下图红色区域效果对应的HTML代码，如图1-34所示。（1）输入以下标签及文字（2）把光标移动在<li>这一行上的任何一个位置，按<Ctrl>+<C>键进行复制，接着按<Ctrl>+<V>键五次来粘贴五遍。快速得到大体效果。敲打代码巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。20HTML代码的编写快速无误输入代码。30CSS代码的编写能以正确缩进形式输入正确代码。30快捷键运用以标准手势输入快捷键。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1） 巩固软件的快捷键操作。（2） 了解列表类页面效果。（3） 初步掌握ul标签的结构及代码实现。听讲归纳本任务的开展情况，梳理知识点。采用归