網(wǎng)頁(yè)制作教程-網(wǎng)站設(shè)計(jì)

1、網(wǎng)頁(yè)制作網(wǎng)頁(yè)制作第第2章章 網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì)由于目前所見(jiàn)即所得類型的工具越來(lái)越多，由于目前所見(jiàn)即所得類型的工具越來(lái)越多，使用也越來(lái)越方便，所以制作網(wǎng)頁(yè)已經(jīng)變成了使用也越來(lái)越方便，所以制作網(wǎng)頁(yè)已經(jīng)變成了一件輕松的工作，不像以前要手工編寫(xiě)一行行一件輕松的工作，不像以前要手工編寫(xiě)一行行的源代碼那樣。的源代碼那樣。一般初學(xué)者經(jīng)過(guò)短暫的學(xué)習(xí)就可以學(xué)會(huì)制一般初學(xué)者經(jīng)過(guò)短暫的學(xué)習(xí)就可以學(xué)會(huì)制作網(wǎng)頁(yè)，于是認(rèn)為網(wǎng)頁(yè)制作非常簡(jiǎn)單，就匆匆作網(wǎng)頁(yè)，于是認(rèn)為網(wǎng)頁(yè)制作非常簡(jiǎn)單，就匆匆忙忙制作自己的網(wǎng)站，可是做出來(lái)之后與別人忙忙制作自己的網(wǎng)站，可是做出來(lái)之后與別人一比，才發(fā)現(xiàn)自己的網(wǎng)站非常粗糙，這是為什一比，才發(fā)現(xiàn)自己的網(wǎng)

2、站非常粗糙，這是為什么呢？么呢？建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個(gè)步驟，按部就班地一步步來(lái)，才能有遵循這個(gè)步驟，按部就班地一步步來(lái)，才能設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。制作網(wǎng)站一般步驟：制作網(wǎng)站一般步驟：n確定網(wǎng)站主題確定網(wǎng)站主題 n搜集材料搜集材料 n規(guī)劃網(wǎng)站規(guī)劃網(wǎng)站 n選擇合適的制作工具選擇合適的制作工具n網(wǎng)站制作網(wǎng)站制作n網(wǎng)站本地測(cè)試網(wǎng)站本地測(cè)試 n上傳測(cè)試上傳測(cè)試 n推廣宣傳推廣宣傳 n維護(hù)更新維護(hù)更新 2.1 確定網(wǎng)站主題確定網(wǎng)站主題網(wǎng)站主題就是

3、建立的網(wǎng)站所要包含的主要網(wǎng)站主題就是建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。對(duì)于個(gè)人網(wǎng)站，必須要找準(zhǔn)一個(gè)自己最感對(duì)于個(gè)人網(wǎng)站，必須要找準(zhǔn)一個(gè)自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網(wǎng)站的主題無(wú)樣才能給用戶留下深刻的印象。網(wǎng)站的主題無(wú)定則，只要是感興趣的，任何內(nèi)容都可以，但定則，只要是感興趣的，任何內(nèi)容都可以，但主題要鮮明，在主題范圍內(nèi)內(nèi)容做到大而全、主題要鮮明，在主題范圍內(nèi)內(nèi)容做到大而全、精而深。精而深。 2.2 搜集材料搜集材料明確了網(wǎng)站的主題以后，就要圍繞

4、主題開(kāi)明確了網(wǎng)站的主題以后，就要圍繞主題開(kāi)始搜集材料了。始搜集材料了。要想讓網(wǎng)站有血有肉，能夠吸引住用戶，要想讓網(wǎng)站有血有肉，能夠吸引住用戶，就要盡量搜集材料，搜集得材料越多，以后制就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書(shū)、報(bào)紙、作網(wǎng)站就越容易。材料既可以從圖書(shū)、報(bào)紙、光盤(pán)、多媒體上得來(lái)，也可以從互聯(lián)網(wǎng)上搜集，光盤(pán)、多媒體上得來(lái)，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。自己制作網(wǎng)頁(yè)的素材。 2.3 規(guī)劃網(wǎng)站規(guī)劃網(wǎng)站一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度

5、上決定于設(shè)計(jì)者的規(guī)劃水平。定于設(shè)計(jì)者的規(guī)劃水平。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站欄目的網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站欄目的設(shè)置、網(wǎng)站的風(fēng)格等。設(shè)置、網(wǎng)站的風(fēng)格等。在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來(lái)的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有此制作出來(lái)的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有吸引力。吸引力。1. 網(wǎng)站欄目設(shè)置網(wǎng)站欄目設(shè)置網(wǎng)站欄目結(jié)構(gòu)：網(wǎng)站欄目結(jié)構(gòu)：網(wǎng)站首頁(yè)網(wǎng)站首頁(yè)一級(jí)欄目首頁(yè)一級(jí)欄目首頁(yè)二二級(jí)級(jí)欄欄目目首頁(yè)首頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)網(wǎng)站首頁(yè)網(wǎng)站首頁(yè)一級(jí)欄目首頁(yè)一級(jí)欄目首頁(yè)二二級(jí)級(jí)欄欄目

6、目首頁(yè)首頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)合理的欄目設(shè)置合理的欄目設(shè)置n通過(guò)主頁(yè)可以到達(dá)任何一個(gè)一級(jí)欄目首頁(yè)、二通過(guò)主頁(yè)可以到達(dá)任何一個(gè)一級(jí)欄目首頁(yè)、二級(jí)欄目首頁(yè)以及最終內(nèi)容頁(yè)面；級(jí)欄目首頁(yè)以及最終內(nèi)容頁(yè)面；n通過(guò)任何一個(gè)網(wǎng)頁(yè)可以返回上一級(jí)欄目頁(yè)面并通過(guò)任何一個(gè)網(wǎng)頁(yè)可以返回上一級(jí)欄目頁(yè)面并逐級(jí)返回主頁(yè)；逐級(jí)返回主頁(yè)；n主欄目清晰并且全站統(tǒng)一；主欄目清晰并且全站統(tǒng)一；n通過(guò)任何一個(gè)網(wǎng)頁(yè)可以進(jìn)入任何一個(gè)一級(jí)欄目通過(guò)任何一個(gè)網(wǎng)頁(yè)可以進(jìn)入任何一個(gè)一級(jí)欄目首頁(yè)。首頁(yè)。 2.網(wǎng)站的風(fēng)格網(wǎng)站的風(fēng)格網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。給瀏覽者的綜合感受。 這個(gè)這個(gè)“整體

7、形象整體形象”包括站點(diǎn)的包括站點(diǎn)的CI（標(biāo)志，（標(biāo)志，色彩，字體，標(biāo)語(yǔ)），版面布局，瀏覽方式，色彩，字體，標(biāo)語(yǔ)），版面布局，瀏覽方式，交互性，文字，語(yǔ)氣，內(nèi)容價(jià)值，存在意義，交互性，文字，語(yǔ)氣，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。站點(diǎn)榮譽(yù)等等諸多因素。 迪斯尼網(wǎng)站迪斯尼網(wǎng)站IBM網(wǎng)站網(wǎng)站玫瑰婚典網(wǎng)站玫瑰婚典網(wǎng)站2.4 選擇合適的制作工具選擇合適的制作工具 盡管選擇什么樣的工具并不會(huì)影響設(shè)計(jì)網(wǎng)頁(yè)盡管選擇什么樣的工具并不會(huì)影響設(shè)計(jì)網(wǎng)頁(yè)的好壞，但是一款功能強(qiáng)大、使用簡(jiǎn)單的軟件往的好壞，但是一款功能強(qiáng)大、使用簡(jiǎn)單的軟件往往可以起到事半功倍的效果。往可以起到事半功倍的效果。網(wǎng)頁(yè)制作涉及的工具比較多

8、，首先就是網(wǎng)頁(yè)網(wǎng)頁(yè)制作涉及的工具比較多，首先就是網(wǎng)頁(yè)制作工具了，目前大多數(shù)網(wǎng)民選用的都是所見(jiàn)即制作工具了，目前大多數(shù)網(wǎng)民選用的都是所見(jiàn)即所得（所得（WYSIWYG）的編輯工具，這其中的優(yōu)秀）的編輯工具，這其中的優(yōu)秀者當(dāng)然是者當(dāng)然是Dreamweaver和和Frontpage了。了。Macromedia Dreamweaver 8是一款專是一款專業(yè)的網(wǎng)站開(kāi)發(fā)編輯器，用于對(duì)業(yè)的網(wǎng)站開(kāi)發(fā)編輯器，用于對(duì)Web站點(diǎn)、站點(diǎn)、Web頁(yè)和頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)，整個(gè)生產(chǎn)過(guò)程可以自動(dòng)化，增強(qiáng)開(kāi)發(fā)小組發(fā)，整個(gè)生產(chǎn)過(guò)程可以自動(dòng)化，增強(qiáng)開(kāi)發(fā)小組的工作效率。無(wú)論用戶是喜歡可視化

9、的網(wǎng)頁(yè)開(kāi)的工作效率。無(wú)論用戶是喜歡可視化的網(wǎng)頁(yè)開(kāi)發(fā)環(huán)境還是喜歡手寫(xiě)代碼，發(fā)環(huán)境還是喜歡手寫(xiě)代碼，Dreamweaver 8都能提供有用的工具。都能提供有用的工具。 除此之外，還有圖片編輯工具，如除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動(dòng)畫(huà)制作工等；動(dòng)畫(huà)制作工具，如具，如Flash、Cool 3d、Gif Animator等；等；還有網(wǎng)頁(yè)特效工具，如有聲有色等，網(wǎng)上有許還有網(wǎng)頁(yè)特效工具，如有聲有色等，網(wǎng)上有許多這方面的軟件，可以根據(jù)需要靈活運(yùn)用。多這方面的軟件，可以根據(jù)需要靈活運(yùn)用。2.5 網(wǎng)站制作網(wǎng)站制作網(wǎng)站制作即網(wǎng)站制作即Web站點(diǎn)開(kāi)發(fā)，需要掌握相應(yīng)站點(diǎn)開(kāi)

10、發(fā)，需要掌握相應(yīng)的技術(shù)。的技術(shù)。網(wǎng)頁(yè)程序設(shè)計(jì)：網(wǎng)頁(yè)程序設(shè)計(jì)： nHTML語(yǔ)言語(yǔ)言CSS版面設(shè)計(jì)版面設(shè)計(jì)腳本語(yǔ)言腳本語(yǔ)言服服務(wù)器動(dòng)態(tài)語(yǔ)言務(wù)器動(dòng)態(tài)語(yǔ)言數(shù)據(jù)庫(kù)數(shù)據(jù)庫(kù)XML相關(guān)相關(guān)開(kāi)發(fā)工具開(kāi)發(fā)工具使用使用 網(wǎng)頁(yè)美工：網(wǎng)頁(yè)美工： n（美術(shù)基礎(chǔ)）（美術(shù)基礎(chǔ)）HTML語(yǔ)言語(yǔ)言CSS版面設(shè)計(jì)版面設(shè)計(jì)色彩構(gòu)成色彩構(gòu)成電腦圖像處理軟件使用電腦圖像處理軟件使用電腦動(dòng)電腦動(dòng)畫(huà)軟件使用畫(huà)軟件使用2.6 網(wǎng)站本地測(cè)試網(wǎng)站本地測(cè)試 網(wǎng)站制作完畢，要首先進(jìn)行本地測(cè)試，以便網(wǎng)站制作完畢，要首先進(jìn)行本地測(cè)試，以便檢查網(wǎng)站是否能夠正常使用。檢查網(wǎng)站是否能夠正常使用。本地測(cè)試需要在本地機(jī)器上建立本地測(cè)試需要在本地機(jī)器上建立Web服務(wù)

11、器服務(wù)器功能，通?？梢允褂霉δ?，通?？梢允褂肳indows系統(tǒng)的系統(tǒng)的IIS（Internet信息服務(wù)）軟件或者信息服務(wù)）軟件或者Linux系統(tǒng)的系統(tǒng)的Apache軟件建立。軟件建立。IIS是是Windows的組件，通過(guò)的組件，通過(guò)Windows安裝安裝光盤(pán)進(jìn)行安裝。光盤(pán)進(jìn)行安裝。2.7 上傳測(cè)試上傳測(cè)試網(wǎng)站本地測(cè)試后，最后要發(fā)布到遠(yuǎn)程的網(wǎng)站本地測(cè)試后，最后要發(fā)布到遠(yuǎn)程的Web服服務(wù)器上，才能夠讓務(wù)器上，才能夠讓Internet的朋友觀看。的朋友觀看?，F(xiàn)在上傳的工具有很多，例如現(xiàn)在上傳的工具有很多，例如CuteFTP、FlashFTP等。等。有些網(wǎng)頁(yè)制作工具本身就帶有有些網(wǎng)頁(yè)制作工具本身就帶有FTP功能，可以很功能，可以很方便地把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁(yè)存放服務(wù)器上。方便地把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁(yè)存放服務(wù)器上。網(wǎng)站上傳以后，在瀏覽器中打開(kāi)網(wǎng)站，逐頁(yè)逐個(gè)網(wǎng)站上傳以后，在瀏覽器中打開(kāi)網(wǎng)站，逐頁(yè)逐個(gè)鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問(wèn)題，及時(shí)修改，然后再上鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問(wèn)題，及時(shí)修改，然后再上傳測(cè)試。傳測(cè)試。2.8 推廣宣傳推廣宣傳 網(wǎng)頁(yè)做好之后，還要不斷地進(jìn)行宣傳，這網(wǎng)頁(yè)做好之后，還要不斷地進(jìn)行宣傳，這樣才能讓更多的朋友認(rèn)識(shí)它，提高網(wǎng)站的訪問(wèn)樣才能讓更多的朋友認(rèn)識(shí)它，提高網(wǎng)站的訪問(wèn)率和知名度。推廣的方法有很多，例如到搜索率和知名度。推廣的方法