dreamweaver中CSS样式的应用教案.docxVIP

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