第二节网站的结构与编排

第二节网站的结构与编排

第二节网站的结构与编排 1 网站的结构 2 网站的创意设计 3 网页的编排设计

第二节网站的结构与编排 _学习目标知识目标：了解建立网站结构的原则，掌握网站的几种常见结构方式；了解网站的创意设计的基本原则和创意设计中的相关要素；了解网页编排设计的基本原则。能力目标：能够根据网站定位的实际需要，运用网站结构、网站的创意设计和网页编排设计的知识与技能，创造性地分析与解决网站创意和网页编排设计中的实际问题。 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的结构与编排 • －－－网站美化工程 • 网站作为一种视觉媒体，现代设计理念中的有关内容同样适用于网站设计。 • 人性化界面设计 • 人机互动设计本章学习的主要内容就是这两个方面在网站中具体应用。 2006.12.1.xi’an

1 2 3 4 网页网页网页网页线状结构主页网页网页网页树状结构网页网页网页第二节网站的结构与编排 _ 网站的结构一、网站结构的设计 1、常见的几种结构模型： 2006.12.1.xi’an

主页网页网页网页网页网状结构第二节网站的结构与编排 _ 网站的结构网站的结构指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。在网站的发展过程中，为了容纳海量信息，网站的结构越来越复杂，有时为了使网站的内容更加条理，在形式上常常采用几种结构混合的模式。 2006.12.1.xi’an

_ 网站的结构 第二节网站的结构与编排网站结构设计的人性化体现：网站结构如果不合理，网站就变成了迷宫，使访问者迷失在大堆的信息中；对于网站工作人员来说，日常的更新或对网站结构的调整也比较麻烦。因此，要建立一个简单、有序、合理的网站结构需要遵循一些基本的原则。 (1)网站结构层次适当 (2) 网站结构拓展性广 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的结构 2、网页间的链接方式大量的信息通过各种链接联系到一起，构成网络世界的高速通道。目前主要的链接方式有以下几种：导航条超链接超文本 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的结构 2006.12.1.xi’an 超链接超文本导航条网站地图

第二节网站的结构与编排 _ 网站的创意设计网站创意设计网站创意设计，重在“创意”二字。通过人性化的创意设计，使网站定位的核心理念能够在网站的各个视觉点上充分体现。基本原则：（1）、统一性原则（2）、互动性原则（3）、适用性原则 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的创意设计即视觉识别，是CIS企业形象识别系统中最具传播力和感染力的层面。网站创意设计的具体要素 VI设计内容模块设计按照网站的定位，将信息有序的组合在一起，既体现出网站的内容特色，又能方便访问者迅速找到所需要的信息。 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的创意设计网站作为一个以视觉为主的媒介，其视觉识别系统的建立可以将网站的定位、内容在更广泛的层面上，进行更形象直接的传播。对于网站来说，表现在版面上能给访问者以强烈视觉印象的主要是网站的Logo和标准色。 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的创意设计 2006.12.1.xi’an Logo的表现形式及特点

_ 网站的创意设计 第二节网站的结构与编排色调虚拟世界是个色彩缤纷的天地，许多现实中没有的色彩都可以通过计算机合成，给人以不同的美感。基于人的视觉享受，和保证网站整体整体风格的统一，网站通常会确定一至三种主色调。 2006.12.1.xi’an

第二节网站的结构与编排 _ 网站的创意设计影响内容模块设计的因素：网站的定位访问者的阅读习惯和兴趣通过网站的具体内容设计体现网站定位中的核心内容，从而实现网站经营主体创办网站的最终目的。 2006.12.1.xi’an 通过喜闻乐见的内容方式满足访问者的各种需求，是网站吸引和留住访问者的主要方法。

第二节网站的结构与编排 _ 网站的创意设计三、首页的编排设计真正承载网站内容的是网页，而网页中又以首页为重要。几乎所有的网站都会把最重要、最吸引人的内容放在首页，而首页也会是展现网站特色的重地。基本原则：（1）逻辑性原则（2）平衡性原则（3）对比性原则 2006.12.1.xi’an

政府网站 个人网站第二节网站的结构与编排 _ 网页的编排设计 2006.12.1.xi’an

第二节网站的结构与编排 _ 网页的编排设计 • 商业网站 • 企业网站 2006.12.1.xi’an

文字超连接图片线条表格色彩音视频空白第二节网站的结构与编排 _ 网页的编排设计首页构成要素 2006.12.1.xi’an ……

第二节网站的结构与编排 _ 网页的编排设计 2006.12.1.xi’an • 文字的美

第二节网站的结构与编排 _ 网页的编排设计 • 首页的框架首页框架样式众多，没有固定的标准或模式，一般集中为横向划分、竖向划分和横竖结合划分三大形式粗框架。 2006.12.1.xi’an

第二节网站的结构与编排 _ 网页的编排设计 2006.12.1.xi’an • 横版结构

第二节网站的结构与编排 _ 网页的编排设计 2006.12.1.xi’an • 竖版结构

第二节网站的结构与编排 _ 网页的编排设计 2006.12.1.xi’an • 横竖结合式结构

第二节网站的结构与编排 _ 网页的编排设计特点：（1）突出网站特色（2）突出网络信息的新（3）内容编排忌凌乱（4）重视首页的网民户动渠道 2006.12.1.xi’an • 首页的内容组织

第二节网站的结构与编排 _本节小结本节主要是从整体上对网站的框架结构、色调、内容等方面的设计进行学习。网站主要是视觉媒体，要通过人性化的设计、通过内在逻辑性将各种信息组合在一起，将其装入科学设计的网站框架内，通过友好的界面和各种交互性的功能与用户之间沟通交流，方便用户对网站的使用。本节从视觉方面入手，首先介绍了网站的组织框架设计及主要的链接方式，在此基础上，对网站创意设计的细节要素进行深入分析。之后，从整体进入个体，对单个网页的创意设计进行学习，重点是网站首页的编排与设计，涉及到首页的各种视觉要素和内容安排 2006.12.1.xi’an

第二节 网站的结构与编排