任务描述

网站前台是面向网站访问用户的，通俗地说，也就是给访问网站的人看的内容和页面，网站前台访问可以浏览公开发布的内容。网站前台能够给客户留下直观的印象，其好坏直接决定着网站给客户留下的印象。本任务的主要任务就是从网站主题与风格、网站栏目和版块、目录结构和链接结构、版面布局等方面对网站前台设计进行介绍。

1.网站主题与风格

（1）网站主题

设计一个站点，首先遇到的问题就是如何定位网站主题。网站主题就是设计的网站题材。网站可以是任意主题，没有限制。目前，比较流行的网站题材主要包括以下10类：网上求职、网上聊天/即时信息/ICQ、网上社区/讨论/邮件列表、计算机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育和生活/时尚。每个大类都可以继续细分，如娱乐类可再分为体育、电影、音乐，音乐又可以按格式分为MP3、VQF、Ra；按表现形式分为古典、现代、摇滚等。以上都是最常见的题材，除了以上通用题材外，还有很多专业的题材，如寻医问药、房产、天气预报等。同时，各个题材交叉结合可以产生新的题材，如房产论坛（房产+讨论）、经典足球播放（足球+影视）等。按这种方式分类，题材数量可成千上万。

选择合适的主题，是一个网站成功的关键。主题的选择应该从以下几方面入手。

1）主题定位要小，内容要精。网站内容越多，给人的感觉越是没有主题，没有特色。什么内容都有，也没有那么多的精力去维护，导致各个主题内容都很肤浅。网络的最大特点就是新和快，目前最热门的主页都是天天更新甚至几小时更新一次。

2）题材要根据网站设计者的兴趣和爱好来确定。大多数网站设计者建站都有自己的目的。例如，一个擅长编程的网站设计者，可能会建一个编程爱好者网站；一个医生可能会建一个有关寻医问药的网站；一个服装批发商可能会建一个销售服装的网店等。这样在制作网站时才有内容可填，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有兴趣，很难设计制作出杰出的作品。

3）题材定位不要“太高”或者“太广”。“太广”是指到处可见，人人都有的题材，如软件下载、免费信息等。这样的主题没有新意，很难吸引人。“定位太高”是指在这类题材上已经有非常优秀、知名度很高的站点，要超过它很困难。所以给自己定位一个功能十分强大、但又不可能实现的网站，只会浪费自己的时间和精力。hao 123是目前家喻户晓的网址导航之家，建于1999年5月。当时创建该网站的目的就是方便用户上网，把常用网站的地址放在一个页面里面，如图3-1所示。虽然实现技术并不复杂，但这个创意在当时还是比较新的，所以其发展也比较迅速。

图3-1　hao123网址之家首页

4）网站名称要有特色。一个有特色名称的网站，能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力。这样的网站很容易被人记住而不容易忘记。例如，北京灵图公司的“我要地图”网站，如图3-2所示。该网站的名称是“我要地图”，域名是“www.51ditu.com”，无论网站名称还是域名，都能反映本网站的内涵，很容易被客户记住。

（2）网站风格和网站创意

网站的风格和创意没有固定的模式可以参照和模仿。同一个主题，网站的风格和创意可能差别很大，网站的整体风格及其创意设计是网站设计者们最希望掌握，也是最难掌握的。

网站风格具有以下几个特点。

1）网站风格具有抽象性。抽象性是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。例如，人们觉得网易是平易近人的，迪士尼是生动活泼的（图3-3），IBM是专业严肃的（图3-4）。这些都是网站给人们留下的不同感受。

图3-2　我要地图网站首页

图3-3　迪士尼网站首页

图3-4　IBM中国网站首页

2）网站风格具有独特性。独特性是自己站点不同于其他网站的地方。色彩或者技术，或者交互方式，能让浏览者明确分辨出这是不同于其他网站的。

3）网站风格人性化。通过网站的外观、内容和文字可以概括出一个站点的个性和情绪；或温文儒雅，或热情活泼。

有风格的网站与普通网站的区别在于，普通网站可以看到的只是堆砌在一起的信息，只能用理性的感受来描述，如信息量大小、浏览速度快慢。但浏览过有风格的网站后就能有更深一层的感性认识，如站点有品位等。风格归根结底就是一句话：与众不同！

树立网站风格可以从以下几个方面考虑。

1）确定风格首先要建立有价值的内容。一个网站在有好的风格基础上，还要保证内容的质量和价值。

2）需要彻底搞清楚自己希望站点给人留下怎样的印象。

3）在明确自己的网站印象后，努力建立和加强这种印象。经过第二步印象的“量化”，需要进一步找出其中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。例如，再次审查网站名称、域名、栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等。

树立网站风格的一些参考方法

一、将网站的标志（Logo），尽可能地出现在每个页面上（如页眉、页脚或背景）。

二、突出网站的标准色彩。文字的链接色彩、图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。

三、突出网站的标准字体。在关键的标题、菜单、图片里使用统一的标准字体。

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

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

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

七、用自己设计的花边、线条和点。

风格的形成不是一次定位的，可以在实践中不断强化、调整和修饰。

创意（idea）是网站生存的关键，是传达信息的一种特别的方式。创意思考的过程分5个阶段。

1）准备期——研究所收集的资料，根据旧经验，启发新创意。

2）孵化期——将资料咀嚼消化，使意识自由发展，任意结合。

3）启示期——意识发展并结合，产生创意。

4）验证期——将产生的创意讨论修正。

5）形成期——设计制作网页，将创意具体化。

创意是将现有的要素重新组合。例如，网络与电话结合产生IP电话。从这一点出发，任何人都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。网络上最多的创意来自于现实生活的结合（或者虚拟现实），如在线书店、电子社区、在线拍卖。创意思考的途径最常用的是联想，下面提供了一些网站创意的联想线索：把网站颠倒、把网站缩小、把颜色更换、使网站更长、增加闪动效果、把网站内容放进音乐里、网站结合文字音乐图画、重复网站背景等。

提示

创意的目的是更好地宣传推广网站。假如创意很好，但对网站发展毫无意义，这样的创意也是不可取的。

2.网站栏目和版块

在组织网站栏目和内容时，要将最好的、最吸引人的内容放在最突出的位置，使好的东西在版面分布上占绝对优势。

网站栏目的实质是一个网站的大纲索引。索引应该将整个站点的主体明确显示出来。在制订栏目时，要仔细考虑、合理安排。一般的网站栏目安排要注意以下几个问题。

（1）网站栏目要紧扣主题

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

（2）至少设一个可经常更新的栏目

如果网站首页没有安排版面放置最近更新的信息，就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客，让他们经常能看到新的信息。

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

不需要很多，但一定要有，如论坛、留言本、邮件列表等，可以让浏览者留下他们的信息。(www.daowen.com)

（4）设一个下载或常见问题回答栏目

网络的特点是信息共享。人们在下载资料时，都希望一次性下载，而不是一页一页浏览存盘。所以在网站主页做一个下载栏目，是非常有必要的。另外，设立一个常见问题回答栏目，及时了解并帮助浏览者解决他们所遇到的问题，这样浏览者就会经常浏览网站。

至于其他的辅助内容，如关于本站、版权信息等可以不放在主栏目里，以免冲淡主题。总结以上几点，划分栏目需要注意以下几个方面。

1）尽可能删除与主题无关的栏目。

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

3）尽可能方便访问者的浏览和查询。

版块比栏目的概念要大一些，每个版块都有自己的栏目。例如，网易的站点分新闻、体育、财经、娱乐、教育等版块，每个版块下面都有各自的主栏目。一般的个人站点内容较少，只有主栏目（主菜单）就足够了，不需要设置版块。如果觉得的确有必要设置版块的，各版块要有相对独立性，版块的内容要围绕站点主题展开。

1）紧扣主题。通常的做法是将汽车及汽车配件这个主题按一定的方法分类，并将分类作为主栏目。主栏目个数在总栏目中要占绝大多数，这样的汽车网站使人感觉专业，主题突出，能给人留下深刻印象。

2）设置一个“新车上市”和“特别推荐”栏目。这样可以展示更新的会员信息，让网站更加人性化。

3）设置一个注册会员的功能。会员可以发布信息，用户通过注册会员可以与管理员或者访客联系。注册会员都有自己的空间，通过空间可以上传一些资源与大家共享。

3.目录结构和链接结构

（1）目录结构

目前很少有网站只由单页面组成，当涉及多个或是成千上万个页面时，往往就需要有清晰的网站结构，来确保搜索引擎和用户的访问，网站的目录结构就起到这样的作用。

1）网站目录结构。网站的目录是指建立网站时所创建的目录，目录结构则主要是指物理结构和逻辑结构。

具体来说，网站物理结构指网站目录及所包含文件所存储的真实位置所表现出来的结构。对于小型网站来说，所有网页都存在网站根目录下的扁平式结构。这种单一的目录扁平结构对搜索引擎而言是最为理想的，因为只要一次访问即可遍历。但是如果太多文件都放在根目录下，那么维护起来就显得相当麻烦。而对规模较大的网站，往往需要2～3层甚至更多层级子目录才能保证文件内容页的正常存储，这种多层级目录也称为树型结构，即根目录下再细分成多个频道或目录，然后在每一个目录下面再存储属于这个目录下的终极内容网页。这样的好处是维护容易，但是搜索引擎的抓取将会显得困难些。

与网站的物理结构不同，网站的逻辑结构也称为链接结构，主要指由网页内部链接所形成的逻辑结构。这样的结构可以实现文件虽然存在不同的物理结构目录之下，但是访问链接的目录层级只需要一层即可转向访问。例如，华夏名网顶部的目录导航，如图3-5所示。

图3-5　华夏名网的目录导航

2）网站目录建立原则。网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数网站设计者都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有太大的影响，但是对于站点本身的维护及以后内容的扩充和移植都有着重要的影响。所以，建立目录结构时要仔细安排。

不要将所有文件都存放在根目录下。有的网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成文件管理的混乱，搞不清哪些文件需要编辑和更新，哪些文件可以删除，哪些是相关联的文件，从而影响工作效率。服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。文件量越大，等待的时间也就越长。

子目录首先按主栏目建立。友情链接内容较多、需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，如网站简介、站长情况等可以合并放在统一目录下。

在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认的Images目录。将所有图片都存放在这个目录下很不方便。例如，在删除栏目时，图片的管理相当麻烦。所以有必要为每个主栏目建立独立的Images目录，方便维护与管理。

目录的层次不要太多，最好不要超过3层。不要使用中文目录，使用中文目录可能对网址的正确显示造成困难。不要使用过长的目录，太长的目录名不便于记忆。尽量使用意义明确的目录，以便于记忆和管理，如可以用Flash、Dhtml、Javascript来建立目录。

随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍。网站的目录结构也必将飞跃到一个新的结构层次。

（2）网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构的基础之上，但可以跨越目录。形象地说，每个页面都是一个固定点，链接则是在两个固定点之间连线。一个点可以和另外一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。网站最好用最少的链接，使浏览最有效率。

一般建立网站的链接结构有两种基本方式。

1）树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。用这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。

2）星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。

这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速地浏览到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是，首页和一级页面之间用星状链接结构，一级页面和二级页面之间用树状链接结构。有的站点为了免去返回一级页面的麻烦，将二级页面直接用新窗口打开，浏览结束后关闭即可。

如果站点内容庞大，分类较细，需要超过三级页面，那么建议在页面里显示导航条，这样可以帮助浏览者明确自己所处的位置。例如，经常看到许多网站页面顶部的导航条：“您现在的位置是：首页→汽车→聊城汽车→聊城汽车网→分类信息→品牌车信息。”

关于链接结构的设计，在实际的网页制作中是非常重要的一环。采用怎样的链接结构直接影响到版面的布局。例如，主菜单放在什么位置，是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接。在链接结构确定后，再开始考虑链接的效果和形式，即采用下拉表单，还是DHTML动态菜单等。

4.版面布局

版面布局也称为布局设计，是指网站设计者对所有要体现的内容进行有机地整合和分布，达到某种视觉效果。做好网站的版面设计要重视所做的每一步并把它尽量做到最好。

（1）版面布局的原理

版面指的是浏览器看到的一个完整的页面（包含框架和层）。网页的整体宽度可分为3种设置形式：百分比、像素和像素+百分比。通常在网站建设中以像素形式最为常用，行业网站也不例外。在设计网页时会考虑到分辨率的问题。现在通常用的分辨率是1024×768和800×600，网络上很多都用到778个像素的宽度。在800的分辨率下整个网页很压抑，有种不透气的感觉。其实这个宽度是指在800×600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760～770的像素。不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

（2）常用的版面布局形式

1）“T”形结构布局。它是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局。因为菜单条背景较深，整体效果类似英文字母“T”，所以称为“T”形布局。这是网页设计中使用最广泛的一种布局方式。优点是页面结构清晰，主次分明，容易掌握。缺点是规矩呆板，如果细节色彩上不注意，容易显得乏味。

2）“口”形布局。这是一个形象的说法，就是页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。

3）“三”形布局。这种布局多用于国外站点，国内用得不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4）对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机结合比较困难。

5）POP布局。POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点是显而易见的，漂亮吸引人。缺点就是速度慢。

（3）版面布局的步骤

版面布局也是一个创意的问题，但要比站点整体的创意容易、有规律。下面介绍版面布局的步骤。

1）结构的搭建。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，可以尽可能地发挥想象力，将想到的“景象”画上去（建议用一张白纸和一支铅笔，当然用作图软件Photoshop等也可以）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张，最后选定一张满意的作为继续创作的脚本。

2）粗略布局。在草案的基础上，将确定需要放置的功能模块安排到页面上（主要包括网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等）。注意，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后考虑次要模块的排放。

3）定案。当已经有一个很好的框架时，需要根据客户的要求将其所需的内容有条理地融入整个的框架中，这就进入了网页布局的阶段。

4）深入优化。这个阶段主要是针对一些细节的更改和优化，如颜色饱和度、字体、间距的调整。最后根据客户的反馈对现有的界面进行适当调整，直到客户满意为止。