《一般网站架构综述》由会员分享，可在线阅读，更多相关《一般网站架构综述（25页珍藏版）》请在金锄头文库上搜索。
1、一般网站架构方案,组长 王瑶琴 组员：叶瑶瑶 傅云霞 林盈,2019/11/13,2,大纲：,1、网站的整体设计与CI策划 1.1 整体设计 1.2 CI 策划 2 网站的栏目设置 2.1 划分主要内容栏目 2.2 首页设置超级链接和搜索引擎 2.3 设定双向交流栏目,2019/11/13,3,3 网站的目次结构和链接结构 3.1 目次结构 3.2 链接结构 4 网站的风格 5 网站的版面布局与首页设计 5.1 版面布局 5.2 首页设计,2019/11/13,4,6 网站色彩的搭配 7 网站中的图像和动画,2019/11/13,5,一般网站的建设需要经历这样的步骤:首先要进行功能规划、造型设
2、计,在建造的过程中需要装修装饰,达到建站的目的。当一个浏览者经过一个网站时,会被网站新颖、独特的样式所吸引;网页的构思、版式、色彩及图形图像处理都体现出所做网站的特质,能给浏览者留下深刻印象,这就是成功的网站设计。,2019/11/13,6,1 网站的整体设计与CI策划 如何面向客户提供服务、发布信息、树立良好的社会形象,都是网站要优先考虑的问题。 1.1 整体设计 网站在设计制作中要达到内容与形式的统一。这里的内容指的是网站的信息数据及文字内容,形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点。不同内容的网页要求应用不同的设计形式。比如说,政府机构的网页形式应简洁、庄重;
3、教育单位的网页应明快、大方;商业类网页则可鲜艳夺目、丰富多彩;文化艺术类的网页应讲求格调与品位等。下面是淘宝首页的整体设计：,2019/11/13,7,2019/11/13,8,1.2 CI 策划 CI ,是广告业的一个术语,是英文Corporate Identity 的缩写。在我国CI 策划运作往往表现为通过视觉语言的运用来树立形象、传播信息,从而达到让全社会认识、了解、接受的目的。一个成功的网站,和实体公司一样,也需要整体的形象包装和设计。准确的、有创意的CI 设计,对网站的宣传推广有事半功倍的效果,它能使网站迅速地深入人心,起到语言文字所不能及的作用,因而,在网站主题和数据信息、图文材料
4、具备之后,需要思考的就是网站的CI 策划和形象设计。标志、色彩、字体和广告语4个方面是一个网站树立CI 形象的关键。设计并完成这4 项工作,网站的整体形象就有一个基本的轮廓,有了一个统一的面目,并且具有了一定的专业性。,2019/11/13,9,2 网站的栏目设置 网站的栏目设置原则一是要重点突出,二是要方便用户。网站栏目的实质是一个网站内容的大纲索引,就像是一本书的目次,可以引导浏览者寻找需要的东西。在设置栏目的时候,要仔细考虑内容的轻重缓急,合理安排,突出重点。,2019/11/13,10,2.1 划分主要内容栏目 将主要内容信息按一定的方法进行分类,并为它们设立专门的栏目。例如淘宝首页有
5、天猫，聚划算，电器城，良无限，本地生活等。栏目的划分要尽量清晰,不要给人一种模糊的概念。,2019/11/13,11,2.2 首页设置超级链接和搜索引擎 网站的栏目分层设置,使网站的内容安排得有条理,结构清楚;用超级链接可以打破单一的线型结构,可以方便地从一个栏目切换到另一个栏目,使网站内容呈网型结构。解决问题的办法是在保持网站栏目结构的前提下,把最重要的内容链接到首页。如果网站的内容繁杂,层次较多,最好设置搜索引擎和“本站指南”栏目,可以帮助初访者快速找到他们所需要的浏览内容。,2019/11/13,12,2.3 设定双向交流栏目 交流栏目,是指论坛、评论等,可以让浏览者有机会发表他们的意见
6、,参与网站的活动。网络的最大优势之一是为人们提供相互沟通的手段,设立双向交流栏目比简单预留一个E-mail 更具有亲和力,更能发挥出网络技术的优势。,2019/11/13,13,3 网站的目次结构和链接结构 在对网站栏目设置有一个完整方案之后,可以进入到网络技术实现的阶段。网站的设计人员应与程序员共同商定网站的目次结构和链接结构。设计目次结构的原则是方便网站的管理与维护;设计链接结构的原则是方便浏览者的阅读。,2019/11/13,14,3.1 目次结构 目次结构是一个容易忽略的问题。目次结构的好坏,对浏览者来说并没有太大的影响,但是对于站点本身的上传维护,内容信息未来的扩充和移植有着重要的影
7、响。首先要合理安排文件的目次,不要将所有文件都存放在根目次下,这样不容易造成文件管理的混乱,可提高工作效率。另外,所有文件都在同一个根目次下,在提交时会使上传速度变慢。其次要按栏目内容建立子目次,按主菜单栏目建立,对每个栏目都相应建立一个文件夹,图片统一放在一个专门存放图片的文件夹中等,将需要经常更新的建立独立的子目次。而一些相关性强,不需要经常更新的栏目则可以合并后放在一个统一目次下。需要注意的是:目次的层次不要太多,一般不超过5 层。对于网站的工作人员来说,层次越少查找起来也就越容易,也就越便于维护管理;不要使用中文目次。网络虽然是无国界的,但Internet 上使用最广泛的语言是英语,如
8、果使用中文目次,有可能对网址的正确显示造成困难,尤其是非汉语浏览者就不能正常使用了;使用意义明确的目次文件名,在给目次取名字时,应考虑取的名字尽量反映内容,以便于记忆管理。比如可以用栏目名字的拼音字母或英文名字建立目次。,2019/11/13,15,3.2 链接结构 网站的链接结构是指页面之间相互链接关系。如果把这种关系画成示意图表,就好比一个拓扑结构图。它建立在目次结构基础之上,但可以跨越目次。形象地说,每个页面都是一个固定点,链接是在2个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。要用最少的链接,使浏览
9、最有效率。为帮助浏览者明确自己所处的位置,最好在页面里显示导航条。,2019/11/13,16,4 网站的风格 网站的风格是指站点的整体形象留给浏览者的综合感受。第一,明确网站的服务对象。网站的风格在网站建立之前就已经被确定了,网站的设计师则应该加深对站点的了解,并借鉴其他设计领域的成功作品,才能使网站风格贴近内容,产生好的创意来。第二,明确网站性质之后,应考虑网站的个性化因素。如企业网站可以突出产品服务意识,显示出周到服务的风格。,2019/11/13,17,5 网站的版面布局与首页设计 当网站的总体设计基本确定之后,在实施阶段,最具体的工作就是如何做一幅幅的网页了。动手设计网页的第一步是设
10、计版面的布局。布局是一个设计的概念,指的是在一个限定的面积范围内合理安排布置图形图像和文字的位置,在把文章信息按照轻重缓急的秩序陈列出来的同时,将页面装饰美化起来。,2019/11/13,18,5.1 版面布局 在轮廓草图上,首先将需要放置的功能模块安排到页面上。主要包含网站标志、主菜单、栏目条、广告位、搜索器、计数器等。必须突出重点,将网站标志、主菜单、栏目目次及广告等最重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的排放。各个功能模块的样式、位置确定之后,需要认真研究文稿与图形图像的编排,按照平面设计的规律做出网页的基本样式,可以使用画笔、尺子创作,也可以运用Photoshop ,
11、 Illustrator ,Pagemaker 或者Dreamweaver 等软件制作。在布局过程中,可以遵循的原则是: (1) 平衡。指画面的图像、文字的视觉分量在左右上下几个方位基本相等,分布匀称,能达到安定、平稳的效果。过于平衡的画面难免有呆板的感觉,有时需要在局部打破平衡或对称。(2) 呼应。在不平衡的布局中的补救措施,使一种元素同时出现在不同的地方,形成视觉上的相互联系。(3) 对比。利用不同的色彩、形态、线条等视觉元素相互并置对比,造成画面的多种变化,达到丰富视觉的效果。(4) 疏密。疏是指画面中形式元素稀少(甚至空白) 的部分,密是指画面中形式元素繁多的部分。在网页设计中就是空白
12、的处理运用,太满、太密、太平均是任何版式设计的大忌,适当的疏密搭配可以使画面产生节奏感,体现出网站的格调与品位。网站的各个栏目,各级页面都应该按照上述原则设计出草图来,当然,各个栏目的内容不同,设计方案也应该有所变化。只要统一在网站基本风格之中就可以了。比如当当网，将一些热门限时的促销打折活动放在正中最突出显眼的部分，文字置于四周，各部分疏密程度搭配适当。,2019/11/13,19,2019/11/13,20,5.2 首页设计 首页是浏览者访问一个网站时看到的第1 页,通过链接进入网站的栏目中,找到需要了解的内容。首页好比是书的封面,首页设计是一个网站能不能吸引人的关键。为网站设计什么样的首
13、页,要依具体情况而定。,2019/11/13,21,6 网站色彩的搭配 色彩选择和搭配是网站设计重点之一。包括网站的色调、背景、文字、图标、边框、链接等都是网站设计者一开始就必须要考虑的问题。生活中看到的颜色是光的吸收与反射而产生的。红、黄、蓝是三原色。自然界中的颜色都可以用这3 种颜色调和而成,而计算机中的颜色则是由红、绿、蓝3 种颜色搭配而成的。比如海尔的网站就采用冷色系，而淘宝则采用暖色系；,2019/11/13,22,2019/11/13,23,7 网站中的图像和动画 网站中的图像和动画是网站建设中的主要内容之一。就信息发布的角度而言,图像和动画可以起到文字说明不了的内容的作用。同时图像和动画也是网站装饰的主要手段。在作为可浏览网页的浏览器中,均识别J PG,GIF 和PNG图像文件格式。但是绝大多数网页都选择前面的2 种，例如苹果官网中鲜亮的图片和动画代替了繁杂枯燥的文字，使得我们看到了更为广阔的网络空间。,2019/11/13,24,
