HTML5+CSS3网页设计实战 教案 第6章 个人网页布局实战

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。26.1将网页截图进行切片该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 掌握切片工具的使用及快速复制切片的操作。（2） 明确必须输出或者不必输出的元素。（3） 对图标元素进行必要整合，形成精灵图。能力目标：（1） 具备使用Photoshop完成效果图切片并输出的能力。（2） 具备明辨所需的用户切片对象的能力。素养目标：（1） 养成精确进行切片的职业素养。（2） 巩固对用户切片规范英文命名的习惯。6.1将网页截图进行切片，6.2网站目录、文件整理切片工具的使用，明确所需的输出元素，整合图标成精灵图。通过讨论、教师引导等手段让学生对切片目标有所认识。整合图标成精灵图的过程中，保证图标的间距方便计算偏移量。通过课堂提问、小组分工等方式了解学生对重难点的掌握情况，及时调整教学策略。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习用知识导图串联上一章节的知识点。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入作为半学期的知识总结回顾，我们将完成一个简单的单页面个人网站，这个专题练习，可以看成是互联网上的一份个人简历表。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授6.1将网页截图进行切片将如图6-1所示的效果图进行切片，要求图片尽可能少的空白区域以减少图片文件大小；图片尺寸尽可能凑个整数或偶数以方便计算盒子的相关间距；生活照片类图片采用jpg格式，图标类图片尽可能采用支持透明底的png格式。图6-1单页面网站效果☆思政讲解：切图时要贯彻严谨细致的工作作风，精确到1个像素的设计要求，避免在设置css样式时增加工作负担。在学习和生活中，都要保持高度的责任心和敬业精神，对待每一项任务都要认真负责，不放过任何一个细节。这种作风的养成，不仅有助于提高工作效率和质量，还有助于培养我们的责任感和担当精神。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）在photoshop软件中打开素材图，在“视图”菜单中激活“标尺”选项。（2）观察图片，明确哪些内容是需要输出为图片格式。一句话表述“可以用简单的css样式实现的内容原则上就不要输出图片”。（3）建立第一根参考线，要求参考线尽可能贴近图像内容，减少图像文件大小。（4）使用框选工具，建立选区后，用上下光标键调整图标在选区中间。（5）使用切片工具给各个分割好的区域进行切片，并且命名切片。图标类命名一般为icon+序号或者icon+英文关键字。（6）选择“文件”-“输出为web所用格式”，检查一下输出的格式，点击“存储”。（7）文字内容可以采用自己手机app自带的“文字提取”功能来获取。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分参考线创建参考线位置精确，力求包裹元素的同时，尺寸较小。30切片工具使用切片准确到位，无较大的空白区。30文件输出文件名符合常用英文命名规矩。40总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1） 掌握切片工具的使用及快速复制切片的操作。（2） 明确必须输出或者不必输出的元素。（3） 对图标元素进行必要整合，形成精灵图。（4） 养成精确进行切片的职业素养。（5） 巩固对用户切片规范英文命名的习惯。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。26.3搭建项目并进行页面布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）<section>区块标签搭建主体框架（2）制作页面时要严格做到的标准要求。（3）完成第一、二<section>区块对应的代码和样式。能力目标：（1）具备一定的准职业人的项目开发能力。（2）具备用语义化角度思考所选用标签的思维定势。素养目标：（1）通过实际案例、项目实践等方式，让学生将理论知识与实际应用相结合，培养其实践能力和创新精神。搭建项目并进行页面布局——版块一、二的设计页面布局工作标准及要求。分步骤讲解案例中围绕重难点的容器布局知识，通过练习巩固重点知识。尽可能多角度、语义化地思考所选用的标签。通过教师引导学生思考各标签语义来明确最适合的标签。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习切片工作要注意的任务要求：（1）建立参考线，力求包裹目标对象的同时，面积较小。（2）切片贴附参考线，运用快捷键快速复制，光标键精确移动。（3）给切片命名，名称符合英文要求。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入接下来利用获取的素材来构建网页。站点根目录文件夹命名为“site”或者“website”，里面包含如图6-11所示的“css”、“images”两个文件夹，将切图得到的图片放入在images文件夹中。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授在hbuilder中“文件”-“打开目录”，选择site文件夹，然后新建一个index.html页面，开始搭建页面。整体观察一下，该页面属于单页面网页，意思是这个网站基本就是这一个网页，通常用于信息量较小、且经常不会更新的场景，比如个人求职类页面。这个页面从效果图来看，基本上属于文字类页面，且页头划分的不是很明确，有点类似长篇文章结构，所以我们将用<section>区块标签设计，当然也可以采用传统的<div>标签搭建主要框架。注意：在制作完整的一个页面时，要严格做到以下几点要求：用注释标注各大容器的结构和css样式范围。尽可能的简化HTML结构，不添加非必须的父容器。定义通用样式，可以省去许多代码量。写css选择器时，尽量在每个选择器前面加上统一的父级id或class，看起来会非常整齐，便于维护。每个容器应该填写height属性，以免出现坍塌。给大的容器添加颜色各异的底色，这会有助于及时判定异常所在。写完大的容器对应的HTML代码后，及时调试看结果，结果无误后在hbuilder中将这完成的部分代码进行折叠，将会省去许多滚屏时间。☆思政讲解：以上都可以视为岗位工作的规矩，这些规矩看上去约束性很强，但从维护、返工的角度考虑，这些规矩实际上是对从业人员的一种帮助、保护。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（1）搭建第一个版块<section>容器的HTML结构，代码如图6-12所示。（2）编写对应css样式代码，如图6-13所示。（3）搭建第二个版块<section>容器的HTML结构，代码如图6-14所示。（4）编写对应的CSS代码，如图6-15所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。20版块一容器结构合理，代码书写规范20Css样式属性值合理，效果接近效果图20版块二容器结构合理，代码书写规范20Css样式属性值合理，效果接近效果图20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）<section>区块标签搭建主体框架（2）制作页面时要严格做到的标准要求。（3）完成第一、二<section>区块对应的代码和样式。（4）具备一定的准职业人的项目开发能力，用语义化角度思考所选用标签。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。26.3搭建项目并进行页面布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）利用ul标签完成第三个版块的结构。（2）使用nth-of-type完成版块三的样式。（3）利用dl标签完成第四个版块的结构。（4）巩固后代选择器、伪类选择器的应用。能力目标：（1）具备使用快捷键快速完成相同结构的html、css代码的能力。素养目标：（1）鼓励学生将所学知识应用于创业实践中，培养其创业精神和创新能力。搭建项目并进行页面布局——版块三、四的设计ul和dl标签的使用。通过对比ul、dl标签的应用场景，加强对这两者标签的认识。伪类选择器的使用，background属性值的设定。通过创设场景引出重难点，让学生对列表项前面图标的技术实现思路有一定认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习第一个版块中，最重要的元素是哪个？从标签选择，属性定义等方面，应该如何体现出它的价值？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入接下来，完成第三、四版块的制作。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授第三个版块结构采用的标签，需要设置的主要css属性。第四个版块结构采用的标签，需要设置的主要css属性。强调hbuilder软件的快捷键操作。☆思政讲解：分区域布局设计，做到按部就班，条理井然。如同武学上的起手式，一招一式皆有章法，并非王八拳一样乱挥乱打。想要学好一门科目，学习的招式应该为“课前预习——认真听课——课堂练习——课后练习——学习反思”。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（5）搭建第三个版块<section>容器的HTML结构，代码如图6-16所示。（6）编写对应的CSS代码，如图6-17所示。（7）搭建第四个版块<section>容器的HTML结构，代码如图6-18所示。（8）编写对应的CSS代码，如图6-19所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10版块三Ul容器结构正确。20Background等样式值准确，与效果一致。30版块四dl容器结构正确。20样式属性值合理，预览效果一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1） 利用ul标签完成第三个版块的结构。（2） 使用nth-of-type完成版块三的样式。（3） 利用dl标签完成第四个版块的结构。（4） 巩固后代选择器、伪类选择器的应用。（5）使用快捷键快速完成相同结构的html、css代码。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。26.3搭建项目并进行页面布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）完成页脚区对应的布局和样式。能力目标：（1）具备独立完成页脚区域版面的代码编写能力。（2）具备样式冲突时，给选择器赋予权重的解决能力。素养目标：（1）样式冲突的解决，增强学生的自信心和毅力，培养其面对困难不退缩的精神。搭建项目并进行页面布局——页脚部分的设计页脚部分容器结构的分解。展示多个企业网站的页脚部分，解析容器结构。解决页脚区样式引发与版块四样式冲突的做法。通过相关案例的属性设置前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习ul标签与dl标签的区别。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入本次练习主要完成页脚部分的布局。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授分析页脚部分的容器关系。分析可以采用的标签。分析容器主要设置的样式属性。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施（9）制作页脚部分，HTML结构代码如图6-20所示。（10）编写对应的CSS代码，如图6-21所示。我们回滚屏幕到“版块四”的CSS样式中，修改代码如图6-22所示。针对箭头变大的情况，修改个别属性，代码如图6-23所示。（11）保存文件，预览检查箭头样式无误后，继续完成右侧部分对应CSS代码，如图6-24所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10页脚Html结构容器关系正确40页脚样式属性值合理，预览效果接近原图。50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）完成页脚区对应的布局和样式。（2）具备独立完成页脚区域版面的代码编写能力。（3）具备样式冲突时，给选择器赋予权重的解决能力。（4）样式冲突的解决，增强学生的自信心和毅力，培养其面对困难不退缩的精神。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。26.4代码整理该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）完成代码的查漏补缺工作。（2）将样式写入外部样式表文件。能力目标：（1）培养代码的纠错能力。素养目标：（1）通过代码整理步骤，加强严密的逻辑思维和精确的问题分析能力，培养学生严谨的学术态度。代码整理工作代码的查漏补缺，样式写入外部文件，进而修改图片路径。借团队协作意识，加深学生对代码整理重要性的认识。样式写入外部文件时修改图片路径。通过引导学生关注路径，让学生独立完成相关参数的修改；若图片路径修改工作量大，介绍软件中的查找替换功能。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习页脚部分常用的标签。个人网页与企业网页的页脚部分，有哪些差异？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入整个项目的进展步入尾声，剩下一些收尾工作，这些工作在代码整理阶段进行，主要完成一些微小瑕疵的纠正，同时也对样式进行外置。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授6.4代码整理接近布局的最终效果的时候，将辅助用的边框、背景色等属性进行删除，并再次预览页面效果。接下来要将内置样式表修改为外部样式表。最