網(wǎng)頁(yè)HTML.doc

37第1章 網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)頁(yè)設(shè)計(jì)必修Internet風(fēng)行世界，作為展現(xiàn)Internet風(fēng)采的重要載體，Web頁(yè)受到了愈來(lái)愈多人的重視。好的Web頁(yè)可以吸引用戶頻頻光顧站點(diǎn)，從而達(dá)到宣傳網(wǎng)站的目的。Web頁(yè)是由HTML（Hypertext Markup Language，超文本標(biāo)記語(yǔ)言）組織起來(lái)的，由瀏覽器解釋顯示的一種文件。最初的HTML語(yǔ)言功能極其有限，僅能夠?qū)崿F(xiàn)靜態(tài)文本的顯示，人們遠(yuǎn)遠(yuǎn)不滿足于死板的類(lèi)似于文本文件的Web頁(yè)。后來(lái)增強(qiáng)的HTML語(yǔ)言擴(kuò)展了對(duì)圖片、聲音、視頻影像的支持。通過(guò)瀏覽器訪問(wèn)到的Web頁(yè)面，通常是基于HTML的基礎(chǔ)上所形成的。那么，什么是HTML呢？下面將介紹有關(guān)HTML的概念及其基本語(yǔ)法。1.4.1 HTML概念當(dāng)暢游Internet時(shí)，通過(guò)瀏覽器所看到的網(wǎng)站是由HTML語(yǔ)言所構(gòu)成的。HTML是一種建立網(wǎng)頁(yè)文件的語(yǔ)言，通過(guò)標(biāo)記式的指令（Tag），將影像、聲音、圖片、文字等連接顯示出來(lái)。這種標(biāo)記性語(yǔ)言是因特網(wǎng)上網(wǎng)頁(yè)的主要語(yǔ)言。HTML網(wǎng)頁(yè)文件可以使用記事本、寫(xiě)字板或Dreamweaver等編輯工具來(lái)編寫(xiě)，以.htm或.html為文件后綴名保存。將HTML網(wǎng)頁(yè)文件用瀏覽器打開(kāi)顯示，若測(cè)試沒(méi)有問(wèn)題則可以放到服務(wù)器（Server）上，對(duì)外發(fā)布信息。1.4.2 HTML基本語(yǔ)法HTML標(biāo)記是由“”所括住的指令標(biāo)記，用于向?yàn)g覽器發(fā)送標(biāo)記指令。主要分為：?jiǎn)螛?biāo)記指令、雙標(biāo)記指令（由“”內(nèi)容“”構(gòu)成）。HTML語(yǔ)言使用標(biāo)志對(duì)的方法編寫(xiě)文件，既簡(jiǎn)單又方便。它通常使用“內(nèi)容”來(lái)表示標(biāo)志的開(kāi)始和結(jié)束，因此在HTML文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。為了便于理解，將HTML標(biāo)記語(yǔ)言大致分為基本標(biāo)記、格式標(biāo)記、文本標(biāo)記、圖像標(biāo)記、表格標(biāo)記、鏈接標(biāo)記、表單標(biāo)記和幀標(biāo)記等。1.4.3 基本標(biāo)記基本標(biāo)記是用來(lái)定義頁(yè)面屬性的一些標(biāo)記語(yǔ)言。通常一份HTML網(wǎng)頁(yè)文件包含3個(gè)部分：標(biāo)頭區(qū)、內(nèi)容區(qū)和網(wǎng)頁(yè)區(qū)。1標(biāo)志用于HTML文檔的最前邊，用來(lái)標(biāo)識(shí)HTML文檔的開(kāi)始。而標(biāo)志恰恰相反，它放在HTML文檔的最后邊，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束，兩個(gè)標(biāo)志必須一塊使用。2和構(gòu)成HTML文檔的開(kāi)頭部分，在此標(biāo)志對(duì)之間可以使用、等標(biāo)志對(duì)。這些標(biāo)志對(duì)都是用來(lái)描述HTML文檔相關(guān)信息的，和標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來(lái)的，兩個(gè)標(biāo)志必須一塊使用。3和是HTML文檔的主體部分，在此標(biāo)志對(duì)之間可包含、等眾多的標(biāo)志。它們所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來(lái)。標(biāo)志主要屬性如表1-1所示。表1-1 標(biāo)志主要屬性屬 性用 途范 例設(shè)置背景顏色 紅色背景設(shè)置文本顏色藍(lán)色文本設(shè)置鏈接顏色鏈接為藍(lán)色設(shè)置已使用的鏈接的顏色鏈接為紅色設(shè)置鼠標(biāo)指向的鏈接的顏色黃色以上各個(gè)屬性可以結(jié)合使用，如。引號(hào)內(nèi)的rrggbb是用6個(gè)十六進(jìn)制數(shù)表示的RGB（即紅、綠、藍(lán)3色的組合）顏色，如#ff0000對(duì)應(yīng)的是紅色。4使用過(guò)瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁(yè)的主題。要將網(wǎng)頁(yè)的主題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在標(biāo)志對(duì)之間加入需要顯示的文本即可。下面是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)實(shí)例。通過(guò)該實(shí)例，讀者便可以了解以上各個(gè)標(biāo)志對(duì)在一個(gè)HTML文檔中的布局或所使用的位置。顯示在瀏覽器窗口最頂端中的文本紅色背景、藍(lán)色文本%注意：標(biāo)志對(duì)只能放在標(biāo)志對(duì)之間。1.4.4 格式標(biāo)記這里所介紹的格式標(biāo)記都是用于標(biāo)志對(duì)之間的。1標(biāo)志對(duì)是用來(lái)創(chuàng)建一個(gè)段落，在此標(biāo)志對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。標(biāo)志還可以使用align屬性，它用來(lái)說(shuō)明對(duì)齊方式，語(yǔ)法如下所示。Align的參數(shù)可以是Left（左對(duì)齊）、Center（居中）和Right（右對(duì)齊）3個(gè)值中的任何一個(gè)。例如表示標(biāo)志對(duì)中的文本使用居中的對(duì)齊方式。2是一個(gè)很簡(jiǎn)單的單標(biāo)記指令，它沒(méi)有結(jié)束標(biāo)志，因?yàn)樗脕?lái)創(chuàng)建一個(gè)回車(chē)換行，即標(biāo)記文本換行。%注意：如果把加在標(biāo)志對(duì)的外邊，將創(chuàng)建一個(gè)大的回車(chē)換行，即前邊和后邊的文本的行與行之間的距離比較大。若放在的里邊則前邊和后邊的文本的行與行之間的距離將比較小。3在標(biāo)志對(duì)之間加入的文本將會(huì)在瀏覽器中按兩邊縮進(jìn)的方式顯示出來(lái)。4、用來(lái)創(chuàng)建一個(gè)普通的列表；用來(lái)創(chuàng)建列表中的上層項(xiàng)目；用來(lái)創(chuàng)建列表中最下層項(xiàng)目，和都必須放在標(biāo)志對(duì)之間。通過(guò)下面的實(shí)例，讀者可以更好地理解這幾個(gè)相近的標(biāo)記。一個(gè)普通列表中國(guó)城市北京 上海 廣州 美國(guó)城市華盛頓 芝加哥 紐約 該實(shí)例在網(wǎng)頁(yè)中的效果，如圖1-29所示。5、標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表。標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表。標(biāo)志對(duì)只能在或標(biāo)志對(duì)之間使用，此標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)列表項(xiàng)，若放在之間，則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字；若放在之間，則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。示例如下所示：圖1-29 格式標(biāo)記執(zhí)行效果圖中國(guó)城市 北京 上海 廣州 美國(guó)城市 華盛頓 芝加哥 紐約 以上在IE中的運(yùn)行效果如圖1-30所示。圖1-30 格式標(biāo)記執(zhí)行效果圖6標(biāo)志對(duì)用來(lái)排版大塊HTML段落，也用于格式化表，此標(biāo)志對(duì)的用法與標(biāo)志對(duì)非常相似，同樣有align對(duì)齊方式屬性。1.4.5 文本標(biāo)記文本標(biāo)記主要針對(duì)文本的屬性設(shè)置進(jìn)行標(biāo)記說(shuō)明，如斜體、黑體字、加下劃線等。1標(biāo)志對(duì)用來(lái)對(duì)文本進(jìn)行預(yù)處理操作。2HTML語(yǔ)言提供了一系列對(duì)文本中的標(biāo)題進(jìn)行操作的標(biāo)志對(duì)：、。是最大的標(biāo)題，而則是最小的標(biāo)題。如果在HTML文檔中需要輸出標(biāo)題文本，可以使用這6對(duì)標(biāo)題標(biāo)志對(duì)中的任何一對(duì)。3、經(jīng)常使用Word的人對(duì)這3個(gè)標(biāo)志對(duì)一定很快就能掌握。用來(lái)使文本以黑體字的形式輸出；用來(lái)使文本以斜體字的形式輸出；用來(lái)使文本以下加一劃線的形式輸出。4、這些標(biāo)志對(duì)的用法和上邊的一樣，差別只是在于輸出的文本字體不太一樣而已。用來(lái)輸出打字機(jī)風(fēng)格字體的文本；用來(lái)輸出引用方式的字體，通常是斜體；用來(lái)輸出需要強(qiáng)調(diào)的文本（通常是斜體加黑體）；則用來(lái)輸出加重文本（通常也是斜體加黑體）。5可以對(duì)輸出文本的字體大小、顏色進(jìn)行隨意的改變。這些改變主要是通過(guò)對(duì)它的兩個(gè)屬性size和color的控制來(lái)實(shí)現(xiàn)的。size屬性用來(lái)改變字體的大小，它可以取值為-1、1和+1；而color屬性則用來(lái)改變文本的顏色，顏色的取值是十六進(jìn)制RGB顏色碼或HTML語(yǔ)言給定的顏色常量名。文本標(biāo)記的具體用法如以下代碼所示：文本標(biāo)記的綜合示例最大的標(biāo)題使用h3的標(biāo)題最小的標(biāo)題黑體字文本 斜體字文本 下加一劃線文本 打字機(jī)風(fēng)格的文本引用方式的文本圖1-31 文本標(biāo)記執(zhí)行效果圖強(qiáng)調(diào)的文本加重的文本size取值“+1”、color取值“red”時(shí)的文本此例在瀏覽器中的顯示如圖1-31所示。1.4.6 圖像標(biāo)記再簡(jiǎn)單樸素的網(wǎng)頁(yè)如果只有文字而沒(méi)有圖像將失去許多活力，圖像在網(wǎng)頁(yè)制作中是非常重要的一個(gè)方面，HTML語(yǔ)言也專(zhuān)門(mén)提供了標(biāo)志來(lái)處理圖像的輸出。1標(biāo)志并不是真正地把圖像加入到HTML文檔中，而是將標(biāo)志對(duì)的src屬性賦值。這個(gè)值是圖像文件的文件名，其中包括路徑，這個(gè)路徑可以是相對(duì)路徑，也可以是網(wǎng)址。所謂相對(duì)路徑是指所要鏈接或嵌入到當(dāng)前HTML文檔的文件與當(dāng)前文件的相對(duì)位置所形成的路徑。假如網(wǎng)站的HTML文件與圖像文件（文件名假設(shè)是logo.gif）在同一個(gè)目錄下，則可以將代碼寫(xiě)成。假如網(wǎng)站的圖像文件放在當(dāng)前的HTML文檔所在目錄的一個(gè)子目錄（子目錄名假設(shè)是images）下，則代碼應(yīng)為。%注意：通常圖像文件都會(huì)放在網(wǎng)站中一個(gè)獨(dú)立的目錄里。必須注意一點(diǎn)，src屬性在標(biāo)志中是必須賦值的，是標(biāo)志中不可缺少的一部分。除此之外，標(biāo)志還有alt、align、border、width和height屬性。align是圖像的對(duì)齊方式，在上邊已經(jīng)提到過(guò)。border屬性是圖像的邊框，可以取大于或者等于0的整數(shù)，默認(rèn)單位是像素。width和height屬性是圖像的寬和高，默認(rèn)單位也是像素。alt屬性是當(dāng)光標(biāo)移動(dòng)到圖像上時(shí)顯示的文本。2標(biāo)志是在HTML文檔中加入一條水平線。它可以直接使用，具有size、color、width和noshade屬性。size用來(lái)設(shè)置水平線的厚度，而width用來(lái)設(shè)定水平線的寬度，默認(rèn)單位是像素。noshade屬性不用賦值，而是直接加入標(biāo)志即可使用，它是用來(lái)加入一條沒(méi)有陰影的水平線，不加入此屬性水平線將有陰影。圖像標(biāo)記的使用如以下代碼所示，效果如圖1-32所示。圖像標(biāo)記的綜合示例圖1-32 圖像標(biāo)記效果圖1.4.7 表格標(biāo)記表格標(biāo)記對(duì)于制作網(wǎng)頁(yè)是很重要的，現(xiàn)在很多網(wǎng)頁(yè)都是使用多重表格，主要是因?yàn)楸砀癫坏梢怨潭ㄎ谋净驁D像的輸出，而且還可以任意地進(jìn)行背景和前景顏色的設(shè)置。1標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)表格。它的屬性較多，諸如bgcolor、bordercolor、cellpadding等。具體的屬性參數(shù)將在使用Dreamweaver整合頁(yè)面時(shí)作詳細(xì)介紹。2、標(biāo)志對(duì)用來(lái)創(chuàng)建表格中的每一行。此標(biāo)志對(duì)只能放在標(biāo)志對(duì)之間使用，而在此標(biāo)志對(duì)之間加入文本將是無(wú)效的。標(biāo)志對(duì)用來(lái)創(chuàng)建表格中一行中的每一個(gè)表格，此標(biāo)志對(duì)只有放在標(biāo)志對(duì)之間才是有效的。3標(biāo)志對(duì)用來(lái)設(shè)置表格頭，通常是黑體居中文字。表格標(biāo)記使用如下代碼，效果如圖1-33所示。圖1-33 表格標(biāo)記效果圖表格標(biāo)記的綜合示例。表格標(biāo)記的綜合示例 意大利 英格蘭 西班牙 AC米蘭 佛羅倫薩 曼聯(lián) 紐卡斯?fàn)?巴塞羅那 皇家社會(huì) 尤文圖斯 桑普多利亞 利物浦 阿森納 皇家馬德里 拉齊奧 國(guó)際米蘭 切爾西 米德?tīng)査贡?馬德里競(jìng)技 1.4.8 鏈接標(biāo)記鏈接是HTML語(yǔ)言的一大特色，正因?yàn)橛辛随溄樱W(wǎng)站內(nèi)容的瀏覽才能夠具有靈活性和網(wǎng)絡(luò)性。1該標(biāo)志對(duì)的屬性href是無(wú)論如何不可缺少的，標(biāo)志對(duì)之間加入需要鏈接的文本或圖像（鏈接圖像即加入標(biāo)志）。href的值可以是URL形式，即網(wǎng)址或相對(duì)路徑，也可以是mailto:形式，即發(fā)送E-mail形式。當(dāng)href為URL時(shí)，語(yǔ)法為，這樣就構(gòu)成一個(gè)超文本鏈接了。示例如下：這是我的網(wǎng)站當(dāng)href為郵件地址時(shí)，語(yǔ)法為，這就創(chuàng)建了一個(gè)自動(dòng)發(fā)送電子郵件的鏈接，mailto:后邊緊跟想要自動(dòng)發(fā)送的電子郵件的地址（即E-mail地址）。例如：這是我的電子信箱（E-mail信箱）此外，還具有target屬性，此屬性用來(lái)指明瀏覽的目標(biāo)幀，這些內(nèi)容將在講幀標(biāo)記時(shí)作詳細(xì)的說(shuō)明。2標(biāo)志對(duì)要結(jié)合標(biāo)志對(duì)使用才有效果。標(biāo)志對(duì)用來(lái)在HTML文檔中創(chuàng)建一個(gè)標(biāo)簽（即做一個(gè)記號(hào)），屬性name是不可缺少的，它的值即是標(biāo)簽名。例如：此處創(chuàng)建了一個(gè)標(biāo)簽。創(chuàng)建標(biāo)簽是為了在HTML文檔中創(chuàng)建一些鏈接，以便能夠找到同一文檔中有標(biāo)簽的地方。要找到標(biāo)簽所在地，就必須使用標(biāo)志對(duì)。例如要找到“標(biāo)簽名”這個(gè)標(biāo)簽，就要編寫(xiě)如下代碼：?jiǎn)螕舸颂帉⑹篂g覽器跳到“標(biāo)簽名”處。%注意：href屬性賦的值若是標(biāo)簽的名字，必須在標(biāo)簽名前邊加一個(gè)“#”號(hào)。1.4.9 幀標(biāo)記幀是由英文Frame翻譯過(guò)來(lái)的，它可以用來(lái)向?yàn)g覽器窗口中裝載多個(gè)HTML文件。每個(gè)HTML文件占據(jù)一個(gè)幀，而多個(gè)幀可以同時(shí)顯示在同一個(gè)瀏覽器窗口中，它們組成了一個(gè)最大的幀。幀通常的使用方法是在一個(gè)幀中放置目錄（即可供選擇的鏈接），然后將HTML文件顯示在另一個(gè)幀中。1標(biāo)志對(duì)用來(lái)定義主文檔中有幾個(gè)幀并且各個(gè)幀是如何排列的。此標(biāo)志對(duì)放在幀的主文檔的標(biāo)志對(duì)的外邊，也可以嵌在其他幀文檔中，并且可以嵌套使用。它具有rows和cols屬性，使用標(biāo)志時(shí)這兩個(gè)屬性至少必須選擇一個(gè)，否則瀏覽器只顯示第一個(gè)定義的幀，標(biāo)志對(duì)也就沒(méi)有起到任何作用了。rows用來(lái)規(guī)定主文檔中各個(gè)幀的行定位，而cols用來(lái)規(guī)定主文檔中各個(gè)幀的列定位。這兩個(gè)屬性的取值可以是百分?jǐn)?shù)、絕對(duì)像素值或星號(hào)“*”，其中星號(hào)代表那些未被說(shuō)明的空間，如果同一個(gè)屬性中出現(xiàn)多個(gè)星號(hào)，則將剩下的未被說(shuō)明的空間平均分配。2標(biāo)志放在之間，用來(lái)定義某一個(gè)具體的幀。標(biāo)志具有src和name屬性，這兩個(gè)屬性都是必須賦值的。src是此幀的源HTML文件名（包括網(wǎng)絡(luò)路徑，即相對(duì)路徑或網(wǎng)址），瀏覽器將會(huì)在此幀中顯示src指定的HTML文件。name是此幀的名字，這個(gè)名字是用來(lái)供超文本鏈接標(biāo)志中的target屬性指定鏈接的HTML文件將顯示在哪一個(gè)幀中。例如定義了一個(gè)幀，名字是main，在幀中顯示的HTML文件名是jc.htm，則代碼是。當(dāng)單擊這個(gè)鏈接后，文件new.htm將要顯示在名為main的幀中，則代碼為需要鏈接的文本。此外，標(biāo)志還有scrolling和noresize屬性，scrolling用來(lái)指定是否顯示滾動(dòng)軸，取值可以是“yes”（顯示）、“no”（不顯示）或“auto”（若需要?jiǎng)t會(huì)自動(dòng)顯示，不需要?jiǎng)t自動(dòng)不顯示）。noresize屬性直接加入標(biāo)志中即可使用，不需賦值，它用來(lái)禁止用戶調(diào)整一個(gè)幀的大小。3標(biāo)志對(duì)也是放在標(biāo)志對(duì)之間，用來(lái)在那些不支持幀的瀏覽器中顯示文本或圖像信息。在此標(biāo)志對(duì)之間先緊跟標(biāo)志對(duì)，然后才可以使用前面所講過(guò)的任何標(biāo)志。1.4.10 表單標(biāo)記表單在Web網(wǎng)頁(yè)中用來(lái)給訪問(wèn)者填寫(xiě)信息，從而獲得用戶信息，使網(wǎng)頁(yè)具有交互的功能。1標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)表單，即定義表單的開(kāi)始和結(jié)束位置，在標(biāo)志對(duì)之間的一切都屬于表單的內(nèi)容。標(biāo)志具有action、method和target屬性。action的值是處理程序的程序名（包括網(wǎng)絡(luò)路徑：網(wǎng)址或相對(duì)路徑）。例如：，當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行網(wǎng)址/上的名為counter.cgi的CGI程序。method屬性用來(lái)定義處理程序從表單中獲得信息的方法，可取值為GET和POST。GET方法是從服務(wù)器上請(qǐng)求數(shù)據(jù)，POST方法是發(fā)送數(shù)據(jù)到服務(wù)器。兩者的區(qū)別在于GET方法所有參數(shù)會(huì)出現(xiàn)在URL地址中，而POST方法的參數(shù)不會(huì)出現(xiàn)在URL中。通常GET方法限制字符的大小，POST則允許傳輸大量數(shù)據(jù)。事實(shí)上POST方法可以沒(méi)有時(shí)間限制地傳遞數(shù)據(jù)到服務(wù)器，用戶在瀏覽器端是看不到這一過(guò)程的，所以POST方法比較適合用于發(fā)送一個(gè)保密的（比如信用卡號(hào)）或者比較大量的數(shù)據(jù)到服務(wù)器。而GET方法會(huì)將所要傳輸?shù)臄?shù)據(jù)附在網(wǎng)址后面，然后一起送達(dá)服務(wù)器，因此傳送的數(shù)據(jù)量就會(huì)受到限制，但是執(zhí)行效率卻比POST方法好。target屬性用來(lái)指定目標(biāo)窗口或目標(biāo)幀。2標(biāo)志用來(lái)定義一個(gè)用戶輸入?yún)^(qū)，用戶可在其中輸入信息。此標(biāo)志必須放在標(biāo)志對(duì)之間。標(biāo)志中共提供了8種類(lèi)型的輸入?yún)^(qū)域，具體是哪一種類(lèi)型由type屬性來(lái)決定。3、標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。此標(biāo)志對(duì)用于標(biāo)志對(duì)之間。具有multiple、name和size屬性。multiple屬性不用賦值，直接加入標(biāo)志中即可使用，加入了此屬性后列表框就成為可多選的了；name是此列表框的名字，它與上邊講的name屬性作用是一樣的；size屬性用來(lái)設(shè)置列表框的高度，默認(rèn)時(shí)值為1，若沒(méi)有設(shè)置multiple屬性，顯示的將是一個(gè)彈出式的列表框。標(biāo)志用來(lái)指定列表框中的一個(gè)選項(xiàng)，它放在標(biāo)志對(duì)之間。此標(biāo)志具有selected和value屬性：selected用來(lái)指定默認(rèn)的選項(xiàng)；value屬性用來(lái)給指定的那一個(gè)選項(xiàng)賦值，這個(gè)值是要傳送到服務(wù)器上的，服務(wù)器正是通過(guò)調(diào)用區(qū)域的名字的value屬性來(lái)獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)的。4用來(lái)創(chuàng)建一個(gè)可以輸入多行的文本框，此標(biāo)志對(duì)用于標(biāo)志對(duì)之間。具有name、cols和rows屬性。cols和rows屬性分別用來(lái)設(shè)置文本框的列數(shù)和行數(shù)，這里列與行是以字符數(shù)為單位的。1.5 網(wǎng)頁(yè)設(shè)計(jì)的流程網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)互動(dòng)的過(guò)程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才能實(shí)現(xiàn)這一完整流程。其流程主要有以下幾個(gè)方面：1.5.1 客戶提出需求在設(shè)計(jì)網(wǎng)站頁(yè)面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。常見(jiàn)的目的包括宣傳產(chǎn)品、電子商務(wù)、行業(yè)宣傳、市場(chǎng)開(kāi)拓等?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒(méi)有詳細(xì)的需求，設(shè)計(jì)人員無(wú)法憑空進(jìn)行設(shè)計(jì)制作。在這一流程中，雙方的溝通與交流是非常重要的。1.5.2 注冊(cè)域名和申請(qǐng)空間注冊(cè)域名和申請(qǐng)空間如同給網(wǎng)站在因特網(wǎng)中命名和安家。域名用以給訪問(wèn)者提供訪問(wèn)地址，而空間則用來(lái)存放站點(diǎn)以供訪問(wèn)。1注冊(cè)域名域名是網(wǎng)站的名稱(chēng)。由于在網(wǎng)絡(luò)上，所有的計(jì)算機(jī)都以一長(zhǎng)串的數(shù)字構(gòu)成的IP地址進(jìn)行標(biāo)識(shí)，不便于人們使用，因此人們使用域名來(lái)標(biāo)識(shí)網(wǎng)站。域名通常包括國(guó)際域名和國(guó)家二級(jí)域名兩種。國(guó)際域名可以被任何訪問(wèn)者訪問(wèn)。它具有全球性的特點(diǎn)，所以適合集團(tuán)公司等企業(yè)用戶使用。國(guó)際域名的申請(qǐng)由InterNIC及其他由Internet 國(guó)際特別委員會(huì)（IAHC）授權(quán)的機(jī)構(gòu)進(jìn)行。國(guó)家二級(jí)域名以國(guó)家后綴結(jié)尾，在我國(guó)以cn結(jié)尾。它具有地域性特點(diǎn)，所以適合所有國(guó)內(nèi)用戶使用。國(guó)家二級(jí)域名的申請(qǐng)由中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）負(fù)責(zé)進(jìn)行?，F(xiàn)在，網(wǎng)絡(luò)中流行使用中文域名。中文域名是為了方便中國(guó)的網(wǎng)絡(luò)用戶而產(chǎn)生的。它由中文構(gòu)成。中文域名的申請(qǐng)由中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）負(fù)責(zé)。2申請(qǐng)空間空間是用來(lái)存放網(wǎng)站的頁(yè)面文件。網(wǎng)站空間通常有兩種：專(zhuān)有空間和租賃空間。專(zhuān)有空間是指客戶自己提供服務(wù)器，所有網(wǎng)站資料均存放在該服務(wù)器中。該類(lèi)空間的特點(diǎn)是空間容量容易得到保證，便于設(shè)計(jì)較大的網(wǎng)站。但由于很多客戶使用的服務(wù)器并不是專(zhuān)用服務(wù)器，所以服務(wù)器的性能存在較大可變性。租賃空間是指使用租賃的方式向ICP服務(wù)商購(gòu)買(mǎi)的空間。該類(lèi)空間的特點(diǎn)是服務(wù)性能穩(wěn)定，前期投入較少，租用空間容量有限，不適合大量信息流吞吐。1.5.3 確定網(wǎng)站的內(nèi)容和主題設(shè)計(jì)前期還需要做一些準(zhǔn)備工作，比如整合客戶資源、收集網(wǎng)站內(nèi)容資料、確定網(wǎng)站功能等。設(shè)計(jì)人員在參與設(shè)計(jì)前期，需要根據(jù)客戶的需要和計(jì)劃，確定網(wǎng)站的功能產(chǎn)品宣傳型、網(wǎng)上營(yíng)銷(xiāo)型、客戶服務(wù)型、電子商務(wù)型等。根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達(dá)到的目的和應(yīng)發(fā)揮的作用，同時(shí)還需要考慮網(wǎng)站后期的可擴(kuò)展性。在具體設(shè)計(jì)構(gòu)思時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁(yè)都圍繞這一主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。如圖1-34所示的游戲網(wǎng)站，由于采用了統(tǒng)一的布局和明確的內(nèi)容，整體網(wǎng)站主題鮮明，視覺(jué)效果非常和諧。圖1-34 主題鮮明的游戲網(wǎng)站1.5.4 設(shè)計(jì)頁(yè)面設(shè)計(jì)頁(yè)面是整個(gè)流程中最為重要的環(huán)節(jié)，設(shè)計(jì)人員要做的事情是設(shè)計(jì)網(wǎng)站整體風(fēng)格、色彩搭配、布局結(jié)構(gòu)等，設(shè)計(jì)的頁(yè)面將決定最終的網(wǎng)站效果。現(xiàn)在設(shè)計(jì)人員常用的網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)軟件有兩種：Photoshop和Fireworks。1PhotoshopPhotoshop在圖形圖像處理領(lǐng)域擁有毋庸置疑的權(quán)威。使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)，具有高速、優(yōu)質(zhì)的優(yōu)點(diǎn)，其缺點(diǎn)是不能生成具有較高兼容性和Java特效的HTML頁(yè)面。目前的版本是Photoshop CS，如圖1-35所示。Photoshop的工作界面如圖1-36所示，主要包括工具面板、圖層面板和工作區(qū)域。目前的CS版本中可以輕松實(shí)現(xiàn)切圖并輸出HTML頁(yè)面。通常使用Photoshop設(shè)計(jì)頁(yè)面的靜態(tài)效果圖。圖1-35 Photoshop CS頁(yè)面圖1-36 Photoshop CS工作界面2FireworksFireworks相當(dāng)于結(jié)合了Photoshop（位圖處理）以及CorelDRAW（矢量圖）的功能。使用Fireworks設(shè)計(jì)頁(yè)面，其優(yōu)點(diǎn)是能夠輸出與Dreamweaver完全兼容的，具有雙向可編輯性的頁(yè)面；其缺點(diǎn)是色彩和功能上不如Photoshop強(qiáng)大。目前的版本是8.0，如圖1-37所示。圖1-37 Fireworks 8作為一款為網(wǎng)絡(luò)設(shè)計(jì)而開(kāi)發(fā)的圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入各種圖像；能夠自動(dòng)切圖、生成鼠標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript，具有十分強(qiáng)大的動(dòng)畫(huà)功能和一個(gè)幾乎完美的圖像輸出功能。圖1-38所示是Fireworks 8的工作界面，其界面與Photoshop非常類(lèi)似，易學(xué)易用。圖1-38 Fireworks 8工作界面1.5.5 設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)網(wǎng)頁(yè)動(dòng)畫(huà)對(duì)于增添頁(yè)面動(dòng)感和提升網(wǎng)站品質(zhì)具有極大的促進(jìn)作用。制作精良的動(dòng)畫(huà)能與網(wǎng)頁(yè)相得益彰、錦上添花。網(wǎng)頁(yè)動(dòng)畫(huà)通常以Banner條或廣告的形式出現(xiàn)，現(xiàn)在隨著寬帶網(wǎng)絡(luò)的普及，也有越來(lái)越多的網(wǎng)站使用動(dòng)畫(huà)作為頁(yè)面導(dǎo)航甚至整個(gè)頁(yè)面。設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)常用的軟件是Flash。該軟件制作動(dòng)畫(huà)具有制作方便、動(dòng)態(tài)效果顯著、容量小、非常適合網(wǎng)絡(luò)傳播等特點(diǎn)；可以跨平臺(tái)、跨瀏覽器地顯示聲音、圖片、動(dòng)畫(huà)和交互式等內(nèi)容。圖1-39所示是Flash的工作界面，其界面非常友好，并且提供非常詳細(xì)和完整的教程。Flash提供的透明技術(shù)和物體變形技術(shù)使創(chuàng)建復(fù)雜的功畫(huà)變得更容易，給Web動(dòng)畫(huà)設(shè)計(jì)者豐富的想象提供了實(shí)現(xiàn)手段；交互設(shè)計(jì)可以讓用戶隨心所欲地控制功畫(huà)，賦予用戶更多主動(dòng)權(quán)；優(yōu)化界面設(shè)計(jì)和強(qiáng)大的工具使Flash更簡(jiǎn)單實(shí)用。基于矢量圖的Flash動(dòng)畫(huà)在尺寸上可以隨意調(diào)整縮放，而不會(huì)影響圖像文件的大小和質(zhì)量，流式技術(shù)允許用戶在動(dòng)畫(huà)文件全部下載完之前播放已下載的部分，而在不知不覺(jué)中下載完剩余的動(dòng)畫(huà)。圖1-39 Flash的工作界面1.5.6 網(wǎng)頁(yè)整合網(wǎng)頁(yè)整合是對(duì)前期設(shè)計(jì)進(jìn)行匯總和編輯。整合頁(yè)面需要對(duì)設(shè)計(jì)好的網(wǎng)頁(yè)進(jìn)行編輯，諸如規(guī)劃站點(diǎn)、制作鏈接、制作頁(yè)面效果等，該階段主要使用可視化的網(wǎng)頁(yè)制作軟件進(jìn)行整合。目前整合網(wǎng)頁(yè)所使用的主流軟件是Dreamweaver，該軟件具有強(qiáng)大的可視化編輯功能，其優(yōu)點(diǎn)是具有完善的站點(diǎn)管理機(jī)制，能夠添加動(dòng)態(tài)效果代碼和客戶端程序。在使用Dreamweaver進(jìn)行整合時(shí)需要注意整體站點(diǎn)結(jié)構(gòu)的劃分，為了便于日后的維護(hù)和再開(kāi)