- 1、本文档共13页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
传智播客
《HTML5+CSS3网站设计基础教程》
教学设计
课程名称: HTML5+CSS3网站设计基础教程
授课年级: 2016年级
授课学期: 2016学年第一学期
教师姓名: 某某老师
201 年 月 日
课题名称 第6章 浮动与定位 计划课时 8课时 内容分析 通过前面几章的学习,初学者不难发现,在默认情况下,网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局,网页将会显得单调、混乱。为了使网页的布局更加丰富、合理,可以在CSS中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。 教学目标 理解元素的浮动,能够为元素设置浮动样式。
熟悉清除浮动的方法,可以使用不同方法清除浮动。
掌握元素的定位,能够为元素设置常见的定位模式。 重点及措施 教学重点:元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
措施:通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点:元素的浮动属性float、overflow属性、元素的定位属性。
措施:通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主,使用教学PPT讲解。 教
学
过
程
第一课时
(讲解元素的浮动属性float、清除浮动)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习第五章“CSS盒子模型”的相关知识。
一个盒子的宽(width)和高(height)均为300px,左内边距为30px,同时盒子有3px的边框,请问这个盒子的总宽度是多少?( )
A、333px B、366px C、336px D、363px
答案:C
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和;
所以,盒子的总宽度= width(300px)+左内边距(30px)+左右边框宽度之和(3px*2)=336px;
说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
初学者在设计一个页面时,通常会按照默认的排版方式,将页面中的元素从上到下一一罗列,这样的布局制作出来的页面看起来呆板、不美观。其实,通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。那么,什么是“元素的浮动”,以及如何设置元素的浮动呢?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中相应位置的过程。在CSS中,通过float属性来定义浮动,其基本语法格式如下:
选择器{float:属性值;}
在上面的语法中,常用的float属性值有三个:left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。
知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“元素的浮动属性float”等。
讲解“元素的浮动属性float”
(1)、教师通过PPT对网页中常见的元素浮动效果进行展示。
(2)、教师通过PPT对“浮动”的概念及基本语法格式进行讲解,并进行代码演示。
(3)、教师对“浮动”的常用属性—左浮动、右浮动进行讲解,并进行代码演示。
(4)、教师指出对元素应用“浮动”时需要注意的问题,并给予解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
讲解“清除浮动”
(1)、教师对元素的浮动会对其他元素产生影响,并进行代码演示。
(2)、教师对分别对“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的方法及应用范围进行讲解,并进行代码演示。
(3)、教师对比“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的异同,并分析其优缺点。
(4)、教师分别指出清除元素浮动时需要注意的问题,并给予解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
说明:在网页制作时可适时停下来,让学生自行尝试。小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
阶段小结
小结
重点:元素的浮动属性float、清除浮动。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
巩固练习
巩固本课时知识点
学完知识点后,教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何给元素设置浮动属性,并能够清除
您可能关注的文档
- 浙江省环境空气质量自动监测系统技术规范201408019方案.doc
- 围棋手柯杰作文狂傲讲述.ppt
- 浙江省职业技能培训机构方案.doc
- 浙江省温州市第八高级中学2016届高三上学期12月月考理综物理试题方案.doc
- 浙江省金丽衢十二校2016届高三上学期第一次联考政治试题方案.doc
- 浙江省重点中学协作体2016届高三第三次联考政治试卷方案.doc
- 围术期肺栓塞、-副本讲述.ppt
- 浙江省镇海中学《经济生活》第四单元发展社会主义市场经济方案.doc
- 浙江省金丽衢十二校联考2016届高考化学二模试卷Word版含解析方案.doc
- 浙江省金华市第四中学2016届九年级上学期期中学力检测试文综试卷方案.doc
- 教科版(2017秋)科学二年级上册2.6 做一顶帽子 教学设计.docx
- 河北高频考点专训四 质量守恒定律的应用教学设计---2024-2025学年九年级化学人教版(2024)上册.docx
- 大单元教学【核心素养目标】6.3 24时计时法教学设计 人教版三年级下册.docx
- 河南省商城县李集中学2023-2024学年下学期九年级历史中考模拟八(讲评教学设计).docx
- 第18章 第25课时 正方形的性质2023-2024学年八年级下册数学课时分层作业教学设计( 人教版).docx
- Module 8 模块测试 教学设计 2024-2025学年英语外研版八年级上册.docx
- 2024-2025学年小学数学五年级下册浙教版教学设计合集.docx
- 2024-2025学年小学劳动四年级下册人民版《劳动》(2022)教学设计合集.docx
- 2024-2025学年小学数学三年级上册冀教版(2024)教学设计合集.docx
- 2024-2025学年高中生物学必修1《分子与细胞》人教版教学设计合集.docx
文档评论(0)