本章首先將對(duì)一些與網(wǎng)絡(luò)相關(guān)的概念做一些淺顯的解釋，使讀者對(duì)Internet 傳遞信息的基本原理有所了解，然后對(duì)HTML （超文本標(biāo)簽語言）的基本知識(shí)進(jìn)行闡述，并對(duì)Dreamweaver 的操作環(huán)境做一

本章首先將對(duì)一些與網(wǎng)絡(luò)相關(guān)的概念做一些淺顯的解釋，使讀者對(duì)Internet 傳遞信息的基本原理有所了解，然后對(duì)HTML （超文本標(biāo)簽語言）的基本知識(shí)進(jìn)行闡述，并對(duì)Dreamweaver 的操作環(huán)境做一些介紹，最后對(duì)網(wǎng)頁設(shè)計(jì)的頁一些原則和方法作一個(gè)簡單的概述，從而為后面的章節(jié)的學(xué)習(xí)打下基礎(chǔ)。

1.1 網(wǎng)頁制作基礎(chǔ)知識(shí)

1.1.1 理解網(wǎng)頁

當(dāng)運(yùn)行打開瀏覽器程序以后，在地址欄中輸入一個(gè)網(wǎng)站的地址，就會(huì)展示出相應(yīng)的網(wǎng)頁內(nèi)容了。

網(wǎng)頁中可以包含很多種類型的內(nèi)容作為網(wǎng)頁的元素，最基本的是文字，此外還可以使用靜態(tài)的圖形以及動(dòng)畫，以及聲音和視頻等多媒體文件。網(wǎng)頁的最終目的就給訪問者深刻的印象，展示有價(jià)值的信息。

1.1.2 網(wǎng)頁制作中的基本概念

服務(wù)器與瀏覽器

互聯(lián)網(wǎng)就是全世界數(shù)百萬臺(tái)計(jì)算機(jī)互相連接而成的一個(gè)計(jì)算機(jī)網(wǎng)絡(luò)。我們坐在家中查看各種網(wǎng)站上的內(nèi)容，實(shí)際上就是從遠(yuǎn)程的計(jì)算機(jī)中讀取了一些內(nèi)容，然后在本地的計(jì)算機(jī)上顯示出來的過程。

因此，內(nèi)容信息的提供者的計(jì)算機(jī)就稱為“服務(wù)器”，用戶使用“瀏覽器”程序，例如Internet Explorer ，就可以通過網(wǎng)絡(luò)取得上面的文件以及其他信息。服務(wù)器可以同時(shí)供許多不同的人（“瀏覽器”）訪問。

訪問的具體的過程簡單來說，就是當(dāng)訪問網(wǎng)頁的人的計(jì)算機(jī)連入Internet 后，通過瀏覽器發(fā)出訪問某個(gè)站點(diǎn)的請(qǐng)求，然后這個(gè)站點(diǎn)的服務(wù)器就把信息傳送到用戶的瀏覽器上，即將文件下載到本地的計(jì)算機(jī)，瀏覽器再顯示出文件內(nèi)容，這樣用戶就可以坐在家中查詢?nèi)f里之外的信息了。

超鏈接

對(duì)超鏈接其實(shí)并不陌生，例如我們可能會(huì)經(jīng)常訪問新浪網(wǎng)去看新聞，在它的首頁中有很多新聞的標(biāo)題，當(dāng)我們用鼠標(biāo)點(diǎn)擊一個(gè)新聞標(biāo)題以后，就會(huì)顯示出新聞的內(nèi)容。這就是超鏈接的作用。

超鏈接是一種可以指向其他文件的文字或圖片，這種作用稱為超鏈接。瀏覽器可以使用戶利用超鏈接方便地取得超鏈接所指向的另一份文件。在超鏈接文件中，想要更多地了解關(guān)于該文件中所提到的一些主題的信息，可以通過對(duì)目標(biāo)用“按下鼠標(biāo)”的方式來取得更詳細(xì)的資料。事實(shí)上該文件也可以被鏈接到其他不同作者所編寫的文件上。在Internet 上，一方面數(shù)千萬臺(tái)計(jì)算機(jī)相互連接，另一方面，世界范圍的大量信息通過超本文的方式相互鏈接。 URL

URL 我們也不陌生，每當(dāng)我們要訪問一個(gè)網(wǎng)站的時(shí)候，都要在瀏覽器的地址欄中輸入網(wǎng)站的地址，它的學(xué)名就是URL 。

URL 為“Uniform Resource Locator”的縮寫，通常翻譯為“統(tǒng)一資源定位器”，也就是人們通常說的“網(wǎng)址”。它是一個(gè)指定Internet 上資源位置的標(biāo)準(zhǔn)，也就是人們常說的網(wǎng)址。URL 常見的有以下幾種形式：

ftp://www.artech.cn

HTML

實(shí)際上，網(wǎng)頁文件是用一種被稱為 HTML （Hyper Text Markup Language）的標(biāo)簽語言書寫的。有兩種方式來產(chǎn)生HTML 文件：一種是自己寫HTML 文件，事實(shí)上這并不非常困難，也不需要特別的技巧；另一種是使用HTML 編輯器，它可以輔助使用者來做編寫的工作。本書在后面著重講述HTML 。

如果讀者想先看一下HTML 語言是什么樣子，可以用瀏覽器打開任意一個(gè)網(wǎng)頁，然后選擇瀏覽器的菜單“查看///源文件”命令，這時(shí)會(huì)自動(dòng)打開記事本程序，里面顯示的就是這個(gè)網(wǎng)頁的HTML 源文件。也許會(huì)感覺非常復(fù)雜，實(shí)際上它并不難掌握，本書后面的任務(wù)就是交給讀者如何編寫HTML 網(wǎng)頁。

上傳與下載

前面已經(jīng)提到，為了讓全世界的人都可以瀏覽我們制作的網(wǎng)頁，就必須把網(wǎng)頁放到服務(wù)器上，當(dāng)然如果我們有條件也可以把自己的計(jì)算設(shè)置成服務(wù)器，日夜不停地運(yùn)行并連接在互聯(lián)網(wǎng)上。

當(dāng)時(shí)這樣做很麻煩，因此大多數(shù)情況，我們回去花一點(diǎn)錢租用一個(gè)服務(wù)器，這樣我們就必須把作好的網(wǎng)站傳送到服務(wù)器上，這個(gè)過程就稱為“上傳”，而大家通過瀏覽器訪問網(wǎng)頁的時(shí)候，所經(jīng)歷的過程就是下載的過程，并網(wǎng)頁下載到自己的計(jì)算機(jī)中，這樣才能看到它。 域名

一個(gè)公司如果希望在網(wǎng)絡(luò)上建立自己的主頁，就必須取得一個(gè)域名，域名也是由若干部分組成，包括數(shù)字和字母。例如， www.artech.cn 就是本書作者的域名，通過該地址，訪問者可以找到我們出版過的圖書的信息，還有討論區(qū)可以討論各種技術(shù)話題等等。

域名是上網(wǎng)單位和個(gè)人在網(wǎng)絡(luò)上的重要標(biāo)識(shí)，起著識(shí)別作用，便于他人識(shí)別和檢索某一企業(yè)、組織或個(gè)人的信息資源，從而更好地實(shí)現(xiàn)網(wǎng)絡(luò)上的資源共享。除了識(shí)別功能外，在虛擬環(huán)境下，域名還可以起到引導(dǎo)、宣傳、代表等作用。

域名可分為不同級(jí)別，包括頂級(jí)域名、二級(jí)域名等。頂級(jí)域名又分為兩類。

一是國家頂級(jí)域名，目前200多個(gè)國家都按照ISO3166國家代碼分配了頂級(jí)域名，例如中國是“cn”，美國是“us”，日本是“jp”等。

二是國際頂級(jí)域名，例如表示工商企業(yè)的“.Com”，表示網(wǎng)絡(luò)提供商的“.net”，表示非盈利組織的“.org”，表示教育機(jī)構(gòu)的“.edu”等。

二級(jí)域名是指頂級(jí)域名之下的域名，在國際頂級(jí)域名下，它是指域名注冊(cè)人的網(wǎng)上名稱，例如“ibm”，“yahoo”，“Microsoft”等；在國家頂級(jí)域名下，它是表示注冊(cè)企業(yè)類別的符號(hào)，例如“com”，“edu”，“gov”，“net”等等。

例如“artech.com.cn”這個(gè)域名中，“cn”是頂級(jí)域名，“com”二級(jí)域名，“Artech”是三級(jí)域名。原來中國的域名管理機(jī)構(gòu)（CNNIC ）沒有開放二級(jí)域名的注冊(cè)，因此二級(jí)域名只有“com”，“edu”，“gov”，“net”等這幾個(gè)。幾年前，CNNIC 開放了二級(jí)域名的注冊(cè)，因此就可以注冊(cè)“artech.cn”這樣的域名了。

網(wǎng)站

網(wǎng)站就是在互聯(lián)網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方。它由域名（也就是網(wǎng)站地址）和網(wǎng)站空間構(gòu)成。網(wǎng)站空間里面存放的就是各種網(wǎng)頁。小的網(wǎng)站可能只包含一個(gè)網(wǎng)頁，大的網(wǎng)站可能需要很多計(jì)算機(jī)來存儲(chǔ)數(shù)據(jù)，例如著名的Google 網(wǎng)站，就依靠數(shù)萬臺(tái)計(jì)算機(jī)來為全世界的網(wǎng)民提供服務(wù)。我們也可以把一個(gè)網(wǎng)站類比為一棟房屋，域名就是他的門牌，網(wǎng)頁里面的所有網(wǎng)頁構(gòu)成了房屋里的內(nèi)容。

衡量一個(gè)網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站連接速度、網(wǎng)站提供服務(wù)等幾方面考慮。

當(dāng)一個(gè)的公司在互聯(lián)網(wǎng)上建立一個(gè)網(wǎng)站，訪問者可以進(jìn)入他的網(wǎng)站查詢相關(guān)的信息。有時(shí)候，網(wǎng)站也被稱作站點(diǎn)。

1.2 HTML 入門

我們常常講起網(wǎng)頁，事實(shí)上每一個(gè)網(wǎng)頁都是一個(gè)文件，這個(gè)文件里面包含了HTML 指令，所以這些文件就被稱為HTML 文件。HTML 語言不是一種編程語言，而是一種描述性的標(biāo)簽語言，這些標(biāo)簽符用來定義HTML 文件中信息的格式和功能。當(dāng)瀏覽器接收到HTML 文件后，就解釋HTML 文件內(nèi)的標(biāo)簽符，根據(jù)標(biāo)簽符去執(zhí)行相應(yīng)的顯示功能或?qū)崿F(xiàn)某些功能。注意這些標(biāo)簽符必須用小于號(hào)“<”和大于號(hào)“>”括起來。

HTML 標(biāo)簽符最基本的格式是：<標(biāo)簽符>內(nèi)容。標(biāo)簽符通常成對(duì)使用，前面的“<標(biāo)簽符>”表示某種格式的開始，后面的“”表示這種格式的結(jié)束。

例如，HTML 文件中的標(biāo)簽符用來定義HTML 文件中的文字為粗體字。就是說，在這一對(duì)標(biāo)簽中的內(nèi)容都以粗體的格式在瀏覽器中顯示。例如在文件中有“Hello，World ! ”，那么在瀏覽器中將顯示出粗體字“Hello ，World !”。

HTML 的概念很簡單，就是寫入什么樣的標(biāo)簽符，瀏覽器就會(huì)相應(yīng)執(zhí)行該標(biāo)簽符所能實(shí)現(xiàn)的功能。不過有一點(diǎn)要注意，我們最常用的Netscape 和Internet Explorer瀏覽器并不完全兼容，即有的標(biāo)簽只能被其中一種瀏覽器識(shí)別。就目前的情形來看，Internet Explorer 已經(jīng)取得了很大的優(yōu)勢，但在制作網(wǎng)頁時(shí)最好還是二者兼顧。另外Dreamweaver 已經(jīng)充分考慮到了兼容性的問題，盡可能地使制作出的網(wǎng)頁在兩個(gè)瀏覽器上都能正確顯示。

此外HTML 文件只是一個(gè)純文本文件，可以用任何文本編輯器來編輯它，最簡單就是用Windows 系統(tǒng)里的“記事本”來建立或編輯。HTML 文件的擴(kuò)展名是.htm 或.html 。

現(xiàn)在已經(jīng)對(duì)HTML 有了一些最基本、最簡單的認(rèn)識(shí)，那么就開始學(xué)習(xí)一些HTML 的基本語句。完整的HTML 規(guī)則完全可以寫成一本幾百頁的書，在這里僅能講述HTML 中最重要的幾個(gè)標(biāo)簽。

下面是一個(gè)最簡單的HTML 文件。

HTML 文件的內(nèi)容就寫在這里... ...

用任何文本編輯器都可以把上面這個(gè)文件輸入并存成普通的文本文件，注意文件的擴(kuò)展名必須是“.htm”或“.html”，例如“test.htm”，然后就可以用瀏覽器來瀏覽這個(gè)頁面了。另外，HTML 文件中的空格都是無效的，也就是說它最終的顯示效果完全由標(biāo)簽來決定，因此在書寫HTML 文件時(shí)最好能使每對(duì)標(biāo)簽上下對(duì)齊，并縮進(jìn)排版，這樣很容易看出各標(biāo)簽是如何配對(duì)的。

在Windows 的“記事本”中輸入這個(gè)源文件文檔，并保存文件。注意，在保存這個(gè)文件的時(shí)候，要在把保存文件對(duì)話框中，將“保存類型”設(shè)置為“所有文件”，然后再文件名輸入框中給文件名的后綴設(shè)置為“htm”，然后再按“保存”按鈕。

然后就可以用瀏覽器，例如最常用是Windows 中的Internet Explorer來打開這個(gè)網(wǎng)頁了，在Windows 的“我的電腦”中，雙擊這個(gè)保存好的文件，就會(huì)打開瀏覽器的窗口。 注意這個(gè)文件中有以下4對(duì)標(biāo)簽。

HTML 標(biāo)簽:

標(biāo)簽放在HTML 文件的開頭，告訴瀏覽器，這個(gè)文件是HTML 文件。而在文件的結(jié)尾，是結(jié)束標(biāo)簽。雖然這對(duì)標(biāo)簽可以省略不用，但希望讀者能養(yǎng)成使用該標(biāo)簽的習(xí)慣。

“文件頭”標(biāo)簽:

文件頭標(biāo)簽是 和，一般放在標(biāo)簽的后面，用來標(biāo)明文件的題目或定義部分。

“文件標(biāo)題”標(biāo)簽:

標(biāo)題標(biāo)簽為 。這對(duì)標(biāo)簽用來設(shè)定文件的標(biāo)題，注釋這個(gè)文件的內(nèi)容。瀏覽器通常都會(huì)將文件標(biāo)題顯示在瀏覽器窗口的左上角，所以這個(gè)標(biāo)題就顯得很有用。 “文件體”標(biāo)簽:

文件體標(biāo)簽為 和 。這對(duì)標(biāo)簽一般都被用來指明HTML 文檔的內(nèi)容，例如文字、標(biāo)題、段落和列表等，也可以用來定義主頁背景顏色。

下面再介紹幾個(gè)標(biāo)簽，使這個(gè)網(wǎng)頁更復(fù)雜一些。

“標(biāo)題”標(biāo)簽:

標(biāo)題標(biāo)簽的格式為 和（? 代表從1～6的數(shù)字）。這個(gè)標(biāo)簽被用來設(shè)置標(biāo)題字體的大小。HTML 準(zhǔn)許有

至

這6級(jí)標(biāo)題，例如“

這是H1標(biāo)題字

這是H6標(biāo)題字

HTML 文件的內(nèi)容就寫在這里... ...

這是H1標(biāo)題字

這是H2標(biāo)題字

這是H3標(biāo)題字

這是H4標(biāo)題字

這是H5標(biāo)題字

這是H6標(biāo)題字

對(duì)齊標(biāo)簽:

平時(shí)人們用Word 排版，可以將文字隨意移動(dòng)，而Word 又可以自動(dòng)調(diào)整字間距，以使段落左右對(duì)齊。在HTML 中，沒有字間距這個(gè)標(biāo)簽，不能像Word 那樣對(duì)文字進(jìn)行隨心所欲的編排，一個(gè)字符占一個(gè)字符空間，絕不能多出或減少。

需要說明的是，HTML 語言本身是不能調(diào)整字間距的，但是通過使用層疊樣式表示可以的，這與層疊樣式表的概念，在下一章中介紹。

這里我們又要引入一個(gè)新的概念——“屬性”，HTML 語言的標(biāo)簽還可以帶有一些屬性，例如

前面介紹的H1到H6標(biāo)簽都有一個(gè) “align”的屬性，用來設(shè)置“對(duì)齊方式”。每個(gè)屬性都可以設(shè)置一個(gè)“屬性值”，例如align 屬性可以有三種屬性值： left （左對(duì)齊）、Center （居中對(duì)齊）或者Right （右對(duì)齊）。

現(xiàn)在把前面的源文件修改為下面的樣子。

HTML 文件的內(nèi)容就寫在這里... ...

文本左對(duì)齊

文本居中對(duì)齊

文本右對(duì)齊

1.3 Dreamweaver 的操作環(huán)境

Dreamweaver 8的用戶界面非常友好，為設(shè)計(jì)是帶來了很大的方便。下面就來把幾個(gè)主要部分介紹一下。

Dreamweaver 8的整體界面如圖1.1所示。

圖1.1 Dreamweaver 8 的操作界面

文檔窗口

在界面的中部，是文檔窗口，它是用來編排網(wǎng)頁的區(qū)域，與在瀏覽器中的結(jié)果近似，但仍有一些差異。

“插入”面板

選擇菜單“窗口→插入”命令，可以打開或關(guān)閉“插入”面板，它位于界面的上側(cè)。它的作

用是在光標(biāo)位置插入各種對(duì)象。單擊面板左端的的卡片可切換不同頁，每頁中有不同類型的對(duì)象。使用“插入”菜單中的命令也可以實(shí)現(xiàn)插入各種對(duì)象的目的，與使用“插入”面板是一致的。使用菜單還是使用“插入”面板，可完全根據(jù)用戶的習(xí)慣來決定。

“插入”面板默認(rèn)打開的是 “常用”頁，它包括了最常用的一些對(duì)象，例如在文檔中的光標(biāo)位置插入一段超級(jí)鏈接文本、一個(gè)表格或者一個(gè)圖像等等。其他7頁并不像基本對(duì)象那樣常用，因此這里僅進(jìn)行簡單介紹，后面還會(huì)詳細(xì)介紹。

·“布局”頁的作用是為了方便使用Dreamweaver 的布局功能。

·“表單”頁中的對(duì)象都用來制作表單，例如在文檔中插入表單、文字輸入框和按鈕等。 ·“文本”頁可以方便用戶在文檔中插入一些已經(jīng)設(shè)定好的帶有HTML 格式的文本。

·“HTML”頁可以方便用戶在文檔中插入水平線、文件頭、腳本編制、框架和腳本對(duì)象。 ·“應(yīng)用程序”頁中可以方便用戶插入服務(wù)器端的動(dòng)態(tài)元素，本書不作介紹。

·“Flash 元素”頁可以方便用戶在文檔中插入格式為.swf 的Flash 元素。

·“收藏夾”頁可以方便用戶在收藏夾中自定義常用的插入對(duì)象。

“屬性”面板

依次選擇菜單“窗口→屬性”，就可以打開或關(guān)閉“屬性”面板。當(dāng)鼠標(biāo)選中一些文字或某個(gè)對(duì)象時(shí)，“屬性”面板就會(huì)顯示相關(guān)信息和參數(shù)，并可對(duì)其進(jìn)行修改和設(shè)定。

“屬性”面板幾乎是最常用的一個(gè)面板，因?yàn)闊o論要編輯哪個(gè)對(duì)象的屬性，都要用到它，其內(nèi)容也隨著選擇對(duì)象的不同而改變。

其他面板和工具條

除了上面介紹的兩種面板之外，這里還有必要對(duì)一些重要的界面元素做簡單介紹。 在文檔窗口的上方有文檔和標(biāo)準(zhǔn)兩個(gè)工具條。

文檔工具條的功能是對(duì)文檔進(jìn)行控制。最左面的3個(gè)按鈕十分常用，它們可以切換文檔窗口的顯示方式。

按下按鈕，文檔窗口中只顯示HTML 代碼；按下按鈕，文檔窗口分為上下兩個(gè)部分，上面顯示HTML 代碼，下面顯示頁面效果；按下按鈕，文檔窗口中只顯示頁面效果。

除此之外，針對(duì)不同的控制對(duì)象，還有其他若干面板，如“行為”面板、“框架”面板和“層”面板等，它們都針對(duì)不同的對(duì)象起作用。 我們?cè)诤竺娴恼鹿?jié)中再進(jìn)行介紹。

在制作過程中，用戶需要關(guān)閉或者打開這些面板和工具條時(shí)，具體的方法如下。

選擇菜單“查看→工具欄→文檔”可以打開或者關(guān)閉文檔工具條（當(dāng)“文檔”菜單項(xiàng)前面有一個(gè)對(duì)勾的時(shí)候，工具條被打開，反之則關(guān)閉）。

按鍵盤的“F4”鍵可以隱藏所有面板，再按“F4”鍵又可以打開所有面板。如果要打開一個(gè)面板，可以在“窗口”菜單中找到相應(yīng)的菜單項(xiàng)。比如選擇菜單“窗口→文件”就可以打開“文件”面板。隨著Dreamweaver 版本的不斷升高，面板數(shù)量越來越多，因此在Dreamweaver 8中，出現(xiàn)了面板組的概念，也就是幾個(gè)功能相關(guān)的面板放在一起，組成一組，成為一個(gè)面板組，比如選擇菜單“窗口→文件”打開“站點(diǎn)”面板的同時(shí)，在它的旁邊也打開了“資源”和“代碼片斷”面板，二者共同組成了“文件”面板組。

1.4 網(wǎng)站開發(fā)的流程

在本節(jié)中，將介紹一下網(wǎng)站設(shè)計(jì)和開發(fā)的整個(gè)工作流程。前面最開始的時(shí)候，曾經(jīng)簡單介紹過一下網(wǎng)站開發(fā)的基本流程。在本節(jié)將這個(gè)流程再細(xì)化一下，這樣可以更深入地作講解。 經(jīng)過近10年的發(fā)展，互聯(lián)網(wǎng)已經(jīng)深入到社會(huì)的各個(gè)領(lǐng)域，伴隨著這個(gè)發(fā)展的過程，網(wǎng)站開發(fā)已經(jīng)成為了一個(gè)擁有大量從業(yè)人員的行業(yè)，從而整個(gè)的工作流程也日趨成熟和完善。

明確網(wǎng)站定位

首先在做網(wǎng)站之前給要做的網(wǎng)站一個(gè)準(zhǔn)確的定位，明確建站目地是什么。誰能決定網(wǎng)站的定位呢？如果網(wǎng)站是做給自己的，比如一個(gè)個(gè)人網(wǎng)站，那么自己說了算；而如果是為客戶建立網(wǎng)站，那么一定要與客戶的決策層人士共同討論，要理解他們的想法，這是十分重要的。 在理解了客戶的想法后，就要站在客戶的立場上，探討網(wǎng)站的定位。根據(jù)經(jīng)驗(yàn)，如果設(shè)計(jì)師能夠從客戶的立場出發(fā)，給客戶提出一些中肯的建議，結(jié)合到策劃中去，那么設(shè)計(jì)已經(jīng)成功了一半，也可以大大避免在日后與客戶的溝通中發(fā)生不愉快的可能性。

收集信息和素材

在明確建站目的和網(wǎng)站定位以后，開始收集相關(guān)的意見，結(jié)合公司其他部門的實(shí)際情況，這樣可以發(fā)揮網(wǎng)站的最大作用。

這一步是前期策劃中最為關(guān)鍵的一步，因?yàn)樽鼍W(wǎng)站一定是為公司服務(wù)的，所以全面地收集相關(guān)的意見和想法是最為必要的。這一步需要整理成文檔，可以讓相關(guān)部門配合提交一份本部門需要在網(wǎng)上開辟的欄目計(jì)劃書。這份計(jì)劃書一定要考慮充分，因?yàn)槿绻丫W(wǎng)站作為一個(gè)正式的站點(diǎn)來運(yùn)營的話，所做的每一項(xiàng)欄目的設(shè)置都應(yīng)該是有規(guī)劃的。如果考慮不充分，會(huì)導(dǎo)致以后突如其來的新加內(nèi)容破壞網(wǎng)站的整體規(guī)劃和風(fēng)格。當(dāng)然，這也并不意味著網(wǎng)站成形后是不許添加欄目的，只是在添加的過程中需要結(jié)合網(wǎng)站的具體情況，最好是當(dāng)初策劃時(shí)考慮全面！

策劃欄目內(nèi)容

收集完所有的相關(guān)信息以后，對(duì)其進(jìn)行整理，整理以后找出重點(diǎn)，根據(jù)重點(diǎn)以及公司業(yè)務(wù)的側(cè)重點(diǎn)，結(jié)合網(wǎng)站定位來確定網(wǎng)站的欄目需要有哪幾項(xiàng)。可能開始時(shí)會(huì)因?yàn)闄谀枯^多而難以確定最終需要哪幾項(xiàng)，這又是一個(gè)討論的過程，需要所有設(shè)計(jì)和開發(fā)人員在一起闡述自己的意見，一起反復(fù)比較，將定下來的內(nèi)容進(jìn)行歸類，形成網(wǎng)站欄目的樹狀列表用以清晰表達(dá)站點(diǎn)結(jié)構(gòu)。

對(duì)于比較大的網(wǎng)站，可能還需要討論和確定二級(jí)欄目以下的子欄目，對(duì)它進(jìn)行歸類，并逐一確定每個(gè)二級(jí)欄目的主頁面需要放哪些具體的東西，二級(jí)欄目下面的每個(gè)小欄目需要放哪些內(nèi)容，讓欄目負(fù)責(zé)人能夠很清楚地了解本欄目的每個(gè)細(xì)節(jié)和每個(gè)欄目，討論完以后，就應(yīng)由欄目負(fù)責(zé)人來按照討論過的結(jié)果寫欄目規(guī)劃書。欄目規(guī)劃書要求寫得詳細(xì)具體，并有統(tǒng)一的格式，以備網(wǎng)站留檔。這次的策劃書只是第一版本，以后在制作的過程當(dāng)中如果出現(xiàn)問題應(yīng)及時(shí)修改該策劃書，并且也需要留檔。

設(shè)計(jì)頁面方案

再接下來，需要做的就是讓美術(shù)設(shè)計(jì)師（也稱為美工）根據(jù)每個(gè)欄目的策劃書來設(shè)計(jì)頁面。這里需要再次指出，在設(shè)計(jì)之前，應(yīng)該讓欄目負(fù)責(zé)人把需要特殊處理的地方跟設(shè)計(jì)人員講明。在設(shè)計(jì)頁面時(shí)實(shí)際是要根據(jù)策劃書把每個(gè)欄目的具體位置和網(wǎng)站的整體風(fēng)格確定下來。為了讓網(wǎng)站有整體感，應(yīng)該在網(wǎng)頁中放置一些貫穿性的元素，最終要拿出至少3種不同風(fēng)格的方案。每種方案應(yīng)該考慮到公司的整體形象，與公司的精神相結(jié)合。設(shè)計(jì)方案拿出以后，經(jīng)討論后定稿。最后挑選出兩種方法交給客戶選擇，由客戶確定最終的方案。 制作頁面

方案設(shè)計(jì)完成以后，下一步是實(shí)現(xiàn)靜態(tài)頁面，由制作人員負(fù)責(zé)根據(jù)設(shè)計(jì)師給出的設(shè)計(jì)方案，制作出網(wǎng)頁，并制作成模版。在這個(gè)過程中需要十分注意網(wǎng)站的頁面之間的邏輯，并區(qū)分靜態(tài)頁面和需要服務(wù)器端實(shí)現(xiàn)的動(dòng)態(tài)頁面。

在這個(gè)過程實(shí)現(xiàn)的同時(shí)，欄目負(fù)責(zé)人應(yīng)該開始收集每個(gè)欄目的具體內(nèi)容并整理。模版制作完成后，由欄目負(fù)責(zé)人往每個(gè)欄目里面添加具體內(nèi)容。對(duì)于靜態(tài)頁面，將內(nèi)容添加到頁面中即可，對(duì)于需要服務(wù)器端編程實(shí)現(xiàn)的頁面交由編程人員繼續(xù)完成。

為了便于讀者理解，在這里舉一個(gè)例子，以區(qū)分動(dòng)態(tài)和靜態(tài)頁面的含義。例如某個(gè)公司

的網(wǎng)站，需要展示1000種商品，如果只用靜態(tài)頁面來制作，那么如果在一個(gè)頁面中展示10個(gè)商品，則一共需要100個(gè)靜態(tài)頁面，而且日后如果需要修改某商品的信息，就需要重新制作相應(yīng)的頁面，這樣工作量就會(huì)非常大。而如果借助于服務(wù)器端的程序，制作為動(dòng)態(tài)頁面，例如使用ASP 技術(shù)，只需要制作一個(gè)頁面，然后把1000種商品的信息存儲(chǔ)在數(shù)據(jù)庫中。頁面根據(jù)瀏覽者的需求動(dòng)態(tài)地顯示這些商品，則只需要制作一個(gè)頁面以及編制若干程序就可了，而且便于修改。這就是動(dòng)態(tài)頁面的作用。

實(shí)現(xiàn)后臺(tái)功能

在前一步中，將動(dòng)態(tài)頁頁面設(shè)計(jì)好后，只剩下程序部分需要完成了。在這一步中，由程序員來根據(jù)功能需求，編寫程序，完成動(dòng)態(tài)頁面。

需要說明的是，網(wǎng)站的建設(shè)過程中，“如何統(tǒng)籌”是一個(gè)比較重要的問題。在上面所講述的過程進(jìn)行的同時(shí)，網(wǎng)站的程序人員正處于開發(fā)程序的階段，如果實(shí)現(xiàn)的過程中出現(xiàn)什么問題，編程人員應(yīng)和制作人員及時(shí)溝通，以免程序開發(fā)完成后發(fā)現(xiàn)問題再進(jìn)行大規(guī)模的返工。 整合與測試網(wǎng)站

接下來，當(dāng)兩邊的工作都完成以后，就是整合。把程序和頁面進(jìn)行整合。整合完成以后，需要內(nèi)部測試，測試完成，即可上傳到服務(wù)器上，交由客戶檢驗(yàn)。通?？蛻魰?huì)提出一些修改意見，這時(shí)根據(jù)客戶要求完成修改即可。

如果這時(shí)客戶發(fā)現(xiàn)了一些問題，由于客戶并不了解工作的原理，可能他們會(huì)覺得很容易修改，而實(shí)際上有可能是結(jié)構(gòu)型的調(diào)整，工作量會(huì)很大，這時(shí)就很容易產(chǎn)生不愉快的情況。因此最好在開發(fā)的前期準(zhǔn)備階段就充分理解用戶的想法和需求，同時(shí)對(duì)于一些可能發(fā)生的情況提前告訴客戶，這樣就容易與客戶報(bào)紙愉快的合作關(guān)系。

1.5 網(wǎng)頁布局概述

現(xiàn)在把焦點(diǎn)集中在頁面方案的設(shè)計(jì)上。傳統(tǒng)的媒體如報(bào)刊和雜志，只有文字和圖片而沒有聲音；廣播只有聲音卻沒有文字和圖像；電視是擁有聲音、圖像和文字的媒體，但觀者只能被動(dòng)地接受，而不能自由而有選擇地觀看，也不能進(jìn)一步查看詳細(xì)資料。

只有網(wǎng)頁可以做到兩者兼容。觀眾的自由度像報(bào)紙一樣，可自由選擇喜愛的內(nèi)容，同時(shí)又可以聽和看更多的聲音和視頻信息，更全面了解事物。這種利用圖像、音效和動(dòng)畫的版面構(gòu)成形式，必將使媒體視覺傳播策略更加深入。因此有必要根據(jù)網(wǎng)頁的特點(diǎn)，來介紹一下頁面設(shè)計(jì)中的一些基本知識(shí)。其中“網(wǎng)頁布局”就是首要的一個(gè)方面。

網(wǎng)頁的布局千變?nèi)f化，很難尋到幾條固定的規(guī)則，這里只是就比較常見的幾種類型作一說明，并舉一些例子，使讀者能有一個(gè)基本的認(rèn)識(shí)。實(shí)際上各種類型之間并沒有嚴(yán)格的界限。 “廠”字型布局

所謂“廠”型結(jié)構(gòu)，就是指頁面頂部為橫條網(wǎng)站標(biāo)識(shí)和廣告條，下方左面（也可放在右邊）為主菜單，右面顯示內(nèi)容的布局。菜單條與背景，整體效果類似“廠”字。這是目前最常見的一種網(wǎng)頁布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。缺點(diǎn)是由于被使用得過多，顯得缺乏創(chuàng)意，略顯呆板。

“國”字型布局

這種頁面通常上下各有一個(gè)廣告條或者其他欄目條，左面是主菜單，右面放友情連接或者其他欄目等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是頁面顯得比較擁擠和局促，不夠靈活。

“三”字型布局

這種布局多用于國外站點(diǎn)，通常頁面上方橫向幾條色塊，將頁面整體分割為若干部分，色塊中大多放廣告圖片或者Flash 動(dòng)畫。

宣傳單型布局

這類頁面布局就像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心，常用于個(gè)性類站點(diǎn)。優(yōu)點(diǎn)是漂亮吸引人，缺點(diǎn)就是頁面中大面積使用圖片，導(dǎo)致瀏覽速度相對(duì)較慢。同時(shí)可以作為宣傳單使用。

門戶型網(wǎng)頁布局

這類網(wǎng)頁通常內(nèi)容多，信息量大，通常沒有明顯的線條作為邊界，圖片用得也比較少，一般通過文字的排列產(chǎn)生視覺上的分區(qū)效果。

區(qū)塊型布局

這類網(wǎng)頁現(xiàn)在出現(xiàn)得越來越多，在網(wǎng)頁上各個(gè)區(qū)域具有封閉的邊界，經(jīng)過合理放置顯得清晰美觀。缺點(diǎn)是由于版面固定，各區(qū)域很難根據(jù)其中內(nèi)容的多少而調(diào)整大小，因此不適宜用于區(qū)域內(nèi)容的長度經(jīng)常變化的網(wǎng)頁。