网站设计相关(杂)

 

如何让你的网站人见人爱


现在是个人主页风行的年代,只要上网,必定穿梭在网上人家的大街小巷之中。不可否认,这些网站当中优秀的比比皆是,但不值一提的网站也是屡见不鲜。显然,不管是网站建设者还是网友,大家都迫切需要知道好网站在哪里,那怎样才算是好网站呢? 

用户 

无论什么时候,一定要牢记在心:用户优先。没有用户光顾,网站意义何在?您或许使用ISDN,也可能使用高速专线,但您必须知道,目前大多数人还是通过Modem拨号上网,有时塞车很严重,这是不得不考虑的。完成之后,您最好自己拨号上网亲自测试一下。 

   

必需考虑网友的浏览器软件,如果您想让所有的人都毫无障碍地看到您的主页,那么不要使用只有部分浏览器支持的HTML格式或程序技巧。如果想要展现自己的高超技术又不想放弃一些潜在观众,可以考虑在主页中设置几种不同的观赏模式选项(例如纯文字模式、Frame模式、Java模式等等),供浏览者自行选择。 

首页和内容 

首页是网站的脸,其重要性不言而喻。除了漂亮,最好在第一页就对这个网站的性质与内容做个扼要说明,让人一目了然。在设计上,最好秉持干净清爽的原则,若无需要,尽量不要放置大的图片文件或加上不当的程序。虽然首页重要,但内容永远第一,请记住一点:任何内容,包括文字、图片、影像、声音,一定要跟这个网站所要提供给人的信息有关系。内容的分类也很重要,无论哪一种分类方法,都要让浏览者可以很容易找到目标。此外,在每个分类选项的旁边或下一行,最好加上这个选项内容的简要说明。 

 动 性 

Internet
的一个重要特色就是互动。好的主页必须与浏览者有良好的互动性,让人感觉他的每一步都确实得到适当的回应。必要时可加上可供表达意见的E-mail信箱来增加互动性。如果想让别人可以通过搜索找到你的网站,那么千万不要忘了在〈Title〉指令中加上可供搜寻的关键字串。 

图片应用 

图片有醒目、吸引人以及传达讯息的功能,好的图片会让主页增色不少,但使用图片时一定要考虑传输时间问题。据统计,用户可以忍受的最长等待时间大约是90秒,如果您的主页无法在这段时间内传输并显示完毕,很可能他会毫不留情地掉头离去,使用图片时,尽量采用一般浏览器均可支持的压缩图形格式。为了节省传输时间,许多人习惯采用关闭图形模式(甚至使用纯文字的浏览器),你可以为每个图片加上不显示时的说明文字,特别是这个图片具有超链接功能时,一定要加上说明文字,并给予同样的超链接功能。 

实时、更新、维护 

不要忘记,大家都想看新鲜的东西,没人对过时信息有兴趣,所以资料一定要注意即时性。不妨每隔一阵子就对页面设计做一次小翻新,时时保持新鲜感,这一点很重要哦。 

设计时如何把握网页布局


最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。

  1.页面尺寸:
  由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。   浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
  在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。

  2.整体造型:
  什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。   对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。

  3.页头:
  页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

  4.文本:
  文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

  5.页脚:
  页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。 

  6.图片 
  图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

  7.多媒体 
  除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。

网站导航理论与实践


导航是科学,是艺术。它让人们从一个地方到另外一个地方。我们从家里到超市购物时,我们是在真实世界里航行。而WEB则是一个虚拟世界里。在实际生活当中人们从A点到B点,以最短的时间和距离到达目的地,这就是导航的焦点,导航就是帮助人们找到他们的路。在航行时人们经常问下面的问题:

1. 
我在哪?
2. 
我怎样才能到达我要去的地方?
3. 
如迷路的人经常问自己:我以前到过这里吗?或我能返回我以前某地吗?
4. 
还有多久时间到达那里?

等等所有的问题都是正常的,遗憾的是在WEB中很难有准确的回答。

我在哪?

由于一些设计师的疏忽,往往会将所在位置忘记,而使用户要知道他们自己在站点中的位置是很困难的。而URL将会给你一个精确的位置,但URL不能被大多数用户所理解,然而,也不要期望URL总能帮助人们解决我在哪的问题,目前绝大多数的网站都是通过动态产生的URL,如:http://www.52design.com/cwd/index.asp?page=2&;sample_class= 这不能保证用户能通过上面的URL直接知道准确的位置。因为URL显示的是位置除非你要尽力的去避免用户知道URL,或者避免深层次的链接/松散的网站架构那样,否则不要隐藏。毕竟URL能给用户一个确切的定位。

一个高级的网页标签形式加入了关于位置的许多信息,这就是我们常说的所在位置,这种类型我们也可以称深度测量,因为它直接显示了用户在站点中的位置,如下所示:

首页 > 作品展示 > 网站设计 > 作品1

注:在这种情况下,在所在位置里前面三个都可以链接,而在第四个时字体是加粗的,表明了我们现在所处的位置。这种方式能够很直接明了的提示用户我在哪?而它一般都放在主导航条的下方。

我怎样才能到达我要去的地方?

除了网址的确切定位外,用户还可以通过网页的标签用户的目的地。最明显的就是网站的主导航条了,所以我们在做导航条的时候,必须要考虑以下几个特点,1.突出/明显2.有吸引力3.扩展性也必须考虑在内,这一点是关系用和我能去哪的重要因数。当然,用户还可以通过网页中其它的小标签到达。

我以前到过这里吗?或我能返回我以前某地吗?

在网上查看信息的时候总会出现一个这样的问题,我们经常会看到重复看的信息!才发现我以前来过这里,如何有效的避免这种情况?我们可以采用颜色来区分,未被点击的是一种颜色,点击过后的又是另外一种颜色,用站点样式来实现。现在大多数网站都采用这种形式,我在这里就不多说了!

如果有完整的所在位置返回以前某地的问题都已经大致解决了,但一般还有几项可别忘了哟!

1. 
标志/LOGO
通常我们在网页的制作当中,会把LOGO做上链接链接到首页方便用户在迷失方向的时候及时的返回。如我们出外旅游时迷路了,我们可以直接回到旅馆重新开始。

2. 
返回
在我们阅读信息或者查看产品的时候常会看到一些莫名其妙的返回按钮,我都不知道它要把我返回到哪里去?如果是这样还不如不要这个按钮,让人觉得很繁琐,所以我建议有必要的多打上几个字,清晰提示用户返回到哪里,如:返回产品大厅等
一些其它细节因数在此不一一指出了!

还有多久时间到达那里?

关于这方面的因数以下4点都可以直接影响到网页的下载速度:
1. 
网速
2. 
程序
3. 
服务器
4. 
页面的表结构
5. 
图片大小
6. 
外在其它因数

当然在前面的3点设计师无法直接有效的控制,但后第45点完全是设计师的控制范围之内,关于这两点我在《行业网站设计心得》一文里面已经提到,在表格方面设计师们要尽量避免使用大型表格、减少表格的深度、表格复杂化,可以直接提高网页的浏览速度。而在图片方面我就更不用多说了!

行业网站设计心得


很多设计师认为做好了企业网站就一定能够做好行业网站的设计,其实对设计来说行业网站和企业网站的设计截然不同,对整个网站的创意、风格、整体框架布局、文字编排、图片的合理利用,空间的合理安排上面等有着许多诸多的要求,需要考虑的面更广,面对的问题也会更多。对于一名优秀的网站设计师来说不能绝不能放过任何一点小细节,本篇文章简述的是设计师在做行业网站时所需考虑的一些问题。 

一、网站风格/创意
  风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。整体形象包括站点的版面布局,色彩,字体,浏览方式等。如:我们觉得迪斯尼是生动活泼的而IBM则是专业严肃的。每一个网站都会给人们留下的不同感受。这里我们需要做到的是根据网站的定位做出网站特有的风格。除此我们还需要在风格同一上需要把握一下,其实这个风格的统一和传统的印刷出版物没什么区别。你网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,都要统一风格,贯穿全站。这样子用户看起来舒服、顺畅,会对你的网站留下一个很专业的印象。而企业网站设计师往往就缺乏这一点,没有全局意思。

  创意,所谓创意就是不拘一格?某些设计师在做创意的时候大费周章,做出来确实不可否认很有创意、很别致,但往往对于行业网站的客户为什么不能接受呢?此时不要太责怪客户的不识货,应该反思,抓住客户的需求。其实做行业网站不需要很多大的创意,也不要浪费过多的时间去追求如何个性、如何好看,我们只需要一点小小的创意贯穿全站,也许会使网站更生动更具有吸引力、更有思想,比如中国现车交易网(http://www.chinaxcjy.com/)就是一个很好的案例,它把车的外形融入到网站中,使它脱颖而出。

二、网站LOGO
  Logo顾名思义就是站点的标志图案,logo最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站logo的设计过程中一般有以下三种思路:1.直接以网站网址作为logo2.根据网站提供的产品/服务特点展开logo设计。3.以传递网站运营商的经营理念为特色。如:全球五金网logo(www.Wjw.cn)

三、视觉流程
  人们在阅读某种信息时,视觉总有一种自然的流动习惯,先看什么,后看什么,再看什么。在心理学的研究表明,一般的浏览习惯是从上到下、从左到右,在一个平面上,上松下稳而压抑。同样,平面的左松右稳。所以平面的视觉影响力上方强于下方,左侧强于右侧。这样平面的上部和中上部被称为最佳视域,也就是最优选的地方。在网页设计中一些突出或推荐的信息通常都放在这个位置。当然这种视觉流程只是一种感觉并非一种固定的公式,只要符合人们的心理顺序和逻辑顺序,就可以更为灵活地运用,在网页设计中,灵活而合理地运用直接影响到传达信息的准确与有效性。

四、网页框架与布局
 网页布局大致可分为字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型,在这里就不做一一论述了。其实在我们在做设计的时候并没有过多的去考虑什么形式,比如我们在一张纸看到一个圆形的东西,很容易可以联想到它像太阳,而有些人则联想到月亮等等这都是一种形式比喻,最重要的是抓住客户的需求,把握网站的定位做处合理的框架布局。

1
 分辨率
网页的整体宽度可分为三种设置形式:百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用,行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题,科技发展到现在我们通常用的是1024*768800*600的分辨率,现在网络上很多都是用到778个象素的宽度,在800的分辨率下面往往使整个网页很压抑,有种不透气的感觉,其实这个宽度是指在800*600的分辨率上网页的最宽宽度,不代表最佳视觉,不妨试试760~770的象素,不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

2
 合理广告
在目前一些网站的广告(弹出广告、浮动广告、大广告、banner广告、通栏广告等等)让人觉得很烦琐,更本就不愿意来看,有时连你这个网站都不上了,这样一来网站受到了严重的影响、广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。

浮动广告有两种,第一种是在网页两边空余的地方可以上下浮动的广告,第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种,不可避免第二种情况时尽量在数量上控制最多一个就好。如果数量过多会直接影响到用户的心理、防挨到用户浏览信息,适得其反。首页广告不宜过多适中即可。如在注册或者某个购买步骤的页面上最好不要出现过多的其他无关的内容让用户分心,避免客户流失等

3
.空间的合理利用
 很多的网页都具有一个特点,用一个字来形容,那就是,它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上,有多少挤多少,不加以规范,导致浏览时会遇到很多的不方便,主要就是页面主次不分,喧宾夺主,要不就是没有重点,没有很好的归类,整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡,也可以用个字来形容。
  并非要把整个页面塞满了才不觉得空,也并非让整个页面空旷才不觉得满,只要合理的安排、有机的组合,使页面达到平衡,既使在一边的部分大面积留空,同样不会让人感到空,相反这样会给人留下广阔的思考空间,给人回味又达到了视觉效果。 

4
.文字编排
  在网页设计中,字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。

4.1
文字图形化
  文字图形化就是将文字用图片的形式来表现,这种形式在页面的子栏目里面最为常用,因为它具有突出,同时又美化了页面,使页面更加人性化加强了视觉效果。是文字无法达到的。对于通用性的网站弊端就是扩展性不强。

4.2
强调文字
  如果将个别文字作为页面的诉求重点,则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下也可以使用文字图形化。

五、网站配色
1.
用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2.
用两种色彩。先选定一种色彩,然后选择它的对比色(Photoshop里按ctrl+shift+I)再进行微小的调整。整个页面色彩丰富但不花稍。

3.
用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩,而又不花,色调统一。这种配色方法在网站设计种最为常用。

4.
灰色在网页设计中又称为万能色,其特点是可以和任何颜色搭配,在使用时把握量避免网页变灰。

在网页配色中,尽量控制在三种色彩以内,以避免网页花、乱、没有主色的显现。背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容、也使用户在浏览信息的时候不会觉得累。

六、常见问题

6.1
分解大型表格
  为了加快网页的浏览速度,尽可能避免用大型表格,因为浏览器必须等待整个表格的内容全部到达客户端,才能显示这个表格的内容,而文本或图像则是一边下载一边显示。同时我们制作网页时要尽量减少表格的深度、表格复杂化,这一点尤为重要可直接影响网页浏览速度、又给后面的程序添加带来了不必要的麻烦。 

6.2
网站导航要清晰
  您所在位置在大型网站中是不可缺少的一部分,其作用表明您现在所处在的位置,使用户不会不知东西南北迷失在网站中。其次还有读者进入目的页的点击次数,不能超过三次。如果三次以上还找不到用户所要的信息,人家可就没有耐心陪你玩了!

6.3
图片注解
  在很多网站上我们都可以找到一个共同的缺点,当网速慢时有很图片都无法显示,又没有注解使得用户反感,如在注册时的按钮是图片做的又没加图片注解,而导致连注册都找不到,如果加了注解这些问题也就不成问题了!

6.4
系统按钮
  在我们做按钮的时候,要做成按钮的形式(type="button"),而不要做成提交表单的形式(type="submit"),方便以后程序设计。

6.5
空链接、死链接
  在一个优秀、专业的网站上是找不到任何一个空链接或死链接的情况,如果有这种情况会影响到用户对您网站的评价,所以我们在制作的时候尽量避免,避免办法就是提前做好链接,如果尚未完成的页面则链上建设中…”的页面,加以解释。

6.6
导航条
  在大型的行业网站里面主导航条最好是用文字形式,避免使用图片或Flash做导航条、缩小网站扩展性。

6.7
网站的扩展性
  对于一个行业网站而言,网站的扩展性是相当重要的,随时都要考虑到网站需求的变化!

HTML文件HEAD内部标记浅析

天,使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法,无疑对我们制作主页有更大的帮助,也可以使用户能更精确地控制页面的效果。介绍HTML语法的文章已经很多,但是除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要我们对他们有一定的了解。 

  今天,使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法,无疑对我们制作主页有更大的帮助,也可以使用户能更精确地控制页面的效果。介绍HTML语法的文章已经很多,但是除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要我们对他们有一定的了解。 

  一、META 

  META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法: 

  *<META NAME="keywords" CONTENT="yourkeyword"> 
  <META NAME="description" CONTENT="your homepage's description"> 
  本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。 

  * <META HTTP-EQUIV="refresh" CONTENT="60; URL="new.htm"> 
  浏览器将在60秒后,自动转向到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。 
  如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。 

  * <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"> 
  描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5 

   * <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
  强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。 

  二、LINK 

  显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下: 

  <LINK REL="stylesheet" HREF="style.css"> 

  REL参数说明两个文档之间的关系,HREF说明目标文档名。 

  关于层叠样式表,请参考其他文章。 

  三、BASE 

  BASE主要有两种用处: 

  1<BASE HREF="原始地址">
  本文档的原始地址。这样,读者下载你的文档之后,也可以知道是从哪里下载的。

  2<BASE TARGET="目的框架名">
  在一个框架(frame)页中,如果要把某个框架的连接在另外一个框架显示,例如,把menu框架中的连接显示到content框架,就可以在menu框架中的页面加上<BASE TARGET="content">,这样,就没有必要在menu页面的所有连接的<a>标记中添加target属性了,除非这个连接不是在content框架中显示。 



  一、META 

  META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法: 

  *<META NAME="keywords" CONTENT="yourkeyword"> 
  <META NAME="description" CONTENT="your homepage's description"> 
  本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。 

  * <META HTTP-EQUIV="refresh" CONTENT="60; URL="new.htm"> 
  浏览器将在60秒后,自动转向到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。 
  如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。 

  * <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"> 
  描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5 

   * <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
  强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。 

  二、LINK 

  显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下: 

  <LINK REL="stylesheet" HREF="style.css"> 

  REL参数说明两个文档之间的关系,HREF说明目标文档名。 

  关于层叠样式表,请参考其他文章。 

  三、BASE 

  BASE主要有两种用处: 

  1<BASE HREF="原始地址">
  本文档的原始地址。这样,读者下载你的文档之后,也可以知道是从哪里下载的。

  2<BASE TARGET="目的框架名">
  在一个框架(frame)页中,如果要把某个框架的连接在另外一个框架显示,例如,把menu框架中的连接显示到content框架,就可以在menu框架中的页面加上<BASE TARGET="content">,这样,就没有必要在menu页面的所有连接的<a>标记中添加target属性了,除非这个连接不是在content框架中显示。

 

十碟小菜招揽网站回头客


年头谁最喜新厌旧,答案就是网民”!难道不是吗?网站经营者们绞尽脑汁地设计精美而又具有亲和力的页面、策划有趣而又能博采众长的频道、开发奇妙而又好用易用的功能同,一切都是为了喜新厌旧的网民。因为,稍不留意,网民们轻点鼠标,一下子就跑到了十万八千里,十天半个月也不到你的网站上看上一眼。你说,多苦恼!先别愁,我这里有十碟小菜,备好了,让网民尝尝。虽然不是大餐,口味清淡了一些,但是,你可千万别小瞧,用好了,可以帮你招揽回头客。

  信息完整的首页

  千万不要忽视这一点,我一定要提醒你注意。在你的主页的首要位置,你必须告诉浏览者:你是谁,例如设置关于我们,你的网站是干什么的。许多网站没有注意到这一点,以至于许多浏览者来到网站后,由于搞不清楚这里究竟是干什么的而轻易离开。

  苗条的图片

  由于图片下载需要时间,请务必把图片进行压缩减肥。除非你的网站全是漂亮的美眉写真,否则没人会为了看张图片而等待两分钟的宝贵上网时间。如果你确实需要放置大量的图片的话,送你两个字:压缩!

  普通的字体

  互联网上,文字传播了大量的信息。认真处理网页上文字内容与表现方式,是显现网页制作水准的第一步。使用的字体要干净、易于辨认,稀奇古怪或龙飞凤舞的字体如果长篇纳入,反而不利读者阅读。如果你想用方正行楷字体来增强网站的表现力的话,我劝你还是不要这样。因为如果你的网页使用的不是多数网民的计算机上都安装的通用字体,比如宋体、楷体、黑体等,在网民的浏览器上的字体就不会按照你设计的字体显示。所以,最好使用通用标准字体。如果你一定要用艺术字的话,你只有把他们做成图,这样用户机器上的字体才会与你设计的一致。另外,使用的字体大小要适中,字体太小,阅读吃力;字体太大,字距太长,打破了一个字原有的整体感,也不利阅读。

  适当的分辨率

  这是网页制作中关键的一环。网页到底应该做成多大尺寸呢?目前大部分网民的分辨率是800×600,但是也有少数人使用640×480的显示器和1024×768的显示器。所以,你应该在不同的尺寸下测试你的页面。如果你不介意少数人要拉动滚动条才能浏览网页全貌的话,你完全可以做成800 X600的尺寸,这样使用1024以上显示器的人也适用。如果你的网站的页面数量很少,建议你辛苦一下,设计出不同分辨率的网页。

  长短适中的网页长度

  目前,制作网页使用最多的分辨率方式为800×600,所以以23个窗口屏幕页为佳。网页过长,就延长了浏览器下载网页的时间,也就增加了被浏览者放弃的机会。如果一个文件过长,就应该分割为若干个较短的网页,在每个网页中表明网页的导航,例如"第一页""第二页"等。

  简明的导航条

  导航条要做到简单明了,并保持各页导航条之间的一致性。你可以随意把导航条放在页面的上端或者底部。但是无论你怎样做,一定不要忘了在每个页面的底部加上一个纯文本形式的导航条。无论你怎样喜欢Flash,尽量不要使用Flash形式的导航条。因为许多读者没有Flash插件,这样他们就不能浏览你的网站(偏偏又那么一群网民,就是不愿意下载文件,哪怕是很小的,他们都懒得理)。其实,最关键的是那些网站搜索引擎的蜘蛛们,还不认识Flash格式的导航条。所以,如果你的导航条使用的是Flash的话,搜索引擎就不能把你网站上的每一页都搜索到,你就不容易被别人找到。

  交互的栏目

  在互联网世界中,交互就意味着吸引。如果网站没有互动的内容,那么你赶快设计一个吧!例如聊天室、BBS、留言版。这些内容有助于将你的网民联成一个社区,从而增强网站对他们的吸引力。

  清楚的联系方法

  我在网上浏览的时候,经常会为了找到与的网站联系方法而不得不把网站翻个底朝天,把自己累得筋疲力尽。所以,建议你把联系方式放在每一页的下端。还有一点就是,不要让愿意与你联系的用户填写繁杂的表格。只要点击你的e-mail地址就OK,这样最好。如果你愿意,最好也把你的联系电话写在上面,因为有的网民性子急,等不得上网收你的mail,就是想找你好好聊聊,你可以千万要满足他们的愿望。

  设立邮件列表

  这是建立一个网站重要的条件之一,一定要切记。即使你不需要每天都向用户发送新闻,你也可以充分利用邮件列表的功能向用户传送各种信息。例如:新产品的推出、网站重大更新等等。使用邮件列表可以拉近网站与用户之间的距离。只要他注册为用户,一切尽在掌握。但是,也要把握好度,以免被别人视为垃圾邮件。

  浏览器的兼容

  这可能是最经典的老问题了。同一个页面在IE中可能是完美绝伦,可换到Netscape中却可能面目全非。因此,请一定注意,在不同的浏览器中(Netscape Internet Explorer)测试你的页面。尽管现在IE拥有80%以上的使用者,我们还是应该考虑到20%那部分用户的需求。因为只要IENetscape同时存在,这个问题就一定存在。

网页视觉设计基本技巧


商业网站视觉设计应以为商业目标服务为出发点,你要为人家浏览网站信息提供最大的视觉愉悦。有了这个原则,你才可以正确处理好技术应用程度、图像与文本的关系、颜色与图像的关系、动画图像的使用等等问题。 
  网页视觉设计以什么为准绳?一张白纸、一个新开的空白HTML文件,你可以随心所欲地勾划、设计,你该从哪里着手呢?

  视觉设计是好是坏,是最没有一定之规的,一千个人有一千种看法,一万个人就有一万种意见。你觉得很难忍受的错误,很可能是人家的得意之笔;你最欣赏的卖点,访客很可能嗤之以鼻,正所谓众口难调

  面对这样的现实,你拿什么做定盘心?记住,最要紧的,是如何取悦于你的受众、你的潜在顾客!因为你的站点不是自娱的艺术作品,而是有明确的商业目标,是需要尽量多的人的喜欢、从而争取尽量多的访问量的。只有把握住这个原则,你才能正确处理好有关的各种关系。你可以先从小范围开始,问问周围的朋友,他们看到你网站的第一感觉如何?然后再逐步推广,边征求意见边改,直到代表性差不多为止。 

站点不是杂物箱

  一个专业的、有营销意识的站点,应该让访问者(潜在客源)能马上了解到这个站点及其业务是什么。

  绝大多数站点缺乏主旨,没有规划意识,没有连贯性,没有完整性。普遍的现象是,站点像一个杂物箱,自己能找到的、觉得好玩的、时髦的东西全往里塞,没有目标、没有灵魂。 

照顾大多数

  很多站点技术挂帅,以为采用的技术越复杂、越时髦越好,因为互联网是年轻人的乐土,所以他们追逐时髦的兴趣也体现到网上。对于以表现自我为主旨的个人主页,这一特点颇有可取之处,然而对于有明确商业目标的站点,那就不一定是好事了。 

  如果你的站点为了营销,你的站点就应该照顾绝大多数人的情况,采用最低技术手段以保证有尽量大的传播面。这意味着,能简单则简单,千万不要炫耀技术,那样不会对你的站点带来什么好处。当然,如果你的站点就是推广与互联网相关的新技术的,那是另当别论。即使对这种主旨的站点,最好也该给初级网友一个比较你尖端技术的导引,因为你的目标不就是为了让人家了解乃至消费你的好技术吗? 

图像重要还是文本重要?

  这是每个站点都必须面对的问题。流行的观念是,图像比文本重要,一提站点设计,大家以为就是图像设计或者视觉效果设计。这是对站点设计的肤浅理解。 

  其实,站点设计的内涵远不仅是图像设计,它是以实现站点经营战略为目标,对站点各要素展开的综合规划。其内涵包括很多方面,像站点目标、经营策略、读者定位、风格塑造、文本设计、图像设计、营销策划等等,还有像交互性设计、数据结构、绩效评估等也都在其列。 

  图像和文本都是用以实现站点经营战略的主要手段,其中图像通过视觉效果引导读者,而文本内容则是决定站点能否吸引人的内核。二者的关系,就像两个相声演员,一个逗哏一个捧哏。谁逗哏逗哏,则应由站点经营战略的需要而定。 

  对于一个以信息内容为主体的站点,文本占突出地位,是逗哏的角儿,同时,图像就该起配角作用,属捧哏,目的是给读者营造出一些喘息的视觉空间,就像城市建筑群之间绿地、公园的点缀功能一样,同时,图像运用恰当,还可达到增加页面深度的功效。 

  对于一个艺术站点特别是视觉艺术类站点,图像就居于主导地位,是逗哏,它决定页面、站点的整体结构,因此文本内容就应处于配角地位,为图像捧哏 

  总体来看,当然是信息内容为主体的站点居多。看看你的站点,属于哪一类?定好站点的基调之后,再来看二者如何来配合最能实现站点的意图。 

  无论二者的关系怎么建构,都有些一般性原则供你借鉴:
(1)
图像要小,文本段落要短;
(2)
所有图像文件最好采用 alt 标签,其妙处多多,后面还会多次谈到。 

颜色与图像

  有一个办法可以既减少图像的使用,又能达到使页面生动、吸引注意的效果。这个办法就是运用背景色块。

  显而易见,颜色是站点视觉设计的关键因素之一。视觉设计的先期工作,就包括确定页面的颜色组合方案。颜色能对受众的情绪、思维产生强烈影响,所以选择暖色还是冷色组合、黑色还是白色背景,对读者必然有很大的导引作用。具体设计时你尽可发挥你的艺术想象力,这里给你提供应该遵循的几条基本技巧:

(1)
为照顾大多数网友,最好限定使用 256 色。
(2)
使用背景色块,避免使用背景图像。用图像做背景,会降低页面的访问速度,使文本难于阅读,还容易模糊整个站点的主旨。
(3)
颜色组合要有个性,同时可使文本易读、图像易于区别开来。
(4)
审慎选择颜色组合的情绪意义。举例来说,黑色背景下的红色文本,显得很刺眼,对于像花店这类站点就不合适;白色背景下的蓝色文本,看上去很放松、很宁和,对于像摇滚乐队的站点就显得不够分量。 

动画图像

  动画图像的使用一定要慎之又慎,因为它容易造成对读者视觉上的强烈骚扰,同时也很容易制约页面的访问速度。在使用动画图像之前,建议你仔细考虑这些因素:

(1)
目标明确。你为什么一定要用动画图像?为浏览方便?强调信息?还是宣传自己身份?如果只是想让你的站点时髦点,那最好别用。
(2)
尽量缩减动画的大小。
(3)
注意动画是很抢眼的,弄不好画蛇添足。

制作网站的50个秘决


一、内容

  1、让读者有理由逗留。要把网页作得趣味盎然,引人入胜。但首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与——让读者做一些事情,如报名获取定期发送的通讯,并用某种方式报答他们的参与,如每周抽奖或给予下载一些东西的机会。

  2、对访问者来说最具价值的站点是那些立刻就能让人明白哪些信息可以获取,怎样获取,以及可能还有怎样让读者来更正他自己认为有错误的地方或加上他自己的内容。

  3、签上自己的名字,并展示得到的荣誉——但不要在这里弄上一个长长的签名。少许的自我宣传可能是中肯的,尤其是当你想让自己的网页具有个人特色时,但这可能会带来困窘和妨碍实质内容。你所要作的只是连接到关于作者的那一页,该页也是弃权、版权声明及类似说明的合适地方。

  4、不要包括一些一般化的Web参考信息和人人都有的已不再是热点的连接。连接到Alta VistaYahoo可能就已足够了,否则你的外部连接应该是具有特殊意义和读者还没有遇到过的地方。

  5、要是有以评论或读者意见的形式取得的肯定性的反馈,可考虑把它包括在主页之内——也许在开头的某个地方,或者作为到荣誉页的一个连接。如果做得恰到好处,可以鼓励新的访问者并使他们放心。相反,要是做得不合适,就会被认为是自我吹嘘,而真正的内容反而处于次要地位。

  6、忘掉已学会的在纸上写作的大多数习惯。基于文字、面向纸张的写作所面临的任务是精心安排的叙述,在提供知识、愉悦心情或说服别人的过程当中要能保持读者的兴趣;但是文字并不是大多数Web版面的主要组成部分——即便是页面上的文字比其他元素多,也常常是其他组成部分(图像、超媒体连接)被认为比单纯的文字更重要。

  7、结构至关重要。网页可能会看起来是二维的,但不应如此理解。印刷页面的原有结构在Web已不复存在;写作者得着重于文件以可见的方式表现出来的结构,因为它可能已具有更微妙的交流功能。

  8Web的读者不会去读每一个词,他们的阅读方式更近似于快速阅读而不是象读呆板的树式文件那样的逐行阅读。通过计算机屏幕阅读并不是件格外舒服的事情,因此读者希望最好能尽快得到结果。

  9、在Web页面创作中读者实际上是一个配合者。除了要注意在任何类型的写作中都要考虑的词汇、语调和其他事项外,网页作者还要意识和具体考虑到读者的身体运动——按鼠标键、滚动页面、写作邮件——也是交流过程的一部分。

  二、页面设计

  10、有了一个HTML编辑器和几兆服务器空间并不能说马上就可以设计网页了。在开始编写文字、寻找图像和进行HTML标记之前应该先把基本的网页结构组织号。如果没什么要说的,就什么也不要说。要是开始的时候在脑子里没有一个相当明确的结构,那几乎肯定会以一团糟而告终。开始时谨慎一些,然后不停地学习,不停地改进。卸载一些你喜欢的页面,核对HTML源文件,看它是怎样写的,把它全部或部分粘贴到一个试验文件进行检验。整页地拷贝别人的东西是剽窃行为,但是向别人学习则是研究过程。

  11、人们第一次进入你的主页时,他们通常不是在寻找值得阅读的地方,他们可能正在寻找可供选择的东西,以超文本术语说即是可用鼠标点取的词句、图像、按钮等等,接下来是阅读文字,选定一个可选项,按鼠标键,下页出现后又重复此过程。这里的技巧是确定阅读时按键的适当比率。提供的可选项要是太少,访问者会觉得没意思,要是太多又会吓倒别人。

  12、要是页面包含的内容信息量大,在开始设计页面之前就要先确定好读者对象。对新手或新的访问者来说用一种固定的文件结构并在开始的时候给予说明是有意义的。例如,关于内容的说明表格或某种类似结构。如果你要满足知识或经验不在同一个层次的读者,提供限制性的线索可以让某些读者跳过基本内容直达目标。提供连接时要考虑到各个层次的读者。

  13、不要让读者不知所措。不必非要用声音和图像充斥网页,也不要把文件做得太长以至于在装载文件时让读者等得脚后跟发凉,因此使用图像时要谨慎:大的图像显然会降低页面建立的速度,但许多需要顺序装载的小图像也会如此。

  三、布局

  14、别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外,很多流览器不能很好地显示斜体字,也不能补偿由于字母倾斜引起的空白变化。

  15、利用短的段落,加点列示,适当的整块引用文字,用水平线分节,用影象地图指引主要连接,使你的页面能吸引人和容易阅读。

  16、不要在每一页使用风格不同的图标。

  17、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。

  18、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读。要把背景做得好,光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含有图像,对比度要较低才不至于过于分散读者的注意力。

  19、在 IMG 行加 ALT 标记。假设标题图像显示为 The Offal Eaters" HomePage,你可以在括号内加上一个 ALT 标记,ALT="The Offal Eaters" HomePage",直接把它加在 IMG SRC=Offal.com.uk/images/gif/home-top.gif之后。这样就会让使用基于文本的流览器的读者除了看到 [IMAGE] 以外还能看到别的一些东西,使用图形流览器的读者在图像未能成功载入之时也会看到一些东西,而你也能让自己的HTML文件相当整洁。

  20、也可以在分隔条上使用ALT标记,这样就使得使用基于文本的流览器的读者能看到一些更有趣的东西,而不只是一条直线。

  21、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。

  22、不要让什么东西看起来象是一个按钮却不起按钮的作用。

  四、HTML格式

  23、应避免使用交叉标记。不同的浏览器对交叉标记的反映会不同。

  24、使用交织 GIF Jpeg 。因为交织图像是分级显示出来的——首先以很低的分辨率显示,然后逐步提高分辨率,直至最后达到正常显示——这种方式有时候会使较大的图像看起来好象装载得快一些(实际上并非如此,但这是一种有益的错觉)。这样也便于读者在图像装载的过程中看到它的模样,如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。

  25、另一种增加可得带宽的巧妙方法是在HTML底稿中使用 Lowsrc 命令。比如说有一张400×600像素的1600万色扫描图,所占空间约为35K。使用 Paint Shop Pro 这一类的工具对原图重新取样,比如说高度为100像素(也许为了达到你自己的要求你得进行调整才能找到最合适的大小,但可以从高度除以4开始)Paint Shop Pro 会自动计算新画面的宽度。保存新画面,它的大小现在应为6K或更小。然后在HTML文件中可以这样写上:

Lowsrc命令指示浏览器在真正的画面载入以前先装载低分辨率的图像,这样就让读者清楚将会出现什么样的画面。(为确保浏览器能即时以合适的大小显示图像,高度和宽度很重要)

  26、当然,可以用 Lowsrc 提取你想要的任何图像。一条双色的请等待下传的信息可能只占几百字节,同时由于图像是存在浏览器的缓存区,因此可用请等待信息代替所有画面。当图像平静地消失于背景之中的时候,读者可以悠闲地浏览你的网页。

  27、可以在一个 HTML 元素内嵌入一个连接,如:Myheading但不能反其道而行之,把一个标题或其他HTML元素嵌入一个连接。下面这样的结构是正式的 HTML 规定禁止的,并可能在大多数最新的浏览器下不见效果:Myheading

  五、长文件

  28、当页面为单个长文件时要小心。它的传输时间明显要比较短的页面的传输时间长,即使通信速率为 28.8Kbps 的读者也可能会失去耐心。阅读大的文件时页面滚动也很困难。大的文件和较慢的装载速度可能会使人沮丧,再也不会返回到你的网点。

  29、如果你觉得文件大小很重要,不便改变,就要考虑读者将会怎样使用网页。努力确保读者浏览长文件时浏览器滚动条小的移动不会在页面上产生大的跳跃。作为一条经验规则,按一次滚动条页面移动的范围要少于一页,这样就还看得见上一个窗口的部分内容。任何比这更大的移动都会让人迷失方向。

  30、要不然就把一个长文件分成几个子文件,在主页给予连接。不过要记住子页可能会成为死页——有时候命中率要低于10%。做得聪明一点,给读者一个很好的理由装入子页或给他们一个很好的理由浏览它。

  31、如果页面很多,在主页给出一个内容列表或目录显然是个好办法。不要非得作成那种常规的、令人厌烦的、死板的树形布局,把它做得有趣一些,让读者有理由进入连接,帮助他们了解他们可能看不出来的内容。

  32、要是你必须把所有的内容都放在一个文件里面,使用一个内容列表,从表的项目可直接跳到各部分的开头。或者做得更好,提供一个独立的文本文件用于下传——去掉所有的格式符——使下传的时间减到最少。

  六、连接

  33、通常的顺序文本写作与在线文件写作之间的一个主要区别是在线文件的读者可能在文件的任何一点进入该文件。尽管你已做了一个漂亮的首页作为入口,其他人可能会对你的杰作内的具体指针或子页给出连接。向这些新的访问者提供一些关于他们在什么地方以及为什么在这里的线索是有意义的。

  34、从头至尾都要使用导航图标,尤其是要用返回到首页连接。可以在每部分都做这样做。比如在每页的顶端(或底部)都有一小串图标,第一个回到首页,第二个回到章,第三个回到节。

  35、在页面上应该有一些连接帮助访问者来回跳转。总是以相同的格式把这些连接放到所有页面上,这样读者就总能知道到哪儿去找到它们以及怎样使用它们。

  36、一般来说应该使用相对连接,因为:

  (1) 这样容易把一组文件移到另一个地方(相对路径名仍然有效)

  (2) 输入量较少。在同一页的连接项当然应该使用相对地址,因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。

  37、连接到不直接相关的文件时使用绝对路径。这样以后要是把源文件移到另外的目录下就不需更改连接了。

  38、确保可选择的连接清楚直观——用标题或明显相关的图像来表明它有什么内容。特别要避免请按这里,任何要按这里的人都会慎重考虑,它是不是正好就在这里,并且连接无误。不要让连接的名称与连接的 URL 相同,这样会使读者要作的工作增加。

  39Mail to 连接中应把 e-mail 地址作为连接名称。例如,可能有一个人名和一个 e-mail 地址,人名连接到他的主页,e-mail 地址连接到 mailto。新闻组连接应当直接用组名。

  40、核对 href ,不要在页内出现任何没有出路的连接,也不要让连接落掉。

  七、通则

  41、实际上,网页要么处于建设之中要么就是死的——如果你不更新它,并且它不是纯粹的历史资料,它马上就会变旧。最后一次更新记录是一个好办法。且不说别的,如果你的页面变化太少,你很快就会在读者评论中得到讽刺意见。

  42、鼓励读者通过填表或发邮件反馈意见。但要准备处理随之而来的事务——要尽快地回E-mail,增加连接,修改输入错误等等。给通过 E-mail 进行评论的人回感谢信。

  43、在页内告诉读者如果他们在自己的主页内设置一个指向你的连接你不会介意,并表明你也同样会设置一个指向他的主页的连接。每个人都希望有人访问自己的网页,而这种相互支持会鼓励对见解类似的网点的访问。

  44、联机时间是昂贵的,而访问者的注意时间之短是众所周知的。想办法告诉读者下传要用的时间——告诉他们要出现的图像的大小或下传一个文本文件或二进制文件要用多久的时间。为把联机时间减到最少,指出你会给出FTP地点或提供到其他页的连接,读者会欣赏你的这种做法。

  45、利用 Digital 的优秀检索工具 Alta Vista找出谁已建立了指向你的Web的连接。

  46Web上的大多数写作都相当糟糕。由于多数网页都是空话连篇,自我吹嘘,编写粗糙,编辑审核也不存在,好的写作就很突出了。

  47、不要忘记为你的主页加一个描述性的标题,当某个人把它保存在自己的热点目录后能知道这里是什么内容。

  八、设备独立

  48HTML不包括文件显示时用到的字体、段落形式及空白信息。这正是它的意义所在,无论在什么平台上,包括文字终端,你的文件都能成功地显示出来。由此产生出最低命令标准。因此要了解不同的浏览器用不同的空白和字体。

  49、假设你的页面要用某个特定的浏览器阅读时要当心。要是没有鼠标器,让别人按这里是不会有效的,如果你的读者使用 Internet Explorer Spry MosaicNetscape2.0 的插件就不会有效,除非你能保证读者有 Netscape Internet Explorer 兼容的浏览器,否则重新调整过的图像可能会以预想不到的大小显示出来,表格也会很难看(或根本看不见)。在少数浏览器上,你根本不能看Jpeg图像。

  50、不会有很多读者不能处理16位的图像,但是要注意,如果用16(64K)24(1670万色)的调色板制作精巧的背景,你可能会发现使用较老的设备的人只能跳过去。用8位图看彩色背景时会降为可怕的图形。带视卡但 RAM 少于 2M PC 是不能观看图像的。

网站设计和网站建设的65条原则

计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的网站设计专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

  01、明确内容

  如果你想成为一个网站设计者,并正想建一个网站的话,首先应该考虑网站的内容,包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。

  02、抓住用户

  如果用户不能够迅速地进入你的网站,或操作不便捷,网站设计就是失败的。不要让用户失望而转向你的对手的网站。

  03、优化内容

  内容是核心。大约在两年以前,企业网站就像一本广告册子,更槽糕的是,网站使用了大量的图片,似乎要几个世纪才能下载完。

  Chanels网站(www.channels.co.uk)在设计的某些方面是成功的,但是内容太贪乏,并且要花很长时间才能找到所要的东西,因此不能算是一个成功的网站。

  04、快速下载

  没有什么比要花很长时间下载页面更槽糕的了。作为一条经验,一个标准的网页应不大于60K,通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。

  05、网站升级

  时刻注意网站的运行状况。性能很好的主机随着访问人数的增加,可能会运行缓慢。但是,如果你不想失去访问者的话,一定要仔细计划好你的升级计划。

  06、坚持基本原则

  即使你不懂HTML语言,你只需购买一个有版权的所见即所得的网页设计工具,如Adobe PageMillMicrosoft FrontPage Express,就可以创建一个看起来很合理的网站。但是,在设计时,这些软件包虽然不需要HTML,却使网站速度下降。

  为了成功地设计网站,你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案,用Notepad制作网页。

  07、学习HTML

  用HTML设计网站,可以控制设计的整个过程。但是,如果你仅仅是网站设计的新手,你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中,HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式,以便你在把网站发送到Web之前,预览你的网站。

  08、用笔画一个网站的框架

  圣人云:笔比剑更强大。在用计算机之前,用笔画一个网站的框架,显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。

  09在计算机上永远也找不到好的方案——专家忠告

  10、网站地图

  许多设计者把他们的网站地图放在网站上,这种做法,却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息,他们对于你的网站是如何工作的,并没有兴趣。如果你觉得你的网站需要地图,那很可能是需要改进你的导航和工具条。


  11睁大你的眼睛,留意所有的事情

  对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素,确保你的设计是围绕站点浏览进行的。  ——专家忠告

  12、点击规则

  听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。

  13、特殊字体的应用

  虽然你可以在你的HTML中使用特殊的字体,但是,你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面,在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性,这虽然允许你使用特殊的字体,但是仍需要一些变通的方法,以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题,但是只有最新版的浏览器才支持CSS

  14使用切合实际的简便的命名规则。  ——专家忠告

  15、检查错别字

  好的拼写是人们一生中重要的技能。但是遗憾的是,许多设计者都缺少这种技能。确保你拼写正确,并且格外注意平常容易误写的错别字。

  16、避免长文本页面

  在一个站点上有许多只有文本的页面,是令人乏味的,且也浪费Web的潜力。如果你有大量的基于文本的文档,应当以Adobe Acrobat格式的文件形式来放置,以便你的访问者能离线阅读。

  17、不要使用卷滚条

  人们厌恶在网上使用卷滚条。Trouble网站(www.Trouble.co.uk)是一个典型的设计很差的网站。它基于一个浮动的架构,为了阅读所有的文本,浏览者不得不使用卷滚条。

  18、专家最喜爱的Web设计工具

  1.Adobe Photoshop

  2.Macromedia Flash

  3.Adobe Illustrator

  4.Adobe ImageRead

  5.Dreamweaver

  6.Macromedia Fireworks

  7. Allaire Homesites

  8.Microsoft Notepad

  9. Macromedia Director

  10. Lightwave

  11. Macromedia Freehand

  12.其它:Adobe Acrobat ExchangeAllaire ColdFusion,BBEdit,HTMLValidator等。

  19、网站介绍

  你应当有一个很清晰的网站介绍,告诉访问者你的网站能够提供些什么,以便访问者能找到想要的东西。但是,许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息,这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。

  20网站一旦发布,网站设计的优点和缺陷全都公布于世。没有什么法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到多的东西。”——专家忠告

  21、闪烁让人头痛

  通过使用标识可以吸引访问者对你的主页特殊部分的注意,但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站,就少用此方法。

  22、背景颜色

  背景颜色也会产生一些问题,可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。

  23、向前和向后按钮

  应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条,使浏览者能够从每一页上访问网站的任何部分。

  24坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习  ——专家忠告

  25、点击记数器

  不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。

  26、不要用框架

  与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。

  27、去掉图像

  在浏览器中即使去掉了图像功能,也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者,还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字,而不是图像来满足访问者的需要。

  28、重复使用图像

  一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时,在网页上多次使用同样的图像是一个好的方法,并且一旦它们被装入,以后重新载入就会很快。

  29、避免使用过大的图像

  不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。

  30避免使用炫耀的技巧。  ——专家忠告


  31、选择使用Flash动画

  许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源,使网站的操作变得很困难,因此,应该给用户一个跳过使用Flash动画的选择。

  32、尽量少使用Flash插件

  虽然许多Web设计者认为Flash功能很强大,并且Netscape5.0将支持Flash,在使用时不必再下载任何插件。

  但是,最好还是取消使用Flash做各接口的想法。

  33、让用户先预览小图像

  如果不得不放置大的图像在网站上,就最好使用Thumbnails软件,把图像的缩小版本的预览效果显示出来,这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。

  34、动画与内容应有机结合

  确保动画和内容有关联。它们应和网页浑然一体,而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。

  35、慎用声音

  声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。

  36、少用JavaAxtiveX

  在网页上应尽量少使用JavaAxtiveX。因为并不是每一种浏览器都需要使用它,只有那些NetscapeExplorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题,过分地使用Java,会使Mac崩溃。

  37、设计成功的网站

  www.bmw.co.uk  ——内容和关联性很好

  www.yugop.com  ——图形下载很快

  www.comicrelief.org.uk  ——设计简单明了

  www.dreamcast-europe.com  www.newsunlimited.co.uk

  www.newbeetle.com

  www.swoon.com  www.viaduct.co.uk

  38、慎用插件

  在Web设计中,如果依赖于一些特别的插件,会减少网站的吸引力。如果访问者没有所要求的插件,将不得不到其它站点去下载,这样访问者有可能就不会返回了。

  39、使用著名的插件

  如果网站上有声音或视频,要保证使用者通过使用某个知名的插件,能够听到或看到。许多站点使用QuickTimeRealPlayShockwave插件。因为,许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件。

  40、使用先进技术

  跟上新的技术。Web技术的进步绝不会停止,所以应花一些时间来研究新产品和开发技术。

 

  41、自己创建图像和声音

  使用你自己创建的或从某个商业网站上下载的图像和声音。在制作商业网站时,应该花足够的资金来创建图形,以增强公司的宣传。——专家忠告

  43、平台的兼容性

  要为用户着想,必须最少在一台PC和一台Mac机上测试你的网站,看看兼容性如何。

  44、用软件分析工具找错

  使用软件分析工具检查HTML。软件分析工具Doctor HTML能够帮助检查HTML中的任何问题。如果你有许多网页需要检查,可选用软件分析工具。在网址www.weblint.org/validation.html中,你能够找到更多有效的HTML工具。

  45、避免错误链接

  网站中可能与其它一些有用的站点作了链接。但是,如果在你的网页上有链接,一定要经常检查它们,保证链接有效。链接的网站可能很多,但不要链接到与你的内容无关的网站上。

  46、给观众成熟的东西

  如果网站没有完成,就不要发送到Web上。所有好的网站都是在幕后完成之后再发布的。

  47、在搜索引擎上登记网站

  任何一个人发现你的网站的机会都很少,除非你把你的网站在主要的搜索引擎上进行登记。

  48、设计一个留言板

  浏览者愿意把时间花在好的网站上,所以最好有一个留言本,这能激励访问者再次回到你的网站,还有助于扩充网站内容。

  49、测试网站

  在你的网站正式发布之前,必须进行有用的测试。在设计网站时要使用最新的软件,但是不要忘了人们并不会使用最新的浏览器,所以要照顾到以前的浏览器。在上载网站时还要测试所有的链接和导航工具条。

  50尽你所能反复测试所设计的网站,直到你不能发现新的东西为止”——专家忠告

  51、演示即将发布的网站

  在网站正式运行之前,让人演示它。演示中人们会告诉你所设计的网站是否容易使用。

  52、动画点缀

  网页上的动画最多只用一个。

  53倾斜的按钮看起来不会太好,最好不要使用。”——专家忠告

  54、内容组织

  在开始创建新的网页前,仔细考虑网站内容的组织。决定好想让访问者浏览的内容,然后设计导航系统。

  55空白万岁

  注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页,即使有足够的空间,在设计时也应该避免使用。

  56利用空白去吸引注意力。

  为了吸引眼球,Web设计者使用各种方法, 比如:闪烁、旋转等,但是利用空白会吸引更多的注意力。”——专家忠告

  57、图像压缩

  为了保持小的图像,可以使用类似GIF向导的程序,它能自动对图像进行压缩。先声明图像的大小

  在图像显示之前最好能详细说明图像大小属性,可以在IMG标签中保存这个属性。这可以使网页显得很流畅,因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

  58、设计失败的网站

  www.boo.com

  ——在它上面找一件T恤衫要花一个小时;

  ——给顾客承诺的服务太多,但真正实现的太少;

  ——二年以前的设计水平,忽视了顾客的需要;

  www.miniheroes.co.uk

  ——不吸引人,主页太雷同

  www.saturn.com

  ——设计太差

  www.e13.com.

  ——没有新意

  www.song.com.

  ——导航不知所云

  59、图像大小属性

  可以在IMG标签中保存这个属性。这可以使网页显得很流畅,因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

  60、用户注册

  如果能知道谁浏览了网站以及是怎样浏览网站的,那么就能得到大量有用的信息。但是,要求访问者在浏览网站之前进行注册,这样做是要冒风险的,因为这将赶走一批不愿意注册的人。获得信息的另一种方法是进行有奖竞猜或金钱奖励,让用户能主动填一些信息反馈表。

  61、使网站具有交互功能

  在网站上提供一些回答问题的工具,使得访问者能从网站上获得交互的信息。

  62、图片更新

  尽可能经常更换网站上的图片,人们更愿意点击的是图片而不是文本。

  63、在网站上提供游戏

  游戏是很好的交互工具,它是使访问者能再次光顾网站的好方法。

  64、挑选工具软件

  仔细选择Web设计工具。保证使用自己最想要的、自我感觉最好的软件。

  65、使用最新版本的软件

  尽量使用Web设计软件的最新版本,还应当能被授权进行免费或便宜的

网站的整体风格和创意设计

网站的整体风格及其创意设计是站长们最希望掌握,也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。当我们说:"这个站点很cool,很有个性!那么,是什么让你觉得很cool呢?它到底和一般的网站有什么区别呢?本文试图用最简明的语言来说明: 

  1.风格是什么,如何树立网站风格? 

  2.创意是什么,如何产生创意? 

  风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。 

  这个整体形象包括站点的CI(标志,色彩,字体,标语),版面布局,浏览方式,交互性,文字,语气,内容价值,存在意义,站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的,IBM是专业严肃的。这些都是网站给人们留下的不同感受。 

  风格是独特的,是站点不同与其他网站的地方。或者色彩,或者技术,或者是交互方式,能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络(century.2000c.net)的黑白色,网易壁纸站的特有框架,即使你只看到其中一页,也可以分辨出是哪个网站的。 

  风格是有人性的。通过网站的外表,内容,文字,交流可以概括出一个站点的个性,情绪。是温文儒雅,是执著热情,是活泼易变,是放任不羁。象诗词中的豪放派婉约派,你可以用人的性格来比喻站点。 

  有风格的网站与普通网站的区别在于:普通网站你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量大小,浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识,比如站点有品位,和蔼可亲,是老师,是朋友。 

  看了以上描述,你可能对风格是什么可能依然模糊。其实风格就是一句话:与众不同! 

  如何树立网站风格呢?我们可以分这样几个步骤: 第一,确信风格是建立在有价值内容之上的。一个网站有风格而没有内容,就好比绣花枕头一包草,好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。 
这是最基本的,无须置疑。 

  第二,你需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路: 

  1.如果只用一句话来描述你的站点,应该是:_____________ 
  参考答案: 
  有创意,专业,有(技术)实力,有美感,有冲击力 


  2.想到你的站点,可以联想到的色彩是:________________ 
  参考答案: 
  热情的红色,幻想的天兰色,聪明的金黄色 


  3.想到你的站点,可以联想到的画面是:________________ 
  参考答案: 
  一份早报,一辆法拉利跑车,人群拥挤的广场,杂货店 


  4.如果网站是一个人,他拥有的个性是:________________ 
  参考答案: 
  思想成熟的中年人,狂野奔放的牛仔,自信憨厚的创业者 


  5.作为站长,你希望给人的印象是:____________________ 
  参考答案: 
  敬业,认真投入,有深度,负责,纯真,直爽,淑女 


  6.用一种动物来比喻,你的网站最象:__________________ 
  参考答案: 
  猫(神秘高贵),鹰(目光锐利),兔子(聪明敏感),狮子(自信威信


  7.浏览者觉得你和其他网站的不同是:__________________ 
  参考答案: 
  可以信赖,信息最快,交流方便, 


  8.浏览者和你交流合作的感受是:______________________ 
  参考答案: 
  师生,同事,朋友,长幼。 

  你可以自己先填写一份答案,然后让其他网友填写。比较后的结果会告诉你:你网站现在的差距,弱点及需要改进的地方。 

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


  经过第二步印象的的量化后,你需要进一步找出其中最有特色特点的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化,宣传。例如:再次审查网站名称,域名,栏目名称是否符合这种个性,是否易记。审查网站标准色彩是否容易联想到 
这种特色,是否能体现网站的性格等等。具体的做法,没有定式。我这里提供一些参考: 

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

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

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

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

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

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

  7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点,可以使用,.☆※(区位码里自己参看)等等。虽然很简单的一个变化,却给人与众不同的感觉,(为什么我没有想到呢?

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

  9.展示你网站的荣誉和成功作品。 

  10.告诉网友关于你的真实的故事和想法。 

  风格的形成不是一次定位的,你可以在实践中不断强化,调整,修饰,直到有一天,网友们写信告诉你:我喜欢你的站点,因为它很有风格.

posted @ 2008-12-04 13:42  KevinWang  阅读(438)  评论(0编辑  收藏  举报