《《网站前端技术》教案第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;编
13、辑类选择器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；临时背景颜色为粉色。.showA-r
14、ight(width:286px;height:510px;margin-left:17px;background: pink;【教师】PPt展示“商品展示区经典布局区域中间效果1”图片（详见教材）将经典布局区域中间的盒子布局为上下结构。步骤2HTML文档编辑操作：在经典布局区域中间的盒子内部嵌套上下两个标签，并设置类名分别为showA-top和showA-bottomCSS文档编辑操作：编辑类选择器showA-top,设置其宽度为290px,高度为245PX；下方外谢巨为15px；临时性背景颜色为blue.showA-topwid(h:290px;height:245px;margin-bo
15、ttom:15px;background:blue;编辑类选择器showA-bottom,设置其宽度为290px,高度为250px临时性背景颜色为blue.showA-boomwidth:290px;heighc250px;background:blue;【教师】PPt展示“商品展示区经典布局区域中间效果2”图片（详见教材）步骤3布局单个商品区域。HTML文档编辑操作：在类元素ShowA-Ieft内部嵌套一个标签，图片为huol-l.jpg；在类元素ShowA-Ieft内部继续嵌套一个标签，并设置其类名为ShOW-font:在类元素ShoW-fon【内部输入两个标签，并设置其类名分别为show
16、-fontL和show-fontR商品名称233.00CSS文档编辑操作：编辑类选择器Show-font,设置其宽度为100%,高度和行高均为70px；左右下边框为IPX实心线，颜色为#C7C7C7。.show-fontwidth:100%;heightz70px:line-height:70px;border:1pxsolid#C7C7C7;border-top:。;编辑类选择器show-fontL,设置其向左浮动；左侧内边S巨为30px.show-fbntL(float:left;padding-lefc30px;)编辑类选择器Show-fontR ,设置其向右浮动；右侧内边距为30 PX
17、 ；文字颜色为酒红.show-fontR（floatright;padding-right:3（）px;color:#B91720;编辑类showA的后代img选择器,设置其垂直方向顶端对齐，可消除图片与其相邻元素之间的间隙。.showAimgverticai-align:top;【教师】PPt展示“商品展示区经典布局区域中间效果3”图片（详见教材）步腺4复制单个商品区域的结构代码到合理位置。HTML文档编辑操作：复制步骤3粗斜体部分元素结构代码分别至类元素ShoWA-top、ShOWA-bottom、ShOWA-righl中，并依次修改图片名称为huol-2.jpg、huol-3.jpgxh
18、uol-4.jpg；然后将经典布局区域的临时性背景颜色去掉。此时就完成了经典布局区域的制作.步螺5构建商品展小区普通布局。HTML文档编辑操作：继续添加一个类名为develop-box的,并为其添加类名showB；然后在其中嵌套4个标签，并设置它们的类名为showB-boxCSS文档编辑操作：编辑ShOWB类选择器，设置其显示方式为弹性布局flex。.showBdisplay:flex;编辑showB-box类选择器，设置其宽度为285px,高度为51()px；左侧外边8巨为8px,右侧外边距为7PX；临时性背景颜色为粉色。.showB-boxwidth:285px;height:510px;
19、margin:O7px08px;background:pink;【教师】PPt展示“商品展示区普通布局区域中间效果”图片（详见教材）步煤6完善普通布局。HTML文档编辑操作：复制步骤3单个商品结构至4个showB-box中，并依次修改图片名称为huo49.jpg、huo410.jpg、huo4-ll.jpg、huo4-12.jpg,CSS文档编辑操作：编辑ShOWB后代选择器img,设置其垂直对齐方式为顶端对齐，如ShowA中类似操作。此时就完成了普通布局区域的制作。【学生】聆听、记录、理解6.1.6布局脚部与返回顶部按钮【教师】讲解布局脚部与返回顶部按钮的具体操作【实现目标】【教师】PPt展
20、示“脚部与返回顶部按钮布局效果”图片（详见教材），并讲解【课堂互动】十【教师】提问在布局脚部与返回顶部按钮过程中需要注意哪些问题？*【学生】聆听、思考、回答在首页脚部和返回顶部的布局过程中需要注意一些问题：(【)脚部最底端左侧5个图片元素是用同T长背景图片back.png实现的；(2)脚部最底端右侧图片为独立的一张图片yq6.png；(3)返回顶部区域的三个元素由同一张图片fix.png实现；(4)返回顶部区域所在图片为固定定位的div标签，下载APP和在线客服为链接标签.【知识扫描】(1)HTML相关知识点：空链接的设置。(2)CSS相关知识点：固定定位；透明度。【实现步骤】本节除固定定位图
21、片元素为主要讲解内容之外，其他脚部相关布局由学生根据已学技术啦孤步骤1布局固定定位图片。HTML文档编辑操作：在body标签末尾嵌套一个div标签，设置其id属性值为fix-CSS文档编辑操作：编辑id选择器fix-box,设置其宽度为75PX,高度为205px；背景图片为fix.png；相对于浏览器窗口固定定位，距浏览器右侧50px,下边框50px#fix-boxwidth:75px;height:205px;background-image:url(./img/fix.png);position:fixed;right:50px;bottom:50px;步骤2布局三个子元素。为了使一张图片
22、的三个区域分别实现不同的功能，在id为fix-box的div标签内嵌套两个a标签和一个div标签。HTML文档编辑操作：在id为fix-box的Vdiv标签内嵌套两个va标签,id属性值分别为fix-app和fix-cust1href属性值均为空。ahref=id=fix-appaahref=id=,fix-cust,a在上方的a标签下方接着嵌套一个div标签，并设置其id属性值为fix-backTopdivid=fix-backTopdivCSS文档编辑操作：编辑id选择器fix-叩P,设置其显示为块元素；临时性背景色为红色；宽度为75PX,高度为77PX；透明度为0.5#fix-appdi
23、splay:block:background:red;Widlh:75px;heighc77px;opacity:0.5;I【提示】此处设置背景色和透明度是为了有效控制元素的位置和大小，从而使客户在使用功能时不易出现点击错误。编辑id选择器fix-cust,设置其显示为块元素；临时性背景色为黄色；宽度为75PX,高度为73PX；透明度为().5#fix-cust(display:block;background:yellow;widlh:75px;height:73px;opacity:0.5;编辑id选择器fix-backTop,设置其临时性背景色为蓝色；宽度为75px,高度为55PX；透明
24、度为05.#fix-backTopbackground:blue:width:75px;height:55px;opacity:0.5;【教师】PPt展示“返回顶部区域中间效果”图片(详见教材)最终将临时性背景色和透明度去掉即可。【学生】聆听、记录、理解课堂讨论(5min)【教师】组织学生分组，围绕以下问题开展讨论(I)写出空链接实现的三种方法0(2)写出透明度属性的用法。【学生】讨论、回答通过小组讨论，使学生I凡固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了布局banner图、商品展示区、脚部与返回顶部按钮的具体操作,希望通过本节课的讲解，大家可以巩固之前所学的相关知识，学会完善网站所需静态页面的方法，掌握网站的基础设计。【学生】总结回顾知识点总结知识点，巩固学生对布局banner图、商品展示区、脚部与返回顶部按钮等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：完成首页返回顶部元素布局，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，水平不一样的学生都较好地掌握了知识点。小组内的互助，满足了学生多样化的需要，促进了学生的个性发展，为形成一种积极向上的学习氛围创造了条件。
