《dreamweaver中CSS样式的应用》教案.docVIP

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