网页制作中的页面布局及设计.docVIP

网页制作中的页面布局及设计 上海吴淞中学皮人伟 本活动的设计意图是让学生对网站栏目结构和超级链接的设计、网页的布 局、网页的组成元素有一个感性的认识。按照网站设计的基本步骤，设计自己的 网站。活动的设计采用从“静”到“动”，从“小”到“大”的方式。 任务一：。了解最常见的几种网站布局方式，布局 方式同网站内容及设计风格的关系。为“任务三”做设计上的准备。 任务二：组织学生设计和制作简单的页面布局，了解 网页布局基本原理。为“任务三”做技术上的准备。 任务三组织学生分组讨论并实施网站布局、主要内容 的设定，确定网站设计风格。 类别 目标 实现 对几种常见网页布局设计的理解 任务一，流行网页布局站点分析 利用框架进行网页布局及框架中任务二，框架的使用 网页的建立及保存 知识与技能 网页图片元素的处理 任务二，为布局设置图片 超级链接的使用及设置 任务二、三，布局站点制作 网站导航设计及站点制作 任务三 根据初期站点设计规划，利用搜 过程与方法 集整理的网站元素，通过分工协活动过程中 作将网站构建完成的过程及方法 养成良好分工协作习惯 活动过程中 培养积极主动的学习和使用信息活动过程中 技术兴趣 养成对计划的完整实施及根据具活动过程中 体情况进行修改的能力 养成沟通、诚信、务实等能力 活动过程中 培养学生信息筛选和加工的能力 活动过程中 情感态度与教师给学生提供的资料《网站形象设价值观 形成对主流平面设计的审美观 计》，并对优秀作品进行讲评 通过组织学生对不同层次人群的浏览 形成科学实践方法 测试，判断网页的布局设计是否科学 合理 体验团队合作的重要性 通过活动让学生体会到合作的作用 教师给学生提供的资料《网站建设的形成对知识产权的初步认识 知识产权保护》 本节的重点内容是对网站布局的理解，以及规划设计网站基本方法，为此， 在教学过程中设置了三个任务：了解网站的基本布局方式、网页布局设计的实现与 根据主题设计网站。本节教学的重点是网站布局的规划和设计方法，难点是框架设计的使用。 教师 校园网络解决方案 创设情境组成 的完善的帮助 系统，控制系 统，评估系统 课堂多媒体教学 协作学习 学生 当前所学概念比较 全面、正确的理解， 即最终完成对所学学生建立概念框架 知识的意义建构 独立探索 培养了学生的创新能力和合作技能 多媒体网络教室、相关主题学习资源（网站）。 步教师活动 学生活动 活动目的 骤 1.展示几种常见的网页设计布局： 通过对常见网 ?—标准五分法 页设计布局的情?-标1.小组代表交流分析内容： 分析，让学生景准四分法 ?那种设计布局好 理解布局（技导?--标准三分法 ?为什么选用这种布局 术）应为内容入 ?—综合新闻类 2.考虑：打算选择哪些布局。 服务，本身并 ?其它类网站 没有好坏之 2.引出每个组的设计任务。 分。 学生掌握利用学1. 给出制作主题――标准三分法1.根据要求设计框架。 框架设计布局习框架布局制作 2.将素材应用于框架。 的技能。 制2. 教师演示框架的使用。 3.完成网页布局 作 3. 辅导学生完成制作 1.小组讨论确定布局方案。 体验分工协协2.根据计划确定分工。 作。 1.给出开发目标。 同3.将各自制作的网页、图片，设置提高网页制作2.个别指导。 开成共享。 实践能力。 3.全班指导。 发 4.由一位同学完成布局 5.完成后先组内交流。 学会发布和交发1.指导发布。 1.学生们共享学习成果。 流的。 布2.组织交流。 2.交流成果： 学会自评和正交3.引导自评或互评。 3.自评或互评。 确的评价他人流 的作品。 梳理总结。 1．在学生交流的基础上，对学生作1． 整理和反思本节课的学习过归品提出评价意见。 程，明确信息技术作为工具在纳2．根据发现的问题，对本节课进行学习过程中的作用。 小归纳、整理。 2． 进一步思考教师所提出的有关结 3．提出学习的新要求。 问题。 1．进一步完成网页，在校园网上发布交流。 2．思考：高级布局的实现方法及工具？ 教师评价标准： 运用过程 能演示过程 20 发现过程 能设计新过20 程 完成速度 对目标的完20 成速度 表达能力 口语表达能10 力 协同能力 小组研究成30 果