HTML5+CSS3网页设计实战 教案 2.4 基础练习

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 企业网站不同区域的图片的名称。（2） 了解企业网页框架大体结构。能力目标：（1）具备能独立观察、模仿企业网站框架容器的设计。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） 通过对中国企业官网的访问，了解企业，了解国情。企业网页的框架容器结构设计。企业网页的图像命名规则，企业网页的框架容器结构。通过上机练习加强文件命名规则、常见框架类型的标签。模仿企业网站框架容器的设计。用头、躯干、脚这些身体部位来加强对布局框架的认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习Html及css注释语句的格式？一般在什么情况下添加注释语句？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在HTML和CSS代码的编写中，推荐代码使用小写，这是CSS的官方推荐做法，也符合大多数编码规范和命名约定。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1. 从企业网站中获取不同图片的相关信息，如尺寸、类型、文件命名。2. 了解“开发者工具”观察网页框架结构的操作步骤。挑选几个公司或新闻门户网站，仔细观察不同区域的图片的名称。【提问】根据该网站图片命名规律，猜测一下图片中数字代表的含义？听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习3】用“开发者工具”观察几个企业（不宜选门户网站）的主页、一级页面或详情页，用箭头选择工具观察网页的结构。在Hbuilder新建一个空白HTML文件，将网页框架大体结构表述出来。例如：分析“华为”的首页/cn/的主体框架容器。☆思政讲解：提问：你对华为企业最深刻印象体现在什么地方？提示：手机产品、网络产品、5G标准专利、孟晚舟事件……孟晚舟事件启示我们，个人的命运与国家的命运紧密相连。只有国家强大，才能保护好每一位公民。只有团结一心，才能共同抵御风险和挑战，实现中华民族的伟大复兴。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分观察网站图片命名将图片文件保存到本地，并用文本说明命名规则。40开发者工具：审查元素准确定位主体容器20容器代码能正确输入或复制对应的容器代码20代码整理缩进正确、标签完整。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解企业网站不同区域的图片的名称。（2）能正确解读、分析企业网页框架大体结构。（3）访问华为官网，了解华为在行业的地位与荣耀，增加民族自豪感。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。【练习4】打开