网页设计第2章

第2章网站建设基础第2章网站建设基础2.1网站的规划2.2网站主题2.3网站结构2.4网站的开发流程2.1网站的规划定位网站主题和名称网站的风格网站的CI形象确定网站的栏目和版块确定网站的目录结构和链接结构

2.1.1定位网站主题和名称网站名称的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。

（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里举几个例子：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。

2.1.2网站的风格

风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，语气，内容价值，存在意义，站点荣誉等等诸多因素。风格创意（艺），不仅仅是依靠色彩，图片，架构和文字等视觉元素自身的独具创新。重点是视觉元素在页面中达到协调统一，保持一致的识别体系。网站的特有风格还包括信息内容的规划管理，互动程序的建构和使用方法等其他非视觉方面。

风格类型：金属风格像素风格报纸风格三维风格大字报风格

网页设计——网站风格创意(艺)金属风格

网页设计——网站风格创意(艺)像素风格

网页设计——网站风格创意(艺)报纸风格

网页设计——网站风格创意(艺)三维风格

网页设计——网站风格创意(艺)大字报风格

网页设计——网站风格创意(艺)风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。如何树立网站风格呢？我们可以分这样几个步骤：

第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。

第二，你需要彻底搞清楚自己希望站点给人的印象是什么。

第三，在明确自己的网站印象后，开始努力建立和加强这种印象。

对于确定风格，这里提供一些参考：

1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。

2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。

3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色。

5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。

6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。

7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用.。☆※○

□△→等等。虽然很简单的一个变化，却给人与众不同的感觉。

8.用自己设计的花边，线条，点。

2.1.3网站的CI形象

所谓CI，是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。标志，色彩，字体，标语是一个网站树立CI形象的关键，确切的说是网站的表面文章，设计并完成这几步，你的网站将脱胎换骨，整体形象就会有一个提高。

在您的网站主题和名称定下来之后，需要思考的就是网站的CI形象。设计网站的标志(logo)如同商标一样，logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如：新浪用字母sina+眼睛作为标志。标志的设计创意来自你网站的名称和内容。比如：(1).网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。(2).网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。

新浪用字母sina+眼睛作为标志。北京亿恒伟业房地产开发有限公司的标志是以“亿恒伟业”四个汉字的变形为主体。“亿”字左半部变形为数字“1”，预示着公司将成为行业的龙头老大，也预示者公司全体员工永争第一的拼搏精神和“信誉第一、质量第一”的经营理念，同时也寓意着公司的发展一帆风顺。北京爱永恒影楼的标志是以英文字母“LOVE"和一颗红心为主体，红心中间是抽象的一男一女携手前进的图形，寓意着两个人一颗心，从而寓意着爱永恒。

设计网站的宣传标语网站的宣传标语可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的“味道好极了”；麦斯威尔的“好东西和好朋友一起分享”；Intel的“给你一个奔腾的心”。

2.1.4确定网站的栏目和版块

在动手制作网页前，一定要考虑好以下三方面：

(1)确定栏目和版块

(2)确定网站的目录结构和链接结构

(3)确定网站的整体风格创意设计

(1)确定栏目和版块栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面：

①

一定记住要紧扣你的主题！

一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。

②

设一个最近更新或网站指南栏目

如果你的首页没有安排版面放置最近更新内容信息，就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客，让你的主页更有人性化。

③

设定一个可以双向交流的栏目

不需要很多，但一定要有。比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个“Emailme”的站点更具有亲和力。

④设定一个下载或常见问题回答栏目

网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下载，而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目，会得到大家的喜欢。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。

总结以上几点，我们得出划分栏目需要注意的是：

●尽可能删除与主题无关的栏目

●尽可能将网站最有价值的内容列在栏目上

●尽可能方便访问者的浏览和查询

上面说的是栏目，我们再看看版块设置。版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。⑴在网站根目录中开设images

、common

、temp

三个子目录，根据需要再开设media

子目录.images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志logo、banner

条、菜单、按钮等等；common

子目录中放css、include

等公共文件；temp

子目录放客户提供的各种文字图片等等原始资料；media

子目录中放flash,

avi,

quick

time

等多媒体文件

。(2)网站的目录结构在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images

和media

的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。按栏目内容建立子目录。目录的层次不要太深。目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称.关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是动态菜单等等。链接结构图片的命名原则

图片的命名原则遵循以下几条规范

：

☆

名称分为头尾两两部分，用下划线隔开。

☆

头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等

☆

尾部分用来表示图片的具体含义。下面是几个样例，大家应该能够一眼看明白图片的意义：

banner_sohu.gif

banner_sina.gif

menu_aboutus.gifmenu_job.gif

title_news.gif

logo_police.giflogo_national.gif

pic_people.jpgpic_hill.jpg.一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner

标志性的图片我们取名为：logo

在页面上位置不固定并且带有链接的小图片我们取名为:button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu

装饰用的图片我们取名：pic

不带链接表示标题的图片我们取名：title

文

件

命

名

原

则

每一个目录中应该包含一个缺省的html

文件，文件名统一用index.htm

文件名称统一用小写的英文字母、数字和下划线的组合。

命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作

。2.1网站主题主题定位要准确、鲜明

如果建立个人网站，题材应该选择自己擅长或喜欢内容。如果为企业建立一个网站，站点提供的产品或服务是与众不同，这是能否吸引网民访问的关键所在。

2.1网站主题主题要有特色和个性

⑴不要模仿其它网站，否则会给人没有特色的感觉

⑵网站主题的实现要体现自己的个性、自己的文化

⑶充分调查和自己相关的网站，掌握丰富的市场资料

2.1网站主题对于个人网站，主题应该精网站的主题要集中或相对集中网站的内容要尽可能地搜集相关材料建设与维护网站时也应在主题方面投入更多的精力2.2网站结构网站的目录结构

建立网站时创建的目录就是网站的目录，建立一个结构清晰、内容完整的网站目录结构对于管理和维护站点很重要

2.2网站结构建立目录结构的建议

按栏目内容建立子目录在每个主目录下都建立独立的images目录目录的层次不要太深避免使用中文和符号作为目录和文件名尽量避免在根目录下存放文件2.2网站结构网站的逻辑结构图2-1树状逻辑结构图2-2网状逻辑结构2.3网站的开发流程1.建站前进行需求分析

明确建站的目的，仔细分析网站的性质，认真了解网站的服务对象，熟练掌握网站的评估标准。2.建站时确定主题