第十四讲-使用CSS美化网页

授课日期

班级名称

授课地点

教学课题第十四讲使用CSS美化网页课

时6学时教学目的（1）掌握CSS样式表的基本语法和定义位置。（2）掌握标签样式、高级样式、类样式的定义方法。（3）掌握样式的编辑方法。（4）掌握如何使用CSS样式表美化页面。知识目标（1）CSS样式表的基本语法和定义位置。（2）标签样式、高级样式、类样式的定义方法。（3）样式的编辑方法。（4）使用CSS样式表美化页面。能力目标（1）利用CSS更好来美化页面素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重

点（1）标签样式、高级样式、类样式的定义与应用难

点（1）使用CSS样式表美化页面课

型讲授型＋操作型教学方法任务驱动法、分组讨论法、理论实践一体化教学手段多媒体教学教

参中国青年出版社《DreamweaverMX2004完美网页设计》教学环节

时间安排复习提问：常用表单对象有哪些？分别实现什么功能？52.情境设置，项目引入情境设置：BZ旅行社新推出了“山岳游”的旅游项目，请你为其设计制作一个宣传“山岳游”的网页，并使用CSS布局与美化。通过具体情境引入本次课要学的“使用CSS美化网页”，并展示项目最终效果网页。53.教学目标说明：介绍本次课的项目要求、项目目标、项目重点难点。104.项目资讯，发放资料简要介绍项目制作所需的主要知识及操作方法；将学习资料以PPT及视频动画的形式发给学生。205.角色扮演，形成方案每组学生既模拟客户又模拟网站设计公司，既负责向下一组提出客户需求，又负责为上一组设计制作网页；组长（项目经理）负责向组员（网页设计师）讲述客户需求，组员集思广益，产生完成项目的初步方案。306.方案展示，确定目标各项目经理将讨论后的方案进行展示，各组组员可做补充说明；教师与其他组成员点评，经改进后最终确定可实施的、能够达成知识和技能目标的工作方案。307.任务分解，实战操练教师将项目分解为多个任务：任务1：使用Div+CSS布局网页任务2：创建页面布局样式任务3：美化页面元素任务4：插入Div标签对页面进行布局任务5：新建导航栏代码片段、表单代码片段和表格代码片段任务6：在页面各个区块中输入文字或插入页面元素每组成员按照客户需求分步进行设计制作，教师巡视指导。针对学生中普遍存在的问题利用教学广播讲解演示；针对个别问题，进行个别指导。1108.成果展示，考核评价由小组观摩评选出一个优秀设计作品进行成果展示。介绍过程中要求说明设计思路及制作过程中遇到的问题，如何解决问题，同时其他组成员也可提出问题，让设计者解释设计所用的相关技术及特点；依据项目评价表对作品进行自我评价、小组评价和教师评价，挖掘作品优点，并指出问题所在，给出具体改进及修改意见；评选出“最佳美工设计”、“最佳网页制作”、“最佳组织协作”、“最佳员工”等奖项。359.总结归纳，引申提高首先提问学生总结，让学生谈本项目的收获；教师对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对项目的不足之处，进行引申和提高。小结：Div+CSS是当前非常流行的符合WEB标准的布局方式，它的优点很多。本章通过“泰山游”网页的实际布局讲述了Div+CSS布局方式的使用。重点要掌握各种选择器的使用场合、常用的CSS规则属性和DIV+CSS布局方法。今后还要通过不断的实践掌握DIV+CSS布局方式的使用技巧。201