网页的规划与设计
内容、内容的显示方式、数据库结构等各个方面的问
题。例如很多网站都有的用户注册栏目,如图4-9所示,
这个栏目通常需要六个网页,采用线性+分支结构来进
行组织。
不合法
开始注册
接受条款 同意 不同意
填写注册信息 结束注册
信息检验 合法 完成注册
网页制作与上图中的每一个网页。如第三个网页
网页制作与网站设计
三、栏目规划举例
根据上节所学知识,首先需要做的是确定网站所 必需的栏目。第一个必需的栏目就是图片栏目,将其 取名为“个人图库”;接着就是简介德德玛的艺术生 涯,第二个栏目是“艺术简介”;第三个栏目是“草 原夜莺”,专门介绍德德玛演唱的歌曲与视频专辑; 第四个栏目是“精彩回放”,介绍德德玛在央视“艺 术人生”、“东方之子”等频道被报道的专辑;第五 个栏目是“文摘报道”介绍报刊登载的有关道德德玛 歌唱生涯的重要文章;为让更多朋友参与讨论、共享 收藏,以及对本网站的建议,还设置交互性栏目“德 迷论坛”,等等。
容划分得非常清晰且便于理解,因而几乎所 有的网站都采用这种结构来进行总体的栏目 规划,即将所有的内容先分成若干个大栏目, 然后再将每个大栏目细分成若干小栏目,以 此类推直到不用再细分为止。
网页制作与网站设计
一、逻辑结构介绍(2)
2. 层次型结构
层次型结构也有不好的地方,就是用户如果要访问 最底层的网页就不得不按照层次从上到下一级一级地 访问,最终到达想要访问的网页。
“填写注册信息”采用表单来实现,所需注册的信息 根据网站的需求而定,通常包括用户名、密码、性别、 国籍、省份、E-mail等内容。
还要设计好网页之间的分支关系,如用户在第二 个网页同意“接受条款”则进入到“填写注册信息” 的网页;不同意“接受条款”时,就要进入到“退出 注册”,该网页显示有关中止注册的信息。 。
网页制作与网站设计
一、目录结构设计原则
4. 每个目录下都建立独立的images(或 pictures)子目录 .
5. 目录的层次不要太深 6. 不要使用中文目录名和中文文件名 7. 可执行文件和不可执行文件分开放置 8. 数据库文件单独放置
网页制作与网站设计
二、目录结构设计举例
以“我从草原 来--德德玛”个人 网站为例。在上节 栏目规划的基础上, 接着为这个网站设 计它的目录结构, 如图4-11所示。
网页制作与网站设计
二、栏目规划的任务(1)
1. 确定必需栏目 栏目规划的第—步就是要确定哪些是必需的栏目,
这取决于网站的性质。 例如,对于一个企业网站来说,公司简介、产品
介绍、服务内容、技术支持、联系方式等栏目是必不 可少的,而对于政府网站来说政务、政策法规、地方 经济、百姓生活、观光旅游等栏目都是必需的。个人 网站相对来说比较随意,往往取决于所收集的内容, 但个人简介、个人收藏等栏目通常不能缺少。
交互性栏目是能与用户进行双向交流的栏目,通 过它解答用户的疑问、了解用户的需求,还可以获得 用户对网站的建议和看法。如留言板、论坛(BBS)。
网页制作与网站设计
二、栏目规划的任务(2)
2. 确定重点栏目 确定完需要设置哪些栏目后,需要从这些栏目中
挑选出最重要的几个栏目,然后对它们进行更详细的 规划。
所以,层次型结构最好的深度就是三层,最多不要 超过五层。
另外,建立一个良好的导航系统(本章第4节将学 习)也可以弥补层次型结构这方面的缺点。
网页制作与网站设计
一、逻辑结构介绍(3)
3. 网状结构
如图4-5所示,网状结 构是指多个网页相互之间 都有超链接的一种结构, 这些网页可以是层次结构 上的任意网页,由于导航 的需要或者内容上的相关 性而相互链接在一起。
服务条款 信息填写 信息检验 完成注册 图片集 音乐集
…… 电影集
网页制作与网站设计
4.2节 网站的目录结构设计
目录结构也可称为物理结构,它是解决如何 在硬盘上更好地存放包括网页、图片、Flash动 画、视音频、数据库等各种资源在内的所有网站 资源。
目录结构是否合理,对网站的创建效率会产 生较大的影响,但更主要的,会对未来网站的性 能、网站的维护及扩展产生很大的影响。
网页制作与网站设计
二、栏目规划的任务(1)
1. 确定必需栏目 除了内容栏目之外,网站还应该包含另外两类栏目:
用户指南类栏目和交互性栏。 用户指南类栏目是为了帮助用户了解这个网站的背
景、性质、目的、功能及发展历程,如何更好地对网 站进行访问,以及网站的最新动态。常以“帮助”、 “关于网站”、“网站地图”、“最新动态”等名称 出现。
开始注册
接受条款
填写注册信息
图4-2 用户注册流程
完成注册
网页制作与网站设计
一、逻辑结构介绍(1)
1. 线性结构
如图4-3所示的带选择的线性结构,可以
根据用户不同的选择来访问不同的下一个网
页。
网页1
网页2
网页 2’
网页3
网页4
图4-3 带选择的线性结构
网页制作与网站设计
一、逻辑结构介绍(2)
2. 层次型结构
网页制作与网站设计
二、栏目规划的任务
栏目规划的主要任务是对所收集的大量内 容进行有效筛选,并将它们组织成一个合理的 易于理解的逻辑结构。成功的栏目规划不仅能 给用户的访问带来极大的便利,帮助用户准确 地了解网站所提供的内容和服务,以及快速地 找到自己所感兴趣的网页,还能帮助网站管理 员对网站进行更为高效的管理。
上到下逐级确定每—层的栏目。首先是确定第 一层,即网站所必需的栏目,然后对其中的重 点栏目进行进—步规划,确定它们所必需的子 栏目,以此类推直至不需要再细分为止。将所 有的栏目及其子栏目连在一起就形成了网站的 层次型结构。
网页制作与网站设计
二、栏目规划的任务(3)
3.建立层次型结构
如图4-7所示的可乐 猫网站,它在第—层设置 了“我的资料”、“我的 作品”、“怀念家驹”、 “给我留言”四个重点栏 目 和 “ news”、“info”、 “link”三个其他栏目。
dedemaweb
images
jingcaihuifang images
网页制作与网站设计
二、栏目规划的任务(3)
可乐猫网站
LINK INFO NEWS
ARTICLEE
CG
FLASH
我的资料
我 我我 的 的的 清 爱梦 单 情想
我的作品
怀念家驹
给
我
留
言
成旧经 员日典 介足照 绍迹片
图4-8可乐猫网站栏目的层次型逻辑结构
网页制作与网站设计
二、栏目规划的任务(4)
4. 设计每一个栏目 层次型结构的建立只是对网站的栏目进行
网页制作与网站设计
第四章 网站的规划与设计
网页制作与网站设计
第四章 网站的规划与设计
【本章内容】 4.1 网站的栏目规划 4.2 网站的目录结构设计 4.3 网站的风格设计 4.4 网站的导航设计
网页制作与网站设计
4.1节 网站的栏目规划
【本节内容】 一.逻辑结构介绍 二. 栏目规划的任务 三. 栏目规划举例
4-6 网状结构举例
网页制作与网站设计
一、逻辑结构介绍(3)
3. 网状结构 网状结构的实现就在于所有相关的网页上
保留到其他网页的超链接。这种结构使用户 能更方便地在网站上游弋,但同时也带来一 个庞大超链接数的问题,对于维护来说相当 麻烦,某个网页的改动(如改名、删除、增加) 就可能同时需要对所有的网页进行相应的修 改。所以在网站中要谨慎使用网状结构。
了总体的规划,接下来要做的是对每一个栏目 或者子栏目进行更为细致的设计。
设计一个栏目通常需要做三件事情。 首先是描述这个栏目,描述这个栏目的目 的、服务对象、内容、资料来源等 。
网页制作与网站设计
二、栏目规划的任务(4)
4. 设计每一个栏目
其次是设计这个栏目的实现方法,即设计这个栏目
的网页构成、各个网页之间的逻辑关系、各个网页的
这种选择取决于网站的目的与功能。比如企业网 站,其目的可能是为了更好地推销自己的产品,所以 产品介绍便是它的重点栏目。 而个人网站,目的通常 是为了让别人分享他收集到的信息,向别人介绍他的 原创作品,它的重点栏目往往是个人作品和个人收藏。
网页制作与网站设计
二、栏目规划的任务(3)
3.建立层次型结构 建立层次型结构是一个递进的过程,即从
网页制作与网站设计
4.2节 网站的目录结构设计
【本节内容】 一.目录结构设计原则 二. 目录结构设计举例
网页制作与网站设计
一、目录结构设计原则
目录结构对用户来说是不可见的,它只针对网站 管理员,所以它的设计是为了网站管理员能从文件的 角度更好地管理网站的所有资源。
目录结构的设计通常需要遵循以下原则: 1. 网站应有一个主目录 。 2. 不要将所有的文件都直接存放在网站根目录下 3. 根据栏目规划来设计目录结构
设计栏目之间关系的工作,就是找出各个栏目之间 可以共享的相关内容,并确定采用什么样的方式将它 们串联起来。
网页制作与网站设计
三、栏目规划举例
栏目规划最便捷的方法就是参考同类网 站的栏目规划,吸收共同的栏目,去掉不适 合的栏目,然后添加有自己特色的栏目。
参考“德德玛”网站来学习个人网站的 栏目规划。假若你非常喜欢歌唱家德德玛, 你已经收集了很多有关德德玛的歌曲、图片 以及报道等。现在要建立一个名为“我从草 原来-德德玛”的个人网站 。
相对于按先后顺序组织 而成的线性结构,层次型 结构是按照网页之间的包 含关系组织而成的。图4-4 所示的就是一个典型的层 次型结构,它很像一棵倒 置的树。
网页1
主页
网页2
网页3
网
网
页
页
11
21