CSS+DIV布局方法

CSS+DIV布局方法

• 大学城栏目：居民空间消息快播 |
• 空间栏目：表格教案（分为基础与案例部分）—基础知识教案（每天必讲一点）

• 收藏到我的学习空间
• 收藏到我的课堂魔方

全屏

发表时间：2012-6-24 21:50:19

浏览：35

评论：0

 

CSS+DIV布局方法
授课班级	网络1111
授课时间	第 17 周/第 2 次	第    周/第   次		第    周/第   次			第    周/第   次
授课地点	509机房	主要教学方法		任务驱动法、案例法、讲解+演示法
课业内容	主要讲解利用css排版页面，通过修改CSS属性来定位。							课 型
								理实课
教学目标	知识技能： 1、CSS布局理念 1、  固定宽度布局方法 2、  可变宽度布局方法 4、CSS布局与表格布局对比					态度： 1、培养学生独立思考、发散思维的能力。 2、培养学生认真学习、自主学习及正确分析问题和理论联系实践的精神。
教学重点	固定宽度、可变宽度布局方法		教学难点		CSS布局与表格布局对比
教学资源与工具	多媒体机房等
教学步骤	教  学  设  计 （含教学内容梗概、方法、手段、活动、任务、资料、教具、评价等）								时间分配 （分钟）
复习	提问： 1、  为什么建立web标准 2、  怎样改善现有网站								6
学习 引入	CSS+DIV是网站标准中常用的术语之一，CSS和DIV的结构被越来越多的人采用，很多人都抛弃了表格而使用CSS来布局页面，它的好处很多，可以使结构简洁，定位更灵活。								4
学习 内容	一、CSS布局理念 1、将页面用DIV分块 2、设计各块的位置 3、用CSS定位 二、固定宽度布局 1、一列固定宽度 2、两列固定宽度 3、圆角框 三、可变宽度布局 1、一列自适应 2、两列宽度自适应 3、两列右列宽度自适应 4、三列浮动中间宽度自适应 5、三行二列居中高度自适应布局 四、CSS布局与传统的表格布局方式分析								以学生制作练习为主，教师讲述不超过20分钟
内容 小结	希望同学们能彻底理解和掌握本课内容，就需要反复多试验，把书上的例题弄清楚。								3
作  业	制作商品推销页面