web前端开发 CSS页面布局 电子教案.doc

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第二学期 课程名称 《Web前端开发》 任课教师 单元标题 CSS页面布局 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1. 掌握利用CSS布局页面的方法 CSS定位属性 CSS浮动属性 利用CSS布局页面的方法 教学任务 1. 理解掌握CSS定位属性和浮动属性； 2. 熟练掌握利用CSS布局页面的方法 教学重、难点 重点：CSS定位属性和浮动属性 难点：利用CSS布局页面的方法 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 网页制作软件对比 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【课题导入】 通过前面任务的学习和练习，已经掌握了div和列表的基本知识，下面通过继续介绍div标签，让学生认识盒子模型、浮动和定位方式的知识。 【讲授新课】 15.2 CSS布局常用属性 常用的布局方式主要有定位式和浮动式两种，相应布局属性为定位属性（position）和浮动属性（float）。 15.2.1 定位属性（position） 使用position属性可以精确控制盒子的位置，其语法格式如下。 position: static |relative | absolute | fixed 1．静态定位 设置position属性的值为static，或不做设置即缺省时默认为static，元素按照HTML规则定位。 2．相对定位 设置position属性的值为relative时即为相对定位，设置盒子相对其原本位置的定位。相对定位的盒子占用原页面空间。 3．绝对定位 设置position属性的值为absolute时即为绝对定位，设置盒子相对其具有position设置的父对象进行定位。 （1）父对象有position属性设置 （2）父对象无position属性设置 绝对定位元素的所有层次父对象均无position属性设置时，该元素以body即浏览窗口为参照绝对定位。如示例15-13中，删除A图片父对象position属性设置，即删除如下代码行： position: relative; left:0px; top:0px; 4．层叠定位属性（z-index） 被定位的元素会挡住部分其他元素，可以通过层叠定位属性（z-index）定义页面元素的层叠次序。z-index的取值可以为负数，表示各元素间层次关系，值大者在上，当为负数时表示该元素位于页面之下。 15.2.2 浮动属性（float） float属性可以控制盒子左右浮动，直到边界碰到父对象或另一个浮动对象。 float属性语法格式如下。 float:none|left|right; 1．基本浮动定位 设置了向左或向右浮动的盒子，整个盒子会做相应的浮动。浮动盒子不再占用原本在文档中的位置，其后续元素会自动向前填充，遇到浮动对象边界则停止。 2．清除浮动属性 浮动设置使用户能够更加自由方便地布局网页，但有时某些盒子可能需要清除浮动设置，这时需要用到浮动属性clear，其语法格式如下： clear:none|left|right|both; 15.3 CSS的网页布局 网页布局结构按照列数可分为单列、两列和三列等几种布局。 15.3.1 单列布局 单列布局相对简单，很多复杂布局往往以单列布局为基础。单列布局中的对象位置可固定在左上角、浮在左上角或居中；宽度可用像素值固定、百分比或相对于字号设置。 15.3.2 两列布局 用CSS3改进的盒布局 如果使用盒布局，需要设置左右两个盒子的外层容器的box属性，不需要使用float属性。 3. 嵌套的2列布局 顶部固定，一列固定、一列变宽的布局是在博客类网站中很受欢迎的布局形式，这类网站常把侧边的导航栏宽度固定，而主体的内容栏宽度是可变的。 15.3.3 使用CSS3盒布局的三列布局 三列布局