项目9CSSDIV布局.docVIP

一、教学建议 CSS+DIV是网页布局的一种方式，在该项目中，使用两个任务来系统地介绍如何利用CSS+DIV布局页面。 该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，并以“项目总结”的形式通过“发现问题——解决问题——总结问题”的方式加深学生的印象，增强学习效果。 为了提高学生的应试能力，尤其是一些考级需要，建议教师在教学的过程中有意识地穿插该项目后面“自我评测”的操作题与该教材配套光盘中配套的实例题，让学生在实际操作的过程中解决一些问题，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。 二、教学简案 项目9 使用CSS+DIV布局页面 课题 任务1 使用CSS+DIV设计“网站制作流程”页面 参考资料 教材、教师手册 教学配套 光盘素材 教学方法 教师讲解、学生讨论，上机实践操作 授课节数 2课时 教学目标 1.了解CSS+DIV布局的优势 2.理解CSS盒子模型的含义 相关知识 1.CSS+DIV布局及其优势 2.DIV块的插入与CSS样式控制 3.CSS盒子模型 4.常见布局控制 5.项目列表 学习重点 1.了解CSS+DIV布局的概念及其方法 2.能熟练地在网页设计中运用CSS+DIV进行网页布局 实施建议 1.CSS+DIV布局网页较之表格布局，不仅代码简洁、结构清晰，而且通过修改CSS就能完成批量页面的变化，修改起来十分方便。结合项目7、8的表格布局、框架布局引入该项目的学习 2.在完成该任务的基础上，以该任务后面的“任务拓展”巩固理论知识 课后评价 该任务理论知识比较难以理解，教师在结合上机实践操作过程中，可以联系理论结合操作进行授课。 课题 任务2 使用CSS+DIV制作“我的博客”页面 参考资料 教材、教师手册 教学配套 光盘素材 教学方法 教师讲解、学生讨论，上机实践操作 授课节数 2课时 教学目标 1掌握使用CSS+DIV进行常用页面布局的方法 相关知识 1.绝对定位 2.三列浮动、中间列宽自适应 学习重点 1.了解在CSS+DIV布局中常用的专业术语：绝对定位、三列浮动、中间列宽自适应 2.能熟练地在网页设计中运用CSS+DIV进行网页布局 实施建议 1.在任务1的基础上，引入任务2 课后评价 通过该项目的学习，学生初步掌握了利用CSS+DIV进行页面布局的方法，CSS+DIV布局页面比较美观简洁，但理论知识与实践操作比较难掌握，需要学生加以练习 【组织教学】 检查学生出勤情况，做好学生考勤记录。 强调上课课堂纪律，活跃互动教学气氛。 【课题导入】 在项目7、8中，同学们学会了表格布局、框架布局这两种页面布局方式。在项目9中，再介绍一种布局方法——CSS+DIV布局页面。 CSS在项目6中我们已经学过，是层叠样式表的意思，主要用于网页制作中统一页面的风格，而DIV则是网页中的“块”，相当于一个容器。顾名思义，就是将网页中的元素划分到不同的块中，以块为单位，块及块中所包含元素的属性通过CSS进行控制，从而实现整个页面的布局。 与表格布局、框架布局相比，CSS+DIV布局的网页，代码简洁、结构清晰，修改简单。 【技能训练】一任务 【布置作业】