1、dreamweaver 中 CSS 样式的应用教案一、教学目标：1、知识与技能目标理解 CSS 样式的功能，掌握三种类型样式的操作，掌握样式表的导出和链接来设计网站中的所有网页。2、能力目标培养学生的思维能力和观察感受能力；培养学生 CSS 样式的实践应用能力。3、情感目标培养学生的探究和实践精神，以及善于思考总结，综合应用技能的能力。二、教学重点：运用三种类型的样式设计网页。掌握样式表的导出和链接，并在网站设计中的运用。三、教学难点：理解三种类型 CSS 样式的区别，灵活应用。四、教学理念：依据课程改革的理念，以任务引领为动力，通过对任务的提出、提升和拓展，让学生在实践中理解概念，在操作中掌
2、握技能。教法：任务引领、创设情景、案例教学、诗意小结。学法：情感饱满、自主学习、产生探究、感悟提升。五、课前准备：设计要让学生操作的练习网站“上海新貌” 。设计活动进程。六、教学过程教学流程 老师活动 学生活动 设计意图任务提出课题导入任务背景：小王（每位同学）作为一名网页制作者，正在进行“上海新貌”网页的改版工作，所有的页面排版初步告成，可页面在 IE 中的浏览不令人满意，怎么办？画面比较：展示两组页面，一组为学生前阶段实践的“上海新貌”网页，一组为用 CSS 样式定制后的网页，比较视觉效果。引出教活动一：融入教学情景，转换实践角色。活动二：观察两组页面，引起求知兴趣。活动二：根据教师引导，
3、接受任务挑战。创设情景，激发情感；画面对比，目标直接。学主题。结合界面效果，归纳CSS 功能：美化页面，减少重复。任务提出：给“上海新貌”网站添加样式，美化网站页面。任务分层实战练习初级任务：给页面中的主体文字定义统一的风格。技术处理： 样式的建立方式，分析“新建样式表”及“仅对文档”的不同（简述） ，以新建为例，为下面的教学铺垫。样式的“标签”类型，以页面主体文本为例，运用 body 标签，分析标签类型的功能：直接作用于页面。样式的“类”类型，以标题文字设计为例，分析“类”类型的功能：定义范围才可应用样式。情景一：教师演示，讲解知识要点。情景二：巡视实践，倡议学生互助。情景三：根据巡视，要求
4、学生探究样式编辑功能，提升作品质量。情景四：小结文本样式设计要点。1、转换角色，投入实践。2、观察演示，了解样式表建立的过程。3、实战练习，建立页面主体文字的样式。（文字样式自定）4、根据喜好，为页面其他文本建立相应的样式，并应用。5、观察屏幕，体验样式表功能的实现。6、应用编辑功能，按个人喜好编辑样式，浏览屏幕，体验操作成果。7、开展小组合作，同学之间互助。8、根据实践结果，体会教师小结。根据教师引导，体验样式建立；碰到实际问题，探究样式编辑。没有统一要求，力求学生创意。任务提升要点提示任务提升：给页面中的链接文本定义统一的风格。技术处理：分析出链接文本的四种状态（link、visited、
5、active、hovor） ，引出样式的“高级”类型1、根据个人喜好，设置链接文本常用状态样式。2、进行设置运行，体会教师提示。3、共享同学操作，提提升任务要求，掌握新的技能。友情链接，取长补短。的使用。情景一：教师演示，讲解要点（略）情景二：教师巡视，发现问题情景三：共享操作，友情链接高实践能力。任务拓展风格统一任务拓展：给站点中的其他页面附加样式表。技术处理：样式表的导出、样式表的附加两步走。阐述样式表的共享链接功能。情景一：教师启发，引导学生实践。情景二：教师巡视，帮助困难学生。1、导出前面的设计并命名成一个样式表名称。2、附加样式表到其他页面。3、小组合作互助。4、观察屏幕，体验成果。
6、拓展任务，完善技能，体验成功的喜悦。实践交流教师总结情景一：每组推荐一名同学，切换屏幕到同学，点评同学实践。情景二：教师总结样式应用美页面，减少重复能实现。body 设置走前面，定位文本最显现；其它设置跟上前，颜色字体自己选。链接设置不让贤，紧跟文本在后面；link hovor 和 visited,个人喜好是关键。附加样式其它页，整个网站换新颜。1、学生交流操作结果，自评并互评。2、加深对 CSS 样式的理解，掌握常规步骤及要点。加强交流，进行评价，明确方向。七、课后拓展：以具体案例为引领，思考在网站中如何根据网页的特点，进行 CSS 样式设计，美化创意；如何有效结合三种类型的特点并配合使用，使网站中的页面既有统一性，又有各自的特点；进一步体会采用链接外部样式表的方式在网页设计中的优点。
