設計網(wǎng)站中有哪些關(guān)鍵技巧？有哪些陷阱？在這里，世界上一流的網(wǎng)站設計專(zhuān)家，讓你共享他們的秘密，告訴你：使網(wǎng)站賦予情趣的訣竅、應該避免做什么、應使用什么工具軟件以及他們喜愛(ài)和厭惡的網(wǎng)站。

　　01 明確內容

　　如果你想成為一個(gè)網(wǎng)站設計者，并正想建一個(gè)網(wǎng)站的話(huà)，首先應該考慮網(wǎng)站的內容，包括網(wǎng)站功能和你的用戶(hù)需要什么。你的整個(gè)設計都應該圍繞這些方面來(lái)進(jìn)行。

　　02 抓住用戶(hù)

　　如果用戶(hù)不能夠迅速地進(jìn)入你的網(wǎng)站，或操作不便捷，網(wǎng)站設計就是失敗的。不要讓用戶(hù)失望而轉向你的對手的網(wǎng)站。

　　03 優(yōu)化內容

　　內容是核心。大約在兩年以前，企業(yè)網(wǎng)站就像一本廣告冊子，更槽糕的是，網(wǎng)站使用了大量的圖片，似乎要幾個(gè)世紀才能下載完。

　　Chanels網(wǎng)站（www.channels.co.uk）在設計的某些方面是成功的，但是內容太貪乏，并且要花很長(cháng)時(shí)間才能找到所要的東西，因此不能算是一個(gè)成功的網(wǎng)站。

　　04 快速下載

　　沒(méi)有什么比要花很長(cháng)時(shí)間下載頁(yè)面更槽糕的了。作為一條經(jīng)驗，一個(gè)標準的網(wǎng)頁(yè)應不大于60K，通過(guò)56K調制解調器加載花30秒的時(shí)間。有的設計者說(shuō)網(wǎng)頁(yè)加載應在15秒內。

　　05 網(wǎng)站升級

　　時(shí)刻注意網(wǎng)站的運行狀況。性能很好的主機隨著(zhù)訪(fǎng)問(wèn)人數的增加，可能會(huì )運行緩慢。但是，如果你不想失去訪(fǎng)問(wèn)者的話(huà)，一定要仔細計劃好你的升級計劃。

　　06 堅持基本原則

　　即使你不懂HTML語(yǔ)言，你只需購買(mǎi)一個(gè)有版權的所見(jiàn)即所得的網(wǎng)頁(yè)設計工具，如Adobe PageMill 或 Microsoft FrontPage Express，就可以創(chuàng )建一個(gè)看起來(lái)很合理的網(wǎng)站。但是，在設計時(shí)，這些軟件包雖然不需要HTML，卻使網(wǎng)站速度下降。

　　為了成功地設計網(wǎng)站，你必須理解HTML是如何工作的。大多數的網(wǎng)站設計者建議網(wǎng)絡(luò )新手應從有關(guān)HTML的書(shū)中去尋找答案，用Notepad制作網(wǎng)頁(yè)。

　　07 學(xué)習HTML

　　用HTML設計網(wǎng)站，可以控制設計的整個(gè)過(guò)程。但是，如果你僅僅是網(wǎng)站設計的新手，你應該尋找一個(gè)允許修改HTML的軟件包。HomeSite4是一個(gè)很好的Web設計工具。在設計過(guò)程中，HomeSite4能幫助你學(xué)習HTML。它還允許你切換到所見(jiàn)即所得的模式，以便你在把網(wǎng)站發(fā)送到Web之前，預覽你的網(wǎng)站。

　　08 用筆畫(huà)一個(gè)網(wǎng)站的框架

　　圣人云：筆比劍更強大。在用計算機之前，用筆畫(huà)一個(gè)網(wǎng)站的框架，顯示出所有網(wǎng)頁(yè)的相互關(guān)系。計劃好你的用戶(hù)如何以最少的時(shí)間瀏覽你的網(wǎng)站。

　　09 “在計算機上永遠也找不到好的方案”。 ——專(zhuān)家忠告

　　10 網(wǎng)站地圖

　　許多設計者把他們的網(wǎng)站地圖放在網(wǎng)站上，這種做法，卻是弊大于利。絕大部分的訪(fǎng)問(wèn)者上網(wǎng)是尋找一些特別的信息，他們對于你的網(wǎng)站是如何工作的，并沒(méi)有興趣。如果你覺(jué)得你的網(wǎng)站需要地圖，那很可能是需要改進(jìn)你的導航和工具條。

　　11 “睜大你的眼睛，留意所有的事情。對最不相關(guān)的東西的觀(guān)察可以得到最好的靈感。觀(guān)察一個(gè)站點(diǎn)的結構和設計。理解站點(diǎn)結構的關(guān)鍵元素，確保你的設計是圍繞站點(diǎn)瀏覽進(jìn)行的?！?/SPAN> 　　 ——專(zhuān)家忠告

　　12 點(diǎn)擊規則

　　聽(tīng)說(shuō)過(guò)3次點(diǎn)擊規則嗎？對于小型網(wǎng)站，在你的主頁(yè)上，沒(méi)有任何一條信息，需要點(diǎn)擊次數超過(guò)3次的。對于大型網(wǎng)站，使用導航和工具條來(lái)改善操作。

　　13 特殊字體的應用

　　雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪(fǎng)問(wèn)者在他們的計算機上將看到什么。在你的計算機里看起來(lái)相當好的頁(yè)面，在另一個(gè)不同的平臺上看起來(lái)可能非常糟糕。一些網(wǎng)站設計員喜歡使用來(lái)定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪(fǎng)問(wèn)者的計算機上不能顯示。級聯(lián)風(fēng)格表CSS有助于解決這些問(wèn)題，但是只有最新版的瀏覽器才支持CSS。

　　14 “使用切合實(shí)際的簡(jiǎn)便的命名規則?！?/SPAN> 　　 ——專(zhuān)家忠告

　　15 檢查錯別字

　　好的拼寫(xiě)是人們一生中重要的技能。但是遺憾的是，許多設計者都缺少這種技能。確保你拼寫(xiě)正確，并且格外注意平常容易誤寫(xiě)的錯別字。

　　16 避免長(cháng)文本頁(yè)面

　　在一個(gè)站點(diǎn)上有許多只有文本的頁(yè)面，是令人乏味的，且也浪費Web的潛力。如果你有大量的基于文本的文檔，應當以Adobe Acrobat格式的文件形式來(lái)放置，以便你的訪(fǎng)問(wèn)者能離線(xiàn)閱讀。

　　17 不要使用卷滾條

　　人們厭惡在網(wǎng)上使用卷滾條。Trouble網(wǎng)站（www.Trouble.co.uk）是一個(gè)典型的設計很差的網(wǎng)站。它基于一個(gè)浮動(dòng)的架構，為了閱讀所有的文本，瀏覽者不得不使用卷滾條。

　　18 專(zhuān)家最喜愛(ài)的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,HTML Validator等。

　　19 網(wǎng)站介紹

　　你應當有一個(gè)很清晰的網(wǎng)站介紹，告訴訪(fǎng)問(wèn)者你的網(wǎng)站能夠提供些什么，以便訪(fǎng)問(wèn)者能找到想要的東西。但是，許多設計者都沒(méi)有這樣做。有效的導航條和搜索工具使人們很容易找到有用的信息，這對訪(fǎng)問(wèn)者很重要。告訴訪(fǎng)問(wèn)者你所提供的正是他們想要的信息。

　　20 “網(wǎng)站一旦發(fā)布，網(wǎng)站設計的優(yōu)點(diǎn)和缺陷全都公布于世。沒(méi)有什么方法使你能夠比從自己的錯誤、傾聽(tīng)其他人的建議和用戶(hù)反饋意見(jiàn)中學(xué)到更多的東西?！?/SPAN> ——專(zhuān)家忠告

　　21 閃爍讓人頭痛

　　通過(guò)使用標識可以吸引訪(fǎng)問(wèn)者對你的主頁(yè)特殊部分的注意，但這也讓你的訪(fǎng)問(wèn)者頭痛。如果你想使訪(fǎng)問(wèn)者再次光顧你的網(wǎng)站，就少用此方法。

　　22 背景顏色

　　背景顏色也會(huì )產(chǎn)生一些問(wèn)題，可能會(huì )使網(wǎng)頁(yè)難于閱讀。你應當堅持使用白色的背景和黑色的文本，另外還應當堅持使用通用字體。

　　23 向前和向后按鈕

　　應當避免強迫用戶(hù)使用向前和向后按鈕。你的設計應當使用戶(hù)能夠很快地找到他們所要的東西。絕大多數好的站點(diǎn)在每一頁(yè)同樣的位置上都有相同的導航條，使瀏覽者能夠從每一頁(yè)上訪(fǎng)問(wèn)網(wǎng)站的任何部分。

　　24 “堅持你的信念。嚴格遵守各種規則。避免想當然。絕不停止學(xué)習?！?/SPAN> 　　 ——專(zhuān)家忠告

　　25 點(diǎn)擊記數器

　　不要輕易考慮在你的網(wǎng)站上放置一個(gè)醒目的點(diǎn)擊記數器。你設計網(wǎng)站是為了給訪(fǎng)問(wèn)者提供服務(wù)，而不是推銷(xiāo)你自己認為重要的東西。大多數瀏覽者認為計數器毫無(wú)意義，它們很容易被做假，瀏覽者也不想看廣告。如果你顯示你的網(wǎng)站是多么受歡迎，你最好提供一個(gè)鏈接，顯示訪(fǎng)問(wèn)日志。

　　26 不要用框架

　　與記數器一樣，框架在網(wǎng)頁(yè)上越來(lái)越流行。在大多數網(wǎng)站上，在屏幕的左邊有一個(gè)框架。但是設計者立刻就發(fā)現，在使用框架時(shí)產(chǎn)生了許多的問(wèn)題。使用框架時(shí)如果沒(méi)有17英寸的顯示屏幾乎不可能顯示整個(gè)網(wǎng)站?？蚣芤彩沟镁W(wǎng)站內個(gè)人主頁(yè)不能夠成為書(shū)簽。也許更重要的是，搜索引擎常常被框架混淆，從而不能列出你的網(wǎng)站。

　　27 去掉圖像

　　在瀏覽器中即使去掉了圖像功能，也要保證訪(fǎng)問(wèn)者能夠在你的網(wǎng)站上獲得滿(mǎn)意的效果。對于那些使用ISDN連接并且關(guān)掉了圖像功能的訪(fǎng)問(wèn)者，還能獲得好的網(wǎng)頁(yè)加載性能?？梢酝ㄟ^(guò)在網(wǎng)頁(yè)底部提供另外的鏈接和使用替代文字，而不是圖像來(lái)滿(mǎn)足訪(fǎng)問(wèn)者的需要。

　　28 重復使用圖像

　　一些網(wǎng)站由于使用大量不重復的圖像而錯過(guò)了使用更好的技巧的機會(huì )。在創(chuàng )建商標時(shí)，在網(wǎng)頁(yè)上多次使用同樣的圖像是一個(gè)好的方法，并且一旦它們被裝入，以后重新載入就會(huì )很快

。

　　29 避免使用過(guò)大的圖像

　　不要使用橫跨整個(gè)屏幕的圖像。避免訪(fǎng)問(wèn)者向右滾動(dòng)屏幕。占75%的屏幕寬度是一個(gè)好的建議。

　　30 “避免使用炫耀的技巧?！?/SPAN> 　　 ——專(zhuān)家忠告

　　31 選擇使用Flash動(dòng)畫(huà)

　　許多使用比較慢的計算機的訪(fǎng)問(wèn)者發(fā)現動(dòng)畫(huà)圖標很容易耗盡系統資源，使網(wǎng)站的操作變得很困難，因此，應該給用戶(hù)一個(gè)跳過(guò)使用Flash動(dòng)畫(huà)的選擇。

　　32 盡量少使用Flash插件

　　雖然許多Web設計者認為Flash功能很強大，并且Netscape5.0將支持Flash，在使用時(shí)不必再下載任何插件。 　　但是，最好還是取消使用Flash做各接口的想法。 　　33 讓用戶(hù)先預覽小圖像 　　如果不得不放置大的圖像在網(wǎng)站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預覽效果顯示出來(lái)，這樣用戶(hù)就不必浪費金錢(qián)和時(shí)間去下載他們根本不想看的大圖像。

　　34 動(dòng)畫(huà)與內容應有機結合

　　確保動(dòng)畫(huà)和內容有關(guān)聯(lián)。它們應和網(wǎng)頁(yè)渾然一體，而不是干巴巴的。動(dòng)畫(huà)并不只是Macromedia Director等制作的東西的簡(jiǎn)單堆積。

　　35 慎用聲音

　　聲音的運用也應得到警惕。內聯(lián)聲音是網(wǎng)頁(yè)設計者的另一個(gè)禁地。因為過(guò)多地使用聲音會(huì )使下載速度很慢，同時(shí)并沒(méi)有帶給瀏覽者多少好處。首次聽(tīng)到鼠標發(fā)出聲音可能會(huì )很有趣，但是多次以后肯定會(huì )很煩人。使用聲音前，應該仔細考慮聲音將會(huì )給你帶來(lái)什么。

　　36 少用Java 和AxtiveX

　　在網(wǎng)頁(yè)上應盡量少使用Java 和AxtiveX。因為并不是每一種瀏覽器都需要使用它，只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在處理Java時(shí)也存在問(wèn)題，過(guò)分地使用Java，會(huì )使Mac崩潰。

　　37 設計成功的網(wǎng)站

　　www.bmw.co.uk 　　——內容和關(guān)聯(lián)性很好

　　www.yugop.com 　　——圖形下載很快

　　www.comicrelief.org.uk 　　——設計簡(jiǎn)單明了

　　www.dreamcast-europe.com 　　www.newsunlimited.co.uk 　　www.newbeetle.com 　　www.swoon.com 　　www.viaduct.co.uk

　　38 慎用插件

　　在Web設計中，如果依賴(lài)于一些特別的插件，會(huì )減少網(wǎng)站的吸引力。如果訪(fǎng)問(wèn)者沒(méi)有所要求的插件，將不得不到其它站點(diǎn)去下載，這樣訪(fǎng)問(wèn)者有可能就不會(huì )返回了。

　　39 使用著(zhù)名的插件

　　如果網(wǎng)站上有聲音或視頻，要保證使用者通過(guò)使用某個(gè)知名的插件，能夠聽(tīng)到或看到。許多站點(diǎn)使用QuickTime、RealPlay和 Shockwave插件。因為，許多訪(fǎng)問(wèn)者并不愿意浪費很多時(shí)間和金錢(qián)去下載可能僅使用一次的插件。

　　40 使用先進(jìn)技術(shù)

　　跟上新的技術(shù)。Web技術(shù)的進(jìn)步絕不會(huì )停止，所以應花一些時(shí)間來(lái)研究新產(chǎn)品和開(kāi)發(fā)技術(shù)。

　　41 自己創(chuàng )建圖像和聲音

　　使用你自己創(chuàng )建的或從某個(gè)商業(yè)網(wǎng)站上下載的圖像和聲音。在制作商業(yè)網(wǎng)站時(shí)，應該花足夠的資金來(lái)創(chuàng )建圖形，以增強公司的宣傳。

　　 ——專(zhuān)家忠告　　

　　42 平臺的兼容性

　　要為用戶(hù)著(zhù)想，必須最少在一臺PC 和一臺Mac機上測試你的網(wǎng)站，看看兼容性如何。

　　44 用軟件分析工具找錯

　　使用軟件分析工具檢查HTML。軟件分析工具Doctor HTML能夠幫助檢查HTML中的任何問(wèn)題。如果你有許多網(wǎng)頁(yè)需要檢查，可選用軟件分析工具。在網(wǎng)址www.weblint.org/validation.html中，你能夠找到更多有效的HTML工具。

　　45 避免錯誤鏈接

　　網(wǎng)站中可能與其它一些有用的站點(diǎn)作了鏈接。但是，如果在你的網(wǎng)頁(yè)上有鏈接，一定要經(jīng)常檢查它們，保證鏈接有效。鏈接的網(wǎng)站可能很多，但不要鏈接到與你的內容無(wú)關(guān)的網(wǎng)站上。

　　46 給觀(guān)眾成熟的東西

　　如果網(wǎng)站沒(méi)有完成，就不要發(fā)送到Web上。所有好的網(wǎng)站都是在幕后完成之后再發(fā)布的。

　　47 在搜索引擎上登記網(wǎng)站

　　任何一個(gè)人發(fā)現你的網(wǎng)站的機會(huì )都很少，除非你把你的網(wǎng)站在主要的搜索引擎上進(jìn)行登記。

　　48 設計一個(gè)留言板

　　瀏覽者愿意把時(shí)間花在好的網(wǎng)站上，所以最好有一個(gè)留言本，這能激勵訪(fǎng)問(wèn)者再次回到你的網(wǎng)站，還有助于擴充網(wǎng)站內容。

　　49 測試網(wǎng)站

　　在你的網(wǎng)站正式發(fā)布之前，必須進(jìn)行有用的測試。在設計網(wǎng)站時(shí)要使用最新的軟件，但是不要忘了人們并不會(huì )使用最新的瀏覽器，所以要照顧到以前的瀏覽器。在上載網(wǎng)站時(shí)還要測試所有的鏈接和導航工具條。

　　50 “盡你所能反復測試所設計的網(wǎng)站，直到你不能發(fā)現新的東西為止?！?/SPAN> 　　 ——專(zhuān)家忠告

　　51 演示即將發(fā)布的網(wǎng)站

　　在網(wǎng)站正式運行之前，讓人演示它。演示中人們會(huì )告訴你所設計的網(wǎng)站是否容易使用。

　　52 動(dòng)畫(huà)點(diǎn)綴

　　網(wǎng)頁(yè)上的動(dòng)畫(huà)最多只用一個(gè)。

　　53 “傾斜的按鈕看起來(lái)不會(huì )太好，最好不要使用?！?/SPAN> ——專(zhuān)家忠告

　　54 內容組織

　　在開(kāi)始創(chuàng )建新的網(wǎng)頁(yè)前，仔細考慮網(wǎng)站內容的組織。決定好想讓訪(fǎng)問(wèn)者瀏覽的內容，然后設計導航系統。

　　55 “空白萬(wàn)歲”

　　注意留空白。不要用圖像、文本和不必要的動(dòng)畫(huà)GIFs來(lái)充斥網(wǎng)頁(yè)，即使有足夠的空間，在設計時(shí)也應該避免使用。

　　56 “利用空白去吸引注意力。為了吸引眼球，Web設計者使用各種方法，比如：閃爍、旋轉等，但是利用空白會(huì )吸引更多的注意力?！?/SPAN> ——專(zhuān)家忠告

　　 57 圖像壓縮

　　為了保持小的圖像，可以使用類(lèi)似GIF向導的程序，它能自動(dòng)對圖像進(jìn)行壓縮。

　　先聲明圖像的大小

　　在圖像顯示之前最好能詳細說(shuō)明圖像大小屬性，可以在IMG標簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因為瀏覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。

　　58 設計失敗的網(wǎng)站

　　www.boo.com

　　——在它上面找一件T恤衫要花一個(gè)小時(shí)；

　　——給顧客承諾的服務(wù)太多，但真正實(shí)現的太少；

　　——二年以前的設計水平，忽視了顧客的需要；

　　www.miniheroes.co.uk

　　——不吸引人，主頁(yè)太雷同

　　www.saturn.com

　　——設計太差

　　www.e13.com.

　　——沒(méi)有新意

　　www.song.com.

　　——導航不知所云

　　59 圖像大小屬性，可以在IMG標簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因為瀏覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。

　　60 用戶(hù)注冊

　　如果能知道誰(shuí)瀏覽了網(wǎng)站以及是怎樣瀏覽網(wǎng)站的，那么就能得到大量有用的信息。但是，要求訪(fǎng)問(wèn)者在瀏覽網(wǎng)站之前進(jìn)行注冊，這樣做是要冒風(fēng)險的，因為這將趕走一批不愿意注冊的人。獲得信息的另一種方法是進(jìn)行有獎競猜或金錢(qián)獎勵，讓用戶(hù)能主動(dòng)填一些信息反饋表。

　　61 使網(wǎng)站具有交互功能

　　在網(wǎng)站上提供一些回答問(wèn)題的工具，使得訪(fǎng)問(wèn)者能從網(wǎng)站上獲得交互的信息。

　　62 圖片更新

　　盡可能經(jīng)常更換網(wǎng)站上的圖片，人們更愿意點(diǎn)擊的是圖片而不是文本。

　　63 在網(wǎng)站上提供游戲

　　游戲是很好的交互工具，它是使訪(fǎng)問(wèn)者能再次光顧網(wǎng)站的好方法。

　　64 挑選工具軟件

　　仔細選擇Web設計工具。保證使用自己最想要的、自我感覺(jué)最好的軟件。

　　65 使用最新版本的軟件

　　盡量使用Web設計軟件的最新版本，還應當能被授權進(jìn)行免費或便宜的升級。