《网站前端技术》（梁玲）621-7 教案 第17课 CSS与CSS3（八）_第1页
《网站前端技术》（梁玲）621-7 教案 第17课 CSS与CSS3（八）_第2页
《网站前端技术》（梁玲）621-7 教案 第17课 CSS与CSS3（八）_第3页
《网站前端技术》（梁玲）621-7 教案 第17课 CSS与CSS3（八）_第4页
《网站前端技术》（梁玲）621-7 教案 第17课 CSS与CSS3（八）_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第17课CSS与CSS3（八）课时2课时（90min）教学目标知识技能目标：（1）掌握CSS自适应屏幕功能的应用（2）掌握利用HTML、CSSS网页制作技术，制作某婚礼策划机构首页的具体方法和流程素质目标：实现理论与实践相结合，锻炼动手能力教学重难点教学重点：自适应屏幕功能教学难点：利用HTML、CSSS网页制作技术，制作婚礼策划机构首页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（25min）→头脑风暴（10min）第2节课：→综合案例（35min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解自适应屏幕的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题如何让网页做到适应不同屏幕大小的移动终端呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（25min）3.17自适应屏幕@mediascreen【教师】讲解自适应屏幕@mediascreen功能的具体方法【课堂互动】✈【教师】提问CSS3是通过哪项功能来实现自适应屏幕大小的？✈【学生】聆听、思考、回答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">1</div> <divclass="box">2</div> <divclass="box">3</div> <divclass="box">4</div> <divclass="box">5</div> <divclass="box">6</div></div>在<style>标签内写入CSS选择器：*{box-sizing:border-box;}#box{width:100%; margin:50px;}.box{font-size:40px; color:#fff; background:red; text-align:center; line-height:100px; float:left; border:1pxsolidblue; width:300px;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“未使用@mediascreen属性之前的效果”图片（详见教材），并讲解效果：改变浏览器窗口宽度时，有可能出现混乱的效果，显得布局较为混乱。在<stryle>标签内添加如下代码：@mediascreenand(min-width:600px){ .box{width:30%;}}@mediascreenand(min-width:900px){ .box{width: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:900px){ .box{width:30%;}}@mediascreenand(max-width:600px){ .box{width:45%;}}同时修改原代码中粗斜体width属性400px为16%。效果：同【示例3-17-1】最终效果。【提示】同样由于CSS选择器由上而下解释的原理，对于最大尺寸法要采用尺寸“前面的大，后面的小”的原则。3.17.3尺寸区间法min-widthandmax-width功能：定义屏幕尺寸在某个区间范围时要执行的属性。@mediascreenand（min-width:尺寸值px）and（max-width:尺寸值px）{选择器及其属性列表}【示例3-17-3】修改【示例3-17-1】关于屏幕响应式声明：@mediascreenand(min-width:900px){ .box{width:16%; }}@mediascreenand(min-width:600px)and(max-width:900px){ .box{width:30%; }}@mediascreenand(max-width:600px){ .box{width:45%; }}【提示】由于是尺寸区间法，对不同尺寸范围的样式表达非常清晰，不存在互相覆盖的问题，所以屏幕控制有关代码不需要遵循一定规律。效果：同【示例3-17-1】最终效果。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解通过@mediascreen功能实现自适应屏幕大小的具体方法头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的min-width、max-width、min-widthandmax-width这种方法。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题利用前面所学的HTML和CSSS网页制作技术，可以设计什么类型的网站？实现哪些功能?【学生】思考、举手回答通过提问引导学生思考本节课内容综合案例

（35min）3.18综合案例——制作婚礼策划机构首页【教师】讲解制作婚礼策划机构首页的具体操作流程在本案例中，将利用前面所学的HTML和CSSS网页制作技术，制作某婚礼策划机构的首页。【课堂互动】✈【教师】ppt展示图片“婚礼策划机构首页效果“（详见教材），并提问制作婚礼策划机构网页的步骤有哪些？✈【学生】聆听、思考、回答具体制作时，可按照搭建页面整体框架、制作网页头部、制作网页导航部分、制作主体内容的上面部分、制作主体内容的中间部分、制作主体内容的下面部分、制作友情链接部分、制作网页底部的流程进行。1.搭建网站（1）在C盘上创建文件夹，命名为“wedding”，将此文件夹作为项目站点。将本书配套素材“教材源码和素材\综合案例\综合案例素材\img（婚礼策划机构首页）”文件夹中的“images”文件夹复制到“wedding”文件夹中。（2）使用快捷方式在站点根目录创建文本文档，并设置文件名为“index.html”。2.搭建页面整体框架（1）整体布局分析。【课堂互动】✈【教师】并提问结合效果图，分析其整体布局具有什么特点？✈【学生】聆听、思考、回答从效果图上看，该网页整个页面布局是常见的三行样式，整个页面居中显示。其中第一行放置网站logo及导航；第二行放置用户登录、图片幻灯显示、婚礼资讯、视频展示、作品展示区；第三行放置友情链接与网站相关信息。分析完这些，网页框架结构也就好搭建了。【教师】ppt展示图片“整体页面框架图“（详见教材），并讲解【课堂互动】✈【教师】并提问在搭建整体框架时需要注意些什么？✈【学生】聆听、思考、回答在搭建婚礼策划机构首页整体框架时需要注意以下事项。①页面的大结构用的是id选择器，里面用的是class选择器。②在定义选择器时，注意命名规范。如head、nav、main、foot等都是见名知意的。③含有2个以上横向区块的时候，需要在外面嵌套一个区块。④具体布局时，页面采取固定宽度且居中的办法，构建一个大的<div>（#all），里面放置5个<div>，分别为头部#head，导航#nav，主体#main，友情链接#link，底部#foot；主体#main部分放置3个<div>，分别是#m1、#m2和#m3；#m1和#m2中又分别包含.login、.ad、.hlzx和.show几个<div>，其中横向排列的<div>使用浮动方式进行定位。（2）编写HTML代码。使用记事本打开前面新建的“index.html”网页，然后根据前面的分析，在网页中插入各<div>标签，并设置id名或class名，从而搭建好网页的整体框架。代码如下：<divid="all"> <divid="head">此处是头部的内容</div> <divid="nav">此处是导航部分的内容</div> <divid="main"> <divid="m1"> <divclass="login">此处是登录部分的内容</div> <divclass="ad">此处是图片显示部分的内容</div> </div>……（详见教材）（3）编写CSS代码。本例使用外部样式表来控制网页，因此，首先新建一个CSS样式表文件，将其以style.css为名保存在站点根文件夹中。①为了让外部样式表能控制网页，在网页的<head></head>标签对之间输入如下代码。<linkhref="style.css"rel="stylesheet"type="text/css"/>②统一设置页面默认情况下的属性。打开style样式表文件，输入如下代码。*{ margin:0; padding:0; border:0; font-size:12px; font-family:"宋体";}③设置页面背景属性。这里将整个页面的背景颜色设为红色“#580000”。<linkhref="style.css"rel="stylesheet"type="text/css"/>④设置页面最外层div的样式，即将页面整体宽度设为1007px，并使其在任何浏览器内居中显示。#all{ width:1007px; margin:0auto;}⑤设置头部层相关属性。综上所述，父层宽度为1007px，而这里应该重新定义子层宽度为960px。注意：若不重新设置，则子层会继承父层的属性。#head{ width:960px; height:110px; margin:0auto;}⑥设置导航层的相关属性。#nav{ width:1007px; height:65px; background:url(images/dh.jpg)no-repeattopcenter; clear:both; margin:0auto;⑦设置主要内容部分的大层样式。#main{ width:960px; background-color:#FFFAEA; height:auto; margin:0auto;}⑧#main里面含有#m1、#m2、#m3三个层。先设置#m1层的框架，其里面含有login（用户登录区）和ad（图片展示区）两个层，这两个层都要浮动，并且需要设置宽度、高度和背景属性。#m1{ width:950px; height:210px; padding:5px;}……（详见教材）⑨#m2含有hlzx（婚礼资讯区）和show（视频展示区）两个层，这两个层都要设置浮动和左边距属性，从而使它们横向排列显示。此外，还需要设置宽度、高度和背景等属性。#m2{ height:279px; width:960px;}.hlzx{ width:596px; float:left; margin-left:6px; background-color:#f7efca; height:279px;}……（详见教材）⑩设置m3层（图片展示区）的样式。#m3{ width:961px; height:240px;}⑪设置link层（友情链接部分）的样式。#link{width:960px; height:35px; background-color:#f6e1b6; margin:0auto;}⑫设置foot（页面底部）的样式。#foot{ width:960px; margin:0auto; background:url(images/down.jpg)no-repeat; height:101px; clear:both; text-align:center; font-size:12px; line-height:25px;3.制作网页头部页头部分包含网页logo和联系电话，制作起来比较简单。【教师】ppt展示图片“网页头部效果“（详见教材），并讲解（1）编写HTML代码。在前面插入的id为head的<div>中插入logo.jpg图片，并输入电话号码。注意使用行内元素标签<span></span>将电话号码单独定义为一个区域，方便后面使用CSS控制。代码如下：<divid="head"><imgsrc="images/logo.jpg"alt="logo"width="385"height="110"/><span>lt;/span></div>（2）编写CSS代码。①logo图片是在页面左上角显示的，所以应让logo图片向左浮动，而电话号码向右浮动。head层已在前面设置，其高度是根据logo图片的高度设置的。#headimg{ float:left;}②电话号码部分的设置，包括文字大小、文字颜色、放置位置和浮动方式。#headspan{ float:right; margin:40px40px0px0px; color:#FFFFFF; font-size:36px;}4.制作网页导航部分在前面已制作好导航栏的框架并设置了样式。这里我们用无序列表来制作导航栏，将每一个栏目放进<li></li>标签对里并设置外间距宽度，然后将每一个列表项向左浮动并设置间距，最后设置超链接样式。【教师】ppt展示图片“导航部分效果“（详见教材），并讲解（1）编写HTML代码。在前面插入的id为nav的<div></div>标签对中插入无序列表标签<ul>和列表项标签<li>，在各<li></li>标签对中输入文本并设置超链接，最终代码如下。<divid="nav"> <ul> <li><ahref="#">首页</a></li> <li><ahref="#">机构介绍</a></li> <li><ahref="#">作品欣赏</a></li> <li><ahref="#">套系报价</a></li> <li><ahref="#">优惠活动</a></li> <li><ahref="#">联系我们</a></li> </ul></div>（2）编写CSS代码。在前面已设置了nav层的样式，下面设置其包含的各标签的样式，各代码可在nav层样式代码的下方输入。①设置导航层里面无序列表的属性，需要注意的是height+padding的值不能超过父层的高度（前面设置的父层高度为65px）。#navul{ height:30px; padding-top:30px; margin-left:80px;}②设置列表项的属性。#navli{ list-style-type:none; float:left; width:80px; margin-left:40px; text-align:center;……（详见教材）③设置列表项中超链接标签<a>的默认属性。必须将<a>标签设置为块状元素，鼠标经过状态才会正常显示背景图片。#navlia{ color:#fff7b3; text-decoration:none; display:block;}④设置鼠标指针移到超链接上面时超链接的属性。#navlia:hover{ color:#8b1f1c; background-image:url(images/

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论