电子商务网页设计与制作 教案 第15次课 任务案例：橘子洲景区网页

湖南商务职业技术学院教案知识回顾10min

1、下图代码实现的是什么预览效果？请画出来并拍照回复titleCSSdiv$/fil/titlestyletype=Mtext/cssM・divl{height:lOOpx;width:lOOpx;border-style:solid;border-color:red;border-width:lOpx;background-color:yellow;.div2{height:lOOpx;width:lOOpx;border-style:solid;border-color:blue;border-width:lOpx;background-color:yellow;position:relative;top:30px;left:50px;/style/headbodydivclass=Mdivlndivl/divdivclass=Mdiv2Mdiv2/div/body/html

2、若将下图代码的定位改为绝对定位，预览效果会是怎样？请画出来并拍照回复

3、请画出以下代码的盒子图，注意盒子间的父子关系bodydivid=nboxndivid=nleftnh2自己的班级/h2/divdivid=nrightnpstrong自己学号/strongem〉自己姓名〈/em〉/p/div/div/body

4、第3题中的h2元素的祖先元素有哪些？

1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点

1.学生积极参与课堂活动D.指网页元素的内容溢出时:是否显示多余的内容

2.如果将想将两个层排列在同一行中，下列描述不能实现的是（）oA.直接插入两个DIV标记，会自动排在同一行B.指定DIV的position属性为absolute然后将层位置拖放到同一行中C.指定DIV标记的宽，并且指定其浮动方式，当层宽度之和小于外层元素宽度时，会排在同一行D.使用一个表格，将两个层分别放入一行中的两个单元格内3下列关于元素在网页中的叠放顺序描述，不正确的是（）oA.使用CSS属性z-index来实现叠放顺序B.属性的取值越大，表示放置的层次越高C.属性取值可以为负整数D.可以叠放，但叠放顺序不能指定，将由计算机随机产生

4.以下不是float属性的是（）oleftB.noneC.rightD.all

5.在CSS中，关于盒子的margin属性的叙述正确的是（）oA.边距margin只能取一个值margin属性的参数有margin-left、margin-right、margin-top、margin-bottommargin属性的值不可为automargin属性的参数值不能全部设置成Opx.以下代码片断中，属于静态定位的是（）o.以下不属于position定位盒子方式的是（）A.绝对定位B.相对定位C.直接定位I）.静态定位.以下哪种元素定位方式将会脱离标准文档流oA.绝对定位B.相对定位C.浮动定位D.静态定位.下列关于float属性的取值说明不正确的是oA.取值为left表示浮动到左边取值为right表示浮动到右边C.取值为none表示元素不浮动D.取值为inherit表示从父级元素获取float值，这是其默认值

10.阅读下列代码片断，关于元素b的定位说法正确的是styletype=ntext/cssn#a{width:400px;height:300px;border:Ipxsolidred;float:right;#b{width:lOOpx;height:lOOpx;border:Ipxsolidblue;position:absolute;left:lOpx;top:lOpx;/stylebodydivid=nandivid=nbnx/div/div/bodyA.b相于对浏览器窗体的右上角进行位置偏移B.b相对于浏览器窗体的左上角进行位置偏移C.b相对于自身的位置进行位置移偏D.b相对于元素a的左上角位置进行位置偏移本次课主要学习了橘子洲景区网页效果案例制作，在实际制作过程中深刻了解盒子模型及盒子之间的关系，着重掌握如何利用CSS对网页元素进行排版与定位，做到融会贯通.继续完成技能训练作业橘子洲景区网页，并提交至学习通预学下一次课的内容.在线完成第二单元在线测验、教学反思授课章节及主题任务案例橘子洲景区网页课次15教学目标知识目标.理解CSS浮动与定位的语法与属性；.理解CSS的简写与优化原理；.全面了解Dreamweaver中CSS规则的含义与使用方法能力目标能够利用CSS进行网页元素的排版与定位素养目标.培养学生清晰有序的逻辑思维；.培养学生数据分析与总结的意识；.培养学生系统分析与解决问题的能力学情分析知识基础学生已经CSS的盒子结构与浮动规则和定位规则有了一定的了解学生特点.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难.前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练.解决较复杂问题能力比较弱，知识迁移能力有待加强教学重点橘子洲景区网页效果案例制作教学难点橘子洲景区网页效果案例中的浮动与定位设置教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平A教学平台超星学习通https://www.xueyinonline.com/detai1/221724252参考书.《电子商务网页设计与制作》，电子工业出版社.《HTML5+CSS3网页设计与制作》，人民邮电出版社参考网络资源.菜鸟教程https://ww\v.runoob.com/.虎课网https://huke

88.com/教学过程设计环节教学内容教师活动学生活动

5、若要给em以#1返枕的DIV盒子为基准进行进行绝对定位，该如何设置？任务导入2min小明很好地掌握了盒子模型的概念，以及盒子之间的关系后，他发现了一个重要的问题，如果仅仅按照默认的方式进行排版，网页所呈现出来的效果就没有多样化那么，怎么样才能把网页元素放在想要放的任意位置呢？

1.【任务导入】教师通过案例导入本次课的学习目标

1.学生了解本次课学习的目标任务描述3min本任务是不与橘子洲的网3「ll用图片和文字素材，制作一个41网页效果如下图所不橘子洲景区为修■•长沙It«mav»vI*1*aitr.«•!..•:a—口―］；-EX•335S|5二三一6zOSIItMin—_y》丁“•电!rwb»!9»«»»«:arn.*!Q;■门-“、“鼠r“.”・•》3S，•••«£•«-羽uHuf””*怖・—圻，6•acawR.wr■6^1♦*AV***•««sr.444B*rl£・♦»€・iea«-G・S・“，配1”5・£«，，・.R力供心』JfFin-“•••••••----11••*••«•，teWi4uiirnJI*1err.图1橘子洲景区网页效果卜绍红色旅游差*

1.1任务描述】讲师引入与描述任务内容与效果

1.学生了解本次课要完成的任务知识准备30min组织学生一起实施项目任务1网页布局规划i.【实操演示】教师技能训练任务，并进行实操演Zj\O

2.组织观看微课视频

3.组织发布【课堂讨论】

1.听取教师讲解知识占•

八、、

92.积极参与课堂活动^wrapperwidth:1000px；#headerwidth:1000px;height:500px;#logoftbanner#contentwidth:1000px;height:420px;#leftwidth:2OOpx;height:420px;#rightwidth:770px;height:420px;#footerwidth:1000px;height:40px;2创建站点3创建空白文档4创建CSS文档5将CSS文档链接到页面6页面初始化header区域的制作navi区域的制作content区域的制作footer区域的制作课堂讨论请同学们拿出笔和纸，绘制本任务案例的网页布局图，拍照上传技能训练30min技能训练组织同学们作业里完成“

2.

3.3任务实施之橘子洲景区网页”，并按要求在指定位置提交作业可参考“任务3橘子洲景区网页效果教学视频”

1.【实操演示】教师技能训练任务，并进行实操演zKo

2.1发布任务】教师在学习通发布技能任务

3.【实践指导】来回巡视，及时帮助学生解决问题.学生查看技能训练任务.完成技能训练题知识检测10min组织同学们到考试中里完成“模块二CSS基础知识单元测试”金单元涮设测试第二单元CSS基础知识单元测试

一、单项选择题

1.下列关于网页元素overflow的说法，正确的是oA.指网页元素的位置，距离左边框和上边框的距离B.指网页元素的位置，距离右边框和下边框的距离C.指网页兀素的定位方式，可以取值中包括absolute.【发布任务】教师在学习通发布活动.【归纳总结】来回巡视，及时帮助学生解决问题完成知识检测A.#bb{width lOOpx；position relativeB.#bb{width lOOpx；position sastic}C.#bb{width D.#bb{width lOOpx；lOOpx；}position absolute。