《网站前端技术》教案第26课开发者商务网站建设（一）.docx
课题第26课开发者商务网站建设（一）课时2课时(90min)教学目标知识技能目标：结合第2章第5章的知识点，以本章网站实现为基础进行网站设计，尽量完善网站所需静态页面，具体包含布局首页、搜索行和一级导航素质目标：锻炼从全局视角看问题，客观辩证地思考和处理问题的科学思维方式教学重难点教学重点：布局首页的头部教学难点：布局搜索行、布局一级导航教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）T问题导入（5min）一传授辆（28min）T课堂讨论（10min）第2节课：问题导入（5min）一传授新知（28min）一课堂讨论（7min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解布局首页的头部、布局搜索行、布局一级导航等相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题在首页头部的布局过程中需要注意哪些问题？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）6.1 布局首页6.1.1 布局首页头部【教师】讲解布局首页头部的具体操作【多媒体】组织学生扫码播放”布局首页头部”视频（详见教材），让学生对这部分内容有一个大致地了解【教师】PPt展示“首页页眉效果”图片（详见教材），并讲解通过教师讲解、课堂互动等方式，使学生了解布局首页头部的相关流程及操作在首页头部的布局过程中需要注意一些问题：（1）头部背景色和下边框贯穿整行；（2）头部内容居于中间1200px；（3）头部各子元素向右对齐；（4）微信图标有子元素二维码，但默认隐藏；（5）除欢迎语和微信图标外，其他均为链接元素。【知识扫描】（1）网站的基本结构。（2）HTML文档与CSS文档的关联。【课堂互动】十【教师】提问在布局首页头部时，需要用到HTMLCSS哪些知识点？【学生】聆听、思考、回答（3）HTML相关知识点：HTML文档结构；双标签与单标签的区别；块标签与行标签的区别；典型的盒子模型标签<div>（双标签&行标签）；链接标签<a>（双标签&行标签）；图片标签<img>（单标签&行标签）。（4）CSS相关知识点：选择器的表达方式；ID选择器、类选择器、伪类选择器、子选择器等选择器类型与HTML元素属性定义的匹配性；盒子模型常用属性width、height、margin、padding,background；常用属性color、font-sizexbox-sizingscursorxfbnt-family的应用；相对于父元素水平居中的实现；文字相对于父元素垂直居中的实现；元素的显示方式属性display及行元素变为块元素的方法；块元素浮动排列的CSS设置属性float；图片元素相对于父元素垂直居中的CSS设置方法。【实现步骤】步骤1创建网站目录developer,以及子目录CSS和img。选择计算机合理位置创建目录developer,作为网站站点根目录°在目录developer中创建子目录CSS和img,分别用来存放相关css样式表文件和图片资源。步骤2创建index.html使用编辑软件"SublimeTexlw在目录developer中创建文件indexhml.在编辑区输入"html5'并按tab键，生成HTML文档基本结构，然后将标题标签<title>的内容修改为“开发者商务网站首页”。代码如下：<!CTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title开发者商务网站首叫Iitle><head><body><body><html>步骤3创建index.css使用编辑软件在目录developer/css中创建文件index.css编辑全局选择器设置页面默认属性：鼠标形状为手形；内边距和外边8巨均为0；计算盒子尺寸的方式为包含边框；文字颜色为#666；文字大小为I2px；文字字体为微软雅黑。代码如下：*cursor:pointer;padding:0;margin:0;box-sizing:border-box:>»关联index.html和index.css。在HTML文档head标签末尾添加link标*步骤4color:#666;fbnt-size:12px;font-family:“微软雅黑”;签，并设置关联文件地址，代码如下：linkrel="stylesheet"href="cssindex.css"【提示】步骤5注意此处的相对路径表达。布局最外层背景色贯穿整行的盒子，使用id控制HTML元素样式。HTML文档编辑操作：在body标签中输入代码"div",按下tab键，生成div标签。在div标签的起始标签中输入id及其属性值headbox.代码如下：divid="head-box"divCSS文档编辑操作：编辑id选择器#head-box,设置标签宽度为100%；高度为32PX；背景色为#F7F7F7；下边框为1px实心线，颜色为#CCC。代码如下：#head-boxwidth:100%;height:32px;background:#F7F7F7;border-bottom:Ipxsolid#CCC;步骤6布局居中排列的12(X) px的子盒子。HTML文档编辑操作在id为head-box的标签内部嵌套一个div标签,id属性为headbox-son,CSS文档编辑操作：编辑id选择器head-box-son,设置标签宽度为1200px；高度31px；相对于父元素水平居中；临时性背景颜色为red,方便查看布局效果。代码如下：#head-box-sonwidth:1200px;height:31px;margin:。auto;background:red;【提示】粗斜体部分为实现相对于父元素水平居中的相关代码。完成效果测试后会将红色背景色去掉。步腺7初步布局显示的文字元素和图片元素。HTML文档编辑操作：在id为head-box-son的<div>标签中输入代码"a©ass="head"$*9",并按下tab键，生成如下代码：< ahref="1'class="head">l<a>< ahref="nclass="head">2<a>< ahref=""class="head">3<a>< ahref=""class="head">4<a>< ahref=""class="head">5<a>< ahref=""class="head">6<a>< ahref=""class="head">7<a>< ahref=""class="head">8<a>在代码简易写法,aclass="head"S*9w中，口中的内容表示属性及属性值，该案例中表示类名为"head"；中的内容表示标签内容，$表示从I开始的数字，此处表示内容为19；*n表示生成标签的数量，此处的*9表示生成9个标签。CSS文档编辑操作：编辑类选择器head,设置标签为块元素；宽度自动；高度和行高均为31px,实现文字垂直居中；向右浮动；左右外边距为5px代码如下：.head(display:block;wid(h:auto;heighc31px;line-height:31px;float:right;margin:05px;I编辑a标签选择器，设置默认文本修饰样式为无，即消除链接标签自带的下划线；链接文字的颜色为#666。代码如下：atext-decoration:none;color:#666;I编辑a标签伪类选择器，设置鼠标浮于上方时，文字颜色为#B91720,向用户表达相应内容为链接的事实。a:hovercolor:#B91720;步骤8HTML文档编辑操作：对照目标效果图，将其中的数字1、2、3修改为图片标签<img>,并设置SrC属性，分别连接微博、微信、公告图片。将微信图片父元素修改为<div>标签；微博和公告图片父元素<a>的链接地址分别为weibo.html和notice.html代码如下：<ahref="weibo.h(ml"class=',head"><imgsrc="imgweibo.jpg"alt=""><a><divclass="head"><imgsrc="imgweixin.jpg"ah=,o'><div><ahref="notice.h(ml"class="head"><itngsrc="imgnotice.png"alt=""><a>对照目标效果图，将其中的4、5、6、7、8、9修改为相应的文字，并修改符号T和欢迎语的父元素为<div>标签，网站公告、我的订单、注册、登录父元素的链接地址分别为notice,htmlsindenthtmkreg.hunklogin.html代码如下:< ahref="notice.html"CIaSS="head"网站公告<a>< ahref="indent.html"CIaSS="head">我的订单va>< ahref="reg.htm,class="head">iflft<a><divclass=',head"><div>< ahref="login.html"class="head"><a><divClaSS="head">欢迎您来到开发者商务网站！<div>CSS文档编辑操作：编辑派生选择器head>img,设置图片相对于父元素垂直居中。代码如下：【学生】聆听、记录、理解课堂讨论(10min)【教师】提出以下问题，组织学生分组开展讨论(1)写出同时生成7个类名为head,内容为17的div标签的简易写法。(2)举例说明id选择器、类选择器、子选择器名称的书写方法。(3)写出文字相对于父元素水平居中的实现方法.(4)写出文字相对于父元素垂直居中的实现方法。(5)写出将块元素排列在同一行的实现方法。(6)写出图片相对于父元素垂直居中的实现方法。(7)写出将行元素变为块元素的实现方法。【学生】思考、讨论通过小组讨论的形式，活跃课堂气氛，使学生巩固所学知识第二节课问题导入(5min)【教师】提出以下问题在布局搜索行的过程中需要注意哪些问题？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(28min)6.1.2布局搜索行【教师】讲解布局搜索行的具体操作÷【多媒体】组织学生扫码播放”布局搜索行”视频(详见教材)，让学生对这部分内容有一个大致地了解【实现目标】(1)搜索行整体向右浮动；(2)搜索行包含文本框和两个按钮，按钮采用背景图片设置样式；(3)购物车在鼠标浮于其上方时有反显效果；(4)热门搜索行中冒号之后的文字均为链接，且均链接至二级列表页SmallClasshmL【知识扫描】【课堂互动】-H教师】提问在布局搜索行时，需要用到HTML、CSS哪些知识点?÷【学生】聆听、思考、回答(1)HTML相关知识点：输入框mpul的type属性决定其表现形式，如text表示文本域,button表示按钮。(2)CSS相关知识点：父元素被子元素自动撑开的实现方法；背景图片属性background-image设置方法；背景图片定位属性background-position设置方法；属性选择器0通过教师讲解、课堂互动等方式，让学生了解布局搜索行和一级导航的相关流程及操作构建居中盒子，应用于整个网站中宽度为1200px且水平居中的元素。HTML文档编辑操作：在id为head-box的<div>标签后插入类名为develop-box的<div>标签。CSS文档编辑操作：编辑类选择器develop-box,设置宽度为12()0PX；相对于父元素水平居中，上外边距为20,下外边距为0；高度为auto,溢出属性OVernOW为hidden,实现被子元素自动撑开；临时性背景颜色为yellow,代码如下：.develop-boxwidth:1200px;margin:20pxauto0;heighcauto;overflow:hidden:background:yellow;)插入普通按钮、提交按钮和输入框，并分别设置其样式。HTML文档编辑操作：在居中的盒子中依次插入一个普通按钮、一个提交按钮(注意设置value属性值为空字符串)和一个输入框.代码如下：<divclass="develop-box,'><inputtype="button''value="购物车(O)”><inputtype="submit"value=',',><inputtype=',text"ValUe="搜"水洗棉”，体验更多不同”><div>CSS文档编辑操作：编辑属性选择器inputtype="button",设置元素向右浮动；宽度为105px、高度和行高为29PX；背景图片为图片资源包中的bj2.png；背景定位为向左移155px；文字颜色为白色；为使文字在购物车图标右侧,设置左侧内边距为30pxo代码如下：inpu(type="bu11on"float:right;width:105px;height:29px;Iine-heighc29px;background-image:url(.imgbj2.png);background-position:-155px0;color:#fff:padding-left:30px;)编辑属性选择器inputtype="submit",设置搜索按钮向右浮动；宽度为49PX,高度为29px；右侧外四巨为20px；背景图片为bj2.png；背景定位为向左移动100px代码如下：inpu(type=',submit"floacright;width:49px;heighc29px;margin-right:20px;background-image:url(.imgbj2.png);background-position:-l(X)px0;编辑属性选择器inputtype="tex11,设置文本框向右浮动；宽度为200PX,高度和行高均为29px；边框为IPX实线，颜色为#CACACA；左侧内边5巨为IOpxinputtype="text"floacright;width:200px;heighc29px;line-height:29px;border:1PXSolid#CACACA;编辑伪类选择器inputtype="bimon":hover,设置购物车按钮在鼠标浮于其上方时颜 色反显.也就是设置图片背景定位位置为向左移动155 px ,向上移动29 PX ；文字颜色为#B91720（酒红色）代码如下：input|type="button":hoverbackground-position:-155px-29px;color:#B91720;步骤3根据已学技术，对照效果图实现热门搜索行的布局。【学生】聆听、记录、理解6.1.3布局一级导航【教师】讲解布局一级导航的具体操作*【多媒体】组织学生扫码播放”布局一级导航”视频（详见教材），让学生对这部分内容有一个大致地了解【实现目标】【课堂互动】+【教师】提问在首页一级导航布局过程中需要注意哪些问题？十【学生】聆听、思考、回答在布局过程中需要注意一些问题：（I）Logo图片及一级导航栏元素向左浮动；（2）除Logo图片外，文字元素均为链接，且首页链接indexhml,其他文字链接一级列表页bigClass,html；（3）除"首页"外，其余文字元素的父元素左侧均有边框；（4）前面的两个一级导航有绝对定位子元素，分别是NEW字样图片和HOT字样图片.【知识扫描】CSS相关知识点：相对定位和绝对定位。【实现步骤】步骤1使用develop-box类布局一级导航。HTML文档编辑操作：在搜索行后面输入develop-box类盒子<div>；在盒子内部输入图片标签<img>,设置其id属性为logo,图片地址为img/logo.png；继续在盒子内部输入IO个Vdiv>标签，类名皆为nav,然后在每个Vdiv>中输入一个<a>标签，并对照目标效果修改其中文字，其中首页链接地址为indexhml,且所在div元素多加一类名navi,其他文字链接地址为bigClass.html.<divclass="develop-box',><imgsrc="img/logo.png"all=""id="logo"><divclass="navnavl"xahref="index.html">首页<a><div><divclass="nav"><ahref="bigClass.html">T恤<a><div><divclass="nav"><ahref="bigClass.himl"><a><div><divclass="nav"><ahref="bigClass.hml”>衬衫<a><div>（详见教材）IO个nav盒子可以通过在编辑区输入以下代码，并按lab键生成。divclass="nav"*10>ahref="bigClass.html"SCSS文档编辑操作：编辑id选择器IogO,设置Ugo图片向左浮动.编辑类选择器nav,设置所有一级导航向左浮动；宽度为IOIPX,高度和行高均为24x；文本对齐方式为居中；上侧外边8巨为22px；左侧边框为1px实心线，颜色#808080；位置为相对定位，以便于其子元素相对于自身绝对定位。代码如下：.nav(Hoacleft;WidthJOlpx;heighc24px;line-height:24px;lext-align:center;margin-op:22px;border-left:Ipxsolid#808080;Positionrrelative;编辑类选择器navi,设置首页链接四周边框均为0。代码如下：.navlborder:0;i三三9为一级导航栏布局NEW字样和HOT字样绝对定位图片。HTML文档编辑操作：在T恤和衬衫所在<a>标签之后添加<img>标签，类名为nav-active,图片名称分别为new.png和hot.png<divclass="nav"><ahref="bigClass.html">T恤<a><imfsrc=''img/new.png,class="nav-active,'alt",'><div><divclass="nav'>><ahref="bigClass.html"><a><imgsrc="img/hot.png"class="nav-active"alt=,"><div>CSS文档编辑操作：编辑类选择器nav-active,设置其相对于父元素绝对定位，距父元素右侧边框IOpx;距父元素上边框-5px.nav-activePositionzabsolute;right:IOpx;top>5px;【学生】聆听、记录、理解课堂讨论(7min)【教师】组织学生分组，围绕以下问题开展讨论(1)举例说明输入框input的不同表现形式。(2)写出可以实现父元素被子元素自动撑开的CSS声明。(3)举例说明背景图片定位属性的使用方法。(4)描述实现子元素相对于父元素绝对定位的方法。通过小组讨论的形式，活跃课堂气氛，使学生I凡固所学知识【学生】讨论、回答*课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了布局首页头部、搜索行和一级导航的具体操作，希望通过本节课的讲解，大家可以巩固之前所学的相关知识，学会完善网站所需静态页面的方法，掌握网站的基础设计。【学生】总结回顾知识点总结知识点，IH固学生对布局首页头部、搜索行和一级导航相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：完成以下要求，并形成文档上传至APP(1)创建个人网站.(2)创建网站首页。(3)完成网站首页头部。(4)应用input标签完善个人网站首页布局。(5)利用背景图片及其定位完善个人网站首页布局。(6)利用定位属性完善个人网站首页布局。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力学生对本课程的学习兴致都较高，不过知识点较多，全部消化还是比较难。在教学中，教师要将学生作为教学的主体，时刻关注学生学习成绩、方法等各方面的变化，引导学生从被动学习转为自主学习和思考，从而提高学习的积极性和主动性。教学反思
