互联网网站设计流程.pptx

第4章 网站设计流程教学提示：教学提示：教学提示：教学提示：前几章已经学习了网站的安装与配置、制作网页的基前几章已经学习了网站的安装与配置、制作网页的基础础HTMLHTML语言，本章将介绍网站的整体设计流程。语言，本章将介绍网站的整体设计流程。教学要求：教学要求：教学要求：教学要求：了解网站的设计流程，能够自己独立确定一个网站的了解网站的设计流程，能够自己独立确定一个网站的主题及风格。掌握网站界面设计及版面布局的方法。主题及风格。掌握网站界面设计及版面布局的方法。讲解提纲讲解提纲n n4.1 4.1 网站设计流程网站设计流程n n4.2 4.2 确定网站的类型确定网站的类型n n4.3 web4.3 web站点的主题与风格站点的主题与风格n n4.4 4.4 网站内容的确定网站内容的确定n n4.5 4.5 网站界面设计网站界面设计n n4.6 4.6 实训：网上商城的规划设计实训：网上商城的规划设计n n4.7 4.7 习习 题题4.1 网站设计流程 网站是企业向用户和网民提供信息网站是企业向用户和网民提供信息(包括产品包括产品和服务和服务)的一种方式的一种方式,是企业开展电子商务的基础设是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被网站）去谈电子商务是不可能的。企业的网址被称为称为“网络商标网络商标”，也是企业无形资产的组成部，也是企业无形资产的组成部分，而网站是分，而网站是InternetInternet上宣传和反映企业形象和文上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要，下化的重要窗口。企业网站设计显得极为重要，下面是一些网站设计的大致流程。面是一些网站设计的大致流程。(具体内容第一章具体内容第一章有详细介绍有详细介绍)。大致流程n n(1)(1)明确建立网站的目标和用户需求。明确建立网站的目标和用户需求。n n(2)(2)总体设计方案主题鲜明。总体设计方案主题鲜明。n n(3)(3)网站的版式设计。网站的版式设计。n n(4)(4)网站测试和改进。网站测试和改进。n n(5)(5)内容更新与沟通。内容更新与沟通。4.2 确定网站的类型 随着随着InternetInternet的飞速发展，网络已经或正在成为人们的飞速发展，网络已经或正在成为人们学习、工作和生活中不可缺少的一部分，更重要的是学习、工作和生活中不可缺少的一部分，更重要的是InternetInternet潜在的商机已经日益显现。因此，不论个人还是潜在的商机已经日益显现。因此，不论个人还是团体，都希望在网络中找到适合自己的位置。于是，各团体，都希望在网络中找到适合自己的位置。于是，各种各样的网站如雨后春笋般地建立起来，综观种各样的网站如雨后春笋般地建立起来，综观InternetInternet上上数以百万计的网站，按照其功能和结构形式大体上可以数以百万计的网站，按照其功能和结构形式大体上可以分为以下几类。分为以下几类。分类n n(1)(1)门户网站。门户网站。n n(2)(2)普及型网站。普及型网站。n n(3)(3)电子商务类网站。电子商务类网站。n n(4)(4)媒体信息服务类网站。媒体信息服务类网站。n n(5)(5)办公事务管理网站办公事务管理网站 。n n(6)(6)商务管理网站。商务管理网站。4.3 web站点的主题与风格站点的主题与风格 4.3.1 4.3.1 确定网站的主题确定网站的主题 4.3.2 4.3.2 确定站点的整体风格确定站点的整体风格4.3.1 确定网站的主题确定网站的主题 所谓网站的主题也就是网站的题材。现在网上比所谓网站的主题也就是网站的题材。现在网上比较知名的较知名的1010类题材有：网上求职、网上聊天类题材有：网上求职、网上聊天/ICQ/ICQ、网、网上社区上社区/讨论讨论/邮件列表、计算机技术、网页邮件列表、计算机技术、网页/网站开发、网站开发、娱乐网站、旅行、参考娱乐网站、旅行、参考/资讯、家庭资讯、家庭/教育、生活教育、生活/时尚。时尚。在选择网站题材的时候要注意以下几点在选择网站题材的时候要注意以下几点 1.主题要小，内容要精主题要小，内容要精 网站的定位要小。如果要想制作一个包罗万网站的定位要小。如果要想制作一个包罗万象的网站，把所有认为精彩的东西都放在上面，象的网站，把所有认为精彩的东西都放在上面，会让人感觉没有主题和特色，样样都有却样样都会让人感觉没有主题和特色，样样都有却样样都很肤浅，而且会没有足够的能力去维护和及时更很肤浅，而且会没有足够的能力去维护和及时更新。新。网站的内容还得要新颖，创新的内容就是网站网站的内容还得要新颖，创新的内容就是网站的灵魂，没有新颖的内容，网站就失去了生命力。的灵魂，没有新颖的内容，网站就失去了生命力。2.2.网站的题材最好是自己擅长或者喜网站的题材最好是自己擅长或者喜爱的内容爱的内容一个企业要建立网站，要密切结合自己的业务范围来一个企业要建立网站，要密切结合自己的业务范围来选择内容，而不要脱离业务主题去搞什么国内国际新选择内容，而不要脱离业务主题去搞什么国内国际新闻、娱乐动态等与本身业务不相关的东西，或者为了闻、娱乐动态等与本身业务不相关的东西，或者为了增加访问量而去办一些本身并不熟悉且技术难度又比增加访问量而去办一些本身并不熟悉且技术难度又比较大的栏目，比如网上聊天之类。较大的栏目，比如网上聊天之类。3.题材不要太滥，目标不要过高题材不要太滥，目标不要过高 “太滥太滥”是指到处可见，人人都有的题材，比如免费是指到处可见，人人都有的题材，比如免费信息，软件下载等；信息，软件下载等；“目标过高目标过高”是指在这一题材上已是指在这一题材上已经有非常优秀、知名度很高的网站，要超过的话是很难经有非常优秀、知名度很高的网站，要超过的话是很难的。的。4.3.2 4.3.2 确定站点的整体风格确定站点的整体风格 网站的风格设计是最抽象、也是最头疼的一个问题。网站的风格设计是最抽象、也是最头疼的一个问题。许多网站的建设者都是从事计算机和网络技术的，他们许多网站的建设者都是从事计算机和网络技术的，他们非常熟悉网页制作技术，但是却少有想法创作一个既美非常熟悉网页制作技术，但是却少有想法创作一个既美观又有独特风格的主页。另一方面，专业的美工师通常观又有独特风格的主页。另一方面，专业的美工师通常都是传统的美工技术，对网页制作技术和网络知识知之都是传统的美工技术，对网页制作技术和网络知识知之甚少，所以不知道如何设计最适合网络传输的图片。所甚少，所以不知道如何设计最适合网络传输的图片。所以，网站的风格设计并不简单，它是一项综合的技术。以，网站的风格设计并不简单，它是一项综合的技术。风格设计包含的内容很多，下面就色彩搭配和风格设计包含的内容很多，下面就色彩搭配和版面布局设计两个最为重要的方面来介绍一下网站版面布局设计两个最为重要的方面来介绍一下网站的风格设计。的风格设计。1)1)色彩的基础知识色彩的基础知识 网站的色彩是最影响整体风格的因素，也是网站美工网站的色彩是最影响整体风格的因素，也是网站美工设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基本知识，所以在制作网页之前往往有一个很好的想法，的基本知识，所以在制作网页之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想的效果。因此，但是却不知如何搭配网页的颜色来表达预想的效果。因此，在介绍色彩搭配之前，先来看看色彩的基本知识。在介绍色彩搭配之前，先来看看色彩的基本知识。网页中的颜色通常采用网页中的颜色通常采用6 6位十六进制的数值来表位十六进制的数值来表示，每两位代表一种颜色，从左到右依次表示红色、示，每两位代表一种颜色，从左到右依次表示红色、绿色和蓝色。颜色值越高表示这种颜色越深，比如红绿色和蓝色。颜色值越高表示这种颜色越深，比如红色，其数值为色，其数值为“#FF0000”#FF0000”，白色为，白色为“#FFFFFF”#FFFFFF”，黑，黑色为色为“000000”000000”。也可以采用。也可以采用3 3个以个以“，”相隔的相隔的十进制数来表示某一颜色，比如红色，其十进制表示十进制数来表示某一颜色，比如红色，其十进制表示为为Color(255,0,0)Color(255,0,0)。太阳光是彩色的，按颜色的色调通常将其划分为太阳光是彩色的，按颜色的色调通常将其划分为7 7种颜色：红、橙、黄、绿、蓝、青、紫。如果将这种颜色：红、橙、黄、绿、蓝、青、紫。如果将这7 7种颜色按这个顺序渐变为一条色带的话，越靠近红色，种颜色按这个顺序渐变为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调，青、越寒冷。所以红、橙、黄的组合又称为暖色调，青、蓝、紫的组合又称为冷色调。蓝、紫的组合又称为冷色调。除了冷暖的差别外，不同的单个颜色也会给人除了冷暖的差别外，不同的单个颜色也会给人除了冷暖的差别外，不同的单个颜色也会给人除了冷暖的差别外，不同的单个颜色也会给人带来不同的感觉，如下所述。带来不同的感觉，如下所述。带来不同的感觉，如下所述。带来不同的感觉，如下所述。n n红色红色=是一种激奋的色彩。刺激效果，能使人产生冲动、愤是一种激奋的色彩。刺激效果，能使人产生冲动、愤怒、热情、活力的感觉。怒、热情、活力的感觉。n n绿色绿色=介于冷暖两种色彩的中间，显得和睦、宁静、健康、介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全的感觉，它和金黄、淡白搭配、可以产生优雅舒适的安全的感觉，它和金黄、淡白搭配、可以产生优雅舒适的气氛。气氛。n n橙色橙色=也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。时尚的效果。n n黄色黄色=具有快乐、希望、智慧和轻快的个性，它的明度最高。具有快乐、希望、智慧和轻快的个性，它的明度最高。n n蓝色蓝色=是最具凉爽、清新、专业的色彩。它和白色混合能体是最具凉爽、清新、专业的色彩。它和白色混合能体现柔顺、淡雅、浪漫的气氛现柔顺、淡雅、浪漫的气氛(像天空的色彩像天空的色彩)。n n白色白色=具有洁白、明快、纯真、清洁的感受。具有洁白、明快、纯真、清洁的感受。n n黑色黑色=具有深沉、神秘、寂静、悲哀、压抑的感受。具有深沉、神秘、寂静、悲哀、压抑的感受。n n灰色灰色=具有中庸、平凡、温和、谦让、中立和高雅的感觉。具有中庸、平凡、温和、谦让、中立和高雅的感觉。(2)网站的色彩搭配网站的色彩搭配n n(1)(1)网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理n n色彩色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。的鲜明性：网页的色彩要鲜艳，容易引人注目。n n色彩的独特性：要有与众不同的色彩，使得大家对你的印色彩的独特性：要有与众不同的色彩，使得大家对你的印象强烈。象强烈。n n色彩的合适性：就是说色彩和表达的内容、气氛相适合，色彩的合适性：就是说色彩和表达的内容、气氛相适合，如用粉色体现女性类网站的柔性。如用粉色体现女性类网站的柔性。n n色彩的联想性：不同色彩会产生不同的联想，蓝色想到天色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和网站空，黑色想到黑夜，红色想到喜事等，选择色彩要和网站的内涵相关联。的内涵相关联。(2)(2)网页色彩掌握的过程网页色彩掌握的过程 随着随着人们对网页制作经验的积累，用色有这样的一人们对网页制作经验的积累，用色有这样的一个趋势：单色个趋势：单色五彩缤纷五彩缤纷标准色标准色单色。一开始因为单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础后，就将自己收集的最好的图片，最满意在有一定基础后，就将自己收集的最好的图片，最满意的色彩堆砌在页面上，但是时间一长，却发现色彩杂乱，的色彩堆砌在页面上，但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站时，选择没有个性和风格；第三次重新定位自己的网站时，选择切合自己的色彩，推出的网站往往比较成功；最后当设切合自己的色彩，推出的网站往往比较成功；最后当设计理念和技术达到顶峰时，则又返璞归真，用单一色彩计理念和技术达到顶峰时，则又返璞归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。甚至非彩色就可以设计出简洁精美的站点。(3)网页色彩搭配的技巧网页色彩搭配的技巧 n n用一种色彩。这里是指先选定一种色彩，然后调整透明度用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度或者饱和度(说得通俗些就是将色彩变淡或者加深说得通俗些就是将色彩变淡或者加深)，产生，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。次感。n n用两种色彩。先选定一种色彩，然后选择它的对比色用两种色彩。先选定一种色彩，然后选择它的对比色(在在PhotoshopPhotoshop里按里按Ctrl+Shift+ICtrl+Shift+I键键)。这样整个页面色彩丰富但。这样整个页面色彩丰富但不花哨。不花哨。n n用一个色系。简单地说就是用一个感觉的色彩，例如淡蓝、用一个色系。简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。淡黄、淡绿，或者土黄、土灰、土蓝。n n用黑色和一种彩色。比如大红的字体配黑色的边框感觉很用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳跳”。在网页配色中，忌讳的是：不要将所有颜色都用到，尽在网页配色中，忌讳的是：不要将所有颜色都用到，尽在网页配色中，忌讳的是：不要将所有颜色都用到，尽在网页配色中，忌讳的是：不要将所有颜色都用到，尽量控制在量控制在量控制在量控制在3 3种色彩以内。种色彩以内。种色彩以内。种色彩以内。背景和前文的对比尽量要大背景和前文的对比尽量要大背景和前文的对比尽量要大背景和前文的对比尽量要大(绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案作背景作背景作背景作背景)，以便突出主要文字内容，如图，以便突出主要文字内容，如图，以便突出主要文字内容，如图，以便突出主要文字内容，如图4.14.1所示。所示。所示。所示。图4.1 背景和前文对比示例总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。(1)1)将网站标志放在最突出的位置将网站标志放在最突出的位置(2)(2)突出标准色彩突出标准色彩(3)(3)使用标准字体使用标准字体(4)(4)使用统一的图片处理效果使用统一的图片处理效果4.4 网站内容的确定网站内容的确定 4.4.1 4.4.1 网页内容设计原则网页内容设计原则 4.4.2 4.4.2 一般网站就包含的几项内容一般网站就包含的几项内容4.4.1 网页内容设计原则网页内容设计原则 网站要方便使用，并遵循一些设计惯例，因为用户网站要方便使用，并遵循一些设计惯例，因为用户在访问一个个网站时，难以记住任何特殊的交互诀窍，在访问一个个网站时，难以记住任何特殊的交互诀窍，于是会把更多的时间花在更方便使用的网站上。页面特于是会把更多的时间花在更方便使用的网站上。页面特别是主页经常是第一个别是主页经常是第一个(也有可能是最后一个也有可能是最后一个)吸引并留吸引并留住客户的机会，所以设计网站的页面，遵循一些原则显住客户的机会，所以设计网站的页面，遵循一些原则显得尤为重要。以下是在设计页面时需遵循的一些基本原得尤为重要。以下是在设计页面时需遵循的一些基本原则则。1.日期、时间和数字日期、时间和数字 用户需要了解他们看到的信息是当前的，但是并不需要用户需要了解他们看到的信息是当前的，但是并不需要用户需要了解他们看到的信息是当前的，但是并不需要用户需要了解他们看到的信息是当前的，但是并不需要查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以下问题。下问题。下问题。下问题。n n(1)(1)仅对时间敏感的信息显示日期和时间，不要对没有时间仅对时间敏感的信息显示日期和时间，不要对没有时间敏感的信息显示时间和日期；不必显示星期几。敏感的信息显示时间和日期；不必显示星期几。n n(2)(2)显示最后更新的时间，而不是计算机生成的时间。显示最后更新的时间，而不是计算机生成的时间。n n(3)(3)日期的书写。不要只用数字表示日期，比如日期的书写。不要只用数字表示日期，比如“01/02/0301/02/03”，它可能是，它可能是2 2月月1 1日，也可能是日，也可能是1 1月月2 2日，因为日，因为有些国家的习惯不同。有些国家的习惯不同。n n(4)(4)当显示一列数字时，要对齐小数点。当显示一列数字时，要对齐小数点。2.欢迎词欢迎词 很多网站都喜欢在主页上显示欢迎词。很多网站都喜欢在主页上显示欢迎词。在主页上显示友好的如在主页上显示友好的如“欢迎欢迎”、“welcomewelcome”等词汇，在网络发展的早期能等词汇，在网络发展的早期能在有限的网站上见到一个实在是值得庆贺的在有限的网站上见到一个实在是值得庆贺的事情，可是现在人们已经习以为常了。事情，可是现在人们已经习以为常了。3.弹出窗口和引导页面弹出窗口和引导页面 一般来说，当用户登录网站时最好能立即显示站点内容，一般来说，当用户登录网站时最好能立即显示站点内容，一般来说，当用户登录网站时最好能立即显示站点内容，一般来说，当用户登录网站时最好能立即显示站点内容，几乎没有必要使用引导页面，并且它使用户远离主站点的内几乎没有必要使用引导页面，并且它使用户远离主站点的内几乎没有必要使用引导页面，并且它使用户远离主站点的内几乎没有必要使用引导页面，并且它使用户远离主站点的内容。容。容。容。n n(1)(1)当用户输入主页网址时，或在别的页面上单击到站点的当用户输入主页网址时，或在别的页面上单击到站点的链接时，要将他们带到真正的主页上。链接时，要将他们带到真正的主页上。n n(2)(2)尽量避免弹出式窗口。大量的弹出式广告早已使用户深尽量避免弹出式窗口。大量的弹出式广告早已使用户深恶痛绝，现在用户已经形成了一个共识：弹出窗口通常是恶痛绝，现在用户已经形成了一个共识：弹出窗口通常是广告。即使您的弹出式窗口包含有用的信息也是这样，有广告。即使您的弹出式窗口包含有用的信息也是这样，有时用户等不及它打开就将它关掉了。时用户等不及它打开就将它关掉了。4.新闻和公告信息新闻和公告信息 为了更有效地在主页上发布新闻，需要用心编辑标为了更有效地在主页上发布新闻，需要用心编辑标题和新闻概要，这对发布网站所属公司的信息和其他新题和新闻概要，这对发布网站所属公司的信息和其他新闻同样适用。标题和内容要直接切入正体，而不是仅仅闻同样适用。标题和内容要直接切入正体，而不是仅仅在引诱用户单击后才能看到真正的信息。帮助用户使他在引诱用户单击后才能看到真正的信息。帮助用户使他们不用去单击那些他们不感兴趣的内容是很重要的，否们不用去单击那些他们不感兴趣的内容是很重要的，否则经过多次无则经过多次无 意义的单击之后用户最终会放弃您意义的单击之后用户最终会放弃您的网站的网站。(1)(1)标题应该简洁，应该用叙述语言，用尽量少的文字表达标题应该简洁，应该用叙述语言，用尽量少的文字表达尽量多的信息。尽量多的信息。(2)(2)精心编辑在主页上重点突出的新闻内容提要。精心编辑在主页上重点突出的新闻内容提要。不要只是照抄或改写文章的第一段，因为第一段往往不适不要只是照抄或改写文章的第一段，因为第一段往往不适合作为一个单独的部分。要给用户一个真正的内容合作为一个单独的部分。要给用户一个真正的内容而而不仅仅是对用户后面内容的描述。不仅仅是对用户后面内容的描述。(3)(3)不必要在新闻提要中列出日期和时间，除非它确实是一不必要在新闻提要中列出日期和时间，除非它确实是一条爆炸新闻并且经常更新。条爆炸新闻并且经常更新。5.网址网址 尽可能使主页的网址简单记忆是非常重要的。不仅尽可能使主页的网址简单记忆是非常重要的。不仅要让用户记住他们访问过的网址，而且使他们能快速猜要让用户记住他们访问过的网址，而且使他们能快速猜到公司的域名，这是人们必须经常做的。一旦用户锁定到公司的域名，这是人们必须经常做的。一旦用户锁定某个网站，简单的网址能让他们明白是否在正确的网站某个网站，简单的网址能让他们明白是否在正确的网站上，而复杂的网址就是用户不敢断定。上，而复杂的网址就是用户不敢断定。(1)(1)商业网站得主页应该具有商业网站得主页应该具有“www.www.公司名公司名.com”.com”或或“www.www.公公司名司名””这样的域名。这样的域名。不要在域名后面加复杂的代码甚至不要在域名后面加复杂的代码甚至“index.htm”index.htm”之类的之类的内容，几乎没有用户愿意输入一长串令人恐怖的网址。内容，几乎没有用户愿意输入一长串令人恐怖的网址。(2)(2)如果条件允许，要为站点注册不同的拼写、缩写或常见的如果条件允许，要为站点注册不同的拼写、缩写或常见的拼写错误域名。拼写错误域名。如果域名有不同的拼写方法，选择一个作为正式版本，如果域名有不同的拼写方法，选择一个作为正式版本，将用其他拼写的网址重新定向到此网址上。将用其他拼写的网址重新定向到此网址上。5.网址网址6.控件控件 诸如下拉菜单、选择列表和文字框等用户界面上的诸如下拉菜单、选择列表和文字框等用户界面上的小控件，总会引起用户的注意。但是不要经常使用它们，小控件，总会引起用户的注意。但是不要经常使用它们，只有在为完成任务必须使用时，再使用这些控件只有在为完成任务必须使用时，再使用这些控件。(1)(1)如果不让用户单击，决不要将控件作为屏幕的一部如果不让用户单击，决不要将控件作为屏幕的一部分。分。(2)(2)尽量少用下拉菜单，尤其是当其中的项目本身不能尽量少用下拉菜单，尤其是当其中的项目本身不能说明自身意思的情况下。说明自身意思的情况下。7.链接链接 链接不仅仅在主页上有，但由于主页是网站的门链接不仅仅在主页上有，但由于主页是网站的门户，应该比一般的页面有更多的链接，所以下面关于户，应该比一般的页面有更多的链接，所以下面关于主页链接的设计原则对吸引用户尤为重要。主页链接的设计原则对吸引用户尤为重要。(1)尽量使链接更容易阅读。尽量使链接更容易阅读。用带更多信息的文字作为链接的开头，因为用用带更多信息的文字作为链接的开头，因为用用带更多信息的文字作为链接的开头，因为用用带更多信息的文字作为链接的开头，因为用户经常只浏览链接的头一两个词以决定是否阅读，所户经常只浏览链接的头一两个词以决定是否阅读，所户经常只浏览链接的头一两个词以决定是否阅读，所户经常只浏览链接的头一两个词以决定是否阅读，所以要精心处理链接文字，使它们言简意赅，不要在每以要精心处理链接文字，使它们言简意赅，不要在每以要精心处理链接文字，使它们言简意赅，不要在每以要精心处理链接文字，使它们言简意赅，不要在每个链接开头都包含冗余信息个链接开头都包含冗余信息个链接开头都包含冗余信息个链接开头都包含冗余信息无区别的文字只能使无区别的文字只能使无区别的文字只能使无区别的文字只能使用户寻找关键词时更加困难。用户寻找关键词时更加困难。用户寻找关键词时更加困难。用户寻找关键词时更加困难。(2)注意链接名称。注意链接名称。不要用普通的指令作为链接名称，如不要用普通的指令作为链接名称，如“单单击击”、“Click”等，而要用有意义的名称，等，而要用有意义的名称，例如例如“单击下载单击下载”。(3)用不同的颜色来表示链接状态。用不同的颜色来表示链接状态。用容易区分的、不太饱和的颜色表示访问用容易区分的、不太饱和的颜色表示访问过的链接。虽然很多网站用灰色表示访问过过的链接。虽然很多网站用灰色表示访问过的链接，但是灰色一般不容易阅读，而且灰的链接，但是灰色一般不容易阅读，而且灰色通常是控件不可用的标志，所以不建议这色通常是控件不可用的标志，所以不建议这样做。样做。8.主页内容主页内容 写出令人深刻的内容是所有写出令人深刻的内容是所有WebWeb页面设计页面设计最重要的方法之一。绝大多数用户只会大致最重要的方法之一。绝大多数用户只会大致浏览一下标题内容，而不会仔细阅读，所以浏览一下标题内容，而不会仔细阅读，所以必须优化内容，用尽量少的词语表达尽量多必须优化内容，用尽量少的词语表达尽量多的信息，使之适合快速阅读。主页是必须用的信息，使之适合快速阅读。主页是必须用尽量少的空间表达尽量多的标题的地方。尽量少的空间表达尽量多的标题的地方。(1)(1)使用用户关注的词语。类别和科目的划分要使用用户关注的词语。类别和科目的划分要使用用户关注的词语。类别和科目的划分要使用用户关注的词语。类别和科目的划分要按照用户的按照用户的按照用户的按照用户的取向取向划分，而不要按照公司的划分。划分，而不要按照公司的划分。划分，而不要按照公司的划分。划分，而不要按照公司的划分。(2)(2)避免冗余内容。为了强调某些条目避免冗余内容。为了强调某些条目避免冗余内容。为了强调某些条目避免冗余内容。为了强调某些条目(例如类例如类例如类例如类别或链接别或链接别或链接别或链接)的重要性而不断在主页上重复它们，的重要性而不断在主页上重复它们，的重要性而不断在主页上重复它们，的重要性而不断在主页上重复它们，反而会减少受关注的程度。反而会减少受关注的程度。反而会减少受关注的程度。反而会减少受关注的程度。(3)(3)不要使用成语、行话，否则用户很难明白您在说什么。不要使用成语、行话，否则用户很难明白您在说什么。例如在一个旅行网站上，用例如在一个旅行网站上，用“梦想、计划、行动梦想、计划、行动”类别名，类别名，对一个市场营销的人员来说听起来相当不错，但它不如对一个市场营销的人员来说听起来相当不错，但它不如“假日计划假日计划”直截了当。当用户必须靠单击链接以后查看具直截了当。当用户必须靠单击链接以后查看具体内容才能明白链接文字的意思时，他们很快会失去耐心。体内容才能明白链接文字的意思时，他们很快会失去耐心。当然，不是说主页上的文字必须是干巴巴的白话，它必须当然，不是说主页上的文字必须是干巴巴的白话，它必须包含丰富的信息，而且不能模棱两可包含丰富的信息，而且不能模棱两可。(4)(4)尽量少用命令式语言。除非在法定或约定俗尽量少用命令式语言。除非在法定或约定俗尽量少用命令式语言。除非在法定或约定俗尽量少用命令式语言。除非在法定或约定俗成的工作时，或作适当强调时，才使用诸如成的工作时，或作适当强调时，才使用诸如成的工作时，或作适当强调时，才使用诸如成的工作时，或作适当强调时，才使用诸如“输入城市或邮政编码输入城市或邮政编码输入城市或邮政编码输入城市或邮政编码”等命令语言。等命令语言。等命令语言。等命令语言。(5)(5)为强调效果，要避免不恰当地使用空格和停为强调效果，要避免不恰当地使用空格和停为强调效果，要避免不恰当地使用空格和停为强调效果，要避免不恰当地使用空格和停顿。顿。顿。顿。4.4.2 一般网站就包含的几项内容一般网站就包含的几项内容 一个标准的网站应该包括以下一个标准的网站应该包括以下1010项内容项内容。1.1.站点结构图站点结构图(Site Map)(Site Map)站点结构图是一种有关站点结构、组织方式的示站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容列在其下的副标意图。站点的主要栏目或者关键内容列在其下的副标题中。当访问者单击标题、题目或副标题时，相关的题中。当访问者单击标题、题目或副标题时，相关的网页就会出现在屏幕当中。网页就会出现在屏幕当中。2.2.导航栏导航栏(Navigation Bar)(Navigation Bar)每个网站都应该包括一组导航工具，而且它出现在每个网站都应该包括一组导航工具，而且它出现在此网站的每一个页面中，通常这组导航工具被称为导此网站的每一个页面中，通常这组导航工具被称为导航栏。航栏。3.3.联系方式页面联系方式页面联系方式页面联系方式页面(Contact Page)(Contact Page)此页面中创建可发送此页面中创建可发送E-mailE-mail的链接，使的链接，使E-mailE-mail的地址可以的地址可以自动地出现在自动地出现在【收信人收信人】栏中，这样，访问者在录入相关内栏中，这样，访问者在录入相关内容后单击容后单击【发送发送】按钮即可完成发送邮件。按钮即可完成发送邮件。4.4.反馈表反馈表反馈表反馈表(Feedback Forms)(Feedback Forms)利用反馈表，用户可以随时提出信息需求，而不必记下利用反馈表，用户可以随时提出信息需求，而不必记下电话号码。反馈表还为那些没有电话号码。反馈表还为那些没有E-mailE-mail的用户提供了方便。的用户提供了方便。5.5.5.5.引人入胜的内容引人入胜的内容引人入胜的内容引人入胜的内容(Compelling Content)(Compelling Content)(Compelling Content)(Compelling Content)在每页中都要包含相关的、引人入胜的内容，特别是当在每页中都要包含相关的、引人入胜的内容，特别是当你要销售产品的时候，每一个页面都要用详细的内容和图片你要销售产品的时候，每一个页面都要用详细的内容和图片精心修饰一番。精心修饰一番。6.6.常见问题解答常见问题解答常见问题解答常见问题解答(FAOs)(FAOs)7.7.精美的图片精美的图片精美的图片精美的图片(Good Graphics)(Good Graphics)8.8.搜索工具搜索工具搜索工具搜索工具(Searching Mechanisms)(Searching Mechanisms)9.9.新闻页面新闻页面新闻页面新闻页面(News Page)(News Page)10.10.相关站点链接相关站点链接相关站点链接相关站点链接(Relevant Links)(Relevant Links)4.5 4.5 网站界面设计网站界面设计 4.5.1 4.5.1 栏目与板块编排栏目与板块编排栏目与板块编排栏目与板块编排 4.5.2 4.5.2 目录结构与链接结构目录结构与链接结构目录结构与链接结构目录结构与链接结构 4.5.3 4.5.3 版面布局版面布局版面布局版面布局4.5.1 栏目与板块编排栏目与板块编排 构建一个网站就好比写一篇论文，首先要构建一个网站就好比写一篇论文，首先要构建一个网站就好比写一篇论文，首先要构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。网站建列出提纲，才能主题明确、层次清晰。网站建列出提纲，才能主题明确、层次清晰。网站建列出提纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是确定题材后立设初学者，最容易犯的错误就是确定题材后立设初学者，最容易犯的错误就是确定题材后立设初学者，最容易犯的错误就是确定题材后立刻开始制作，没有进行合理规划。刻开始制作，没有进行合理规划。刻开始制作，没有进行合理规划。刻开始制作，没有进行合理规划。网站题材确定后，将收集到的资料进行合理的网站题材确定后，将收集到的资料进行合理的网站题材确定后，将收集到的资料进行合理的网站题材确定后，将收集到的资料进行合理的编排。例如，将一些最吸引人的内容放在最突出的编排。例如，将一些最吸引人的内容放在最突出的编排。例如，将一些最吸引人的内容放在最突出的编排。例如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是位置或者在版面分布上占优势地位。栏目的实质是位置或者在版面分布上占优势地位。栏目的实质是位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确一个网站的大纲索引，索引应该将网站的主体明确一个网站的大纲索引，索引应该将网站的主体明确一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理显示出来。在制定栏目的时候，要仔细考虑，合理显示出来。在制定栏目的时候，要仔细考虑，合理显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意以下几点。安排。在栏目编排时需要注意以下几点。安排。在栏目编排时需要注意以下几点。安排。在栏目编排时需要注意以下几点。n n(1)(1)尽可能删除与主题无关的栏目。尽可能删除与主题无关的栏目。n n(2)(2)尽可能将网站内最有价值的内容列在栏目上。尽可能将网站内最有价值的内容列在栏目上。n n(3)(3)尽可能从访问者角度来编排栏目，以方便访问者的浏览尽可能从访问者角度来编排栏目，以方便访问者的浏览和查询。和查询。n n(4)(4)辅助内容，如站点简介、版权信息、个人信息等不必放辅助内容，如站点简介、版权信息、个人信息等不必放在主栏目里，以免冲淡主题。在主栏目里，以免冲淡主题。4.5 网站界面设计网站界面设计4.5.1 栏目与板块编排栏目与板块编排 构建一个网站就好比写一篇论文，构建一个网站就好比写一篇论文，构建一个网站就好比写一篇论文，构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次首先要列出提纲，才能主题明确、层次首先要列出提纲，才能主题明确、层次首先要列出提纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错清晰。网站建设初学者，最容易犯的错清晰。网站建设初学者，最容易犯的错清晰。网站建设初学者，最容易犯的错误就是确定题材后立刻开始制作，没有误就是确定题材后立刻开始制作，没有误就是确定题材后立刻开始制作，没有误就是确定题材后立刻开始制作，没有进行合理规划。进行合理规划。进行合理规划。进行合理规划。网站题材确定后，将收集到的资料进行合理的编排。例如，将一些网站题材确定后，将收集到的资料进行合理的编排。例如，将一些网站题材确定后，将收集到的资料进行合理的编排。例如，将一些网站题材确定后，将收集到的资料进行合理的编排。例如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意以在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意以在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意以在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意以下几点。下几点。下几点。下几点。n n(1)(1)尽可能删除与主题无关的栏目。尽可能删除与主题无关的栏目。尽可能删除与主题无关的栏目。尽可能删除与主题无关的栏目。n n(2)(2)尽可能将网站内最有价值的内容列在栏目上。尽可能将网站内最有价值的内容列在栏目上。尽可能将网站内最有价值的内容列在栏目上。尽可能将网站内最有价值的内容列在栏目上。n n(3)(3)尽可能从访问者角度来编排栏目，以方便访问尽可能从访问者角度来编排栏目，以方便访问尽可能从访问者角度来编排栏目，以方便访问尽可能从访问者角度来编排栏目，以方便访问者的浏览和查询。者的浏览和查询。者的浏览和查询。者的浏览和查询。n n(4)(4)