《网站前端技术》教案第17课CSS与CSS3（八）.docx

《《网站前端技术》教案第17课CSS与CSS3（八）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第17课CSS与CSS3（八）.docx（10页珍藏版）》请在优知文库上搜索。

1、课题第17课CSS与CSS3（八）课时2课时(90min)教学目标知识技能目标：（1）掌握CSS自适应屏幕功能的应用（2）掌握利用HTML,CSSS网页制作技术，制作某婚礼策划机构首页的具体方法和流程素质目标：实现理论与实践相结合，锻炼动手能力教学重难点教学重点：自适应屏幕功能教学难点：利用HTML、CSSS网页制作技术，制作婚礼策划机构首页教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（8min）一传授新知（25min）一头脑风暴（10min）第2节课：问题导入（5min）一综合案例（35min）

2、一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解自适应屏幕的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题如何让网页做到适应不同屏幕大小的移动终端呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习

3、兴趣传授新知（25min）3.17自适应屏幕nIediascreen【教师】讲解自适应屏幕皿由2SCreen功能的具体方法【课堂互动】中【教师】提问CSS3是通过哪项功能来实现自适应屏幕大小的？通过教师讲解、课堂互动、演示操作等方式，使学生了解通过mediascreen功能实现自适应屏幕大小的具体方法十【学生】聆听、思考、回答CSS3提供了mediascreen功能来实现自适应屏幕大小。具体有三种方法。3.17.1 尺寸最小法min-width属性功能：定义当屏幕尺寸大于等于某尺寸时，要执行的属性。应用格式：mediascreenand(min-width:尺寸值px)选择器及其CSS样式列表

4、)【示例3-17-1编辑HTML文档标签的内容，布局一个大盒子里有6个小盒子，大盒子#box尺寸为100%,所有小盒子box向左浮动的页面。代码如下：l23456在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;【教师】组织学生分组上机完成上面的任务，并在各组中挑选

5、一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”未使SCreen属性之前的效果”图片(详见教材)，并讲解效果：改变浏览器窗口宽度时，有可能出现混乱的效果，显得布局较为混乱.在VStryIe标签内添加如下代码：nIediascreenand(min-width:600px).boxwidth:30%;mediascreenand(min-wid(h:900px).boxwidth:16%;同时修改原代码中粗斜体width属性值400px为45%。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机

6、操作、演示【教师】PPt展示”应用mediascreen效果”图片(详见教材)，并讲解效果：通过屏幕宽度控制同类盒子一行的个数，在屏幕宽度小于等于600px时，每行有两个盒子；在大于等于600PX时，每行有三个盒子；在大于等于900PX时，每行有六个盒子。【提示】CSS中同一个选择器的同一属性会自上而下解释，后面的属性值会覆盖前面的属性值。当使用尺寸最小法时，如果屏幕的值较大，解释器会依次找到那个最接近屏幕宽度所属的属性去执行，所以此时必须采用尺寸前边的小，后边的大的原则。3.17.2 尺寸最大法max-width属性功能：定义当屏幕尺寸小于等于某尺寸时，要执行的属性。应用格式：mediasc

7、reenand(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功能：定义屏幕尺寸在某个区间范

8、围时要执行的属性。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%;【提示】由于是尺寸区间法，对不同尺寸范围的样式表达非常清晰，不存在互相覆盖的问题，所以

9、屏幕控制有关代码不需要遵循一定规律。效果：同【示例3-17-1】最终效果。头脑风暴(10min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题,讨论如何使用本节课中介绍的min-width、max-width、min-widthandmax-width这种方法。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入(5min)【教师】提出以下问Sg利用前面所学的HTML和CSSS网页制作技术，可以设计什么类型的网站？实现哪些功能？【学生】思考、举手回答通过提问引导学生思考本节课内容综合案例(35min)3.18综合案例

10、一制作婚礼策划机构首页【教师】讲解制作婚礼策划机构首页的具体操作流程在本案例中，将利用前面所学的HTML和CSSS网页制作技术，制作某婚礼策划机构的首页。【课堂互动】十【教师】PPt展示图片“婚礼策划机构首页效果“(详见教材)，并提问制作婚礼策划机构网页的步骤有哪些？【学生】聆听、思考、回答具体制作时，可按照搭建页面整体框架、制作网页头部、制作网页导航部分、制作主体内容的上面部分、制作主体内容的中间部分、制作主体内容的下面部分、制作友情链接部分、制作网页底部的流程进行。1 .搭建网站(I)在C盘上创建文件夹，命名为wedding”,将此文件夹作为项目站点。将本书配套素材教材源码和素材媒合案例鳏

11、合案例素材Ximg(婚礼策划机构首页)”文件夹中的images”文件夹复制到wedding文彳牛夹中。(2)使用快捷方式在站点根目录创建文本文档，并设置文件名为indexhtml。2 .搭建页面整体框架(1)整体布局分析。【课堂互动】【教师】并提问结合效果图，分析其整体布局具有什么特点？通过教师讲解、课堂互动等方式，让学生了解利用HTML和CSSS网页制作技术，制作某婚礼策划机构的首页的具体流程从效果图上看，该网页整个页面布局是常见的三行样式，整个页面居中显示。其中第一行放置网站log。及导航；第二行放置用户登录、图片幻灯显示、婚礼资讯、视频展示、作品展示区；第三行放置友情链接与网站相关信息。

12、分析完这些，网页框架结构也就好搭建了。【教师】PPt展示图片“整体页面框架图“(详见教材)，并讲解【课堂互动】【教师】聊问在搭建整体框架时需要注意些什么？【学生】聆听、思考、回答在搭建婚礼策划机构首页整体框架时需要注意以下事项。页面的大结构用的是id选择器，里面用的是CIaSS选择器。在定义选择器时，注意命名规范。如head、navxmain、foot等都是见名知意的。含有2个以上横向区块的时候,需要在外面嵌套一个区块.具体布局时，页面采取固定宽度且居中的办法，构建一个大的(#all),里面放置5个,分别为头部#head,导航#nav,主体#main,友情链接#link,底部#lbol；主体#

13、main部分放置3个分别是#ml、#m2和#m3/ml和#m2中又分别包含.login、.ad、.hlzx和.show几个,其中横向排列的使用浮动方式进行定位。(2)编写HTML代码。使用记事本打开前面新建的indexhml网页，然后根据前面的分析，在网页中插入各标签，并设置id名或ClaSS名,从而搭建好网页的整体框架。代码如下：此处是头部的内容此处是导航部分的内容divClaSS=login)此处是登录部分的内容此处是图片显示部分的内容(详见教材)(3)编写CSS代码.本例使用外部样式表来控制网页，因此,首先新建一个CSS样式表文件,将其以Stylexss为名保存在站点根文件夹中。为了让外部样式表能控制网页，在网页的Vhead标签对之间输入如下代码。统一设置页面默认情况下的属性。打开StyIe样式表文件，输入如下代码。*(margin:。；padding:0;border:。；fbnt-size:12px;font-family:宋体：设置页面背景属性。这里将整个页面的背景颜色设为红色#580000。设置页面最