第15次课 任务案例：橘子洲景区网页（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 任务案例：橘子洲景区网页 课次 15 教学 目标 知识目标 1. 理解CSS浮动与定位的语法与属性； 2. 理解CSS的简写与优化原理； 3. 全面了解Dreamweaver中CSS规则的含义与使用方法。 能力目标 能够利用CSS进行网页元素的排版与定位。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经CSS的盒子结构与浮动规则和定位规则有了一定的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决较复杂问题能力比较弱，知识迁移能力有待加强。 教学 重点 橘子洲景区网页效果案例制作。 教学 难点 橘子洲景区网页效果案例中的浮动与定位设置。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 1、 下图代码实现的是什么预览效果？请画出来并拍照回复。 2、若将下图代码的定位改为绝对定位，预览效果会是怎样？请画出来并拍照回复。 3、 请画出以下代码的盒子图，注意盒子间的父子关系。 4、 第3题中的h2元素的祖先元素有哪些？ 5、 若要给em以#right的DIV盒子为基准进行进行绝对定位，该如何设置？ 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务导入（2min） 小明很好地掌握了盒子模型的概念，以及盒子之间的关系后，他发现了一个重要的问题，如果仅仅按照默认的方式进行排版，网页所呈现出来的效果就没有多样化。那么，怎么样才能把网页元素放在想要放的任意位置呢？ 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用图片和文字素材，制作一个介绍红色旅游景点橘子洲的网页，网页效果如下图所示。 图1橘子洲景区网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （30min） 组织学生一起实施项目任务： （1）网页布局规划 （2）创建站点 （3）创建空白文档 （4）创建CSS文档 （5）将CSS文档链接到页面 （6）页面初始化 （7）header区域的制作 （8）navi区域的制作 （9）content区域的制作 （10）footer区域的制作 课堂讨论：请同学们拿出笔和纸，绘制本任务案例的网页布局图，拍照上传。 1.【实操演示】教师技能训练任务，并进行实操演示。 2.组织观看微课视频。 3.组织发布【课堂讨论】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（30min） 技能训练：组织同学们作业里完成 “2.3.3 任务实施之橘子洲景区网页”，并按要求在指定位置提交作业。（可参考“任务3 橘子洲景区网页效果 教学视频”） 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 知识检测 （10min） 组织同学们到考试中里完成“模块二CSS基础知识单元测试”。 一、单项选择题 1.下列关于网页元素overflow的说法，正确的是（ ）。 A．指网页元素的位置，距离左边框和上边框的距离 B．指网页元素的位置，距离右边框和下边框的距离 C．指网页元素的定位方式，可以取值中包括absolute D．指网页元素的内容溢出时，是否显示多余的内容 2.如果将想将两个层排列在同一行中，下列描述不能实现的是（ ）。  A．直接插入两个DIV标记，会自动排在同一行  B．指定DIV的position属性为absolute，然后将层位置拖放到同一行中 C．指定DIV标记的宽，并且指定其浮动方式，当层宽度之和小于外层元素宽度时，会排在同一行  D．使用一个表格，将两个层分别放入一行中的两个单元格内  3.下列关于元素在网页中的叠放顺序描述，不正确的是（ ）。  A．使用CSS属性z-index来实现叠放顺序 B．属性的取值越大，表示放置的层次越高 C．属性取值可以为负整数  D．可以叠放，但叠放顺序不能指定，将由计算机随机产生 4.以下不是float属性的是（ ）。   A.left  B.none  C.right  D.all 5.在CSS中，关于盒子的margin属性的叙述正确的是（ ）。   A.边距margin只能取一个值   B.margin属性的参数有margin-left、margin-right、margin-top、margin-bottom C.margin属性的值不可为auto   D.margin属性的参数值不能全部设置成0px  6.以下代码片断中，属于静态定位的是（ ）。   A.#bb{width：100px；position：relative } B.#bb{width：100px；position：sastic }   C.#bb{width：100px； }   D.#bb{width：100px；position：absolute} 7.以下不属于position定位盒子方式的是（ ）   A.绝对定位  B.相对定位  C.直接定位  D.静态定位 8.以下哪种元素定位方式将会脱离标准文档流（ ）。   A.绝对定位 B.相对定位 C.浮动定位 D.静态定位 9.下列关于float属性的取值说明不正确的是（ ）。   A.取值为left表示浮动到左边 B.取值为right表示浮动到右边 C.取值为none表示元素不浮动   D.取值为inherit表示从父级元素获取float值，这是其默认值 10.阅读下列代码片断，关于元素b的定位说法正确的是（ ）。      <style type="text/css"> #a{ width: 400px; height: 300px; border: 1px solid red; float: right; } #b{ width: 100px; height: 100px; border: 1px solid blue; position: absolute; left: 10px; top: 10px; } </style>  <body> <div id="a"> <div id="b"></div> </div> </body> A.b相于对浏览器窗体的右上角进行位置偏移 B.b相对于浏览器窗体的左上角进行位置偏移 C.b相对于自身的位置进行位置移偏  D.b相对于元素a的左上角位置进行位置偏移 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 课堂小结（5min） 本次课主要学习了橘子洲景区网页效果案例制作，在实际制作过程中深刻了解盒子模型及盒子之间的关系，着重掌握如何利用CSS对网页元素进行排版与定位，做到融会贯通。 作业布置 1.继续完成技能训练作业：橘子洲景区网页，并提交至学习通 2.预学下一次课的内容 3. 在线完成第二单元在线测验： 、 教学反思 学科网（北京）股份有限公司 $$