(1)栏目与板块编排
构建一个网站就好比写一篇论文,首先要列出题纲,才能主题明确、层次清晰。网站建设初学者,最容易犯的错误就是:确定题材后立刻开始制作,没有进行合理规划。从而导致网站结构不清晰,目录庞杂混乱,板块编排混乱等。结果不但浏览者看得糊里糊涂,制作者自己在扩充和维护网站也相当困难。所以,我们在动手制作网页前,一定要考虑好栏目和板块的编排问题。
网站的题材确定后,就要将收集到的资料内容作一个合理的编排。比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。在栏目编排时需要注意的是:
尽可能删除那些与主题无关的栏目; 尽可能将网站内最有价值的内容列在栏目上;
尽可能从访问者角度来编排栏目以方便访问者的浏览和查询;辅助内容,如站点简介、版权信息、个人信息等大可不必放在主栏目里,以免冲淡主题。
另外,板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些,每个板块都有自己的栏目。一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块。如果有必要设置板块的,应该注意:
各板块要有相对独立性; 各板块要有相互关联;
各板块的内容要围绕站点主题; (2)目录结构与链接结构
网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的维护,以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排。
另需要注意的还有:目录的层次不要太深,不要超过3层;不要使用中文目录,使用中文目录可能对网址的正确显示造成困难;不要使用过长的目录,太长的目录名不便于记忆;尽量使用意义明确的目录,以便于记忆和管理。
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础
16
之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。一般的,建立网站的链接结构有两种基本方式:
树状链接结构(一对一),这类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,不会“不知身在何处”,但是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行。
星状链接结构(一对多),类似网络服务器的链接,每个页面相互之间都建立有链接。这样浏览比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。
因此,在实际的网站设计中,总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面,又可以清晰地知道自己的位置。所以,最好的办法是:首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。关于链接结构的设计,在实际的网页制作中是非常重要一环,采用什么样的链接结构直接影响到版面的布局。
(3)进行形象设计
网站的设计可以从以下几点出发:
设计网站标志(LOGO)。LOGO是网站的标志,可以是中文、英文字母,也可以是符号、图案等。LOGO的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志,采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。
设计网站色彩。网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。
17
一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。一般适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。
设计网站字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵,选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的计算机里没有安装特别字体,那么辛苦设计制作便可能付之东流了。
设计网站宣传语。也可以说是网站的精神、主题与中心,或者是网站的目标,用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站,进行对外宣传,可以收到比较好的结果。
3.7.5确定网站风格
“风格”是抽象的,是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素,网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局,还是交互方式,只要你能由此让浏览者明确分辨出这是你网站独有的,这就形成了网站的“风格”。
风格是有人性的,通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放,还是清新秀丽;是温文儒雅,还是执著热情。
总之,有风格的网站与普通网站的区别在于:在普通网站上你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,在有风格的网站上你可以获得除内容之外的更感性的认识。
在明确自己想给人以怎样的印象后,要找出网站中最有特色的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之,风格的形成不是一次定位的,你可以在实践中不断强化、调整、改进。
18
5个人网站的建设
5.1确立网站主题
网站主题就是我们建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,我们不可能像门户网站那样做的内容大而全,包罗万象。因为我们没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,如新闻网站、音乐网站、影视网站、软件下载网站等等,但主题要鲜明,在你的主题范围内,内容做到大而全、精而深[10]。
5.2准备网站素材
常青道:“巧妇难为无米之炊”,网站的主题明确以后,下一步就要围绕主题开始搜集材料了。要想让自己的网站内容丰富,能够吸引住用户,我们就要尽量搜集材料,搜集的材料越多,制作网站就越容易。材料可以是文字、图片、声音等与网站有关的内容。这些材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料进行整理,去粗取精。去伪存真,作为自己制作网页的素材。
5.3网站规划
个人网站设计得成功与否,很大程度卜取决于我们的规划水平,规划嗍站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。个人网站规划包含的内容很多,如网站的名字、网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,我们只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。
5.4选择制作工具
尽管选择什么样的工具并不会影响我们设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。制作网页的工具比较多,目前大多数人选用的都是所见即所得的编辑r具,如Dreamweaver和Fron工page了。除此之外,还有图片编辑:具Pho工oshop,动画制作工具Flash等,网上
19
有许多这方面的软件,可以根据需要灵活运用。
5.4.1Dreamweaver简述
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver具有最佳的制作效率、操作直观、简单易学、站点管理方便、无可比拟的控制能力等优势,但他同样存在着难以精确达到与浏览器完全一致的显示效果、页面原始代码难以控制等缺陷。
5.4.2网站图片制作工具Photoshop简介
Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件。它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐。
Adobe Photoshop最初的程序是由美国密歇根大学的研究生Thomas创建,后经Knoll兄弟以及Adobe公司程序员的努力,Adobe Photoshop产生巨大的转变,一举成为优秀的平面设计编辑软件。它的诞生可以说掀起了图象出版业的革命,目前ADOBE PHOTOSHOP最新版本为6.0,它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。
Photoshop支持众多的图像格式,对图像的常见操作和变换做到了非常精细的程度,使得任何一款同类软件都无法望其颈背;它拥有异常丰富的插件(在Photoshop中叫滤镜),熟练后您自然能体会到\只有想不到,没有做不到\的境界。
5.4.3Flash简介
Flash是一种交互式矢量多媒体技术,他的前身是Future plash,早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2,到现在最新的flash4。现在网上已经有成千上万个Flash站点,著名的如Macromedia专门ShockRave站点,全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准,未来网页的一大
20