《网页设计》教学设计 教学题目 视觉元素3图片与文字 NO. 8 学时安排 4 授课班级 动漫1001 授课日期 学习环境 WEB教室 局域网 城域网 授课类型 理论 (标√) 校园网 因特网 常规教室√ 学习资源 课件工具 专题学习网站 多媒体资源库 教学方法 引导发现 (标√) 案例库√ 题库 网络课程 仿真软件其他 学习形式 分组合作竞争 知识 了解网页中视元素文字与图片的作用 能力 掌握网站文字的格式化要素和图片处理规则 学 目标 理解设计网页中文字与图片视觉元素的应用原则 习 目 使用问题引导学生了解网页与书页的区别 标 过程 案例分析引导学生掌握网站的制作过程 吻 方法 使用问题分析的方法引导学生理解网页的制作过程 任 在教学过程中使用学生分组学习的方法 务 情感 培训学生分析问题，生活注意小节 价值 学生按流程解决问题的能力 观 学 重点 网页的制作过程 习 重 难点 网页美术设计过程 难 点 关键 网页设计美术设计的作用 组织教学 学生进行分组 文字使用总结归纳 学生依据老师给出的网页归纳文字使用规则 教学结构流程的设 案例分析法 使用一个网页制作案例来说明图片的设计规划 任务驱动 学生依据教师提供的素材建立一个广告页。 讨论总结会 学生依据自己做的方案进行案例并进行讨论 小结作业
《网页设计》教学设计 教学题目 视觉元素 3 图片与文字 NO. 8 学时安排 4 授课班级 动漫 1001 授课日期 授课类型 理论 学习环境 （标√） WEB 教室 局域网 城域网 校 园 网 因特网 常规教室√ 教学方法 引导发现 学习资源 （标√） 课件 工具 专题学习网站 多媒体资源库 案例库√ 题库 网络课程 仿真软件 其他 学习形式 分组合作 竞争 学 习 目 标 与 任 务 知识 能力 目标 了解网页中视元素文字与图片的作用 掌握网站文字的格式化要素和图片处理规则 理解设计网页中文字与图片视觉元素的应用原则 过程 方法 使用问题引导学生了解网页与书页的区别 案例分析引导学生掌握网站的制作过程 使用问题分析的方法引导学生理解网页的制作过程 在教学过程中使用学生分组学习的方法 情感 价 值 观 培训学生分析问题，生活注意小节 学生按流程解决问题的能力 学 习 重 难 点 重点 网页的制作过程 难点 网页美术设计过程 关键 网页设计美术设计的作用 教 学 结 构 流 程 的 设 计 学生进行分组 学生依据老师给出的网页归纳文字使用规则 使用一个网页制作案例来说明图片的设计规划 学生依据教师提供的素材建立一个广告页。 学生依据自己做的方案进行案例并进行讨论 组织教学 文字使用总结归纳 案例分析法 任务驱动 讨论总结会 小结作业
教学环节 教学内容 师生互动 设计意图 时间控制 课件展示 教法学法 教学资源 组织教学 学生按自然座位分 师：分组原则与活动安排 学生进行分组 组，并选出组长 生： 学生分组并选出组长 文字元素 文字元素的作用 师：教师在网页中给出一些网站的 的设计规 和使用范围 素材，并提出任务 范 文字的设计要素 生：住所教师提供的内容，找出个 类网页都有的元素文字 学生知道，每个网页 师：文字这种元素的特点是什么？ 上都具有的元素是 生：分组讨论总结 文字，文字在设计中 师：我们可以更改文字的什么属性 要注意颜色、字体、 生：分组讨论 字号、间距及艺术字 师：总结出四类颜色、字体、字号、 体的设计规范 间距 资源：教师的教学网 师：给出三个元素一样的网页，让 站，课件 学生找出那一个更好，并说明理由 生：分组讨论总结，每组一个人陈 述，其它人可以补充。 师：图片在网页中起到作用，提供 多个网页模板 生：分组讨论网页中图片起到的作 用 师：图片的作用 生：讨论图片素材的获取方式 师：总结图片素材的来源方式 生：讨论来源的图处能不能直接使 学生分组分析书页 1. 图片的作用 用 案例分析 2. 图片剪裁 与网页的区别，说明 图片元素 网页作为传递信息 3. 图片的主次关系 师：总结，并说明为什么？案例操 作 的重要性，并让学生 的 4. 图片中的动势 师：给出概念：视觉流程 分析问题的表像到 5. 图片的位置 生：分组讨论视觉流程概念及作用 实质的思维能力 师：视觉流程的三个主要特点 主次、动势、位置关系 生：分组讨论如何体现这种关系 生：组长听取每个组员的说明，最 后总结陈述 师：考核
教学环节 时间控制 教学内容 课件展示 师生互动 教法学法 设计意图 教学资源 组织教学 学 生 按自 然座 位 分 组，并选出组长 师：分组原则与活动安排 生：学生分组并选出组长 学生进行分组 文字元素 的设计规 范 文字元素的作用 和使用范围 文字的设计要素 师：教师在网页中给出一些网站的 素材，并提出任务 生：住所教师提供的内容，找出个 类网页都有的元素文字 师：文字这种元素的特点是什么？ 生：分组讨论总结 师：我们可以更改文字的什么属性 生：分组讨论 师：总结出四类颜色、字体、字号、 间距 师：给出三个元素一样的网页，让 学生找出那一个更好，并说明理由 生：分组讨论总结，每组一个人陈 述，其它人可以补充。 学生知道，每个网页 上都具有的元素是 文字，文字在设计中 要注意颜色、字体、 字号、间距及艺术字 体的设计规范 资源：教师的教学网 站，课件 案例分析 图片元素 的 1． 图片的作用 2． 图片剪裁 3． 图片的主次关系 4． 图片中的动势 5． 图片的位置 师：图片在网页中起到作用，提供 多个网页模板 生：分组讨论网页中图片起到的作 用 师：图片的作用 生：讨论图片素材的获取方式 师：总结图片素材的来源方式 生：讨论来源的图处能不能直接使 用 师：总结，并说明为什么？案例操 作 师：给出概念：视觉流程 生：分组讨论视觉流程概念及作用 师：视觉流程的三个主要特点 主次、动势、位置关系 生： 分组讨论如何体现这种关系 生：组长听取每个组员的说明，最 后总结陈述 师：考核 学生分组分析书页 与网页的区别，说明 网页作为传递信息 的重要性，并让学生 分析问题的表像到 实质的思维能力
教学环节 教学内容 师生互动 设计意图 时间控制 课件展示 教法学法 媒体资源 学生理解一个网页 师：给出学生一个典型的网页有问 题的网页！ 建立的步骤。 生：分析这个网页的不恰当之处， 只有一个合理的流 并自己修改，进行说明 程才能利于合作 师：总结 文字与图片的配置上存在的问题： ①字体过于纤细，且字体的颜色与 图片与文字配置案例 任务驱动 背景色过于相似：广告标语的字号、 分析？ 字体与小标题、正文过于一致： ③小标题与正文字号、字体过于一 致： ④行距、段距不合理； ⑤整体文字和页面的位置关系模 糊。 生：修改网页并上次 师：展示并评价 师：给出本堂的主要内容的总结 小结 生：你根据前面章节中所学到的图 文配置规律的相关知识，指出下图 作业 在编排上存在哪些不合理的地方， 并提交你的修改稿。 1.1网页设计概论 板 1.网页与书页 3.建站过程 5.小结 设 2网页的优势 4.网页建立过程 学反思
教学环节 时间控制 教学内容 课件展示 师生互动 教法学法 设计意图 媒体资源 任务驱动 图片与文字配置案例 分析？ 师：给出学生一个典型的网页有问 题的网页！ 生：分析这个网页的不恰当之处， 并自己修改，进行说明 师：总结 文字与图片的配置上存在的问题： ①字体过于纤细，且字体的颜色与 背景色过于相似；广告标语的字号、 字体与小标题、正文过于一致； ③小标题与正文字号、字体过于一 致； ④行距、段距不合理； ⑤整体文字和页面的位置关系模 糊。 生：修改网页并上次 师：展示并评价 学生理解一个网页 建立的步骤。 只有一个合理的流 程才能利于合作 小结 师：给出本堂的主要内容的总结 作业 生：你根据前面章节中所学到的图 文配置规律的相关知识 ，指出下图 在编排上存在哪些不合理的地方， 并提交你的修改稿。 板 书 设 计 教 学 反 思 1.1 网页设计概论 1.网页与书页 的区别 2 网页的优势 3．建站过程 4．网页建立过程 5．小结