网站总体设计与网页布局

网站总体设计和网页布局
20
2）网站的链接结构
网站的网站的链接结构是指页面之间相互链接的拓扑结构。 它建立在目录结构基础之上，但可以跨越目录。
形象的说：每个页面都是一个固定点，链接则是在两个固 定点之间的连线。一个点可以和一个点连接，也可以和多 个点连接。
用最少的链接，使得浏览最有效率 。
第六章 网站总体设计与网页布局
规划网站、组织网站
主要内容
1、WEB站点建立的基本步骤 2、网站整体风格和创意设计 3、网站的目录结构和链接结构 4、版面布局与首页搭配
5、使用布局视图、框架、表格等进行页面布局。
6、网站建设实例讲解
网站总体设计和网页布局
2
1、WEB站点建立的基本步骤
– （3）整体布局设计
– （4）头部设计 – （5）导航条和背景图像制作
– （6）制作“主广告区”、“信息分类”区与页脚
– （7）创建样式 – （8）添加导航栏信息与分类信息 – （9）添加页脚及公告栏、标语栏信息 – （10）制作首页 – （11）其他页面链接制作 – （12）添加网站链接
网站总体设计和网页布局 27
在制作网页之前应设计出网页的页面结构，即需要设计 几个栏目和版块。 大多数网站都是以表格来布局网页，也可以用框架同表 格结合来完成。 一般制作的第一个网页应该是首页，首页是整个网站精 华的汇集。 对于网页制作者来说，首页是最难也是最花工夫的。
为制作风格一致的网站，还需要创建模版等。
网站总体设计和网页布局
24
4、版面布局与首页搭配
1）设计要求 – 整洁大方：各种元素的运用应适度 – 突出重点：突出主体内容 – 平衡对称：页面的上下左右应给人以任意匀称 的感觉 – 风格一致：样式统一，配色合理
网站总体设计和网页布局
25
5、使用布局视图、框架、表格等进行页面布局。
网站总体设计和网页布局
16
3、网站的目录结构和链接结构
1）网站的目录结构 2）网站的链接结构
网站总体设计和网页布局
17
1）网站的目录结构
网站的目录是指你建立网站时创建的目录 目录的结构是一个容易忽略的问题，大多数站长都是未经 规划，随意创建子目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉， 但是对于站点本身的上传维护，内容未来的扩充和移植有 着重要的影响。
网站总体设计和网页布局
15
2）进行创意设计
创意思考的途径最常用的是联想，这里提供了网站创意的25种联想 线索： 1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长 5.使它闪 动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的 9.使 它重复 10.使它变成立体 11.参加竞赛 12.参加打赌 13.变更一部分 14.分裂它 15.使它 罗曼蒂克 16.使它速度加快 17.增加香味 18.使它看起来流行 19.使它对 称 20.将它向儿童诉求 21.价格更低 22.给它起个绰号 23.把它打包 24.免费提供 25. 以上各项延伸组合 -------------(转载自樊志育《广告制作》)
CN域名认证注册服务机构 ，中资源、中国万网等）
网站总体设计和网页布局 9
7）上传站点资料
利用专门的上传软件对网页进行上传，如：CuteFTP 就是一款很好的网页上传软件，方便、灵活。 如果你的企业信息量和数据量较大，可采用服务器托 管方案，将已经制作好的服务器主机放到ISP的网络 中心机房。
网站总体设计和网页布局
28
实例讲解－ （2）颜色设计
可采用配色软件来完成——一般主色少于四种颜色
人对色彩的联想：
– 红色：热情、震撼、高贵、力量来源、刺激、上进
– 灰色：压抑、暧昧、内向、失望、消极 – 蓝色：清凉、哀伤、沉稳、深远、开朗
– 黄色：高贵、富有、灿烂、活泼
– 黑色：严肃、夜晚、沉着 – 白色：纯洁、简单、洁净
网站总体设计和网页布局
18
1）网站的目录结构
建立目录结构的一些建议:
– 不要将所有文件都存放在根目录下，否则会造成： • 文件管理混乱 • 上传速度慢 – 按栏目内容建立子目录
• 子目录的建立，首先按主菜单栏目建立
• 其他的次要栏目，需要经常更新的可以建立独立的 子目录。不太更新的可合并放在一个目录下。
1）网站建设前的准备工作 2）创建站点的导航结构 3）收集整理相关资料 4）组织文档和数据，进行具体的网站建设
5）测试站点
6）申请域名和主页空间 7）上传站点资料
网站总体设计和网页布局
3
1）网站建设前的准备工作
确定网站的主题； 计划要发布的内容； 一般个人主页可以根据自己的爱好或一些热门的话题 来选择网站的主题。
– 绿色：植物、生命、生机 例如：蓝色巨人IBM采用蓝色系来宣传 例如：儿童类网站 – 紫色：浪漫、富贵 www.baobao16.com – 棕色：大地、厚朴 例如：新闻类网站 www.xinhuanet.com 配色软件colorkey xp
网站总体设计和网页布局 29
实例讲解－ （2）颜色设计
– 2.星状链接结构(一对多)。 • 类似网络服务器的链接，每个页面相互之间都建立有链接。 • 这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。 • 缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置， 看了多少内容。
网站总体设计和网页布局
22
2）网站的链接结构
在实际的网站设计中，总是将这两种结构混合起来使用； 浏览者既可以方便快速的达到自己需要的页面，又可以清晰 的知道自己的位置，解决办法是 ：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接结构。
• 所有的程序一般都存放在特定目录下。
– 在每个主目录下都建立独立的images（图片）目录 – 目录的层次不要太深，不要超过3层。
网站总体设计和网页布局
19
1）网站的目录结构
其他注意事项: – 1.不要使用中文目录。使用中文目录可能对网址的 正确显示造成困难。 – 2.不要使用过长的目录。尽管服务器支持长文件名， 但是太长的目录名不便于记忆。 – 3.尽量使用意义明确的目录。例如可以用 Flash,Dhtml,Javascript来建立目录，也可以用1， 2，3建立目录，但明显前者更明确，更便于记忆和 管理。
2）进行创意设计
创意是指站点的整体创意，(因为这个创意而产生这个 站点，或者相同的内容，推出的创意不同) 创意思考的过程分五阶段
1.准备期--研究所搜集的资料，根据旧经验，启发新创 意； 2.孵化期--将资料咀嚼消化，使意识自由发展，任意结 合； 3.启示期--意识发展并结合，产生创意； 4.验证期--将产生的创意讨论修正； 5.形成期--设计制作网页，将创意具体化。
给人的感受是平易近人的、生动活泼的、庄严肃穆的……
网站总体设计和网页布局
12
1）树立网站的风格
如何树立站点的风格 网站的内容要有价值 网站的配色要合理，并且合乎内容需求 网站要具有一定的个性：活泼、诚恳、奔放……
与其他站点相比，要有自己的特色或不一样的地方
确立站点风格的问卷
网站总体设计和网页布局
– 中小企业，信息量和数据量都不是很大，可采用虚拟主机托 管方案，即租用要建设网站。
– 如果你的企业信息量和数据量较大，可采用服务器托管方案， 将已经制作好的服务器主机放到ISP的网络中心机房。 – 如果是个人网站，资金又很有限，如果是个人网站，资金又 很有限，可以到一些公司申请他们的域名+主机。（ CNNIC
实例讲解－ （1）栏目设置
– 根据网站的主题来确定网站的栏目 – 例如以建立一个教育站点（如Internet与网页设计站点）为 例： – 分析： • 既有组织类站点的功能 • 又有信息类站点的功能 – 栏目设置为： • 课程大纲——介绍课程的学习大纲，自学大纲 • 课程内容——课程的具体内容，提供对应的PPT下载 • 资料素材——分类提供相关学习资料、建站素材 • 课程练习——提供各章节的对应练习题 • 课程互动——提问与解答 • 娱乐放松——提供娱乐链接
– 5.使用统一的语气和人称。
– 6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度 都必须一样。 – 7.创造一个特有的符号或图标。比如在一句链接前的一个点，可以使 用,.。☆※○◇□△→等等。 – 8.用自己设计的花边，线条，点 – 9.展示你网站的荣誉和成功作品。
网站总体设计和网页布局 14
网站总体设计和网页布局
10
2、网站整体风格和创意设计
1）树立网站的风格 2）进行创意设计
网站总体设计和网页布局
11
1）树立网站的风格
风格指站点的整体形象给浏览者的综合感受 整体形象主要包括： 站点的CI（标志，色彩，字体，标语）， 版面布局，
浏览方式，
交互性， 文字，语气，内容价值，存在意义，站点荣誉等等
– 如普及医疗卫生知识，
– 提供文学艺术信息， – 学习计算机技术，
– 向世人推销自己等等。
网站总体设计和网页布局
4
2）创建站点的导航结构
建设网站的整体框架设计。 注意在站点的基本结构中，页面之间的链接关系要清 晰，同时要兼顾以后的可扩充性，以备网站的修改与 发展。
网站总体设计和网页布局
1）使用表格进行布局 2）使用框架进行布局 3）使用图层进行布局 4）使用布局视图进行页面布局
– 布局模式
– 绘制布局表格和布局单元格 – 编辑布局表格和布局单元格
– 使用网格
– 内容添加，制作主页
网站总体设计和网页布局
26
6、网站建设实例讲解
– （1）栏目设置 – （2）颜色设计
网站总体设计和网页布局
7
5）测试站点
制作出的网站可以先在本地进行测试，检查站点的浏 览器兼容性以及可能存在的错误链接等。
网站总体设计和网页布局
8
6）申请域名和主页空间
域名分为国际域名和国内域名。 请登录申请域名，根据你的资金实力和网站的重要性做出选择： – 大型企业，资金雄厚，可以向邮电局申请专线服务。需要建 立自己的机房，配备服务器、路由器、网络管理软件及网络 管理人员。
网站总体设计和网页布局
21
2）网站的链接结构
建立网站的链接结构有两种基本方式 ： – 1.树状链接结构(一对一)。
• 首页链接指向一级页面，一级页面链接指向二级页面。这样的链 接结构浏览时，一级级进入，一级级退出。
• 优点是条理清晰，访问者明确知道自己在什么位置，不会“迷” 路。
• 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页 面，必须绕经首页。
设计用色实例 – 1、这是一个娱乐类的综合性网站UGO，他的配色 方案是：
• 背景色为黑色RGB为（0，0，0）中嵌套RGB（0， 0，82），
• 字体白色RGB（255,255,255）,
5
3）收集整理相关资料
包括：网站徽标、背景图片、按钮图片以及网站需要 展示的内容。 – 有能力者可以自己编制网站建设所需的内容， – 也可以通过各种渠道搜集相关资料，注意在引用他 人的资料和文章时，应征得对方的同意，并注明作 者和出处。
网站总体设计和网页布局
6
4）组织文档和数据，进行具体的网站建设
一级页面 二级页面 [ 财经新闻1，财经新闻2，……] 娱乐 新闻 页 体育 新闻 页
财经 新闻 页
首页
[ 娱乐新闻1，娱乐新闻2，……]
[ 体育新闻1，体育新闻2，……]
网站总体设计和网页布局
23
2）网站的链接结构
– 注意:以上我们都是用的三级页面举例。若站点内容 庞大，分类明细，需要超过三级页面，则建议在页面 里显示导航条，可以帮助浏览者明确自己所处的位置。 – 即为经常看到许多网站页面顶部的，类似这样:“您现 在的位置是:首页->财经新闻->股市信息->深圳股>深发展”
13Βιβλιοθήκη Baidu
1）树立网站的风格
建立和加强风格印象 – 1.将标志logo尽可能的出现在每个页面上。在页眉，页脚或背景。 – 2.突出标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等 色彩尽量使用与标准色彩一致的色彩。 – 3.突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。 – 4.想一条朗朗上口宣传标语。把它做在banner里，或放在醒目的位置