#right_jx
#footer
23
、四
解 决 疑 难 问 题
引 导 、 分 析 、
教师：引导、分析、解决、演示 学生：分析、讨论、练习
讨
论
讲练结合 教师有纠错 学生有反思、有总结、有提高
24
作品展示、（最符合结果） 评价
五
展 示
自信感、成就感、责任心
与
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、学、做、评”为一体。
#right_top_kcjs
#right_top_jcjs
究
#right_jxzy
#right_jx
#footer
20
教师为主导 学生为主体
三 2. 根据分析，学生画出布局草图。
学
生 自
#header
主 探
#main_left
#right_top_kcjs
究
#right_jxzy
#right_top_jcjs
8
教学内容
教学 内容 重点
难点
利用DIV+CSS技术布局制作精品课程网站主页。
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。 深入理解布局的精髓——盒子模型以及如何灵活、 简练的应用。
9
10
小组讨论法
1
直观演示法
微观
宏观：
项目教学法
任务驱动法
11
活动探究法
利用多媒体辅助教学
12
以学生为主体，以培养学生自主学习能力为出发点 让学生在学习中发现问题、分析问题、解决问题。 主要应用以下方法：
提 出 任 务 目 标
采用DIV+CSS布局技术制作精品课程网站的主页
16
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，做到有的放矢
二
2.在网页中，一个div盒子是如何定义的？（回忆）
提
出
任 务
<div id=“盒子名称”></div>
目
标
17
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，做到有的放矢
3
课
编号 知识模块安排
程
项目一 书法家庄辉个人网站
1 网页设计基础知识
教
2 网站欣赏
学 内
项目二 电子信息工程系迎评网站
3 网站规划与设计 4 网站效果图设计
容
5 网页色彩搭配网页布局
选
取
项目三 精品课程网站
与
安 排
项目四 武威旅游网
6 网页动画设计 7 页面布局与编辑 8 HTML语言 9 CSS层叠样式表 10 DIV+CSS网页布局
#right_jx
#footer
21
教师为主导 学生为主体
三 3.根据绘制的草图，在网页制作软件中放这些盒子
学 <div id=“header”></div>
生 <div id=“main”>
自 主 探 究
<div id=“main_left></div> <div id=“main_right>
</div>
<div id=“footer”></div>
22
教师为主导 学生为主体
三 4.在网页制作软件中如何将这些盒子放置到合适的位置？
学 生
Css样式表——盒子摆整齐了！
自
主 探
#header
究 #main_left
#right_top_kcjs #right_top_jcjs
#right_jxzy
二 3.生活中的盒子有很多，同理，一张网页中的盒子也有很多(如图)，
提 出
这些盒子是如何放置到网页中的？(引导、讨论）
任 务
通过插入多个DIV
目
标
#header
#left
#right
#footer
18
四个问题层层递进，既复习了上节课的重点内容，也为下面学生的自 主探究打下坚实基础，帮助学生把握本节课的重、难点。
<div id=“right_top> <div id=“right_top_kcjs”></div>
先堆到一起再说！
<div id=“right_top_jcjs”></div>
</div>
<div id=“right_jxzy”></div>
<div id=“right_jx”></div>
</div>
4
使用模版完善静态网站
掌握网站模板的使用方法
2
应用行为增强网页动态效果
掌握网站行为的使用方法
2
项目总结与评价
具备检查、判断能力、语言表达能 2 力、责任意识
7
教学目标
专业能力： 1.掌握单行单列布局、二列布局、三列布局 的结构应用。 2.掌握DIV+CSS布局应用与技巧。 方法能力： 1.能独立进行信息的筛选与加工。 2.能独立制定、实施工作计划。 3.具有分析问题、解决问题的能力。 社会能力： 1.具有沟通能力及团队协作精神。 2.具有创新能力。
自主探究法、总结反思法
13
教师展示任务效果
项目导向 任务驱动
教师提出任务目标 学生自主探究 教师引导、解决疑难问题
展示与评价
布置课后拓展练习
14
一 任 务 效 果 展 示
15
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，设置四个问题来分析、讨论
二 1、复习什么是CSS的盒子模型？盒子的属性？（引导、讨论）
2
网站效果图的设计、切片导出及 艺术素养、Photoshop设计
4
动画设计
动画制作能力、创新创意能力
DIV+CSS网页布局技术基础知识
项目三： DIV+CSS布局技术及应用 精品课 程网站 JavaScript脚本代码的融合 建设
3
DIV+CSS网页布局技术、团队协作、
项目实施能力
6
JavaScript脚本代码的应用能力
课程名称：《网页设计与制作》
项目三：精品课程网站 任务四：《DIV+CSS布局技术及应用》
说课人：王慧敏
1
课程 介绍
2
课程介绍
课程 定位
课程 目标
内容 选取 组织
岗位核心领域课程 综合性 实践性 操作性
网站设计与制作能力、团队协作能力、 沟通能力、分析解决问题能力、项目实施能力
以教学仿真项目和企业实际项目为载体 重构和序化教学内容
项目五 佳佳商城用户及留言管理系统
11 模版与库的应用 12 网站行为
13 表单应用
14 静态网站动态化
15 动态网站制作
16 课程设计（项目实训）
4
项目三：精品课程网 任务四：DIV+CSS布局技术及应用
课时 说课
5
提纲
6
课时定位
任务名称
职业素质及能力培养
课时数
网站前期策划及策划书的编写 沟通能力、策划能力、文档能力
二
4.精品课程网站的主页是由许多盒子构成的，这些盒子是如
提 出放得有模有样的？(引导、 讨论）
务
目
标
通过插入多个DIV ,通过控制盒子外观的CSS样式表
19
教师为主导 学生为主体
三
学 1.学生分析精品课程网站主页的布局。
生 自
#header
主 探
#main_left
