简洁的想法

 找回密码
 注册
搜索
楼主: admin

建一个成功的网站(整理+原创){

[复制链接]
发表于 2005-8-26 21:06:33 | 显示全部楼层 |阅读模式
建一个成功的网站(整理+原创)

作者:一窍不通
来自:www.im286.com
希望对大家有用
收集了很多资料。
自己写了些。
由于出处太多
就不注明了。
希望作者理解
注明了转的地方就为转载!

~~~~~~~~~~~~~~
OK。开始
~~~~~~~~~~~~~~
(一)我首先想讲的是字体。因为字体关系到你网站给人的舒适度。字体应该清晰、字号按情况处理。比如导航的就应该比一般的字体稍微大一点。。本人建议少使用特殊字体。因为不是每个人都下载了。你在你自己的机子上开是一种效果,而别人看会是另外一种效果。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【转】让你的字体美起来

你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。

  在目前许多的指导中,他们都在诉说,应该加一点声音或者一个说话的场地。的确我们都需要它,但我希望关心更多WEB家里底层的东西,比如如何把字体弄的漂亮些,或者让页面颜色变的活泼些,让访问者增加“看欲”,还有更多你曾经都没有关注的细微之处。今天,我们首先来探讨页面的字体。

一.html中定义字体

  字体的确是很好打交道的,一开始制作页面,它就以默认的样式显示。随着逐步的深入,你会改变一下默认的设置,增大或者减小字体。

一般字体默认的标签格式:<p>田涛</p>

接下来,我们把字体设置为黑体或者宋体字样式,它的标签如下:

<p><font face="黑体">田涛</font></p>

在以上格式里,我们引出了字体的标签元素<font></font>.该标签具有下面三个属性值:

size="..." 设置字体的大小,一般从1到7,它的默认值是+3,每次改变字体都是+3或者-3。

color="..." 字体颜色的设置。定义颜色可以利用RGB的16进制值,比如: color=“#ffffff” 。也可以直接利用颜色英文来定义,比如: color=“white”


face="..." 字体样式的设置,比如:face=“黑体”。或者 face=“黑体,宋体”。后者的格式,每当浏览器访问第一种字体失败后,浏览器就会访问第二种字体,依此类推。

下面是一个完整的字体格式:

<font face="黑体" size="2" color="#FFFFFF">田涛</font>

HTML还提供了以下字体样式标签:

1.六个标题样式

从h1到h6,如:<h1><font face="黑体" size="2">田涛</font></h1>

2.字体风格

斜体字:<em>田涛</em>

粗体字:<strong>田涛</strong>

斜体+粗体字:<strong><em>田涛</em></strong>

3.定义文本

定义大字体

<big>田涛</big>,如果还想增大字体可以采用,<big><big><big>田涛</big></big></big>

定义小字体
<small>田涛</small>或者<small><small><small>田涛</small></small></small>

如果你在字体标签中设置了size="...",那么<big>标签将不起作用。

除了以上常用字体标签元素外,HTML还包含很多其它标签,但不我们不多用。

二.CSS(层叠样式表)改变字体

在过去页面上的字体是一成不变的,静静的呆在那。当DHTML(动态网页)出现后,我们能有更多方式控制字体了。一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后,字体就能产生许多变化。

1.CSS定义字体的标签元素

font-family: 设置字体字族。

<span style="font-family: 黑体, 宋体(GB)">田涛</span>

font-sytle:设置字体类型。

<span style="font-style: normal">田涛</span>

font-weight:设置字体的字重。

<span style="font-weight: bold">田涛</span>

font-size:设置字体大小。

<span style="font-size: 14pt">田涛</span>

font-decoration:修饰文本字体,比如带下划线“underline”。

<span style="text-decoration: underline">田涛</span>

对于以上的字体设置,我们可以采用一个方便的方法:

<span style="font:normal bold 14pt 黑体">田涛</span>

在style定义的次序是:font-style,font-weight,font-size,font-family.

2.CSS定义字体和<font>定义字体的冲突

对于CSS定义字体和<font>定义字体,我们都要注意以下问题,比如有以下字体设置:
<span style="font-family: 宋体(KSC); font-size: 200pt"><font>田涛</font></span>

这时侯字体大小将以font-size: 200pt的定义来设置。但如果你在<font>中加入size属性,比如:

<span style="font-family: 宋体(KSC); font-size: 200pt"><font size="5">田涛</font></span>

这时侯,字体的大小以size的设置为准,font-size: 200pt将不起作用。其它的属性也是一样。如果你无需动态字体,就利用HTML4.0的<font>来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。

3.定义CSS字体属性类

一般我们在制作动态字体时,我们会首先利用CSS定义出页面字体的整个属性,然后在页面中引用,而不用对每段文本进行设置,这也是实现动态字体首先一步。

<html>
<head>
<style type="text/css">
.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; line-height: 17px }
</style>
</head>
<body>
<p class="tt2">田涛</p>
</body>
</html>
在以上代码中,“田涛”两个字引用了.main_2类定义的字体样式。当然你可以在<style></style>中定义不同的字体样式,以便页面中根据不同字体加以引用。比如:
<html>
<head>
<style type="text/css">
.tt1 { font-family:"宋体"; font-size: 15px; font-style: normal; }
.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; }
</style>
</head>
<body>
<p class="tt1">田涛</p>
<p class="tt2">田涛</p>
</body>
</html>
对于CSS(层叠样式表)的更多介绍,请参看《计算机世界报》1998年8月10日第30期F15版文章《学写层叠样式表》或者网站:http://zgrtt.yeah.net/

三.让字体动起来

要让字体动起来,我们可以利用本身CSS的事件或者让JavaScript引发事件。

1.CSS引发事件

例一
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<p><a href="http://zgrtt.yeah.net/">田涛</a></p>
</body>
</html>
link定义的是链接在页面显示的颜色(黑色)及链接没有下划线,visited定义的是单击链接后的颜色(白色),hover定义的是指向链接时的动态颜色。以上实例表示,当指向链接“田涛”后字体颜色从黑色变成蓝色,并加下划线,单击链接后,链接颜色变成白色。

例二
<html>
<head>
<title></title>
</head>
<body>
<p onmouseover="this.style.fontSize=200" onmouseout="this.style.fontSize=100">田涛 </p>
</body>
</html>
以上实例是利用内联改变字体样式,当鼠标指向“田涛”时字体因为定义了this.style.fontSize=200,这两个字放大至200pt,当鼠标移开“田涛”时,因定义了this.style.fontSize=100,这两个字体缩小到100pt.

2.JavaScript引发事件。

<html>
<head>
<style>
H1.italic {font-style:italic}
H1.bold {font-style:bold; }
</style>
</head>
<body>
<script language="JavaScript">
function changeHead() {
if (H1_1.className=="bold") {
H1_1.className="italic" }
else {
H1_1.className="bold";}
}
</script>
<h1 id="H1_1" class="bold" onmouseover="changeHead()" onmouseout="changeHead()">田涛 </h1>
</body>
</html>
在上面的实例当中,我们首先定义了两个CSS类H1.italic和H1.bold,然后利用JavaScript脚本定义函数 changeHead(),最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点,因为你定义了H1两个类H1.italic 和H1.bold,所以当你在引用时,要首先设置class="bold",表示字体以bold样式出现。然后,移动鼠标到“田涛”上,触发了事件一,移开“田涛”时,触发了事件二。

对于动态字体,我们还有很多方法来完善它。只是在考虑利用动态字体时,需要了解不同浏览器会产生不一样的结果。这时侯,就需要不停测试,来找到一个两全其美的方法。最后,希望你在看完这篇文章后,找一点CSS及JavaScript的资料来看,因为它们才是实现所有“梦想”的工具。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
希望上面的内容对大家有用

(二)谈谈网页设计注意。
切忌多且杂乱无章!应该清爽、使人一目了然。不要以为你的内容多就能吸引人。这种想法不大正确。因为有内容不代表有内涵。所以布局一定要合理。导航要好好利用。分栏要清晰。特别注意广告数目和广告位置!!首页调用合适就行了。不必每个栏目都在首页调用~!

还有就是很多朋友说的定位问题。网站定位一定不要过大。一来就要做得多宏伟。包罗万象。这样得网站没有人气支持、没有资金投入的话一定垮台!所以建议选定一个好的方向发展。就好比落伍。就做论坛。定位是网站制作以及其它有关。

还有就是视觉效果。希望下面的文章能对您有用
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【转】网页视觉设计基本技巧
商业网站视觉设计应以为商业目标服务为出发点,你要为人家浏览网站信息提供最大的视觉愉悦。有了这个原则,你才可以正确处理好技术应用程度、图像与文本的关系、颜色与图像的关系、动画图像的使用等等问题。
  网页视觉设计以什么为准绳?一张白纸、一个新开的空白HTML文件,你可以随心所欲地勾划、设计,你该从哪里着手呢?
  视觉设计是好是坏,是最没有一定之规的,一千个人有一千种看法,一万个人就有一万种意见。你觉得很难忍受的错误,很可能是人家的得意之笔;你最欣赏的“卖点”,访客很可能嗤之以鼻,正所谓“众口难调”。
  面对这样的现实,你拿什么做“定盘心”?记住,最要紧的,是如何取悦于你的受众、你的潜在顾客!因为你的站点不是自娱的艺术作品,而是有明确的商业目标,是需要尽量多的人的喜欢、从而争取尽量多的访问量的。只有把握住这个原则,你才能正确处理好有关的各种关系。你可以先从小范围开始,问问周围的朋友,他们看到你网站的第一感觉如何?然后再逐步推广,边征求意见边改,直到代表性差不多为止。
站点不是杂物箱
  一个专业的、有营销意识的站点,应该让访问者(潜在客源)能马上了解到这个站点及其业务是什么。
  绝大多数站点缺乏主旨,没有规划意识,没有连贯性,没有完整性。普遍的现象是,站点像一个杂物箱,自己能找到的、觉得好玩的、时髦的东西全往里塞,没有目标、没有灵魂。
照顾大多数
  很多站点技术挂帅,以为采用的技术越复杂、越时髦越好,因为互联网是年轻人的乐土,所以他们追逐时髦的兴趣也体现到网上。对于以表现自我为主旨的个人主页,这一特点颇有可取之处,然而对于有明确商业目标的站点,那就不一定是好事了。
  如果你的站点为了营销,你的站点就应该照顾绝大多数人的情况,采用最低技术手段以保证有尽量大的传播面。这意味着,能简单则简单,千万不要炫耀技术,那样不会对你的站点带来什么好处。当然,如果你的站点就是推广与互联网相关的新技术的,那是另当别论。即使对这种主旨的站点,最好也该给初级网友一个比较你尖端技术的导引,因为你的目标不就是为了让人家了解乃至消费你的好技术吗?
图像重要还是文本重要?
  这是每个站点都必须面对的问题。流行的观念是,图像比文本重要,一提“站点设计”,大家以为就是“图像设计”或者视觉效果设计。这是对站点设计的肤浅理解。
  其实,站点设计的内涵远不仅是图像设计,它是以实现站点经营战略为目标,对站点各要素展开的综合规划。其内涵包括很多方面,像站点目标、经营策略、读者定位、风格塑造、文本设计、图像设计、营销策划等等,还有像交互性设计、数据结构、绩效评估等也都在其列。
  图像和文本都是用以实现站点经营战略的主要手段,其中图像通过视觉效果引导读者,而文本内容则是决定站点能否吸引人的内核。二者的关系,就像两个相声演员,一个“逗哏”一个“捧哏”。谁“逗哏”谁“逗哏”,则应由站点经营战略的需要而定。
  对于一个以信息内容为主体的站点,文本占突出地位,是“逗哏”的角儿,同时,图像就该起配角作用,属“捧哏”,目的是给读者营造出一些喘息的视觉空间,就像城市建筑群之间绿地、公园的点缀功能一样,同时,图像运用恰当,还可达到增加页面深度的功效。
  对于一个艺术站点特别是视觉艺术类站点,图像就居于主导地位,是“逗哏”,它决定页面、站点的整体结构,因此文本内容就应处于配角地位,为图像“捧哏”。
  总体来看,当然是信息内容为主体的站点居多。看看你的站点,属于哪一类?定好站点的基调之后,再来看二者如何来配合最能实现站点的意图。
  无论二者的关系怎么建构,都有些一般性原则供你借鉴:
(1)图像要小,文本段落要短;
(2)所有图像文件最好采用 alt 标签,其妙处多多,后面还会多次谈到。

颜色与图像
  有一个办法可以既减少图像的使用,又能达到使页面生动、吸引注意的效果。这个办法就是运用背景色块。
  显而易见,颜色是站点视觉设计的关键因素之一。视觉设计的先期工作,就包括确定页面的颜色组合方案。颜色能对受众的情绪、思维产生强烈影响,所以选择暖色还是冷色组合、黑色还是白色背景,对读者必然有很大的导引作用。具体设计时你尽可发挥你的艺术想象力,这里给你提供应该遵循的几条基本技巧:
(1)为照顾大多数网友,最好限定使用 256 色。
(2)使用背景色块,避免使用背景图像。用图像做背景,会降低页面的访问速度,使文本难于阅读,还容易模糊整个站点的主旨。
(3)颜色组合要有个性,同时可使文本易读、图像易于区别开来。
(4)审慎选择颜色组合的情绪意义。举例来说,黑色背景下的红色文本,显得很刺眼,对于像花店这类站点就不合适;白色背景下的蓝色文本,看上去很放松、很宁和,对于像摇滚乐队的站点就显得不够分量。

动画图像
  动画图像的使用一定要慎之又慎,因为它容易造成对读者视觉上的强烈骚扰,同时也很容易制约页面的访问速度。在使用动画图像之前,建议你仔细考虑这些因素:
(1)目标明确。你为什么一定要用动画图像?为浏览方便?强调信息?还是宣传自己身份?如果只是想让你的站点时髦点,那最好别用。
(2)尽量缩减动画的大小。
(3)注意动画是很抢眼的,弄不好画蛇添足。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
好。我接着谈应该注意的问题

很多朋友喜欢加入大量的JAVE程序 以及FLASH 和 图片。用来加强网页的动态效果。个人意见是。JAVE程序不宜多用。因为访问者需要等待的时间特别场。有1-2个就合适了,而且很多访问者没等到你效果出来就换页或者关闭,你的心血就白费了。。FLASH和图片适量就好

【转】单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

好了。如果你遵循以上原则。相信会做得不错的。
如果有什么指教请PM我。。

我继续贴出来。下面的。~
很多朋友苦恼网页内容问题。发展方向。。
希望下面的文章对你有用
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【转】网页文案手法
    听说过“内容为王”(ContentIsKing)的网上生存法则吧?访客会迅速从你的内容、写作技巧和你呈现内容的方式,来判断值不值得在你的站点上投资时间。
  当人们访问你的站点时,他们会立即下意识地判断:这个站点怎么样?值不值得当回事儿?要知道,互联网提供了天下大同的机会,也同时让虚拟世界充斥着数不清的垃圾站点、垃圾信息。
  他们靠什么判断?速度、设计,最根本的,还是内容。听说过“内容为王”(ContentIsKing)的网上生存法则吧?访客会迅速从你的内容、写作技巧和你呈现内容的方式,来判断值不值得在你的站点上投资时间。
  所以,网页文案是极其重要的工作。那么,网页文案有哪些基本技巧呢?
  (1)最吸引人的先说,然后再慢慢展开。或者说,把你的独特内容包裹成一个悬念,吸引人家注意。读者看一篇文章,前三段注意力最集中,如果这“寸土寸金”的前三段用不好,人家就要和你拜拜喽!
  遵从同一法则,做标题更为重要。读者一般只是寻找某些特定的信息,而不是什么都看。他们会掠过一行行文字,捕捉感兴趣的关键词、句子或段落,如果你用清晰的标题指引人家,会使他们浏览起来很便利。
  同理,措辞要讲究,适当使用形容词,吸引力会更大。比方说,“功能强大的新软件包将改变你的一生”,和“新软件包真好”相比,是不是更引人些?
  总之,要有些想像力,花点心思,琢磨琢磨用怎样的文字,才能最大限度地挑起读者的好奇心和注意力。
  (2)内容要使读者在思想上、在视觉上产生愉悦感。你在写作时,要有个“群众”观念,就是说,你的网页可能会被成千上万的人浏览。如果你的内容让人家觉得是专门为他(她)而写,那么,你的站点对他们的吸引力就大得多。别自顾自地讲大道理,实在点、直接点、轻松点,就像和你的一位好朋友面对面聊天一样,让人家看得下去。
  (3)着笔尽量要细致,让人家能在最短的时间内,了解你想呈现给人家什么。给人家一幅清晰的画卷,别云山雾罩的。这一点,要和形容词的使用协调好。
  (4)将读者置于第二人称。比方说,你可以写“你一定很关注北约轰炸我大使馆事件,你知道全中国处在怎样的愤怒之中”,你也可以写“最近北约轰炸我大使馆的事件,使全中国都处在愤怒之中”。两相比较,从吸引注意力的目标出发,前者是不是更好些?因为它视读者为“你”,营造出了较强的参与感。
  (5)开门见山,直接了当。大家都知道,网友的耐心尤其少。你能提供的信息或许对他们有裨益,但如果要人家没完没了地翻下去才能找到,恐怕极少有人有这份耐心。
  (6)越简捷越好。一个句子最好别超过25个字,太长了,会让读者接不上气儿。段落也要尽量简短,6-8句足矣。再长,屏幕上黑乎乎一片,人家眼睛先花了,屏幕上看东西本来就没有读书读报来得舒服。
  (7)要好好装修。写完了,文字很“酷”,标题很“酷”,是不是就可以万事大吉了?NO。先可以好好组织一下段落结构、逻辑关系,别东一榔头西一棒子,要一段一个意思,一部分一个题,全篇从逻辑上要完整、顺畅。要注意给读者留点自由,让人家一看就能放心地选择,哪些感兴趣,哪些可以跳过去。
  再仔仔细细地通读一遍,看有没有错别字、病句、逻辑混乱问题?直到一切OK才行。
  你不必有诺贝尔文学奖得主那样的写作天赋和素养,只要肯花心思琢磨,参照上面的“规矩”,拿出来的东西不说让人刮目相看,至少从营销角度看,会为你赢得超过别人的访问量和注意力资源,不信试试看。
文本内容的表现方式,就像你身体的气味一样。如果人家喜欢它,他们就会走近来。如果人家不喜欢,马上逃之夭夭。你希望人家对你的内容感兴趣?没问题,只要你的内容丰富,而且表现方式让人家的眼睛看起来舒服、大脑接受起来舒服。
  怎样才算最好地表现你的内容呢?说起来也简单,根本的根本,是设身处地为读者着想:想想人家用什么样的浏览器?人家“猫”的速度?怎样的方式最便捷、能使人家在最短的时间内接触到你的内容?别以为你的系统、你的技术全世界通行,你的网站应该尽量考虑所有的网民、考虑他们所有的需求。
  好了,我们现在再从网页文本的工作流程,来看看有哪些需要把握的技巧。
  在设计网页之前,你应该是把你所有的文本内容写好了、编辑好了吧?好,先把每个话题、概念、建议和指导意见等等分门别类,切为不同的段落、部分(注意段落要精简),拿做菜打比方,有点像配菜。
  接下来:做标题。记住,标题就像路牌一样,人家在你的网站上逛来逛去,全靠它指路了。标题要意义清晰、描述性强,有人喜欢用花里胡哨的词汇,是很酷,但会增加人家的负担,让人家多花一份脑筋琢磨究竟是什么。
  巧妙使用列单和表格。把你的想法按逻辑关系,一条条破解出来,列出来,让人家在视觉上一目了然。同样,表格也能起来这样的效果。适于用表格表现的内容,如果是文字,读起来别提多难受了,是吧?
  立体规划内容,将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上,其他的依次就绪。
  然后,你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言,记住尽量别让其一行文字的宽度,横跨整个屏幕。段落一多,这样子看起来很费劲,而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。
  内容主体的文字字号,最好用软件的默认值,这可以保证大多数人的阅读效果。为加强效果,文字大小可以时不时地变一下,不过要适度,别喧宾夺主。
  如何适度地使表现形式活跃起来呢?别用下划线,容易和链接标识相混,误引来点击。可考虑颜色、粗体、斜体等手段。
  记住,每页都得有个“标题”,就是页面最顶端出现的那行文字。有的人不知道这个“TITLE”的重要性,随意来点什么或者根本就忘了。它和文本内容的标题一样,都是你站点的一个个路标,能省吗?
  还有一点,记着考虑如何让人家打印方便。和书刊相比,电脑上的阅读环境要难受得多,所以有条件的读者会选择将网页内容打印下来,躺在沙发上慢慢看。如果资源容许,最好能设定两个版本,一个是正常版本,一个是纯文本的,适合打印。
  怎么算适合打印呢?还是那句话,体贴读者情况。比方说,别把文本拉到全屏的宽度,有的打印机会切去右边不少宽度的内容。又如,颜色也得注意,黄色背景下的红色文本,打印出来就很模糊。最好还是来简单的:白纸黑字。还有,有的浏览器打印带框架(frame)的页面会出错,这个也应该考虑进去。
  最后顺便说说新闻邮件、电子杂志的文本格式问题。
  以前的文章也提到过,要充分利用互联网的通讯便捷特点,留住“回头客”。最方便的,就是通过电子邮件发送站点内容更新通知,再正规一点,发送定期的新闻邮件、电子杂志等等。那么这些电子邮件媒体有什么讲究呢?
  最基本的,要控制每行文字的长度。每行最好在20个字左右,超过30字就有点玄了,有的订户接到的邮件,看起来就是七零八落、参差不齐。文字长度的控制,可以用字处理程序来做,实在不行,就手工来。这是针对纯文本邮件而言的,有人喜欢用HTML格式的,那就借鉴前面说的网页文本技巧。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
网页设计色调很重要的。再转一篇。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【转】网页色彩的搭配
网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?阿捷这里谈一些心得,希望对你有所启发。
首先我们先来了解一些色彩的基本知识:
1.颜色是因为光的折射而产生的。
2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。
3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。
  网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。
  我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。
●非彩色的搭配
  黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。
●彩色的搭配
  色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。(如下图)
红.橙.橙黄.黄. 黄绿.绿.青绿. 蓝绿.蓝.蓝紫.紫.紫红.红
│______│ │___│ │_______│ │______│
  暖色系  中_性系   寒色系   中性系
二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。
红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
  每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。
●网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。
●网页色彩掌握的过程
  随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
○网页色彩搭配的技巧
  文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
在网页配色中,忌讳的是:
1.不要将所有颜色都用到,尽量控制在三种色彩以内。
2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
 楼主| 发表于 2005-8-26 21:07:05 | 显示全部楼层

发2个所谓的秘笈

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【转】主页制作的50个秘诀~
一、内容

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

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

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

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

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

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

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

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

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文件中可以这样写上: <img src="bigpic.jpg" lowsrc="smallpic.jpg" width="600" height="400"> Lowsrc命令指示浏览器在真正的画面载入以前先装载低分辨率的图像,这样就让读者清楚将会出现什么样的画面。(为确保浏览器能即时以合适的大小显示图像,高度和宽度很重要)。

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

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

五、长文件

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

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

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

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

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

六、连接

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

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

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

36、一般来说应该使用相对连接,因为:(1) 这样容易把一组文件移到另一个地方(相对路径名仍然有效),(2) 输入量较少。在同一页的连接项当然应该使用相对地址,因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。

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

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

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

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

七、通则

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

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

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

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

45、利用 Digital 的优秀检索工具 Alta Vista 找出谁已建立了指向你的Web的连接。在高级检索方式下,输入:
link:http://my.site.com/ANDNOTurl:[url]http://my.site.com/[/url]
在简单查询中也可同样做到,输入:
+link:http://my.site.com/-url:[url]http://my.site.com/[/url]

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

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

八、设备独立

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

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

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

制作网页十大诀窍
◎ 预 早 筹 划 ◎
  设计主页未必很艰难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。


◎ 尽 量 精 简◎
  主页的作用好比一本书的封面,是为了吸引用户测览你的网址内容。因此,主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节,或使画面过于复杂。在主页上清楚列出三项要点,例如机构名称、提供的产品或服务、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。 如果你的主页真没有吸引力,很难今他们深入观赏。


◎ 尽 量 简 朴 ◎
  现今大部分用户那是用调制解调器接驳万维网,所以他们一般都要花很多时间等待主页传送到自己的系统。切勿令他们加倍望穿秋水。 主页上的图形应力求简朴, 避免耽搁用户的时间。图像愈大、颜色愈深,传送页面的时间愈长。这并不是说你要完全略去图像不用,只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种,页顶图像最好保持在大约0KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过十至十五秒,很多用户就会等得不耐烦。如果情况许可,最好先测试一中你的主页在稍差的条件下的传送速率,14.4千波特的调制解调器,或透过 Prodigy 等网上服务接驳万维网等。此外、还须注意配合最低档的设备,例如标准的小型显示器,不要假设人人都用高解像度的大荧幕。运用先进测览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。


◎ 善 用 图 像 ◎
  用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。注意图画可以弥补文字之不足,但并不能够完全取代文字。很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。因此,制作主页时,必须注意将图像所戴的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页,确保其传达到所有信息。
 楼主| 发表于 2005-8-26 21:07:31 | 显示全部楼层
继续转。希望对您有用
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【转】网站设计65条原则
设计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的网站设计专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

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

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

03优化内容
  内容是核心。大约在两年以前,企业网站就像一本广告册子,更槽糕的是,网站使用了大量的图片,似乎要几个世纪才能下载完。
  Chanels网站(www.channels.co.uk)在设计的某些方面是成功的,但是内容太贪乏,并且要花很长时间才能找到所要的东西,因此不能算是一个成功的网站。

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

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

06坚持基本原则
  即使你不懂HTML语言,你只需购买一个有版权的所见即所得的网页设计工具,如Adobe PageMill或Microsoft 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 Exchange,Allaire 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少用Java和AxtiveX
  在网页上应尽量少使用Java和AxtiveX。因为并不是每一种浏览器都需要使用它,只有那些Netscape和Explorer的早期版本的使用者才需要它。另外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使用著名的插件
  如果网站上有声音或视频,要保证使用者通过使用某个知名的插件,能够听到或看到。许多站点使用QuickTime、RealPlay和Shockwave插件。因为,许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件。

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设计软件的最新版本,还应当能被授权进行免费或便宜的.
 楼主| 发表于 2005-8-26 21:07:55 | 显示全部楼层

提供几个不错的模板和站点下载~!

收集+整理。尊重作者。内容不改!

超酷超清晰的首页      介绍:.挣扎了整整一个寒假.做完后才发现:酷B了!
下载地址:http://www.25tg.com/xs/outsite/huipu.rar

小旋精品首页           介绍:  2个字:漂亮.你要做的只要添加文字进去就是一个完整的网站了.
下载地址:http://www.25tg.com/xs/outsite/xiaoxun.rar

月下小妖整站程序  介绍:自己在网上下的一个非常漂亮模板首页.然后自己用PS和DW经过不断的加工和美化.并且添加了一个非常好看的在线日记程序.做成一套网站给大家.不仅保证了最初网站的漂亮.而且美化了许多地方.....
下载地址:http://www.25tg.com/xs/outsite/YY.rar
全PSD格式的超眩的精品首页(糖果AV设计)   
介绍:整个页面都是用PS设计的.我只想说:如果你拿这个网页去比赛的话.稳拿第一.
下载地址:http://www.25tg.com/xs/outsite/bg.rar
非常整站程序  介绍:整个风格清晰亦然.美观大方.剥夺了我整整2个星期的时间.中途又进行了许多次的修改.加入了许多非常棒的技术.
下载地址:http://www.25tg.com/xs/outsite/dz.rar
非常整站程序TWO()   介绍:整个网站一目了然.没有任何多余的杂痕.修改起来也相当的方便.当我做出来给我们老师看的时候.第一句就是:马上上传到网站服务器.太漂亮了.
下载地址:http://www.25tg.com/xs/outsite/haier.rar
耍酷整站程序  
介绍:极品+精品+赠送我设计的一个非常帮的网站LOGO.包你喜欢.同时整个网站也无偿提供源图片.
下载地址:http://www.25tg.com/xs/outsite/class.rar
艾擎酷网   
介绍:应朋友之邀.帮他们设计的网上MP3介绍整站程序.你只要稍加修改.无论改成商业网还是个人网站.都非常的适合
下载地址:http://www.25tg.com/xs/outsite/aq.rar
BT下载乐园 (小偷程序)
演示地址:http://bt.25tg.com
说明:
下载地址:http://www.25tg.com/xs/outsite/bt.rar

动感音乐小偷1786
下载地址:http://www.25tg.com/xs/outsite/music.rar
演示:http://mp3.25tg.com
动感音乐小偷.免维护..非常方便.无死连接.

有问题请访问:http:/bbs.25tg.com
以下网站为本人推荐资源网站。大家可以去看看
我的论坛我做主:http://bbs.25tg.com
我爱FLASH:http://flash.25tg.com
精品酷网:http://music.25tg.com
动听音乐http://music.25tg.com
极限免费:http://www.25tg.com
BT下载乐园:http://bt.25tg.com
软件大本营:http://down.25tg.com/
极品明星写真网:http://star.25tg.com[不是huang se的]

演示:
http://www.25tg.com/zuop/zp.htm  这里只有5个演示
这个是BT的演示:bt.25tg.com
这个是音乐的演示:mp3.25tg.com
 楼主| 发表于 2005-8-26 21:08:22 | 显示全部楼层
看看别人的作品

看看成功案例。或许对你有帮助

一下转自菊花论坛:


世界顶尖网页设计师作
世界顶尖网页设计师角逐竞赛152 名网站设计师赢得了 2000 年国际网页设计奖项国际网页设计奖开始于 1998,它是第一个真正的 Web 设计师和图像艺术家组织国际组织来评估认可他们在过去一年中所做的工作。被“连线杂志”评为世界顶尖5大互联网奖项之一,该奖因为它的评奖严格认证和质量保证而具有非凡的价值。在开始的一年中他成立了超过 450 个文档在 30 分类中,包括广告代理、企业、设计工作室和webmasters。在 2000 年竞赛中,共收到来自 22 个不同国家的超过 700 件作品。在 2000 年里面,39 个获奖网页来自美国以外地区,较之上届 1999 年的 21 件有所增加。 大赢家是Elephant Seven ,来自汉堡,获得 6 大奖项; Siegelgale 赢得 5 项。
http://www.2112fx.com/ ;
http://www.3wstudios.com/ ;
http://www.floridakidcare.org/ ;
http://www.greattowait.com/ ;
http://www.floridadental.org/ ;
http://www.selfcare.com/ ;
http://www.room12.com/ ;
http://www.smithandhawken.com/ ;
http://www.pawluk.com/ ;
http://www.cigna.com/ ;
http://www.allunasleep.com/ ;
http://www.luckysurf.com/ ;
http://www.ac.com/ ;
http://www.acg-1.com/ ;
http://myapollo.com/ ;
http://www.8arts.com/ ;
http://www.mtvasia.com/ ;
http://www.pbs.org/warrior ;
http://www.crouchingtiger.com/ ;
http://www.ad2.com/whipped ;
http://www.flyweight.com/ ;
http://www.der-neue-passat.de/ ;
http://www.bcbg.com/ ;
http://www.bronsonhealth.com/ ;
http://www.getrealgirl.com/ ;
http://www.restorationhardware.com/ ;
http://www.peoplesoft.com/ ;
http://www.foxinteractive.com/ ;
http://www.coleweber.com/ ;
http://www.dodgers.com/ ;
http://www.patsajak.com/ ;
http://www.urbanhound.com/ ;
http://www.frankel.com/ ;
http://www.iunits.com/ ;
http://www.disney.com/ ;
http://www.perdue.com/ ;
---------------------------
http://www.porsche-holding.com/ ;
http://www.audioforce.de/ ;
http://www.axel-springer-tv.de/ ;
http://www.movie.de/Fandango ;
http://www.pricap.de/ ;
http://www.cokebei3grad.de/ ;
http://www.boxing.de/ ;
http://espn.go.com/ ;
http://www.ourherotv.com/ ;
http://www.cernyinuitcollection.com/ ;
http://www.corrs.net/ ;
http://www.gen.com/ ;
http://www.discoveryespanol.com/ ;
http://www.thescientificworld.com/ ;
http://www.moen.com/ ;
http://www.einsurancesys/ ;tems.com
http://www.ged.co.za/ ;
http://mrshowbiz.com/ ;
http://movies.com/ ;
http://wallofsound.com/ ;
http://www.gr8.com/ ;
http://www.wellplanet.com/ ;
http://www.thebugstopshere.co.uk/ ;
http://www.peperami.com/ ;
http://www.head-newmedia.com/ ;
http://www.head-space.com/ ;
http://www.hear-it.org/ ;
http://www.hatworld.com/ ;
http://www.fourwindsresort.com/ ;
http://www.hirons.com/ ;
http://www.samsungusa.com/dtv ;
http://www.netaid.org/ ;
http://www.programforgiving.com/ ;
http://www.oneworldjourneys.com/georgia ;
http://www.idea.com/ ;
http://www.iexplore.com/ ;
iframe.com/" target=_blank>http://www.iframe.com/ ;
http://www.cobrausa.com/ ;
http://www.123northwacker.com/ ;
http://www.4intercept.com/ ;
http://www.i-on.com/ ;
  
-----------------------------------------
http://www.elizabetharden.com/ ;
http://www.ivillage.com/ ;
http://www.fxdiamond.com/ ;
http://www.certco.com/prdnsrv/final.html ;
http://kmgi.com/clubessential ;
http://www.lavastorm.com/ ;
http://www.learningresources.com/ ;
http://www.marriott.com/ ;
http://www.bluestreak.com/ ;
http://www.luckylack.ch/ ;
http://www.maybelline.com/ ;
http://www.m-ms.com/ ;
http://vsg.macaw.nl/ ;
http://www.bridgestrategy.com/ ;
http://golden-bearsportswear.com/ ;
http://www.search401k.com/ ;
http://www.mattwolf.com/ ;
http://haworth.com/furncat_new2000/index.com ;
http://lbsummer2000.mc2interactive.com/ ;
http://demo.mrev.com/ ;
http://www.carolyntyler.com/ ;
http://osws.artmuseum.net/enter.html ;
http://www.discoverhongkong.com/ ;
http://services.sunday.com/ ;
http://www.gecapital.com.hk/ ;
http://www.countrychoicenaturals.com/ ;
http://www.nationalgeographic.com/ngm ;
http://www.napasdachurch.com/ ;
http://www.daimlerchrysler.com.mx/ ;
http://www.minacs.com/ ;
http://www.impromptugourmet.com/ ;
http://www.grahamesydney.com/ ;
http://www.ibm.com/fanmail ;
http://www.ibm.com/e-business ;
http://www.us.jaguar.com/ ;
http://www.accessorize.co.uk/ ;
----------------------------------------
http://www.bitesnich.com/ ;
http://spar.at/ ;
http://www.financiallearning.com/ ;
http://www.family-man.com/ ;
http://www.the-hurricane.com/ ;
http://www.mgmgrand/lv ;
http://www.royhsu.com/ ;
http://www.myfamily.com/ ;
http://www.berggruen.com/ ;
http://www.sausageinteractive.com.au/ ;
http://www.legalonline.vic.gov.au/ ;
http://www.eleven22.com/ ;
http://www.rui-camilo.de/ ;
http://www.usm.com/ ;
http://www.mercedes-benz.com/passion ;
http://www.crissyfield.org/ ;
http://www.rcinternational.rccola.com/ ;
http://www.kodak.com/ ;
http://shop.lycos.com/ ;
http://www.craveconference.com/ ;
http://www.iobox.com/ ;
http://www.siegelgale.com/ ;
http://www.treasurypoint.com/ ;
http://www.sagent.com/ ;
http://www.virtgame.com/ ;
http://www.scmv.com/ ;
http://www.smartmoney.com/ ;
http://www.hawaiianair.com/ ;
http://www.usatoday.com/ ;
http://www.usatoday.com/news/politi...s/campfront.htm ;
http://www.usatoday.com/iwpa2000/iwpa2000.htm ;
http://www.jackpot.dk/ ;
http://www.ecco.com/ ;
http://www.aqua.dk/ ;
http://www.petrossian.com/
学习网页设计的网站

1、太平洋电脑网
     http://www.pconline.com.cn/pcedu/sj/wz/
2、梁辛电脑学习中心
      http://www.Ld60.com/pcedu
3、天极Yesky
      http://www.yesky.com/SoftChannel/72351167937511424/index.shtml
4、eNet硅谷动力
      http://www.enet.com.cn/eschool/i ... lelist.jsp?fid=3664
5、网易
     http://tech.163.com/school/
6、中国UI设计网
    http://www.chinaui.com
7.蓝色理想
http://www.blueidea.com
 楼主| 发表于 2005-8-26 21:08:32 | 显示全部楼层
制作个人主页的心得 (别人的)



  网页的制作是一个痛苦的过程,对于一个新手,既想节约时间,又希望能够在网络上证明自己,做出好的网页,的确是比较困难的一件事。其间会走不少的弯路,碰许多的钉子,或许到访的朋友许多都有这种体会。


  主页制作建议采用比较顺手的工具,如Dreamweaver、Frontpage等。推荐使用Dreamweaver。它的所见即所得的制作方式比较适合初学者。制作中可以把HTML方式(“查看”菜单下的“代码”选项)与直接设计相结合,注意应用表格的功能。至于一些小技巧,可等主页成形后再应用。不过对于初学者,“平平淡淡才是真”。
  
  对于主页制作新手来说,分析其它网站的设计结构是个很不错的学习方法。例如你访问到一个认为不错的网页。在网页显示完毕后使用浏览器的“文件”下的“另存为”将那个网页保存在本地电脑里。然后用主页制作工具将其打开。这样你就可以很清楚地看到此网页的设计结构,通过分析和学习你一定能从中得到提高。


  制作主页首先要从制作首页(即你的主页中的第一个页面,也叫索引页)开始。西陆个人主页的默认首页的文件名是 index.html 。所以你需要将制作的首页文件命名为此文件名。首页应结构清晰,易于导航。网站结构象人的骨骼,构筑起网站的整体框架,虽然表现形式各异,但让人迷失终归不好,尤其是内容丰富的网站更应注意。

  以下是制作主页时需要注意的几个问题:

  1.所有的文件名不要使用中文名。否则上传到网上后由于系统无法识别所以会无法显示。
  2.请注意区分大小写字母。建议全部使用小写字母。
  3.网页中尽量不要使用太多的图片及调用程序。这会严重拖慢访问主页的速度。

主页制作完毕后,您可以通过许多方式宣传您的主页。例如直接向网友推荐、在各种论坛中宣传、与一些主页交换友情链接或把自己的主页加入一些搜索引擎等等。
 楼主| 发表于 2005-8-26 21:09:15 | 显示全部楼层

【转】网页制作之“事不过三”

算起来上网也有段时间了,关于做网页笔者总结了些经验,想在这里和大家交流。

  一、主题不可有三个之多

  主题也就是网站所要表示的主要内容,主题要小而精做到,定位小,内容精,如果你想作一个包罗万象的站点,把所有你认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题。

  二、网站的标准色彩不超过3种

  标准色彩是指体现网站形象和延伸内涵的色彩,一般一个网站标准色不超过三种,太多则让人眼花缭乱,标准色彩主要用于网站的标志,标题,主菜单和主色块,给人以整体的感觉,至于其它色彩的使用,只可作为点缀和衬托,绝不能暄宾夺主。

  三、网站的目录结构之三不要

  网站的目录是指你建立网站时创建的目录.目录的结构是一个容易忽略的问题,大多数人在创建站点时都是未经规划,随意创建子目录,目录结构对浏览者并无影响,但对于站点本身的上传和维护,以后内容的扩充和移植有着重要影响。下面再给各位列出三个注意点,希望对站长们有所帮助:  

  不要将所有文件都存放在根目录下
  目录层次不要太深,建议不要超过3层
  不要使用过长的目录名和不要使用中文目录

  四、网站的链接层次结构不要超过三层

  网站的链接结构指网页之间相互拓扑结构,简单的说,每一个网页都是一个固定点,链接则是在两固定点之间的连线。
  层次不要超出三层,只是针对一些个人站点和小网站而言,这样不但能使网站结构清晰,一目了然,而且更便于你网站的日常维护,如果链接目录结构不能控制在三层以内, 建议你在页面里显示导航条,可以帮助浏览都明确自己所处的位置

、首页三条禁忌

  首页中不要出现自我介绍之类的东西。记住,浏览者看你的网页,不是要了解你,而是看网站相关的内容如果你的网站做得好,浏览者自然会想要了解,如果你认为这个很有必要,可以在主页面做个链接,单独做一页来介绍自己。

  不要把“欢迎光临”之类的字眼挂太大。甚至放在首页的主窗口,无论在现时生活中,还是在网站上到处都是这类词语,所以,这是一种让读者厌烦的骚扰,它传达给读者的信息是:如果你阅读本站(页)你会有如何的受益。作者习惯把这类词语在任务栏做成滚动条,这也是目前比较大众的做法。

  最忌“建设中”。大家在浏览网页时,经常碰到这样的事情,花数秒中打开的页面,对方却告诉你“对不起,本栏目建设中,请稍后再来”。碰到这种站点,你能不顿生一般无名的火。在这里告诉大家一种比较常见的解决办法,可以在页面上只做一个标题不要做链接,这样做还可以达到栏目预告的效果。

  六、主页长度限在三个整屏以内

  有的网站主页拉得老长老长,让读者握着鼠标翻半天,别跟读者为难,凡事从人家的角度多想想。一般来说,主页长度应限定在三个整屏以内,一个半屏为最佳。容不下的多分几页就是了。

  七,表格的嵌套层次应在3层左右

  表格在许多的网页中被用于页面排版,表格的嵌套就是在表格里插入表格。做为文字来处理,这样更易于网页版式的定位。但是如果表格层次过多将严重影响网页的下载速度,所以建议各位尽量少的使用复杂的,嵌套层次多的表格。

  八、不要使用过多的字体(三种以内)

  字体太多,则显得杂乱,没有主题,建议最多使用三种字体。。网页中需突出的地方可用不同的字体样式、大小和不同的字体颜色表示。还应注意的一点就是最好使用windows系统自带的字体,因为最终选用什么字体显示是由浏览者的浏览器来决定的。
 楼主| 发表于 2005-8-26 21:09:31 | 显示全部楼层
CSS应用技巧十四例

CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一
点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有
几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
  当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页
中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。

2、CSS的三种用法在一个网页中要以混用吗?
  三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处
理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行
了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方
式、外连文件方式。

3、在Dreamweaver3中如何使外部文件式CSS?
  在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的<head>与
</head>之间加上一句这样的代码:<link rel="stylesheet" href="在这里填上你的CSS文件地址(相对路径+文件
名)" type="text/css"> 就行了。

4、如何用Dreamweaver3快速创建CSS外连式文件?
  对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
  1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定
义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
  2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在<head>与</head>之间的那段定义好的CSS复制
到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
  不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从<head>
后面拖到这个双引号中来,把花括号以外的部分删去就行了。

6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”,好象没什么用,不要可以吗?
  这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。

7、如何给一部分文字加背景色?
  给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色
却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的:
<style type="text/css">
<!--
.bgstyle { background: #FFFFCC}
-->
</style>
  在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。

8、如何给部分文字加背景图像?
  与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
<style type="text/css">
<!--
.imgbgstyle { background-image: url(logo.gif)}
-->
</style>
  在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。

9、如何使页面的背景在文字“滚动”时背景图案静止不动?
  要使背景图案不随文字“滚动”的CSS是这样的:
<style type="text/css">
<!--
BODY { background: purple url(bg.jpg);
    background-repeat:repeat-y;
    background-attachment:fixed  
    }
-->
</style>

10、如何定义字间距?
  在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子:
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>

11、如何给文字加上划线、下划线、删除线和闪烁?
  在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
<style type="text/css">
<!--
.style1 { text-decoration: underline overline line-through blink}
-->
</style>
  其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”
定义的是文字闪烁。

12、如何使网页具有“首行缩进”功能?
  由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉
字,设置好的CSS如下所示:
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
  在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。

13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
  可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码:
<style type="text/css">
<!--
.style1 { margin: 0px 0px 0px 10px}
-->
</style>

14、能给某部分内容加边框吗?
  用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义
的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的
“style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框
为:绿色中粗线的CSS例子:
<style type="text/css">
<!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
-->
</style>
 楼主| 发表于 2005-8-26 21:09:56 | 显示全部楼层
网页设计要决

1.网页应易读

  网站设计最重要的诀窍,恐怕就是你的网页要易读。

  这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起来你的网页来很费劲。一般来说,浅色背景下的深色文字为佳。

  这个原则也意味着,你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。

  另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。

  2.网站导航要清晰

  所有的超链接应清晰无误地向读者标识出来,所有导航性质的设置,像图像按钮,都要有清晰的标识,让人看得明白,千万别光顾视觉效果的热闹的,而让人家不知东西南北。

  链接文本的颜色最好用约定俗成的:未访问的,蓝色;点击过的,紫色或栗色。如果你一定要别出心裁,链接的文本就要想着以什么方式加以突出,比如说加粗体?加字号?两侧加竖标?或者几者兼用。总之,文本链接一定要和页面的其他文字有所
区分,给读者清楚的导向。

  清晰导航还要求:读者进入目的页的点击次数,不能超过三次。如果三次以上还找不到,人家可就没有耐心陪你玩了!

  3.网站要易找

  网上世界黑漆无边,你怎么让人家找到你?很多有些经验的网友知道这个问题的份量,不过对于一波一波兴奋上网的新手,他们脑中的概念大多是:“有了网站,自然有人来”。不怪他们,商家们的欺骗宣传太成功了,他们哪里知道,网上有数不清的网
站像“无人区”一样死寂。

  话扯远了。网站要推广,人家才能找到你,这也就是“阿奇营销”要絮叨的主题。   推广要网上网下立体展开。就网上而言,推广的途径包括搜索引擎、目录指南.导航站点、页眉广告、电子杂志以及交换链接等等。如果你对这些词汇丈二摸不着头
脑,也可以请个网上营销专家帮忙。

  传统推广手段也不能忽略:印刷广告、电台、电视、宣传品、口碑相传等等。当然,因为传统推广手段的成本很高,如何组合最好,要根据你的实情来,力所能及的,尽量做。至少像名片、信封、信头是不是可以?

  4.网页风格要统一

  其实,这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,要统一风格,贯穿全站。这样子读者看起来舒服、顺畅,会对你的网站留下一个“很专业”的印象。

  举个简单例子。如果你在列示一二三四若干条的情况下,在每条前面用黑圆点加强视觉效果,那么其他似地方,也应该用保持同样的风格。色彩斑斓的站点,尤其要注意风格的颜色可以变,不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一。

  很多缺乏编辑、出版背景的网友,很容易忽视这点,特别是网页一多,更容易忘。

  5.页面容量越小越好,别超过75K

  有研究显示,如果一个网站页面的主体在15秒之内显现不出来,访客会很快失去对该站的兴趣。当然,也有例外,比如内容实在太精彩,人家不去不行。再像视觉艺术类站点,也不能以“快”为唯一设计标准。不过,即使这类站点,也该在加个导引页,给读者一个提示,别不理睬人家的心情。

  有人或许要和我抬杠:不见得吧?微软和Sn公司的站点怎么也慢得可怕?没错,就是这样慢,还有人绕开高峰时间去上,谁叫人家那么大的名气呢?如果你的名头没那么响,还是合作一点,放读者一马吧!

  要限定页面的大小,就得从各个角度考虑节省。最大的一头是图像,有的好东西,只得割爱了。想想看,在创意表达、品牌形象、挣钱几个目标之中,哪个最重要?

网页设计师必读 『转』

1、不要先决定网页的外观,然后强迫自已去适应它,应该从你的访客对像,你要传达的讯息以及你的制网目标推导出一个最适合的网页架构。

  2、每页排版不要太疏或用太大的字,尽量避免看你的网页时需要作很大的卷动,要知道在一页的上部分是显眼而宝贵的地方,不要只放着几个粗大的字或图片。

  3、最好不要用800x600以上的分辨率设计网页。常用的分辨率是640x480及800x600。明智的网页设计者是处处照顾浏览者,绝不会炫耀自己有专线、有17寸的显示器等。

  4、不要于每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧,你要考虑到该页内容与广告的比例,摆放的位置亦很重要,不妨多参考别人的做法。广告太多,只会令人烦厌。

  5、不要每页都采用不同的背景图片,以免每次转页都要花时间去下载,采用相同的底色或背景图片还可增加网页一致性,树立风格。

  6、底色或背景图片必须要与文字对比强烈,易于阅读,这并不是要求你永远使用鲜亮的背景配搭深色的文字,但深色背景常要求与主题配合有较多的顾虑,若你的网页是文章式或包含大量文字,不妨在底色与文字的配搭上下些工夫,力求让访者能舒适阅读你的文章。

  7、不要把图片白色当透明,要知道别人的作业系统不一定把内定底色设为白色,解决方法除了真的把该网页的底色设为白色之外,最好还是以图片编辑工具为图片设好透明颜色。

  8、太长的一页要使用内部连结,明智的网页设计者是不会让浏览者看网页时作太大的卷动。常见的内部连结应用例子如FAQ(常见问答)。

  9、中文网页只可设为GB2312 Encoding(编码)或不指明任何Encoding。若不指明则为每中文字之间留一空白,否则于Netscape中不会换行,以Netscape Composer制作网页尤须注意GB2312 的设定,若以其内定“ISO-8859-1”则IE用家只会看到大堆乱码。

  10、不要每页都加上不同的背景音乐,除非你能估计浏览者于该页所逗留的时间比音乐长,否则浏览者会不耐烦于音乐的下载及转接,解决方法是使用「隐含Frame」的方法,令几页或整个网站只播放一首音乐,这样不但避免每次都要下载音乐亦不会有断断续续的现象出现。

  11、发布网页之前,宜捡查所有文件的权限设定,虽然很多ISP都为你预先设定,当涉及写入及执行的文件时,最好亲自设定。要知道文件权限设定的适当与否不只是网页能否被浏览的问题,还涉及安全问题。

  12、在所见即所有的网页编辑器中不要按太多的Space及Enter键,要控制文字或物件的位置,请采用其本身的参数或配合表格、清单和预设格式标记的使用。

  13、要重视每一页网页,把每页都当成首页来制作,为各页加上公司或个人名称、联络方法及这适当的连结,因你没法确定每一访客都只从首页切入你的网站。

  14、不要让你的一行或一段太长,特别是文字式网页,不妨加上显眼的标题或适当的插图,精彩的文章亦要包装,能既精彩又能留住读者才算上乘。

  15、不要滥用计数器,特别是你借用别人伺服器所提供的服务时。不必每页都装上计数器,它不是网页必须的元素。

  16、发布网页之前宜先检查所有连结是否正常,若数量很多,可利用Cycrital Site Updater或Homesite等帮检查,很快便会有结果。

  17、若以文书处理的软件建立HTML网页,切记要另存新档成ASCII 格式,这样写网页的人不多。

  18、若提供任何文件下载,请列明文件下小,若真的很小,则不必,通常访客需要估计下载时间。你也不希望在下载时才知道文件的下小吧。

  19、不要使用新细明及标楷体以外的中文字型,要知道只有很少的访者装有额外字型,虽然浏览器会以新细明来代替作业系统没有有中文字型,但网页的版面会因字、画移位而变得丑陋。

  20、不必要求别人Bookmark你的网页,正如要求别人按你的Banner一样,是不明智的做法,每个人都有发自内心的反叛心理,你可能因此而适得其反,况且你的网页写得好,别人也会主动Bookmark,何必要如此庸俗。

  21、不要自觉或不自觉地把网页制成NC only ,IE Only 或“最好使用 IE”等类型, 和分辨率一样,不必注明“800x600”,永远都是你照顾浏览者,并不是浏览者去迁就你,适当时可使用javascript或CGI自动引导浏览者到适当版本的网页。

  22、小心使用框架(Frame)。框架易学难精,它虽有快速、漂亮和方便更新等优点, 但稍有不慎会适得其反,切勿勉强使用,由于IE及NC对框架属性定义有所差异,公开网页前宜作多方面测试,可能你的框架于IE显示下是漂亮的一页,但于NC可能是最丑陋的。

  23、背景音乐尽量同时使用Bgsound及Embed两种标记,照顾旧版的浏览器,或可使用javascript 分辨浏览器以印出适当的媒体标记。

  24、应用框架Frame 时要加入不支持的提示以提醒旧版的浏览器的用户,亦可以是藏着一没有框架的版本或一个连到另一版本的连结,这样不但照顾到旧版的浏览器,亦有利于登一些寻找引擎。

  25、同一页中不要使用太多的 HR 标记,即水平分隔线,否则你的网页看起来会支离破碎,要达到文件清晰或主次分明,可改变字体的大小、颜色或底色。或采用清单标记,不一定要使用水平线。

  26、不要使用“点选这里”“Click Here”之类的字眼当作连结,正确的做法如:“请 到Microsoft网站看看Windows 98的介绍吧”。

  27、不要勉强使用闪烁文字,指Blink标记,不必说它的被支持问题,这类的闪烁常为浏览者带来紧张和不安,要知道制作网页的首要条件便是要让访客看得舒适,不要因小失大。

  28、使用ImageMap时,不要让关键区域太近或重叠,不要让你的访客猜测关键区域, 如果图片示意不够清楚可加些文字说明,按键的作用只是用以打开另一文件,只要能做到清楚及显眼便足够。

  29、编辑完ImageMap 后不要更动原来图片档案,否则它的关键区域会因相对座标值的更变而失准。
30、在表单中使用Action=mailto 时,要提醒使用者不要期待立即的回应,否则你的访问者便「痴痴地等」或多按几次“Submit”,最好还是使用CGI 吧。

  31、不要让你的表单太长或超过两页,除非访者非填不可,否则他们会不耐烦,在网上要访者主动填写你的表单并不容易,所以花多些心思在表单的设计上是应该的。

  32、使用<PRE>标记时,其内的文字不要太长,因为浏览者可能使用低解像的作业环境,但该文字却不会换行以适应浏览器视窗。

  33、不要在说明标记<!--说明-->中加入其它标记或连结,因为有小数浏览会把它解读出来。适当运用说明标记,对较大型的网页是很重要的。

  34、不要依赖<TABLE>标记中的参数align="CENTER" 将表格置于中间,因为很多浏览器并不支持,你还是需要不厌其烦地加上<CENTER>标记。

  35、关于网页的版权声明一般有三种显示方法,第一是当作一般文字显示于浏览画面,第二是利用说明标记<!-- Copyright -->,第三是利用<META>标记。

  36、登录网页于META Search Engine 时,先以<META>标记于<HEAD>位置加上介绍及关键字,这些资料会为搜索引擎所记录,亦是搜索者所看到的结果。

  37、避免标记交错使用,如:对:<B><I>greenzone</I></B> | 错:<B><I>greenzone</B></I>并不是所有浏览器都如IE一样,善于处理交错及欠缺标记。

  38、制作表单时必须分别以NC及IE作测试。对NC而言,表单各元件如文字框、卷动选单等的高度及其内的文字皆受<FONT>一类的字形标记所影响,尤其是CharacterSet,若设为GB2312的话更要注意NC及IE对各表单元件的大小有不同的显示效果。

  39、安装别人的CGI 程式要事先检查,网上含恶意破坏的CGI 程式是存在的,若你不熟悉CGI,可尝试检查是否含有cd/;/bin/rm-rf*。这两指令的合并亦是“病毒”的一类了。基本上,只到一些出名的CGI 网页下载是不会有问题的。

  40、不要滥用Java Applet。由于Java Applet 先天性慢速,避免在同一页中使用太多或太大的JavaApplet,尤其是装饰用的,简单的动画可采用Animating Gif,而Counter 则采用CGI,一个需30秒去下载的水中倒影不见到比一篇精彩的短文来得吸引。

  41、没有特别的需要不要采用一些额外的Plug-in来制作网页,如Shockwave,RealPlayer 等,就算你提供下载该Plug-in的连结,浏览者示未必有兴趣,你会因此而失去一批访客。每使用一些支持性不高的技巧都要三思,个人网页还可,公司网页相信不会冒险吧。

  42、不必告诉浏览者其所用的浏览器版本及作业系统。很多人利用javascript 在首页显示这些资料,这是亳无意义而且浪费了首页那宝贵的空间,你大可装上一个访客分析的CGI 程式,暗地记下各项浏览者资料作统计用,这才是正确的做法。

  43、没有必要勿要求浏览者输入姓名才能进入网页,这指的不是以密码保护的那种, 而是以javascript 写成,取得你的性名以作称呼用的那种,访客的浏览意欲会因此而减却。

  44、不要用javascript 产生太多的Pop-up 画面,尤其是使用一些如Geocities 之类的免费空间,它本身己有一个Pop-up Banner,若多于一个Pop-up,浏览者通常会感到烦厌。

  45、不要以二进位的格式来传送CGI 程式,否则会多出许多原本没有的空白行,这些空白会造成错误的标头。当然亦不要用ASCII 格式来传送图片档案。

  46、利用CGI 处理中文资料或于其Source Code中加入中文字时,要注意一些含有perl 特殊符号的的中文字,于Debug 时可多一重考虑,。

  47、如果要使用Shockwave时,为支持没有安装此Plug-in的使用者,可使用<NOEMBED>标记,于其间夹著<IMG>标记放著同大小的后备图片,当Shockwave不被显示时便会以此图片代替,免得其它字、画走了位。

  48、加入Java Applet 时可在<Applet> .... </Applet>标记之间加入一些提示字句,照顾那些不能看Java的使用者。

  49、不要依赖Java来处理网页的重要资讯或连结,除非你确定大多数访客都是使用具Java 能力的浏览器。事实上Java用于显示按键或讯息实是大才小用,亦是不得其所。

  50、不要采用javascript 的入网及离网事件,那警告视窗不但令人烦厌,其突然而来的音效亦挺唬人的,可能你的Window没设定音效或没开著Speaker吧。若真的需要,可以利用自动转页,大方得体。

  51、不要在CGI output 部分使用像 $, &, @ 之类的特殊符号,若真的需要,不防于其前加上符号 \。当然要善用CGI Debug 了。

  52、不要将别人的网页变成你的框架中的一个框窗,这样做不但会为浏览者带来不便,且令你的网页更丑陋,而且你亦侵犯了别人的版权,解决及预防的方法是采用连结的target 参数,如target="_top" 或target="new" 等。若重视访者的感受请从每一细节做起。

  53、不要抄袭别人的创作。网络上所有资讯均是公开的,但都是有版权的,若有意引用某人的作品,不妨以邮件询问,征得同意才进行,这是简单又正当的做法。特别是当你利用离线浏览器下载别人的网页或取得别人的程序时,切不可把它当成自己的网页或程序放到网上。

  54、不要将别人正在使用的搜索器、表单及计数器等放到自已的网页中,这样做不但扰乱其正常运作、增加该伺服器的负荷,除非该主人有明示可以连到他的cgi-bin或JavaClass。

  55、不要利用网页散播谣言,中伤他人,网络虽难管制,但本对道德良心,请洁身自爱。维持良好的网络环境,每个人都有责任。

  56、引用Newsgroup、BBS、或其他非电子传媒的文章,切记注明原作者名称及文章来源,若引用别人的网页更要通知作者。
 楼主| 发表于 2005-8-26 21:10:15 | 显示全部楼层
让css使网页图片半透明

你用过css么?当然,我是指你喜欢做网页的话,用过?很好,那你用过它的特效么?没有?那请跟我来。

让我先通俗的介绍一下css,css不属于html,它属于html的辅助语言,在没有css之前,网页是静态的,但自从有了css 后,网页制作的历史就要重写了,css能给网页加入许多你想象不到的动态效果,这也是其中一点而已,因为css中有很多特效,例如我们今天讲的利用css使图片变透明。

也许你会问,GIF图片不是能透明吗?那干嘛还那么麻烦,嘿嘿,GIF是可以透明,但可以半透明么?那很明显是不行的,但css就可以。想学就跟我来。

如果是完全变透明,那么它的意义不大,重要的是它可以令图片半透明,嘿嘿,还不明白么?既然是半透明,学过photoshop的人都应该知道,半透明了,就可以半遮半掩的显示图片下面的元素!我们利用这一点可以做很多效果哦,例如类似烟雾效果啦,当然,如果你肯动动脑筋,更精彩的效果可能都能做的出来。我们今天只讨论如何在Dreamweaver 4中设置与使用这种特效。

Ok,我们现在开始,前提是你得打开Dreamweaver 4,下面是设置步骤:没用过这个工具?晕!快到www.xsheji.com 下载一个吧。

1:在Dreamweaver 4中点windowàcss styles(或按键盘的shift+f11),调出css styles窗口。

2:在css styles窗口中,单击右下角的加号,弹出new style窗口。设置如图:



3:点ok,弹出一个大窗口style definition for .clarity,我们按照下图设置。



也许你已经注意到了Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)这一段代码,里面有很多问号,这需要我们去用参数来代替它,不要看到代码就怕,无非就几个意思,了解后不就那么一回事嘛。要得到好的效果,那么这些用来代替问号的参数可不能马虎,先看看每一样参数的意思我们再继续。

(1):“Opacity”代表透明度水准,范围是0---100,其实就是百分比的意思,如果你想变为全透明,那么就用0代替Opacity后面的问号吧。

(2):“FinishOpacity”就是用来指定结束时的透明度,范围跟Opacity一样(FinishOpacity为可选参数,不想要的话就去掉它吧。

(3):“Style”是指定透明区域的形状特征,0代表统一形状,1代表线形,2代表放射形,3代表长方形。比如我们一般可以写成Style=1。

(4)“startX”与”startY”就是代表渐变效果开始的X与Y坐标,(坐标应该知道是什么吧)一般我们设置为StartX=0, StartY=0(这样就是表示的透明效果是从图片的左上角开始的。)

(5)“FinishX”与“FinishY”当然,这个就是代表渐变效果结束时的横纵坐标了,这里很关键,填什么数值那就要看你的图片的高与宽了,假设我们的图片高与宽分别是100、200像素,那么就可以写成FinishX=200, FinishY=100。(如果你只想要一半的面积是透明,那么可以设置成FinishX=100, FinishY=50)

给下面一个完整代码的给你们参考:(下面的数值我是假设图片高与宽分别是100、200像素)

Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)

4:ok,这时候你应该做的是把你想要的数值把那些讨厌的问号替换掉,设置好这些参数后,就点击ok。设置的步骤到此就算完成了,但设置完了不代表我们就做完了,我们还要把这个效果赋予图片呢。下面介绍如何使用的步骤。

1:在Dreamweaver 4插入一图,假设高为100,宽为200单位是像素(为了能看到效果,我们可以把网页的背景设为红色等鲜明的色彩。

2:再次调出css styles窗口(参见设置步骤1)

3:在css styles窗口中,应该有个clarity,如图指明处:


图3

4:在Dreamweaver 4选中你插入的图。

5:用鼠标单击上图3的指明处。

6:大功告成,你可以按键盘的f12来预览了(注意,这种特效在编辑状态下是不可见的,一定要预览才可见。

怎么样,图片是不是变的半透明了?这教程只起到抛砖引玉的作用,说到底还是要大家掌握了方法后能举一反三。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|小黑屋|Archiver|简洁的想法

GMT+1, 2022-1-28 04:02

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表