《网页设计与制作》 教案全套 周礼萍

网页设计与制作（HTML5+CSS3）授课方案（教案）系 别： 教研室： 科 目： 网页设计与制作 班 级： 教 师： 周礼萍 学 期： 11网页设计与制作（HTML5+CSS3）授课方案（教案）课题：认识网页授课时数2教学目的及要求：1.掌握网页设计的概念与开发流程2.学会安装使用网页常见的开发工具教学重点：1.网页的组成2.浏览器的安装3.开发工具的安装教学难点：工具的安装教学步骤及内容：一、说课1.实训室规范2.课程与专业的关联3.可以获取的相关证书4.可以参与的技能竞赛5.对应就业岗位及岗位需求6.教材7.课程要求8.考试方式9.学习通互动：签到二、知识点引入讲解学习通互动：问题1：什么是网页？什么是网站?问题2：网页有哪些元素？如：文字、图片...问题3：你都知道哪些浏览器？你最喜欢使用的浏览器是？1.网页的相关术语、Web标准2.网页的基本组成元素3.主流浏览器三、动手操作任务1：下载安装谷歌浏览器旁批栏：22四、知识点引入讲解1.常见Web开发工具2.以VisualStudio为例，安装插件的作用五、动手操作任务2 安装VisualStudioCode六、总结本节课介绍了网页的基础知识、网页的开发工具及下载安装。七、布置课后作业1.完成学习通上理论习题（即书P13习题）2.结合书上视频，自主学习开发工具的使用33网页设计与制作（HTML5+CSS3）授课方案（教案）课题：网站开发前准备授课时数2教学目的及要求：1.能使用开发工具创建站点文件夹2.能设计绘制网页草图教学重点：1.创建本地站点和管理本地站点2.网站建设的基本流程教学难点：管理本地站点教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：什么是站点文件夹？问题2：为什么需要站点文件夹？问题3：站点文件夹的命名规范有哪些？2.站点文件夹中常见的文件和文件夹3.站点文件夹命名规范演示：使用VisualStudio创建项目三、动手操作任务3 使用VisualStudioCode创建项目（1）创建站点文件夹website。imgshtmlstylejsmedia（3）在根目录下创建index.html文件。（4）用英文感叹号生成HTML5结构。（5）在body标签内输入“HELLOWEB！”保存。（6）单击鼠标右键，选择“OpeninDefaultBrowser”用默认浏览器打开观察。四、知识点引入讲解1.学习通互动：问题1：网站开发流程有哪些？问题2：从事前端有哪些相关的岗位呢？2.讲解网站开发流程3.网站开发团队各阶段分院的分工4.学习通互动：投票你更喜欢前端的哪个岗位？旁批栏：PAGEPAGE4五、动手操作任务4 农产品电商首页设计六、总结本模块介绍了网页的基础知识、网页的开发工具及网站开发的流程。七、P14）2.报告内容包括：此网站的目标是什么？此网站的观众是谁？此网站包含哪些内容？此网站的内容将如何组织？3.预习HTML5的文档结构网页设计与制作（HTML5+CSS3）授课方案（教案）课题：HTML结构和常用标签授课时数2教学目的及要求：1.掌握HTML5基本结构2.认识标签3.掌握常用文字标签、文本格式标签教学重点：1.HTML5文档结构2.掌握常用文字标签、文本格式标签教学难点：单标签的关闭符书写位置教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：HTML5的结构有哪些固定的标签？2HTML53.HTML5文档头部常见标签4.标签的分类5.标签的关系三、动手操作1.在开发工具中快速生成HTML5的文档结构2.编辑一段“个人简介”并进行浏览器打开观察其换行情况四、知识点引入讲解1.学习通互动：问题1：刚才大家编辑的内容在浏览器中是否能换行？2.文字标签3.文本格式化标签五、动手操作任务1 前端学习路线旁批栏：六、总结本节课介绍了HTML5的基本结构、标签的分类、常用的文字标签、文本格式化标签。七、P28）2.实训作业：在页面中编写以下内容：<h1>~<h6>是段落标签；<p>是段落标签；<br/>是换行标签，是一个单标签3.P22容。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：图像与多媒体标签授课时数2教学目的及要求：1.学会使用注释和转义符，养成注释的开发习惯（职业素养）2.能正确的运用相对路径插入多媒体3.认识到网页中的知识产权的应用（职业素养）4.培养网页是弘扬正能量的地方（素质目标）5.熟练使用相对路径6.认识网页中常见单位教学重点：1.图像标签2.路径3.网页中常见单位教学难点：1.相对路径2.多媒体标签中的固有属性教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：为什么课后作业中的标签名打不出来呢？2.转义符3.注释标签4.学习通互动：1：常见图片格式有哪些？区别是什么呢？2：图像标签和前面所学标签有什么不一样？5.图像标签6.音频标签7.视频标签三、动手操作任务1 传统节日中秋节页面的制作四、知识点引入讲解1.集中答疑：2.路径3.网页中常用的单位旁批栏：五、动手操作运用所学，参考书中图2.2.1效果，对进行“传统节日——中秋佳节”页面进行优化。六、总结七、布置课后作业1.完成学习通上理论习题（即书P29习题）2.实训作业（2选1）：编辑一篇介绍家乡美景/美食的页面编写一页，我喜爱的音乐页面3.预习书中P30超链接标签。网页设计与制作（HTML5+CSS3）授课方案（教案）PAGEPAGE10课题：超链接标签授课时数2教学目的及要求：1.知道什么是超链接2.掌握链接标签不同属性和属性值的使用3.熟练使用链接标签实现页面与页面之间的跳转4.用中国传统节日为案例，弘扬优秀的传统文化（素质目标）5.掌握传统布局标签div和span的特点6.能运用结构标签对页面结构进行划分教学重点：1.超链接标签2.超链接的分类3.传统布局标签4.结构语义化标签教学难点：1.超链接标签的href属性2.传统布局标签div和span的特点教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动问题1：超链接的作用是什么？问题2：网页中超链接的应用场所，举例说明？2.超链接的概念3.超链接标签4.超链接的分类三、动手操作参考书中P31图3.1.2，制作超链接分类练习四、知识点引入讲解1.传统布局标签2.HTML5结构语义化标签旁批栏：五、动手操作任务1 中国传统节日介绍页面六、总结HTML5七、布置课后作业1.完成学习通上理论习题（即书P39习题）2.实训作业：制作家乡美食或美景的长图文简介，并创建超链接3.网页设计与制作（HTML5+CSS3）授课方案（教案）课题：锚点链接授课时数2教学目的及要求：1.熟练掌握链接和锚点链接的使用2.掌握锚点的运用场景教学重点：1.锚点的概念2.锚点链接的使用方法教学难点：跨页定点的锚点使用方法教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：锚点链接的应用场景有哪些？2.锚点的概念3.锚点链接的使用方法三、动手操作任务1 电视剧剧情介绍页面的制作（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件302.html。（2）语义格式化文本，图文排版。（3）在文中创建锚点链接快速到达对应分集剧情。（4）“另外一个页面的第6～10集”锚点定义到另一个html文件中的对应位置。（5）点击文字“返回选集”可以回到主菜单。旁批栏：任务2 运用链接编写助农网个人中心页面四、总结五、布置课后作业1.完成学习通上理论习题（即书P40习题）2.实训作业：观察百度百科人物介绍页面，尝试编写名人百度百科页面3.预习书中列表标签。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：列表标签授课时数2教学目的及要求：1.了解列表的样式类型2.掌握新闻列表的制作方法3.掌握清除和修改列表样式的方法4.会使用页面交互标签details、summary、progress、meter教学重点：1.无序列表2.有序列表3.HTML5页面交互标签教学难点：列表标签项目符号的修改教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：列表标签有几种？分别是哪些？2.无序列表三、动手操作任务1 新闻列表页的制作四、知识点引入讲解1.有序列表2.HTML5页面交互标签（1）HTML5页面交互标签（2）<progress>标签（3）<meter>标签。旁批栏：五、动手操作任务2 新闻排行榜六、总结CSS七、布置课后作业1.完成学习通上理论习题（即书P51习题）2.预习定义列表。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：列表标签的嵌套授课时数2教学目的及要求：1.能运用列表标签进行搭建结构2.会使用浏览器开发者工具查看网页元素教学重点：1.定义列表2.列表的嵌套3.开发者工具的使用教学难点：开发者工具的使用教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.定义列表2.列表的嵌套3.使用网页“开发者工具”观察各个网站开发的列表标签使用情况，看看哪种列表使用频率最高。4.学习通互动：投票：列表中使用率最多的是？三、动手操作任务1页脚部分任务2 使用网页“开发者工具”，仿写网页要求：F12，开启“开发者工具”，观察各类网站对列表标签的运用领域。示例如图4.1所示。（2）选择感兴趣的内容尝试仿写。四、总结旁批栏：五、参考效果如图4.2所示。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：网页中表格的应用1授课时数2教学目的及要求：1.掌握表格标签的语法和属性2.能够设置网页边框、单元格的内外边距设置3.能够对表格结构进行划分教学重点：1.创建表格2.表格中常见属性3.表格结构划分标签教学难点：表格标签教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：网页中哪些地方会用到表格？问题2：表格由什么组成？2.认识表格3.创建表格三、动手操作任务1 农产品电商市场运行大数据图表（1）创建一个6行6列的表格，输入内容四、知识点引入讲解1.表格标签的常用属性2.表格结构的划分五、动手操作任务1 农产品电商市场运行大数据图表table800px10。（3）用caption添加表格标题，标题中放置图片，设置图片宽度为100%。（4）将表格划分为表头部分和表体部分，对结构标签添加属性，内容居中对齐。（5）将表头行内单元格修改为表头单元格标签，效果分析图如图5.1.3所示。旁批栏：六、总结七、P61）。2.多观察网页中表格的应用，并进行仿写。3.预习表格单元格的合并。PAGEPAGE20网页设计与制作（HTML5+CSS3）授课方案（教案）课题：网页中表格的应用2授课时数2教学目的及要求：1.能够对表格单元格进行合并2.能用表格对网页进行布局教学重点：1.表格中的合并单元格2.表格嵌套教学难点：单元格的合并教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：抽问：表格单元格合并有几步，请说出合并步骤？2.合并方式3.目标单元格的选择4.删除多余单元格三、动手操作任务1我的订单页面任务2影城排片表旁批栏：四、知识点引入讲解1.表格的嵌套五、动手操作六、总结七、P62）。2.实训题：参考P63，制作求职简历3.预习CSS的引入及样式规则。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：CSS基础知识授课时数2教学目的及要求：1.了解CSS的作用，掌握CSS样式规则2.掌握CSS样式表的引入方式，能够在网页中引入CSS样式教学重点：CSSCSSCSSCSS教学难点：1.CSS样式规则2.类名、ID名命名规范教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：CSS作用是什么？问题2：CSS有几种引入方式？CSSCSSCSSCSS三、动手操作要求：用三种引入方式，改变html内，不同标签内容的颜色。四、知识点引入讲解1.CSS基础选择器（1）标签选择器（2）类名选择器（3）ID选择器（4）通配符选择器2.类名、ID3.多类名选择器的使用旁批栏：五、总结本节课同学们学习了CSS六、布置课后作业1.完成学习通上理论习题（即课后习题）。2.预习CSS的字体、文本外观的样式属性。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：CSS文本美化授课时数2教学目的及要求：1.掌握字体样式属性的用法，能够在网页中设置不同的字体样式2.掌握文本外观属性的用法，能够在网页中设置不同的文本样式3.能运用CSS修改列表样式属性教学重点：CSSCSSCSS列表样式属性教学难点：CSSCSSCSS列表样式属性教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.CSS字体样式属性font-size：字号大小（重点）font-family：字体font-weight：字体粗细（重点）font-style：字体风格font：综合设置字体样式text-stroke：文字描边三、动手操作要求：运用所学，动手实践一下，修改文字大小、字体、粗细等。四、知识点引入讲解1.CSS文本外观属性color：文本的颜色（重点）letter-spacing（字符间距）/word-spacing（单词间距）line-height：行高（重点）text-align：设置元素水平对齐方式（重点）vertical-align:设置元素的垂直对齐方式text-decoration：文本装饰（重点）text-indent：首行缩进（重点）text-shadow：文本阴影text-transform：控制文本的大小写white-space：规定段落中的文本不进行换行text-overflow：处理溢出文本旁批栏：2.CSS列表样式属性list-style-type（了解）list-style-image（了解）list-style-position（了解）list-style（重点）五、动手操作任务1 网站简介部分（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建601.html。（222p、字符间距为5px、水平居中。（3）将英文标题转换为全部大写、字体为16px、不加粗、字符间距正常。（4）将文中小标题设置为：首行缩进2个字、字体不加粗、字体大小18px、字体颜色为#249c6e。（5）文中正文设置为：首行缩进2个字，行距为26px、字体为仿宋、字体颜色为#333。六、总结本节课学习了CSS七、布置课后作业1.完成学习通上理论习题（即课后习题）。2.预习CSS的复合选择器。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：CSS复合选择器授课时数2教学目的及要求：掌握CSS各类选择器的用法，并能灵活应用设置网页样式教学重点：1.关系选择器2.属性选择器3.结构化选择器4.状态化伪类选择器5.伪元素选择器教学难点：准确使用各类选择器教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：提问问题1：除了基础选择器，你还知道哪些选择器？问题2：为什么需要那么多选择器呢？2.CSS关系选择器（重点）（1）交集选择器（2）并集选择器（3）后代选择器（4）子代选择器（5）兄弟选择器三、动手操作在不修改提供素材代码的前提下，完成以下任务：1）“登录”的颜色为红色,同时主导航栏里面的所有的链接改为橙色2）主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑3）主导航栏里面的一级菜单链接文字颜色为绿色旁批栏：四、知识点引入讲解1.属性选择器（了解）2.结构化选择器（了解）（1）:root选择器（2）:not选择器（3）:only-child选择器（4）:empty选择器（5）:nth-child(n)和:nth-of-type(n)选择器(掌握）（6）:target目标选择器（7）:has()选择器3.状态化伪类选择器（1）:link选择器（2）:visited选择器（3）:active选择器（4）:hover选择器（熟悉）（5）:focus选择器(掌握）4.伪元素选择器（1）::before（2）::after五、动手操作任务2关于我们页面六、总结CSS七、布置课后作业1.完成学习通上理论习题（即课后习题）。2.浏览各大网站，用开发者工具观察其选择器及其命名特点。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：CSS三大特性授课时数2教学目的及要求：1.了解CSS继承性、层叠性的特点，能够运用优化网页结构代码2.掌握CSS优先级的特点，能对优先级排序、根据需求提升权重教学重点：CSSCSSCSS教学难点：优先性中权重的计算教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：代码题：分析代码得出结果（1）div{color:red;}div{color:green;}（2）.red{color:red;}div{color:green;}（3）divp{color:green;}.red{color:red;}2.层叠性3.继承性4.优先性旁批栏：5.学习通互动：1：CSS2：CSS问题3：继承样式的权重是多少？41，0，0，05：类选择器的权值是多少？问题6：当权重相同时，遵循什么原则？问题7：！important有什么作用？问题8：权重可以提升吗？如何提升?三、动手操作完成书中P99~100，程序分析填空题，并用代码验证。四、总结CSS五、2.预习元素的显示模式。PAGEPAGE36网页设计与制作（HTML5+CSS3）授课方案（教案）课题：元素的显示模式授课时数2教学目的及要求：掌握元素显示模式，并能实现不同类型元素模式的转换教学重点：1.块级元素2.行内元素3.行内块元素4.元素之间的转换5.元素的隐藏教学难点：标签的分类教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：1：divspan2div3span2.块级元素（block-level）3.行内元素（inline-level）4.行内块元素（inline-block）5.标签显示模式转换display块转行内：display：inline行内转块：display：block块、行内元素转换为行内块：display：inline-block6.display：none（元素隐藏）三、动手操作CSSHTML旁批栏：四、总结五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.实训题：观看互联网关于今年国庆节图文新闻页面，如图6.3所示进行仿写页面。3.参考预习盒子模型。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：盒子模型1授课时数2教学目的及要求：1.熟悉盒子模型的概念，能够说出盒子模型的基本结构2.掌握边框属性的用法，能够为盒子设置不同的边框效果3.掌握边距属性的用法，能够使用内外边距设置盒子的空间距离4.了解盒子宽、高属性，能够计算盒子实际的宽度和高度5.掌握box-sizing属性的用法，能够控制盒子的宽度和高度的范围教学重点：1.盒子模型的组成2.盒子边框3.内边距4.外边距5.外边距塌陷问题6.box-sizing属性教学难点：1.内边边距的写法2.外边距塌陷和外边距合并问题的解决方式3.内边距和边框会撑大盒子的计算方法教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.认识盒模型网页布局的本质：把网页元素（文字图片等等），放入盒子里面，然后利用CSS摆放盒子的过程。2.盒子模型的组成3.盒子边框三、动手操作要求：运用边框属性制作三角形。旁批栏：四、知识点引入讲解1.内边距（padding）（1）padding后面跟不同数值表示不同的意义。（难点）（2）内边距会影响盒子的实际大小2.外边距（margin）（1）margin属性用法（2）外边距合并问题（3）外边距塌陷问题3.box-sizing属性五、动手操作六、总结七、2.参考预习圆角边框、图像边框和盒子阴影知识点。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：盒子模型2授课时数2教学目的及要求：掌握box-shadow属性的用法，能够为盒子添加阴影效果教学重点：1.圆角边框2.图像边框3.盒子阴影教学难点：1.圆角边框的表示方法2.多重盒子阴影的表示教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：1：网页中的“盒子”只能是方形吗？可以是圆形或者椭圆吗？合作探究：找出互联网上非方形的案例。2.圆角边框（border-radius）3.图像边框（border-image）（了解）4.盒子阴影（box-shadow）语法：box-shadow：像素值1像素值2像素值3像素值4颜色值阴影类三、动手操作任务1整点秒杀部分（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建701.html。（2）7.1.1220*25010pxCSS3width10px113（3）设置“整点秒杀”字号为24px，字符间距3px。（4）将闪电图片宽度设置为40px，秒杀时间字号设置为18px。5px圆角边框，黑色背景颜色。（6）装“：”号的盒子与装时分秒的盒子不同的是，冒号盒子宽度为10px，无背景颜色。旁批栏：四、总结五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.3.参考预习背景知识点。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：背景1授课时数2教学目的及要求：掌握背景属性的用法，能够为盒子设置不同的背景教学重点：1.背景颜色2.背景图片3.背景平铺4.背景位置5.背景图像固定/附着6.背景连写7.背景尺寸教学难点：背景连写教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：颜色的表示方式有几种？问题2：颜色的表示方式分别是？2.背景颜色（background-color）3.背景图片（background-image）4.背景平铺（background-repeat）5.背景位置（background-position）6.背景图像固定/附着（background-attachment）7.背景连写（background）8.背景尺寸（background-size）三、动手操作任务1个人页面首页旁批栏：四、总结/固定和背景透明度的用法,同学们能够熟练灵活的运用背景各种属性，实现网页的页面布局。五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.实训题（2选1）：（1）运用盒模型属性、背景属性及元素显示模式，制作农产品展示列表。（2）运用盒子模型，美化新闻页面。3.参考预习精灵图知识点。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：背景2授课时数2教学目的及要求：1.能运用背景渐变制作优惠券案例2.了解精灵图的原理3.会使用图片工具测量精灵图，在页面正确引入精灵图教学重点：1.多重背景2.背景渐变3.精灵图教学难点：1.背景线性渐变2.背景径向渐变教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：一个盒子中可以加多个背景图片吗？问题2：多个背景之间的叠放顺序怎样区分？2.多重背景多个图片背景设置时，属性值之间用逗号“，”隔开，越往前的层级越高（越在上层）。3.背景渐变（1）线性渐变语法：background-image：linear-gradient（direction,color1,color2[stop],...colorn）；（2）径向渐变语法：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);（3）重复线性渐变（了解）语法：background:repeating-linear-gradient(angle|toside-or-corner,color-stop1,color-stop2,...);（4）重复径向渐变（了解）语法：background-image:repeating-radial-gradient(shapesizeatposition,start-color,...,last-color);旁批栏：三、动手操作任务1制作网页中的优惠券要求：运用元素转换、盒子模型和背景属性、背景渐变制作优惠券，熟练掌握背景渐变属性。四、知识点引入讲解1.认识精灵图（position）2.精灵图的使用方法五、动手操作任务3助农网页面底部部分六、总结本节课主要讲解了多重背景、背景渐变以及精灵图的应用,同学们能够熟练灵活的运用背景各种属性，实现网页的页面布局。七、布置课后作业1.完成学习通上理论习题（即课后习题）。2.实训题：根据素材运用CSS精灵图技术，拼出自己姓名的组合。3.参考预习浮动知识点。PAGEPAGE40网页设计与制作（HTML5+CSS3）授课方案（教案）课题：浮动1授课时数2教学目的及要求：1.掌握元素的浮动属性2.能够为元素添加教学重点：1.浮动的语法2.浮动的特性教学难点：浮动的特性教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.学习通互动：问题1：如何让多个块级盒子（div）无间隙水平排列成一行？问题2：如何让两个盒子一个靠左一个靠右，在一行排列？问题3：最早的图文环绕用的是什么技术？2.网页常见布局方式3.为什么要浮动4.浮动的语法选择器{float：属性值；}5.浮动特性（1）浮动元素会脱离标准流排列（2）浮动的元素会一行内显示并且元素顶部对齐三、动手操作任务1助农网导航部分旁批栏：任务2网页中的常见布局方式四、总结本节课主要讲解浮动的语法和浮动的特性，同学们能理解元素的浮动，并根据需求设置元素浮动样式。五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.探索训练：P188运用所学浮动布局，结合盒模型知识和overflow属性，运用锚点特性制作仿轮播图的点击播放效果。3.参考预习清楚浮动知识点。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：浮动2授课时数2教学目的及要求：1.能够为元素添加和清除浮动2.至少掌握2种清除浮动的方法教学重点：清除浮动教学难点：清除浮动的方法教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：浮动和标准流的父盒子搭配2.清除浮动的本质3.清除浮动的方法（1）额外标签法也称为隔墙法（2）overflowhiddenauto（3）父元素添加::after方式是额外标签法的升级版.clearfix：：after{content：""；display：block；height：0；clear：both；visibility：hidden；}.clearfix{/*IE6、7专有*/*zoom：1；}（4）父级添加双伪元素清除浮动旁批栏：.clearfix：before，.clearfix：after{content：""；清除浮动隔墙法144display：table；}.clearfix：after{clear：both；}.clearfix{*zoom：1；}三、动手操作任务1布局商品展示页结构四、总结2五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.实训作业：将课堂案例填充内容，补充完整。3.参考预习多列布局。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：多列布局授课时数2教学目的及要求：掌握网页常见的多列布局教学重点：多列布局的使用教学难点：无教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：CSS3中引入了多列布局模块，用于以简单有效的方式创建多列布局。2.多列布局column-countcolumn-gapcolumn-rulecolumn-spancolumn-widthcolumns三、动手操作任务1大量文字的分栏设置旁批栏：任务2首页商品展示部分四、总结word排版中的分栏。五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.参考预习定位。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：定位1授课时数2教学目的及要求：1.掌握元素定位属性2.能设置不同定位模式教学重点：1.定位的作用2.定位的组成3.相对定位4.绝对定位教学难点：子绝父相教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：以下效果是如何实现的？用前面所学能做出以下效果吗？2.定位的作用3.定位的组成（1）定位模式（2）边偏移4.相对定位relative（重点）语法：选择器{position：relative；}5.绝对定位absolute语法：选择器{position：absolute；}旁批栏：（1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。（（3）绝对定位不再占有原先的位置，所以绝对定位是脱离标准流的。6.绍子绝父相的由来三、动手操作任务1轮播图结构的搭建任务2首页轮播图部分四、总结本节课主要学习了定位中的绝对定位和相对定位，以及子绝父相的由2五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.实训题：（1）完成书P158仿土豆视频案例（2）完善助农网商品列表页，在产品展示部分，运用“子绝父相”定位，添加“热销商品”和“补货中”。3.4.参考预习固定定位、粘性定位。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：定位2授课时数2教学目的及要求：1.掌握元素定位属性2.能设置不同定位模式教学重点：1.固定定位2.粘性定位3.z-index教学难点：定位叠放次序z-index教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：观看网站中的电梯导航，思考这个是怎样实现的？2.固定定位fixed（1）语法：选择器{position：fixed；}（2）特点：②固定定位不再占有原先的位置。（3）版心的计算方法旁批栏：PAGEPAGE503.粘性定位sticky（1）语法：选择器{position：sticky；top：10px；}（2）特点：①以浏览器的可视窗口为参照点移动元素（固定定位特点）。②粘性定位占有原先的位置（相对定位特点）。③必须添加top、left、right、bottom其中一个才有效。④跟页面滚动搭配使用。三、动手操作任务1定位综合练习四、知识点引入讲解1.浮动和定位的区别2.定位叠放次序z-index语法：选择器{z-index：1；}数值可以是正整数、负整数或0，默认是auto（0）。数值越大，盒子越靠上。五、总结六、2.拓展训练：运用盒模型属性和定位的层级关系制作奥运五环叠加效果。3.预习弹性盒布局。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：flex布局授课时数2教学目的及要求：掌握网页常见的弹性盒布局教学重点：flex父项常见属性flex子元素常见属性教学难点：主轴方向改变后元素的排列设置教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：思考以下效果如何实现？flex用户可以通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。flex父项常见属性flex-directionjustify-contentflex-wrap换行align-items（单行）align-content（多行）flex-flow复合属性4.flex子元素常见属性flexalign-selforder属性定义项目的排列顺序旁批栏：三、动手操作任务1助农网局部导航部分四、总结flex五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.拓展训练：要求：使用目标伪类选择器和弹性盒布局制作手风琴案例。3.参考预习grid网格布局。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：grid网格布局授课时数2教学目的及要求：1.能使用网格系统进行制作常用布局2.能够运用HTML+CSS搭建布局结构教学重点：1.网格布局中的基本概念2.grid布局容器属性3.grid-gap属性4.grid-template-areas属性/grid-area属性教学难点：单元格的合并教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.引入：思考以下效果如何实现？2.网格布局中的基本概念（1）容器和项目（2）容器里的行、列、单元格及网格线3.grid布局容器属性4.grid-gap属性grid-template-areas属性/grid-area属性grid布局合并单元格（重点）grid-rowgrid-columngrid-column/grid-rowspangrid-area属性（两种用途）旁批栏：三、动手操作任务1助农网品质优选部分四、总结gridgrid五、布置课后作业1.完成学习通上理论习题（即课后习题）。2.3.拓展训练：结合本模块教学内容，完成助农网首页页面制作4.参考预习表单知识。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：表单授课时数4教学目的及要求：1.了解表单的功能，能够快速创建表单2.清楚表单的组成3.掌握表单相关元素，能够准确定义不同的表单控件4.掌握表单的样式控制，能够美化表单界面5.掌握常见登录、注册页面的制作方法6.掌握用CSS样式修改表单外观的方法教学重点：1.认识表单2.表单的组成3.表单域4.常见的表单控件5.H5新增部分控件和属性教学难点：input控件属性教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评1：什么是表单？问题2：表单的作用是什么？问题3：网页中表单的运用场景有哪些？问题4：表单有哪些组成？2.认识表单3.表单的组成（1）表单域（2）表单控件（3）提示信息4.表单域5.表单控件input控件（重点）selectdatalistlabel标签textarea（文本域）（6）新增inputtype属性（7）表单新增属性旁批栏：三、动手操作任务1会员注册信息任务2登录页面四、总结input五、布置课后作业1.完成学习通上理论习题（即P215习题）。2.拓展训练：html推荐使用：背景固定、弹性盒布局、溢出隐藏等实现案例效果3.预习动画属性。网页设计与制作（HTML5+CSS3）授课方案（教案）课题：CSS3——动画授课时数2教学目的及要求：1.掌握过渡的各种属性，能够为网页中的元素添加过渡效果2.掌握动画的各种属性，能够为网页中的元素添加动画效果教学重点：1.过渡2.定义动画3.调用动画4.CSS3转换的位移属性教学难点：动画的属性教学步骤及内容：一、课前准备1.学习通互动：签到2.作业点评二、知识点引入讲解1.任务展示（激发学生学习兴趣）2.过渡（transition）语法：transition：<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>3.动画（1）制作动画（2）动画属性连写三、动手操作任务1转呼啦圈的机器人四、知识点引入讲解1