《网站前端技术》教案第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)【教师】提出以下问题在布局搜索行的过程中需要注意哪些问题？【学生】思考、举手回答
