Web前端开发项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 刘锡冬 任务04-10 向网页中插入图像和文本-网页中插入视频和音频

《网页设计与开发》课程教案-32-网页设计与开发教案授课专业：XXXX专业课程性质：专业基础课学时数：64学时目录课程基本信息 2任务01网站设计与开发起步 4子任务01-1网站设计与开发起步 4子任务01-2制作第一个网页 8任务02网页的蓝图——简单布局 12子任务02-1使用CSS装饰网页 12子任务02-2巧用选择器调兵遣将 16子任务02-3使用盒模型划分页面 20子任务02-4使用BFC隔离空间 26任务03网页的蓝图——复杂布局 30子任务03-1浮动布局两栏式页面 30子任务03-2DIV+CSS布局网上商城首页 34子任务03-3网格布局网站商城首页 38任务04向网页中插入图像和文本 44子任务04-1网站首页中图像的应用 44子任务04-2网站首页中文本的应用 49任务05向网站首页添加导航 54子任务05-1页面中超链接的使用 54子任务05-2一级导航菜单的设计开发 58子任务05-3二级弹出式菜单的定位 61任务06网页中列表的应用 65子任务06-1认识列表 65子任务06-2使用列表制作多级导航 70任务07使用弹性盒布局二级导航菜单 74任务08网页中表格元素的应用 78任务09网页中表单元素的应用 83任务10网页中插入视频和音频 88

任务04向网页中插入图像和文本子任务04-1网站首页中图像的应用教案名称子任务04-1网站首页中图像的应用计划学时2学时教学内容本子任务学习如何在网页中插入图像信息，同时按照效果图的要求对图像进行精确的样式设置。知识目标1.掌握img标记及其属性的用法2.掌握常见图像样式的使用能力目标1.能够向网页中添加图像2.能够按需调整图像的样式素质目标1.坚持总体国家安全观2.坚持精益求精的专业精神3.坚持实事求是的精神教学重点img标签及其属性教学难点熟练调整图像的样式信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务04-1网站首页中图像的应用并完成教学平台的课前自测题【课中】课程导入（10分钟）浏览网易新闻页面，图片新闻和文字新闻给我们的感受有何不同？浏览有中国、沙特、伊朗三国领导人合影的图文信息页面。讨论：通过中国促使沙特和伊朗恢复外交关系来分析中国民美国在国际中起的作用有什么不同？讨论：能用于装饰美化图像的特征有哪些？新闻图片允许ps吗？引出本门课程的任务：在网页中如何显示出图像，如何调整能显示出来中意的图像外观任务提出（5分钟）在商城首页中布局显示轮播图中的图片、在商品展示中显示商品图片。知识点讲解（20分钟）1.插入图像<img>标签用于在HTML页面中嵌入一个图像，严格地讲，是使用<img>标签在页面里创建了一块区域，用以容纳被引用的图像。基本格式：<imgsrc="图像URL"alt="替代文本"[其它可选属性]/><img/>标记是单标记，是行内元素，用于在当前行中插入一幅图像，图像前后的文本默认与图像底部对齐。src属性指定图像路径及文件名，常见的web端显示图像格式有jpg、gif或png格式。（1）绝对路径绝对路径一般是指带有盘符的路径或完整的网络地址。例如“D:\myweb\img\logo.gif”或者“/images/logo.gif”（2）相对路径相对路径不带有盘符，通常是以当前HTML网页文件为起点，通过层级关系描述目标图像的位置。分析讨论（10分钟）对文本设置的对齐属性对图片起作用吗？图片默认是什么类型的元素？可以调整改变吗？学生实践验证讨论结果知识点讲解（20分钟）2.CSS图像样式已知容器盒子大小为100px*100px，图片大小200px*200px讨论：如何使图片大小和盒子匹配？讨论：如何实现圆形图片？思考多个inline-block或者incline元素之间的间隙是因为代码中有空格，在页面上表现为一个字符大小的缝隙，将多个img标记写在一行就可以解决这个问题。多个inline-block或者incline元素之间的间隙是因为代码中有空格，在页面上表现为一个字符大小的缝隙，将多个img标记写在一行就可以解决这个问题。项目实践（30分钟）根据商城首页布局图，完成页面效果的开发小结（5分钟）每位同学使用云记事本总结本次课的主要内容，以及操作中出现的问题。【课后】平台提交项目实践作业预习微课视频任务04-2通过和学生一起观看中国促使沙特和伊朗恢复外交关系的图片新闻，引导学生关心世界局势，了解总体国家安全观，在国际变幻中不断提高政治判断力。网站上新闻图片的真实性是第一位的，网上的各种ps伪造乱改图片是侵权行为，要坚决抵制。事物是可以相互转换的抓住事物的本质不以规矩不成方圆，在现实生活中也是如此。培训学生主动发现问题，并分析问题解决问题的能力项目越复杂，越要细心、有耐心、有恒心，遇到错误及时调试不积硅步，无以致千里。知识不断积累才能量变达到质变。

子任务04-2网站首页中文本的应用教案名称子任务4-2网站首页中文本的应用计划学时2学时教学内容本子任务学习如何在网页中插入文本信息，同时按照效果图的要求对文本和段落进行精确的样式设置。知识目标1.掌握各类文本标记及其属性的用法2.掌握文本标记的样式能力目标1.能够向网页中添加文本2.能够熟练调整文本的样式素质目标1.学习并弘扬科学家精神2.培养学生的法治意识3.培养精益求精的工匠精神教学重点各类文本标签及其属性教学难点熟练调整文本的样式信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务04-2网站首页中文本的应用并完成教学平台的课前自测题【课中】课程导入（10分钟）向学生展示具有代表性的几个网页，指出页面文字搭配的优缺点；小组讨论：页面最适合的字体大小？最普遍的字体？页面字体需要自动调整吗？引出本次课程的任务：在页面中设置字体、大小、字体单位、颜色等。任务提出（5分钟）在商城首页添加各模块标题文字、各商品名称、规格和价格等文字信息。知识点讲解（30分钟）一、插入文本用合适语义的标签对文本数据进行结构化是网站架构的基本技能。常用的文本标记有标题标签<h1>~<h6>、段落标签<p>、换行标签<br>、水平线标签<hr>、强调文本标签<strong>、<em>等，不同浏览器对不同文本标签有自己默认的呈现样式。块级文本标记行内文本标记特殊字符讨论：你能列举哪些学习过的文本标记？块级文本——标题标记<h1>~<h6>2.块级文本——段落标记<p>3.行内文本标记<span>分析讨论（10分钟）以上效果如何实现？二、CSS文本和字体样式应用字体样式CSS文本和字体样式应用文本样式项目实践（30分钟）完成新华网评图文页面。小结（5分钟）每位同学使用云记事本总结本次课的主要内容。【课后】平台提交作业：把添加好文字的商城首页代码和运行效果图上交到平台：商城首页添加导航文字、各模块标题文字、各商品名称、规格和价格等文字信息。具备家国情怀，培养爱国意识，提升公民道德修养中华民族是一个历史优秀的伟大民族，有着璀璨的文化，中国古代历法、二十四节气、茶文化都是非常值得我们学习和传承的。网页上文字的排版需要认真准确、美观大方，培养学生精益求精的职业精神。科学家精神：胸怀祖国、服务人民的爱国精神，勇攀高峰、敢为人先的创新精神，追求真理、严谨治学的求实精神，淡泊名利、潜心研究的奉献精神，集智攻关、团结协作的协同精神，甘为人梯、奖掖后学的育人精神向科学家学习！向科学家致敬！言论自由有边界，网络表达须谨慎。

任务05向网站首页添加导航子任务05-1页面中超链接的使用教案名称子任务05-1页面中超链接的使用计划学时2学时教学内容本子任务主要学习网页中各种超链接的实现方法，学习<a>标记及其属性在网页中的基本应用。知识目标1.掌握<a>标记及其属性的用法2.掌握不同类型超链接的属性设置方法能力目标1.能够熟练为网页添加内部链接和外部链接2.能够设置锚点链接素质目标1.培养创新创业能力和团队意识2.培养辩证思维能力3.培养学生终身学习的意识教学重点不同类型超链接的用法教学难点页面内部的锚点链接信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务05-1页面中超链接的使用并完成教学平台的课前自测题【课中】课程导入Web的最初目的就是提供一种简单的方式来访问、阅读和浏览文本文档。网络上所有可用的网页都拥有一个独一无二的URL地址，要访问某个页面，只需在浏览器地址栏中键入该页面的地址即可。但是，用户很难每次都通过输入一个长URL来访问某个文档，超链接可以将任意文档与URL地址相关联，只要激活链接就可以跳转到目标文档。在互联网中超链接是各个网页之间的桥梁，一个网站内部的页面必须通过超链接连接起来。进入网站时用户首先看到的是首页，如果想从首页跳转到其子页面或者其他网站，就需要在首页相应的位置添加超链接。任务提出导航是页面中必不可少的一部分，也是整个网页的核心。不同网站的导航效果千变万化，请从小米网上商城网站中寻找不同类型的超链接方式，他们的区别和联系有哪些？讨论分享（10分钟）知识点讲解（20分钟）创建超链接的语法形式<ahref="跳转目标"target="目标窗口的弹出方式"title=”介绍信息”>文本或图像</a><a>标记是双标记，行内标记，用于定义超链接。分析讨论1.图片链接教学引导学生同步实践（共15分钟）2.邮件链接（现在比较少用，更多的被即时通讯方式取代）3.下载链接下载链接在点击后可以下载文件、图片、音视频等，实现方法是将href属性的值设为被下载资源的路径，然后再添加download属性。<ahref="./img/1.jpg"download="picture.jpg">下载</a><ahref="./img/1.jpg"download>下载</a>download属性是HTML5中<a>标签新增的属性。download属性值为“picture.jpg”，这表示图片下载后命名为“picture.jpg”，download属性没有值，表明下载后图片的文件名为资源文件的文件名，即“1.jpg”。在以前的版本中，<a>标记加上href属性其实就可以实现下载，但是对于.jpg、.pdf等浏览器可以直接打开的文件则直接在浏览器中打开预览，加上了download属性后，浏览器会强制进行文件下载，下载的文件名就是download所命名的文件名。4.空链接当不确定链接地址是哪里时，可以将href的属性值写成#，点击后会回到本网页的顶部，通常用于网站测试阶段。5.锚点链接如何创建锚标记呢？分两个步骤：1.使用<a>标签中的id属性创建锚标记，例如：<aid=“marker”>锚点</a>2.在href属性中使用该标记<ahref="#marker">热点文字</a>若要链接到其它文档的指定位置，定义了锚点之后，使用<ahref="文档URL#marker">热点文字</a>项目实践完成大学生创业计划书的网页版，分别实现外部链接、锚点链接、下载链接、邮件链接等链接形式。点击返回可以返回页首。小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：继续完成大学生创业计划书网页，平台提交。讲解超链接的多种不同分类，让学生体验学习要从不同角度对同一事物进行认识，找出其中的联系与区别，从而发现规律，以便更好的拓展与应用。生活中、学习中都要学会多方面看待问题，如果遇到困难和瓶颈，学会转换思路，可能问题就会迎刃而解。提升学生职业精神。体会互联网技术对人们生活发生的改变，激发学生不放弃学习、终身学习的激情。善于分享，乐于分享培养创新创业能力和团队意识

子任务05-2一级导航菜单的设计开发教案名称子任务05-2一级导航菜单的设计开发计划学时2学时教学内容本子任务主要学习伪类在超链接的应用以及<a>标记的display属性对于导航菜单排列方式的影响，在此基础上制作出网页上常见的水平导航菜单和垂直导航菜单。知识目标1.掌握伪类的用法2.掌握伪类在超链接中的应用3.掌握超链接标记的display属性能力目标1.能够熟练设置超链接不同状态的样式2.能够根据需要灵活设置行内超链接或者块级超链接3.能够熟练制作水平导航菜单和垂直导航菜单素质目标1.培养学生乐于分享、团结协作、共同进步的大格局2.提高审美情趣3.培养在实践中创新的能力教学重点伪类在超链接中的应用教学难点行内超链接以及块级超链接在导航菜单中的灵活应用信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务05-2一级导航菜单的设计开发并完成教学平台的课前自测题【课中】课程导入（5分钟）网页中导航栏对于用户体验来说是至关重要的，尤其是顶部导航栏和左侧导航栏，因为大多数用户都有从左到右，从上到下的浏览习惯。当我们进入一个新的网站，通常最先看到的就是顶部导航或者左侧导航。所以导航栏及其内部超链接的样式设计是网站开发者需要重点关注的地方。任务提出（10分钟）浏览小米网上商城官网，找到里面的主要导航部分，并分析用到的技术手段。分析讨论（10分钟）讨论：分别用到了哪些我们学习过的技术？查看源码后，是否印证了你的猜想？知识点讲解1.控制超链接外观——伪类（10分钟）伪类选择器——伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“:”构成。分析讨论伪类和类有什么区别？教师演示伪类的使用学生同步训练（共15分钟）项目实践（40分钟）完成以上导航菜单小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：学会分析源码是软件开发人员的必备技能。很多的开源软件源码都是公开的，便于全球的技术爱好者共享。培养学生乐于分享、团结协作、共同进步的大格局。提升项目制作中的美观度，培养学生审美情趣了解更多的互联网企业，激发学生科技兴国的学习激情。

子任务05-3二级弹出式菜单的定位教案名称子任务05-3二级弹出式菜单的定位计划学时4学时教学内容本子项目主要学习基于定位布局的二级弹出式菜单的制作方法。知识目标1.理解元素的定位2.掌握固定定位、绝对定位、相对定位的用法能力目标1.能够根据页面元素的位置决定使用哪种定位方式2.能够熟练应用固定定位、绝对定位和相对定位素质目标1.培养精益求精的工匠精神2.树立迎难而上的决心3.培养开发工程师代码简洁、注释清楚的职业素养教学重点绝对定位和相对定位的用法教学难点绝对定位的使用信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务05-3二级弹出式菜单的定位并完成教学平台的课前自测题【课中】课程导入（10分钟）如果网站需要展示的信息比较多，一级菜单中还需要进一步分类，那么就需要进一步设计二级菜单，实现鼠标在主导航上悬停，二级菜单就会弹出，鼠标移走，二级菜单隐藏的效果。可是二级菜单的位置往往由一级菜单决定，弹出后覆盖网页中原有的内容，而之前学过的普通流中的元素位置受前后元素位置影响，是不能随便移动的；浮动元素可以向左或向右移动，但是只能移到它的外边缘碰到包含框或另一个浮动框的边框为止，也不能满足要求。那么，如何定位二级菜单呢？任务提出（10分钟）浏览小米网上商城官网，找到里面的二级弹出式菜单部分，并观察其特点。讨论：1.二级菜单的位置由谁决定？2.二级菜单显示的时候影响页面中其他元素吗？知识点讲解（20分钟）1.定位属性position元素的定位属性主要包括定位方法、边偏移和层叠等级。position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{position:属性值;}position属性的常用值有四个，分别表示不同的定位模式，具体如下：static：自动定位（默认定位方式）relative：相对定位，相对于其原文档流的位置进行定位absolute：绝对定位，相对于其上一个已经定位的父元素进行定位fixed：固定定位，相对于浏览器窗口进行定位2.边偏移通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，具体解释如下：top：顶端偏移量，定义元素相对于其父元素上边线的距离bottom：底部偏移量，定义元素相对于其父元素下边线的距离left：左侧偏移量，定义元素相对于其父元素左边线的距离right：右侧偏移量，定义元素相对于其父元素右边线的距离项目演示分析讨论（15分钟）1.参照物？2.偏移后在文档流中是否占据位置？学生同步实践分析讨论（15分钟）1.参照物？2.偏移后在文档流中是否占据位置？学生同步实践头脑风暴二级菜单的参照物是谁？在文档流中是否占据位置？项目实践小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：完成小米网上商城首页的二级弹出式菜单培养学生发现问题、分析问题的能力，进一步提升职业能力不积硅步，无以致千里。树立迎难而上的决心和信心。培养web前端开发工程师代码简洁、注释清晰的职业素养

任务06网页中列表的应用子任务06-1认识列表教案名称子任务06-1认识列表计划学时2学时教学内容本子任务学习列表及其样式属性的用法，列表经常用于展示条目类信息、图文混排信息，以及导航菜单有秩序的图文信息。知识目标1.掌握无序列表、有序列表、定义列表的用法2.掌握列表样式的设置能力目标1.能够使用列表展示数据2.能够使用列表进行图文混排3.能够使用列表制作导航菜单素质目标1.注重爱国主义教育和传统文化教育2.培养学生归纳和总结的能力3.培养学生的社会主义法治意识教学重点列表的语法教学难点使用列表制作导航菜单信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务06-1认识列表并完成教学平台的课前自测题【课中】课程导入（5分钟）如果页面信息比较多，还是仅仅使用前面学过的标记的话代码的可读性不强，HTML给我们提供了列表标记，可以在大量数据分类呈现的时候使用，例如新闻版块或者复杂的导航菜单等。任务提出（10分钟）浏览学习强国网站，大量文本信息是如何展示的？尤其是以下图文混排页面如何使文字更加有秩序？更加美观？知识点讲解1.无序列表（10分钟）定义无序列表的基本语法格式如下：<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。学生同步实践（5分钟）2.有序列表（10分钟）有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列。定义有序列表的基本语法格式如下：<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>在上面的语法中，<ol></ol>标记用于定义有序列表，<li></li>为具体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。学生同步实践（5分钟）3.CSS控制列表样式教师引导学生观看微课自学学生同步实践分析讨论1.样式属性是否可以改变颜色？2.样式属性是否可以随意改变形状？课外学习：网页中的各类开源图标库项目实践讨论：你知道百度热搜的由来吗？小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：模拟完成以上网页，教学平台提交列表是一种有秩序的信息表现形式，在我们今天高度发达的文明社会中，讲文明，懂礼貌，识大局，懂规矩，遵守社会公共秩序。通过浏览学习强国网站，培养学生爱党爱国的情操，树立正确的价值观。祖国大好河山在心中优秀的文学作品希望同学们课后多阅读，远离网络垃圾文学培养学生自主探索的能力

子任务06-2使用列表制作多级导航教案名称子任务06-2使用列表制作多级导航计划学时2学时教学内容本子任务主要学习如何通过列表嵌套实现多级导航菜单，综合应用了定位、列表、超链接、文本和图像等多个知识点和技能点。知识目标1.掌握列表的嵌套及其样式能力目标1.学会使用列表制作多级导航菜单2.能够熟练设置多级列表的样式素质目标1.培养学生主动分析问题、解决问题的能力2.培养精益求精的工匠精神3.培养学生的创新思维教学重点列表的嵌套及其样式设置教学难点定位、列表、超链接等多个元素的综合应用信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务06-2使用列表制作多级导航并完成教学平台的课前自测题【课中】课程导入（5分钟）我们在进行网站首页的设计时，经常会苦于内容太多，空间太小，特别是对于商城类网站，既要能够尽可能多地展示内容，还要清晰简洁、层次分明，便于引导用户访问，这就需要对原有的导航菜单进行扩充，使之能够容纳更多的信息，多级导航菜单就应运而生了。任务提出（10分钟）浏览小米网上商城的首页，观察二级导航菜单效果。思考：我们已经能够使用绝对定位控制二级菜单的出现位置，但是更细节的部分，例如处理多级菜单内部复杂的层级关系，如何实现？分析讨论（10分钟）通过列表+超链接+CSS组合应用，我们可以实现二级导航菜单，如果想加子菜单，继续嵌套ul/ol标记及子标记就可以了。知识点讲解1.水平二级导航菜单制作（40分钟）首先，在body中按照菜单项的层级添加列表元素。然后，进行CSS样式的设置。（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色；（5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。教师引导，学生实践2.竖直伸缩型二级菜单制作（20分钟）在上一个案例的基础上学生自主完成。教师引导答疑项目实践使用列表完成网上商城首页左侧导航菜单的二级导航效果，正常情况下导航菜单背景颜色为#455159，鼠标放上背景色为#ff6700，二级导航菜单可在图示文本的基础上加上图片。小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：将小米官网的二级导航菜单完成后提交。从不同角度看待同一个事物，会得到不同的结论。在html中列表标记经常会用于导航。培养学生主动分析问题、解决问题的能力只有坚持学习、持续学习,不断攀登知识高峰,才能淬炼成钢,书写绚烂无悔的青春在中国，雷军已经成为了一个传奇人物，在被问及公司使命时，雷军援引日本小说家田中芳树的作品《银河英雄传说》中的一句话作答——“我们的征途是星辰大海。”作为全球手机市场中一个不被看好的民族品牌，小米的定位时以公道的价格提供优质的国产商品。准确的定位成就了雷军以及小米的辉煌。

任务07使用弹性盒布局二级导航菜单教案名称子项目07-1使用弹性盒布局二级导航菜单计划学时4学时教学内容1.弹性盒布局的概念2.弹性容器的常用属性设置3.使用弹性盒子进行页面布局并进行样式设置4.根据需要选择合适的页面布局方式知识目标1.掌握弹性盒布局的概念2.掌握弹性容器的常用属性设置能力目标1.学会使用弹性盒子进行页面布局并进行样式设置2.能够根据需要选择合适的页面布局方式素质目标1.提高自主探究能力2.培养学生创新意识3.培养坚持不懈的职业精神教学重点使用弹性盒子进行页面布局并进行样式设置教学难点根据需要选择合适的页面布局方式信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】1.观看微课视频——子任务07使用弹性盒布局二级导航2.浏览常见网站的页面布局（学校官网、百度、淘宝等），分析并思考用已经学习的知识能否实现？【课中】课程导入什么是CSS3弹性盒子？有什么功能？（10分钟）CSS弹性盒子布局是CSS3的模块之一，定义了一种针对用户界面设计而优化的CSS盒子模型。在弹性布局模型中，弹性容器的子元素可以在行或者列上排列，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。例如上个子任务中左侧导航二级子菜单的个数不固定，就可以将子菜单设置成“可伸缩”的弹性盒子，从而动态改变子菜单的宽度大小。知识点讲解一、设置CSS3弹性盒子（15分钟）同学根据微课视频学习：弹性盒子及设置父级盒子属性方法1.弹性盒子由弹性容器（Flexcontainer）和弹性子元素（Flexitem）组成。2.设置父级盒子的display属性的值为flex或inline-flex可将其定义为弹性容器，弹性容器内包含一个或多个弹性子元素。弹性子元素默认在弹性盒子内显示为一行，无论子元素的宽度多少，都在一行内显示，默认从左到右排列。二、案例练习（20分钟）运行结果：三、案例总结（5分钟）以上代码中，弹性容器设置了固定的宽度和高度，其中宽度为450px，内含的三个弹性子元素，每个宽度200px，外加左右方向的margin，在普通盒子中是没法放到一行的，但是在弹性盒子中，子元素可收缩尺寸以避免父元素溢出。自主学习（20分钟）小组讨论：通过讨论了解常用属性的实践用法CSS弹性盒子布局的CSS分两种。一种是应用于父容器的的CSS样式，用于设定父容器本身或者全部子元素的表现形式；另一种则是应用在子元素上，用于设置单个子元素的表现行为。应用于父容器的CSS样式如下表：分析讨论（20分钟）小组讨论：小组协作、讨论学习常用属性的定义及其在实践中的应用1.flex-direction属性用于指定弹性容器中子元素排列方式。2.flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。4.align-items属性定义设置弹性盒子元素在垂直方向上的对齐方式。5.justify-content属性用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式。项目实践（40分钟）完成二级导航，通过弹性盒布局实现弹性容器的宽度随着子元素的个数调整。小结（5分钟）每位同学使用云记事本总结下节课的主要内容，并分享。【课后】平台提交作业：完成小米网上商城的二级导航并在平台提交互联网技术的发展非常迅速，培养学生自主学习的意识。整体和部分的关系。整体决定部分，居主导地位。联系我们个人和集体的关系，个人利益要服从集体利益。培养学生自主学习的意识和能力培养学生自主学习的意识和能力

任务08网页中表格元素的应用教案名称任务08应用表格元素计划学时4学时教学内容1.表格的基本用法和可选属性2.控制表格的各种样式3.使用合适的表格进行页面数据展示4.使用表格进行页面局部布局知识目标1.掌握表格的基本用法和可选属性2.掌握控制表格的各种样式能力目标1.学会使用合适的表格进行页面数据展示2.能够根据需要使用表格进行页面局部布局素质目标1.培养精益求精的工匠精神2.培养学生的创造力、归纳和演绎、解决问题能力3.培养学生辩证思维的能力教学重点使用表格进行页面数据展示教学难点表格局部布局信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务08网页中表格的应用并完成教学平台的课前自测题【课中】课程导入（10分钟）在HTML中用于组织展示数据的标记除了前面学过的列表之外，还有表格。表格经常用于对数据或信息进行统计和展示，在一些网站中对于行列比较清晰的部分还可以使用表格进行页面元素的布局排版。讨论：浏览网页，寻找网页中的表格作为传统HTML元素，随着网页模块化发展，表格在网页中的应用越来越少了，但是表格也有自己的优势，我们在学习中好好体会吧。任务提出（10分钟）日常生活中，为了清晰地表示数据或信息，通常使用表格对数据或信息进行统计和展示，同样在制作网页时，为了使网页中的元素有条理地显示，也需要使用表格对页面信息进行规划和展示。讨论：该板块又什么特点？与word中表格有什么共同点？知识点讲解（20分钟）html中的表格由<table>标签来定义。创建表格的基本语法格式如下：<table><tr> <td>单元格内容</td> ...</tr>...</table><table></table>：用于定义一个表格。<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>中包含几对<tr></tr>，就表示该表格有几行。<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。分析讨论（10分钟）该类有单元格合并的表格如何制作？colspan：设置单元格横跨的列数（用于合并水平方向的单元格），常用属性值为正整数。rowspan：设置单元格竖跨的行数（用于合并竖直方向的单元格），常用属性值为正整数。知识点讲解（15分钟）CSS控制表格样式——细线表格制作项目实践（20分钟）天气预报页面要点分析：使用rowspan、colspan属性规定了单元格如何合并°是可以替代摄氏度（°）符号的替代代码（详细见学习任务4-2）单元格中的图片直接使用行内标记<img>引入，图片的大小可以通过CSS样式修改。由于表格采用了斑马底纹样式，所以需要给部分<tr></tr>定义类，设置特殊的背景色。项目实践（20分钟）在前面已经完成的页面布局页面中找到快捷工具所在的盒子容器，完成快捷工具部分页面内容。每个单元格内部设置超链接，鼠标悬浮时变为手型，该区域文字的颜色变为纯白#fff。小结（5分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：学校招聘网页随着技术的更替，旧的被淘汰，新的技术又出现。就像最近大火的“ChatGPT”语言会取代程序员。我们如何才能提升自身价值不给机器淘汰？表格是一个整体表格与行、单元格的关系也是整体与部分的关系培养Web前端开发工程师具备的必要的审美能力。整体和局部的关系，局部服从整体，局部不能脱离整体。方法总比困难多，在困难面前转变思路往往会有更好的发现。提升个人竞争力和综合能力，在人工智能时代来临的时候，人才的思维能力永远是无法被取代的

任务09网页中表单元素的应用教案名称任务09网页中表单元素的应用计划学时4学时教学内容1.掌握表单的基本用法以及各种表单控件2.掌握HTML5自带表单验证功能3.熟悉表单样式的应用4.能够熟练制作表单并灵活使用各种表单控件知识目标1.掌握表单的基本用法以及各种表单控件2.掌握HTML5自带表单验证功能3.掌握表单样式的应用能力目标1.能够熟练制作表单2.能够熟练使用各种表单控件3.能够根据需要对表单进行样式设计素质目标1.培养用户思维2.培养学生精益求精的职业精神3.规范行业标准，提升服务意识教学重点表单的基本用法以及各种表单控件的使用教学难点熟练制作表单并灵活使用各种表单控件信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观察网站的搜索引擎页面、用户登录页面、用户注册页面等，思考：1.表单由哪些部分组成？2.当用户填写了相应信息后，服务器如何获取到这些信息？【课中】课程导入演示网易邮箱注册页面的呈现形式，分析用到的技术。（10分钟）小组讨论：从网易邮箱注册页面的呈现形式分析用到的技术，表单的应用。任务提出网上商城用户注册页面的制作需要使用网页中的表单元素，在设计制作页面之前需要先熟悉表单的基本用法以及各种表单控件，之后便可以根据需要对表单进行样式设计并完成制作。（5分钟）知识点讲解一、表单的概念及组成（10分钟）同学分享课前通过查阅资料获取的信息：表单的概念及组成部分表单在网页中主要负责数据采集功能。例如，搜索引擎页面、用户登录页面、用户注册页面等使用的就是表单。一个完整的表单通常由表单域、表单控件（也称为表单元素）、提示信息三部分构成。二、创建表单（20分钟）语法：action属性：表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性：用于设置表单数据的提交方式，其取值为get或属性：用于指定表单的名称，以区分同一个页面中的多个表单，为在脚本中引用表单提供方便。三、表单控件（20分钟）1、input控件及其属性语法格式：<inputtype="控件类型"/>type属性是<input>标记最基本的属性，其取值有多种，用于指定不同的控件类型。2、其他表单控件input元素是一个庞大和复杂的元素，但它并不是唯一的表单控件。除此之外，还有button、select、option、optgroup、textarea、fieldset、legend等传统表单控件和datalist、progress、meter、output、keygen等新增表单控件。四、HTML5自带表单验证（15分钟）在使用表单时为了减轻后台数据传送压力，提高数据传送的质量和效率，需要对表单中的输入数据被送往服务器前对其进行验证。除了复杂的验证需要使用js脚本完成，html5还新增了一些自带的表单验证功能，例如验证输入数据是否为空，输入邮箱格式是否正确等。案例实践小组协作：根据网页中表单创建的方法及表单控件的灵活使用，小组协作完成以下案例。1、input控件及其属性（15分钟）2、焦点转移（10分钟）3、注册登录表单的设计（20分钟）项目实践1、完成网上商城首页搜索框部分，搜索框获取焦点的时候边框改变颜色（#FF6600），同时按钮也有颜色变化。（