Web前端开发项目教程（HTML5 CSS3 JavaScript）（微课版）-教案全套 刘锡冬 任务01-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

课程基本信息课程名称网页设计与开发授课专业云计算技术与应用专业群内所有专业课程类型专业基础课程开课学期大学一年级第一学期授课学时64学时课程定位《网页设计与开发》是云计算技术与应用专业群“平台+模块”人才培养体系中的平台课程，是专业群内软件技术专业、大数据技术与应用专业、云计算技术与应用、物联网应用技术、人工智能技术服务专业等所有专业的专业基础课。本课程立足云计算技术与应用专业群内各专业人才培养方案，面向“Web前端开发工程师”的初级职业岗位需求，注重培养学生的工匠精神和团队合作意识，围绕着一个实际项目——网上商城的设计与开发的需求来选择课程内容，真实模拟企业中一个网站开发的全过程。针对职业能力的培养要求以及实际项目的工作过程，课程设计了10个教学任务，每个教学任务又包含一个或多个子任务，共4学分，64个课时。先修课程无后续课程JavaScript程序设计、Javaweb程序设计、微信小程序开发等（不同专业有所差异）课程内容《网页设计与开发》课程是云计算技术与应用专业群学生的专业基础课程，内容涵盖HTML5常用标签、CSS样式表、盒子模型、DIV+CSS布局、网格布局、超链接、列表、表格、表单等知识点。主要分为以下几个项目，根据不同专业生源情况部分项目可选：项目1认识网站和网页项目2网页的蓝图——简单布局项目3网页的蓝图——复杂布局项目4向网页中插入图像和文本项目5向网站首页添加导航项目6网页中列表的应用项目7使用弹性盒布局二级导航菜单（可选）项目8网页中表格元素的应用 项目9网页中表单元素的应用项目10网页中插入视频和音频选用教材教材：《Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）》，刘锡冬王爱华薛现伟主编，人民邮电出版社该教材为云计算产业技术与应用专业群“平台+模块”项目化教学改革的成果之一。教材配有教辅平台，平台提供课前预习、课中互动、课后作业等功能，微课视频、题库等资源丰富，适合开展线上+线下混合式教学。主要参考资源：W3school在线教程/资源平台职教云平台：/cms/courseDetails/index.htm?classId=30acdee8067b4045b352984abf1fcd70授课方式线上+线下混合式教学

任务01网站设计与开发起步子任务01-1网站设计与开发起步教案名称子任务1-1网站设计与开发起步计划学时2学时教学内容本子任务主要学习网站和网页的基本概念和工作原理、各种常见主流浏览器以及Chrome浏览器下的开发者工具的使用。并且深入理解网页标准化的意义，将Web标准作为我们网站开发人员共同遵循的准则，来指导我们后续的开发工作。知识目标1.了解网站设计开发的基本概念；2.理解Web标准；能力目标1.能够分析、规划网站结构；2.能够在Chrome浏览器下查看网站结构；素质目标1.具有互联网从业人员的法治思维；2.树立科技兴国的志向；3.树立标准意识，遵守项目开发规范；4.具有网站开发的软件工程观。教学重点规划网站的目录结构教学难点网站开发设计的基本概念信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】查找资料了解基本概念：网站、网页、浏览器完成教学平台问卷：1.是否学习过HTML?如果学习过了解多少？2.是否能够熟练操作电脑软件？【课中】课程简介1.课程的地位和作用：专业群平台课，对接Web前端开发工程师岗位需求2.课程的主要学习内容：HTML5+CSS33.课程的教学方式：项目化教学4.项目的考核方式：过程化考核（平时小项目+期末综合项目）课程导入网页展示与认识（浏览百度官网、门户网站、小米网上商城、Apple官网、学校官网等网站）（10分钟）小组讨论：从网站布局结构、色彩搭配、导航栏的设计、用户体验等对网站主页进行分析讨论引出本门课程的任务：完成网上商城网站首页及内部主要页面任务提出在学习网页开发技术之前需要了解网站在互联网上的工作原理以及网站开发人员必须要遵循的万维网WWW标准，认识各种常用浏览器，学会使用浏览器的开发者工具查看网站的结构。（5分钟）知识点讲解一、相关概念（15分钟）同学分享课前查阅资料获取的信息：网站、网页、浏览器的概念网页：网页是构成网站的基本元素，是承载各种网站应用的平台，它可以存放在世界上任何一台计算机中，是万维网（WorldWideWeb，全球广域网，简称web）中的一个页面。网站是域名、空间服务器、域名解析、网站程序、数据库等的集合，涉及到一系列软硬件技术，近年来随着云计算技术的迅猛发展，租用云服务器搭建虚拟主机使得网站建设更加普及和大众化。网页要通过网页浏览器来阅读。二、网页的标准化（15分钟）小组讨论：手机数据接口有标准、视频格式有标准，网页需不需要标准呢？全球的网页设计人员和浏览器制造商之间有一个共同的web标准，遵守这个标准的网页，在所有遵守W3C（万维网联盟）标准的浏览器上都可以获得一致的表现可以完全不必担心浏览器兼容问题。Web标准下的网页设计（结构、表现、行为的分离）项目实践在Chrome浏览器下，在地址栏中输入http：//，打开网站首页，同时按F12，进入调试状态，点击source菜单，查看该网站的目录结构。（20分钟）项目拓展查看百度、淘宝等大型网站的网站目录结构，并思考，网站部署在哪里？是不是一个网站只能部署在一台服务器上？（20分钟）小结每位同学使用云记事本总结本次课的主要内容，并分享。【课后】完成教学平台作业：在网上搜索“中华鲁商”、“鲁商博物馆”等图文信息，下载到本地后分类保存，并截图提交至教学平台。通过浏览不同类型的网站，使学生体会互联网时代媒体传播的特点，建立网站开发从业人员的法治思维。互联网起源于1969年的美国，改变了人类的生活方式。引导学生正确上网，立科技兴国的志向，发挥网络价值。我们从一开始就要树立标准意识，从细微处做起，遵守项目开发规范。“不积硅步，无以至千里”养成良好的学习习惯是迈向成功的第一步。

子任务01-2制作第一个网页教案名称子任务01-2制作第一个网页计划学时4学时教学内容本子任务通过完成一个“鲁商文化博物馆”的网页来理解并掌握HTML5文档的基本语法结构，熟悉记事本及HbuilderX编辑器的使用，并且通过实践解决简单的技术问题。知识目标1.掌握html5文档的基本格式2.理解web标准能力目标1.学会使用HBuilderX编辑简单网页2.能够使用HBuilderX发布网页素质目标1.坚持文化自信，树立民族自信心2.树立标准意识，遵守项目开发规范3.弘扬鲁商文化“仁智合一”的核心价值观教学重点HTML5文档的基本模板教学难点HTML5中的常见标签及属性应用信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】同学们已经在网上搜索了“中华鲁商”、“鲁商博物馆”等图文素材，了解了什么是鲁商文化。【课中】课程导入（10分钟）教师通过教学平台的作业模块展示同学下载的“鲁商文化博物馆”主题的图文素材，并点评。同学分享什么是鲁商文化。任务提出（5分钟）本次课我们分别尝试使用记事本和Hbuilder网页编辑器，在这两种编辑环境下书写并理解HTML5文档的基本格式，使用简单标记将我们搜集到的图文素材放入网页中，并最终在浏览器中浏览生成的网页，完成我们的第一个网页！知识点讲解（30分钟）一、选择合适的HTML编辑器记事本：初学者学习写HTML文件时经常会用到的一个工具，因为网页本身就是超链接文本文件，在记事本中键入HTML代码后，在“文件”菜单选择“另存为”命令，将文档保存为.htm或者.html扩展名的文件，使用浏览器打开就可以浏览网页了。HBuilderX：是DCloud推出的一款支持HTML5的Web开发集成开发环境，官方自述为“轻如编辑器、强如IDE的合体版本”，体积小、灵活，而且由我国的前端开发人员编写，使用方便。二、在HbuilderX中创建网页分析讨论（15分钟）1.<!DOCTYPE>什么意思？2.HTML文档的结构也分为head和body，是否可以嵌套？3.文本和图片放在哪一部分中？4.绘制出HTML5模板的DOM树结构（即标签的层次结构）知识点讲解（30分钟）HTML文档头部标记<head></head>通常<title></title>、<meta/>、<link/>等标记可以放在head部分。1.<title></title>设置页面标题2.<meta/>用于定义页面中的信息，例如文档的关键字、作者及描述等，在头部可以包含任意数量的<meta/>标记3.<link/>引用外部文件HTML文档主体标记<body></body>HTML文档主体标记<body></body>用于定义页面所要显示的内容，除使用脚本添加的特效之外，浏览器页面所显示的所有文本、图像、音频和视频等元素都必须位于<body></body>标记之间。一个HTML文档最多使用一对<body></body>标记，这对标记必须在<head></head>标记之后。在body中常用的标记有<h1>~<h6>、<p>、<hr>、<br>、<img>、<div>等。引导答疑（20分钟）项目实践（30分钟）参照以下代码，在HBuilder中测试title、h2、p等标签的作用，尝试完成自己的第一个网页——鲁商文化文字简介。引导答疑（20分钟）根据实践中出现地问题有针对性地解决。小结（10分钟）每位同学使用云记事本总结本次课的主要内容，并分享。【课后】平台提交作业：完成鲁商文化主题网页后，将网页截图以及代码上传至云平台。尽可能尝试你会使用的所有标签。鲁商文化作为中国历史上最早形成的中华文化体系，是山东独特的商业文化,深受儒家文化的影响，始终秉承“仁智合一”的价值观，有着独特的价值体系。“工欲善其事，必先利其器”效率高的工具会起到事半功倍的效果。HBuilder是由国内创业公司DCloud（数字天堂）推出的一款Web集成开发环境，面向中国用户永久免费，丝毫不逊色于国外的众多前端编辑器。树立民族自信心。HTML5标准规范由W3C组织在2014年创建。而创建的成员就包括我们国家的华为、腾讯等十几个公司。这说明我们国家的科技实力正越来越强。提升同学们民族自豪感。“滴水可以穿石”涓滴之水终可以磨损大石，不是由于它力量强大，而是由于昼夜不舍的滴坠。精益求精，提高审美情趣。

任务02网页的蓝图——简单布局子任务02-1使用CSS装饰网页教案名称子任务02-1使用CSS装饰网页计划学时4学时教学内容本子任务主要学习三种样式表的用法。绝大多数页面元素都有自己的样式属性，这些样式属性集合到一起就构成了样式表。知识目标1.理解DIV+CSS网页布局2.掌握三种CSS样式表能力目标1.学会使用DIV+CSS进行简单的页面布局2.学会根据需要使用三种CSS样式表素质目标1.了解并应用“分而治之”的思想2.具备精益求精的工匠精神3.弘扬社会主义核心价值观和正能量教学重点三种CSS样式表教学难点DIV+CSS网页布局信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法案例引申法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务02-1：使用CSS装饰网页并完成教学平台的课前自测题【课中】课程导入（5分钟）做前端页面首先要树立一种“模块化”思维，就像给报纸杂志排版一样，确定好各板块的大小和位置，再考虑内部细节。网页开发要从大局着手，先学习如何摆放这些板块。任务提出（10分钟）我们想将代表不同版块的大小不一的板块呈现在网页中，那么如何才能控制这些页面元素的外观呢？DIV+CSS网页布局知识点学习CSS样式表（共计100分钟）CSS（CascadingStyleSheets，可译为“层叠样式表”或“级联样式表”）是一组样式设置规则，用于控制Web页面的外观。样式表实现内容与样式的分离，方便团队开发1.CSS样式表简介—样式规则2.样式表分类根据样式代码的位置，样式表有三种使用方法：内嵌样式表外部样式表行内样式表2.1内嵌样式表使用情境:如果开发人员只定义当前网页的样式，可使用内嵌样式表。内嵌的样式表“嵌”在网页的<head></head>标记符内。嵌入的样式表中的样式只能在当前网页上使用。使用格式：教学示例（教师演示讲解）学生同步实践（10分钟）【头脑风暴】在html5中type属性不再是必需的吗？<link>标签中的type="text/css"可以省略吗？2.2外部样式表使用情境：当要在站点多个网页上一致地应用相同样式时，可使用外部样式表。在外部样式表中定义样式，并链接到所有网页，便能确保所有网页外观的一致性。如果需要更新样式，只需在外部样式表中修改一次，而该更新会反映到所有与该样式表相链接的网页上。使用格式：教学示例（教师演示讲解）学生同步实践（15分钟）【头脑风暴】如果希望一个网站中多个页面的样式保持一致，如何解决？2.3内联样式表（行内样式）使用情境：如果某个页面某个元素有特殊样式，可以直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。使用格式：教学示例（教师演示讲解）学生同步实践（10分钟）分析讨论（10分钟）内嵌、内联和外部样式有什么优势和劣势？如何平衡内嵌和外部样式？项目实践（20分钟）分别使用三种样式表，自行设计古诗鉴赏网页，请尝试使用所有你会用的标记以及样式。古诗——将进酒作者：李白君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。总结分享（10分钟）每位同学使用云记事本总结本次课的主要内容。自由分享自己操作过程中遇到的问题和解决办法，并分享实验心得。【课后】平台提交作业：将上次课完成的“鲁商文化”主题网页使用CSS美化，并提交到教学平台。软件工程中常使用这种“分而治之”的思想，即无论多么复杂的系统，都可以解构成小的模块。同样，网站开发时，无论网页有多么复杂的需求和功能，我们都可以将其拆分解构成容易实现的最小单元。平时我们也可以使用“分而治之”的思想来管理我们的生活和工作。代码书写要遵循规范，小的拼写错误可能会导致页面崩溃，要养成严谨细致的工匠精神。内容是事物的存在基础，而形式则是它的表现方式。同一种内容在不同条件下可以采取不同的形式。内容和形式的辩证关系对我们的实践活动具有重要的方法论意义。古诗词是中华文化的瑰宝，苏轼的这首词气势豪放，随口诵读即可感受到古代文人境界之宏大。

子任务02-2巧用选择器调兵遣将教案名称子任务2-2巧用选择器调兵遣将计划学时4学时教学内容本子任务主要学习选择器的用法，从最基本的元素选择器、class/id选择器，到交、并、子代、后代，以及其它更丰富的选择器，定位页面上的任意元素变得愈发简单。知识目标1.理解选择器2.掌握三种基本选择器的用法3.掌握扩展选择器的用法能力目标1.学会使用三种基本选择器2.灵活运用扩展选择器快速命中页面元素素质目标1.增强法律意识，树立法治观念2.培养精益求精，科学严谨的工匠精神3.培养自主建构知识体系的能力教学重点基本选择器和扩展选择器的应用教学难点选择器的优先级信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务02-2：巧用选择器调兵遣将并完成教学平台的课前自测题【课中】课程导入（10分钟）思考：页面越复杂，网页代码中HTML标记就越多，而且同一个标记也会被多次使用，那么在CSS样式表中如何准确地找到其中某一个标记，并设置其样式呢？引入：在样式规则中，选择器的功能就是用来选取需设置样式的元素的。任务提出（10分钟）万维网联盟（WorldWideWebConsortium，W3C）为Web开发人员提供了各种各样的选择器，从最基本的元素选择器、class/id选择器，到交、并、子代、后代，以及其它更丰富的选择器，定位页面上的任意元素变得愈发简单。知识点讲练（共45分钟）1.基本选择器的用法——标记名选择器标记名选择器也称为类型选择器，就是用HTML的标记名称作为选择器，为页面中某一类标记指定统一的CSS样式。用标记名选择器定义的样式表对页面中该类型的所有标记都有效。教学示例（教师演示讲解）学生同步实践（共15分钟）【头脑风暴】如果希望多个标签都使用同样样式，怎么办？2.基本选择器的用法——class类选择器使用类选择符可以为多个相同类型或不同类型的标记指定相同的样式不同类型的标记也可以使用同一个类名，使用类选择器可以为多个不同类型的标记指定相同的样式。class类选择器必须以“.”开头class类选择器名称区分大小写，若是定义样式时使用选择器.First，引用样式时使用class="first"，则样式引用无效。教学示例（教师演示讲解）学生同步实践（共15分钟）【头脑风暴】如果某个标记的各部分内容样式并不相同，怎么办？基本选择器的用法——ID选择器大部分HTML标记都可使用标准属性id为该标记指定一个唯一标识。id选择器必须以“#”开头，“#”与id属性值之间不能有空格。同一页面中每个标记的id属性值都必须唯一，一个id值只对应一个标记，方便脚本中对象的获取。id选择器比类选择器具有更高的优先级，即当id选择器与类选择器在样式定义上发生冲突时，优先使用id选择器定义的样式。教学示例（教师演示讲解）学生同步实践（共15分钟）【头脑风暴】Id选择器重复使用了会如何？分析讨论（10分钟）在实际项目中，页面元素数量多，层次复杂，当基本选择器不能够完全符合需求时，怎么办？知识点自主学习（20分钟）扩展选择器观看微课视频扩展选择器部分，并思考以下问题：1.后代选择题和子代选择器有什么异同？2.通用选择器通常用在什么场合？3.并集选择器什么时候使用？交流分享（15分钟）同学主动交流或者分小组交流项目实践（30分钟）完成民法典中部分章节的页面修饰。阅读给定html代码，并添加样式，使用合适的选择器，使之呈现指定的页面效果。小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：继续美化“中华鲁商文化”主题网页，可以通过自主学习加入图片。代码编写过程中，注意代码的精简，遵循Web开发规范，培养学生精益求精，科学严谨的工匠精神。公民身份信息的唯一性，做遵纪守法、诚实守信的好公民，大数据时代对于公民信息的可追溯性。引导学生自主学习，主动思考，自主建构知识体系。通过项目实践，了解民法典的历史地位以及部分章节内容，树立法治意识。

子任务02-3使用盒模型划分页面教案名称子任务02-3使用盒模型划分页面计划学时4学时教学内容本子任务主要学习盒模型及其样式属性的应用。盒模型也是所有块级元素的抽象，拥有所有块级元素的共性，样式属性适用于所有块级元素。知识目标1.理解行内元素和块级元素及其转换2.掌握盒子模型及常用样式属性3.掌握行内元素及其样式属性能力目标1.学会灵活转换元素的显示方式2.能够使用盒模型进行页面布局素质目标1.了解并应用“分而治之”的思想2.具备精益求精的工匠精神3.弘扬社会主义核心价值观和正能量教学重点盒子模型的样式属性教学难点块级元素和行内元素的区别和转换信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务02-3使用盒模型划分页面并完成教学平台的课前自测题【课中】课程导入（10分钟）思考：DIV+CSS网页布局的基本流程就是先在页面上使用块级元素划分内容区域，然后再用CSS进行定位，最后再在相应的区域内添加具体内容。块级元素的大小和位置决定了该内容块在网页上的占位。我们已经能够在样式表中为页面中的指定元素规定样式规则，如何这些块级元素按照美工事先设计好的版式排列在网页上呢？微课视频中主要讲述了哪些内容？分享交流3分钟任务提出（10分钟）页面布局时要在样式表中对页面中指定“盒子”的大小、位置、内外边距等做出精确的设置，就需要用到盒模型。【头脑风暴】是不是所有的元素都是盒子？知识点讲解（10分钟）HTML元素按呈现效果可分为块级元素和行内元素两大类。分析讨论（15分钟）1.列举我们学过的元素分别是哪一类？2.两类元素是否可以转换？知识点讲解（10分钟）行内元素和块级元素在实际项目中可以根据需要进行相互转换，可以通过指定display样式属性的取值来决定元素的显示方式。行内块元素。兼具行内元素和块级元素的特点，在内部类似于block元素，比如它拥有block元素的高宽值，也可以设定自己的padding（内填充），border（边框）与margin（外边距），而外部的排列方式又类似行内元素，即水平在一行内排列，不是像块级元素一样从上到下排列。教学示例（教师演示讲解）学生同步实践（共10分钟）知识点讲做（40分钟）块级元素的盒子模型1.盒子的宽度和高度CSS样式规则中使用width和height规定盒子的宽高注意：标准盒子模型的width和height仅指块级元素的内容区域大小教学示例（教师演示讲解）学生同步实践（共10分钟）2.盒子的边框教学示例（教师演示讲解）学生同步实践（共10分钟）3.盒子的内填充属性padding并非实体，是透明留白，没有修饰属性。不同浏览器对于页面元素的默认padding和margin取值是不相同的，为了保证统一的页面效果，通常采用*{padding:0;margin:0;}将页面元素的默认内外边距置零。padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。容器盒子内填充使用固定值，段落内填充使用相对值。所以当拖动浏览器窗口改变其宽度时，段落文字的内填充会随之发生变化（这时<p>标记的父元素为<div>），而容器盒子的内填充不会发生变化。教学示例（教师演示讲解）学生同步实践（共10分钟）项目实践（20分钟）民俗话节气之立秋头脑风暴（10分钟）如何使盒子在页面窗口居中？项目实践（30分钟）完成以下单列布局小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：浏览“学习强化”网站首页，画出单栏式页面布局，并使用HTML+CSS实现。在前端页面排版中，要有精益求精的工匠精神事物不是绝对的，是可以相互转换的。在软件项目开发过程中，时刻牢记精益求精的工匠精神在软件项目开发过程中，时刻牢记精益求精的工匠精神在立秋时节到来时引导学生熟悉中国传统文化，感受大自然的四季更替，体会到古代先贤的伟大智慧。从弘扬正能量的网站中汲取能量。

子任务02-4使用BFC隔离空间教案名称子任务2-4使用BFC隔离空间计划学时2学时教学内容本子任务主要学习BFC（块级格式化上下文），用于将元素和外部真正隔离开，从而保证一个环境中的元素不会影响到其他环境中的布局，用于解决页面排版中出现例如垂直盒子外边距合并等问题。知识目标1.理解垂直外边距合并的原理2.掌握BFC布局及其触发方法3.掌握BFC布局解决外边距合并问题的方法能力目标1.能够熟练应用BFC解决外边距合并的问题2.能够使用BFC解决其他实际问题素质目标1.提高自主探究能力2.培养精益求精的工匠精神3.培养通过现象发现本质的职业素质教学重点BFC布局及其触发方法教学难点使用BFC解决排版中出现的实际问题信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务02-4使用BFC隔离空间并完成教学平台的课前自测题【课中】作业点评（10分钟）教师点评作业，指出作业中出现的问题课程导入（5分钟）随着我们设计的页面板块越来越多，相邻盒子设置垂直外边距后，在页面表现出的效果往往和自己预想的值有一定偏差，为什么呢？大多数情况下是相邻盒子之间相互影响导致的，如何避免这种影响呢？如果将元素和外部真正隔离开，从而保证一个环境中的元素不会影响到其他环境中的布局。任务提出（10分钟）发现问题：外边距合并如何解决？分析讨论（10分钟）知识点讲解（15分钟）1.BFC（BlockFormattingContext），块级格式化上下文。它是一个独立的渲染区域，决定了块级元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。（1）同一个BFC内的两个相邻块级元素的外边距合并，但不同

BFC外边距不合并；（2）BFC的区域不会与外部浮动元素重叠；（3）计算BFC高度的时候，浮动元素也会参与计算；（4）BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。分析讨论触发BFC的方法BFC就是让元素形成一个独立的空间，空间内的元素不会影响到外面，那么如何才能让元素形成这样一个空间呢？为元素设置CSS属性。常用的触发BFC方法：（1）设置包含块overflow属性值为hidden；（3）设置子元素display属性值为:inline-block；教学示例（教师演示讲解）学生同步实践（共30分钟）项目实践BFC经常用于页面布局，请完成如图所示单栏布局。要求：页面分为三大版块，他们之间垂直距离设置大一些，为20px，主体部分内部有三个小版块，他们之间垂直距离小一点，设为10px。思路：使用BFC布局隔离，版块之间不会发生垂直外边距合并。小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：细化“学习强国“网站首页页面布局，并在平台提交从成熟的项目中汲取经验，培养学生知识发现、总结、内化、提升的自我建构能力培养通过现象发现本质的职业素质培养学生发现问题、解决问题的能力

任务03网页的蓝图——复杂布局子任务03-1浮动布局两栏式页面教案名称子任务03-1浮动布局两栏式页面计划学时2学时教学内容本子任务学习盒子的浮动布局，为盒子应用float属性设置浮动，浮动后的盒子将脱离标准流。知识目标1.理解浮动布局2.掌握浮动属性float的用法3.掌握清除浮动属性clear的用法能力目标1.能够熟练应用浮动属性完成图文混排效果2.能够熟练应用浮动属性完成多个板块水平排列效果3.能够清除页面排版中浮动对其它元素的影响素质目标1.提高自主探究能力2.培养精益求精的工匠精神3.培养软件架构的模块化思维教学重点浮动属性float的用法教学难点解决浮动应用中出现的各类问题，例如高度塌陷等信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务03-1浮动布局两栏式页面并完成教学平台的课前自测题【课中】课程导入（5分钟）浏览百度新闻页面，观察页面布局思考：网页中两个板块水平排列的布局非常常见，仅仅使用简单的盒子罗列能得到这样的效果吗？任务提出（10分钟）大多数网页由于内容比较复杂，特别是网站首页，为了在有限的空间内展示更多的信息，往往都会按照左中右或者左右的结构进行排版。两栏式布局是在传统桌面网站中最常见的一种布局方式，将有限的空间划分为若干横纵结合的板块，有助于页面内容的组织和展示。页面布局如下：知识点讲解（30分钟）元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。元素的浮动属性float用法：选择器{float:属性值;}常用的float属性值有三个：left：元素向左浮动right:元素向右浮动none:元素不浮动（默认值）教师演示讲解学生同步实践分析讨论（20分钟）出现以下情况的原因？如何解决？高度塌陷的原因父元素中的所有子元素均设置浮动父元素没有定义高度解决方案使用空标记清除浮动使用after伪对象清除浮动使用overflow属性清除浮动项目实践（20分钟）学生完成以上布局，教师引导答疑小结（10分钟）每位同学使用云记事本总结本次课的主要内容，修订课前自测题。教师补充。【课后】平台提交作业：将课堂项目提交至云平台激发学生爱党爱国的热情，关心党和民族的未来发展，为国家建设贡献自己的力量。培养软件架构的模块化思维培养学生发现问题、解决问题的能力当日事，当日毕，只争朝夕。

子任务03-2DIV+CSS布局网上商城首页教案名称子任务03-2DIV+CSS布局网上商城首页计划学时4学时教学内容本子任务参照小米网上商城首页，使用DIV+CSS进行页面布局。通过该项目学习复杂页面的布局方法。知识目标1.理解版心的概念2.掌握通栏多列式网页布局的设计方法能力目标1.能够熟练应用HTML5+CSS3按需进行网站首页布局2.能够解决网页布局过程中遇到的高度塌陷等常见问题素质目标1.提高审美情趣和创新能力2.激发学生科技报国的志向3.培养软件工程中的模块化思维教学重点DIV+CSS的布局方式教学难点浮动以及如何解决浮动带来的问题信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务03-2DIV+CSS布局网上商城首页并完成教学平台的课前自测题【课中】课程导入（5分钟）浏览京东、小米、华为等网上商城，我们发现实际网页的布局要复杂多了，特别是商城类网站，需要将大量信息呈现在首页上，大多数网页是两栏的甚至多栏的，而且是长页面，那么怎么才能做出这样的页面布局呢？任务提出（5分钟）如何完成该类网页的布局？知识点讲解（30分钟）1.网页布局的流程第一步就是要先根据美工的效果图确定页面的版心，版心在屏幕中占据的宽度是多少；第二步要分析页面中的行模块，也就是每一个BFC区域，还要确定好每个行模块中的列模块；第三步在html文档中写出各个页面元素；第四步通过DIV+CSS调整页面中的每个元素的外观效果。2.常见网页布局——通栏多列式布局教师引导学生完成强调：版心的用法项目实践（50分钟）学生自主完成，教师答疑小结（10分钟）每位同学使用云记事本总结本次课的主要内容。【课后】平台提交作业：完成小米网上商城网站首页布局，并在平台提交“小米”公司创始人雷军，用他的创业史激励同学们努力学习；小米也增强了民族自豪感，坚定了同学们为科技报国的志向。培养web前端开发工程师的模块化思维不畏困难，学会常见的错误排查方法和解决方案，并不断总结。在代码编写中，往往很小的错误就会导致全局崩溃，要从细节做起。

子任务03-3网格布局网站商城首页教案名称子任务3-3网格布局网站商城首页计划学时4学时教学内容本子任务主要学习了使用网格布局复杂的网页。它将网页划分成一个个网格，任意组合不同的网格可以做出各种各样的布局，使以前只能通过复杂的CSS框架实现的效果变得更简单了。知识目标1.理解网格布局2.掌握网格容器的设置及其属性3.掌握子元素的属性能力目标1.学会使用CSSGrid网格进行灵活的页面布局2.能够灵活选用网格布局的样式属性素质目标1.提高自主探究能力2.培养学生集体主义精神3.正确处理个人和集体的关系教学重点使用网格布局进行页面布局教学难点解决网格布局中出现的各种问题信息化教学资源职教云教学平台“网页设计与开发”课程设计栏目教学环境教学做一体化机房的计算机需安装配置HBuilderX开发环境和Google浏览器，网络状况良好，可登录网上学习平台教学方法任务驱动法、讨论法、教练式教学法思政融入方法体验探究法、情景引入法教学活动及主要环节思政元素融入【课前】观看微课视频——子任务03-3网格布局网站商城首页并完成教学平台的课前自测题【课中】课程导入（5分钟）我们通过标准流、浮动以及其他CSS属性已经完成了网上商城首页的页面布局，但是利用现有的知识在构建复杂的web页面时还有很多不足，例如盒子的水平居中、浮动元素的控制、列宽的分配等等。还有没有其他更好的布局方式呢？答案是有的。任务提出（5分钟）浏览小米商城网站首页，观察商品陈列部分，是否像网格一般有秩序？本任务我们将学习另外一种强大的布局模式——CSSGrid布局。它引入了二维网格布局系统，其最大的优势是可以将页面分为多个网格，任意组合成不同的形式，进而做出各种各样的布局，对多列区域的布局特别有效。知识点讲解网页布局的原理（10分钟）我们可以假想一个容器，里面有若干子元素，子元素按照网格的形式排列，网格线就是构成网格所有的线条。一个两行五列的布局，就会有3条行网格线，6条列网格线，网格线编号遵循从左到右、从上到下，由1号开始开始，n行有n+1根水平网格线，m列有m+1根垂直网格线。相邻两条平行的网格线之间所形成的区域用来摆放子元素，子元素之间可以有间距。2.网格布局中对父元素的操作（40分钟）（1）设置网格容器方法：在元素上声明display:grid，这样就能触发渲染引擎的网格布局算法，创建一个网格容器，这个元素的所有直系子元素都会自动成为网格元素。（2）划分网格线网格线是构成网格结构的分界线，它们既可以是垂直的（列网格线），也可以是水平的（行网格线），这些线条构成了布局的基础模板，任意两条线之间的空间就是一个网格轨道。在画线过程中，需要根据行和列两个维度分别进行设置，由行线和列线所分隔出来的区域用来摆放子元素。grid-template-columnsgrid-template-rowsgrid-templategrid-auto-rows和minmax()教师引导讲解，学生同步练习（15分钟）（3）添加网格间距网格间距的设置在实际开发中是可选的，主要根据网页设计的需求而定。在两个网格单元之间的网格横向间距或网格纵向间距可使用grid-column-gap和grid-row-gap属性来创建，或者直接使用两个合并的缩写形式grid-gap。3.网格布局中对子元素的操作（30分钟）子元素跨行跨列有的子元素需要占据多个网格单元，要确定具体占位，可以利用之前在父容器中所指定的网格线编号来定位，直接①grid-column-start：规定从哪一列开始显示项目。②grid-column-end：规定在哪一条列线上停止显示项目，或跨越多少列。③grid-row-start：规定从哪行开始显示项目。④grid-row-end：规定在哪条行线上停止显示项目，或者横跨多少行。通过设置起始行、结束行和起始列、结束列来给子元素划定它所要摆放的区域。教师引导讲解，学生同步练习（15分钟）项目实践（40分钟）使用网格布局改进子任务3-2中完成的页面效果小结每位同学使用云记事本总结本次课的主要内容，以及操作中出现的问题。【课后】平台提交项目实践作业预习微课视频任务04-1技术的更新迭代速度是非常快的，作为软件从业人员，我们要始终保持学习的热情，具备学习的能力。培养学生模块化思维和审美情趣。要正确处理整体和部分的关系。整体是部分的有机统一、集合。集合中的各个部分不是单纯地叠加或机械地堆积在一起的，而是以一定的结构形式互相联系、相互作用着的。引申到每个人都是集体的一员，个人利益和集体利益冲突时，个人服从集体。培养学生集体主义精神。子元素也是可以调整的。但是要在有限的空间内调整。个人的自由要在一定的规章制度下。没有绝对的自由不积硅步，无以致千里在代码编写时，要有大局意识，层次清楚，符合规范，养成良好的编码习惯。

任务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可将其定义为弹性容器，弹性容器内包含一个或多个弹性子元素。弹