<strike id="imseu"></strike>

畜牧人

標題: 建站全攻略-從入門到精通 [打印本頁]

作者: lhc0088 時間: 2008-2-20 19:43
標題: 建站全攻略-從入門到精通
建站全攻略-從入門到精通

                        前言

   隨著互聯網的不斷發展和中國網絡人口的日益增長，從外行到菜鳥、菜鳥到老鳥、老鳥又成為了一代大蝦，（本人還只是老鳥而已，還未到大俠的境界），其中不知道發生了多少的變化……

　　以前是瀏覽別人的網站，看到整齊的文字和花花綠綠的圖片，真是羨慕極了！后來呢，自學了Frontpage2000，覺得做主頁其實也很容易，不就是寫些文章，插點圖片嘛……于是，興致勃勃地寫了個漂亮的主頁，加了幾個鏈接，通到大眾軟件、電腦之家……做好站點、上傳、打開IE、在地址欄里打上http://www.xxx.com，再用激動到顫抖的手按下回車……

　　此后鮮花掌聲千千萬，但麻煩也接踵而來，主要是內容收集分類困難，更新不便，界面過于簡陋……但筆者并不氣餒，駕著小貓上網找網站制作的教程，DOMN下來拌著方便面和好多個不眠之夜慢慢啃。終于黃天不負苦心人，在無數次的失敗后，筆者漸漸積累起的經驗反映在個人站點的不斷發展中了^_^

　　由于深深地體會過自己摸索的痛苦，所以把筆者的建站心得，拿來和眾多同好分享，可惜的是筆者的站點正面臨全面改版，無法留下地址，供大家學習參考，水平所限文章中錯誤在所難免，還望高手、大俠不吝賜教^_^

　　注：筆者在這里說的網站指的是個人申請的免費主頁，也就是說不具有商業性質，（其實很多提供免費主頁申請服務的站點在網友申請前都有規定，禁止主頁用于商業用途），所以筆者在設計時考慮較多的是網友們興趣愛好，而不是注重商品的展示，但總體的設計思想和某些技巧也適用于商業站點，取舍就看您的喜好了。

　　網站制作除了可以按制作的時期分為前期規劃、中期制作、發布，及后期維護外，還可以按工作性質分成：結構設計、資料收集、美工設計、宣傳推廣等。
網絡知識
　　
   首先來了解一下我們平時說的萬維網是什么？（沒學過網絡知識也沒關系，筆者會盡量說的淺顯易懂）

　　www（world wide web）是指在internet上的許多計算機連接在一起而形成的網絡，這些計算機相互或是單向的傳遞信息，（包括文字、程序、圖像、聲音和其他眾多多媒體文件）。

　　我們怎么訪問這些信息呢？

　　通過URL和相關的Protocol就可以做到了。

　　URL（Uniform Resource Locator）就是統一資源地址，是URI（Universal Resource Identifier，通用資源標識）命名體系規范中的一個分支。顧名思義，URL就是幫助我們在網絡上找到需要的資源的“路徑”，舉個例子：

　　http://www.company.com/welcome/index.html

　　這個地址說明了通過HTTP協議，能夠在叫www.company.com的主機上，在路徑“/welcome/”下找到一個index.html的文件。

　　Protocol（協議）里用與internet的是TCP/IP（Transmission Control Protocol/Internet Protocol,傳輸控制協議/網際互聯協議），TCP/IP最初由DARPA（美國國防高級研究規劃局）設計，用于國防相關的工程，現在被廣泛的操作系統所支持，（包括Windows, NT, NetWare, Macintosh等），成為了通用的網絡協議。

　　HTTP（Hypertext Transfer Protocol，超文本傳輸協議）是用來在Internet上傳送超文本的傳送協議，它運行在TCP/IP協議之上。其他常用的協議還有文件傳輸協議FTP（File Transfer Protocol）、遠程登錄協議Telnet、NEWS以及Gopher等。

　　HTML（Hypertext Markup Language，超文本標識語言）是WWW上的發布語言、標記性語言或頁面格式定義語言，可以用文本編輯器來制作，我們平時見到的網頁就是HTML文件。HTML可以插入圖形、音頻、視頻等對象，使其具有極為豐富的網頁內容和很強的可觀賞性，同時文件本身的體積很小（不包括插入的圖像、聲音之類額定文件），非常適合在網絡上傳輸，目前版本是4.0。

作者: lhc0088 時間: 2008-2-20 19:43
建站全攻略-從入門到精通--準備篇

1．HTML語言*：

　　先要學習HTML超文本語言，也許有人認為有了Frontpage2000和Dreamweaver之類的圖形化網頁制作工具就不再需要學習HTML語言了，其實這是個很普遍的認識誤區。因為即便有強大的軟件，但它們都只能自動生成很簡單的HTML代碼，對于想創作復雜的網頁結構還不太使用。所以在很多時候，比如用FrontPage做好一個網頁后，還經常需要直接在網頁的HTML代碼里作修改，加以完善，以求達到想要的效果。

　　另外，懂得HTML語言也可以幫助我們看懂別人做的網頁里的結構和特效，從而提高自己的水平，這也是一個學習網頁制作的大好機會。建議大家去學，但如果實在不愿意，筆者也不勉強。^_^

　　2．工具的選擇：

　　除了學習一些基本的HTML語言知識外，一般說來還需要學習諸如：網頁制作工具、圖形工具、網頁動畫工具、FTP上傳工具等常用的軟件。筆者簡單地來介紹一下：

　　網頁制作工具：

　　Frontpage2000*是Microsoft公司的產品，包括在Office2000專業版的套裝里，支持所見即所得的編輯方式，在站點的管理方面做的很出色。不需要你掌握很深的網頁制作技術知識，甚至不需要你了解HTML的基本語法，很適合新手。事實上，如果你會使用MS Word的話，你很快就會學會使用FrontPage，并發現這其實是一件再簡單不過的事，因它的基本使用方法和Word十分相似。

　　Dreamweaver*是Macromedia公司的產品，和FrontPage的功能類似，也是圖形化的網頁制作工具，還支持層的操作，并且可以避免生成冗余代碼。現在，不少網站在招聘網站設計人員時，都要求應聘該職位的人員能熟練地操作Dreamweaver，所以立志于將來從事網站制作工作的朋友一定要學好Dreamweaver才行。

　　以上工具同時支持對HTML源代碼進行直接編寫。

　　Hotdog是純代碼工具，只支持手寫HTML代碼，但由于軟件本身包含的了很多制作網頁時要用到的基本元素，所以筆者認為還是非常順手的，特別對于熟悉HTML語言的朋友和代碼狂人來說。^_^

　　圖形工具：

　　Photoshop5.5*是Adobe公司的產品，是功能非常強大的專業圖形軟件，可以制作任何你想要的平面效果。其中包含的ImageReady是用于網頁圖片制作的。缺點是體積龐大，操作比較復雜，非專業人士很難熟練掌握。

　　Paint Pro則是一款小巧玲瓏、使用簡便的軟件，功能也很多，基本上可以滿足一般的圖形制作，而且最大的優勢是完全免費的！

　　另外，矢量圖形工具有CorelDraw等，可以做出體積很小的矢量圖片，缺點是網頁上無法直接插入顯示。

　　網頁動畫工具：

　　ImageReady已經介紹過了，可以制作GIF89a格式的圖片。隨著圖片幀數的增加，動畫形象會更豐滿，當然體積也會更大。特點是與Photoshop交換作品方便，缺點是制作的位圖體積較大。

　　Flash*是Macromedia公司的產品，與Dreamweaver和firework并稱網頁制作三劍客，可以非常方便地制作動畫效果，并根據鼠標事件（Event）來引發一些特效，適合制作交互動畫、小游戲。最吸引人的還是作品SWF體積出奇的小，并且可以以插件的形式加入到網頁中。通常幾分鐘的復雜動畫才幾百K，比起AVI格式真有天淵之別，很多在網上傳播的流行音樂的MTV，5分鐘左右連圖像帶歌曲也只有2、3百K，而以壓縮比高著稱的MP3格式光5分鐘的歌曲就要4M呢！Flash在兩年來迅速發展，相信成為網絡上廣為接受的標準格式已經為期不遠了。

　　FTP上傳工具：

　　制作好的網頁要上傳到提供給我們主頁空間的服務器后，才能讓網友去訪問。上傳工具將影響到我們對站點更新維護的效率。

　　CuteFTP：老牌的上傳軟件，功能強大，使用方便，支持拖放。

　　UploadNow！：中文軟件，可以自動把本地站點上更新過的文件上傳，避免上傳沒有更新過的文件，節省的上網的時間和費用。

　　WS-FTP*：速度特別快，支持拖放，對有多個站點要維護的朋友比較適用。

　　3．其它技術：

　　此外，掌握少量的編程技巧和多方面的先進技術也是有益無害的。

　　首先是腳本語言JavaScript*和Vbscript，JavaScript是Netscape公司的產品，它介于JAVA和HTML之間，是基于對象（Object）和事件驅動（Event Driven）并運行于客戶端的編程語言。對于新版本的Netscape Navigator和Internet Explore的兼容性都相當的好。特別是JavaScript，不允許訪問本地硬盤的安全性和與操作環境無關的跨平臺性也對它的推廣起了很大的作用，在一定程度上可以代替JAVA完成一些網頁特效。學過C、C++的朋友會覺得JavaScript是一種很容易學的腳本語言。建議先了解DHTML的對象模型再學JavaScript。

　　其次是CGI（Common Gate Interface，通用網關接口）不同于JavaScript，它運行于服務器端，動態響應用戶的操作（包括用戶搜索、提交表單、記數器等），可用任何編譯型語言進行編寫（如Delphi、C++等）。

　　ASP（Active Server Pages）是包括HTML標記、文本和腳本命令的文件，使用它可以創建動態、交互的 Web 服務器應用程序，并可以組合HTML頁、腳本命令和ActiveX組件以創建交互的Web頁和基于Web的功能強大的應用程序。

　　IDC（Internet Database Connector，網絡數據庫接口）包含于Windows NT Server里的IIS(Internet Information Server)，提供了一種網絡數據庫內容得以發布并可與用戶交互的方法，它實際上是一個ISAPI應用程序。

　　ADO（ActiveX Data Object）可以與ASP結合，以建立提供數據資訊的網頁內容，只需在網頁面中執行SQL指令（Structured Query Language，結構化查詢語言），讓用戶在瀏覽器界面中輸入、更新和刪除WEB服務器上的數據資料。

　　PHP（Hypertext Preprocessor）與IIS上的ASP相似，是一種HTML內嵌式的語言。用 PHP寫出來的Web后端CGI程序，可以很輕易的移植到不同的平臺上，而且是免費的。

　　XML（Extensible Markup Language，可擴展標記語言），是SGML（Standard Generic Markup Language，標準通用標記語言）的一個子集，可以很方便對結構化數據進行描述，允許用戶對自己的標記語言進行定義，實際上提供了一個直接處理Web數據的通用方法。

　　VRML（Virtual Reality Modeling Language，虛擬現實模型語言）是一種網上虛擬現實語言，可以實現實物虛擬化，由于能在電腦上虛擬真實的產品，所以對于商品展示和電子商務的發展起到很大的推動作用。

　　WML類似于HTML語言，是信息家電上網瀏覽所使用的，隨著更多的人加入到網絡中來和信息家電的普及，WML可能發展到象HTML一樣成為一種標準。

　　注：帶*的軟件是筆者特別推薦使用的。

作者: lhc0088 時間: 2008-2-20 19:44
建站全攻略-從入門到精通--規劃篇

設計網站需要考慮的因素非常多，從前期網站開發時的設計、規劃，到中期的資料收集、頁面美工，再最后的調試、發布、宣傳是一個龐大的工程，要花費大量的時間和金錢（除非想做一個臨時的，只有很少網頁的站點）。所以能找些志同道合的朋友一起來做比較現實，最好大家有各自的特色，每人負責自己拿手的方面，管理最熟悉的版面。也可以按別的標準來分工協作，比如一人收集整理資料，一人做美工，文筆出色的搞創作，外文過硬的做翻譯，工作學習不怎么忙的人負責維護，站點的全局結構布局則一起討論決定，總之各取所長，各司其職，各盡所能就是了。

　　1．站點的訪客定位

　　只有確定了自己服務的對象是誰，才能有的放矢地投其所好，在內容選取、美工設計、劃分欄目各方面盡力做到合理，并吸引住更多的眼球。就個人站點而言，目的大多是為了展示自我表現的風采，為眾多有共同興趣愛好的朋友（網友）提供其所需的咨詢（如新聞、公告等）和資源（如計算機教程、游戲攻略、桌面屏保等）。所以把訪問者定位于和自己年齡相仿的網友是比較合適的（筆者建議的范圍是15~30，其中有學生和年輕的上班族，是上網的主要人群，而且對新事物充滿的好奇心，估計興趣在動漫、音樂、小說、軍事、電腦、游戲等方面），按這部分網友的興趣把內容收集起來，加以分類整理就可以大致上確定站點的發展方向了。當然，在站點正式運作后，也可以通過調查表單和E-mail來了解訪問者對站點的看法和建議，從而及時做出調整和修改，讓站點更適合來訪者的口味，具體方法會在下文中涉及，這里就不重復了。

　　2．站點的主題選擇

　　可選擇的范圍很廣，但建議選自己擅長的或是非常喜歡的，并且立志做到最好。因為網絡上各種各樣的咨詢信息很多，別人可以輕易的在知名站點查找幾乎所有自己想要的信息，但可能要花上不少時間或只能找到一部分信息，所以我們要關注的是怎樣節省網友的時間，讓他能更快更便捷的找到想要的（如果能提供他找不到的部分就更好了），這就是我們和那些知名的大站點所要競爭的地方了。

　　往往內容特別豐富多彩的站點都有一個致命的弱點，那就是查找信息困難。為什么會這樣呢？其實原因很簡單，正是因為注意面面俱到，使內容太多、太雜，網友查一個消息要點上很多次鼠標，而且還會象進了大觀園一樣找不到來時的“路”。最難的是這個弱點沒法克服，只能使用導航欄和有條理的索引來緩和。所以筆者不建議大家做這種“面面俱到、什么都有”的站點，就讓那些有錢的大公司去做吧^_^

　　如果有時間的話，還可以自己寫些文件，放上去。不管是散文、小說還是軟件教程，甚至是游戲攻略也行，只要有你的特色，相信一定會被網友所接受。

　　3．站點整體風格的確定

　　知道了什么樣的人會來以及要做什么樣的內容，就可以確定需要什么樣的風格了。如果有美工基礎的話，只要再加上少許的創意，就可以做出非同一般的效果。讓人看一眼就留下深刻印象的站點，無論對于吸引眼球還是增加回頭率都是大有裨益的。（建議：使用FrontPage2000里設定的模版——其實就是Microsoft請專業美工師為我們設計的站點布局，而且每個模版都各具特色——相信對于網站制作的新手動手做出自己的個性，一定會有很大幫助。）

　　另外，風格（Style）是非常抽象的概念，往往要結合整個站點來看，而且不同的人的審美觀都不同，對于風格的喜好也很不同。所以想使每一個人都滿意是不可能的，重要的是讓自己滿意先（當然自己的滿意有很大程度是建立在訪問者滿意上的），再照顧忠實的支持者。

　　建議：如果站點內容范圍不太廣，屬于相同的主題，可以考慮整個站點設計為同一種風格；但如果各欄目的差異很大，比如站點里既有嚴肅的軍事欄目，同時也有輕松活潑的動漫欄目，很顯然將這兩者設計成各有特色的風格會更使人感覺舒適。可是不管用什么風格，都要記得風格是為主題服務的，也就是要讓它做好襯托氣氛的任務，而不是單純地照搬照抄別人的特色，因為也許那并不適合你的站點。

　　4．瀏覽器版本和分辨率

　　不同的瀏覽器對網頁會做出不同的顯示，在Internet Explore里非常漂亮的頁面，用Netscape Navigator顯示可能是一團糟。所以即使在現在這種IE一統天下的時候，也要考慮少數使用NN的用戶，也許他們正是你的潛在訪客，你總不愿意因為自己的懶惰而失去他們吧！把每個網頁都放在兩種瀏覽器里看看，有什么問題馬上解決。

　　如果考慮到IE和NN老版本的兼容性就更好了，因為有寫新的網頁技術（比如框架）老版本的瀏覽器并不支持。

　　排除在UNIX操作系統下使用的瀏覽器（比如Emacs-W3、Arena、Amaya等），另外有些瀏覽器使用的是IE內核（很多國產的瀏覽器都是），又或是市場占有率不高（比如Opera、Mozilla Milestone18等），這里就不一一敘述了。

　　1024x768，800x600，640x480是使用最多的三種分辨率，一個網頁能在這三種分辨率里都很好的顯示是最好的，但如果不行的話，請最先考慮800x600，因為現在大多數人都在使用它。具體做法：可以在網頁里做個表格，并且把寬度設置為“100%”，而不是具體的象素值，這樣一來，網頁就會在不同的分辨率里自動調整。但需要注意的是，這樣設置后，如果你的表格里又都是文字內容的話，只要瀏覽者縮小瀏覽器的窗口，網頁上的內容可能會變得很不協調，甚至會破壞你原先所期待的效果。解決辦法是在表格里插入一個寬度為800象素的圖片，把表格“撐滿”，當瀏覽器窗口再縮小的時候將會出現滾動條來代替內容上的調整。

　　5．尊重版權

　　互聯網的精神是“共享”，但這并不意味著你可以隨便抄襲別人的作品，因為網上的作品也是某個人或某些人辛勤勞動的成果，不管在什么情況下剽竊都是不道德的行為！甚至會引起法律問題：在外國版權問題受到重視是由來已久的，美國的MP3。COM網站因為向網友提供無版權的MP3音樂，而被唱片公司聯名告上法庭；Napster公司因為發布了同名網絡音樂搜索軟件而被告得一敗涂地，現在還在停業整頓中；中國在版權問題上的立法和執法上歷來都比較薄弱，但著名的原創文學網站榕樹下，和未經授權就出版榕樹下網站原創作品的某家出版社對簿公堂，而法院最終判決榕樹下網站勝訴，就意味著中國在版權問題上也有法可依，有法必依的時代來到了。所以在轉載別人作品的時候要先征得對方同意，并在網站上注明作者和其他相關信息，“先斬后奏”、甚至“光斬不奏”的做法只會害了自己！

作者: lhc0088 時間: 2008-2-20 19:45
建站全攻略-從入門到精通--細節篇

1．導航欄的設計

　　每次增加新的欄目或是對原有欄目的調整，都要對所有的頁面更新。剛開始可能還算輕松，因為沒幾個頁面，但當有幾十、幾百個網頁后，這工作量實在太大了！如果偷懶只更新幾個主要的網頁，訪問量就會劇減。

　　筆者首先想到的是FLASH可以做出漂亮的導航按鈕，所有的頁都用一樣的導航欄，以后只要更新這個FLASH動畫就可以使整個網站的頁面都得到更新。但實際使用后發現FLASH造成網頁的體積過大，在加上網站LOGO，商業BANNER……使網頁變的臃腫不堪。

　　這辦法不太好，于是筆者又考慮做個JavaScript的導航欄，體積又很小。假設我們要做一個包含“動漫專欄”、“游戲天地”、“音樂同人”、“交友直通車”四個欄目的導航欄：

　　首先是便于更新，所以要做個外接的JavaScript腳本，至于用到的語句就只有document.write(“”),新建一個文本文件，打開，輸入： document.write(" ");
document.write("<a href=http://richardddd.easthome.net/comics/index.htm>動漫專欄</a>"); /*在“ ”里的是HTML格式的<A>元素，該元素定義了一個錨(Anchor)，也就是把“動漫專欄”作為一個超鏈接，“HREF”屬性指定“動漫專欄”鏈接到的其他資源上，也就是“http://richardddd.easthome.net”。（以下相同）*/
document.write(" ");/*該行是讓鏈接之間保持一個空格，使鏈接的下劃線不至于連在一起。也可以把空格該成“|”等來制造各種效果*/
document.write("<a href=http://richardddd.easthome.net/game/index.htm>游戲天地</a>");
document.write(" ");
document.write("<a href=http://richardddd.easthome.net/music/index.htm>音樂同人</a>");
document.write(" ");
document.write("<a href=http://richardddd.easthome.net/friend/tuili/index.htm>交友直通車</a>");

　　完成后，選擇“文件”菜單的“另存為”，在對話框的“文件名”中輸入“navigation.js”，“文件格式”里選“*.*”，于是，外接的JS腳本就寫好了。

　　接下來就是把JS鏈接到我們主頁的HTML源代碼里了。

　　具體做法：

　　在<body>和</body>之間，選擇想要讓導航欄顯示的地方，定位，輸入：

<Script language=“JavaScript” src=navigation.js></script>

　　保存退出。隨后就是測試的工作了。雙擊主頁，看看效果，導航欄是否出現在我們想要的位置上。效果如下：

　　動漫專欄游戲天地音樂同人交友直通車

　　注意：

　　1．在navigation.js里，除了HTML格式本來就必須有的空格外，最好不要有別的空格（包括全角的空格）或是回車，不然的話，裝載網頁時可能會提示出錯。如果覺得語句太長，想讓腳本看得清楚些而使用回車時，可以在每行末用“\”來結束，再打回車。

　　2．這個navigation.js要和網頁放在同一目錄下，如果要放在不同的目錄，就要在網頁里的那段代碼里navigation.js的前面加上該文件的路徑。

　　導航欄真的是網站里非常重要的一環，如果少了導航欄，你的站點將會是一個漆黑的、讓人摸不到東西南北的大迷宮（大家玩過仙劍吧，和那個迷宮是一樣的：）。即使是經驗豐富的老鳥，也會被弄得不知所措，說不定還會以為你的站點就這么一頁呢。所以為了方便訪問者，同時也是為了你的網站能有更多的回頭客，首先就必須做出分類明確、位置醒目的導航欄，把你的站點的風采以及你自己的才華完全展現出來。其次還要保持導航欄的便于更新，因為隨著時間的推移，你的站點內容會越來越豐富多彩，總得重新整理整理吧，讓自己的網頁隨時保持在最方便訪問的位置，而不是層層的鏈接之下。想想看，要是訪問者為了找到自己感興趣的內容必須點上5、6次鼠標的話，那你肯定就失去他了。

　　2．留下聯系方法

　　留下E-mail或其它聯系方法（比如電話號碼、聯系地址等），給了訪客一個發泄對你站點的不滿的機會，同時也可以方便訪客通過這些渠道把網站的BUG反饋給你，之后讓你能及時修改調整。

　　但建議不要留下ISP給你的E-mail信箱，因為這個信箱在郵件超出限定的容量時，要收取相當高的費用。如果你的訪客中有人因為對你站點的不滿，而給你發郵件炸彈的話，你就有得受了！所以最好只留免費的信箱，比如新浪網就提供容量達50M的免費信箱，即便有人攻擊也沒什么大不了的——用WEB方式登陸新浪后，再刪除就行了，就算真的被炸了，還可以重新申請（反正不收錢）。反觀攻擊者，要塞滿50M的郵箱也夠他累的了^_^

　　如果你平時使用ICQ或是OICQ的話，不妨也把號碼留在網頁上，因為這種點對點的傳輸方式比E-mail更迅速、更直接，會使向你反饋意見的朋友覺得很親切。

　　3．使用統一的風格

　　CI（corporate identity）意思是通過視覺來統一整體的形象，包括LOGO、色彩、廣告語等可以作為標志性的東西。這原是廣告學里的一個專用名詞，但用在網站設計上也很恰當。背景顏色、字體顏色大小、導航欄、版權信息、標題、注腳、版面布局，甚至文字說明使用的語氣這些方面都要注意前后一致，或者說前后協調。

　　4．色彩的搭配

　　暖色系：紅、橙、橙黃、黃等色彩表現溫馨、和煦、熱情。
　　中性系：黃綠、綠等色彩表現舒適、和諧。
　　寒色系：青綠、藍綠、藍等色彩表現寧靜、清涼、高雅。

　　一般來說，學過美術的人對于色彩的選擇和搭配方面比較具有優勢，但這也不是絕對的，只要平時注重自己審美觀的培養，即使不是專業人員一樣可以有好的創作。再退一步，你不是專業人士，也沒有這方面的天賦，其實也沒關系，你可以使用大家一致公認的經典組合（如黑底白字），即使缺少新意，也不會讓人覺得不舒服。

　　但必須注意的是，在整個站點的色彩選擇上，應該盡量使用同一種色系的，色彩種類以不超過三、四種為界限。

　　適當的對比色可以增加文字的可閱讀性，但如果對比太強的話，就不適于長篇文本的閱讀，并會對瀏覽者的視力造成很大的傷害！
5．使用CSS控制整體格式

　　CSS（Cascading Style sheets，層疊樣式表）是為網站制作者帶來福音的好東東！它最大的特點是可以使網頁的內容和結構版面控制相脫離，大量的減少網頁中重復使用的HTML代碼，從而減小網頁的體積，這對于在網上傳輸是非常有利的。同時CSS可以使用外接*.CSS文件的方法使一次性修改大批量的網頁成為可能，這就意味著你可以經常地改變網站的界面（包括文字、色彩、背景圖片等），而每次只需要上傳一個體積很小的CSS文件就行了！

　　所以，筆者在這里極力向大家推薦使用！接著就簡單扼要地介紹常用功能。

　　具體方法：

新建一個文本文件，打開，輸入：

body {

font-size: 10pt; //<body>標記里的字體大小為10pt；

background-color: rgb(255,255,255); //網頁背景顏色為白色；

background-image: url('back.gif') //背景圖片為與網頁同一目錄下的“back.gif”；

}

table {

border: 0; //表格的邊框隱藏；

width: 100%; //表格寬度為100%；

text-align: left; //表格文本對齊方式為靠左；

}

th {

font-size: 11pt; //表頭字體為11pt，較普通字體稍大；

color: FFFFFF; //表頭背景色為RGB：FFFFFF；

text-align: center; //表頭文本隊旗方式為居中；

}

a {text-decoration: none} //鏈接無下劃線；

a.visited {color: rgb(153,52,43);} //點擊過的鏈接的顏色；

a.active {color: rgb(153,0,255);} //點擊著的鏈接的顏色；

A.hover {

COLOR: #ffba75; //鼠標經過時鏈接的顏色；

TEXT-DECORATION: underline //鼠標經過時鏈接加下劃線；

}

完成后，選擇“文件”菜單的“另存為”，在對話框的“文件名”中輸入“base.css”，“文件格式”里選“*.*”，于是，外接的CSS層疊樣式表就寫好了。

接著，在網頁的HTML代碼里的<head>和</head>之間加上：

<link href="base.css" rel="stylesheet" type="text/css">

保存退出。以后只要在CSS文件里做修改就可以使所有加了以上代碼的網頁自動更新了！

　　6．使用表格定位

　　想要一張整齊的網頁需要做定位工作，有人使用<DIV>和<SPAN>標記，但實際上套用表格更簡單一些，雖然精確度不及前者。很多大的站點都使用表格來定位文字和圖片，制作時很直觀，效果不錯。但值得注意的是，當你的頁面很大的時候，千萬別在整個網頁上用一個大的表格套很多小表格！因為如果瀏覽器在接受數據時發現表格，就必須知道表格的結構，也就是說要把整張表格的內容都接受完畢才顯示其內容，之前會給瀏覽者一張“白板”看，很多人因為沒耐心等待而轉去看其他站點了。所以分用幾個小表格，讓他們可以分別顯示，收到多少顯示多少，瀏覽者可以在等待的時候看先收到的部分，這樣一來就增加了瀏覽者繼續等待的信心。但是你覺得分別顯示頁面會破壞整體的美感，那就用大表格吧！^_^

　　7．站點地圖

　　即使導航欄條理分明，結構合理，但對于內容較多的站點來說，還是做一份站點的導航地圖，才對得起訪客。在站點地圖里，你可以詳細的介紹素有的欄目，以及每個欄目里分別包括些什么小欄目或是含有什么樣的具體內容，應該盡力寫得詳實明了，讓人有一目了然的感覺才達到我們的目的，不要擔心版面不夠，因為整個地圖版面存在的理由就在于此（如果沒有起到它應起的作用，還不如不要呢）。

作者: lhc0088 時間: 2008-2-20 19:46
8．使用模版

　　很多剛開始做網站的朋友往往在收集了大量的素材后，立即投入制作，生成了絕大部分成品網頁，但由于經驗不足或其他什么原因，做完了才發現問題，只好一個個網頁的修改，結果浪費了巨大的精力。所以筆者建議：在完成了所有的構思以后，先要做一個模版網頁，在這個網頁里包括了所有網頁的公共元素（比如LOGO、導航欄、更新時間、推薦欄目、外接的CSS樣式表的鏈接、加入收藏夾、返回首頁、站點地圖、E-mail地址、滾動的狀態欄、廣告條、版權信息等等），之后只要復制多份，填入不同的內容就相對輕松多了。

　　建議：如果頁面太多而沒有給每個網頁寫TITLE的話，FrontPage2000就會自動給每個網頁加上按“new page 1”、“new page 2”的順序排列的TITLE，很不美觀和規范，或是使人產生“站長是個懶鬼”的想法。所以，在制作模版的時候，就可以在TITLE里加上一句無論放在哪個頁面里都合適的歡迎詞（比如“歡迎您的光臨！”之類）。這樣一來，網頁才不會讓人當成“半成品”來看待。^_^

　　9．少用JAVA

　　雖然使用JAVA可以做出許多精彩的網頁特效，但由于現在JAVA程序的處理速度實在讓人不敢恭維，往往是等上老半天還看不到網頁的內容，更有甚者，在漫長的等待后，瀏覽器提示APPLET不能啟動。過分追求技巧和特效，結果卻適得其反，把最重要的內容給拉下了，這種做法顯然是不可取的。

　　10．控制圖片的大小

　　除了文字說明，圖片就是我們網頁上最重要的內容了。許多漂亮的字體，瀏覽器可能并不支持，所以要用圖片的方式來顯示；單純的文字網頁信息量巨大，瀏覽者很難快速地了解網頁想要表達的內容，但通過圖片就能比較形象地把意思傳達給瀏覽者了。此外統一風格（每個網頁使用相同的LOGO）、美化網頁（用色彩鮮艷的花邊修飾網頁邊框、分隔大段的文本）、烘托氣氛等作用也是文字說明無法做到的，特別是GIF089a格式保存的圖片，不但可以制造動畫效果、活潑網頁的氣氛，還能夠在顯示較大的圖片時逐漸的顯示，先顯示分辨率比較低的圖片，讓瀏覽者有個初步了解，知道自己等待的是什么？究竟有沒有必要再等待？這對于速度相對較慢的中國互聯網來說是一件天大的好事。

　　一般來說，一張網頁上的圖片總體積不應該超過50KB，這樣光圖片的下載將花去瀏覽者近10秒的時間（按使用56K的MODEM計算，不過56K的MODEM在中國已經是標準配置了），而即使加上文字也多不了多少時間，對于習慣了慢如螞蟻的網絡的用戶是可以接受的。因此，可以說圖片是造成網頁下載速度過慢的“罪魁禍首”。所以，必須在美觀和速度之間做出選擇，兩者都要兼顧，大家自己平衡吧^_^

　　11．選擇使用框架

　　框架（FRAME）也叫幀頁，是現在制作網頁是較為常用的一種技術。該技術可以把瀏覽器窗口劃分為幾個小窗口，每一個窗口都顯示一個網頁的內容，并分別設置大小、有無滾動條等信息。這樣就方便了設計網站的結構，可以在上方的框架里放置網站的LOGO，在左面的框架里顯示導航欄，而在下方的框架里安置版權信息。當然這只是一個比較公式化的設計，每個人可以根據自己的實際需要和創意來做安排。而且瀏覽時，可以指定鏈接的網頁在哪個框架里顯示，從而避免了網頁上相同內容的重復下載，而這些內容往往是LOGO、BANNER等體積較大，需要很長下載時間的圖片。這對于提高網頁顯示速度和網絡傳輸效率方面都有著積極的意義。

　　盡管這是種方便網站設計者的技術，但對于瀏覽者來說就不一定了。因為框架技術是一種新興技術，很多瀏覽器還不支持它，也就是是說，有一部分的瀏覽者并不能正常的看到你那美侖美奐的網頁。所以，筆者建議：為了這些網友，盡量不要使用框架。如果實在要用，就一定要記得在框架網頁的HTML代碼里加上<NOFRAMES>元素，在<NOFRAMES>里可以設定當瀏覽器不支持框架的時候在瀏覽器里顯示的替代內容，讓沒有使用最新版本的用戶也可以看到網頁的內容。

　　12．發布更新消息

　　更新消息可以通過多種方式傳達給瀏覽者，最常用的就是在主頁上逐條列出最新的內容，或是專門做一個“最近更新”的網頁，在網頁上詳細地介紹最幾一次、幾次更新的內容，并提供通往新內容的鏈接。

　　還有一種方法用的也比較普遍，但一般需要存放站點的服務器方面支持提交表單才行。就是瀏覽者通過提交表單的方式，將自己具體的聯系方法送到站長指定的E-MAIL、CGI、文本文件等目的地，然后再由站長定期或在更新后，向這些地址發送網站最近更新的消息，讓瀏覽者知道是否真的有自己感興趣的內容，是否值得花費時間和金錢去瀏覽你的網站。既方便了瀏覽者，又顯得站長很專業、很盡責。

　　13．堅持經常更新

　　更新包括兩方面的內容：

　　首先是內容，即使是內容豐富多彩的站點，也需要經常更新。因為瀏覽者不可能喜歡你網站所有的內容，大多數網友只喜歡其中的一小部分，而且也只瀏覽這一小部分，所以你要經常把新的內容加進去，來滿足網友的需求。當然有會有例外，一些專門提供下載服務的站點相對而言就不是特別需要經常的更新了，因為供網友下載的大多是流行音樂的MP3、游戲DEMO、商業軟件的BETA等體積很大的文件，網友光是下載這些文件就要花上很長很長的時間。記得有一次，筆者找到一個很大的MP3下載站點，一下子往網絡螞蟻里加入了近80首MP3，之后的一個月筆者就再也沒去過那個站點，直到所有的MP3下載完畢為止。但如果你做的不是這樣的下載站點的話（一般的個人主頁也不太可能提供大量的下載，畢竟上傳也要花很多人民幣~~），就必須要經常更新了。

　　其次是維護，也可以說是對網站結構、美工方面的更新。沒人會喜歡老是看到相同的頁面，而且還可能是不怎么漂亮的頁面。時間久了，內容多了，也會需要對站點的結構、導航做些調整的。

　　建議：如果真的是很忙，沒時間天天更新，希望能在主頁上留一個“站長自述”的版塊，沒天抽出一小會兒，為瀏覽者寫幾句話，甚至可以寫自己的生活日記。瀏覽者就會覺得站長和自己距離很近，是個很親切友好的人。

　　14．注意文件名的長度

　　一般來說，我們使用的Windows98、ME、2000、NT和Linux等操作系統均支持長文件名、大寫的和中文文件名，但大多數提供免費主頁的服務器都不支持長文件名大寫的和中文文件名。也就是說，如果使用了服務器不支持的文件名格式，會造成你辛苦做成的網頁成為“死頁”，別人將無法訪問這些網頁，即使是你自己也不能瀏覽，當然你還是可以對之行使服務開放給你的FTP權利（包括改名、刪除等）。

　　另外需要注意的是，很多服務器對于主頁的命名都有特別的要求，最常見的是index.htm，其他還可能有index.html、default.htm、default.html、welcome.htm、welcome.html等。如果服務器向用戶開放CGI、ASP和PHP的權限的話，還會有以asp和php3等結尾的網頁名出現。

　　所以在不太清楚服務器情況的時候，為了避免出現無法訪問的網頁，最好還是使用在DOS下通用的8。3命名規則較為保險。

　　15．廣告代碼

　　面對中國目前不匪的上網費用，大多數的網友不是縮衣節食，就是盡力克制自己上網的沖動。但隨著上網時間的增加，接觸到的新事物也在不斷增加，忽然有朋友發現上網也能掙些美元（不管最后是不是真的到手，但這確實是個能緩解上網費用過高的辦法）。就是在自己的主頁上加一段廣告代碼，只要訪客能適時地點擊廣告，一個月下來，就能為站長帶來那么幾個美元補貼上網費，不過可能要過好幾個月才能收到支票。

　　但需要注意的是，有些朋友為了多賺些美元，就自己拼命點擊廣告條，但他們不知道在極短的時間里有太大的點擊率、這些點擊全出自同一個IP地址，又或是你的廣告條放的位置不符合廣告商的要求的話，你就將收不到支票，并且會被廣告公司加入黑名單。結果自然是“賠了夫人又折兵”，既賺不到美元，又花了自己的時間和精力（點擊廣告時花費的）。

　　即使靠廣告條能增加收入，但也要考慮到由于大家都和你有相同的想法，所以在Internet上早就是廣告滿天飛了，現在的網友可是一看到廣告就反感，接著是連看也不看你的網站里有些什么內容就鍵入別的地址了。因此很可能發生的是，放了廣告代碼后，非但沒收到美元，反而連自己的訪客也給嚇走了，有句老話就是形容這種情況的：“偷雞不成蝕把米”^_^

　　可是，就算不放置為自己謀福利的廣告條，但提供主頁空間給你的那個網站的那個廣告你還是得放在主頁上的，不然的話，很可能會不經通知就刪除你的主頁空間哦！了解了以上幾個方面后，再來將一些實用技巧。

作者: lhc0088 時間: 2008-2-20 19:47
建站全攻略-從入門到精通--技巧篇
　　
1．特色ICO

每次看到好的網頁總想把它保存在收藏夾里方便以后再去，但時間一久，太多的鏈接就讓人眼花繚亂了，沒辦法，刪！你不想讓自己的網頁也遭到這樣的命運吧？

具體方法：

先打開網頁的HTML源文件，在<head>和</head>之間找個空的地方點一下鼠標，（千萬別點在<>里），輸入：

<link rel="shortcut icon" href="logo.ico">

保存退出。其中“logo.ico”替換成你自己的ICO圖標文件的路徑。最后記得把網頁和ICO圖標文件都上傳到網上就行了，不過ICO的路徑不要變。

這樣一來，當別人把你的網頁保存到收藏夾的時候看到的不再是千篇一律的HTML文件的圖標了，怎么樣，很跳吧？^_^

2．設為主頁

在網頁顯眼的地方加上“設為主頁”的鏈接一定會增加被設為主頁的機會，畢竟在IE菜單欄上操作太麻煩了，而現在只需要點擊一下鼠標。

具體方法：

在網頁HTML源文件的<body>和</body>之間的空白處點擊鼠標，輸入：

<a href="#" onclick="this.style.behavior='url(#default#homepage)';

this.sethomepage('http://www.homepage.com');">設為主頁</a>

保存退出。其中的“http://www.homepage.com”替換成你自己的主頁；“設為主頁”替換成你想要的文字說明或是圖片鏈接。如果想更霸道些，就把“onclick”改成“onmouseover”試試，不過可能會引起訪客的反感哦！自己衡量利弊吧^_^

3．加入收藏夾

原理和設為主頁差不多。具體方法：在網頁HTML源文件的和之間的空白處點擊鼠標，輸入：

<a href="javascript:window.external.AddFavorite
('http://www.favorite.com',%20'這是加到收藏夾實例')">加到收藏夾</a>

保存退出。其中的“http://www.favorite.com”替換成你自己的主頁；“這是加到收藏夾實例”替換成你想要的文字說明（在收藏夾里顯示的說明）；“加到收藏夾”替換成你想要的文字說明或是圖片鏈接。

4．顯示當前日期和時間可以讓來訪者知道現在的時間，而且會隨著系統時間隨時調整。

具體方法：

在網頁HTML源文件的<body>和</body>之間你想要時間顯示的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



</Script>

保存退出。這里就不要再做什么替換了。

5．顯示來了幾次當訪客每次來的時候，都可以知道自己究竟來的幾次，他會覺得站長一直把他當作貴賓對待而心存感激，而你要做的只是加一段代碼罷了^_^

具體方法：

在網頁HTML源文件的<body>和</body>之間的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



</Script>

保存退出。我設置的數字字體顏色是大紅，漢字顏色是默認的。

作者: lhc0088 時間: 2008-2-20 19:48
6．動態顯示歡迎詞歡迎詞幾乎是每個網站必備的裝備之一，但天天看千篇一律的“歡迎光臨”之類的歡迎詞，任誰都會覺得厭煩的。所以我們要做個與眾不同的，能按具體情況具體分析的“智能型”歡迎詞^_^

具體方法：

在網頁HTML源文件的<body>和</body>之間的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



</Script>

保存退出。看明白了嗎？其實原理很簡單，就是根據系統的時間，決定該用什么樣的歡迎詞，可以把時間的間隔分得更小一些，顯示的歡迎詞也可以更富有人情味。

7．解決亂碼大陸地區和臺灣地區雖然都使用中文，但在電腦網絡上的編碼方式卻有很大的不同，前者使用的是GB2312碼（國標碼），而后者用的是BIG5碼（大五碼），兩者互相不兼容，這就使通過網絡在兩地之間交流變得很不方便，出現了亂碼的E-mail和網頁。要正確顯示兩種編碼不但要用戶的計算機安裝相關軟件，還要做相關設置，并且每次都要用手動切換，很不方便。其實，只要在網頁中加上一行代碼就至少可以避免每次手動切換的麻煩了。

具體方法：

在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

保存退出。這樣就可以強制瀏覽者用GB碼來看你的網頁，只要他的計算機安裝了相關的IE字符包就能正常顯示國標碼了。如果想顯示的是BIG5碼，只要把“gb2312”替換成“big5”就行了。

8．禁止使用鼠標右鍵

使用鼠標右鍵可以對所瀏覽的網頁做多項操作（比如保存圖片等），如果不想自己的網頁讓別人“共享”的話，可以把鼠標右鍵的功能屏蔽掉。

具體方法：

在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



保存退出。其中“你的鼠標功能挺多的嘛！^_^”可以替換成你想要顯示的警告信息。不過一定要把腳本加在<head>里，不然的話瀏覽者可以在網頁沒下載完前使用鼠標右鍵的。

9．自動彈出歡迎窗口每次訪問都自動彈出歡迎窗口有可能會讓人心煩，但如果你覺得好就加上去。

具體方法：

在網頁HTML源文件的<body>標記里的空白處點擊鼠標，輸入：

onLoad= alert("你好，歡迎訪問！")

保存退出。其中“你好，歡迎訪問！”可以替換成別的歡迎詞。

10．自動彈出歡送窗口

和自動彈出歡迎窗口差不多。

具體方法：

在網頁HTML源文件的<body>標記里的空白處點擊鼠標，輸入：

onUnload= alert("再見，有時間再來啊！")

保存退出。其中“再見，有時間再來啊！”可以替換成別的歡送詞。

11．去除連接的下劃線鏈接有下劃線是天經地義的事，但我們要改變它！

具體方法：

在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<style>

a {text-decoration:none}

</style>

保存退出。其中的“none”可以替換成“underline”，就是顯示下劃線。

12．標題欄跑馬燈網頁的垂直版面是“寸土寸金”的寶地，往往是訪客第一眼看到的內容，所以不能浪費在歡迎詞和不太重要的消息發布上，那么只好來“開發”標題欄了！^_^

具體方法：

在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



</Script>

在網頁HTML源文件的<body>標記里的空白處點擊鼠標，輸入：

onload="window.setTimeout('titleScroll()', 500)"

保存退出。其中“內容豐富，經常更新，時有抽獎，敬請光臨！”就是滾動顯示的內容。

14．自動跳出別人的Frame（框架）因為本身站點的內容太少，而把別人的網頁當成自己的，并顯示在自己網站的框架中的人還是大有人在的。如果你覺得這是對你勞動成果的不尊重，可以通過E-mail警告對方，也可以直接在自己的網頁里加一句代碼。

具體方法：

在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<Script language=”JavaScript”>



</Script>

保存退出。

或者在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入： <SCRIPT language="JavaScript">



</SCRIPT>

保存退出。

15．網頁自動滾屏在網頁HTML源文件的<head>和</head>之間的空白處點擊鼠標，輸入：

<Script language="JavaScript">



</script>

在網頁HTML源文件的<body>標記里的空白處點擊鼠標，輸入：

onload="scroller()"

保存退出。其中“locate！=400”控制文件的長度，“setTimeout("scroller()",3);”控制滾動的速度。

16．為圖片加注釋

這不但適用于圖片，還可以針對網頁上所有的鏈接，在瀏覽者將鼠標放在圖片或鏈接上的時候自動顯示的一小段預先準備的文本，可以是對圖片本身的解釋，也可以告知鏈接通向哪兒。

具體方法：

打開網頁的HTML源文件，在<IMG>標記里加上：

alt=”image information”

保存退出。其中的“image information”替換為每個圖片的具體解釋。

如果是文字鏈接需要加注釋，在<a>標記里加上：

title=”link information”

保存退出。其中“link information”就是注釋內容。

17．顯示替代圖片

如果要顯示的圖片體積太大，可以用一個體積較小的圖片在原圖片位置先作替代性的顯示，使瀏覽者可以在先看到這些信息的同時，再等待原圖片的下載。

具體方法：

打開網頁的HTML源文件，在<IMG>標記里加上：

LOWSRC=”standin.gif”

保存退出。其中的“standin.gif”就是用來替換的圖片。

18．定義網頁的關鍵字

網頁的關鍵字（KEYWORD）是供搜索引擎（比如YAHOO、SOHU等）檢索的文字說明，搜索引擎根據用戶查找網頁時提交的搜索關鍵字和網頁所包含的關鍵字作比較，按照符合要求的程度不同而作相應的順序排列。很顯然，在網頁的關鍵字上做些文章就能明顯地改善網頁在那些著名的搜索引擎中的“地位”，從而增加網站的訪問率！所以，我總結了一部分搜索率較高的關鍵字供大家選擇使用：“性”（sex）、“音樂”（music or mp3）、“電影”（movie、film or video）、“新聞”（news）、“圖片”（picture or photo）、“明星”（star or art）、“軍事”（military）、“小說”（novel）、“交友”（friend or love）、“電腦”（computer or IT）、“招聘”（invite）…………另外關鍵字也不是一成不變的，例如去年“克林頓”（Clinton）也成了關鍵字呢！至于原因嘛~~相信我不說大家也明白^_^

記住，具體問題具體分析總是不會錯的，什么最熱門，關鍵字就用什么，但是也別編造些自己站點上沒有的“關鍵字”哦！因為即使別人上了一次當，讓你的記數器跳了一格，但他應該再也不會是你站點的訪客了！！！

其實，想用熱門的關鍵字和去騙人并沒有必然的聯系，就拿“克林頓”來說吧，你可以在使用它做關鍵字后，對你的網站也做少許的修改，真的只是“少許的修改”，因為筆者的建議是：收集、整理一些克林頓緋聞的相關報道（SINA上面有得是），做成一個專題報告就行了。這樣一來，既沒有騙人，又成功地把網友吸引來了，即使你的克林頓專題報告做得不怎么樣，但通過這個專題卻讓瀏覽者有機會看到你的站點上還有很多別的信息和資源。也就是把設立關鍵字作為一種提高訪問量的手段，建立相關專題作為橋梁，把潛在的訪客領到你的站點里來。

具體方法：

打開網頁的HTML源文件，在標記里加上：

name=”keyword” content=”music, mp3, news, movie, photo, star”

保存退出。其中的“music, mp3, news, movie, photo, star”就是網頁的關鍵字，可以根據需要修改（可以使用中文信息），但是字母區分大小寫，長度以不超過255個字符為宜（因為即使為了面面俱到而加了上千個關鍵字，也會被搜索引擎的服務器刪除的，所以應該盡量簡潔明了，避免重復），每個關鍵字之間要用“，”分隔。

19．防止背景圖片滾動

當網頁的內容很長，需要使用滾動條來瀏覽的時候，背景圖片也會隨之滾動，好像和文字說明粘合在一起似的。這樣對于定位視線有些不良的影響，特別是色彩花哨的背景圖片，感覺則更不適。對此，我們可以將背景和文字說明相分離，浮動在瀏覽器窗口里。

具體方法：

打開網頁的HTML源文件，在標記里加上：

Bgproperties="fixed"

保存退出。

20．用wingdings字體作畫

wingdings字體可以讓普通的ASCII碼以一些簡單預定圖形的方式在瀏覽器里顯示，如果我們用Wingdings字體來替代部分圖片的話，必然將大大加快網頁的下載速度，因為只要看看HTML源文件就會知道網頁上的圖形只是一小段代碼而已。

雖然大多數的圖形都很簡單，但是還是可以起到一些作用的，比如用“*”的Wingdings字體*表示E-mail或信箱，用“（”的Wingdings字體(表示電話號碼，用“<” 的Wingdings字體<表示下載……具體應用就看大家的想象力了^_^

不過需要注意的是，IE對于Wingdings字體的支持很好，而Netscape可能會出現一些顯示上的問題。附錄部分Wingdings字體、ASCII碼和普通字體的對照表（見附錄1）。

21．網頁變換效果只要搭配得當，這些變換效果會給訪客留下非常深刻的印象，即使是那些本來對你的站點沒興趣的訪客。特別是喜歡學習網頁制作的朋友，很可能就把你的網頁復制下來，以供學習研究之用。其實你不過是加了短短一段代碼而已^_^

網頁變換效果（Trans）共分四大類："進入網頁"（Page-Enter）、"離開網頁"（Page-Exit）、"進入站點"（Site-Enter）、"離開站點"（Site-Exit）。每一大類又分為25個小類，先用進入網頁效果來舉例說明：

進入網頁時的效果

1．混合效果代碼如下：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2．盒狀收縮效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3．盒狀放射效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4．圓形收縮效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5．圓形放射效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6．向上擦除效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7．向下擦除效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8．向右擦除效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9．向左擦除效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10．垂直遮蔽效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11．水平遮蔽效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12．橫向棋盤式效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13．縱向棋盤式效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14．隨即分解效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15．左右向中央縮進效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16．中央向左右擴展效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17．上下向中央縮進效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18．中央向上下擴展效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19．從左下抽出效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20．從左上抽出效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21．從右下抽出效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22．從右上抽出效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23．隨機水平線條效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24．隨機垂直線條效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25．隨機效果代碼如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

現在讓我們來分析一下這些代碼，首先大家一定能看出這些代碼大多數地方很相似。事實上，雖然分類很多，但每個大類下的25個小類是分別對應相同的，并且用數字來標識，（除了混合效果 blendTrans(Duration=1.0)），所以不用對沒個大類一一舉例說明，只要把“Page-Enter”換為“Page-Exit”（離開網頁）、“Site-Enter”（進入站點）、“Site-Exit”（離開站點），就可以達到需要的效果了，同時記憶起來也比較方便。其中“Duration=1.0”可以設定每個周期的時間為多久，單位是秒（現在設置的是每周期1秒）。

需要注意的是四個大類的效果可以在一個網頁里同時設置，但每個大類只能設置一種效果。另外如果網頁是幀頁的話，也將無法顯示出效果。

22．網頁自動刷新有時候為了讓瀏覽者看到最新的內容或是看到準備的特效等目的，而希望網頁能自動刷新。具體方法：打開網頁的HTML源文件，在<Head>里加上：

<Meta http-equiv=”progma” content=”no-cache”>

<Meta http-equiv=”expires” content=”wed,26 Feb 1997 10:10:10 GMT”>

保存退出。其中的“Refresh”表示要刷新網頁，“10”是延遲的秒數，“http://url”是你的網頁地址，秒數和網頁地址可以按需要更換。在更換網頁地址后還可以做到一項對于想做個網站的封面的朋友很有用的特效，就是讓網頁自動刷新，并轉到另一個網頁，既讓瀏覽者看到漂亮的網站封面，又省去了點擊才能進入站點的麻煩。

23．強制每次進入網頁都從WEB上下載

IE瀏覽器在下載完網頁后，會在本地硬盤上的臨時文件夾（Temporary Internet Files）里保存瀏覽過的網頁和圖片，以方便下次再訪問該網頁時可以從硬盤上讀取，進而加快瀏覽的速度。所以換個角度來看，想要每次進入網頁都從WEB上下載，只要使網頁不裝入訪客的硬盤就行了，或者說為網頁設定一個“過期”的日子，一旦過期就要從WEB上重新下載。

具體方法：

打開網頁的HTML源文件，在<HEAD>標記里加上：

<Meta http-equiv=”progma” content=”no-cache”>

<Meta http-equiv=”expires” content=”wed,26 Feb 1997 10:10:10 GMT”>

保存退出。其中“wed,26 Feb 1997 10:10:10 GMT”是一個已經過去的日子，把它當作過期的標準，無論是誰想要再瀏覽你的網頁都必須重新下載才行了。：P

24．利用標題欄做廣告筆者認為最適合標題欄的工作是提示網頁自身的內容，可以讓瀏覽者一目了然，知道自己將看到什么樣的信息，以及為什么而等待。但做過站長的朋友一定知道事情并不象想象中那么簡單，因為一個稍具規模的個人站點一般都有100個以上的網頁，并會隨著時間的推移而迅速增長（當然這是針對勤奮負責的站長而言的^_^）。受到時間和精力的限制，不可能對每一個網頁都細致地總結一個標題，即使是有時間的閑人也可能會因一時的疏忽而忘了加標題。如果你用FP2000來做網頁，這時候就會在標題欄看到“new page 1”（這是FP2000自動為網頁加的標題），大大地破壞了網站的整體效果。如果做網頁用的是模版，結果可能更糟糕，貨不對板的情況會讓瀏覽者倒足胃口。

筆者也經常為這個問題而苦惱，有一次，頭被天上掉落的一重物擊中，瞬間眼前金星亂冒，伸手一抓，金星沒抓到，卻抓到一個點子：用模版做網頁前，先修改模版的標題為“歡迎光臨”之類的萬能歡迎詞，把標題欄顯示網頁內容的功能該成顯示歡迎詞。這樣一來，就不用為每個網頁分別做標題而煩惱了^_^

具體方法：

打開模版網頁的HTML源文件，把<title>和</title>之間的內容改為：

歡迎光臨XX的網站！^_^

保存退出。當然修改的內容可以挑自己喜歡的歡迎詞。 25．移動的字幕

可以動態地顯示消息，比靜止地發布更能吸引別人的眼球，一般用于簡單扼要的新聞報道、廣告用語等方面。除此之外，還有代碼簡潔明了，動態效果種類多，和無需使用JAVA的優勢，因為實現這一效果只需要加入一個HTML標識而已。

接著，我來舉些具體的實例幫助大家了解。

具體方法：

打開模版網頁的HTML源文件，把<body>和</body>之間加入：

<marquee>移動字幕的實例</marquee>

<marquee direction=”left”>從左向右移動字幕的實例</marquee>

<marquee direction=”right”>從右向左移動字幕的實例</marquee>

<marquee behavior=”slide”>一次性移動字幕的實例</marquee>

<marquee behavior=”scroll”>循環移動字幕的實例</marquee>

<marquee behavior=”alternate”>來回循環移動字幕的實例</marquee>

<marquee scrollamount=”10”>快速移動字幕的實例</marquee>

<marquee hspace=”20” vspace=”20” height=”50” width=”50%” bgcolor=”red” align=”top”>紅色背景移動字幕的實例</marquee>

保存退出。現在來解釋一下代碼的含義：

marquee是HTML的標識之一，用于實現文字的移動效果。IE4。0以上的瀏覽器才能正常顯示。

Direction設置文字移動的方向。取值為left（從左向右移動）或right（從右向左移動）。

Behavior設置文字移動的方式。取值為slide（一次性移動）、scroll（循環移動）和alternate（來回循環移動）。

Scrollamount設置文字移動的速度。

Hspace（水平空白）、vspace（垂直空白）設置文字周圍的空白區域。

Height（高度）、width（寬度）設置文字的寬度和高度。

Bgcolor設置文字的背景顏色。

只要使用搭配得當，即使是這樣一個小小的特效也能為你的網頁增色不少哦^_^

26．改變鼠標的形狀

在網頁上，鼠標平時呈箭頭形，指向鏈接時成為手形，等待網頁下載時成為沙漏形……這似乎是約定俗成的。雖然這樣的設計能使我們知道瀏覽器現在的狀態或是可以做什么，但這些好像還不能完全地滿足我們的需要。就拿鏈接來說，可以是指向一個幫助文件，也可以是向前進一頁或是向后退一頁，針對如此多的功能光靠千篇一律的手形鼠標是不能說明問題的。值得慶幸的是，CSS提供了多達13種的鼠標形狀，供我們選擇。

具體方法：

在任意一個鏈接的標識里加入：

style=”cursor:move”

保存退出。“style”是CSS的標記，“cursor:move”表示指向該鏈接時鼠標變成十字箭頭的形狀。其它還有12種不同的形狀將在附錄3里介紹。

27．消除網頁的邊距

做完一個網頁后往往會發現自己編寫的內容和網頁的邊界還保持著一些空白，主要發生在網頁的頂部和左邊，對于文字來說影響還不大，不過相對網頁的頂部的LOGO來說就顯得很難看了。但經過仔細地檢查后又沒有發現任何錯誤的HTML代碼，這是怎么一回事呢？

其實HTML的BODY標識符默認在網頁的頂部和左邊設置一些空白區域，來保持網頁的整潔，但我們不需要的時候也可以通過BODY標識把空白去掉。

具體方法：

打開網頁的HTML源文件，在標識里加上：

topmargin=”0” leftmargin=”0”

保存退出。這樣就消除了網頁的上邊界和左邊界的空白，如果需要增加留白也可以自己修改。

歡迎光臨畜牧人 (http://www.www12347.com/)

主站蜘蛛池模板：太保市| 抚远县| 饶河县| 大连市| 寻乌县| 宁乡县| 抚松县| 德格县| 六安市| 三门县| 海林市| 文山县| 得荣县| 滨州市| 阳谷县| 泽州县| 绥滨县| 申扎县| 古田县| 高雄市| 松江区| 临桂县| 融水| 微山县| 吉林市| 永定县| 广东省| 祁门县| 顺昌县| 马鞍山市| 淮滨县| 都昌县| 大港区| 双流县| 昌江| 伊金霍洛旗| 肃宁县| 东山县| 铅山县| 衡南县| 临泽县|