《网站前端技术》（梁玲）621-7 教案 第27课 开发者商务网站建设（二）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第27课开发者商务网站建设（二）课时2课时（90min）教学目标知识技能目标：掌握布局banner图、商品展示区、脚部与返回顶部按钮的相关操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：布局banner图、布局商品展示区教学难点：布局脚部与返回顶部按钮教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（23min）→上机操作（15min）第2节课：→传授新知（32min）→课堂讨论（5min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解布局banner图、布局商品展示区、布局脚部与返回顶部按钮等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题思考布局banner图的操作步骤有哪些？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（23min）6.1.4布局banner图【教师】讲解布局banner图的具体操作✈【多媒体】组织学生扫码播放“布局banner图”视频（详见教材），让学生对这部分内容有一个大致地了解【实现目标】【教师】ppt展示“首页banner效果”图片（详见教材），并讲解【课堂互动】✈【教师】提问在banner布局过程中需要注意哪些问题？✈【学生】聆听、思考、回答（1）banner图片一共有7张，但默认第一张显示，其他隐藏。（2）banner图上有左右两个按钮，默认为灰色，当鼠标移上时为酒红色。（3）banner图上有下方圆形按钮，数量同banner图，默认为灰色，显示对应图片时为酒红色。【知识扫描】【课堂互动】✈【教师】提问在布局banner图时，需要用到CSS哪些知识点？✈【学生】聆听、思考、回答CSS相关知识点：（1）内联样式；（2）边框圆角border-radius。【实现步骤】1使用类develop-box盒子布局banner图。1HTML文档编辑操作：在develop-box内嵌套7个图片标签，并设置它们的类名为banner，图片名称分别为ban1.jpg、ban2.jpg、……、ban7.jpg。<divclass="develop-box"> <imgsrc="img/ban1.jpg"alt=""class="banner"> <imgsrc="img/ban2.jpg"alt=""class="banner"> <imgsrc="img/ban3.jpg"alt=""class="banner"> <imgsrc="img/ban4.jpg"alt=""class="banner"> <imgsrc="img/ban5.jpg"alt=""class="banner"> <imgsrc="img/ban6.jpg"alt=""class="banner"> <imgsrc="img/ban7.jpg"alt=""class="banner"></div>在第1个<img>标签中添加行内样式，设置相应图片默认显示。<imgsrc="img/ban1.jpg"alt=""style="display:block;"class="banner">CSS文档编辑操作：编辑类选择器banner，设置图片宽度为1200px，高度为535px，默认不显示。.banner{ width:1200px; height:535px; display:none;}2布局左右按钮。2HTML文档编辑操作：在banner图所在类名为develop-box的<div>标签中添加两个<div>，并设置它们的公共类名为btn，不同类名分别为left-btn和right-btn。<divclass="btnleft-btn"></div><divclass="btnright-btn"></div>CSS文档编辑操作：①编辑公共类btn选择器，设置元素宽度为40px，高度为60px；背景图片为direction.png；相对于父元素develop-box绝对定位，距离其上边框235px。.btn{ width:40px; height:60px; background-image:url(../img/direction.png); position:absolute; top:235px;}【提示】此时需要在类选择器develop-box样式表中添加相对定位属性。②编辑左侧按钮类选择器left-btn，设置元素背景图片定位属性为00；绝对定位尺寸为距父元素左侧40px。.left-btn{ background-position:00; left:40px;}③编辑右侧按钮类选择器right-btn，设置元素背景图片定位属性向左偏移40px；绝对定位尺寸为距父元素右侧40px。.right-btn{ background-position:-40px0; right:40px;}④编辑当鼠标置于左侧按钮上方时的伪类选择器，设置届时元素背景图片定位尺寸为向上偏移60px。.left-btn:hover{background-position:0-60px;}⑤编辑当鼠标置于右侧按钮上方时的伪类选择器，设置元素届时背景图片定位尺寸为向左偏移40px，向上偏移60px。.right-btn:hover{background-position:-40px-60px;}3布局下方按钮。3HTML文档编辑操作：在banner图所在develop-box盒子末尾嵌套一个类名为btns-box的<div>标签，然后在其中嵌套7个类名为btns的<div>标签，并使用内联样式设置第1个btns背景颜色为酒红色#B91720。CSS文档编辑操作：编辑类选择器btns-box，设置选择器宽度为210px，高度为20px；相对于父元素绝对定位，距其下边框50px；设置外边距为自动，即相对父元素水平居中；左偏移和右偏移均为0。.btns-box{ width:210px; height:20px; position:absolute; bottom:50px; margin:auto; left:0; right:0;}编辑类选择器btns，设置选择器宽度为20px，高度为20px；向左浮动；左右外边距均为5px；边框圆角为50%；背景颜色为#888。.btns{ width:20px; height:20px; float:left; margin:05px; border-radius:50%; background:#888;}【课堂互动】✈【教师】提问（1）举例说明内联样式的使用方法。（2）举例说明标签边框圆角的设置方法。✈【学生】聆听、思考、回答【学生】聆听、记录、理解通过教师讲解、课堂互动等方式，使学生了解布局banner图的相关流程及操作上机操作（15min）【教师】组织学生上机完成以下任务布局个人网站首页中的banner。【学生】上机操作、完成任务通过上机操作，引发学生思考，锻炼学生的应用实践能力第二节课问题导入（3min）【教师】提出以下问题思考布局商品展示区的操作步骤有哪些？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（32min）6.1.5布局商品展示区【教师】讲解布局商品展示区的具体操作✈【多媒体】组织学生扫码播放“布局商品展示区”视频（详见教材），让学生对这部分内容有一个大致地了解【实现目标】【教师】ppt展示“首页商品展示区域经典布局”“首页商品展示区域普通布局”图片（详见教材），并讲解【课堂互动】✈【教师】提问在首页商品展示区布局过程中需要注意哪些问题？✈【学生】聆听、思考、回答（1）每一组商品信息结构均为上下结构，且下方文字区域高度为70px；（2）经典布局左中右区域的宽度分别为590px、290px、286px；（3）经典布局左右图片和普通布局图片高度均为440px；（4）经典布局中部区域的上下图片高度分别为175px和180px。【知识扫描】【课堂互动】✈【教师】提问在布局商品展示区时，需要用到CSS哪些知识点？✈【学生】聆听、思考、回答（1）强化前面HTML标签的相关知识点。（2）CSS相关知识点：①弹性布局flex属性；②后代选择器。【实现步骤】1用类为develop-box的<div>标签构建经典布局区域的左中右布局。1HTML文档编辑操作：①在banner区域之后输入develop-box盒子，在其中插入商品展示区标题图片。<divclass="develop-box"> <imgsrc="img/huo1.jpg"alt=""></div>②在标题图片之后添加develop-box盒子，并为其添加类名showA，然后在其中嵌套左中右三个<div>。<divclass="develop-boxshowA"> <divclass="showA-left"></div> <divclass="showA-middle"></div> <divclass="showA-right"></div></div>CSS文档编辑操作：编辑类选择器showA，设置显示方式为弹性布局flex。.showA{display:flex;}②编辑类选择器showA-left，设置宽度为590px，高度为510px；右侧外边距为17px；临时背景颜色为粉色。.showA-left{ width:590px; height:510px; margin-right:17px; background:pink;}③.showA-middle{ width:290px; height:510px; background:pink;}④编辑类选择器showA-right，设置宽度为286px，高度为510px；左侧外边距为17px；临时背景颜色为粉色。.showA-right{ width:286px; height:510px; margin-left:17px; background:pink;}【教师】ppt展示“商品展示区经典布局区域中间效果1”图片（详见教材）2将经典布局区域中间的盒子布局为上下结构。2HTML文档编辑操作：在经典布局区域中间的盒子内部嵌套上下两个<div>标签，并设置类名分别为showA-top和showA-bottom。<divclass="showA-middle"> <divclass="showA-top"></div> <divclass="showA-bottom"></div></div>CSS文档编辑操作：①编辑类选择器showA-top，设置其宽度为290px，高度为245px；下方外边距为15px；临时性背景颜色为blue。.showA-top{ width:290px; height:245px; margin-bottom:15px; background:blue;}②编辑类选择器showA-bottom，设置其宽度为290px，高度为250px；临时性背景颜色为blue。.showA-bottom{ width:290px; height:250px; background:blue;}【教师】ppt展示“商品展示区经典布局区域中间效果2”图片（详见教材）3布局单个商品区域。3HTML文档编辑操作：①在类元素showA-left内部嵌套一个<img>标签，图片为huo1-1.jpg；②在类元素showA-left内部继续嵌套一个<div>标签，并设置其类名为show-font；③在类元素show-font内部输入两个<div>标签，并设置其类名分别为show-fontL和show-fontR。<divclass="showA-left"> <imgsrc="img/huo1-1.jpg"alt=""> <divclass="show-font"> <divclass="show-fontL">商品名称</div> <divclass="show-fontR">￥233.00</div> </div></div>CSS文档编辑操作：①编辑类选择器show-font，设置其宽度为100%，高度和行高均为70px；左右下边框为1px实心线，颜色为#C7C7C7。.show-font{ width:100%; height:70px; line-height:70px; border:1pxsolid#C7C7C7; border-top:0;}②编辑类选择器show-fontL，设置其向左浮动；左侧内边距为30px。.show-fontL{ float:left; padding-left:30px;}③编辑类选择器show-fontR，设置其向右浮动；右侧内边距为30px；文字颜色为酒红色。.show-fontR{ float:right; padding-right:30px; color:#B91720;}④编辑类showA的后代img选择器，设置其垂直方向顶端对齐，可消除图片与其相邻元素之间的间隙。.showAimg{ vertical-align:top;}【教师】ppt展示“商品展示区经典布局区域中间效果3”图片（详见教材）4复制单个商品区域的结构代码到合理位置。4HTML文档编辑操作：复制步骤3粗斜体部分元素结构代码分别至类元素showA-top、showA-bottom、showA-right中，并依次修改图片名称为huo1-2.jpg、huo1-3.jpg、huo1-4.jpg；然后将经典布局区域的临时性背景颜色去掉。此时就完成了经典布局区域的制作。5构建商品展示区普通布局。5HTML文档编辑操作：继续添加一个类名为develop-box的<div>，并为其添加类名showB；然后在其中嵌套4个<div>标签，并设置它们的类名为showB-box。<divclass="develop-boxshowB"> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div></div>CSS文档编辑操作：编辑showB类选择器，设置其显示方式为弹性布局flex。.showB{display:flex;}编辑showB-box类选择器，设置其宽度为285px，高度为510px；左侧外边距为8px，右侧外边距为7px；临时性背景颜色为粉色。.showB-box{ width:285px; height:510px; margin:07px08px; background:pink;}【教师】ppt展示“商品展示区普通布局区域中间效果”图片（详见教材）6完善普通布局。6HTML文档编辑操作：复制步骤3单个商品结构至4个showB-box中，并依次修改图片名称为huo4-9.jpg、huo4-10.jpg、huo4-11.jpg、huo4-12.jpg。CSS文档编辑操作：编辑showB后代选择器img，设置其垂直对齐方式为顶端对齐，如showA中类似操作。此时就完成了普通布局区域的制作。【学生】聆听、记录、理解6.1.6布局脚部与返回顶部按钮【教师】讲解布局脚部与返回顶部按钮的具体操作【实现目标】【教师】ppt展示“脚部与返回顶部按钮布局效果”图片（详见教材），并讲解【课堂互动】✈【教师】提问在布局脚部与返回顶部按钮过程中需要注意哪些问题？✈【学生】聆听、思考、回答在首页脚部和返回顶部的布局过程中需要注意一些问题：（1）脚部最底端左侧5个图片元素是用同一张背景图片back.png实现的；（2）脚部最底端右侧图片为独立的一张图片yq6.png；（3）返回顶部区域的三个元素由同一张图片fix.png实现；（4）返回顶部区域所在图片为固定定位的<div>标签，“下载APP”和“在线客服”为链接标签。【知识扫描】（1）HTML相关知识点：空链接的设置。（2）CSS相关知识点：①固定定位；②透明度。【实现步骤】本节除固定定位图片元素为主要讲解内容之外，其他脚部相关布局由学生根据已学技术独立完成。1布局固定定位图片。1HTML文档编辑操作：在<body>标签末尾嵌套一个<div>标签，设置其id属性值为fix-box。CSS文档编辑操作：编辑id选择器fix-box，设置其宽度为75px，高度为205px；背景图片为fix.png；相对于浏览器窗口固定定位，距浏览器右侧50px，下边框50px。#fix-box{ width:75px; height:205px; background-image:url(../img/fix.png); position:fixed; right:50px; bottom:50px;}2布局三个子元素。为了使一张图片的三个区域分别实现不同的功能，在id为fix-box的<div>标签内嵌套两个<a>标签和一个<div>标签。2HTML文档编辑操作：在id为fix-box的<div>标签内嵌套两个<a>标签，id属性值分别为fix-app和fix-cust，href属性值均为空。<ahref=""id="fix-app"></a><ahref=""id="fix-cust"></a>在上方的<a>标签下方接着嵌套一个<div>标签，并设置其id属性值为fix-backTop。<divid="fix-backTop"></div>CSS文档编辑操作：①编辑id选择器fix-app，设置其显示为块元素；临时性背景色为红色；宽度为75px，高度为77px；透明度为0.5。#fix-app{ display:block; background:red; width:75px; height:77px; opacity:0.5;}【提示】此处设置背景色和