如何制作漂亮的網(wǎng)頁(yè)之：網(wǎng)站制作之網(wǎng)頁(yè)技巧

相信眾位網(wǎng)友在網(wǎng)上盡情沖浪時(shí)，一定會(huì)看到不少設(shè)計(jì)獨(dú)特、創(chuàng)意新穎、頁(yè)面誘人的個(gè)人網(wǎng)頁(yè)， 遇到這些網(wǎng)頁(yè)你也一定會(huì)駐足停留、仔細(xì)欣賞一番，同時(shí)腦海中大概也會(huì)有一絲想要制作一個(gè)屬 于自己的個(gè)人主頁(yè)的念頭。如果你確實(shí)有這個(gè)想法，那就請(qǐng)你繼續(xù)看完下面的內(nèi)容，下面提供的 網(wǎng)頁(yè)設(shè)計(jì)技巧一定會(huì)使你大飽眼福，并讓你在以后設(shè)計(jì)自己的主頁(yè)過(guò)程中游刃有余 。好了，說(shuō)了這么多，還是讓我們直接切入正題，和大家一起看看筆者今天帶來(lái)了哪些網(wǎng)站制作技巧吧：

1、設(shè)計(jì)前要有籌劃 設(shè)計(jì)主頁(yè)也許并不是很困難。但這一工作與編制傳統(tǒng)的宣傳品一樣，都需要我們謹(jǐn)慎處理和籌劃。換言之，我們必須首先確定自己需要傳達(dá)的主要信息 ，然后細(xì)意斟酌、把所有意念合情合理地組織起來(lái)；之后是設(shè)計(jì)一個(gè)頁(yè)面式樣，試用于有代表性的用戶，接著重復(fù)修訂，務(wù)求盡善盡美。

2、選擇內(nèi)容要有新鮮感 萬(wàn)維網(wǎng)上不斷有新事物出現(xiàn)、每天都有新花樣。如果你的主頁(yè)從不改變，用戶很快會(huì)厭倦。因此網(wǎng)頁(yè)內(nèi)容的選擇要不落俗套，要重點(diǎn)突出一個(gè)“新”字，這個(gè)原則要求我們?cè)谠O(shè)計(jì)網(wǎng)站內(nèi)容時(shí)不 能照抄別人的內(nèi)容，要結(jié)合自身的實(shí)際情況創(chuàng)作出一個(gè)獨(dú)一無(wú)二的網(wǎng)站 。放眼望去，網(wǎng)上的許多 個(gè)人主頁(yè)簡(jiǎn)直就是"雜貨店"，內(nèi)容包羅萬(wàn)象,題材千篇一律，人人都是"軟件下載",個(gè)個(gè)都有"網(wǎng)絡(luò) 導(dǎo)航"，從頭到尾找不出一絲“鮮”意。所以，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)，要把功夫下在選材上。選材要 盡量做到“少”而“精”,又必須突出“新”，如能堅(jiān)持天天更新的話,我相信這樣的網(wǎng)頁(yè)一定會(huì)受到大家的歡迎。

3、內(nèi)容相對(duì)實(shí)用性大 一個(gè)網(wǎng)頁(yè)盡管設(shè)計(jì)得趣味盎然，引人入勝，但這不是吸引用戶最好的理由。要想最大限度地留住用戶首要的是要讓它有用處。這樣做的一個(gè)很簡(jiǎn)單的辦法是提供相互參與 --讓讀者做一些事情，如報(bào)名獲取定期發(fā)送的通訊，并用某種方式報(bào)答他們的參與，如每周抽獎(jiǎng)或給予下載一些東 西的機(jī)會(huì)。

4、網(wǎng)頁(yè)命名要簡(jiǎn)潔 由于一個(gè)網(wǎng)站不可能就是由一個(gè)網(wǎng)頁(yè)組成，它有許多子頁(yè)面，為了能使這些頁(yè)面有效地被連接起來(lái)，用戶最后能給這些頁(yè)面起一些有代表性的而且簡(jiǎn)潔易記的網(wǎng)頁(yè)名稱 。這樣既會(huì)有助于你以后方便管理網(wǎng)頁(yè)，在向搜索引擎提交你的網(wǎng)頁(yè)時(shí)更容易被別人索引到 。在給網(wǎng)頁(yè)命名時(shí)，最好使 用自己常用的或符合頁(yè)面內(nèi)容的小寫(xiě)英文字母，這直接關(guān)系到頁(yè)面上的連接。

5、確保頁(yè)面的導(dǎo)覽性好 主頁(yè)的其中一個(gè)很重要的功能就是作為導(dǎo)航工具，指引用戶查閱你存儲(chǔ)在網(wǎng)址或其他地點(diǎn)的信息。因此在設(shè)計(jì)主頁(yè)時(shí)，應(yīng)盡量使導(dǎo)覽過(guò)程變得很輕松?；谇逦鞔_和速度的考慮，主頁(yè)上的的聯(lián)接信息將會(huì)使人感到厭煩。因此，你必須在廣度和深度之間求取平衡。如果你的網(wǎng)址上有太多信息，你可能要制作較長(zhǎng)的頁(yè)面或使用更多聯(lián)接層數(shù) ，甚至可能要建立多個(gè)主頁(yè)、使每個(gè)主頁(yè) 載有不同的信息。如果能夠讓用戶在主頁(yè)上以關(guān)鍵字或詞語(yǔ)查找所需的信息，肯定受用戶歡迎 。

6、善用表格來(lái)布局 不要把一個(gè)網(wǎng)站的內(nèi)容象作報(bào)告似的一二三四地羅列出來(lái)，要注意多用表格把網(wǎng)站內(nèi)容的層次性和空間性突出顯示出來(lái)，使人一眼就能看出你的網(wǎng)站重點(diǎn)突出，結(jié)構(gòu)分明。

7、合理設(shè)計(jì)視覺(jué)效果 不必在以頁(yè)面上填滿圖像來(lái)增加視覺(jué)趣味。盡量使用彩色圓點(diǎn) --它們較小并能為列表項(xiàng)增加色 彩活力(并能用于彩色表)。彩色分隔條也能在不擾亂帶寬的情況下增強(qiáng)圖形感 。另外網(wǎng)頁(yè)設(shè)計(jì) 好后，一定要在不同類型的瀏覽器和不同分辨率的情況下測(cè)試主頁(yè) ，例如許多瀏覽器使用640×480 的分辨率，盡管在800×600高分辨率下一些 Web 頁(yè)面看上去很具吸引力，但在 640×480的模式下 可能會(huì)黯然失色。作一點(diǎn)小小的努力，設(shè)計(jì)一個(gè)在不同分辨率和不同類型的瀏覽器下都能正常顯 示的網(wǎng)頁(yè)。

8、排版時(shí)要注意細(xì)節(jié) 別輕易讓文字居中和使用粗體或斜體字符。除了視感混亂之外，很多流覽器不能很好地顯示斜體字，也不能補(bǔ)償由于字母傾斜引起的空白變化 。利用短的段落，加點(diǎn)列示，適當(dāng)?shù)恼麎K引用文字，用水平線分節(jié)，用影象地圖指引主要連接，使你的頁(yè)面能吸引人和容易閱讀。另外筆者提醒 大家注意的是，不要把重要的內(nèi)容排版放到網(wǎng)的結(jié)尾 ，因?yàn)樽x者的視線可能停留在主頁(yè)上面較 多一點(diǎn)，或者有些讀者沒(méi)有耐心往下看那么遠(yuǎn)。

9、善用 GIF 和 JPG 格式的圖象 用戶在網(wǎng)上四處遨游，你必須設(shè)法吸引和維護(hù)他們對(duì)你的主頁(yè)的注意力。萬(wàn)維網(wǎng)的其中一個(gè)最重大資源是其多媒體能力，所以我們無(wú)論如何要善加利用。主頁(yè)上最好有醒目的圖像、新穎的畫(huà)面、美觀的字款，使其別具特色，令人過(guò)目不忘。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮 夸。目前因特網(wǎng)上大多數(shù)使用ＧＩＦ和 Jpeg 交互格式的圖象，因?yàn)榻换ジ袷降膱D像是分級(jí)顯示 出來(lái)的--首先以很低的分辨率顯示，然后逐步提高分辨率，直至最后達(dá)到正常顯示--這種方式有 時(shí)候會(huì)使較大的圖像看起來(lái)好象裝載得快一些 ，實(shí)際上并非如此，但這是一種有益的錯(cuò)覺(jué)。這樣 也便于讀者在圖像裝載的過(guò)程中看到它的模樣 ，如果他們不喜歡或不想看的話就有機(jī)會(huì)中斷傳輸 或轉(zhuǎn)向別的地方。

10、為圖片添加文字說(shuō)明 比如說(shuō)有一張800×600像素的1600萬(wàn)色掃描圖，所占空間約為50K。使用 PhotoShop 這一類的圖象編輯工具對(duì)原圖進(jìn)行重新取樣，比如說(shuō)高度為100像素(為確保瀏覽器能即時(shí)以合適的大小顯示 圖像，高度和寬度很重要。也許為了達(dá)到你自己的要求你得進(jìn)行調(diào)整才能找到最合適的大小 ，但可以從高度除以4～6開(kāi)始)，PhotoShop 會(huì)自動(dòng)計(jì)算新圖象的寬度。保存新圖象，它的大小現(xiàn)在應(yīng) 為8K 或更小。然后在源文件中添加這樣一段 HTML 代碼： ，那么瀏覽器在解釋執(zhí)行 Lowsrc 命 令時(shí)，將要求瀏覽器在真正的畫(huà)面載入以前先裝載低分辨率的圖像 ，這樣就會(huì)讓訪問(wèn)者清楚將會(huì) 出現(xiàn)什么樣的圖片。

11、不宜使用太多的動(dòng)畫(huà) 大家都喜歡用 GIF 動(dòng)畫(huà)來(lái)裝飾網(wǎng)頁(yè)，它的確很吸引人，但我們?cè)谶x擇時(shí)，是否能確定必須 用 GIF 動(dòng)畫(huà)，如果答否，那么就選擇靜止的圖片，因?yàn)樗娜萘恳〉枚?。同樣的尺寸?LOGO， GIF 動(dòng)畫(huà)的容量有5K，而靜止 LOGO 的只有3K。雖然只有2K 之差，但多起來(lái)，就會(huì)影響下載的 速度，所以，如果有些不是必須的，就選擇最小的。

12、閃爍文字不要多用 有的設(shè)計(jì)者想通過(guò)閃爍的文字來(lái)引起訪問(wèn)者的注意是可以被人理解的，但一個(gè)頁(yè)面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感覺(jué) ，反而會(huì)影響用戶去訪問(wèn)該網(wǎng)站的其他內(nèi)容 ，正所謂“物極必反”也。

13、頁(yè)面長(zhǎng)度要適中 當(dāng)一個(gè)頁(yè)面很長(zhǎng)時(shí)就應(yīng)該要注意了，因?yàn)樗膫鬏敃r(shí)間明顯要比較短的頁(yè)面的傳輸時(shí)間長(zhǎng)，太長(zhǎng)的頁(yè)面?zhèn)鬏敃?huì)使訪問(wèn)者在等待中失去耐心 。而且為了閱讀這些長(zhǎng)文本，訪問(wèn)者不得不使用卷滾 條，從而也浪費(fèi)了用戶在網(wǎng)上沖浪的時(shí)間 。如果你有大量的基于文本的文檔，應(yīng)當(dāng)以 AdobeAcrobat 格式的文件形式來(lái)放置，以便你的訪問(wèn)者能離線閱讀，從而節(jié)省寶貴的時(shí)間。

14、Java 程序少用為宜 不要使用大幅面的 Java 程序,能夠用 javascript 替代效果的則盡量不要使用 java.因?yàn)槟壳皝?lái)講 java 的運(yùn)行速度實(shí)在慢的讓人無(wú)法忍受 ，往往使瀏覽者沒(méi)有耐心等頁(yè)面全部顯示出來(lái) ，這樣你的 精心設(shè)計(jì)便毫無(wú)效果啦。

15、整個(gè)頁(yè)面風(fēng)格要一致 你網(wǎng)頁(yè)上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子讀者看起來(lái)舒服、順暢，會(huì)對(duì)你的網(wǎng)站留下一個(gè) “很專業(yè)”的印象。

16、記數(shù)器能不用最好不用 由于計(jì)數(shù)器也是由程序設(shè)計(jì)成的，顯示計(jì)數(shù)器的過(guò)程其實(shí)就是在執(zhí)行一個(gè)程序的過(guò)程，它需要占用用戶寶貴的上網(wǎng)時(shí)間，況且大多數(shù)瀏覽者認(rèn)為計(jì)數(shù)器毫無(wú)意義，它們很容易被做假，瀏覽者歡迎，你最好提供一個(gè)鏈接，顯示訪問(wèn)日志。

17、每個(gè)頁(yè)面都要有導(dǎo)航標(biāo)志 所有頁(yè)面從頭至尾都要使用導(dǎo)航標(biāo)志，尤其是要用 “返回到首頁(yè)”連接?？梢栽诿總€(gè)頁(yè)面都這樣 做。比如在每頁(yè)的頂端(或底部)都有一小串圖標(biāo)，第一個(gè)回到首頁(yè)，第二個(gè)回到章，第三個(gè)回到 節(jié)。如果是圖像導(dǎo)航按鈕，那么要有清晰的標(biāo)識(shí)，讓人看得明白，千萬(wàn)別只顧視覺(jué)效果的熱鬧 ， 而讓人家不知東西南北；而文本導(dǎo)航的鏈接顏色最好用約定俗成的 ：未訪問(wèn)的，藍(lán)色；點(diǎn)擊過(guò)的， 紫色或栗色?？傊?，文本鏈接一定要和頁(yè)面的其他文字有所區(qū)分，給讀者一個(gè)清楚明白的導(dǎo)向 。

18、盡量使用相對(duì)超級(jí)連接 在制作圖象或文本超級(jí)連接時(shí)，盡可能地使用相對(duì)超級(jí)連接，這是因?yàn)檫@樣做網(wǎng)頁(yè)的可移植性比較強(qiáng)，例如把一組源文件移到另一個(gè)地方時(shí)，相對(duì)路徑名仍然有效，而不需要重新修改連接的目標(biāo)地址；另外使用相對(duì)超級(jí)連接時(shí)輸入量也較少，在同一頁(yè)的連接項(xiàng)當(dāng)然應(yīng)該使用相對(duì)地址 ， 因?yàn)槭褂媒^對(duì)地址后可能會(huì)每選擇一個(gè)連接都要把該頁(yè)重新裝載一次 。如果是連接到不直接相關(guān) 的文件時(shí)，使用絕對(duì)路徑比較好，這樣以后要是把源文件移到另外的目錄下就不需更改連接了 。

19、保證超級(jí)連接直觀有效 頁(yè)面中的超級(jí)連接應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁(yè)同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠很直觀地從每一頁(yè)上訪問(wèn)網(wǎng)站的任何部分。

另外特別要避免“請(qǐng)按這里”，任何要“按這里”的人都會(huì)慎重考慮，它是不是正好就在“這里”， 并且連接無(wú)誤。不要讓連接的名稱與連接的 URL 不同，這樣會(huì)使讀者白白地浪費(fèi)時(shí)間。
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國(guó)http://xmjiujiu.cn/