1、第12章 网站的整体规划,一项建筑工程在开始之前需要进行详细地规划，网站建设也是一样。在创建网站前必须做的工作就是对网站进行整体的规划和设计。网站的整体规划和设计在整个网站创建中起到指导的作用。就个人网站而言，好的网站规划能够令网站质量更佳，使浏览者身心舒畅。 对于商业网站来说，整体规划成功与否能够在一定程度上决定该网站日后的发展。只有在网站建设前进行了详细合理的规划，才能避免在网站建设过程中出现各种各样的问题，才能使网站建设能够顺利地开展和使建成后的网站能够顺利运营。因此，网站规划是决定网站成功与否的关键。,12.1 网站规划概述,网站规划是指在网站创建前必须明确创建网站的主题、目的和功能。
2、也就是网站提供哪些服务和内容、网站的设计方案、网站的测试和发布方案、后期网站的维护和推广方案、投入费用以及必要的市场分析等。,12.1.1 市场分析,个人网站具有自娱自乐的特点，故市场分析对于个人网站而言不是必要的。但对于商业网站而言，该项却是不可或缺的网站规划要素。商业网站具有赢利性的本质特点，所以只有做好网站的市场分析工作，才能使商业网站拥有更好的发展前景。,12.1.2 网站的目的和主题,在进行市场分析后，就要确定网站的目的和主题。 确定创建网站的目的。对个人网站而言，应确定建立的网站是为了和亲朋戚友一起分享自己的一些东西，还是纯粹地为了交友或是其他目的；对于企业网站而言，确定创建网站的
3、目的能够对日后网站的运营起到指导的作用，所以具有重大的意义。通常，创建企业网站的目的包括：宣传企业蜗蟆故静贰缱由涛窈屯嫌取 确定网站的主题。网站的主题很重要，设计者要根据已经确定的网站有目的地去构思网站的主题。,12.1.3 确定网站的内容和服务,网站的内容和服务使网站的目的和主题更具体化。对于个人网站，网站的内容不用过分强调标新立异，但却不能做一些过于陈旧的东西。例如，几年前就已经兴起且已经流行过的东西就不要放太多。互联网上喜欢有新意的东西，访问者对于已经看过的东西一般很少会感兴趣。 一般网上商城网站的栏目包括：会员登录、会员注册、产品搜索、产品详细信息、在线订单、相关帮助和联系信息等。如图
4、所示为某外国软件公司网站，读者可仔细思考一下其网站栏目的划分与网站主题和目的之间的关系。,外国某软件公司的网站,12.1.4 网页设计,网页设计是网站规划中的一个非常重要的环节。网页的设计包括网站的命名、网站的Logo设计、网页的布局设计、网页的色彩搭配和网站的字体等。互联网上有很多风格迥异的网站，其表现有的大气、有的婉约、有的精致、有的古典、有的沉稳、有的庄严肃穆、有的高雅严谨、有的雄伟壮丽等。如图所示是某外国政府网站，体现出庄严肃穆的国家威严感和大气感。,庄严肃穆的外国政府网站,12.1.5 网站的测试和发布,网站设计完成后，接下来要进行的是网站的测试和发布操作。在网站规划阶段必须做好网站
5、的测试和发布的方案。很多网页设计的初学者以为网站设计好了就可以进行网站的发布了，其实不然。在网站制作完成后，要认真地检测网站存在的错误。在检查完错误后才能进行网站的发布。这是因为网站在发布到互联网后，如被访问者发现有错误，其影响是很不好的，会降低访问者对企业网站及企业的信任度。,12.1.6 网站的维护和推广,在确定网站的测试和发布方案后，最后还应确定网站的维护和推广方案。不论是个人网站还是企业的公司网站，或是运营性质的网站，都需要进行维护和定期更新。不仅如此，对于商务型的网站，还必须安排专门的推广人员进行网站的推广工作。网站的推广对网站的运营有重大的作用，例如，可以促进企业的网络营销等。常见
6、的网站推广方法如下。 1搜索引擎推广 2电子邮件推广 3网站资源合作推广 4信息发布推广,12.1.6 网站的维护和推广,5网络广告推广,这种推广方式在品牌推广、产品推广和网站推广等方面都是很有效的。如图所示是icq页面的Banner广告。 6传统广告推广,icq首页上的广告,12.2 网站规划要素,一般来说，网站规划的要素主要是指网站设计中须考虑的各种元素，而不是上节所说的网站规划书上的所有内容。换句话说，网站规划要素其实就是网站设计的构思。在网站规划的过程中，要仔细考虑的网站规划要素主要有：网站的主题、网站的命名、网站的标志、网页的布局、网页的色彩搭配以及字体等。在网站设计过程中，这些网站
7、规划的要素要统一，只有做好相互协调和搭配，才能设计出美观实用的网页。,12.2.1 网站的主题,网站的主题就是指网站的题材。网站的题材包括很多，可以有新闻、财经、娱乐、女性、房产、旅游、游戏、军事、体育、交友、科技、音乐、育儿、家居、证券、基金和计算机技术等。而且，其中的每一个题材都可以进行进一步的细分。在网站浩如烟海的今天，新颖的网站主题层出不穷，要想在网站题材上吸引访问者，确实需要下一番功夫。一般来说，确立网站题材要遵循下面一些原则。 首先，就个人网站而言，要选择自己感兴趣或自己熟悉和了解的题材。对于企业网站来说，网站的题材不能脱离企业的商业目的，要根据网站的功能确定网站的主题。另外，网站
8、题材范围不能太广泛，必须做到“小而精”。“小而精”指网站的专业性程度。,12.2.2 网站的命名,网站的命名要根据网站的主题进行概括和浓缩。一般来说，能体现出网站主题的命名才是一个好的网站命名。网站的命名要遵循以下原则。 首先，网站的命名要适合宣传和推广。另外，个性化命名也是网站中很重要的一点。有个性的网站命名不仅赋予了网站生命的感觉，也容易让人们记住。其次，要从合法性考虑网站的命名，要做到合理和合法，千万不要以为哗众取宠能达到宣传效果，而取一些不健康的网站名称。,12.2.3 网站的标志,网站的标志也称为网站的Logo。网站标志的设计能反映网站的主题和命名，必须遵循标志设计的一般原则，例如，
9、公用性、显著性和艺术性等。在设计时，巧妙地利用网站的名字或域名，将其艺术化和显著化，使用字体变形等效果，可以很容易地制作出美观简练的网站标志。,12.2.4 网页的布局,网页的布局最能够体现网站设计者的构思，良好的网页布局能使访问者身心愉悦，而布局不佳的页面则可能使访问者丧失继续浏览的兴趣而匆匆离去。所以，网页布局也是网站设计中的关键要素。下一节专门介绍网页布局的相关知识。,12.2.5 网页的色彩搭配,色彩能够帮助网站树立形象。不同的色彩搭配能很大程度上形成不同的页面风格，给访问者不同的感觉。例如，对于欣赏性的艺术网站来说，良好的色彩搭配能给访问者舒服和亲切的感觉。对于政府网站，色彩的搭配要
10、显示出政府的庄重、威严以及平易近人等。如图所示是一个色彩搭配和谐的韩国时尚网站。,12.2.5 网页的色彩搭配,如图所示是以粉色作为页面色彩搭配主色系的韩国化妆品网站。人们常用粉色指代女性的色彩，例如，粉红知己和红粉佳人等，皆是用于形容女性的经典用词。因此，将粉色系的搭配用于以女性化妆品为主题的网站十分吻合，具有适用性和联想性。,12.2.5 网页的色彩搭配,如图所示是采用蓝、黑和灰色搭配系的DELL公司页面。戴尔网站上蓝、黑和灰色的搭配能给人以简洁明了、专业以及可信任的感觉。网页初学者应该学会多观察，多查看一些优秀网页作品的配色，以慢慢培养自己运用色彩的感觉和思想。,12.2.6 网页的字体
11、,在网页设计中，字体也是一种考究。字体要结合网站的主题，体现网页特有的风格。现代网页设计中一般以磅为网页字体的单位。现代网页设计中大多采用9磅作为标准字号，而在显示网页正文的地方采用12磅的字体大小。要注意字号给浏览者的感觉。另外，在页面的不同地方要注意使用不同的字体或字号。例如，页脚的文字可以使用较小的字号等。,12.3 页面综合布局,所谓网页的布局，通俗地说，就是对网页上的网站Logo、导航栏、菜单和网站内容等元素的位置进行排版。不同的网页，各种网页元素所处的地位不同，出现在网页上的位置也就不同。一般来说，重要的元素应放在突出的位置，次要的元素放在不太突出的位置。 对网页元素的布局排版，决
12、定了网页页面的美观与否和实用性。例如，好的网页布局能使访问者产生心情愉悦之感。因此，网页布局是网页设计过程中的关键，网页布局能在一定程度上决定网页设计的成败与否。每一个网页设计者都必须掌握好页面布局的技巧。,12.3.1 网页布局的相关概念,在学习网页布局前，首先应了解和熟悉与网页布局相关的概念。在了解与网页布局相关的概念后网页设计的初学者才能更好地熟悉并掌握与网页布局相关的各种技巧。 1页面的尺寸 2网页布局结构,12.3.1 网页布局的相关概念,3页眉 页眉是指处于网页的最上部分，一般用于放置网页的标志、导航栏及Banner广告等信息，又称做页头。,12.3.1 网页布局的相关概念,4页脚
13、 页脚是处于网页最下面的组成部分，与页头首尾相呼应。主要作用是放置站点的公司简介、版权信息和联系信息等 。,12.3.2 常见的网页布局结构,网页设计初学者了解和熟悉常见的网页布局结构后，易于在网页设计的过程中产生设计布局的灵感，能够得心应手地设计出网页布局。在网页布局的设计中，一定要注意页面的美观性、平衡感、对比度、以及疏度和密度的把握。一般来说，常见的网页布局有以下几种结构。,12.3.2 常见的网页布局结构,1“国字”型布局 “国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内
14、容，最下部分一般放置网站的版权信息和联系方式等。,12.3.2 常见的网页布局结构,2T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。,12.3.2 常见的网页布局结构,3标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。,12.3.2 常见的网页布局结构,4左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容,12.3.2 常见的网页布
15、局结构,5上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。,12.3.2 常见的网页布局结构,6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术,12.3.2 常见的网页布局结构,7POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。,12.3.2 常见的网页布局结构,8FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。,12.3.3 网页布局的技术,现今网站设计的网页布局技术可
16、分为三种，分别是表格布局技术、框架布局技术和DIVCSS布局技术。其中，最为广泛应用的是表格布局技术。而框架布局由于其兼容性的问题未得到解决而限制了使用。另外，DIVCSS是新兴的网页布局技术，在最近的两三年非常流行。下面分别具体介绍这三种网页布局的技术。,12.3.3 网页布局的技术,1表格布局 表格网页布局是比较传统的网页布局技术，也是迄今为止使用最为广泛的网页布局技术。如图所示是表格布局页面在浏览器上的效果，,12.3.3 网页布局的技术,1表格布局 如图所示是用Dreamweaver CS3打开保存后的表格布局的页面效果。,12.3.3 网页布局的技术,2框架（Frames）布局 框架
17、布局是比较传统的网页布局技术。 框架布局的优势在于能将一个框架网页划分成若干个部分，每个部分都可以是一个独立的页面，而用浏览器观看的框架网页则是一个完整的包含几个部分的页面。使用框架型网页能达到很好的页面切换效果。,12.3.3 网页布局的技术,3DIV+CSS布局 DIV+CSS是比较新的网页布局技术，目前正逐渐成为流行的网页布局方式。CSSDIV布局主要利用层和CSS样式表对网页元素进行布局和定位。,12.4 专家总结,本章主要介绍了如何进行网站规划、网站规划的要素和页面的各种基本布局方式三方面关于网站整体规划的知识。网站布局主要有“国”字型布局、T型布局、POP布局、Flash布局、标题正文型布局、上下框架型布局和左右框架型布局等。注意学习各种布局结构，体会布局的思想是本章学习的重点。,
