隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國網(wǎng)絡(luò)人口的日益增長，從外行到菜鳥、菜鳥到老鳥、老鳥又成為了一代大蝦，(本人還只是老鳥而已，還未到大俠的境界)，其中不知道發(fā)生了多少的變化……
以前是瀏覽別人的網(wǎng)站，看到整齊的文字和花花綠綠的圖片，真是羨慕極了!后來呢，自學(xué)了Frontpage2000，覺得做主頁其實(shí)也很容易，不就是寫些文章，插點(diǎn)圖片嘛……于是，興致勃勃地寫了個(gè)漂亮的主頁，加了幾個(gè)鏈接，通到大眾軟件、電腦之家……做好站點(diǎn)、上傳、打開IE、在地址欄里打上http://www.xxx.com，再用激動(dòng)到顫抖的手按下回車……
此后鮮花掌聲千千萬，但麻煩也接踵而來，主要是內(nèi)容收集分類困難，更新不便，界面過于簡陋……但筆者并不氣餒，駕著小貓上網(wǎng)找網(wǎng)站制作的教程，DOMN下來拌著方便面和好多個(gè)不眠之夜慢慢啃。終于黃天不負(fù)苦心人，在無數(shù)次的失敗后，筆者漸漸積累起的經(jīng)驗(yàn)反映在個(gè)人站點(diǎn)的不斷發(fā)展中了^_^
由于深深地體會(huì)過自己摸索的痛苦，所以把筆者的建站心得，拿來和眾多同好分享，可惜的是筆者的站點(diǎn)正面臨全面改版，無法留下地址，供大家學(xué)習(xí)參考，水平所限文章中錯(cuò)誤在所難免，還望高手、大俠不吝賜教^_^
注:筆者在這里說的網(wǎng)站指的是個(gè)人申請(qǐng)的免費(fèi)主頁，也就是說不具有商業(yè)性質(zhì)，(其實(shí)很多提供免費(fèi)主頁申請(qǐng)服務(wù)的站點(diǎn)在網(wǎng)友申請(qǐng)前都有規(guī)定，禁止主頁用于商業(yè)用途)，所以筆者在設(shè)計(jì)時(shí)考慮較多的是網(wǎng)友們興趣愛好，而不是注重商品的展示，但總體的設(shè)計(jì)思想和某些技巧也適用于商業(yè)站點(diǎn)，取舍就看您的喜好了。
網(wǎng)站制作除了可以按制作的時(shí)期分為前期規(guī)劃、中期制作、發(fā)布，及后期維護(hù)外，還可以按工作性質(zhì)分成:結(jié)構(gòu)設(shè)計(jì)、資料收集、美工設(shè)計(jì)、宣傳推廣等。
言歸正傳，進(jìn)入主題:
二. 網(wǎng)絡(luò)基礎(chǔ)知識(shí)
首先來了解一下我們平時(shí)說的萬維網(wǎng)是什么?(沒學(xué)過網(wǎng)絡(luò)知識(shí)也沒關(guān)系，筆者會(huì)盡量說的淺顯易懂)
www(world wide web)是指在internet上的許多計(jì)算機(jī)連接在一起而形成的網(wǎng)絡(luò)，這些計(jì)算機(jī)相互或是單向的傳遞信息，(包括文字、程序、圖像、聲音和其他眾多多信息)。
我們?cè)趺丛L問這些信息呢?
通過URL和相關(guān)的Protocol就可以做到了。
URL(Uniform Resource Locator)就是統(tǒng)一資源地址，是URI(Universal Resource Identifier，通用資源標(biāo)識(shí))命名體系規(guī)范中的一個(gè)分支。顧名思義，URL就是幫助我們?cè)诰W(wǎng)絡(luò)上找到需要的資源的“路徑”，舉個(gè)例子:
http://www.company.com/welcome/index.html
這個(gè)地址說明了通過HTTP協(xié)議，能夠在叫www.company.com的主機(jī)上，在路徑“/welcome/”下找到一個(gè)index.html的文件。
Protocol(協(xié)議)里用與internet的是TCP/IP(Transmission Control Protocol/Internet Protocol,傳輸控制協(xié)議/網(wǎng)際互聯(lián)協(xié)議)，TCP/IP最初由DARPA(美國國防高級(jí)研究規(guī)劃局)設(shè)計(jì)，用于國防相關(guān)的工程，現(xiàn)在被廣泛的操作系統(tǒng)所支持，(包括Windows, NT, NetWare, Macintosh等)，成為了通用的網(wǎng)絡(luò)協(xié)議。
HTTP(Hypertext Transfer Protocol，超文本傳輸協(xié)議)是用來在Internet上傳送超文本的傳送協(xié)議，它運(yùn)行在TCP/IP協(xié)議之上。其他常用的協(xié)議還有文件傳輸協(xié)議FTP(File Transfer Protocol)、遠(yuǎn)程登錄協(xié)議Telnet、NEWS以及Gopher等。
HTML(Hypertext Markup Language，超文本標(biāo)識(shí)語言)是WWW上的發(fā)布語言、標(biāo)記性語言或頁面格式定義語言，可以用文本編輯器來制作，我們平時(shí)見到的網(wǎng)頁就是HTML文件。HTML可以插入圖形、音頻、視頻等對(duì)象，使其具有極為豐富的網(wǎng)頁內(nèi)容和很強(qiáng)的可觀賞性，同時(shí)文件本身的體積很小(不包括插入的圖像、聲音之類額定文件)，非常適合在網(wǎng)絡(luò)上傳輸，目前版本是4.0。
基礎(chǔ)培訓(xùn)結(jié)束，準(zhǔn)備進(jìn)入:
三. 前期準(zhǔn)備篇
1.HTML語言*:
先要學(xué)習(xí)HTML超文本語言，也許有人認(rèn)為有了Frontpage2000和Dreamweaver之類的圖形化網(wǎng)頁制作工具就不再需要學(xué)習(xí)HTML語言了，其實(shí)這是個(gè)很普遍的認(rèn)識(shí)誤區(qū)。因?yàn)榧幢阌袕?qiáng)大的軟件，但它們都只能自動(dòng)生成很簡單的HTML代碼，對(duì)于想創(chuàng)作復(fù)雜的網(wǎng)頁結(jié)構(gòu)還不太使用。所以在很多時(shí)候，比如用FrontPage做好一個(gè)網(wǎng)頁后，還經(jīng)常需要直接在網(wǎng)頁的HTML代碼里作修改，加以完善，以求達(dá)到想要的效果。
另外，懂得HTML語言也可以幫助我們看懂別人做的網(wǎng)頁里的結(jié)構(gòu)和特效，從而提高自己的水平，這也是一個(gè)學(xué)習(xí)網(wǎng)頁制作的大好機(jī)會(huì)。建議大家去學(xué)，但如果實(shí)在不愿意，筆者也不勉強(qiáng)。^_^
2.工具的選擇:
除了學(xué)習(xí)一些基本的HTML語言知識(shí)外，一般說來還需要學(xué)習(xí)諸如:網(wǎng)頁制作工具、圖形工具、網(wǎng)頁動(dòng)畫工具、FTP上傳工具等常用的軟件。筆者簡單地來介紹一下:
網(wǎng)頁制作工具:
Frontpage2000*是Microsoft公司的產(chǎn)品，包括在Office2000專業(yè)版的套裝里，支持所見即所得的編輯方式，在站點(diǎn)的管理方面做的很出色。不需要你掌握很深的網(wǎng)頁制作技術(shù)知識(shí)，甚至不需要你了解HTML的基本語法，很適合新手。事實(shí)上，如果你會(huì)使用MS Word的話，你很快就會(huì)學(xué)會(huì)使用FrontPage，并發(fā)現(xiàn)這其實(shí)是一件再簡單不過的事，因它的基本使用方法和Word十分相似。
Dreamweaver*是Macromedia公司的產(chǎn)品，和FrontPage的功能類似，也是圖形化的網(wǎng)頁制作工具，還支持層的操作，并且可以避免生成冗余代碼?，F(xiàn)在，不少網(wǎng)站在招聘網(wǎng)站設(shè)計(jì)人員時(shí)，都要求應(yīng)聘該職位的人員能熟練地操作Dreamweaver，所以立志于將來從事網(wǎng)站制作工作的朋友一定要學(xué)好Dreamweaver才行。
以上工具同時(shí)支持對(duì)HTML源代碼進(jìn)行直接編寫。
Hotdog是純代碼工具，只支持手寫HTML代碼，但由于軟件本身包含的了很多制作網(wǎng)頁時(shí)要用到的基本元素，所以筆者認(rèn)為還是非常順手的，特別對(duì)于熟悉HTML語言的朋友和代碼狂人來說。^_^
圖形工具:
Photoshop5.5*是Adobe公司的產(chǎn)品，是功能非常強(qiáng)大的專業(yè)圖形軟件，可以制作任何你想要的平面效果。其中包含的ImageReady是用于網(wǎng)頁圖片制作的。缺點(diǎn)是體積龐大，操作比較復(fù)雜，非專業(yè)人士很難熟練掌握。
Paint Pro則是一款小巧玲瓏、使用簡便的軟件，功能也很多，基本上可以滿足一般的圖形制作，而且最大的優(yōu)勢是完全免費(fèi)的!
另外，矢量圖形工具有CorelDraw等，可以做出體積很小的矢量圖片，缺點(diǎn)是網(wǎng)頁上無法直接插入顯示。
網(wǎng)頁動(dòng)畫工具:
ImageReady已經(jīng)介紹過了，可以制作GIF89a格式的圖片。隨著圖片幀數(shù)的增加，動(dòng)畫形象會(huì)更豐滿，當(dāng)然體積也會(huì)更大。特點(diǎn)是與Photoshop交換作品方便，缺點(diǎn)是制作的位圖體積較大。
Flash*是Macromedia公司的產(chǎn)品，與Dreamweaver和firework并稱網(wǎng)頁制作三劍客，可以非常方便地制作動(dòng)畫效果，并根據(jù)鼠標(biāo)事件(Event)來引發(fā)一些特效，適合制作交互動(dòng)畫、小游戲。最吸引人的還是作品SWF體積出奇的小，并且可以以插件的形式加入到網(wǎng)頁中。通常幾分鐘的復(fù)雜動(dòng)畫才幾百K，比起AVI格式真有天淵之別，很多在網(wǎng)上傳播的流行音樂的MTV，5分鐘左右連圖像帶歌曲也只有2、3百K，而以壓縮比高著稱的MP3格式光5分鐘的歌曲就要4M呢!Flash在兩年來迅速發(fā)展，相信成為網(wǎng)絡(luò)上廣為接受的標(biāo)準(zhǔn)格式已經(jīng)為期不遠(yuǎn)了。
FTP上傳工具:
制作好的網(wǎng)頁要上傳到提供給我們主頁空間的服務(wù)器后，才能讓網(wǎng)友去訪問。上傳工具將影響到我們對(duì)站點(diǎn)更新維護(hù)的效率。
CuteFTP:老牌的上傳軟件，功能強(qiáng)大，使用方便，支持拖放。
UploadNow!:中文軟件，可以自動(dòng)把本地站點(diǎn)上更新過的文件上傳，避免上傳沒有更新過的文件，節(jié)省的上網(wǎng)的時(shí)間和費(fèi)用。
WS-FTP*:速度特別快，支持拖放，對(duì)有多個(gè)站點(diǎn)要維護(hù)的朋友比較適用。
3.其它技術(shù):
此外，掌握少量的編程技巧和多方面的先進(jìn)技術(shù)也是有益無害的。
首先是腳本語言JavaScript*和Vbscript，JavaScript是Netscape公司的產(chǎn)品，它介于JAVA和HTML之間，是基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并運(yùn)行于客戶端的編程語言。對(duì)于新版本的Netscape Navigator和Internet Explore的兼容性都相當(dāng)?shù)暮谩Ｌ貏e是JavaScript，不允許訪問本地硬盤的安全性和與操作環(huán)境無關(guān)的跨平臺(tái)性也對(duì)它的推廣起了很大的作用，在一定程度上可以代替JAVA完成一些網(wǎng)頁特效。學(xué)過C、C++的朋友會(huì)覺得JavaScript是一種很容易學(xué)的腳本語言。建議先了解DHTML的對(duì)象模型再學(xué)JavaScript。
其次是CGI(Common Gate Interface，通用網(wǎng)關(guān)接口)不同于JavaScript，它運(yùn)行于服務(wù)器端，動(dòng)態(tài)響應(yīng)用戶的操作(包括用戶搜索、提交表單、記數(shù)器等)，可用任何編譯型語言進(jìn)行編寫(如Delphi、C++等)。
ASP(Active Server Pages)是包括HTML標(biāo)記、文本和腳本命令的文件，使用它可以創(chuàng)建動(dòng)態(tài)、交互的 Web 服務(wù)器應(yīng)用程序，并可以組合HTML頁、腳本命令和ActiveX組件以創(chuàng)建交互的Web頁和基于Web的功能強(qiáng)大的應(yīng)用程序。
IDC(Internet Database Connector，網(wǎng)絡(luò)數(shù)據(jù)庫接口)包含于Windows NT Server里的IIS(Internet Information Server)，提供了一種網(wǎng)絡(luò)數(shù)據(jù)庫內(nèi)容得以發(fā)布并可與用戶交互的方法，它實(shí)際上是一個(gè)ISAPI應(yīng)用程序。
ADO(ActiveX Data Object)可以與ASP結(jié)合，以建立提供數(shù)據(jù)資訊的網(wǎng)頁內(nèi)容，只需在網(wǎng)頁面中執(zhí)行SQL指令(Structured Query Language，結(jié)構(gòu)化查詢語言)，讓用戶在瀏覽器界面中輸入、更新和刪除Web服務(wù)器上的數(shù)據(jù)資料。
PHP(Hypertext Preprocessor)與IIS上的ASP相似，是一種HTML內(nèi)嵌式的語言。用 PHP寫出來的Web后端CGI程序，可以很輕易的移植到不同的平臺(tái)上，而且是免費(fèi)的。
XML(Extensible Markup Language，可擴(kuò)展標(biāo)記語言)，是SGML(Standard Generic Markup Language，標(biāo)準(zhǔn)通用標(biāo)記語言)的一個(gè)子集，可以很方便對(duì)結(jié)構(gòu)化數(shù)據(jù)進(jìn)行描述，允許用戶對(duì)自己的標(biāo)記語言進(jìn)行定義，實(shí)際上提供了一個(gè)直接處理Web數(shù)據(jù)的通用方法。
VRML(Virtual Reality Modeling Language，虛擬現(xiàn)實(shí)模型語言)是一種網(wǎng)上虛擬現(xiàn)實(shí)語言，可以實(shí)現(xiàn)實(shí)物虛擬化，由于能在電腦上虛擬真實(shí)的產(chǎn)品，所以對(duì)于商品展示和電子商務(wù)的發(fā)展起到很大的推動(dòng)作用。
WML類似于HTML語言，是信息家電上網(wǎng)瀏覽所使用的，隨著更多的人加入到網(wǎng)絡(luò)中來和信息家電的普及，WML可能發(fā)展到象HTML一樣成為一種標(biāo)準(zhǔn)。
四. 總體規(guī)劃篇
設(shè)計(jì)網(wǎng)站需要考慮的因素非常多，從前期網(wǎng)站開發(fā)時(shí)的設(shè)計(jì)、規(guī)劃，到中期的資料收集、頁面美工，再最后的調(diào)試、發(fā)布、宣傳是一個(gè)龐大的工程，要花費(fèi)大量的時(shí)間和金錢(除非想做一個(gè)臨時(shí)的，只有很少網(wǎng)頁的站點(diǎn))。所以能找些志同道合的朋友一起來做比較現(xiàn)實(shí)，最好大家有各自的特色，每人負(fù)責(zé)自己拿手的方面，管理最熟悉的版面。也可以按別的標(biāo)準(zhǔn)來分工協(xié)作，比如一人收集整理資料，一人做美工，文筆出色的搞創(chuàng)作，外文過硬的做翻譯，工作學(xué)習(xí)不怎么忙的人負(fù)責(zé)維護(hù)，站點(diǎn)的全局結(jié)構(gòu)布局則一起討論決定，總之各取所長，各司其職，各盡所能就是了。
1.站點(diǎn)的訪客定位
只有確定了自己服務(wù)的對(duì)象是誰，才能有的放矢地投其所好，在內(nèi)容選娶美工設(shè)計(jì)、劃分欄目各方面盡力做到合理，并吸引住更多的眼球。就個(gè)人站點(diǎn)而言，目的大多是為了展示自我表現(xiàn)的風(fēng)采，為眾多有共同興趣愛好的朋友(網(wǎng)友)提供其所需的咨詢(如新聞、公告等)和資源(如計(jì)算機(jī)教程、游戲攻略、桌面屏保等)。所以把訪問者定位于和自己年齡相仿的網(wǎng)友是比較合適的(筆者建議的范圍是15~30，其中有學(xué)生和年輕的上班族，是上網(wǎng)的主要人群，而且對(duì)新事物充滿的好奇心，估計(jì)興趣在動(dòng)漫、音樂、小說、軍事、電腦、游戲等方面)，按這部分網(wǎng)友的興趣把內(nèi)容收集起來，加以分類整理就可以大致上確定站點(diǎn)的發(fā)展方向了。當(dāng)然，在站點(diǎn)正式運(yùn)作后，也可以通過調(diào)查表單和E-mail來了解訪問者對(duì)站點(diǎn)的看法和建議，從而及時(shí)做出調(diào)整和修改，讓站點(diǎn)更適合來訪者的口味，具體方法會(huì)在下文中涉及，這里就不重復(fù)了。
2.站點(diǎn)的主題選擇
可選擇的范圍很廣，但建議選自己擅長的或是非常喜歡的，并且立志做到最好。因?yàn)榫W(wǎng)絡(luò)上各種各樣的咨詢信息很多，別人可以輕易的在知名站點(diǎn)查找?guī)缀跛凶约合胍男畔ⅲ赡芤ㄉ喜簧贂r(shí)間或只能找到一部分信息，所以我們要關(guān)注的是怎樣節(jié)省網(wǎng)友的時(shí)間，讓他能更快更便捷的找到想要的(如果能提供他找不到的部分就更好了)，這就是我們和那些知名的大站點(diǎn)所要競爭的地方了。
往往內(nèi)容特別豐富多彩的站點(diǎn)都有一個(gè)致命的弱點(diǎn)，那就是查找信息困難。為什么會(huì)這樣呢?其實(shí)原因很簡單，正是因?yàn)樽⒁饷婷婢愕?，使?nèi)容太多、太雜，網(wǎng)友查一個(gè)消息要點(diǎn)上很多次鼠標(biāo)，而且還會(huì)象進(jìn)了大觀園一樣找不到來時(shí)的“路”。最難的是這個(gè)弱點(diǎn)沒法克服，只能使用導(dǎo)航欄和有條理的索引來緩和。所以筆者不建議大家做這種“面面俱到、什么都有”的站點(diǎn)，就讓那些有錢的大公司去做吧^_^
如果有時(shí)間的話，還可以自己寫些文件，放上去。不管是散文、小說還是軟件教程，甚至是游戲攻略也行，只要有你的特色，相信一定會(huì)被網(wǎng)友所接受。
3.站點(diǎn)整體風(fēng)格的確定
知道了什么樣的人會(huì)來以及要做什么樣的內(nèi)容，就可以確定需要什么樣的風(fēng)格了。如果有美工基礎(chǔ)的話，只要再加上少許的創(chuàng)意，就可以做出非同一般的效果。讓人看一眼就留下深刻印象的站點(diǎn)，無論對(duì)于吸引眼球還是增加回頭率都是大有裨益的。(建議:使用FrontPage2000里設(shè)定的模版——其實(shí)就是Microsoft請(qǐng)專業(yè)美工師為我們?cè)O(shè)計(jì)的站點(diǎn)布局，而且每個(gè)模版都各具特色——相信對(duì)于網(wǎng)站制作的新手動(dòng)手做出自己的個(gè)性，一定會(huì)有很大幫助。)
另外，風(fēng)格(Style)是非常抽象的概念，往往要結(jié)合整個(gè)站點(diǎn)來看，而且不同的人的審美觀都不同，對(duì)于風(fēng)格的喜好也很不同。所以想使每一個(gè)人都滿意是不可能的，重要的是讓自己滿意先(當(dāng)然自己的滿意有很大程度是建立在訪問者滿意上的)，再照顧忠實(shí)的支持者。
建議:如果站點(diǎn)內(nèi)容范圍不太廣，屬于相同的主題，可以考慮整個(gè)站點(diǎn)設(shè)計(jì)為同一種風(fēng)格;但如果各欄目的差異很大，比如站點(diǎn)里既有嚴(yán)肅的軍事欄目，同時(shí)也有輕松活潑的動(dòng)漫欄目，很顯然將這兩者設(shè)計(jì)成各有特色的風(fēng)格會(huì)更使人感覺舒適?？墒遣还苡檬裁达L(fēng)格，都要記得風(fēng)格是為主題服務(wù)的，也就是要讓它做好襯托氣氛的任務(wù)，而不是單純地照搬照抄別人的特色，因?yàn)橐苍S那并不適合你的站點(diǎn)。
4.瀏覽器版本和分辨率
不同的瀏覽器對(duì)網(wǎng)頁會(huì)做出不同的顯示，在Internet Explore里非常漂亮的頁面，用Netscape Navigator顯示可能是一團(tuán)糟。所以即使在現(xiàn)在這種IE一統(tǒng)天下的時(shí)候，也要考慮少數(shù)使用NN的用戶，也許他們正是你的潛在訪客，你總不愿意因?yàn)樽约旱膽卸瓒ニ麄儼?把每個(gè)網(wǎng)頁都放在兩種瀏覽器里看看，有什么問題馬上解決。
如果考慮到IE和NN老版本的兼容性就更好了，因?yàn)橛袑懶碌木W(wǎng)頁技術(shù)(比如框架)老版本的瀏覽器并不支持。
排除在UNIX操作系統(tǒng)下使用的瀏覽器(比如Emacs-W3、Arena、Amaya等)，另外有些瀏覽器使用的是IE內(nèi)核(很多國產(chǎn)的瀏覽器都是)，又或是市場占有率不高(比如Opera、Mozilla Milestone18等)，這里就不一一敘述了。
1024x768，800x600，640x480是使用最多的三種分辨率，一個(gè)網(wǎng)頁能在這三種分辨率里都很好的顯示是最好的，但如果不行的話，請(qǐng)最先考慮800x600，因?yàn)楝F(xiàn)在大多數(shù)人都在使用它。具體做法:可以在網(wǎng)頁里做個(gè)表格，并且把寬度設(shè)置為“100%”，而不是具體的象素值，這樣一來，網(wǎng)頁就會(huì)在不同的分辨率里自動(dòng)調(diào)整。但需要注意的是，這樣設(shè)置后，如果你的表格里又都是文字內(nèi)容的話，只要瀏覽者縮小瀏覽器的窗口，網(wǎng)頁上的內(nèi)容可能會(huì)變得很不協(xié)調(diào)，甚至?xí)茐哪阍人诖男Ч?。解決辦法是在表格里插入一個(gè)寬度為800象素的圖片，把表格“撐滿”，當(dāng)瀏覽器窗口再縮小的時(shí)候?qū)?huì)出現(xiàn)滾動(dòng)條來代替內(nèi)容上的調(diào)整。
5.尊重版權(quán)
互聯(lián)網(wǎng)的精神是“共享”，但這并不意味著你可以隨便抄襲別人的作品，因?yàn)榫W(wǎng)上的作品也是某個(gè)人或某些人辛勤勞動(dòng)的成果，不管在什么情況下剽竊都是不道德的行為!甚至?xí)鸱蓡栴}:在外國版權(quán)問題受到重視是由來已久的，美國的MP3。COM網(wǎng)站因?yàn)橄蚓W(wǎng)友提供無版權(quán)的MP3音樂，而被唱片公司聯(lián)名告上法庭;Napster公司因?yàn)榘l(fā)布了同名網(wǎng)絡(luò)音樂搜索軟件而被告得一敗涂地，現(xiàn)在還在停業(yè)整頓中;中國在版權(quán)問題上的立法和執(zhí)法上歷來都比較薄弱，但著名的原創(chuàng)文學(xué)網(wǎng)站榕樹下，和未經(jīng)授權(quán)就出版榕樹下網(wǎng)站原創(chuàng)作品的某家出版社對(duì)簿公堂，而法院最終判決榕樹下網(wǎng)站勝訴，就意味著中國在版權(quán)問題上也有法可依，有法必依的時(shí)代來到了。所以在轉(zhuǎn)載別人作品的時(shí)候要先征得對(duì)方同意，并在網(wǎng)站上注明作者和其他相關(guān)信息，“先斬后奏”、甚至“光斬不奏”的做法只會(huì)害了自己!
五. 具體細(xì)節(jié)篇
1.導(dǎo)航欄的設(shè)計(jì)
每次增加新的欄目或是對(duì)原有欄目的調(diào)整，都要對(duì)所有的頁面更新。剛開始可能還算輕松，因?yàn)闆]幾個(gè)頁面，但當(dāng)有幾十、幾百個(gè)網(wǎng)頁后，這工作量實(shí)在太大了!如果偷懶只更新幾個(gè)主要的網(wǎng)頁，訪問量就會(huì)劇減。
筆者首先想到的是FLASH可以做出漂亮的導(dǎo)航按鈕，所有的頁都用一樣的導(dǎo)航欄，以后只要更新這個(gè)FLASH動(dòng)畫就可以使整個(gè)網(wǎng)站的頁面都得到更新。但實(shí)際使用后發(fā)現(xiàn)FLASH造成網(wǎng)頁的體積過大，在加上網(wǎng)站LOGO，商業(yè)BANNER……使網(wǎng)頁變的臃腫不堪。
這辦法不太好，于是筆者又考慮做個(gè)Javascript的導(dǎo)航欄，體積又很校假設(shè)我們要做一個(gè)包含“動(dòng)漫專欄”、“游戲天地”、“音樂同人”、“交友直通車”四個(gè)欄目的導(dǎo)航欄:
首先是便于更新，所以要做個(gè)外接的Javascript腳本，至于用到的語句就只有document.write(“”),新建一個(gè)文本文件，打開，輸入: document.write(" ");
document.write("動(dòng)漫專欄"); /*在“ ”里的是HTML格式的元素，該元素定義了一個(gè)錨(Anchor)，也就是把“動(dòng)漫專欄”作為一個(gè)超鏈接，“HREF”屬性指定“動(dòng)漫專欄”鏈接到的其他資源上，也就是“http://richardddd.easthome.net”。(以下相同)*/
document.write(" ");/*該行是讓鏈接之間保持一個(gè)空格，使鏈接的下劃線不至于連在一起。也可以把空格該成“|”等來制造各種效果*/
document.write("游戲天地");
document.write(" ");
document.write("音樂同人");
document.write(" ");
document.write("交友直通車");
完成后，選擇“文件”菜單的“另存為”，在對(duì)話框的“文件名”中輸入“navigation.js”，“文件格式”里尋*.*”，于是，外接的JS腳本就寫好了。
接下來就是把JS鏈接到我們主頁的HTML源代碼里了。
具體做法:
在和之間，選擇想要讓導(dǎo)航欄顯示的地方，定位，輸入:
保存退出。隨后就是測試的工作了。雙擊主頁，看看效果，導(dǎo)航欄是否出現(xiàn)在我們想要的位置上。效果如下:
動(dòng)漫專欄 游戲天地 音樂同人 交友直通車
注意:
1.在navigation.js里，除了HTML格式本來就必須有的空格外，最好不要有別的空格(包括全角的空格)或是回車，不然的話，裝載網(wǎng)頁時(shí)可能會(huì)提示出錯(cuò)。如果覺得語句太長，想讓腳本看得清楚些而使用回車時(shí)，可以在每行末用“\”來結(jié)束，再打回車。
2.這個(gè)navigation.js要和網(wǎng)頁放在同一目錄下，如果要放在不同的目錄，就要在網(wǎng)頁里的那段代碼里navigation.js的前面加上該文件的路徑。
導(dǎo)航欄真的是網(wǎng)站里非常重要的一環(huán)，如果少了導(dǎo)航欄，你的站點(diǎn)將會(huì)是一個(gè)漆駚?、讓人摸不到東西南北的大迷宮(大家玩過仙劍吧，和那個(gè)迷宮是一樣的:)。即使是經(jīng)驗(yàn)豐富的老鳥，也會(huì)被弄得不知所措，說不定還會(huì)以為你的站點(diǎn)就這么一頁呢。所以為了方便訪問者，同時(shí)也是為了你的網(wǎng)站能有更多的回頭客，首先就必須做出分類明確、位置醒目的導(dǎo)航欄，把你的站點(diǎn)的風(fēng)采以及你自己的才華完全展現(xiàn)出來。其次還要保持導(dǎo)航欄的便于更新，因?yàn)殡S著時(shí)間的推移，你的站點(diǎn)內(nèi)容會(huì)越來越豐富多彩，總得重新整理整理吧，讓自己的網(wǎng)頁隨時(shí)保持在最方便訪問的位置，而不是層層的鏈接之下。想想看，要是訪問者為了找到自己感興趣的內(nèi)容必須點(diǎn)上5、6次鼠標(biāo)的話，那你肯定就失去他了。
2.留下聯(lián)系方法
留下E-mail或其它聯(lián)系方法(比如電話號(hào)碼、聯(lián)系地址等)，給了訪客一個(gè)發(fā)泄對(duì)你站點(diǎn)的不滿的機(jī)會(huì)，同時(shí)也可以方便訪客通過這些渠道把網(wǎng)站的BUG反饋給你，之后讓你能及時(shí)修改調(diào)整。
但建議不要留下ISP給你的E-mail信箱，因?yàn)檫@個(gè)信箱在郵件超出限定的容量時(shí)，要收取相當(dāng)高的費(fèi)用。如果你的訪客中有人因?yàn)閷?duì)你站點(diǎn)的不滿，而給你發(fā)郵件****的話，你就有得受了!所以最好只留免費(fèi)的信箱，比如新浪網(wǎng)就提供容量達(dá)50M的免費(fèi)信箱，即便有人攻擊也沒什么大不了的——用WEB方式登陸新浪后，再刪除就行了，就算真的被炸了，還可以重新申請(qǐng)(反正不收錢)。反觀攻擊者，要塞滿50M的郵箱也夠他累的了^_^
如果你平時(shí)使用ICQ或是OICQ的話，不妨也把號(hào)碼留在網(wǎng)頁上，因?yàn)檫@種點(diǎn)對(duì)點(diǎn)的傳輸方式比E-mail更迅速、更直接，會(huì)使向你反饋意見的朋友覺得很親切。
3.使用統(tǒng)一的風(fēng)格
CI(corporate identity)意思是通過視覺來統(tǒng)一整體的形象，包括LOGO、色彩、廣告語等可以作為標(biāo)志性的東西?這原是廣告學(xué)里的一個(gè)專用名詞，但用在網(wǎng)站設(shè)計(jì)上也很恰當(dāng)。背景顏色、字體顏色大孝導(dǎo)航欄、版權(quán)信息、標(biāo)題、注腳、版面布局，甚至文字說明使用的語氣這些方面都要注意前后一致，或者說前后協(xié)調(diào)。
4.色彩的搭配
暖色系:紅、橙、橙黃、黃等色彩表現(xiàn)溫馨、和煦、熱情。
中性系:黃綠、綠等色彩表現(xiàn)舒適、和諧。
寒色系:青綠、藍(lán)綠、藍(lán)等色彩表現(xiàn)寧靜、清涼、高雅。
一般來說，學(xué)過美術(shù)的人對(duì)于色彩的選擇和搭配方面比較具有優(yōu)勢，但這也不是絕對(duì)的，只要平時(shí)注重自己審美觀的培養(yǎng)，即使不是專業(yè)人員一樣可以有好的創(chuàng)作。再退一步，你不是專業(yè)人士，也沒有這方面的天賦，其實(shí)也沒關(guān)系，你可以使用大家一致公認(rèn)的經(jīng)典組合(如黑底白字)，即使缺少新意，也不會(huì)讓人覺得不舒服。
但必須注意的是，在整個(gè)站點(diǎn)的色彩選擇上，應(yīng)該盡量使用同一種色系的，色彩種類以不超過三、四種為界限。
適當(dāng)?shù)膶?duì)比色可以增加文字的可閱讀性，但如果對(duì)比太強(qiáng)的話，就不適于長篇文本的閱讀，并會(huì)對(duì)瀏覽者的視力造成很大的傷害!
