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