设计网站栏目及版面.doc

设计网站栏目及版面 一、教学目标 1．了解网站设计的基本内容。 2．依据主题设计网站的栏目和结构。 二、教材内容分析 设计网站栏目及版面是网站建设的关键步骤，栏目实质是一个网站的大纲索引，将网站的主题明确显示出来。设计好栏目，会使网站结构清晰，方便扩充和维护。 精美的网页版面设计会吸引大量的网民，精巧的版面结构能够让浏览者清楚、容易地理解作品传达的信息，同时也是不同元素巧妙排列的方式。就像传统的报刊杂志一样，我们将网页看作一张报纸或一本杂志中的一页来进行排版布局。设计版面时要把文字、图片、空白当作一个整体来看，采用平面分割方式，调动全部面积来构建整个版面。 信息技术发展日新月异，我们的教学重点应放在培养学生适应技术发展的能力上。在介绍基本概念、原理、方法以及一些相对稳定的内容时，要特别注重培养学生的思维方法。在该部分内容的学习中，充分调动学生的积极性，激发学生的创作热情和创新精神。 三、教学方法及策略 1．对已经下载的部分网站进行栏目和版面的分析比较。 2．以学生为中心，教师指导，学生依据自选主题设计栏目和构思版面。 四、教学过程 引入： 网站设计是把一个网站由蓝图变为现实的第一个步骤，是搭建网站整体结构的过程，能使后续工作有章可循，下面我们从栏目设置和版面设计入手。 新授： （一）栏目设置 1．让学生浏览光盘上的“机器人做学玩”网站，归纳该网站的栏目设置。 2．教师总结网站栏目设置要注意的事项： (1) 紧扣主题。 (2) 重点突出。 (3) 方便浏览。 3．根据以上三点，对课本第 82 页同是“环境保护”主题的两个栏目进行评价。 （二）版面设计 1．让学生打开 \4-2\sucai 文件夹中的几个网页，总结版面布局的几种类型及特点。 常见样式 特 点 示例 “厂”字型 优点：结构清晰，主次分明。 缺点：呆板。  HYPERLINK E:\网络技术应用_教师\htm\htm1\06.6.3网络技术基础教学案例、练习\1-1\sucai\中国人民大学图书馆.htm中国人民大学图书馆 “口”字型 优点：信息量大，切换方便。 缺点：页???拥挤，不够灵活。  HYPERLINK E:\网络技术应用_教师\htm\htm1\06.6.3网络技术基础教学案例、练习\1-1\sucai\先锋网--人民网.htm先锋网 — 人民网 自由式（ POP ） 优点：漂亮、吸引人。 缺点：显示速度慢，文字信息少。  HYPERLINK E:\网络技术应用_教师\htm\htm1\06.6.3网络技术基础教学案例、练习\1-1\sucai\中国海洋大学.htm中国海洋大学   HYPERLINK E:\网络技术应用_教师\htm\htm1\06.6.3网络技术基础教学案例、练习\1-1\sucai\中央美术学院.htm中央美术学院 2．教师举例：绘制“走进山东”网站的规划图。 （第一张规划图） ? （第二张规划图） ? 3．版面布局可按 创意草案——粗略布局——最后定稿 三个步骤进行。 根据网站主题的需要，从整体上设计各网页的内容、各网页之间的链接关系以及各网页的版面，画出网站的规划图。对规划图，一开始不必考虑细节功能，只是粗线条地勾画出规划的草案即可；在草案的基础上，将需要的功能模块安排到页面上，然后细化每项内容。规划并不是一成不变的，时常需要根据素材进行调整和完善。 [布置任务] 分析“机器人做学玩”的版面布局。除以上提到的，你还知道其他的布局类型吗？你最喜欢哪一种？ ?