网页的规划与设计说明书.ppt

二、版面布局设计（1） 当然，并不是所有的网页都是有框架的，往往这时的网页都具有相当鲜明的个性。它将网页的内容很好地融入到图片或者FLASH动画当中，给人一种与众不同的感觉。这种无框架的设计通常很难，需要很高的电脑美术功底才行。很多个人站点或者艺术站点都会采用无框架结构，例如可乐猫网站主页。 二、版面布局设计（1） 第三步就是在框架的不同区域上安排不同的内容。不同的网页内容自然是不一样的，所以在这里只是向大家介绍内容编排上的一个基本知识，那就是人们在浏览一个网页的时候，通常会把第一眼停留在网页的左上角或中间的地方(如图4-25所示)，然后才会浏览其他部分。这个部分通常称为 焦点，所以在布局内容的时候， 应该把最能传达信息、最能吸 引人的内容放在这些地方， 比如网站标志和最新新闻。 二、版面布局设计（2） 2. 版面布局的基本方法 熟悉网页制作的人在拿到网页的相关内容后，也许很快就可以在脑子里形成大概的布局，并且可以直接用网页制作工具开始制作。但是对不熟悉网页布局的人来说，这么做有相当大的困难，所以这时，就需要借助于其他的方法来进行网页布局。 二、版面布局设计（2） 第一种方法是用手工的方式在纸上画草图。 第二种方法使用网页制作工具Dreamweaver或Frontpage，这两种工具都提供了图4-23和图4-24所示的网页框架集，或者使用表格布局法。 第三种方法是用专业制图软件来进行布局（如Fireworks和Photoshop等），用它们可以像设计一幅图片、一幅招贴画、一幅广告一样去设计一个网页的界面，然后再考虑如何用网页制作工具去实现这个网页。 4.4节 网站的导航设计 【本节内容】 一. 导航的实现方法 二. 导航的设计策略 一、导航的实现方法（1） 1. 导航条 导航最常用的实现方法就是“导航条”。在导航条中，超链接所对应的网页在网站的层次型结构中是并列的，所以通过它可以快速地切换到并列的其他网页。比如图4-26所示的多媒体CAI课件设计制作网站主页左边一列便是一个导航条， 该导航条在所有网页中都 存在，只要单击这个导航 条中任意一个栏目名，就 可进入该栏目首页。 一、导航的实现方法（2） 2. 路径导航 除了普通的导航条之外，导航另一种非常重要的实现方法是“路径导航”，即在网页上显示这个网页在网站层次型结构上的位置。通 过路径导航，用户不仅可 以了解当前所处的位置， 还可以快速地返回到当前 网页以上的任何一层网页。 图4-28 路径导航 一、导航的实现方法（3） 3. 其它导航方式 除了“导航条”和“路径导航”重要方法之外，还有重点导航、相关导航等扩展导航方法，这些导航可以让用户有更多更灵活的方式找到自己所感兴趣的网页。例如图4-29所示新浪网网页里的“相关链接” 是“相关导航”。有些网页上 还有“重点导航”，在醒目的 地方用一个图案或按钮链接 到重要的网页中去。 二、导航的设计策略 在设计网站导航时，可以采用的一些基本策略： 首先，至少要使用一个一层栏目的导航条，如果栏目底下也有很多内容，可以分很多子类的话，那么可以进一步设计栏目下的导航条。 其次，如果网站的层次很深，比如四层以上（主页作为第一层），最好使用路径导航。路径导航可以从第三层以下的网页开始出现。 其他导航方式作为辅助的导航手段，视实际需要而定。 练习四 在因特网上找到一个栏目层次在三层以内的网站，认真浏览后，完成如下练习： 1. 写出这个网站的名称与网站地址； 2. 画出这个网站的栏目层次结构图； 3. 画出这个网站的目录结构图； 4. 分析该网站的风格（颜色搭配、版面布局）、导航方式。 实验四 XXX个人网站的规划与设计 实验内容： 1. 确定XXX个人网站的主题 2. 规划XXX个人网站的栏目（分层设计） 3. 规划好XXX个人网站的目录结构 4. 设计XXX个人网站的风格（色彩搭配、版面布局等） 5. XXX个人网站的导航设计 谢谢大家！ 感谢您的观看！ 一、目录结构设计原则 目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员能从文件的角度更好地管理网站的所有资源。 目录结构的设计通常需要遵循以下原则： 1. 网站应有一个主目录 。 2. 不要将所有的文件都直接存放在网站根目录下 3. 根据栏目规划来设计目录结构 一、目录结构设计原则 4. 每个目录下都建立独立的images（或pictures）子目录 . 5. 目录的层次