HTML5+CSS3网页设计实战 教案 3.4 九宫格布局练习

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 九宫格布局涉及的ul标签，li标签。（2） 利用快捷键及图片文件名序列规则，快速完成编码任务。能力目标：（1） 具备完成N行N列的布局能力。（2） 培养多角度思考九宫格效果布局的思维能力。素养目标：（1） 多角度思路，鼓励学生尝试新方法、新技术，培养其在编程领域的创新精神和创造力。（2） 在编程过程中，引导学生反思自己的学习过程和成果，总结经验教训，不断提升自己。九宫格布局练习li元素的浮动属性设置，li元素的尺寸定义。通过属性值的不同设置的对比，让学生掌握对应知识。采用ul背景图、li元素边框设置思路完成九宫格效果。采用不同思路下的操作使得学生掌握相关知识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习当容器存在多层嵌套时，我们应该先规划最大容器的尺寸，最后规划最小容器尺寸？或者从最小容器开始规划，最后确定最大容器的尺寸？联想集装箱。集装箱尺寸国际统一尺寸，而内部的盒子可以不断细分、嵌套。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入说起九宫格，大家第一时间会联想到微信朋友圈的九宫格。将九张图片分成3行3列，每张图片之间有一定间隙。有时，我们还可以将一张图片，切成9等份来构成九宫格效果。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授九宫格：内部9张图片，可以视为同一性质的元素，不过是排列有顺序，分成多行多列而已。九宫格布局中，水平、垂直方向的线条实际上就是我们常说的黄金分割线。比如在日常手机拍照过程中，怎么利用黄金分割构图法？人脸应该在哪些黄金分割点上？人物躯干在哪些黄金分割线上？【练习4】完成如图3-57所示的九宫格布局。思路一：将这一张大图切成9个小图来布局。思路二：将大图作为整个大容器的背景图，然后利用9个空白内容的子容器的边框来构建中间网格。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施思路一操作步骤：将这一张大图切成9个小图来布局。（1）使用ul标签作为大容器，li标签分别装入9张图片。（2）然后书写对应CSS代码，如图3-59所示。从外部看到每张小图的尺寸为213*213px，图之间的间距预估20px（也就是每张图片的外边距为10px），每张图占用233px的宽高，三张图加起来为699px，外部的大容器的内容宽度（width）必须不小于这个数值。（3）最后调整一下细节。思路二操作步骤：将大图作为整个大容器的背景图，然后利用9个空白内容的子容器的边框来构建中间网格。（1）依然使用ul标签搭建主体框架。（2）编写对应CSS大体代码（3）解决红色边框容器内的背景图问题（4）发现底图的面积不足以覆盖红色的容器，图片减去间隙后，尺寸有所变化，在资源管理器中，右键查看该图属性对话框的“详细信息”页，重新调整ul容器的宽高，或者如果影响不大的情况下，我们也可以将背景图强制修改尺寸。（5）接下来将ul内部9个li盒子设计成空内容，只有10px边框的效果。（6）最后自行去掉红色边框、标题文字对齐。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10思路一做法：html结构容器嵌套关系正确，书写规范。25思路一做法：css样式容器margin、padding属性设置正确，效果一致。20思路二做法：html结构容器嵌套关系正确，书写规范。25思路二做法：css样式容器width、height、border属性设置正确，效果一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）九宫格布局涉及的ul标签，li标签。（2）利用快捷键及图片文