《网站前端技术》教案第17课CSS与CSS3（八）.docx
课题第17课CSS与CSS3（八）课时2课时(90min)教学目标知识技能目标：（1）掌握CSS自适应屏幕功能的应用（2）掌握利用HTML,CSSS网页制作技术，制作某婚礼策划机构首页的具体方法和流程素质目标：实现理论与实践相结合，锻炼动手能力教学重难点教学重点：自适应屏幕功能教学难点：利用HTML、CSSS网页制作技术，制作婚礼策划机构首页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（8min）一传授新知（25min）一头脑风暴（10min）第2节课：问题导入（5min）一综合案例（35min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解自适应屏幕的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题如何让网页做到适应不同屏幕大小的移动终端呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）3.17自适应屏幕nIediascreen【教师】讲解自适应屏幕皿由2SCreen功能的具体方法【课堂互动】中【教师】提问CSS3是通过哪项功能来实现自适应屏幕大小的？通过教师讲解、课堂互动、演示操作等方式，使学生了解通过mediascreen功能实现自适应屏幕大小的具体方法十【学生】聆听、思考、回答CSS3提供了mediascreen功能来实现自适应屏幕大小。具体有三种方法。3.17.1 尺寸最小法min-width属性功能：定义当屏幕尺寸大于等于某尺寸时，要执行的属性。应用格式：mediascreenand(min-width:尺寸值px)选择器及其CSS样式列表)【示例3-17-1编辑HTML文档<body>标签的内容，布局一个大盒子里有6个小盒子，大盒子#box尺寸为100%,所有小盒子box向左浮动的页面。代码如下：<divid="box',><divclass="box">l<div><divclass="box">2<div><divclass="box">3<div><divclass="box">4<div><divclass="box">5<div><divclass="box">6<div><div>在VSlyIe>标签内写入CSS选择器：*box-sizing:border-box;#boxwidth:100%;margin:50px;.boxfbnt-size:40px;color:#fff;background:red;text-alignxenter;line-height:1OOpx;floacleft;border:1pxsolidblue;width:3(X)px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”未使SCreen属性之前的效果”图片(详见教材)，并讲解效果：改变浏览器窗口宽度时，有可能出现混乱的效果，显得布局较为混乱.在VStryIe>标签内添加如下代码：nIediascreenand(min-width:600px).boxwidth:30%;mediascreenand(min-wid(h:900px).boxwidth:16%;同时修改原代码中粗斜体width属性值400px为45%。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”应用mediascreen效果”图片(详见教材)，并讲解效果：通过屏幕宽度控制同类盒子一行的个数，在屏幕宽度小于等于600px时，每行有两个盒子；在大于等于600PX时，每行有三个盒子；在大于等于900PX时，每行有六个盒子。【提示】CSS中同一个选择器的同一属性会自上而下解释，后面的属性值会覆盖前面的属性值。当使用尺寸最小法时，如果屏幕的值较大，解释器会依次找到那个最接近屏幕宽度所属的属性去执行，所以此时必须采用尺寸"前边的小，后边的大"的原则。3.17.2 尺寸最大法max-width属性功能：定义当屏幕尺寸小于等于某尺寸时，要执行的属性。应用格式：mediascreenand(max-width:尺寸值px)选择器及属性列表【示例3-17-2修改【示例3-17-1关于屏幕响应式声明：mediascreenand(max-width:9(X)px)(.boxwidth:30%;I()mediascreenand(max-width:600px).boxwidth:45%;同时修改原代码中粗斜体width属性400px为16%效果：同【示例3-17-1】最终效果。【提示】同样由于CSS选择器由上而下解释的原理，对于最大尺寸法要采用尺寸"前面的大，后面的小"的原则。3.17.3 尺寸区间法min-widthandmax-width功能：定义屏幕尺寸在某个区间范围时要执行的属性。mediascreenand(min-width:尺寸值px)and(max-widlh:尺寸值PX)选择器及其属性列表【示例3-17-3修改【示例3-17-1关于屏幕响应式声明：mediascreenand(min-width:90()px).boxwidth:16%;Imediascreenand(min-width:600px)and(max-width:900px).boxwidthr30%;mediascreenand(max-width:600px).box(width:45%;【提示】由于是尺寸区间法，对不同尺寸范围的样式表达非常清晰，不存在互相覆盖的问题，所以屏幕控制有关代码不需要遵循一定规律。效果：同【示例3-17-1】最终效果。头脑风暴(10min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题,讨论如何使用本节课中介绍的min-width、max-width、min-widthandmax-width这种方法。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(5min)【教师】提出以下问Sg利用前面所学的HTML和CSSS网页制作技术，可以设计什么类型的网站？实现哪些功能？【学生】思考、举手回答通过提问引导学生思考本节课内容综合案例(35min)3.18综合案例一制作婚礼策划机构首页【教师】讲解制作婚礼策划机构首页的具体操作流程在本案例中，将利用前面所学的HTML和CSSS网页制作技术，制作某婚礼策划机构的首页。【课堂互动】十【教师】PPt展示图片“婚礼策划机构首页效果“(详见教材)，并提问制作婚礼策划机构网页的步骤有哪些？÷【学生】聆听、思考、回答具体制作时，可按照搭建页面整体框架、制作网页头部、制作网页导航部分、制作主体内容的上面部分、制作主体内容的中间部分、制作主体内容的下面部分、制作友情链接部分、制作网页底部的流程进行。1 .搭建网站(I)在C盘上创建文件夹，命名为"wedding”,将此文件夹作为项目站点。将本书配套素材"教材源码和素材媒合案例鳏合案例素材Ximg(婚礼策划机构首页)”文件夹中的"images”文件夹复制到"wedding"文彳牛夹中。(2)使用快捷方式在站点根目录创建文本文档，并设置文件名为"indexhtml"。2 .搭建页面整体框架(1)整体布局分析。【课堂互动】【教师】并提问结合效果图，分析其整体布局具有什么特点？通过教师讲解、课堂互动等方式，让学生了解利用HTML和CSSS网页制作技术，制作某婚礼策划机构的首页的具体流程从效果图上看，该网页整个页面布局是常见的三行样式，整个页面居中显示。其中第一行放置网站log。及导航；第二行放置用户登录、图片幻灯显示、婚礼资讯、视频展示、作品展示区；第三行放置友情链接与网站相关信息。分析完这些，网页框架结构也就好搭建了。【教师】PPt展示图片“整体页面框架图“(详见教材)，并讲解【课堂互动】【教师】聊问在搭建整体框架时需要注意些什么？÷【学生】聆听、思考、回答在搭建婚礼策划机构首页整体框架时需要注意以下事项。页面的大结构用的是id选择器，里面用的是CIaSS选择器。在定义选择器时，注意命名规范。如head、navxmain、foot等都是见名知意的。含有2个以上横向区块的时候,需要在外面嵌套一个区块.具体布局时，页面采取固定宽度且居中的办法，构建一个大的<div>(#all),里面放置5个<div>,分别为头部#head,导航#nav,主体#main,友情链接#link,底部#lbol；主体#main部分放置3个<div>分别是#ml、#m2和#m3/ml和#m2中又分别包含.login、.ad、.hlzx和.show几个<div>,其中横向排列的<div>使用浮动方式进行定位。(2)编写HTML代码。使用记事本打开前面新建的"indexhml"网页，然后根据前面的分析，在网页中插入各<div>标签，并设置id名或ClaSS名,从而搭建好网页的整体框架。代码如下：<divid=',al>><divid="head”>此处是头部的内容<div><divid="nav”>此处是导航部分的内容<div><divid="main"><divid=',ml',><divClaSS="login")此处是登录部分的内容<div><divCIaSS="ad">此处是图片显示部分的内容<div><div>(详见教材)(3)编写CSS代码.本例使用外部样式表来控制网页，因此,首先新建一个CSS样式表文件,将其以Stylexss为名保存在站点根文件夹中。为了让外部样式表能控制网页，在网页的Vhead><hcad>标签对之间输入如下代码。<linkhref=Mstyle.cssurel="styIesheet"lye="extcss'7>统一设置页面默认情况下的属性。打开StyIe样式表文件，输入如下代码。*(margin:。；padding:0;border:。；fbnt-size:12px;font-family:"宋体"：设置页面背景属性。这里将整个页面的背景颜色设为红色"#580000"。<linkhref"style.css"rel="stylesheet"type="textcss'7>设置页面最外层div的样式，即将页面整体宽度设为1007PX,并使其在任何浏览器内居中显示。#allwidth:1007px;margin:0auto;I设置头部层相关属性。综上所述，父层宽度为1007px,而这里应该重新定义子层宽度为960px注意：若不重新设置，则子层会继承父层的属性。#headwidth:960px;height:11（）px;margin:0auto;I设置导航层的相关属性。#navwidth:1007px;heighc65px:background:url（imagesdh.jpg）no-repealtopcenter;clear:both;margin:0auto;设置主要内容部分的大层样式。#mainwidth:960px;background-color:#FFFAEA;heighcauto;margin:0auto;）#main里面含有#m2、#m3三个层.先设置#ml层的框架，其里面含有login（用户登录区）和ad（图片展示区）两个层，这两个层都要浮动，并且需要设置宽度、高度和背景属性。#mlwidth:950px;height:210px;padding:5px;）（详见教材）#m2含有hlzx（婚礼资讯区）和show（视频展示区）两个层，这两个层都要设置浮动和左边距属性，从而使它们横向排列显示。此外，还需要设置宽度、高度和背景等属性。#m2heighc279px;width:960px;.hlzxWidIh:596px:float:left;margin-left:6px;background-color:#f7efca;height:279px;）.（详见教材）设置m3层（图片展示区）的样式。#m3width:96Ipx;heighc240px;width:960px;height:35px;background-color:#f6e1b6;margin:Oauto;)设置foot(页面底部)的样式.#footwidth:960px;margin:0auto;background:url(images/down.jpg)no-repeat;height:101px;cleaboth;text-alignxenter;font-size:12px;Iine-heighc25px;3.制作网页头部页头部分包含网页logo和联系电话，制作起来I：匕较简单。【教师】PPt展示图片“网页头部效果“(详见教材)，并讲解(1)编写HTML代码。在前面插入的id为head的<div>中插入Iogojpg图片，并输入电话号码.注意使用行内元素标签<span></SPan>将电话号码单独定义为一个区域，方便后面使用CSS控制。代码如下：<divid="head"><imgsrc="imageslogo.jpg"alt="logo"width="385"height="110"><span>O23-68880888<span><div>(2)编写CSS代码。logo图片是在页面左上角显示的，所以应让logo图片向左浮动，而电话号码向右浮动。head层已在前面设置，其高度是根据logo图片的高度设置的。#headimgfloat:left;电话号码部分的设置，包括文字大小、文字颜色、放置位置和浮动方式。#headspanfloat:right;margin:40px40pxOpxOpx;Color:#FFFFFF;fbnt-size:36px;)4.制作网页导航部分在前面已制作好导航栏的框架并设置了样式。这里我们用无序列表来制作导航栏，将每一个栏目放进<ii><i>标签对里并设置外间距宽度，然后将每一个列表项向左浮动并设置间距，最后设置超链接样式。【教师】PPt展示图片“导航部分效果”(详见教材)，并讲解(1)编写HTML代码。在前面插入的id为nav的<div><div>标签对中插入无序列表标签<ul>和列表项标签<li>，在各<li><i>标签对中输入文本并设置超链接，最终代码如下。<divid="nav"><ul><li><ahref=*">机构介绍<a><li><li><ahref="#"乂乍品欣赏va><li><li><ahref=W>套系报价<axli><li><ahref=*'><½惠;tj<a><li><li><ahref=*">联系我们<a><li><ul><div>(2)编写CSS代码。在前面已设置了nav层的样式，下面设置其包含的各标签的样式，各代码可在nav层样式代码的下方输入。设置导航层里面无序列表的属性,需要注意的是height÷padding的值不能超过父层的高度(前面设置的父层高度为65px)#navulheight:30px;Padding-IOP:3Opx;margin-lefu80px;设置列表项的属性。#navlilist-style-typeznone:float:left;width:80px;margin-left:40px;text-alignzcenter;(详见教材)设置列表项中超链接标签<a>的默认属性。必须将<a>标签设置为块状元素，鼠标经过状态才会正常显示背景图片。#navIiacolor:#ffF7b3;text-decoration:none;display:block;)设置鼠标指针移到超链接上面时超链接的属性。#navIia:hover(color:#8blflc;background-image:url(images/nav_bj.gif);background-repeacno-repeat;line-heighc24px;)5.制作网页其他部分接下来参考前面的方法，按制作主体内容的上面部分、制作主体内容的中间部分、制作主体内容的下面部分、制作友情链接部分、制作网页底部的流程制作网页的其他部分。【教师】PPt展示图片”主体内容的上面部分效果”“主体内容的中间部分效果“主体内容的下面部分效果”“友情链接部分效果”“网页底部效果”(详见教材)各部分的效果分别如图3-18-5、3-18-6.3-18-7.3-18-8、3-18-9所示；相关代码可参考本书提供的素材。【学生】聆听、记录、理解*课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了通过|比(screen功能实现自适应屏幕大小的具体方法，以及利用HTML和CSSS技术制作网页的具体流程，希望通过本节课的讲解，大家可以掌握相关方法与操作，并对网页制作有更深入地了解，从而提升专业技能。【学生】总结回顾知识点总结知识点，巩固学生对01川21screen功能、制作网页的具体流程等相关知识的印象作业布置(2min)【教师】布置课后实训作业个人作业：请根据课堂所学知识，完成课后习题团队作业：结合HTML/HTML5和CSS/CSS3技术，布局如图3-19-1所示(详见教材)的页面。相关素材位于本书配套素材"实训作业素材03-CSS"文件夹中，形成文档上传至APP。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课中学生能在互动环节深入沟通，效果不错。教师应多与学生进行深入的沟通和交流，与学生积极探讨学习方法和策略，并引导学生掌握科学有效的学习方法，提高学习质量和效率。
