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

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