第1篇 網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)入門篇

第1章 網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)基礎(chǔ)

本章導(dǎo)讀

網(wǎng)頁對(duì)大多數(shù)網(wǎng)民來說并不陌生，但常見的網(wǎng)站類型、網(wǎng)站建設(shè)的基本流程、常用的網(wǎng)頁制作工具等并不是每個(gè)網(wǎng)民都知道。為了能夠使網(wǎng)頁制作初學(xué)者對(duì)網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)有一個(gè)總體認(rèn)識(shí)，從而為后面設(shè)計(jì)更復(fù)雜的網(wǎng)站打下良好的基礎(chǔ)。

內(nèi)容要點(diǎn)

◎ 熟悉常見的網(wǎng)站類型

◎ 熟悉常用網(wǎng)頁設(shè)計(jì)軟件和技術(shù)

◎ 掌握網(wǎng)站建設(shè)的一般流程

學(xué)習(xí)流程

1.1 常見的網(wǎng)站類型

網(wǎng)站就是把一個(gè)個(gè)網(wǎng)頁系統(tǒng)地鏈接起來的集合，如新浪、搜狐、網(wǎng)易等。網(wǎng)站按其內(nèi)容的不同可分為個(gè)人網(wǎng)站、企業(yè)類網(wǎng)站、機(jī)構(gòu)類網(wǎng)站、娛樂休閑類網(wǎng)站、行業(yè)信息類網(wǎng)站、門戶網(wǎng)站和購物類網(wǎng)站等，下面分別進(jìn)行介紹。

1.1.1 個(gè)人網(wǎng)站

個(gè)人網(wǎng)站是以個(gè)人名義開發(fā)創(chuàng)建的具有較強(qiáng)個(gè)性化的網(wǎng)站。一般是個(gè)人為了興趣愛好或展示個(gè)人等目的而創(chuàng)建的，具有較強(qiáng)的個(gè)性化特色，帶有很明顯的個(gè)人色彩，無論從內(nèi)容、風(fēng)格、樣式上都形色各異、包羅萬象。

這類網(wǎng)站一般不具有商業(yè)性質(zhì)，通常規(guī)模不大，在互聯(lián)網(wǎng)中隨處可見，也有不少優(yōu)秀的站點(diǎn)，圖1-1所示為個(gè)人網(wǎng)站。

1.1.2 企業(yè)類網(wǎng)站

所謂企業(yè)網(wǎng)站，就是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形象宣傳的平臺(tái)。企業(yè)網(wǎng)站就相當(dāng)于一個(gè)企業(yè)的網(wǎng)絡(luò)名片。企業(yè)網(wǎng)站不但對(duì)企業(yè)的形象是一個(gè)良好的宣傳，同時(shí)可以輔助企業(yè)的銷售，甚至可以通過網(wǎng)絡(luò)直接幫助企業(yè)實(shí)現(xiàn)產(chǎn)品的銷售。企業(yè)網(wǎng)站的作用為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)，圖1-2所示為企業(yè)類網(wǎng)站。

企業(yè)網(wǎng)站的作用類似于企業(yè)在報(bào)紙和電視上所做的宣傳公司本身及品牌的廣告。不同之處在于企業(yè)網(wǎng)站容量更大，企業(yè)幾乎可以把任何想讓客戶及公眾知道的內(nèi)容放入網(wǎng)站。

圖1-1 個(gè)人網(wǎng)站

圖1-2 企業(yè)類網(wǎng)站

1.1.3 機(jī)構(gòu)類網(wǎng)站

所謂機(jī)構(gòu)類網(wǎng)站通常指政府機(jī)關(guān)、非營(yíng)利性機(jī)構(gòu)或相關(guān)社團(tuán)組織建立的網(wǎng)站，網(wǎng)站的內(nèi)容多以機(jī)構(gòu)或社團(tuán)的形象宣傳和政府服務(wù)為主，網(wǎng)站的設(shè)計(jì)通常風(fēng)格一致、功能明確，受眾面也較為明確，內(nèi)容上相對(duì)較為專一，圖1-3所示為機(jī)構(gòu)類網(wǎng)站。

政府機(jī)構(gòu)類網(wǎng)站作為政府提供為民服務(wù)的窗口，是有別于娛樂類網(wǎng)站的，作為機(jī)構(gòu)網(wǎng)站，應(yīng)該大方、莊重、美觀，切忌花哨和笨重，格調(diào)明朗。在頁面設(shè)計(jì)時(shí)要采用友好的網(wǎng)站界面，合理、清晰的網(wǎng)站導(dǎo)航，完善的幫助系統(tǒng)，完整的信息和完善的在線服務(wù)等，方便網(wǎng)站用戶。

圖1-3 機(jī)構(gòu)類網(wǎng)站

1.1.4 娛樂休閑類網(wǎng)站

隨著互聯(lián)網(wǎng)的飛速發(fā)展，不僅涌現(xiàn)出了很多個(gè)人網(wǎng)站和商業(yè)網(wǎng)站，同時(shí)也產(chǎn)生了很多的娛樂休閑類網(wǎng)站，如電影網(wǎng)站、音樂網(wǎng)站、游戲網(wǎng)站、交友網(wǎng)站、社區(qū)論壇、手機(jī)短信網(wǎng)站等。這些網(wǎng)站為廣大網(wǎng)民提供了娛樂休閑的場(chǎng)所。

它們提供豐富多彩的娛樂內(nèi)容。這類網(wǎng)站的特點(diǎn)也非常顯著，通常色彩鮮艷明快，內(nèi)容綜合，多配以大量圖片，設(shè)計(jì)風(fēng)格或輕松活潑，或時(shí)尚另類，圖1-4所示為在線視頻網(wǎng)站。

娛樂網(wǎng)站的設(shè)計(jì)要以內(nèi)容為著手點(diǎn)，在網(wǎng)站設(shè)計(jì)規(guī)劃前，首先要對(duì)信息內(nèi)容進(jìn)行必要的分析，探討網(wǎng)站的定位和采用的設(shè)計(jì)方式，并且通過色彩、圖像和細(xì)節(jié)設(shè)計(jì)等多個(gè)方面共同營(yíng)造符合網(wǎng)站信息內(nèi)容的文化氣質(zhì)。

圖1-4 在線視頻網(wǎng)站

1.1.5 行業(yè)信息類網(wǎng)站

隨著互聯(lián)網(wǎng)的發(fā)展、網(wǎng)民人數(shù)的增多及網(wǎng)上不同興趣群體的形成，門戶網(wǎng)站已經(jīng)明顯不能滿足不同上網(wǎng)群體的需要。一批能夠滿足某一特定領(lǐng)域上網(wǎng)人群及其特定需要的網(wǎng)站應(yīng)運(yùn)而生。由于這些網(wǎng)站的內(nèi)容服務(wù)更為專一和深入，因此人們將其稱為行業(yè)信息類網(wǎng)站，也稱為垂直網(wǎng)站。行業(yè)信息類網(wǎng)站只專注于某一特定領(lǐng)域，并通過提供特定的服務(wù)內(nèi)容，有效地把對(duì)某一特定領(lǐng)域感興趣的用戶與其他網(wǎng)民區(qū)分開，并長(zhǎng)期持久地吸引這些用戶，從而為其發(fā)展提供理想的平臺(tái)，圖1-5所示是行業(yè)信息類網(wǎng)站搜房網(wǎng)。

圖1-5 行業(yè)信息類網(wǎng)站搜房網(wǎng)

1.1.6 購物類網(wǎng)站

隨著網(wǎng)絡(luò)的普及和人們生活水平的提高，網(wǎng)上購物已成為一種時(shí)尚。豐富多彩的網(wǎng)上資源、價(jià)格實(shí)惠的打折商品、服務(wù)優(yōu)良送貨上門的購物方式，已成為人們休閑、購物兩不誤的首選方式。網(wǎng)上購物也為商家有效地利用資金提供了幫助，而且通過互聯(lián)網(wǎng)來宣傳自己的產(chǎn)品覆蓋面較廣，因此現(xiàn)實(shí)生活中涌現(xiàn)出了越來越多的購物網(wǎng)站。

在線購物網(wǎng)站在技術(shù)上要求非常嚴(yán)格，其工作流程主要包括商品展示、商品瀏覽、添加購物車、結(jié)賬等，圖1-6所示為購物類網(wǎng)站。

圖1-6 購物類網(wǎng)站

1.1.7 門戶類網(wǎng)站

門戶類網(wǎng)站將無數(shù)信息整合、分類，為上網(wǎng)者打開方便之門，絕大多數(shù)網(wǎng)民通過門戶類網(wǎng)站來尋找自己感興趣的信息資源，巨大的訪問量給這類網(wǎng)站帶來了無限的商機(jī)。門戶類網(wǎng)站涉及的領(lǐng)域非常廣，是一種綜合性網(wǎng)站，如搜狐、網(wǎng)易、新浪等。此外這類網(wǎng)站還具有非常強(qiáng)大的服務(wù)功能，如搜索、論壇、聊天室、電子郵箱、虛擬社區(qū)、短信等。門戶類網(wǎng)站的外觀通常整潔大方，用戶所需的信息在上面基本都能找到。

目前國(guó)內(nèi)較有影響力的門戶類網(wǎng)站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu. com）和網(wǎng)易（www.163.com）等，圖1-7所示為新浪首頁。

圖1-7 新浪首頁

1.2常用網(wǎng)頁設(shè)計(jì)軟件和技術(shù)

不論是制作大型網(wǎng)站還是一般的企業(yè)網(wǎng)站，無非都是做出一個(gè)又一個(gè)的網(wǎng)頁，再把它們鏈接起來。制作網(wǎng)頁可以直接使用HTML，也可以使用工具軟件。由于使用語言工作量很大，制作一個(gè)頁面往往要寫成百上千行代碼，非常麻煩，而且出錯(cuò)率高，錯(cuò)誤也不易檢測(cè)和排除。所以，對(duì)于大多數(shù)人來說，使用工具軟件制作網(wǎng)頁是最常用的。

用于設(shè)計(jì)網(wǎng)頁的工具軟件很多，如Adobe公司的Dreamweaver、Flash、Fireworks，以及微軟公司的FrontPage等，都是很受歡迎的網(wǎng)頁制作工具，擁有龐大的用戶群。

1.2.1 網(wǎng)頁編輯排版軟件

常用的網(wǎng)頁編輯排版軟件有Dreamweaver和FrontPage。Dreamweaver是大眾化的專業(yè)網(wǎng)頁編輯排版軟件，它的排版能力較強(qiáng)，功能全面，操作靈活，專業(yè)性強(qiáng)，因而受到廣大網(wǎng)站專業(yè)設(shè)計(jì)人員的青睞。FrontPage作為Microsoft公司的辦公軟件之一，與Office的其他軟件具有高度的兼容性，且有規(guī)范、簡(jiǎn)潔的操作界面，但網(wǎng)頁制作方面的功能不如Dreamweaver強(qiáng)大。使用Dreamweaver CS5編輯網(wǎng)頁如圖1-8所示。

圖1-8 使用Dreamweaver CS5編輯網(wǎng)頁

1.2.2 網(wǎng)頁動(dòng)畫制作軟件

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁上出現(xiàn)了越來越多的Flash動(dòng)畫。一個(gè)優(yōu)秀的網(wǎng)站是離不開動(dòng)畫的，無論是Banner、按鈕、網(wǎng)站宣傳動(dòng)畫，還是整個(gè)網(wǎng)站的首頁等，都需要使用動(dòng)畫制作軟件。Flash動(dòng)畫已經(jīng)成為當(dāng)今網(wǎng)站必不可少的部分，美觀的動(dòng)畫能夠?yàn)榫W(wǎng)頁增色不少，從而吸引更多的瀏覽者。使用Flash CS5制作的動(dòng)畫如圖1-9所示。

圖1-9 Flash CS5制作的動(dòng)畫

1.2.3 網(wǎng)頁圖像設(shè)計(jì)軟件

常用的圖像設(shè)計(jì)軟件有Photoshop和Fireworks。Photoshop是Adobe公司推出的圖像處理軟件。它具有界面友好、易學(xué)、易用等優(yōu)點(diǎn)，目前已被廣泛應(yīng)用于印刷、廣告設(shè)計(jì)、封面制作、網(wǎng)頁圖像制作和照片編輯等領(lǐng)域。在網(wǎng)頁制作過程中，首先要使用Photoshop設(shè)計(jì)網(wǎng)頁的整體效果圖、處理網(wǎng)頁中的圖像、背景圖處理、網(wǎng)頁圖標(biāo)和按鈕的設(shè)計(jì)等。使用Photoshop CS5設(shè)計(jì)的網(wǎng)頁圖像效果如圖1-10所示。

圖1-10 Photoshop CS5設(shè)計(jì)的網(wǎng)頁圖像

Fireworks CS5是一款用來設(shè)計(jì)網(wǎng)頁圖形的應(yīng)用程序，它所含的創(chuàng)新性解決方案解決了圖形設(shè)計(jì)人員和網(wǎng)站管理人員面臨的主要問題。Fireworks中的工具種類齊全，使用這些工具，可以在單個(gè)文件中創(chuàng)建和編輯位圖和矢量圖像，設(shè)計(jì)網(wǎng)頁效果、修剪和優(yōu)化圖形以減小其文件大小。Fireworks CS5的工作界面如圖1-11所示。

圖1-11 Fireworks CS5的工作界面

1.2.4 網(wǎng)頁標(biāo)記語言HTML

HTML（Hyper Text Markup Language，超文本標(biāo)記語言）是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。所謂超文本，就是它可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容。

HTML的任何標(biāo)記都由“<”和“>”圍起來，如<HTML><I>。在起始標(biāo)記的標(biāo)記名前加上符號(hào)“/”便是其終止標(biāo)記，如</I>，夾在起始標(biāo)記和終止標(biāo)記之間的內(nèi)容受標(biāo)記的控制，如<I>一路順風(fēng)</I>，夾在標(biāo)記I之間的“一路順風(fēng)”將受標(biāo)記I的控制。

超文本文檔分為頭和主體兩部分，在文檔頭中，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔主體中才是要顯示的各種文檔信息，代碼如下：

    <HTML>
          <HEAD>
            網(wǎng)頁頭部信息
          </HEAD>
            <BODY>
    網(wǎng)頁主體正文部分
            </BODY>
    </HTML>

● HTML標(biāo)記

<HTML>標(biāo)記用于HTML文檔的最前面，用來標(biāo)識(shí)HTML文檔的開始。而</HTML>標(biāo)記恰恰相反，它放在HTML文檔的最后面，用來標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)記必須一起使用。

● Head標(biāo)記

<Head>和</Head>構(gòu)成HTML文檔的開頭部分，在此標(biāo)記對(duì)之間可以使用<Title></Title>、<Script></Script>等標(biāo)記對(duì)，它們都是用來描述HTML文檔相關(guān)信息的標(biāo)記對(duì)，<Head></Head>標(biāo)記對(duì)之間的內(nèi)容不會(huì)在瀏覽器中顯示，兩個(gè)標(biāo)記必須一塊使用。

● Body標(biāo)記

<Body></Body>是HTML文檔的主體部分，在此標(biāo)記對(duì)之間可包含<p> </p>、<h1> </h1>、<br> </br>等眾多的標(biāo)記，它們所定義的文本、圖像等將在瀏覽器中顯示，兩個(gè)標(biāo)記必須一起使用。

● Title標(biāo)記

使用過瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁的“標(biāo)題”，要將網(wǎng)頁的標(biāo)題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在<Title></Title>標(biāo)記對(duì)之間加入要顯示的文本即可。

1.2.5 網(wǎng)頁腳本語言

使用VBScript、JavaScript等簡(jiǎn)單易懂的腳本語言，結(jié)合HTML代碼，即可快速完成網(wǎng)站的應(yīng)用程序。

腳本語言（如JavaScript，VBScript等）介于HTML和C、C++、Java、C#等編程語言之間。腳本是使用一種特定的描述性語言，依據(jù)一定的格式編寫的可執(zhí)行文件，又稱為宏或批處理文件。腳本通常可以由應(yīng)用程序臨時(shí)調(diào)用并執(zhí)行。各類腳本目前被廣泛地應(yīng)用于網(wǎng)頁設(shè)計(jì)中，因?yàn)槟_本不僅可以減小網(wǎng)頁的規(guī)模和提高網(wǎng)頁瀏覽速度，而且可以豐富網(wǎng)頁的表現(xiàn)，如動(dòng)畫、聲音等。

腳本與VB、C語言的區(qū)別主要是：

● 腳本語法比較簡(jiǎn)單，容易掌握。

● 腳本與應(yīng)用程序密切相關(guān)，所以包括相對(duì)應(yīng)用程序自身的功能。

● 腳本一般不具備通用性，所能處理的問題范圍有限。

● 腳本多為解釋執(zhí)行。

圖1-12所示為使用腳本語言制作的特效漂浮廣告網(wǎng)頁。

圖1-12 使用腳本語言制作的漂浮廣告網(wǎng)頁

1.2.6 動(dòng)態(tài)網(wǎng)頁編程語言ASP

所謂動(dòng)態(tài)網(wǎng)頁是指網(wǎng)頁文件中包含了程序代碼，通過后臺(tái)數(shù)據(jù)庫與Web服務(wù)器的信息交互，由后臺(tái)數(shù)據(jù)庫提供實(shí)時(shí)數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。這種網(wǎng)頁的擴(kuò)展名一般根據(jù)不同的程序設(shè)計(jì)語言而有所不同，如常見的以.asp、.jsp、.php、.perl、.cgi等形式為擴(kuò)展名。

ASP（Active Server Pages）是微軟公司開發(fā)的服務(wù)器端腳本環(huán)境，內(nèi)含IIS3.0及以上版本，通過ASP可以結(jié)合HTML網(wǎng)頁、ASP指令和ActiveX控件，建立動(dòng)態(tài)、交互且高效的Web服務(wù)器應(yīng)用程序。有了ASP就不必?fù)?dān)心客戶的瀏覽器是否能夠運(yùn)行所有編寫代碼，因?yàn)樗械某绦蚨紝⒃诜?wù)器端執(zhí)行，包括所有嵌在普通HTML中的腳本程序。當(dāng)程序執(zhí)行完畢后，服務(wù)器僅將執(zhí)行的結(jié)果返回給客戶端瀏覽器，這樣就減輕了客戶端瀏覽器的負(fù)擔(dān)，大大提高了交互為速度。

圖1-13 所示為使用ASP開發(fā)的動(dòng)態(tài)網(wǎng)頁，在“用戶名”和“密碼”文本框中輸入正確的內(nèi)容，然后單擊“登錄”按鈕，即可進(jìn)入后臺(tái)管理頁面。

圖1-13 使用ASP開發(fā)的動(dòng)態(tài)網(wǎng)頁

1.3網(wǎng)站建設(shè)的一般流程

創(chuàng)建一個(gè)網(wǎng)站并不復(fù)雜，但要?jiǎng)?chuàng)建一個(gè)優(yōu)秀的網(wǎng)站則并非易事。創(chuàng)建網(wǎng)站前了解一下網(wǎng)站建設(shè)的基本流程是十分必要的。因?yàn)榫W(wǎng)站建設(shè)流程可以明確網(wǎng)站的目標(biāo)和方向，提高效率，使網(wǎng)站的結(jié)構(gòu)更加清晰，起到事半功倍的效果。

1.3.1 網(wǎng)站的需求分析

不論是簡(jiǎn)單的個(gè)人主頁，還是復(fù)雜的、幾千個(gè)頁面的大型網(wǎng)站，對(duì)網(wǎng)站的需求分析都要放到第一步，因?yàn)樗苯雨P(guān)系到網(wǎng)站的功能是否完善、是否夠?qū)哟巍⑹欠襁_(dá)到預(yù)期的目的等。

需求分析是指通過分析單位的戰(zhàn)略目標(biāo)和管理情況，確定網(wǎng)絡(luò)建設(shè)的必要性、目標(biāo)、功能和主要工作等。因?yàn)榫W(wǎng)站對(duì)外樹立形象、發(fā)布重大信息、提供技術(shù)支持、客戶服務(wù)甚至進(jìn)行電子商務(wù)等，所以只有詳細(xì)了解和分析需求才能設(shè)計(jì)出適合自己特點(diǎn)的網(wǎng)站，對(duì)于大型商業(yè)網(wǎng)站還要進(jìn)行可行性研究。

網(wǎng)站的需求分析主要包括以下幾點(diǎn)。

● 了解相關(guān)行業(yè)的市場(chǎng)是怎樣的，市場(chǎng)有什么樣的特點(diǎn)，是否能夠在互聯(lián)網(wǎng)上開展公司業(yè)務(wù)。

● 市場(chǎng)主要競(jìng)爭(zhēng)者分析，分析競(jìng)爭(zhēng)對(duì)手上網(wǎng)情況及其網(wǎng)站規(guī)劃、功能作用。

● 確定網(wǎng)站建設(shè)的目的是為了宣傳產(chǎn)品，進(jìn)行電子商務(wù)，還是建立行業(yè)性網(wǎng)站。

● 確定哪些人應(yīng)該參與網(wǎng)站開發(fā)項(xiàng)目的需求分析活動(dòng)。

● 在需求分析的工程中，往往有很多不明確的用戶需求，這時(shí)項(xiàng)目負(fù)責(zé)人需要調(diào)查用戶的實(shí)際情況，明確用戶需求。

● 通過市場(chǎng)調(diào)研活動(dòng)，分析同類網(wǎng)站的功能，可以幫助項(xiàng)目負(fù)責(zé)人更加清楚地構(gòu)想出自己開發(fā)的網(wǎng)站的大體架構(gòu)和模樣，在總結(jié)同類網(wǎng)站優(yōu)勢(shì)和缺點(diǎn)的同時(shí)，博采眾長(zhǎng)，開發(fā)出更加優(yōu)秀的網(wǎng)站。

1.3.2 規(guī)劃站點(diǎn)結(jié)構(gòu)

網(wǎng)站規(guī)劃是網(wǎng)站開發(fā)必不可少的重要一環(huán)，直接關(guān)系到整個(gè)網(wǎng)站的整體風(fēng)格、布局結(jié)構(gòu)等，規(guī)劃內(nèi)容包括顏色風(fēng)格傾向、網(wǎng)站欄目設(shè)置、結(jié)構(gòu)布局及功能實(shí)現(xiàn)等。如果是公司網(wǎng)站或商業(yè)網(wǎng)站還需要進(jìn)行網(wǎng)站客戶分析、目標(biāo)定位、營(yíng)銷方案、網(wǎng)站品牌規(guī)劃、軟/硬件配置及數(shù)據(jù)庫開發(fā)方案，如果是電子商務(wù)網(wǎng)站，還需要進(jìn)行電子商務(wù)方案分析與確定。圖1-14所示為規(guī)劃的站點(diǎn)結(jié)構(gòu)。

圖1-14 規(guī)劃的站點(diǎn)結(jié)構(gòu)

目前大多數(shù)網(wǎng)站缺乏靈魂，主旨松散、混亂，原因就在于缺乏策劃。在建立自己的企業(yè)站點(diǎn)時(shí)，網(wǎng)站策劃貫穿于網(wǎng)站建設(shè)的全過程，是網(wǎng)站建設(shè)最重要的環(huán)節(jié)，也是最容易被企業(yè)忽視的環(huán)節(jié)。

規(guī)劃一個(gè)網(wǎng)站，可以用樹狀結(jié)構(gòu)先把每個(gè)頁面的內(nèi)容大綱列出來，尤其當(dāng)要制作一個(gè)很大的網(wǎng)站（有很多頁面）時(shí)，必須把這個(gè)架構(gòu)規(guī)劃好，也要考慮到以后可能的擴(kuò)充性，免得做好以后又要一改再改，這樣十分累人，也十分費(fèi)錢。

大綱列出來后，還必須考慮每個(gè)頁面之間的鏈接關(guān)系，是星形、樹形還是網(wǎng)形鏈接，這也是判別一個(gè)網(wǎng)站優(yōu)劣的重要標(biāo)志。

1.3.3 收集素材

網(wǎng)頁制作之前要收集好相關(guān)的素材，對(duì)收集的素材進(jìn)行分類管理。首先要?jiǎng)?chuàng)建一個(gè)新的總目錄（文件夾），比如D:\我的網(wǎng)站，來放置建立網(wǎng)站的所有文件，然后在這個(gè)目錄下建立兩個(gè)子目錄，即“文字資料”和“圖片資料”。放入目錄中的文件名最好全部用英文小寫，因?yàn)橛行┲鳈C(jī)不支持大寫和中文，以后增加的內(nèi)容可再創(chuàng)建子目錄。

1.文本內(nèi)容素材的收集

具體的文本內(nèi)容，可以讓訪問者清楚地知道作者的Web頁中想要說明的東西。我們可以從網(wǎng)絡(luò)、書本、報(bào)刊上找到需要的文字材料，也可以使用平時(shí)的試卷和復(fù)習(xí)資料，還可以自己編寫有關(guān)的文字材料，將這些素材制作成Word文檔保存在“文字資料”子目錄下。收集的文本素材既要豐富，又要便于有機(jī)地組織，這樣才能做出內(nèi)容豐富、整體感強(qiáng)的網(wǎng)站。

2.藝術(shù)內(nèi)容素材的收集

只有文本內(nèi)容的網(wǎng)站對(duì)于訪問者來講，是枯燥乏味、缺乏生機(jī)的。如果加上藝術(shù)內(nèi)容素材，如靜態(tài)圖片、動(dòng)態(tài)圖像、音像等，將使網(wǎng)頁充滿動(dòng)感與生機(jī)，也將吸引更多的訪問者。這些素材主要來自于以下4個(gè)方面。

● 從Internet上獲取。可以充分利用網(wǎng)上的共享資源，如使用百度、Sohu等引擎收集圖片素材。圖1-15所示為從百度搜索素材。

圖1-15 從百度搜索素材

● 從CD-ROM中獲取。在市面上，有許多關(guān)于圖片素材庫的光盤，也有許多教學(xué)軟件，可以選取其中的圖片資料。

● 利用現(xiàn)成圖片或自己拍攝。既可以從各種圖書出版物（如科普讀物、教科書、雜志封面、攝影集、攝影雜志等）獲取圖片，也可以使用自己拍攝和積累的照片資料。將雜志的封面彩圖用彩色掃描儀掃描下來，經(jīng)過加工后，整合制作到網(wǎng)頁中。

● 自己動(dòng)手制作一些特殊效果的圖片，特別是動(dòng)態(tài)圖像，自己動(dòng)手制作往往效果更好。可采用3ds Max或Flash進(jìn)行制作。

鑒于網(wǎng)上只能支持幾種圖片格式，所以可先將以上途徑收集的圖片用Photoshop等圖像處理工具轉(zhuǎn)換成JPG、GIF形式，再保存到“圖片資料”子目錄下。另外，圖片應(yīng)盡量精美而小巧，不要盲目追求大而全，要以在網(wǎng)頁的美觀與網(wǎng)絡(luò)的速度兩者之間取得良好的平衡為宜。

1.3.4 設(shè)計(jì)網(wǎng)頁圖像

在確定好網(wǎng)站的風(fēng)格和搜集完資料后就需要設(shè)計(jì)網(wǎng)頁圖像了，網(wǎng)頁圖像設(shè)計(jì)包括Logo、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字、導(dǎo)航條和首頁布局等。可以使用Photoshop或Fireworks軟件來具體設(shè)計(jì)網(wǎng)站的圖像。有經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)者，通常會(huì)在使用網(wǎng)頁制作工具制作網(wǎng)頁前，設(shè)計(jì)好網(wǎng)頁的整體布局，這樣在具體設(shè)計(jì)過程中將會(huì)胸有成竹，大大節(jié)省工作時(shí)間。圖1-16所示為設(shè)計(jì)的網(wǎng)頁按鈕圖像。

圖1-16 設(shè)計(jì)的網(wǎng)頁按鈕圖像

1.3.5 制作網(wǎng)頁

網(wǎng)頁制作是一個(gè)復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡(jiǎn)單后復(fù)雜的順序制作。所謂先大后小，就是說在制作網(wǎng)頁時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡(jiǎn)單后復(fù)雜，就是先設(shè)計(jì)出簡(jiǎn)單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。在制作網(wǎng)頁時(shí)要靈活運(yùn)用模板和庫，這樣可以大大提高制作效率。如果很多網(wǎng)頁都使用相同的版面設(shè)計(jì)，就應(yīng)為這個(gè)版面設(shè)計(jì)一個(gè)模板，然后就可以以此模板為基礎(chǔ)創(chuàng)建網(wǎng)頁了。以后如果想要改變這些網(wǎng)頁的版面設(shè)計(jì)，只需簡(jiǎn)單地改變模板即可。圖1-17所示為利用Dreamweaver CS5制作的網(wǎng)頁。

1.3.6 開發(fā)動(dòng)態(tài)網(wǎng)站模塊

頁面設(shè)計(jì)制作完成后，如果還需要?jiǎng)討B(tài)功能的話，就需要開發(fā)動(dòng)態(tài)功能模塊。網(wǎng)站中常用的功能模塊有新聞發(fā)布系統(tǒng)、搜索功能、留言板、產(chǎn)品展示管理系統(tǒng)、在線調(diào)查系統(tǒng)、在線購物、會(huì)員注冊(cè)管理系統(tǒng)、招聘系統(tǒng)、統(tǒng)計(jì)系統(tǒng)、留言系統(tǒng)、論壇及聊天室等。圖1-18所示為開發(fā)的動(dòng)態(tài)購物模塊。

圖1-17 利用Dreamweaver CS5制作的網(wǎng)頁

圖1-18 動(dòng)態(tài)購物模塊

1.3.7 申請(qǐng)域名和服務(wù)器空間

要想擁有屬于自己的網(wǎng)站，首先要擁有域名。域名在互聯(lián)網(wǎng)上代表名字，只有靠這個(gè)名字，別人才可以在互聯(lián)網(wǎng)上與你接觸和溝通。域名是Internet上的服務(wù)器或網(wǎng)絡(luò)系統(tǒng)的名字，在全世界沒有重復(fù)的域名。域名是以若干個(gè)英文字母和數(shù)字組成，由“.”分隔成幾部分，如sina.com就是域名。

Internet域名如同商標(biāo)，是互聯(lián)網(wǎng)上的標(biāo)志之一。Internet上的域名是非常有限的，因?yàn)槊總€(gè)域名都只有一個(gè)。

注冊(cè)域名之后，下一步就是為網(wǎng)站申請(qǐng)空間，其實(shí)就是經(jīng)常說的主機(jī)。這個(gè)主機(jī)必須是一臺(tái)功能相當(dāng)?shù)姆?wù)器級(jí)的電腦，并且要用專線或其他的形式24小時(shí)與互聯(lián)網(wǎng)相連。

這臺(tái)網(wǎng)絡(luò)服務(wù)器除存放公司的網(wǎng)頁為瀏覽者提供瀏覽服務(wù)之外，同時(shí)充當(dāng)“電子郵局”的角色，負(fù)責(zé)收發(fā)公司的電子郵件。還可以在服務(wù)器上添加各種各樣的網(wǎng)絡(luò)服務(wù)功能，前提是有足夠的技術(shù)支持。

有以下兩種常見的主機(jī)類型。

● 主機(jī)托管：將購置的網(wǎng)絡(luò)服務(wù)器托管于網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)，每年支付一定數(shù)額的費(fèi)用。要架設(shè)一臺(tái)最基本的服務(wù)器，在購置成本上，可能已需要數(shù)萬元，而在配套軟件的購置上，更要花上一筆相當(dāng)高的費(fèi)用。另外還需要聘請(qǐng)技術(shù)人員負(fù)責(zé)網(wǎng)站建設(shè)及維護(hù)。如果是中小企業(yè)網(wǎng)站，不必采用這種方式。

● 虛擬主機(jī)：使用虛擬主機(jī)，不僅節(jié)省了購買相關(guān)軟、硬件設(shè)施的費(fèi)用，公司也無須招聘或培訓(xùn)更多的專業(yè)人員，因而其成本也較主機(jī)托管低得多。不過，虛擬主機(jī)只適合于小型、結(jié)構(gòu)較簡(jiǎn)單的網(wǎng)站，對(duì)于大型網(wǎng)站來說還應(yīng)該采用主機(jī)托管的形式，否則在網(wǎng)站管理上會(huì)十分麻煩。

1.3.8 網(wǎng)站的測(cè)試

在網(wǎng)站發(fā)布之前，通常都會(huì)檢查網(wǎng)頁在不同版本瀏覽器下的顯示情況。尤其是制作大型的或訪問量高的網(wǎng)站，這個(gè)步驟十分必要。由于各種版本的瀏覽器支持的HTML語言的版本不同，所以要讓網(wǎng)頁能夠在大多數(shù)瀏覽器中順利顯示，就不得不做盡可能仔細(xì)的檢查，必要時(shí)還得舍棄一些較新的效果。

1.3.9 網(wǎng)站的推廣

網(wǎng)站推廣的目的在于讓盡可能多的潛在用戶了解并訪問網(wǎng)站，通過網(wǎng)站獲得有關(guān)產(chǎn)品和服務(wù)等信息，為最終形成購買決策提供支持。網(wǎng)站推廣需要借助一定的網(wǎng)絡(luò)工具和資源，常用的網(wǎng)站推廣工具和資源包括搜索引擎、分類目錄、電子郵件、網(wǎng)站鏈接、在線黃頁和分類廣告、電子書、免費(fèi)軟件、網(wǎng)絡(luò)廣告媒體、傳統(tǒng)推廣渠道等。所有的網(wǎng)站推廣方法實(shí)際上都是對(duì)某種網(wǎng)站推廣手段和工具的合理利用，因此制定和實(shí)施有效的網(wǎng)站推廣方法的基礎(chǔ)是對(duì)各種網(wǎng)站推廣工具和資源的充分認(rèn)識(shí)和合理應(yīng)用。

1.搜索引擎注冊(cè)

大多數(shù)網(wǎng)民采用搜索的方法是在各大搜索引擎站點(diǎn)進(jìn)行搜索查找。網(wǎng)絡(luò)上的搜索引擎成千上萬，可以使用AddWeb或“登陸奇兵”之類專門軟件快速把網(wǎng)站注冊(cè)到各種搜索引擎，還可以自己手工登錄幾個(gè)知名的搜索引擎，如Yahoo、MSN、一搜、搜狐、網(wǎng)易、中華網(wǎng)和中搜等，只要將本地站點(diǎn)登錄到各大搜索引擎站點(diǎn)就能達(dá)到站點(diǎn)推廣的目的。目前，比較著名和通用的搜索引擎站點(diǎn)分別是www.google.com和www.baidu.com。

2.在網(wǎng)站上做廣告

網(wǎng)絡(luò)廣告是常用的網(wǎng)絡(luò)營(yíng)銷策略之一，在網(wǎng)絡(luò)品牌、產(chǎn)品促銷、網(wǎng)站推廣等方面均有明顯作用。網(wǎng)絡(luò)廣告的常見形式包括Banner廣告、關(guān)鍵字廣告、分類廣告、贊助式廣告和E-mail廣告等。網(wǎng)絡(luò)廣告最常見的表現(xiàn)方式是圖形廣告，如各門戶站點(diǎn)主頁上部的橫幅廣告。

3.利用友情鏈接推廣

和眾多網(wǎng)站建立友情鏈接，無疑是網(wǎng)站推廣最有效、最經(jīng)濟(jì)的辦法，除了互相從對(duì)方獲得流量外，它還可以使網(wǎng)站很快被大量搜索引擎收錄，能夠更好地促進(jìn)網(wǎng)站的推廣。

4.利用論壇帖子推廣

Internet上各種各樣的論壇都有，如果有時(shí)間，可以找一些與公司產(chǎn)品相關(guān)并且訪問人數(shù)比較多的論壇，注冊(cè)登錄并在論壇中輸入公司的一些基本信息，如網(wǎng)址、產(chǎn)品等。

此外還有直接跟客戶宣傳、群發(fā)郵件、網(wǎng)絡(luò)廣告、報(bào)紙和戶外廣告等幾種推廣方式。