《网站前端技术》教案第27课开发者商务网站建设（二）.docx

《《网站前端技术》教案第27课开发者商务网站建设（二）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第27课开发者商务网站建设（二）.docx（14页珍藏版）》请在优知文库上搜索。

1、.f.1.3出嗤三一；户课题第27课开发者商务网站建设（二）课时2课时(90min)教学目标知识技能目标：掌握布局banner图、商品展示区、脚部与返回顶部按钮的相关操作素质目标：通过对案例的不断完善锻炼学生精益求精的态度教学重难点教学重点：布局banner图、布局商品展示区教学难点：布局脚部与返回顶部按钮教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（23min）一上机操作（15min）第2节课：问题导入（3min）一传授新知（32min）一课堂讨论（5min）一课堂小结（

2、3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解布局banner图、布局商品展示区、布局脚部与返回顶部按钮等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题思考布局banner图的操作步骤有哪些？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，

3、引导学生主动思考，激发学生的学习兴趣传授新知（23min）6.1.4布局banner图【教师】讲解布局banner图的具体操作【多媒体】组织学生扫码播放“布局banner图”视频（详见教材），让学生对这部分内容有一个大致地了解【实现目标】【教师】PPt展示“首页banner效果”图片（详见教材），并讲解通过教师讲解、课堂互动等方式，使学生了解布局banner图的相关流程及操作+【教师】提问在banner布局过程中需要注意哪些问题？【学生】聆听、思考、回答(1)banner图片一共有7张，但默认第一张显示，其他隐藏。(2)banner图上有左右两个按钮，默认为灰色，当鼠标移上时为酒红色。(3)b

4、anner图上有下方圆形按钮，数量同banner图，默认为灰色，显示对应图片时为酒红色.【知识扫描】【课堂互动】十【教师】提问在布局banner图时，需要用到CSS哪些知识点？【学生】聆听、思考、回答CSS相关知识点：(1)内联样式；(2)边框圆角border-radius.【实现步骤】KSta使用类develop-box盒子布局banner图。HTML文档编辑操作：在develop-box内嵌套7个图片标签，并设置它们的类名为banner,图片名称分别为ban1.jpgxban2.jpgxban7.jpgitngsrc=ingban1.jpgalt=imgsrc=imgban2.jpgalt

5、=imgsrc=imgban3.jpgalt=imgsrc=imgban4.jpgalt=itngsrc=imgban5.jpgalt=imgsrc=imgban6.jpgalt=imgsrc=imgban7.jpgalt=class=,bannerClaSS=banner”class=bannerclass=bannerclass=bannerclass=bannerclass=banner在第1个标签中添加行内样式，设置相应图片默认显示.CSS文档编辑操作：编辑类选择器banner,设置图片宽度为1200px,高度为535px,默认不显示。.bannerwidth:1200px;heigh

6、c535px;display:none;E三Q布局左右按钮。HTML文档编辑操作：在banner图所在类名为加VeIoP-box的标签中添加两个,并设置它们的公共类名为Nn,不同类名分别为left-btn和right-b(nCSS文档编辑操作：4.btn编辑公共类btn选择器，设置元素宽度为40px,高度为60PX；背景图片为direction.png；相对于父元素develop-box绝对定位，距离其上边框235pxwidth:40px;height:60px;background-image:url(.imgdirection.png);position:absolute;top:235p

7、x;【提示】此时需要在类选择器develop-box样式表中添加相对定位属性。编辑左侧按钮类选择器Ieft-bm,设置元素背景图片定位属性为00；绝对定位尺寸为距父元素左侧40px.left-btnbackground-position:00;left:40px;编辑右侧按钮类选择器righl-bln,设置元素背景图片定位属性向左偏移40px；绝对定位尺寸为距父元素右侧40px.right-btn(background-position40px0;right:40px;编辑当鼠标置于左侧按钮上方时的伪类选择器，设置届时元素背景图片定位尺寸为向上偏移60px.left-btn:hoverback

8、ground-position:0-60px;编辑当鼠标置于右侧按钮上方时的伪类选择器，设置元素届时背景图片定位尺寸为向左偏移40px,向上偏移60px.righl-btnrhoverbackground-position:-40px-60px;步腺3HTML文档编辑操作：在banner图所在develop-box盒子末尾嵌套一个类名为btns-box的div标签，然后在其中嵌套7个类名为btns的div标签，并使用内联样式设置第1个bins背景颜色为酒红色#B91720.CSS文档编辑操作：编辑类选择器btns-box,设置选择器宽度为210px,高度为20px；相对于父元素绝对定位，距其下

9、边框50PX；设置外边距为自动，即相对父元素水平居中；左偏移和右偏移均为0.btns-boxWidlh:210px;height:20px;position:absolute;bottom:50px;margin:auto;left:0;right:。;编辑类选择器bins,设置选择器宽度为20px,高度为20px；向左浮动；左右外边距均为5px；边框圆角为50%；背景颜色为#888。.btnswidth:20px;heighc20px;-一一,5.Ier*-一卷通一O,l:,a,.p.V-_*margin:05px;border-radius:50%;background:#888;【课堂互

10、动】十【教师】提问(1)举例说明内联样式的使用方法。(2)举例说明标签边框圆角的设置方法。【学生】聆听、思考、回答【学生】聆听、记录、理解上机操作(15min)【教师】组织学生上机完成以下任务布局个人网站首页中的banner.【学生】上机操作、完成任务通过上机操作，引发学生思考，锻炼学生的应用实践能力第二节课问题导入(3min)【教师】提出以下问题思考布局商品展示区的操作步骤有哪些？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(32min)6.1.5布局商品展示区【教师】讲解布局商品展示区的具体操作【多媒体】组织学生扫码播放”布局商品展示区”视频(详见教材)，让学生对这部分内容

11、有一个大致地了解【实现目标】【教师】PPt展示”首页商品展示区域经典布局”“首页商品展示区域普通布局”图片(详见教材)，并讲解【课堂互动】十【教师】提问在首页商品展示区布局过程中需要注意哪些问题?+【学生】聆听、思考、回答通过教师讲解、课堂互动等方式，让学生了解布局商品展小区、布局脚部与返回顶部按钮的相关流程及操作(1)每一组商品信息结构均为上下结构，且下方文字区域高度为7()PX；(2)经典布局左中右区域的宽度分别为590px、290px、286px；(3)经典布局左右图片和普通布局图片高度均为440px；(4)经典布局中部区域的上下图片高度分别为175px和180px【知识扫描】【课堂互动

12、】中【教师】提问在布局商品展示区时，需要用到CSS哪些知识点？*【学生】聆听、思考、回答(1)强化前面HTML标签的相关知识点。(2)CSS相关知识点：弹性布局flex属性；后代选择器。步骤1【实现步骤】用类为develop-box的div标签构建经典布局区域的左中右布局。HTML文档编辑操作：在banner区域之后输入develop-box盒子，在其中插入商品展示区标题图片。在标题图片之后添加develop-box盒子，并为其添加类名showA,然后在其中嵌套左中右三个vdiveCSS文档编辑操作：编辑类选择器ShowA,设置显示方式为弹性布局flex.showAdisplay:flex;编辑类选择器ShowA-Iefl,设置宽度为590px,高度为510px；右侧外谢巨为17px；临时背景颜色为粉色。.ShowA-Ieftfwidth:590px:height:510px;margin-right:17px;background:pink;编辑类选择器ShoWA-middle,设置宽度为290px,高度为510PX；临时背景颜色为粉色。.ShowA-Iniddlewidth:290px;height:510px;background:pink;编辑类选择器showA-right,设置宽度为286PX,高度为510PX；左侧外边S巨为17px；临时