第一课 网站的规划与设计  
学习目标:了解网站开发的基本过程、网站规划、网站设计的基本内容
学习重难点:网站规划、网站设计的基本内容
学习方法:实例分析
学习任务:欣赏优秀网站,学习本节课的教学内容
 
学习内容:
 欣赏优秀作品,思考有关问题

观摩下面优秀作品,思考下列问题:
  1、这些网站是怎样围绕主题展现内容的?
  2、这些网站提供了哪些栏目及功能?
  3、网站的链接有哪些特色,是否便捷?
  4、网站主页的布局、色彩运用有哪些特点?
优秀网站参考:  
  1、虎门销烟启示录
  2、观鸟 http://www.green-web.org/zt/birds
  3、勿忘国耻 八年抗战 http://kjapan.sdedu.net/index1.htm
  4、学生作品栏目里的:2001、2002、2003年“全国电脑制作活动”优秀作品中的网页作品


一、开发网站的基本过程
  
二、网站的规划
  1、网站主题的确定
  网站的规划从选择网站的主题开始。网站的选题,就是要根据网站的开发目标和访问网站的用户群,确定网站的主题,并给网站起一个简练响亮的名字。然后围绕这个主题搜集素材和相关资料,并把它们通过网页的形式呈现出来。参考课本第96页表4-2。
  2、网站运行环境的确定
  网站环境包括网站服务器、文件磁盘存储空间、网站域名解析等方面。
  3、网页制作工具的选择
  主要包括网页制作工具、图像处理工具、动画制作软件的选择等。
  4、网站开发任务的管理
  (1)任务分工   (2)时间安排
三、网站的设计

(一)网站的结构设计
  制作网站前要设计好网站的栏目。网站的栏目可以有多层,但并不是越多越好,以能够恰当地体现网站主题为好。此外,每个栏目本身应有一个大致的内容描述,以表达该栏目的设计思路,充实整个网站的总体结构设计。
  下面是“虎门销烟启思录”网站的结构图各网站的一、二级栏目部分内容描述:
  
(点击查看放大图)
(二)网页的版面设计
网页的版面设计包括如下两方面:
1、风格设计
  风格是指网站的整体形象给浏览者的综合感受。有的严肃,有的清爽温馨,有的深沉厚重等。风格的设计与主题密不可分,是为突出主题服务的。
  一种风格的形成需要从多方面着手设计,包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。同一网站内的各网页之间应保持风格的一致、在每个页面的相同位置放置图标、文本块等元素,这样有利于提高浏览速度、并给人以整体感。
2、版面布局设计
  网页要呈现的内容很多,概括起来可分为标题信息、栏目信息、内容信息、附加信息等,要进行合理的放置,让人看起来井井有条,主次分明。下图是版面布置的一个例子。

常见网页布局类型有:

布局类型
布局方式
实例
“国”字型 上面是网站的标题及横幅广告,接下来是网站的主要内容,左右分别列一些小条,中间是主要内容,下面是一些网站的信息 人民网
拐角型 上面是标题广告,接下来在左侧是导航栏,右侧是正文,下面是网站的信息。  
标题正文型 上面是标题,下面是正文。  
左右框型 左边是导航栏,右边是正文。有时最上方会有一个小标题。  
上下框型 上面是导航栏,下面是正文。 http://design.yesky.com/show/
综合框架型 左右、上下两种框架结构的结合。  
封面型(Flash型) 精美的平面或动画作为首页。 http://www.matinee.co.uk/site2/fr_nmd.htm

(三)网页的交互设计
  用户如何访问网站?怎样从一个位置到另一个位置?怎样防止用户在网站中“迷路”?链接点设计就是要考虑人们在浏览网站时通常有哪些需求,并帮助他快捷地路到所需的页面,实现轻松自如的浏览。
  以下是“虎门销烟启思录”网站的网页交互设计表:
(点击查看放大图)
四、本学期网页制作任务
  本学期以小组为单位,每个小组制作一个专题网站。小组以同桌的两位同学为一个小组。网站主题由各小组定。每小组选出小组长,确定好主题,作好网站的规划,完成下表。
1、网站规划
小组编号:
网站主题  
小组长(姓名及学号)  
组员(姓名及学号)  
网页制作选用工具  
时间安排  
备注  
2、给自己的主题网站设计栏目、结构和作版面设计
  参考下面阅读材料,给自己的主题网站作好结构设计、版面设计。
 
五、阅读材料
1、个人网站的规划与设计 2、网站规划书的写作规范
3、网站设计必知的65条原则  
4、网页色彩的选择及搭配原理 5、确定网站的栏目和版块
6、确定网站的目录结构 7、文件夹文件名命名规范
 

六、自由发问遇到困难可以请教周围同学或老师。