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