如何制作網(wǎng)頁(yè)（網(wǎng)頁(yè)制作實(shí)戰(zhàn)篇）

1、如何制作網(wǎng)頁(yè)（網(wǎng)頁(yè)制作實(shí)戰(zhàn)篇）如何制作網(wǎng)頁(yè)目錄 一、認(rèn)識(shí)網(wǎng)頁(yè) 二、制作主頁(yè)前的準(zhǔn)備 三、如何選擇網(wǎng)頁(yè)制作工具 四、如何把握網(wǎng)頁(yè)布局 五、設(shè)計(jì)網(wǎng)站65條原則 六、下載安裝Dreamweaver8 七、規(guī)劃站點(diǎn) 八、在Dreamweaver設(shè)置站點(diǎn) 九、制作模板 十、制作首頁(yè) 十一、在Dreamweaver套用模板修改模板 一、認(rèn)識(shí)網(wǎng)頁(yè)你現(xiàn)在所看到的就是網(wǎng)頁(yè)啦!可是您知道為什么網(wǎng)頁(yè)可以在Internet上傳播，為什么可以被您的電腦認(rèn)識(shí)嗎？還是讓我們來(lái)好好來(lái)認(rèn)識(shí)網(wǎng)頁(yè)。網(wǎng)頁(yè)的學(xué)名稱作HTML文件，是一種可以在www網(wǎng)上傳輸，并被瀏覽器認(rèn)識(shí)和翻譯成頁(yè)面顯示出來(lái)的文件。 WWW是“World Wide W

2、eb”的縮寫；HTML的意思則是“Hypertext Markup Language”，中文翻譯為“超文本標(biāo)記語(yǔ)言”。“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接、甚至音樂(lè)，程序等非文字的元素。 網(wǎng)頁(yè)就是由HTML語(yǔ)言編寫出來(lái)的。 看到這，您也許會(huì)想：我最怕編程了!別急！其實(shí)HTML語(yǔ)言只是一種排版語(yǔ)言，語(yǔ)法就類似于這樣：“頁(yè)高8寬5，(1，2)處插入高1寬1的圖片A.” 如果您是使用WPS或則Word的高手，那么恭喜您，網(wǎng)頁(yè)制作的學(xué)習(xí)您已經(jīng)走了一半路了！HTML：全稱 HyperText Markup Language，正式名稱是超文本標(biāo)記語(yǔ)言，HTML語(yǔ)言發(fā)展很快，已歷經(jīng)HTML1.0、HTM

3、L2.0和HTML3.0、HTML4.0多個(gè)版本，現(xiàn)在HTML5.0正在測(cè)試，同時(shí)DHTML (動(dòng)態(tài))、VHTML(虛擬)、SHTML等也飛速發(fā)展起來(lái)。我們現(xiàn)在一般只要掌握HTML4.0就可以了。html利用標(biāo)記（tag）用來(lái)描述網(wǎng)頁(yè)的字體、大小、顏色及頁(yè)面布局的語(yǔ)言，使用任何的文本編輯器都可以對(duì)它進(jìn)行編輯，與VB、C+等編程語(yǔ)言有著本質(zhì)上的區(qū)別。舉一個(gè)簡(jiǎn)單的例子：要在瀏覽器的顯示效果： jzxue HTML原代碼就標(biāo)記為： jzxue 其中 就是兩個(gè)HTML標(biāo)記。它以起始標(biāo)記及結(jié)束標(biāo)記標(biāo)記文字 jzxue ，令它顯示成粗體。也有懶蟲(像我一樣:)覺得一下要記住HTML那么多枯燥的標(biāo)記實(shí)在太麻

4、煩了。那么有一個(gè)偷懶的辦法：找一個(gè)所見即所得的網(wǎng)頁(yè)制作工具，即使一點(diǎn)HTML語(yǔ)言都不會(huì)，也可以制作出出色的網(wǎng)頁(yè)。(噓，別聲張！)后面，我會(huì)為大家介紹這類工具的。 說(shuō)到底，我還是推薦您稍微了解一些HTML的語(yǔ)法。這樣，您可以更精確的控制頁(yè)面的排版，可以實(shí)現(xiàn)更多的功能。當(dāng)大家稱贊羨慕您的主頁(yè)的時(shí)候，您就會(huì)覺得很值得哦！主頁(yè)制作的基本條件在WWW上，不論你是資產(chǎn)上億的大公司，還是捉襟見肘的窮學(xué)生，只要你建立了自己的主頁(yè)，你們的地位就是平等的。實(shí)際上，許多個(gè)人管理的站點(diǎn)比商業(yè)站點(diǎn)更加受歡迎，一切都在于你的內(nèi)容和創(chuàng)意。那么制作主頁(yè)需要什么條件呢？ 主頁(yè)制作的基本條件有：硬件：一臺(tái)電腦(64MB以上內(nèi)存，

5、當(dāng)然越大越好啦)；可以撥號(hào)上網(wǎng)；如果你有條件的話，建議:配置掃描儀，這將大大方便圖像和文字的輸入;軟件：HTML編輯軟件：常用的有Frontpage、Hotdog等，本文重點(diǎn)介紹 Dreamweaver；圖像處理軟件：常用的有Photoshop、flash、Fireworks 等；文件上傳軟件：常用的有Cuteftp、WSftp等。如果你已經(jīng)萬(wàn)事具備了，我們繼續(xù)下一步：制作主頁(yè)前的準(zhǔn)備.二、制作主頁(yè)前的準(zhǔn)備1、主頁(yè)題材 下面我們開始著手策劃制作主頁(yè)。首先面臨的問(wèn)題便是我要制作什么內(nèi)容，選擇什么樣的主頁(yè)題材。網(wǎng)絡(luò)上的主頁(yè)題材千奇百怪、琳瑯滿目。只要你想的到，就可以把它制作出來(lái)。以下列出一些常見的

6、題材，是否對(duì)你有點(diǎn)啟發(fā)。 給您的建議： (1)一般來(lái)說(shuō)，個(gè)人主頁(yè)的選材要小而精。如果你想制作一個(gè)包羅萬(wàn)象的站點(diǎn)，把所有您認(rèn)為精彩的東西都放在上面，那么往往會(huì)事與愿違的，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很膚淺，因?yàn)槟豢赡苡心敲炊嗟木θゾS護(hù)它。注意：網(wǎng)頁(yè)的最大特點(diǎn)就是更新快。目前最受歡迎的個(gè)人主頁(yè)都是天天更新甚至幾小時(shí)更新一次。 (2)題材最好是你自己擅長(zhǎng)或者喜愛的內(nèi)容。比如：您對(duì)詩(shī)歌感興趣，可以放置自己的詩(shī)詞；對(duì)足球感興趣，可以報(bào)道最新的球場(chǎng)戰(zhàn)況等等。這樣在制作時(shí)，才不會(huì)覺得無(wú)聊或者力不從心。 (3)不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見，人人都有的題材；“目標(biāo)太高”是指在

7、這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點(diǎn)，你要超過(guò)它是很困難的。 OK!如果你已經(jīng)有一個(gè)絕妙的主意了，那我們就開始下一步：規(guī)劃框架。2、規(guī)劃框架 選定了一個(gè)好的題材，是不是可以立刻動(dòng)手制作了？不，經(jīng)驗(yàn)告訴我們，您必須規(guī)劃框架，這是很重要的一步！每個(gè)網(wǎng)站都是一項(xiàng)龐大的工程。好比造高樓，沒有設(shè)計(jì)圖紙，規(guī)劃好結(jié)構(gòu)，盲目的建造，結(jié)果往往是倒塌；也好比寫文章，構(gòu)思好提綱，才不至于邏輯混亂，虎頭蛇尾。全面仔細(xì)規(guī)劃架構(gòu)好自己網(wǎng)站，不要急于求成。規(guī)劃一個(gè)網(wǎng)站，可以用樹狀結(jié)構(gòu)先把每個(gè)頁(yè)面的內(nèi)容大綱列出來(lái)，尤其當(dāng)你要制作一個(gè)很大的網(wǎng)站 (有很多頁(yè)面) 的時(shí)候，特別需要把這個(gè)架構(gòu)規(guī)劃好，也要考慮到以后可能的擴(kuò)充性

8、，免得做好以后又要一改再改整個(gè)網(wǎng)站的架構(gòu)，十分累人，也十分費(fèi)錢。 大綱列出來(lái)后，你還必須考慮每個(gè)頁(yè)面之間的鏈接關(guān)系。是星形、樹形，或是網(wǎng)形鏈接。這也是判別一個(gè)網(wǎng)站優(yōu)劣的重要標(biāo)志。鏈接混亂，層次不清的站點(diǎn)會(huì)造成瀏覽困難，影響內(nèi)容的發(fā)揮。為了提高瀏覽效率，方便資料的尋找，本站的框架基本采用“蒲公英”式，即所有的主要鏈接都在首頁(yè)上，每個(gè)主鏈接再分別展開，主鏈接之間相互鏈接?？蚣芏ㄏ聛?lái)了，然后開始一步一步有條理、有次序地做來(lái)，就胸有成竹得多，也為你的主頁(yè)將來(lái)發(fā)展打下良好的基礎(chǔ)。下一步，你可以動(dòng)手制作具體內(nèi)容了，我將告訴你一些收集資料的竅門。3、資料收集 題材選定，框架選定，接下來(lái)就開始往主頁(yè)里面填內(nèi)容

9、。我們稱作 資料收集。就個(gè)人主頁(yè)而言，很少有人有能力完全靠自己來(lái)創(chuàng)作所有的內(nèi)容。（一些高手能夠提供自己編的軟件，文章或者音樂(lè)，是我非常佩服的！）大部分人的方法是：從報(bào)紙、雜志、光盤等媒體中把相關(guān)的資料收集整理，再加上一定的編輯后就可以了。另外一個(gè)好的方法是從網(wǎng)絡(luò)上收集，您只要到雅虎、搜狐等搜索引擎上查找相應(yīng)的關(guān)鍵字，就可以找到一大堆的資料。如果您是英語(yǔ)高手，您可以到國(guó)外站點(diǎn)上把最新的信息、資料翻譯成中文，提供給大家，這叫“洋為中用”。網(wǎng)絡(luò)上的資料呈爆炸性的增長(zhǎng)，只要注意收集某一非常細(xì)小的題材，隨時(shí)供大家方便的查找，您的主頁(yè)就已經(jīng)有做不完的活了。但是，有一點(diǎn)必須注意！在Copy或引用他人的資料文

10、章時(shí)，請(qǐng)您尊重知識(shí)版權(quán)。有特別聲明、禁止復(fù)制的請(qǐng)不要盜為己用。允許復(fù)制的也應(yīng)該在引用時(shí)注明作者、出處。一般來(lái)說(shuō)，個(gè)人主頁(yè)是非商業(yè)站點(diǎn)，只要你發(fā)封Email給作者，都會(huì)征得同意的。還有就是收集的資料必須合法。按照我國(guó)計(jì)算機(jī)信息網(wǎng)絡(luò)國(guó)際聯(lián)網(wǎng)安全保護(hù)管理辦法的規(guī)定： 任何單位和個(gè)人不得利用國(guó)際聯(lián)網(wǎng)制作、復(fù)制、查閱和傳播下列信息： (一)煽動(dòng)抗拒、破壞憲法和法律、行政法規(guī)實(shí)施的； (二)煽動(dòng)顛覆國(guó)家政權(quán)，推翻社會(huì)主義制度的； (三)煽動(dòng)分裂國(guó)家、破壞國(guó)家統(tǒng)一的； (四)煽動(dòng)民族仇恨、民族歧視，破壞民族團(tuán)結(jié)的； (五)捏造或者歪曲事實(shí)，散布謠言，擾亂社會(huì)秩序的； (六)宣揚(yáng)封建迷信、淫穢、色情、賭博、暴

11、力、兇殺、 恐怖，教唆犯罪的； (七)公然侮辱他人或者捏造事實(shí)誹謗他人的； (八)損害國(guó)家機(jī)關(guān)信譽(yù)的； (九)其他違反憲法和法律、行政法規(guī)的。 到這里我們已經(jīng)完成了制作主頁(yè)的準(zhǔn)備工作了。三、如何選擇網(wǎng)頁(yè)制作工具 “工欲善其事，必先利其器”。制作網(wǎng)頁(yè)第一件事就是選定一種網(wǎng)頁(yè)制作軟件。從原理上來(lái)講，雖然直接用記事也能寫出網(wǎng)頁(yè)，但是對(duì)網(wǎng)頁(yè)制作必須具有一定的html基礎(chǔ)，非初學(xué)者能及，且效率也很低。用WORD也能做出網(wǎng)頁(yè)，但有許多效果做不出來(lái)，且垃圾代碼太多，也是不可取的。我認(rèn)為比較合適的網(wǎng)頁(yè)制作軟件首推Dreamweaver，它簡(jiǎn)單易學(xué)，功能強(qiáng)大，用它做出的網(wǎng)頁(yè)垃圾代碼也比較少，另外，它還可以在我們

12、用所見即所得的環(huán)境制作網(wǎng)頁(yè)的同時(shí)可以在代檢視窗中看到對(duì)應(yīng)的HTML代碼，這對(duì)我們學(xué)習(xí)HTML有很大好處。雖然用Dreamweaver，即使我們一點(diǎn)不懂HTML 也能做出漂亮的網(wǎng)頁(yè)，但HTML畢竟是制作網(wǎng)頁(yè)的基礎(chǔ)，我們要想把網(wǎng)頁(yè)做活了，必須要知其然還要知其所以然，最終我們還是要熟練掌握HTML才行。當(dāng)然 Frontpage也不錯(cuò)，但比起Dreamweaver來(lái)還是要稍遜一籌。 DreamWeaver自制動(dòng)態(tài)HTML動(dòng)畫的網(wǎng)頁(yè)DreamWeaver是一個(gè)很酷的網(wǎng)頁(yè)設(shè)計(jì)軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWav

13、e等特性，而且它還能通過(guò)拖拽從頭到尾制作動(dòng)態(tài)的HTML動(dòng)畫，支持動(dòng)態(tài)HTML(Dynamic HTML)的設(shè)計(jì)，使得頁(yè)面沒有plugin也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁(yè)面的動(dòng)畫。同時(shí)它還提供了自動(dòng)更新頁(yè)面信息的功能。 DreamWeaver還采用了Roundtrip HTML技術(shù)。這項(xiàng)技術(shù)使得網(wǎng)頁(yè)在DreamWeaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變?cè)芯庉嬃?xí)慣的同時(shí)，充分享受到可視化編輯帶來(lái)的益處。DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設(shè)計(jì)，這項(xiàng)設(shè)計(jì)使任何人都可以輕易擴(kuò)展它的功能。 HYPE

14、RLINK :/ /soft/22017.htm 下載Dreamweaver注：下載點(diǎn)不提供安裝序列號(hào)的，請(qǐng)復(fù)制( WPD800-53931-95632-35191) Microsoft FrontPage 98制作功能強(qiáng)大的網(wǎng)頁(yè)如果你曾對(duì)Word很熟悉，那么相信你用FrontPage 98進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)一定會(huì)非常順手。使用Frontpage98制作網(wǎng)頁(yè)，你能真正體會(huì)到“功能強(qiáng)大，簡(jiǎn)單易用”的含義。頁(yè)面制作由Frontpage98中的Editor完成，其工作窗口由3個(gè)標(biāo)簽頁(yè)組成，分別是“所見即所得”的編輯頁(yè)，HTML代碼編輯頁(yè)，預(yù)覽頁(yè)。Frontpage98帶有圖形和GIF動(dòng)畫編輯器，支持CGI

15、和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁(yè)時(shí)感到更加方便。 FrontPage 98最強(qiáng)大之處是其站點(diǎn)管理功能。在更新服務(wù)器上的站點(diǎn)時(shí)，不需要?jiǎng)?chuàng)建更改文件的目錄。FrontPage 98會(huì)為你跟蹤文件并拷貝那些新版本文件。FrontPage 98是現(xiàn)有網(wǎng)頁(yè)制作軟件中唯一既能在本地計(jì)算機(jī)上工作，又能通過(guò)Internet直接對(duì)遠(yuǎn)程服務(wù)器上的文件進(jìn)行工作的軟件。 下載網(wǎng)址 : microsoft /frontpageNetscape編輯器制作簡(jiǎn)單的網(wǎng)頁(yè)Netscape Communicator和Netscape Navigator Gold 3.0版本都帶有網(wǎng)頁(yè)編輯器。如果你喜歡用Netscape瀏

16、覽器上網(wǎng)，那么使用Netscape編輯器真是簡(jiǎn)單方便！當(dāng)你用Netscape瀏覽器顯示網(wǎng)頁(yè)時(shí)，單擊編輯按鈕，Netscape就會(huì)把網(wǎng)頁(yè)存儲(chǔ)在硬盤中，然后就可以開始編輯了。你也可以象使用Word那樣編輯文字、字體、顏色，改變主頁(yè)作者、標(biāo)題、背景顏色或圖像，定義描點(diǎn)，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等，是不是與Frontpage 98還有些像。但是，Netscape編輯器對(duì)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)就顯得功能有限了，它連表單創(chuàng)建、多框架創(chuàng)建都不支持。Netscape編輯器是網(wǎng)頁(yè)制作初學(xué)者很好的入門工具。如果你的網(wǎng)頁(yè)主要是由文本和圖片組成的，Netscape 編輯器將是一個(gè)輕松的選擇。如果你對(duì)HTML

17、語(yǔ)言有所了解的話，能夠使用Notepad或UltraEdit等文本編輯器來(lái)編寫少量的HTML語(yǔ)句，那么也可以彌補(bǔ)Netscape編輯器的一些不足。Adobe Pagemill 3.0制作多框架、表單和Image Map圖像的網(wǎng)頁(yè)P(yáng)agemill功能不算強(qiáng)大，但使用起來(lái)很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁(yè)。如果你的主頁(yè)需要很多框架、表單和Image Map圖像，那么Adobe Pagemill 3.0的確是你的首選。Pagemill創(chuàng)建多框架頁(yè)十分方便，你可以同時(shí)編輯各個(gè)框架中的內(nèi)容。Pagemill在服務(wù)器端或客戶端都可創(chuàng)建與處理Image Map圖像，它也支持表單創(chuàng)建。Pag

18、emill允許在HTML代碼上編寫和修改，支持大部分常見的HTML擴(kuò)展，還提供拼寫檢錯(cuò)、搜索替換等文檔處理工具。在Pagemill 3.0中還增加了站點(diǎn)管理能力，但仍不支持CSS、TrueDoc和動(dòng)態(tài)HTML等高級(jí)特性。Pagemill另一大特色是有一個(gè)剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時(shí)再打開，很方便。下載網(wǎng)址 : adobe Claris Home Page 3.0快速創(chuàng)建動(dòng)態(tài)的網(wǎng)頁(yè)如果使用Claris Home Page軟件，你可以在幾分鐘之內(nèi)創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)。這是因?yàn)樗幸粋€(gè)很好的創(chuàng)建和編輯Frame(框架)的工具，你不必花費(fèi)太多的力氣就可以增加新的Frame(框架

19、)。而且Claris Home Page 3.0集成了FileMaker數(shù)據(jù)庫(kù)，增強(qiáng)的站點(diǎn)管理特性還允許你檢測(cè)頁(yè)面的合法連接。不過(guò)界面設(shè)計(jì)過(guò)于粗糙，對(duì)Image Map圖像的處理也不完全。 下載網(wǎng)址 : claris /software/highlights/clarispagetrial.html 提高級(jí)軟件如果你對(duì)網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)有了一定的基礎(chǔ)，對(duì)HTML語(yǔ)言又有一定的了解，那么你可以選擇下面的幾種軟件來(lái)設(shè)計(jì)你的網(wǎng)頁(yè)，他們一定會(huì)為你的網(wǎng)頁(yè)添色不少。HotDog Professional 5制作要加入多種復(fù)雜技術(shù)的網(wǎng)頁(yè)HotDog是較早基于代碼的網(wǎng)頁(yè)設(shè)計(jì)工具，其最具特色的是提供了許多向?qū)Чぞ?，?/p>

20、幫助設(shè)計(jì)者制作頁(yè)面中的復(fù)雜部分。 HotDog的高級(jí)HTML支持插入marquee，并能在預(yù)覽模式中以正常速度觀看。這點(diǎn)非常難得，因?yàn)榧词故讋?chuàng)這種標(biāo)簽的Microsoft在FrontPage 98中也未提供這樣的功能。HotDog對(duì)plugin的支持也遠(yuǎn)遠(yuǎn)超過(guò)其他產(chǎn)品，它提供的對(duì)話框允許你以手動(dòng)方式為不同格式的文件選擇不同的選項(xiàng)。但對(duì)中文的處理不很方便。HotDog是個(gè)功能強(qiáng)大的軟件，對(duì)于那些希望在網(wǎng)頁(yè)中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級(jí)設(shè)計(jì)者，是個(gè)很好的選擇。 下載網(wǎng)址 : sausage HomeSite 3.0制作可完全控制頁(yè)面進(jìn)程的網(wǎng)頁(yè)Allaire的HomeSi

21、te 3.0是一個(gè)小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯perl程序。HomeSite工作界面繁簡(jiǎn)由人，根據(jù)習(xí)慣，可以將其設(shè)置成像Notepad那樣簡(jiǎn)單的編輯窗口，也可以在復(fù)雜的界面下工作。 HomeSite具有良好的站點(diǎn)管理功能，鏈接確認(rèn)向?qū)Э梢詸z查一個(gè)或多個(gè)文檔的鏈接狀況。HomeSite更適合那些比較復(fù)雜和精彩頁(yè)面的設(shè)計(jì)。如果你希望能完全控制你制作的頁(yè)面的進(jìn)程，HomeSite 3.0是你最佳選擇。不過(guò)對(duì)于生手過(guò)于復(fù)雜。 下載網(wǎng)址 : allaire 或者 : homesitenow HotMetal Pro 4.0制作具有強(qiáng)大數(shù)據(jù)嵌入

22、能力的網(wǎng)頁(yè)HotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個(gè)令各層次設(shè)計(jì)者都不至于失望的軟件。但是初學(xué)者需要熟知HTML，才能得心應(yīng)手地使用這個(gè)軟件。HotMetal具有強(qiáng)大的數(shù)據(jù)嵌入能力，利用它的數(shù)據(jù)插入向?qū)?，可以把外部的Access、Word、Excel以及其它ODBC數(shù)據(jù)提出來(lái)，放入頁(yè)面中。而且HotMetal能夠把它們自動(dòng)轉(zhuǎn)換為HTML格式，是不是很棒，此外它還能轉(zhuǎn)換很多老格式的文檔(如WordStar等)，并能在轉(zhuǎn)換過(guò)程中把這些文檔里的圖片自動(dòng)轉(zhuǎn)換為GIF格式。HotMetal為用戶提供了“太多”的工具，而且它還可以用網(wǎng)狀圖或樹狀圖表現(xiàn)整個(gè)站點(diǎn)文檔的鏈接狀況。

23、下載 : softquad 以上工具各有千秋，但對(duì)于WEB新手來(lái)說(shuō)，“所見即所得”無(wú)疑是最方便的，所以我建議你選擇 DreamWeaver，在網(wǎng)上人們習(xí)慣叫它為“DW”。下面我將在 DreamWeaver里做實(shí)例，希望對(duì)你有所幫助。四、如何把握網(wǎng)頁(yè)布局最開始，網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)候，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思。在開始的時(shí)候，你需要明白，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西。你當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案，但如果你是初學(xué)者，那么最好明白網(wǎng)頁(yè)布局的基本概念。 1、頁(yè)面尺寸由于頁(yè)面

24、尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800 x600的情況下，頁(yè)面的顯示尺寸為：780 x428個(gè)象素；分辨率在640 x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)

25、增加更多內(nèi)容(尺寸)的方法。但我想提醒大家除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。2、整體造型什么是造型，造型就是創(chuàng)造出來(lái)的物體形象。這里是指頁(yè)面的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對(duì)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形代表著柔和，團(tuán)結(jié)，

26、溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀代表著不同意義，但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。3、頁(yè)頭頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。4、文本文本在

27、頁(yè)面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過(guò)去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。5、頁(yè)腳頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。6、圖片圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。7、多媒體除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也

28、將變得更重要。五、設(shè)計(jì)網(wǎng)站65條原則網(wǎng)站中有哪些關(guān)鍵技巧？有哪些陷阱？在這里告訴你：使網(wǎng)站賦予情趣的訣竅、應(yīng)該避免做什么、應(yīng)使用什么工具軟件以及他們喜愛和厭惡的網(wǎng)站。 01 明確內(nèi)容 如果你想成為一個(gè)網(wǎng)站設(shè)計(jì)者，并正想建一個(gè)網(wǎng)站的話，首先應(yīng)該考慮網(wǎng)站的內(nèi)容，包括網(wǎng)站功能和你的用戶需要什么。你的整個(gè)設(shè)計(jì)都應(yīng)該圍繞這些方面來(lái)進(jìn)行。 02 抓住用戶 如果用戶不能夠迅速地進(jìn)入你的網(wǎng)站，或操作不便捷，網(wǎng)站設(shè)計(jì)就是失敗的。不要讓用戶失望而轉(zhuǎn)向你的對(duì)手的網(wǎng)站。 03 優(yōu)化內(nèi)容 內(nèi)容是核心。大約在兩年以前，企業(yè)網(wǎng)站就像一本廣告冊(cè)子，更槽糕的是，網(wǎng)站使用了大量的圖片，似乎要幾個(gè)世紀(jì)才能下載完。Chanels網(wǎng)站

29、（ channels.co.uk）在設(shè)計(jì)的某些方面是成功的，但是內(nèi)容太貪乏，并且要花很長(zhǎng)時(shí)間才能找到所要的東西，因此不能算是一個(gè)成功的網(wǎng)站。 04 快速下載 沒有什么比要花很長(zhǎng)時(shí)間下載頁(yè)面更槽糕的了。作為一條經(jīng)驗(yàn)，一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)應(yīng)不大于60K，通過(guò)56K調(diào)制解調(diào)器加載花30秒的時(shí)間。有的設(shè)計(jì)者說(shuō)網(wǎng)頁(yè)加載應(yīng)在15秒內(nèi)。 05 網(wǎng)站升級(jí) 時(shí)刻注意網(wǎng)站的運(yùn)行狀況。性能很好的主機(jī)隨著訪問(wèn)人數(shù)的增加，可能會(huì)運(yùn)行緩慢。但是，如果你不想失去訪問(wèn)者的話，一定要仔細(xì)計(jì)劃好你的升級(jí)計(jì)劃。 06 堅(jiān)持基本原則 即使你不懂HTML語(yǔ)言，你只需購(gòu)買一個(gè)有版權(quán)的所見即所得的網(wǎng)頁(yè)設(shè)計(jì)工具，如Adobe PageMill 或

30、 Microsoft FrontPage Express，就可以創(chuàng)建一個(gè)看起來(lái)很合理的網(wǎng)站。但是，在設(shè)計(jì)時(shí)，這些軟件包雖然不需要HTML，卻使網(wǎng)站速度下降。 為了成功地設(shè)計(jì)網(wǎng)站，你必須理解HTML是如何工作的。大多數(shù)的網(wǎng)站設(shè)計(jì)者建議網(wǎng)絡(luò)新手應(yīng)從有關(guān)HTML的書中去尋找答案，用Notepad制作網(wǎng)頁(yè)。 07 學(xué)習(xí)HTML 用HTML設(shè)計(jì)網(wǎng)站，可以控制設(shè)計(jì)的整個(gè)過(guò)程。但是，如果你僅僅是網(wǎng)站設(shè)計(jì)的新手，你應(yīng)該尋找一個(gè)允許修改HTML的軟件包。HomeSite4是一個(gè)很好的Web設(shè)計(jì)工具。在設(shè)計(jì)過(guò)程中，HomeSite4能幫助你學(xué)習(xí)HTML。它還允許你切換到所見即所得的模式，以便你在把網(wǎng)站發(fā)送到Web

31、之前，預(yù)覽你的網(wǎng)站。 08 用筆畫一個(gè)網(wǎng)站的框架 圣人云：筆比劍更強(qiáng)大。在用計(jì)算機(jī)之前，用筆畫一個(gè)網(wǎng)站的框架，顯示出所有網(wǎng)頁(yè)的相互關(guān)系。計(jì)劃好你的用戶如何以最少的時(shí)間瀏覽你的網(wǎng)站。 09 “在計(jì)算機(jī)上永遠(yuǎn)也找不到好的方案”。 專家忠告 10 網(wǎng)站地圖 許多設(shè)計(jì)者把他們的網(wǎng)站地圖放在網(wǎng)站上，這種做法，卻是弊大于利。絕大部分的訪問(wèn)者上網(wǎng)是尋找一些特別的信息，他們對(duì)于你的網(wǎng)站是如何工作的，并沒有興趣。如果你覺得你的網(wǎng)站需要地圖，那很可能是需要改進(jìn)你的導(dǎo)航和工具條。 11 “睜大你的眼睛，留意所有的事情。”“對(duì)最不相關(guān)的東西的觀察可以得到最好的靈感。觀察一個(gè)站點(diǎn)的結(jié)構(gòu)和設(shè)計(jì)。理解站點(diǎn)結(jié)構(gòu)的關(guān)鍵元素，確

32、保你的設(shè)計(jì)是圍繞站點(diǎn)瀏覽進(jìn)行的?！?專家忠告 12 點(diǎn)擊規(guī)則 聽說(shuō)過(guò)3次點(diǎn)擊規(guī)則嗎？對(duì)于小型網(wǎng)站，在你的主頁(yè)上，沒有任何一條信息，需要點(diǎn)擊次數(shù)超過(guò)3次的。對(duì)于大型網(wǎng)站，使用導(dǎo)航和工具條來(lái)改善操作。 13 特殊字體的應(yīng)用 雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預(yù)測(cè)你的訪問(wèn)者在他們的計(jì)算機(jī)上將看到什么。在你的計(jì)算機(jī)里看起來(lái)相當(dāng)好的頁(yè)面，在另一個(gè)不同的平臺(tái)上看起來(lái)可能非常糟糕。一些網(wǎng)站設(shè)計(jì)員喜歡使用來(lái)定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問(wèn)者的計(jì)算機(jī)上不能顯示。級(jí)聯(lián)風(fēng)格表CSS有助于解決這些問(wèn)題，但是只有最新版的瀏覽器才支持CSS。

33、14 “使用切合實(shí)際的簡(jiǎn)便的命名規(guī)則?！?專家忠告 15 檢查錯(cuò)別字 好的拼寫是人們一生中重要的技能。但是遺憾的是，許多設(shè)計(jì)者都缺少這種技能。確保你拼寫正確，并且格外注意平常容易誤寫的錯(cuò)別字。 16 避免長(zhǎng)文本頁(yè)面 在一個(gè)站點(diǎn)上有許多只有文本的頁(yè)面，是令人乏味的，且也浪費(fèi)Web的潛力。如果你有大量的基于文本的文檔，應(yīng)當(dāng)以Adobe Acrobat格式的文件形式來(lái)放置，以便你的訪問(wèn)者能離線閱讀。 17 不要使用卷滾條 人們厭惡在網(wǎng)上使用卷滾條。Trouble網(wǎng)站（ Trouble.co.uk）是一個(gè)典型的設(shè)計(jì)很差的網(wǎng)站。它基于一個(gè)浮動(dòng)的架構(gòu)，為了閱讀所有的文本，瀏覽者不得不使用卷滾條。 18 專

34、家最喜愛的Web設(shè)計(jì)工具 1.Adobe Photoshop 2.Macromedia Flash3.Adobe Illustrator4.Adobe ImageRead5.Dreamweaver6.Macromedia Fireworks7. Allaire Homesites8.Microsoft Notepad9. Macromedia Director10. Lightwave11. Macromedia Freehand12其它：Adobe Acrobat Exchange，Allaire ColdFusion，BBEdit，HTML Validator等。 19 網(wǎng)站介紹 你應(yīng)當(dāng)有

35、一個(gè)很清晰的網(wǎng)站介紹，告訴訪問(wèn)者你的網(wǎng)站能夠提供些什么，以便訪問(wèn)者能找到想要的東西。但是，許多設(shè)計(jì)者都沒有這樣做。有效的導(dǎo)航條和搜索工具使人們很容易找到有用的信息，這對(duì)訪問(wèn)者很重要。告訴訪問(wèn)者你所提供的正是他們想要的信息。 20 “網(wǎng)站一旦發(fā)布，網(wǎng)站設(shè)計(jì)的優(yōu)點(diǎn)和缺陷全都公布于世。沒有什么方法使你能夠比從自己的錯(cuò)誤、傾聽其他人的建議和用戶反饋意見中學(xué)到更多的東西。” 專家忠告 21 閃爍讓人頭痛 通過(guò)使用標(biāo)識(shí)可以吸引訪問(wèn)者對(duì)你的主頁(yè)特殊部分的注意，但這也讓你的訪問(wèn)者頭痛。如果你想使訪問(wèn)者再次光顧你的網(wǎng)站，就少用此方法。 22 背景顏色 背景顏色也會(huì)產(chǎn)生一些問(wèn)題，可能會(huì)使網(wǎng)頁(yè)難于閱讀。你應(yīng)當(dāng)堅(jiān)持使

36、用白色的背景和黑色的文本，另外還應(yīng)當(dāng)堅(jiān)持使用通用字體。 23 向前和向后按鈕 應(yīng)當(dāng)避免強(qiáng)迫用戶使用向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁(yè)同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠從每一頁(yè)上訪問(wèn)網(wǎng)站的任何部分。 24 “堅(jiān)持你的信念。嚴(yán)格遵守各種規(guī)則。避免想當(dāng)然。絕不停止學(xué)習(xí)?！?專家忠告 25 點(diǎn)擊記數(shù)器 不要輕易考慮在你的網(wǎng)站上放置一個(gè)醒目的點(diǎn)擊記數(shù)器。你設(shè)計(jì)網(wǎng)站是為了給訪問(wèn)者提供服務(wù)，而不是推銷你自己認(rèn)為重要的東西。大多數(shù)瀏覽者認(rèn)為計(jì)數(shù)器毫無(wú)意義，它們很容易被做假，瀏覽者也不想看廣告。如果你顯示你的網(wǎng)站是多么受歡迎，你最好提供一個(gè)鏈接，顯示

37、訪問(wèn)日志。 26 不要用框架 與記數(shù)器一樣，框架在網(wǎng)頁(yè)上越來(lái)越流行。在大多數(shù)網(wǎng)站上，在屏幕的左邊有一個(gè)框架。但是設(shè)計(jì)者立刻就發(fā)現(xiàn)，在使用框架時(shí)產(chǎn)生了許多的問(wèn)題。使用框架時(shí)如果沒有17英寸的顯示屏幾乎不可能顯示整個(gè)網(wǎng)站?？蚣芤彩沟镁W(wǎng)站內(nèi)個(gè)人主頁(yè)不能夠成為書簽。也許更重要的是，搜索引擎常常被框架混淆，從而不能列出你的網(wǎng)站。27 去掉圖像 在瀏覽器中即使去掉了圖像功能，也要保證訪問(wèn)者能夠在你的網(wǎng)站上獲得滿意的效果。對(duì)于那些使用ISDN連接并且關(guān)掉了圖像功能的訪問(wèn)者，還能獲得好的網(wǎng)頁(yè)加載性能?？梢酝ㄟ^(guò)在網(wǎng)頁(yè)底部提供另外的鏈接和使用替代文字，而不是圖像來(lái)滿足訪問(wèn)者的需要。 28 重復(fù)使用圖像 一些網(wǎng)站由

38、于使用大量不重復(fù)的圖像而錯(cuò)過(guò)了使用更好的技巧的機(jī)會(huì)。在創(chuàng)建商標(biāo)時(shí)，在網(wǎng)頁(yè)上多次使用同樣的圖像是一個(gè)好的方法，并且一旦它們被裝入，以后重新載入就會(huì)很快。 29 避免使用過(guò)大的圖像 不要使用橫跨整個(gè)屏幕的圖像。避免訪問(wèn)者向右滾動(dòng)屏幕。占75%的屏幕寬度是一個(gè)好的建議。 30 “避免使用炫耀的技巧?！?專家忠告 31 選擇使用Flash動(dòng)畫 許多使用比較慢的計(jì)算機(jī)的訪問(wèn)者發(fā)現(xiàn)動(dòng)畫圖標(biāo)很容易耗盡系統(tǒng)資源，使網(wǎng)站的操作變得很困難，因此，應(yīng)該給用戶一個(gè)跳過(guò)使用Flash動(dòng)畫的選擇。 32 盡量少使用Flash插件 雖然許多Web設(shè)計(jì)者認(rèn)為Flash功能很強(qiáng)大，并且Netscape5.0將支持Flash，在

39、使用時(shí)不必再下載任何插件。 但是，最好還是取消使用Flash做各接口的想法。 33 讓用戶先預(yù)覽小圖像 如果不得不放置大的圖像在網(wǎng)站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預(yù)覽效果顯示出來(lái)，這樣用戶就不必浪費(fèi)金錢和時(shí)間去下載他們根本不想看的大圖像。 34 動(dòng)畫與內(nèi)容應(yīng)有機(jī)結(jié)合 確保動(dòng)畫和內(nèi)容有關(guān)聯(lián)。它們應(yīng)和網(wǎng)頁(yè)渾然一體，而不是干巴巴的。動(dòng)畫并不只是Macromedia Director等制作的東西的簡(jiǎn)單堆積。 35 慎用聲音 聲音的運(yùn)用也應(yīng)得到警惕。內(nèi)聯(lián)聲音是網(wǎng)頁(yè)設(shè)計(jì)者的另一個(gè)禁地。因?yàn)檫^(guò)多地使用聲音會(huì)使下載速度很慢，同時(shí)并沒有帶給瀏覽者多少好處。首次聽到鼠標(biāo)發(fā)出聲音可能會(huì)很

40、有趣，但是多次以后肯定會(huì)很煩人。使用聲音前，應(yīng)該仔細(xì)考慮聲音將會(huì)給你帶來(lái)什么。 36 少用Java 和AxtiveX 在網(wǎng)頁(yè)上應(yīng)盡量少使用Java 和AxtiveX。因?yàn)椴⒉皇敲恳环N瀏覽器都需要使用它，只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在處理Java時(shí)也存在問(wèn)題，過(guò)分地使用Java，會(huì)使Mac崩潰。 37 設(shè)計(jì)成功的網(wǎng)站 bmw.co.uk 內(nèi)容和關(guān)聯(lián)性很好 yugop 圖形下載很快www .uk 設(shè)計(jì)簡(jiǎn)單明了 dreamcast-europe newsunlimited.co.uk newbeetle swoon viaduct.co.uk 3

41、8 慎用插件 在Web設(shè)計(jì)中，如果依賴于一些特別的插件，會(huì)減少網(wǎng)站的吸引力。如果訪問(wèn)者沒有所要求的插件，將不得不到其它站點(diǎn)去下載，這樣訪問(wèn)者有可能就不會(huì)返回了。 39 使用著名的插件 如果網(wǎng)站上有聲音或視頻，要保證使用者通過(guò)使用某個(gè)知名的插件，能夠聽到或看到。許多站點(diǎn)使用QuickTime、RealPlay和 Shockwave插件。因?yàn)?，許多訪問(wèn)者并不愿意浪費(fèi)很多時(shí)間和金錢去下載可能僅使用一次的插件。40 使用先進(jìn)技術(shù) 跟上新的技術(shù)。Web技術(shù)的進(jìn)步絕不會(huì)停止，所以應(yīng)花一些時(shí)間來(lái)研究新產(chǎn)品和開發(fā)技術(shù)。 41 自己創(chuàng)建圖像和聲音 使用你自己創(chuàng)建的或從某個(gè)商業(yè)網(wǎng)站上下載的圖像和聲音。在制作商業(yè)網(wǎng)

42、站時(shí)，應(yīng)該花足夠的資金來(lái)創(chuàng)建圖形，以增強(qiáng)公司的宣傳。 42 “無(wú)論是游戲、圖像、動(dòng)畫還是電影，想想你喜歡的設(shè)計(jì)是怎樣的，這將激發(fā)你的創(chuàng)作靈感，使你創(chuàng)作出新的和更好的網(wǎng)站?！?專家忠告 43 平臺(tái)的兼容性 要為用戶著想，必須最少在一臺(tái)PC 和一臺(tái)Mac機(jī)上測(cè)試你的網(wǎng)站，看看兼容性如何。 44 用軟件分析工具找錯(cuò) 使用軟件分析工具檢查HTML。軟件分析工具Doctor HTML能夠幫助檢查HTML中的任何問(wèn)題。如果你有許多網(wǎng)頁(yè)需要檢查，可選用軟件分析工具。在網(wǎng)址 /validation.html中，你能夠找到更多有效的HTML工具。 45 避免錯(cuò)誤鏈接 網(wǎng)站中可能與其它一些有用的站點(diǎn)作了鏈接。但是

43、，如果在你的網(wǎng)頁(yè)上有鏈接，一定要經(jīng)常檢查它們，保證鏈接有效。鏈接的網(wǎng)站可能很多，但不要鏈接到與你的內(nèi)容無(wú)關(guān)的網(wǎng)站上。 46 給觀眾成熟的東西 如果網(wǎng)站沒有完成，就不要發(fā)送到Web上。所有好的網(wǎng)站都是在幕后完成之后再發(fā)布的。 47 在搜索引擎上登記網(wǎng)站 任何一個(gè)人發(fā)現(xiàn)你的網(wǎng)站的機(jī)會(huì)都很少，除非你把你的網(wǎng)站在主要的搜索引擎上進(jìn)行登記。 48 設(shè)計(jì)一個(gè)留言板 瀏覽者愿意把時(shí)間花在好的網(wǎng)站上，所以最好有一個(gè)留言本，這能激勵(lì)訪問(wèn)者再次回到你的網(wǎng)站，還有助于擴(kuò)充網(wǎng)站內(nèi)容。 49 測(cè)試網(wǎng)站 在你的網(wǎng)站正式發(fā)布之前，必須進(jìn)行有用的測(cè)試。在設(shè)計(jì)網(wǎng)站時(shí)要使用最新的軟件，但是不要忘了人們并不會(huì)使用最新的瀏覽器，所以

44、要照顧到以前的瀏覽器。在上載網(wǎng)站時(shí)還要測(cè)試所有的鏈接和導(dǎo)航工具條。 50 “盡你所能反復(fù)測(cè)試所設(shè)計(jì)的網(wǎng)站，直到你不能發(fā)現(xiàn)新的東西為止。” 專家忠告 51 演示即將發(fā)布的網(wǎng)站 在網(wǎng)站正式運(yùn)行之前，讓人演示它。演示中人們會(huì)告訴你所設(shè)計(jì)的網(wǎng)站是否容易使用。 52 動(dòng)畫點(diǎn)綴 網(wǎng)頁(yè)上的動(dòng)畫最多只用一個(gè)53 “傾斜的按鈕看起來(lái)不會(huì)太好，最好不要使用。” 專家忠告 54 內(nèi)容組織 在開始創(chuàng)建新的網(wǎng)頁(yè)前，仔細(xì)考慮網(wǎng)站內(nèi)容的組織。決定好想讓訪問(wèn)者瀏覽的內(nèi)容，然后設(shè)計(jì)導(dǎo)航系統(tǒng)。 55 “空白萬(wàn)歲” 注意留空白。不要用圖像、文本和不必要的動(dòng)畫GIFs來(lái)充斥網(wǎng)頁(yè)，即使有足夠的空間，在設(shè)計(jì)時(shí)也應(yīng)該避免使用。 56 “利

45、用空白去吸引注意力。為了吸引眼球，Web設(shè)計(jì)者使用各種方法，比如：閃爍、旋轉(zhuǎn)等，但是利用空白會(huì)吸引更多的注意力?！?專家忠告 57 圖像壓縮 為了保持小的圖像，可以使用類似GIF向?qū)У某绦?，它能自?dòng)對(duì)圖像進(jìn)行壓縮。 先聲明圖像的大小，在圖像顯示之前最好能詳細(xì)說(shuō)明圖像大小屬性，可以在IMG標(biāo)簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因?yàn)闉g覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。 58 設(shè)計(jì)失敗的網(wǎng)站 boo 在它上面找一件T恤衫要花一個(gè)小時(shí) miniheroes.co.uk 不吸引人，主頁(yè)太雷贅 saturn . 設(shè)計(jì)太差 e13 . 沒有新意 song . 導(dǎo)航不知所云 59 圖像大小屬

46、性，可以在IMG標(biāo)簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因?yàn)闉g覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。 60 用戶注冊(cè) 如果能知道誰(shuí)瀏覽了網(wǎng)站以及是怎樣瀏覽網(wǎng)站的，那么就能得到大量有用的信息。但是，要求訪問(wèn)者在瀏覽網(wǎng)站之前進(jìn)行注冊(cè)，這樣做是要冒風(fēng)險(xiǎn)的，因?yàn)檫@將趕走一批不愿意注冊(cè)的人。獲得信息的另一種方法是進(jìn)行有獎(jiǎng)競(jìng)猜或金錢獎(jiǎng)勵(lì)，讓用戶能主動(dòng)填一些信息反饋表。 61 使網(wǎng)站具有交互功能 在網(wǎng)站上提供一些回答問(wèn)題的工具，使得訪問(wèn)者能從網(wǎng)站上獲得交互的信息。 62 圖片更新 盡可能經(jīng)常更換網(wǎng)站上的圖片，人們更愿意點(diǎn)擊的是圖片而不是文本。 63 在網(wǎng)站上提供游戲 游戲是很好的交互工具，它是使

47、訪問(wèn)者能再次光顧網(wǎng)站的好方法。 64 挑選工具軟件 仔細(xì)選擇Web設(shè)計(jì)工具。保證使用自己最想要的、自我感覺最好的軟件。 65 使用最新版本的軟件盡量使用Web設(shè)計(jì)軟件的最新版本，還應(yīng)當(dāng)能被授權(quán)進(jìn)行免費(fèi)或便宜的升級(jí)。六、下載安裝Dreamweaver8一、下載Dreamweaver8中文版Dreamweaver8具有全新的操作界面和改進(jìn)的產(chǎn)品性能，它具有在量的新特色，能 夠大大提高產(chǎn)品的可用性，并使“設(shè)計(jì)”視圖和“代碼”視圖的操作更為簡(jiǎn)便。 使用中文版Dreamweaver8不僅可以在短期內(nèi)迅速快捷地制作出精美的頁(yè)面，還能夠十分方便地管理和維護(hù)站點(diǎn)。中文版Dreamweaver8集網(wǎng)產(chǎn)設(shè)計(jì)、制作

48、和發(fā)布于一體，學(xué)會(huì)使用中文版Dreamweaver8后，不僅意味著能夠獨(dú)立設(shè)計(jì)、制作、維護(hù)和管理獨(dú)具一格的網(wǎng)站，還意味著你掌握了一門基本技能。中文版Dreamweaver 8目前是最新的版本， HYPERLINK :/ /soft/22017.htm 下載地點(diǎn)請(qǐng)點(diǎn)擊這里， 點(diǎn)擊下載后，請(qǐng)你選擇一個(gè)離你家較近地點(diǎn)下載，這時(shí)會(huì)出現(xiàn)如下對(duì)話框，請(qǐng)你選擇“保存”。如圖1圖 1 選擇保存在出來(lái)的對(duì)話框里再選擇保存的地點(diǎn)，本例保存在D盤，如圖2 圖 2 選擇保存位置點(diǎn)保存后，開始下載文件。圖3圖 3 正在下載文件下載后，在D盤里就有了如下的圖標(biāo)，見圖4。圖 4下載后的文件二、安裝Dreamweaver 8

49、一般較大的軟件最好不要放在C盤，因?yàn)镃盤是操作系統(tǒng)工作的地方。我們選在別的盤子里安裝。本例安裝在E盤。第一步：我們要做的工作就是在E盤里新建一個(gè)文件夾，并重新命名為DW。如圖 5 圖 5 新建一個(gè)文件夾第二步：雙擊下載的軟件”Dreamweaver 8-chs” 會(huì)出現(xiàn)如下安裝界面，如圖 6 。圖 6 安裝界面根據(jù)提示，點(diǎn)下一步，在“接受該許可協(xié)議中和條款”前點(diǎn)一下，再點(diǎn)“下一步”。如圖 7 圖 7 接受協(xié)議條款“在桌面上創(chuàng)建快捷方式”前打上鉤。如圖 8。圖 8 在桌面創(chuàng)建快捷方式下一步，點(diǎn)“更改”，在彈出的對(duì)話框中選擇安裝位置，找到E盤，雙擊”DW”文件夾，點(diǎn)“下一步”開始安裝。圖 9 選擇

50、安裝位置，開始安裝.完成安裝.如圖 10 圖 10 完成安裝第三步：注冊(cè)軟件。 雙擊桌面“Dreamweaver8”圖標(biāo)，進(jìn)行軟件注冊(cè)。如圖 11圖 11 桌面快捷方式在彈出出來(lái)的對(duì)話框里會(huì)提示你的軟件過(guò)期，你不要管它，點(diǎn)最下面的“繼續(xù)”。在彈出的對(duì)話框最上面，填上剛才復(fù)制的序列號(hào)；在下面第一小行里打上你的名，第二行打上姓，這個(gè)沒有什么特別規(guī)定。在第三行里打上你的郵箱地址，如果你沒有，那你就打上“flash8163 ”在第四行地址欄里，選“中國(guó)”將滑塊拉到底便可以看到“中國(guó)”。全部填好后，再點(diǎn)最下面的“注冊(cè)”，這時(shí)會(huì)有“注冊(cè)成功”的提示。 接著會(huì)彈出如下對(duì)話框，你選“設(shè)計(jì)器”然后點(diǎn)“確定”。

51、圖 12 選“設(shè)計(jì)器”好了，下載安裝 Dreamweaver8就寫到這里了，在實(shí)際操作中如遇到什么困難，請(qǐng)你給我留言。下面要進(jìn)行實(shí)際操練啦，沒有什么更多的理論，只是把我怎么做的簡(jiǎn)單在這里表達(dá)一下，由于水平有限，可能表達(dá)的不清楚，你可以再多看幾次。七、規(guī)劃站點(diǎn)規(guī)劃站點(diǎn)，不像直接設(shè)計(jì)編寫那么簡(jiǎn)單，事先需要做許多準(zhǔn)備工作，不僅要準(zhǔn)備建設(shè)站點(diǎn)需要的素材文字資料、圖像以及媒體文件），還要設(shè)計(jì)好資料整合的方式，并根據(jù)資料確定站點(diǎn)的風(fēng)格特點(diǎn)；同時(shí)在內(nèi)部還要整齊、有序地排列歸類站點(diǎn)中的文件，否則雜而亂的資料堆積到一起，不僅不利于將來(lái)的維護(hù)和（包括站點(diǎn)的管理，) 同時(shí)還會(huì)因?yàn)轫?yè)面間極為混亂的關(guān)系而導(dǎo)致站點(diǎn)容易出

52、現(xiàn)錯(cuò)誤。1、確定站點(diǎn)風(fēng)格訪問(wèn)互聯(lián)網(wǎng)時(shí)，可以看到形形色色的站點(diǎn)，每一個(gè)站點(diǎn)都有自己的特色，不同類型的站點(diǎn)風(fēng)格特色更不相同。站點(diǎn)的風(fēng)格是整個(gè)網(wǎng)站的靈魂，沒有風(fēng)格，就不具有自己的特色，更談不上吸引用戶訪問(wèn)站點(diǎn)。因此站 點(diǎn)設(shè)計(jì)者通常在設(shè)計(jì)之前都要規(guī)劃好站點(diǎn)的風(fēng)格。一個(gè)站點(diǎn)究竟使用什么樣的主題，要根據(jù)建站的性質(zhì)來(lái)確定。公司站點(diǎn)主要是向外界展示公司的形象，介紹公司情況以及推銷自己的產(chǎn)品；政府站點(diǎn)側(cè)重網(wǎng)上辦公，將辦公的材料放置到網(wǎng)上供人查閱；個(gè)人站點(diǎn)則希望將個(gè)人的興趣愛好展示出來(lái)，讓別人通過(guò)自己的站點(diǎn)了解自己，因此個(gè)性化更強(qiáng)一些。2、規(guī)劃站點(diǎn)結(jié)構(gòu) 一般來(lái)說(shuō)，一個(gè)站點(diǎn)包含的文件很多，大型站點(diǎn)更是如此.如果將所

53、有的文件混雜在一起，則整個(gè)站點(diǎn)顯得雜亂無(wú)章，自己看起來(lái)也很不舒服且不易管理，因此需要對(duì)站點(diǎn)的內(nèi)部結(jié)構(gòu)進(jìn)行規(guī)劃。應(yīng)該將各個(gè)文件分門別類地放到不同的文件夾下，這樣可以使整個(gè)站點(diǎn)結(jié)構(gòu)看起來(lái)?xiàng)l理清晰，井然有序，使人們通過(guò)瀏覽站點(diǎn)的結(jié)構(gòu)，就可知道該站點(diǎn)大概內(nèi)容。這樣做主要是為網(wǎng)頁(yè)設(shè)計(jì)人員在修改管理頁(yè)面文件時(shí)提供方便。在你電腦里除C盤外要新建一個(gè)站點(diǎn)的文件夾，命名如Myweb，也可以叫“我的站點(diǎn)”。然后在站點(diǎn)文件夾里再新建幾個(gè)文件夾，如下圖：圖 13 站點(diǎn)文件夾以文件后綴名分類建立文件夾，這是文件夾通常命名情況，如果你記不住它，也可以自己重新命名，但不要用中文。 adm：放置后臺(tái)管理程序，對(duì)于動(dòng)態(tài)網(wǎng)站是少

54、不了的一個(gè)文件夾 。 audio：放置音頻文件。 backup ：放置備份文件。 doc：放置Word文檔。 image：放置站點(diǎn)用到的圖片。 source：放置開發(fā)過(guò)程中編寫的源文件，如FLASH，photoshop等編輯、末合并圖層之前的圖片，保留源文件的目的是方便將來(lái)修改編輯。 video：放置視頻文件。 zip：提供給客戶下載的壓縮文件。 index.files：網(wǎng)站首頁(yè)中的各種文件，首頁(yè)使用率最高，為它單獨(dú)建一個(gè)文件夾很有必要。 web、web2：放置WEB文件夾。八、在Dreamweaver設(shè)置站點(diǎn)一、申請(qǐng)免費(fèi)空間網(wǎng)站做好后放在哪里呢，這就要有一個(gè)空間。網(wǎng)上提供免費(fèi)的空間很多，有的

55、服務(wù)質(zhì)量還是可以的，但也有服務(wù)質(zhì)量差的。我第一個(gè)申請(qǐng)的免費(fèi)空間在 :/，到現(xiàn)在還在用，只不過(guò)速度稍慢一點(diǎn)；我第二個(gè)申請(qǐng)的免費(fèi)空間是在中， :/free.icpcn /打開速度快，服務(wù)質(zhì)量還是可以的，但申請(qǐng)手續(xù)有點(diǎn)煩，在申請(qǐng)中如果有一個(gè)地方他們認(rèn)為是不真實(shí)的可能就不會(huì)批，申請(qǐng)可能在一到三天。提供免費(fèi)空間的網(wǎng)站很多，最近可用的一批免費(fèi)空間，你可以點(diǎn)這里查找。如果你的申請(qǐng)批下來(lái)了，會(huì)用電子郵件發(fā)送到你的郵箱，主要內(nèi)容是：域名、空間大小、注冊(cè)名、FTP密碼 如果你不想用免費(fèi)的空間，也可以用收費(fèi)的空間，收費(fèi)的空間申請(qǐng)很容易，只要你的錢匯到了，馬上就可以開通你的網(wǎng)站。在價(jià)格上也不等，從幾十元到幾百元以上，

56、根據(jù)你申請(qǐng)的空間大小來(lái)決定的。我們才學(xué)做網(wǎng)站，如果圖片不多，F(xiàn)LASH放的少，有100MB足夠你用了。 真的不想用收費(fèi)的空間，又不想用免費(fèi)的空間，那么你就用自己的電腦做服務(wù)器吧，詳細(xì)內(nèi)容請(qǐng)看本站“初學(xué)園地”。 二、設(shè)置站點(diǎn) 有了空間后，我們就可以在 Dreamweaver 8 里做網(wǎng)頁(yè)了。也可以先做好再申請(qǐng)空間，這個(gè)由你自己定。我是先申請(qǐng)一個(gè)空間后，才動(dòng)手做網(wǎng)站的。設(shè)置站點(diǎn)分為動(dòng)態(tài)和靜態(tài)二種，動(dòng)態(tài)網(wǎng)站的設(shè)置在“初學(xué)園地”里有介紹，在這里我就不再重復(fù)了，重點(diǎn)介靜態(tài)站點(diǎn)的設(shè)置。第一步：打開Dreamweaver 8 在菜單欄單擊“站點(diǎn)”指向“新建站點(diǎn)” 圖 14 新建站點(diǎn)第二步：在彈出的對(duì)話框里給

57、站點(diǎn)起一個(gè)名子，并在下面打上網(wǎng)站域名，然后點(diǎn)“下一步”如圖15 圖 15 命名站點(diǎn)第三步：在彈出的對(duì)話框里選擇“否，我不想使用服務(wù)器技術(shù)”。然后點(diǎn)“下一步”， 如圖16 。圖 16 選擇“否，我不想使用服務(wù)器技術(shù)”第四步：選擇站點(diǎn)文件夾存放的位置，如圖17 圖17 選擇站點(diǎn)文件夾第五步：按提示連接用FTP、并打上由服務(wù)商給你的FTP地址，用戶名和密碼，并進(jìn)行測(cè)試。如圖18圖18 填寫FTP地址及用戶名和密碼第六步：測(cè)試服務(wù)器，提示成功。如圖19 至此，站點(diǎn)設(shè)置工作完成。如果出現(xiàn)錯(cuò)誤，你要認(rèn)真核對(duì)你的用戶名、密碼和FTP地址。九、制作模板如果想讓站點(diǎn)保持統(tǒng)一的風(fēng)格或者站點(diǎn)中多個(gè)文檔包含相同的內(nèi)容

58、。對(duì)其進(jìn)行編輯，未免過(guò)于麻煩，中文版Dreamweaver 8提供的模板功能可以很方便地幫助用戶解決這些難題。模板由兩部分組成：鎖定區(qū)域和可編輯區(qū)域。對(duì)于剛創(chuàng)建的模板，所有的區(qū)域都是鎖定的，在定義模板時(shí)，可以在模板文件中定義可編輯的區(qū)域。套用該模板的頁(yè)面，只有可編輯區(qū)域是可以被改變的區(qū)域。實(shí)踐證明，用模板對(duì)于網(wǎng)頁(yè)制作者來(lái)說(shuō)省了很多的麻煩，也可以節(jié)約很多時(shí)間，同時(shí)也能減少連接上的錯(cuò)誤。 一、新建模板 在新建模板前，我勸你還是要對(duì)你的網(wǎng)站要在紙上畫一個(gè)草圖，再根據(jù)你的圖紙來(lái)定你的模板，我簡(jiǎn)單畫了一個(gè)，供參考，樣式是你自己設(shè)置的，我在這里只是舉個(gè)例子。如圖 14 圖14 網(wǎng)站草圖打開 Dreamwe

59、aver 8后，可以通過(guò)“窗口”下面的“資源”面板創(chuàng)建新的模板?？旖萱I是F11。如圖15圖15 打開資源，新建模板文檔這時(shí)你雙擊才命名的muban文件，便在DW里顯示一個(gè)空白的文件。當(dāng)你新建一個(gè)模板文檔時(shí)，Dreamweaver 8 將會(huì)在你的站點(diǎn)根目錄下自動(dòng)生成一個(gè)Templates文件夾，該文件夾專門用于放置模板文檔。如圖 16 圖16 模板專用文件夾下一步就是在這個(gè)空白的文檔中建模板了。（這個(gè)空白文檔和你做網(wǎng)頁(yè)一樣的）當(dāng)然也可以用別的方法來(lái)創(chuàng)建模板，如通過(guò)“插入”面板或者菜單選項(xiàng)可以完成模板文檔的創(chuàng)建，新建模板與創(chuàng)建模板略有不同。創(chuàng)建模板的操作方法哪下：（1） 選擇“窗口”面板|“插入”

60、菜單選項(xiàng)，打開“插入”面板。（2） 在“插入”面板中選擇“模板對(duì)象”向右點(diǎn)“創(chuàng)建模板”。（3） 也可以在一般頁(yè)面中象平時(shí)做網(wǎng)頁(yè)一樣，把頁(yè)面做好，然后點(diǎn)左上“文件”“另存為模板”等。在這里我就不一一說(shuō)了，你肯定能在實(shí)踐中摸索出來(lái)的。言規(guī)正傳，下面我們開始在剛才打開的muban文件中建模板啦。第一步：設(shè)置頁(yè)面屬性 （1）選擇菜單“修改”向下單擊“頁(yè)面屬性”，如圖17。在彈出的對(duì)話框里設(shè)置字體和邊距。Dreamweaver 8默認(rèn)設(shè)置網(wǎng)頁(yè)都留有間隙，不怎么好看，所以要全部設(shè)置為“0”如圖18 再選擇“鏈接”根據(jù)自己的喜好設(shè)置下劃線和鏈接的顏色。如圖19 圖17 打開頁(yè)面屬性圖18 設(shè)置字體和邊距圖1