網(wǎng)頁設(shè)計教程

1第1章網(wǎng)頁設(shè)計基礎(chǔ)教學(xué)目的和要求:

掌握Web站點的有關(guān)概念、術(shù)語及其基本工作原理，掌握網(wǎng)站的命名規(guī)則和文件、文件夾的命名規(guī)范、網(wǎng)站頁面布局格式與規(guī)范及網(wǎng)頁修飾與創(chuàng)意原則，了解網(wǎng)站建設(shè)的基本流程和常用工具和編程語言，能夠進(jìn)行網(wǎng)站需求分析，了解網(wǎng)站的業(yè)務(wù)背景，能根據(jù)網(wǎng)站業(yè)務(wù)背景的不同確定網(wǎng)站功能，并能夠根據(jù)網(wǎng)站內(nèi)容進(jìn)行頁面規(guī)劃和結(jié)構(gòu)布局。2第1章網(wǎng)頁設(shè)計基礎(chǔ)主要內(nèi)容:網(wǎng)頁設(shè)計的幾個基本概念網(wǎng)站基礎(chǔ)網(wǎng)站設(shè)計網(wǎng)頁規(guī)劃和步驟了解常用網(wǎng)頁制作工具和網(wǎng)頁編程語言前幾界學(xué)生作品的正反面案例分析重點內(nèi)容:

文件、文件夾的命名規(guī)范，文件目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)，頁面規(guī)劃和結(jié)構(gòu)布局難點內(nèi)容:頁面布局格式與規(guī)范及網(wǎng)頁修飾與創(chuàng)意原則，能據(jù)網(wǎng)站業(yè)務(wù)背景的不同確定網(wǎng)站功能，并能夠根據(jù)網(wǎng)站內(nèi)容進(jìn)行頁面規(guī)劃和結(jié)構(gòu)布局.計劃學(xué)時:4學(xué)時31.1網(wǎng)頁設(shè)計的幾個基本概念1、什么是網(wǎng)頁？

一個網(wǎng)頁是存儲在某與互聯(lián)網(wǎng)相連計算機中的一個文件，通過網(wǎng)址（URL）來識別和存取。在瀏覽器中輸入網(wǎng)頁網(wǎng)址，通過瀏覽器解釋網(wǎng)頁文件，用戶就可以瀏覽該網(wǎng)頁。

2、網(wǎng)頁的分類

通常網(wǎng)頁文件以htm、html、asp、aspx、PHP、JSP等為擴(kuò)展名。不同的擴(kuò)展名分別代表不同類型的網(wǎng)頁文件。按表現(xiàn)形式可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

返回目錄4靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁：指網(wǎng)頁顯示后（或顯示期間），瀏覽器與服務(wù)器不再發(fā)生信息的交互。無法做進(jìn)行查詢、留言、聊天、電子商務(wù)等操作，并不是不動的網(wǎng)頁，如FLASH動畫。

動態(tài)網(wǎng)頁指瀏覽器端和服務(wù)器端可以進(jìn)行信息交流的網(wǎng)頁，即服務(wù)器可以根據(jù)瀏覽者的請求做出相應(yīng)動作和回復(fù)。常見的動態(tài)網(wǎng)頁類型有ASP、ASPX、PHP和CGI等等，其中以ASP動態(tài)網(wǎng)頁技術(shù)較成熟且易學(xué)。返回目錄5網(wǎng)站與網(wǎng)頁3、什么是網(wǎng)站

網(wǎng)站是互聯(lián)網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方。它由域名（即網(wǎng)站地址）和網(wǎng)站空間構(gòu)成。可以將網(wǎng)站喻為一個攤位或地盤。如果一個企業(yè)上了互聯(lián)網(wǎng)，表示進(jìn)入了世界上最大的市場，此時也只不過是一個看客；而如果企業(yè)建立了自已的網(wǎng)站，它就在市場中擁有了一個“攤位”，可以宣傳和展示自已產(chǎn)品。4、網(wǎng)站與網(wǎng)頁的關(guān)系

網(wǎng)站是網(wǎng)頁、圖片等文件的集合體，是網(wǎng)頁通過超級鏈接的形式組成的。返回目錄65、網(wǎng)站的邏輯結(jié)構(gòu)

1．服務(wù)器部分——包括計算機硬件、操作系統(tǒng)、

WWW程序、電子郵件程序等。

2．網(wǎng)絡(luò)接入部分和網(wǎng)絡(luò)安全系統(tǒng)——包括路由器、調(diào)制設(shè)備和網(wǎng)絡(luò)安全系統(tǒng)。

3．?dāng)?shù)據(jù)存貯部分和中間件——數(shù)據(jù)存貯存系統(tǒng)要有海量存貯能力，高速搜索能力，有效的數(shù)據(jù)采集、制作和發(fā)布能力。中間件介于服務(wù)器系統(tǒng)和數(shù)據(jù)存貯系統(tǒng)之間。

4．研發(fā)和維護(hù)部分

——此部分貫穿于網(wǎng)站從建立到消亡的全過程，需要專人負(fù)責(zé)。返回目錄71.2網(wǎng)站基礎(chǔ)

從網(wǎng)站功能考慮，網(wǎng)站系統(tǒng)可以劃分為以下方向：

1．輔助政府部門進(jìn)行國家管理。

2．為新聞和宣傳提供平臺。

3．為商業(yè)活動提供交易平臺。

4．為科研和學(xué)術(shù)交流服務(wù)。

5．沒有任何商業(yè)目標(biāo)的公益性網(wǎng)站和個人愛好網(wǎng)站。返回目錄1、定位網(wǎng)站系統(tǒng)81.2網(wǎng)站基礎(chǔ)

網(wǎng)站的類別比較繁雜，從信息流轉(zhuǎn)和提供服務(wù)的方式出發(fā)，可以分為以下幾類：

1．門戶類網(wǎng)站

2．信息發(fā)布類網(wǎng)站

3．電子商務(wù)類網(wǎng)站

4．資源服務(wù)類網(wǎng)站

5．娛樂游戲類網(wǎng)站

6．遠(yuǎn)程教育和醫(yī)療診斷類網(wǎng)站等等返回目錄2、定位網(wǎng)站的類別91.2網(wǎng)站基礎(chǔ)

準(zhǔn)確的形象定位對于提高網(wǎng)站的點擊率至關(guān)重要。網(wǎng)站形象是指它主要側(cè)重的內(nèi)容和功能。人們感興趣的網(wǎng)站內(nèi)容通常有：（1）新聞（包括時事新聞、體育新聞、財經(jīng)新聞、娛樂新聞等）。（2）求職、招聘、交友、征婚信息。（3）計算機軟件和硬件信息。（4）科教醫(yī)療信息。（5）金融證券信息。（6）商貿(mào)信息和各類廣告。（7）休閑、旅行、娛樂信息。（8）電子書籍和影視。返回目錄3、定位網(wǎng)站的形象10——定位網(wǎng)站的形象

人們感興趣的網(wǎng)站功能通常有：（1）搜索引擎和信息查詢。（2）電子郵件和免費電子信箱。（3）免費個人主頁空間。（4）軟件的上傳與下載。（5）網(wǎng)上聊天室、新聞組、BBS、發(fā)送短信。（6）實時股票信息和網(wǎng)上股票交易服務(wù)。（7）網(wǎng)上游戲娛樂。（8）網(wǎng)上商務(wù)活動、網(wǎng)上購物、網(wǎng)上結(jié)算。等等返回目錄111.2網(wǎng)站基礎(chǔ)

網(wǎng)站費用包括建站費用和運作費用：

1．域名費用——域名分級別，不同級別收費不同。

2．服務(wù)器硬件設(shè)備費用——一個網(wǎng)站的硬件至少包括計算機和網(wǎng)絡(luò)接入設(shè)備，這筆費用應(yīng)根據(jù)網(wǎng)站規(guī)模而定，不必過分鋪張。

3．系統(tǒng)軟件費用和開發(fā)維護(hù)費用

4．網(wǎng)站的市場推銷費用和經(jīng)營費用——要提高自己的市場份額，應(yīng)加強宣傳并提高服務(wù)質(zhì)量。返回目錄4、了解網(wǎng)站費用12站點結(jié)構(gòu)圖（SITEMAP）導(dǎo)航欄（NAVIGATIONBAR）聯(lián)系方式頁面（CONTACTPAGE）反饋表（FEEDBACKFORMS）引人入勝的內(nèi)容（COMPELLINGCONTENT）常見問題解答（FAQs）精美的圖片（GOODGRAPHICS）搜索工具（SEARCHINGMECHANISMS）新聞頁面（NEWSPAGE）相關(guān)站點鏈接（RELEVANTLINKS）1.2網(wǎng)站基礎(chǔ)返回目錄

按照國內(nèi)外傳統(tǒng)制作網(wǎng)站的要求，一個標(biāo)準(zhǔn)的網(wǎng)站應(yīng)該包括以下10項內(nèi)容：5、網(wǎng)站的基本內(nèi)容131.2網(wǎng)站設(shè)計基礎(chǔ)——申請域名

域名是網(wǎng)站在因特網(wǎng)上的門牌號碼，也可看作網(wǎng)站在因特網(wǎng)上的商標(biāo)。域名的命名基于IP地址層次化的命名方式，可由26個英文字母、10個阿拉伯?dāng)?shù)字、減號和下劃線組成，用圓點分隔成幾節(jié)，字母不區(qū)分大小寫。域名應(yīng)選擇簡短、有意義、容易記的單詞。域名有惟一性。域名可以進(jìn)行交易，買賣或過戶。域名分級別，從右向左依次為最高級（也稱頂級）、次高級等，最左邊為主機名?；窘Y(jié)構(gòu)為：

計算機主機名.機構(gòu)名.網(wǎng)絡(luò)名.最高層域名

頂級域名有2類：機構(gòu)域和地理域。機構(gòu)性域名由三個字母組成，地理性域名由兩個字母組成。返回目錄6、申請域名141.2網(wǎng)站基礎(chǔ)1．專線接入

—花費較大但優(yōu)勢明顯，提供的服務(wù)內(nèi)容多。

2．服務(wù)器托管——將Web服務(wù)器由其他網(wǎng)絡(luò)公司托管，費用比第一種接入方式低得多，但需要遠(yuǎn)程維護(hù)，技術(shù)要求高。

3．虛擬主機

——租用某些ISP的剩余磁盤空間，這些空間一般允許個人網(wǎng)站免費使用，節(jié)省了購買服務(wù)器的費用，但需要遠(yuǎn)程管理，受到的限制也比較多。返回目錄7、接入Internet的方式151.2網(wǎng)站基礎(chǔ)

選擇服務(wù)器要綜合考慮各方面因素，如：價格、性能、安全性、可擴(kuò)展性。

1．單從價格出發(fā)，應(yīng)首先考慮PC服務(wù)器，PC服務(wù)器又分工作組級、部門級和企業(yè)級三檔，價格各不相同，可根據(jù)網(wǎng)站規(guī)模確定使用何種級別的PC服務(wù)器。

2．單從性能與安全出發(fā)，Unix服務(wù)器占有一定優(yōu)勢，是高端系統(tǒng)的首選。

3．如果選擇PC服務(wù)器，操作系統(tǒng)一般為：WindowsNT或Windows2000或Linux。如果選擇小型機為服務(wù)器設(shè)備，一般使用Unix為平臺。

大網(wǎng)絡(luò)一般使用Unix，小網(wǎng)絡(luò)使用Windows

返回目錄8、網(wǎng)站服務(wù)器設(shè)備161、網(wǎng)站設(shè)計的主要任務(wù)：網(wǎng)站平面構(gòu)建設(shè)計（服務(wù)器端）以瀏覽器為客戶端的Web應(yīng)用程序開發(fā)系統(tǒng)測試網(wǎng)站發(fā)布2、網(wǎng)站設(shè)計的主要階段：用戶需求分析及變更（前期調(diào)研）網(wǎng)站業(yè)務(wù)流程分析系統(tǒng)分析及總體設(shè)計（撰寫網(wǎng)站設(shè)計策劃書）界面設(shè)計、交互設(shè)計和程序開發(fā)系統(tǒng)測試和文檔編寫客戶培訓(xùn)、技術(shù)支持和售后服務(wù)1.3網(wǎng)站設(shè)計——設(shè)計任務(wù)和開發(fā)過程返回目錄17客戶提出要求同客戶討論設(shè)計細(xì)節(jié)按客戶提出的要求和資料進(jìn)行整體規(guī)劃和頁面設(shè)計將策劃書提交客戶審閱不同意同意簽定合同并申請域名和網(wǎng)頁空間進(jìn)行網(wǎng)站的版面編排和頁面制作網(wǎng)站功能檢查測試不合格合格向客戶提交完成稿不滿意修改設(shè)計滿意設(shè)計完成并為客戶在各大搜索引擎上注冊

1.3網(wǎng)站設(shè)計—網(wǎng)站設(shè)計工作流程181.3網(wǎng)站設(shè)計——定位網(wǎng)站的主題3、網(wǎng)站主題的選擇：（按功能和結(jié)構(gòu)形式）門戶網(wǎng)站

國內(nèi)網(wǎng)絡(luò)公司經(jīng)營的網(wǎng)站：新浪（）搜狐（）、網(wǎng)易（）等

國外投資的網(wǎng)站：如：中文雅虎、香港的TOM、中華網(wǎng)等

國內(nèi)傳統(tǒng)媒體辦的網(wǎng)站：人民網(wǎng)（）新華網(wǎng)（）等普及型網(wǎng)站企業(yè)網(wǎng)站、大學(xué)網(wǎng)站、政府網(wǎng)站以及數(shù)量眾多的個人網(wǎng)站電子商務(wù)類網(wǎng)站媒體信息服務(wù)類網(wǎng)站辦公事務(wù)管理網(wǎng)站（辦公內(nèi)部）商務(wù)管理網(wǎng)站（企業(yè)內(nèi)部）返回目錄191.3網(wǎng)站設(shè)計——定位網(wǎng)站的主題返回目錄網(wǎng)站主題的選擇：（按內(nèi)容形式）

主題要小而精

定位要小，內(nèi)容要精。調(diào)查結(jié)果顯示，網(wǎng)絡(luò)上的“主題站”比“萬全站“更受人們的喜愛。題材不要太濫或者目標(biāo)太高

“太濫”是指到處可見、人人都有的題材，例如，軟件下載、免費信息?！澳繕?biāo)太高”是指在這一題材上已經(jīng)有非常優(yōu)秀、知名度很高的站點，要超越是很難的。201.3網(wǎng)站設(shè)計——定位網(wǎng)站的名稱4、網(wǎng)站名稱的選擇名稱要正氣指合理、合法、合情，不能用反動的、色情的、迷信的、危害社會安全的詞句。名稱要簡潔、易記對于中文網(wǎng)站，網(wǎng)站名稱最好用中文，不要用英文或者中英文混合型名稱。網(wǎng)站的名稱的字?jǐn)?shù)一般控制在6個字（最好是4個字）以內(nèi)，例如，“××閣”。名稱要有特色較好的網(wǎng)站名稱應(yīng)該是能體現(xiàn)一定的內(nèi)涵、韻味，并給瀏覽者更多的視覺沖擊和空間想象力。返回目錄211.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象5、CI（CorporateIdentity）形象指通過視覺來統(tǒng)一企業(yè)或個人的形象1.

網(wǎng)站有代表性的人物、動畫、花草，可以用它們作為設(shè)計的藍(lán)本，加以卡通化和藝術(shù)化。

2.網(wǎng)站是關(guān)于專業(yè)性的內(nèi)容，可以以本專業(yè)有代表的物品作為標(biāo)志。例如：中國銀行的銅板標(biāo)志、奔馳汽車的方向盤標(biāo)志。

3.用自己網(wǎng)站的英文名稱或字母組合做標(biāo)志。我校的網(wǎng)站標(biāo)記

（1）網(wǎng)站標(biāo)志（logo）的設(shè)計返回目錄22網(wǎng)站標(biāo)志（Logo）231.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象色彩是網(wǎng)站給瀏覽者的第一印象，不同的色彩搭配會產(chǎn)生不同的效果，并可能影響到訪問者情緒。一般不宜超過3種色彩?？梢赃\用到網(wǎng)站的標(biāo)志、標(biāo)題、主菜單、圖片和主色塊上。

設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩的原則：

標(biāo)準(zhǔn)色彩：能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。返回目錄（2）設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩241.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象色彩的選擇與含義：（基本色）紅色：代表熱情、奔放、喜悅、慶典黑色：代表嚴(yán)肅、夜晚、沉著、恐怖；黃色：代表高貴、富有白色：代表純潔、簡單藍(lán)色：代表天空、清爽綠色：代表植物、生命、生機灰色：代表陰暗、消極紫色：代表浪漫、愛情棕色：代表土地返回目錄

色彩本身是無任何含義，有的話也只是人賦予它的。但色彩確實可以在不知不覺間影響人的心理，左右人的情緒，所以就有人給各種色彩都加上特定的含義。25

不同主題的網(wǎng)站所應(yīng)用的色彩是不同的。對于網(wǎng)頁設(shè)計者來說，色彩的心理作用尤其重要。

通常的選擇是：重要內(nèi)容的文字用非彩色（黑色），邊框、背景、圖片用彩色。網(wǎng)頁色彩搭配的原理：注意色彩的鮮明性（引人注目）注意色彩的獨特性（使印象深刻）注意色彩的合適性（色彩與內(nèi)容氣氛協(xié)調(diào)）注意色彩的聯(lián)想性。（色彩與網(wǎng)頁內(nèi)涵關(guān)聯(lián)）

例如：綠色可以使人產(chǎn)生優(yōu)雅、舒適的氣氛，黃綠色有青春、旺盛的視覺意境，而黑色則含有幽靜、陰森的意境。返回目錄1.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象

網(wǎng)頁色彩搭配261.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象返回目錄網(wǎng)頁色彩搭配技巧

1.用一種色彩指先選定一種色彩，然后調(diào)整透明度或者飽和度，產(chǎn)生新的色彩。這樣的頁面色彩統(tǒng)一，有層次感。

2.用兩種色彩選定一種色彩，然后選擇它的對比色。

3.用一個色系就是用一個感覺的色彩，例如，淡藍(lán)、淡黃、淡綠或黃、淡黃、棕黃等。

4.用黑色和一種彩色27網(wǎng)頁色彩搭配注意點

1、不要將所有顏色都用到，盡量控制在3種色彩以內(nèi)。背景色不要太過復(fù)雜，以免減慢網(wǎng)頁打開的速度，建議主頁的色彩運用應(yīng)體現(xiàn)在站點標(biāo)志、導(dǎo)航欄、按鈕、邊框，非正文文字上。

2、背景和前文的對比要盡量大，絕對不要用花紋繁復(fù)的圖案作背景。

3.色彩的搭配考慮不是單純的顏色運用，還要考慮諸多因素，如：社會背景、心理需求、訪問者類別等等。1.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象281.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象

我們在設(shè)計網(wǎng)站時，需要盡量在頁面中使用看上去比較淡雅、簡潔的色彩；比如背景盡量少用灰暗、深沉的色彩（除非特殊需要），并且根頁面的主題來選擇主色調(diào)！返回目錄

網(wǎng)站的性質(zhì)。網(wǎng)站的訪客。對比度是否合適。色彩是否統(tǒng)一。設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩的注意事項：291.3網(wǎng)站設(shè)計——定位網(wǎng)站的CI形象

標(biāo)準(zhǔn)字體：一般網(wǎng)頁默認(rèn)的字體是中文“宋體”和英文”TimesNewRoman“。若需要體現(xiàn)“與眾不同”和特有的風(fēng)格，可選擇特別的字體。（3）設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體1.不要使用超過3種以上的字體（包括在網(wǎng)頁的統(tǒng)一界面中）。2.文字的顏色要注意與整體協(xié)調(diào)一致。3.標(biāo)題以H1~H3字號為佳。網(wǎng)站的標(biāo)準(zhǔn)字體的設(shè)計原則：4.要注意：使用非默認(rèn)字體時，最好采用圖片的形式。因為瀏覽者的計算機中可以沒有安裝特別字體。返回目錄30

宣傳標(biāo)語是網(wǎng)站的精神和目標(biāo)，可用一句話甚至一個詞加以高度概括，類似生活中的廣告金句。例如，Intel的“給你一顆奔騰的心”。（4）設(shè)計網(wǎng)站的宣傳標(biāo)語31（5）確定網(wǎng)站的欄目和版塊

將網(wǎng)站功能細(xì)分為若干的欄目和版塊，確定網(wǎng)站的欄目結(jié)構(gòu)和鏈接結(jié)構(gòu)。

返回目錄1.3網(wǎng)站設(shè)計——確定網(wǎng)站的欄目和版塊

設(shè)計網(wǎng)站的欄目與版塊劃分：要緊扣主題。將主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。

注意：主題欄目在總欄目中要占絕對優(yōu)勢，使網(wǎng)站顯得專業(yè)、主題突出。各版塊之間要保持相對獨立性。322、設(shè)定一個最近更新或網(wǎng)站指南欄目。為照顧常來的訪客，設(shè)置“最近更新”欄目，更有人性化。若主頁內(nèi)容龐大（超過15MB），層次較多，又沒設(shè)置站內(nèi)的搜索引擎，則更有必要設(shè)置“本站指南”欄目。3、設(shè)定一個可以雙向交流的欄目，例如，論壇，留言本、郵件列表等，讓瀏覽者留下他們的信息。調(diào)查表明，設(shè)置雙向交流欄目的站點比簡單地留一個“Emailme“的站點更具有親和力。4、設(shè)立一個下載欄目或常見問題回答欄目。5、對于輔助內(nèi)容，例如，網(wǎng)站介紹、版權(quán)信息等不必放在主欄目里，以免沖淡主題。331.3網(wǎng)站設(shè)計——確定網(wǎng)站的欄目和版塊設(shè)計網(wǎng)站的欄目所需要注意的幾點要求：盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上。盡可能刪除與主題無關(guān)的欄目。盡可能方便訪問者的瀏覽和查詢。返回目錄34網(wǎng)站目錄結(jié)構(gòu)的基本規(guī)則：不要將所有文件都存放在根目錄下（6）確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)清晰的目錄結(jié)構(gòu)有利于站點的維護(hù)，而網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。好的鏈接結(jié)構(gòu)有利于提高效率。按欄目內(nèi)容建立子目錄

容易造成文件管理混亂和上傳速度慢，影響工作效率

子目錄的建立，首先是按主菜單欄目（主欄目）建立在每個子目錄下都建立獨立的Images目錄返回目錄1.3網(wǎng)站設(shè)計——確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)35網(wǎng)站主目錄板塊1子目錄板塊n子目錄主頁images……子頁1images子頁n……其他目錄子頁1images子頁n……其他目錄36其他注意事項：目錄的層次不要太深，建議不要超過三層；不要使用中文目錄名及文件名；可能對網(wǎng)址的正確顯示造成困難不要使用過長的目錄名；太長的目錄名不便記憶盡量使用意義明確的目錄名；盡量做到“見名知意”。

一般使用簡單的英文單詞或漢語拼音以其縮寫形式37網(wǎng)站鏈接結(jié)構(gòu)的基本形式：樹狀鏈接結(jié)構(gòu)（一對一）

類似與DOS的目錄結(jié)構(gòu)，一級級進(jìn)入，一級級退出。

條理清晰，訪問者能明確知道自己在什么位置。

瀏覽效率低，如果要從一個欄目的子頁面到另一個欄目的子頁面，必須回到首頁再進(jìn)行。主頁頁面1頁面2頁面3頁面4頁面5頁面6頁面7一級標(biāo)題二級標(biāo)題返回目錄1.3網(wǎng)站設(shè)計——確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)38星狀鏈接結(jié)構(gòu)（一對多）優(yōu)點：瀏覽方便缺點：容易使瀏覽者失去自己的位置，易“迷路”

在實際應(yīng)用中，往往我們需要將這兩種結(jié)構(gòu)混合起來使用。總的目標(biāo)是希望瀏覽者既可以方便快速地達(dá)到自己需要的頁面，又可以清楚地知道自己的位置。返回目錄1.3網(wǎng)站設(shè)計——確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)39

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)站的鏈接結(jié)構(gòu)設(shè)計已經(jīng)不僅僅局限于可以方便瀏覽，而更加注重其個性化和相關(guān)性。

鏈接結(jié)構(gòu)設(shè)計，在實際網(wǎng)頁設(shè)計中是非常重要的一環(huán)。采用什么樣的鏈接結(jié)構(gòu)將直接影響版面的布局。例如：主菜單、主菜單放在什么位置?是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的鏈接等。在確定鏈接結(jié)構(gòu)后，再開始考慮鏈接效果和形式，是采用下拉表單還是用DHTML動態(tài)菜單等。40（7）版面布局版面布局基本規(guī)則：平衡、對比、疏密度、比例、凝視、圖片說明（1）“T”型布局

這種布局形式，一般指頁面頂部為橫條（網(wǎng)站標(biāo)志+廣告條），下方為多列的結(jié)構(gòu)，如最簡單的是左半部分為主菜單，右半部分顯示內(nèi)容。

優(yōu)點：頁面結(jié)構(gòu)清晰，主次分明，強調(diào)次序，給人穩(wěn)重、可信。缺點：規(guī)矩呆板，如果細(xì)節(jié)和色彩搭配上不注意，很容易讓人“看之無味”。返回目錄1.3網(wǎng)站設(shè)計——版面布局41返回目錄1.3網(wǎng)站設(shè)計——版面布局“T”型布局42（2）“國”型布局

也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的最多的一種結(jié)構(gòu)類型。優(yōu)點：充分利用版面，版面充實，信息量大。

缺點：頁面擁擠，不夠靈活。返回目錄1.3網(wǎng)站設(shè)計——版面布局431.3網(wǎng)站設(shè)計——版面布局“同”、“國”字型結(jié)構(gòu)布局(Π型結(jié)構(gòu)布局)

4445（3）POP布局

POP引自廣告語，就是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，在適當(dāng)位置放置主菜單。

優(yōu)點：講究平衡和有韻律，能達(dá)到強調(diào)、動感、高注目性的效果，漂亮吸引人；

缺點：速度慢。返回目錄1.3網(wǎng)站設(shè)計——版面布局46（4）對比性布局

這種布局形式，利用色彩、色調(diào)等技巧來表現(xiàn)，在內(nèi)容上也可以涉及古與今、新與舊、貧與富等的對比。優(yōu)點：視覺沖擊力強；

缺點：將兩部分有機的結(jié)合比較困難，一般用于設(shè)計型網(wǎng)站。返回目錄1.3網(wǎng)站設(shè)計——版面布局47

往往上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接

（5）拐角型布局4849

這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

（6）標(biāo)題正文型布局5051

這是一種左右分別為兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或標(biāo)志，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。

（7）左右框架型布局5253

與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。

（8）上下框架型布局5455

上面兩種結(jié)構(gòu)的結(jié)合，相對復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。

（9）綜合框架型布局56

這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

（10）封面型布局5758

其實這與封面型結(jié)構(gòu)是類似的，只是這種類型采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達(dá)的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體。

（10）Flash型596061

即上面幾種類型的結(jié)合與變化，比如在視覺上很接近拐角型的，但所實現(xiàn)的功能的實質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型。

（11）變化型62版面布局設(shè)計的步驟：草案以粗陋的線條勾畫出創(chuàng)意的輪廓粗略布局安排模塊的放置，注意突出重點、平衡協(xié)調(diào)定案注意設(shè)計的平衡和韻律，采用適當(dāng)?shù)膶Ρ群涂瞻仔Ч怀鲋攸c，以達(dá)到強調(diào)次序，使網(wǎng)站賞心悅目、內(nèi)容豐富、表達(dá)直觀。返回目錄1.3網(wǎng)站設(shè)計——版面布局63版面布局設(shè)計的注意點：頁面尺寸

像素點數(shù)，也指一個網(wǎng)頁文檔在顯示器上顯示的屏數(shù)。與顯示器的分辨率有關(guān)。頁面長度最好不要超過三屏，否則給人以冗長的感覺。選擇合適的造型形狀

保持頁面的平衡

平衡是指以頁面中心為支點，頁面的上下左右在分量上應(yīng)給人以勻稱的感覺。平衡又分為對稱平衡（莊重、穩(wěn)定）和非對稱平衡（活潑、樂趣）。重點要突出，增加表現(xiàn)力頁面風(fēng)格應(yīng)一致或接近減輕用戶的認(rèn)知負(fù)擔(dān)，并利用瀏覽器的緩存能力，提高系統(tǒng)的效率64（8）網(wǎng)站風(fēng)格網(wǎng)站風(fēng)格由諸多因素所組成，是一個“整體形象”。“整體形象”指站點的CI（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值、存在意義和站點榮譽等諸多因素。網(wǎng)站的風(fēng)格應(yīng)該具有一定的獨特性，人性化，要讓瀏覽者明確分辨出這是某個網(wǎng)站所獨有的。與眾不同要肯定風(fēng)格是建立在有價值的內(nèi)容之上的要徹底搞清楚自己希望網(wǎng)站能給人的印象是什么要在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象，風(fēng)格不是一次定位的，而是在實踐中不斷強化、調(diào)整、修飾的風(fēng)格必須建立的人的基礎(chǔ)之上返回目錄1.3網(wǎng)站設(shè)計——確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計65

對網(wǎng)站進(jìn)行分析定位之后，接下來就是制作網(wǎng)頁了，然而，如何對確定的主題和結(jié)構(gòu)中的文件加以規(guī)劃和創(chuàng)意，如何提高網(wǎng)頁的視覺吸引力，有效地傳達(dá)信息、給人以審美感受，就成為了擺在我們面前的一個非常重要的問題。網(wǎng)頁上有各種功能組件和媒體信息。最常見的功能組件包括網(wǎng)站標(biāo)志、導(dǎo)航欄、廣告條等，而色彩、文本、圖片和動畫則是網(wǎng)頁最基本的信息形式和表現(xiàn)手段。

1.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁基本元素

返回目錄66網(wǎng)頁設(shè)計的關(guān)鍵任務(wù)

就是圍繞主題如何將已有的網(wǎng)頁基本元素以網(wǎng)頁的形式展現(xiàn)出來。更通俗地說就是如何布局、安置素材，故其前期工作素材的準(zhǔn)備尤其重要。671.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁制作步驟網(wǎng)頁制作一般分為如下步驟：

1．網(wǎng)站規(guī)劃：將主題拆分為若干子主題，為每個子主題制作目錄及必要的空網(wǎng)頁文件。

2．主頁規(guī)劃：為主頁劃分區(qū)域，合理安排網(wǎng)站名稱、網(wǎng)站標(biāo)志、公共導(dǎo)航等必要內(nèi)容，并在主頁上為每個子主題建立帶描述性文字的超鏈接。

3．設(shè)計主頁、子主題網(wǎng)頁。返回目錄68網(wǎng)頁上最常見的功能組件1.網(wǎng)站的標(biāo)志(LOGO)：通常位于主頁面的左上角。2.導(dǎo)航欄：直觀地表示網(wǎng)頁具體內(nèi)容，引導(dǎo)瀏覽者順利訪問網(wǎng)頁。導(dǎo)航欄要放在明顯位置，它有一排、兩排、多排、圖片導(dǎo)航和框架快捷導(dǎo)航等。3.廣告條：又稱廣告欄。一般位于網(wǎng)頁頂部、導(dǎo)航欄的上方，與左上角的網(wǎng)站標(biāo)志相鄰。廣告條中圖形無需太繁雜，文字盡量使用粗體字，廣告語要精練，朗朗上口。4.搜索引擎：方便用戶以最快方式找到所需信息。一般位于導(dǎo)航欄下方。5.注冊與登錄區(qū)：用戶在此注冊會員或以會員身份登錄。一般放在頁面主內(nèi)容區(qū)的左上方或者右上方。6.主內(nèi)容區(qū)：網(wǎng)頁中要呈現(xiàn)給用戶的主要內(nèi)容。占據(jù)頁面最突出的位置和最大的空間。7.友情鏈接：用戶可以通過這些鏈接進(jìn)入其他網(wǎng)站。是一種互相宣傳的方式。一般位于頁面右側(cè)或者下方。1.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁基本元素

返回目錄69網(wǎng)頁最基本的信息形式和表現(xiàn)手段

包含文字、按鈕、圖像、超鏈接、表格、表單、事件與行為、動畫、框架、音頻、視頻、交互等1、按鈕：網(wǎng)頁上的任何一個板塊內(nèi)容都可以設(shè)計成按鈕的形式，在制作時要注意網(wǎng)頁整體協(xié)調(diào)。按鈕上的文字要清楚，圖案色彩要簡單。2、文本：網(wǎng)頁中最多的內(nèi)容通常是文本，可以根據(jù)自已的需要設(shè)置文字的顏色、字體、字號等內(nèi)容。3、圖像：是表現(xiàn)、美化網(wǎng)頁的最佳元素。但圖像也不宜太多，否則會讓人覺得雜亂，也影響網(wǎng)速。4、表格：一般用來控制網(wǎng)頁的布局。如使用較多的橫豎分明的網(wǎng)頁布局。5、表單：用來收集信息或?qū)崿F(xiàn)一些交互作用的表。6、多媒體及特殊效果：為了吸引瀏覽者，常設(shè)置一些動畫或聲音，使得頁面圖、文、聲并茂，以增加點擊率。1.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁基本元素

返回目錄701.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃

網(wǎng)頁文件規(guī)劃需要多方位考慮設(shè)計者和瀏覽者的需要，使網(wǎng)頁文件最大限度地實現(xiàn)設(shè)計者的目標(biāo)并為瀏覽者提供方便快捷和最直觀有效的信息服務(wù)。網(wǎng)頁文件規(guī)劃要遵循三個基本原則：內(nèi)容、速度和頁面美觀，其中內(nèi)容最重要。返回目錄總體設(shè)計：設(shè)計出總體框架圖。網(wǎng)頁主題鮮明、結(jié)構(gòu)合理，不能堆砌；將豐富的內(nèi)容和多樣的形式組織在一個統(tǒng)一的結(jié)構(gòu)中，達(dá)到形式和內(nèi)容的統(tǒng)一、協(xié)調(diào)；力求布局合理，美觀大方；；網(wǎng)頁設(shè)計標(biāo)準(zhǔn)，保持風(fēng)格一致。711.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁框架

網(wǎng)頁框架指網(wǎng)頁文件系統(tǒng)的組織結(jié)構(gòu)，合理的框架可以讓W(xué)eb頁面井井有條，在實際管理中減少不必要的錯誤。

一個頁面一個主題，避免大主題。把大主題分成幾個子主題，用主頁把所有頁面聯(lián)起來，在主頁中加入指向其他頁面的鏈接，并附帶簡短描述性文字，將讀者帶入不同主題的領(lǐng)域。在每個頁面加入超鏈接，方便讀者按自己意愿閱讀。返回目錄721.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃1．規(guī)劃主（首）頁

嚴(yán)格來說，主頁（HomePage）和網(wǎng)頁（Webpage）是兩個不同概念，主頁是指登陸到網(wǎng)站后看到的第一個頁面。

主機上默認(rèn)首頁名稱是固定的，不能隨便起，要符合遠(yuǎn)程服務(wù)器的要求，通常為index.htm、index.html、default.htm、default.html或default.aspx，也可為其他擴(kuò)展名。

主頁的一個重要功能是導(dǎo)航，一般沒有實質(zhì)性的具體內(nèi)容，有，也只是什么？利用超鏈接指引用戶查詢保存在網(wǎng)址或其他位置的信息，但超鏈接層數(shù)不能太多。返回目錄73“好的開始是成功的一半”，首頁的設(shè)計和制作是絕對需要重視和花心思的，一般首頁設(shè)計和制作占整個制作時間的40%。1.確定首頁的功能模塊

首頁的內(nèi)容模塊是指需要在首頁上實現(xiàn)的內(nèi)容和功能。例如：網(wǎng)站名稱，主菜單，新聞，搜索，友情鏈接，郵件列表、計數(shù)器（count)、版權(quán)（copyright)等。選擇哪些模塊，實現(xiàn)哪些功能，是否需要添加其他模塊都是首頁設(shè)計時需要首先確定的。2.設(shè)計首頁的版面設(shè)計版面的最好方法是：找一張白紙，一支筆，先將理想中的草圖勾畫出來，然后再用網(wǎng)頁制作軟件實現(xiàn)。3.技術(shù)細(xì)節(jié)的處理：例如，如何設(shè)置字體和鏈接顏色等。返回目錄首頁設(shè)計74

包括主頁在內(nèi)的所有頁面都應(yīng)該簡潔清晰，以最少的元素表達(dá)最多的信息。整體風(fēng)格基本一致。751.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃2．設(shè)計網(wǎng)頁的色彩視覺沖擊是網(wǎng)站給人的第一印象，好的色彩搭配能體現(xiàn)網(wǎng)站形象，延伸網(wǎng)站內(nèi)涵，還能直接影響訪問者的情緒。通常，網(wǎng)站的主要色彩不要超過3種，用于網(wǎng)站標(biāo)志、標(biāo)題、主菜單和主色塊，顯得整體統(tǒng)一。其他色彩可作為點綴和襯托，不能喧賓奪主。3．設(shè)計網(wǎng)站標(biāo)志(logo)、準(zhǔn)備網(wǎng)頁素材

網(wǎng)站標(biāo)志就如同商品的商標(biāo)一樣，是站點特色和內(nèi)涵的集中體現(xiàn)，好的標(biāo)志能讓人看見logo就聯(lián)想到擁有該標(biāo)志的網(wǎng)站。標(biāo)志可以是漢字、英文字母、動物或人物的符號、圖案等。返回目錄761.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃4．設(shè)計網(wǎng)頁的圖形和背景

圖形是WWW網(wǎng)站的特色之一，具有醒目、吸引人和傳達(dá)信息形象的作用。適當(dāng)運用圖形可以為網(wǎng)頁增色，應(yīng)用不當(dāng)也會帶來反效果。由于圖形的傳輸遠(yuǎn)沒有文字傳輸快，要充分考慮圖形文件的大小和傳輸速率。背景也是如此，雖能使頁面美觀，但卻耗費傳輸時間。返回目錄771.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃5．網(wǎng)頁文本

文本通常是網(wǎng)頁的主要內(nèi)容，也是網(wǎng)站經(jīng)常更新的部分。網(wǎng)站成功與否，內(nèi)容很關(guān)鍵。網(wǎng)頁上文字的字體、顏色等屬性要與頁面整體風(fēng)格匹配，并貫穿整個網(wǎng)站建設(shè)，盡量不用閃爍文字。6．聯(lián)系方式

提供聯(lián)系方式使訪問者與自己聯(lián)系或發(fā)表意見，是網(wǎng)頁文件規(guī)劃中不可缺少的，通常應(yīng)提供電子信箱、電話號碼、傳真、通信地址等。返回目錄781.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁文件規(guī)劃7.留言本

留言本可以方便自己與網(wǎng)頁訪問者交流，訪問者對網(wǎng)站的評價可以寫在留言本里，回答問題也可以在留言本里進(jìn)行。8．計數(shù)器和聊天室

如果想知道網(wǎng)站的訪問次數(shù)，還可以在主頁上為網(wǎng)站設(shè)置一個計數(shù)器。也可申請免費聊天室程序，鏈接添加到主頁中。9、目錄結(jié)構(gòu)返回目錄791.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁創(chuàng)意設(shè)計網(wǎng)頁創(chuàng)意設(shè)計的基本原則：意義：在于能大大提高網(wǎng)頁的視覺吸引力，有利于信息的有效傳達(dá)，并能給人以一定的審美感受。網(wǎng)頁創(chuàng)意設(shè)計的意義、功能和目的：依據(jù)信息內(nèi)容的意義和結(jié)構(gòu)進(jìn)行情節(jié)化、理性化的統(tǒng)調(diào)布局和

必要的圖像符號化處理；重視“形象思維”的情感象征意義的傳達(dá)，以有別于知識性思考與形式審美結(jié)構(gòu)的營造。功能：引人注目，提高網(wǎng)頁的視覺吸引力，增加讀者的瀏覽和持續(xù)閱讀的興趣。目的：使得布局新穎別致，視覺流暢通順，形態(tài)清晰悅目，使網(wǎng)頁所提供的信息能得到更明確而有效的傳達(dá)。不要刻意追求與眾不同返回目錄80網(wǎng)頁創(chuàng)意設(shè)計的構(gòu)成要素及其作用：

分類

基本要素

創(chuàng)意設(shè)計

作用

內(nèi)容的構(gòu)成

網(wǎng)頁名稱使用較大的字型；用活字或書寫字或獨特的美術(shù)字富有美感，以表現(xiàn)獨特的信息風(fēng)格

標(biāo)題主標(biāo)題，放置在顯著位置子標(biāo)題以菜單方式出現(xiàn)吸引瀏覽者視線，導(dǎo)引信息正文

正文字群聚集，字體統(tǒng)一，每行最好在20~30個中文字，空白適度降低讀者閱讀時的視力疲勞

標(biāo)語具有韻味的意義完整的句子傳遞網(wǎng)站風(fēng)格、理念、品位格調(diào)及定位

造型的構(gòu)成

標(biāo)志圖案化徽標(biāo)，力求造型簡單單純具有一定的象征意義，有較強的視覺傳達(dá)效果

文字插圖一個界面不要超過三種字體清晰悅目，直觀明確

圖標(biāo)可視化造型風(fēng)格的標(biāo)簽或符號幫助瀏覽者發(fā)現(xiàn)信息

動畫各種造型變化及形式效果變化的圖形增添視覺趣味，突出風(fēng)格和主題

背景色彩灰度肌理、抽象連續(xù)圖案做底紋感觀效果1.4網(wǎng)頁規(guī)劃和步驟——網(wǎng)頁創(chuàng)意設(shè)計返回目錄81網(wǎng)頁創(chuàng)意設(shè)計的原理和準(zhǔn)則：原理：使各要素的構(gòu)成與視覺的關(guān)聯(lián)與配置，使各要素和諧統(tǒng)一，相輔相成，在構(gòu)成上成為具有活力的有機組合；使各要素保持合理的秩序性，創(chuàng)造一種統(tǒng)一的視覺效果，從而有效的傳