邏輯結(jié)構(gòu)介紹課件

專題二

網(wǎng)站的規(guī)劃與設(shè)計

專題二

網(wǎng)站的規(guī)劃與設(shè)計

專題二：網(wǎng)站的規(guī)劃與設(shè)計【專題內(nèi)容】2.1網(wǎng)站的欄目規(guī)劃2.2網(wǎng)站的目錄結(jié)構(gòu)設(shè)計2.3網(wǎng)站的風(fēng)格設(shè)計2.4網(wǎng)站的導(dǎo)航設(shè)計網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計專題二：網(wǎng)站的規(guī)劃與設(shè)計【專題內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.1節(jié)網(wǎng)站的欄目規(guī)劃【本節(jié)內(nèi)容】

一.邏輯結(jié)構(gòu)介紹二.欄目規(guī)劃的任務(wù)三.欄目規(guī)劃舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.1節(jié)網(wǎng)站的欄目規(guī)劃【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)線性結(jié)構(gòu)是最簡單的邏輯結(jié)構(gòu)，如圖2-1所示。它將多個網(wǎng)頁按照一定的先后順序鏈接起來，用戶沒有訪問到前一個網(wǎng)頁就無法進入下一個網(wǎng)頁。圖2-1線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3網(wǎng)頁4一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)線性結(jié)構(gòu)最常用于需要逐步進行的欄目，比如用戶注冊、建立定單、教程等。圖2-2所示的就是一個典型的用戶注冊的例子。圖2-2用戶注冊流程網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計開始注冊接受條款填寫注冊信息完成注冊一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計開始注一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)如圖2-3所示的帶選擇的線性結(jié)構(gòu)，可以根據(jù)用戶不同的選擇來訪問不同的下一個網(wǎng)頁。圖2-3帶選擇的線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1網(wǎng)頁2’網(wǎng)頁3網(wǎng)頁4網(wǎng)頁2一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)相對于按先后順序組織而成的線性結(jié)構(gòu)，層次型結(jié)構(gòu)是按照網(wǎng)頁之間的包含關(guān)系組織而成的。圖2-4所示的就是一個典型的層次型結(jié)構(gòu)，它很像一棵倒置的樹。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁21網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3主頁網(wǎng)頁22網(wǎng)頁11網(wǎng)頁31圖2-4層次型結(jié)構(gòu)一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)層次型結(jié)構(gòu)簡單而且直觀，能將所有的內(nèi)容劃分得非常清晰且便于理解，因而幾乎所有的網(wǎng)站都采用這種結(jié)構(gòu)來進行總體的欄目規(guī)劃，即將所有的內(nèi)容先分成若干個大欄目，然后再將每個大欄目細分成若干小欄目，以此類推直到不用再細分為止。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)

層次型結(jié)構(gòu)也有不好的地方，就是用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級一級地訪問，最終到達想要訪問的網(wǎng)頁。所以，層次型結(jié)構(gòu)最好的深度就是三層，最多不要超過五層。另外，建立一個良好的導(dǎo)航系統(tǒng)（本專題第4節(jié)將學(xué)習(xí)）也可以彌補層次型結(jié)構(gòu)這方面的缺點。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)如圖2-5所示，網(wǎng)狀結(jié)構(gòu)是指多個網(wǎng)頁相互之間都有超鏈接的一種結(jié)構(gòu)，這些網(wǎng)頁可以是層次結(jié)構(gòu)上的任意網(wǎng)頁，由于導(dǎo)航的需要或者內(nèi)容上的相關(guān)性而相互鏈接在一起。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁2網(wǎng)頁1網(wǎng)頁3網(wǎng)頁4網(wǎng)頁5圖2-5網(wǎng)狀結(jié)構(gòu)一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁2一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)它的導(dǎo)航條就出現(xiàn)在主頁和其它每一個網(wǎng)頁上，用戶在任何一個網(wǎng)頁上進行訪問的時候，都可以通過這個導(dǎo)航條而一步切換到其他欄目的網(wǎng)頁之上。這個網(wǎng)站各個網(wǎng)頁之間因這個導(dǎo)航條而形成了一個網(wǎng)狀結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-6網(wǎng)狀結(jié)構(gòu)舉例一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)狀結(jié)構(gòu)的實現(xiàn)就在于所有相關(guān)的網(wǎng)頁上保留到其他網(wǎng)頁的超鏈接。這種結(jié)構(gòu)使用戶能更方便地在網(wǎng)站上游弋，但同時也帶來一個龐大超鏈接數(shù)的問題，對于維護來說相當(dāng)麻煩，某個網(wǎng)頁的改動(如改名、刪除、增加)就可能同時需要對所有的網(wǎng)頁進行相應(yīng)的修改。所以在網(wǎng)站中要謹(jǐn)慎使用網(wǎng)狀結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)欄目規(guī)劃的主要任務(wù)是對所收集的大量內(nèi)容進行有效篩選，并將它們組織成一個合理的易于理解的邏輯結(jié)構(gòu)。成功的欄目規(guī)劃不僅能給用戶的訪問帶來極大的便利，幫助用戶準(zhǔn)確地了解網(wǎng)站所提供的內(nèi)容和服務(wù)，以及快速地找到自己所感興趣的網(wǎng)頁，還能幫助網(wǎng)站管理員對網(wǎng)站進行更為高效的管理。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)欄目規(guī)劃的主要任務(wù)是對所收集的大量內(nèi)容進行二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目欄目規(guī)劃的第—步就是要確定哪些是必需的欄目，這取決于網(wǎng)站的性質(zhì)。例如，對于一個企業(yè)網(wǎng)站來說，公司簡介、產(chǎn)品介紹、服務(wù)內(nèi)容、技術(shù)支持、聯(lián)系方式等欄目是必不可少的，而對于政府網(wǎng)站來說政務(wù)、政策法規(guī)、地方經(jīng)濟、百姓生活、觀光旅游等欄目都是必需的。個人網(wǎng)站相對來說比較隨意，往往取決于所收集的內(nèi)容，但個人簡介、個人收藏等欄目通常不能缺少。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目除了內(nèi)容欄目之外，網(wǎng)站還應(yīng)該包含另外兩類欄目：用戶指南類欄目和交互性欄。用戶指南類欄目是為了幫助用戶了解這個網(wǎng)站的背景、性質(zhì)、目的、功能及發(fā)展歷程，如何更好地對網(wǎng)站進行訪問，以及網(wǎng)站的最新動態(tài)。常以“幫助”、“關(guān)于網(wǎng)站”、“網(wǎng)站地圖”、“最新動態(tài)”等名稱出現(xiàn)。交互性欄目是能與用戶進行雙向交流的欄目，通過它解答用戶的疑問、了解用戶的需求，還可以獲得用戶對網(wǎng)站的建議和看法。如留言板、論壇（BBS）。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（2）2.確定重點欄目確定完需要設(shè)置哪些欄目后，需要從這些欄目中挑選出最重要的幾個欄目，然后對它們進行更詳細的規(guī)劃。這種選擇取決于網(wǎng)站的目的與功能。比如企業(yè)網(wǎng)站，其目的可能是為了更好地推銷自己的產(chǎn)品，所以產(chǎn)品介紹便是它的重點欄目。而個人網(wǎng)站，目的通常是為了讓別人分享他收集到的信息，向別人介紹他的原創(chuàng)作品，它的重點欄目往往是個人作品和個人收藏。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（2）2.確定重點欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)建立層次型結(jié)構(gòu)是一個遞進的過程，即從上到下逐級確定每—層的欄目。首先是確定第一層，即網(wǎng)站所必需的欄目，然后對其中的重點欄目進行進—步規(guī)劃，確定它們所必需的子欄目，以此類推直至不需要再細分為止。將所有的欄目及其子欄目連在一起就形成了網(wǎng)站的層次型結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)如圖2-7所示的可樂貓網(wǎng)站，它在第—層設(shè)置了“我的資料”、“我的作品”、“懷念家駒”、“給我留言”四個重點欄目和“news”、“info”、“l(fā)ink”三個其他欄目。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2-7可樂貓網(wǎng)站主頁二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)然后對每一個重點欄目又進行了更細的規(guī)劃，比如“我的資料”又分出“我的清單”、“我的愛情”和“我的夢想”三個子欄目，“我的作品”又分出“FLASH”、“CG”和“ARTICLE”三個子欄目。將這些欄目及其子欄目連在一起，我們可以很清楚地看到可樂貓網(wǎng)站的層次型結(jié)構(gòu)，如圖2-8所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-8可樂貓網(wǎng)站欄目的層次型邏輯結(jié)構(gòu)

可樂貓網(wǎng)站我的資料我的作品懷念家駒我的清單我的愛情我的夢想FLASHCGARTICLEE成員介紹舊日足跡經(jīng)典照片給我留言NEWSINFOLINK二、欄目規(guī)劃的任務(wù)（3）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計可樂貓網(wǎng)站我的資料二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目其次是設(shè)計這個欄目的實現(xiàn)方法，即設(shè)計這個欄目的網(wǎng)頁構(gòu)成、各個網(wǎng)頁之間的邏輯關(guān)系、各個網(wǎng)頁的內(nèi)容、內(nèi)容的顯示方式、數(shù)據(jù)庫結(jié)構(gòu)等各個方面的問題。例如很多網(wǎng)站都有的用戶注冊欄目，如圖2-9所示，這個欄目通常需要六個網(wǎng)頁，采用線性+分支結(jié)構(gòu)來進行組織。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計不合法開始注冊接受條款填寫注冊信息信息檢驗合法同意不同意完成注冊結(jié)束注冊二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目詳細設(shè)計上圖中的每一個網(wǎng)頁。如第三個網(wǎng)頁“填寫注冊信息”采用表單來實現(xiàn)，所需注冊的信息根據(jù)網(wǎng)站的需求而定，通常包括用戶名、密碼、性別、國籍、省份、E-mail等內(nèi)容。還要設(shè)計好網(wǎng)頁之間的分支關(guān)系，如用戶在第二個網(wǎng)頁同意“接受條款”則進入到“填寫注冊信息”的網(wǎng)頁；不同意“接受條款”時，就要進入到“退出注冊”，該網(wǎng)頁顯示有關(guān)中止注冊的信息。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目最后還要設(shè)計這個欄目和其他欄目之間的關(guān)系。網(wǎng)站有許多欄目，但欄目與欄目之間存在著從數(shù)據(jù)、內(nèi)容到布局等各個層次上的關(guān)聯(lián)。如企業(yè)站點的產(chǎn)品介紹、價格信息和在線定單等欄目之間通常使用統(tǒng)一的數(shù)據(jù)庫，這樣在任何—個欄目中打開同一個產(chǎn)品時都能看到相同的介紹信息，保證了信息的一致性。設(shè)計欄目之間關(guān)系的工作，就是找出各個欄目之間可以共享的相關(guān)內(nèi)容，并確定采用什么樣的方式將它們串聯(lián)起來。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)三、欄目規(guī)劃舉例4.設(shè)計每一個欄目欄目規(guī)劃最便捷的方法就是參考同類網(wǎng)站的欄目規(guī)劃，吸收共同的欄目，去掉不適合的欄目，然后添加有自己特色的欄目。參考“德德瑪”網(wǎng)站來學(xué)習(xí)個人網(wǎng)站的欄目規(guī)劃。假若你非常喜歡歌唱家德德瑪，你已經(jīng)收集了很多有關(guān)德德瑪?shù)母枨D片以及報道等?，F(xiàn)在要建立一個名為“我從草原來-德德瑪”的個人網(wǎng)站。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例根據(jù)上節(jié)所學(xué)知識，首先需要做的是確定網(wǎng)站所必需的欄目。第一個必需的欄目就是圖片欄目，將其取名為“個人圖庫”；接著就是簡介德德瑪?shù)乃囆g(shù)生涯，第二個欄目是“藝術(shù)簡介”；第三個欄目是“草原夜鶯”，專門介紹德德瑪演唱的歌曲與視頻專輯；第四個欄目是“精彩回放”，介紹德德瑪在央視“藝術(shù)人生”、“東方之子”等頻道被報道的專輯；第五個欄目是“文摘報道”介紹報刊登載的有關(guān)道德德瑪歌唱生涯的重要文章；為讓更多朋友參與討論、共享收藏，以及對本網(wǎng)站的建議，還設(shè)置交互性欄目“德迷論壇”，等等。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例根據(jù)上節(jié)所學(xué)知識，首先需要做的是確定網(wǎng)站所必三、欄目規(guī)劃舉例重點欄目的規(guī)劃。“草原夜鶯”、“精彩回放”、“文摘報道”和“德迷論壇”是所有這些欄目中最為重要的欄目，所以需要對它們進行更細的規(guī)劃?！安菰国L”欄目又分為“歌曲專輯”和“歌曲插圖”等子欄目?！熬驶胤拧睓谀坑址譃椤八囆g(shù)人生”、“愛心世界”、“西部情懷”、“東方之子”等子欄目。“文摘報道”欄目將登載報刊對德德瑪?shù)闹匾獔蟮??！暗旅哉搲睓谀砍艘话阏搲瘧?yīng)有的子欄目外，還做一個“論壇展區(qū)”的子欄目，用于展示“德迷”收藏的作品。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例重點欄目的規(guī)劃。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例

網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計藝術(shù)簡介精彩回放藝術(shù)人生精彩圖片西部情懷東方之子文摘報道草原上的夜鶯……

故鄉(xiāng)是塊磁鐵個人圖庫草原夜鶯歌曲專輯歌曲插圖德迷論壇登錄注冊論壇展區(qū)服務(wù)條款完成注冊圖片集音樂集電影集信息填寫信息檢驗搜索……風(fēng)格我從草原來德德瑪個人網(wǎng)站文章內(nèi)插圖友情鏈接圖2-10我從草原來-德德瑪個人網(wǎng)站欄目層次結(jié)構(gòu)三、欄目規(guī)劃舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計藝術(shù)簡介精彩回放藝2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)也可稱為物理結(jié)構(gòu)，它是解決如何在硬盤上更好地存放包括網(wǎng)頁、圖片、Flash動畫、視音頻、數(shù)據(jù)庫等各種資源在內(nèi)的所有網(wǎng)站資源。目錄結(jié)構(gòu)是否合理，對網(wǎng)站的創(chuàng)建效率會產(chǎn)生較大的影響，但更主要的，會對未來網(wǎng)站的性能、網(wǎng)站的維護及擴展產(chǎn)生很大的影響。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)也可稱為物理結(jié)構(gòu)，它2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計【本節(jié)內(nèi)容】一.目錄結(jié)構(gòu)設(shè)計原則二.目錄結(jié)構(gòu)設(shè)計舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則目錄結(jié)構(gòu)對用戶來說是不可見的，它只針對網(wǎng)站管理員，所以它的設(shè)計是為了網(wǎng)站管理員能從文件的角度更好地管理網(wǎng)站的所有資源。目錄結(jié)構(gòu)的設(shè)計通常需要遵循以下原則：

1.網(wǎng)站應(yīng)有一個主目錄。

2.不要將所有的文件都直接存放在網(wǎng)站根目錄下

3.根據(jù)欄目規(guī)劃來設(shè)計目錄結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則目錄結(jié)構(gòu)對用戶來說是不可見的，它只針對網(wǎng)一、目錄結(jié)構(gòu)設(shè)計原則

4.每個目錄下都建立獨立的images（或pictures）子目錄.5.目錄的層次不要太深

6.不要使用中文目錄名和中文文件名

7.可執(zhí)行文件和不可執(zhí)行文件分開放置

8.數(shù)據(jù)庫文件單獨放置網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則4.每個目錄下都建立獨立的image二、目錄結(jié)構(gòu)設(shè)計舉例以“我從草原來--德德瑪”個人網(wǎng)站為例。在上節(jié)欄目規(guī)劃的基礎(chǔ)上，接著為這個網(wǎng)站設(shè)計它的目錄結(jié)構(gòu)，如圖2-11所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計

dedemaweb

images

jingcaihuifang

images

wengzhanbaodao

images

caoyuanyieying

images

musics

movies

demilundan

images

musics

flashes

movies

youqingliangjie

images二、目錄結(jié)構(gòu)設(shè)計舉例以“我從草原來--德德瑪”個人網(wǎng)站為例。二、目錄結(jié)構(gòu)設(shè)計舉例上圖就是根據(jù)前面所述的若干原則而設(shè)計的目錄結(jié)構(gòu)。從中可以看到，網(wǎng)站的目錄結(jié)構(gòu)和圖2-10所示的層次型結(jié)構(gòu)是對應(yīng)的，每一個目錄下都有—個名為“images”的子目錄，用于保存圖片。

圖2-12我從草原來--德德瑪個人網(wǎng)站網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、目錄結(jié)構(gòu)設(shè)計舉例上圖就是根據(jù)前面所述的若干原則而設(shè)計的目2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計相對于網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計，網(wǎng)站的風(fēng)格設(shè)計是最抽象的。風(fēng)格是指用戶對網(wǎng)站整體形象的一種感覺。這個整體形象包括網(wǎng)站標(biāo)志、色彩、版面布局、交互方式、文字編排、圖片、動畫等諸多因素。風(fēng)格又是獨特的，是本網(wǎng)站不同于其他網(wǎng)站的地方。統(tǒng)一的風(fēng)格使用戶無論處于網(wǎng)站的哪一個網(wǎng)頁，都知道自己正在訪問的是這個網(wǎng)站。例如微軟網(wǎng)站，每一個網(wǎng)頁都有特有的藍色和“Microsoft”標(biāo)志。色彩搭配和版面布局是網(wǎng)站風(fēng)格最重要的兩個方面。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計相對于網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計【本節(jié)內(nèi)容】

一.色彩搭配基礎(chǔ)二.版面布局設(shè)計網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識由光學(xué)知識可知，顏色是因為物體對光的反映或折射而產(chǎn)生的。紅、綠、藍是光的三原色，它們不同程度的組合可以形成各種顏色。在網(wǎng)頁中用光的三原色的不同顏色值組合成各種顏色。常采用6位十六進制的數(shù)值來表示，每兩位代表一種顏色，從左到右依次表示紅色、綠色和藍色，每種顏色的十六進制值從00~FF。顏色值越高表示這種顏色越濃。比如紅色，其數(shù)值為“#FF0000”（＃號表示這是十六進制數(shù)），白色為“#FFFFFF”，黑色為“#000000”。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識在傳統(tǒng)的色彩理論中，顏色一般分為彩色和非彩色（或稱為灰色）兩大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的顏色。在網(wǎng)頁中，如果組成顏色的三種原色數(shù)值相等，就顯示為灰色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識太陽光是多種彩色混合而成的，按顏色的色調(diào)通常將其劃分為七種顏色：紅、橙、黃、綠、青、藍、紫。如果將這七種顏色按這個順序漸變?yōu)橐粭l色帶的話，越靠近紅色，給人的感覺越溫暖，越靠近藍色和紫色，給人的感覺越寒冷。所以紅、橙、黃的組合又稱為暖色調(diào)，青、藍、紫的組合又稱為冷色調(diào)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）除了冷暖的差別外，不同的單個顏色也會給人帶來不同的感覺，分述如下。紅色：是一種激奮的色彩，給人以沖動、憤怒、熱情和活力的感覺。綠色：介于冷暖兩種色彩的中間，顯得和睦、寧靜、健康、安全。它和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時尚的效果。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）除了冷暖的差別外，不同的單個顏色也會一、色彩搭配基礎(chǔ)（1）黃色：充滿快樂、希望、智慧和輕快，它也是最亮的一種顏色。藍色：是最具涼爽、清新、專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛（如天空的色彩）。白色：給人以潔白、明快、純真和干凈的感覺。黑色：通常是深沉、神秘、寂靜、悲哀和壓抑的代表?；疑壕哂兄杏?、平凡、溫和、謙讓、中立和高雅的感覺，它可以和任何一種顏色進行搭配。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）黃色：充滿快樂、希望、智慧和輕快，它也一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站的色彩搭配通常分為兩個步驟，第一步就是為整個網(wǎng)站選取—種主色調(diào)，然后再為主色調(diào)搭配多種適合的顏色。主色調(diào)指的是整個網(wǎng)站給人印象最深的顏色，或者說除白色之外用得最多的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配不同的顏色給人的感受是不—樣的，所以選取主色調(diào)最基本的原則就是保證所選的顏色與網(wǎng)站的主題或者形象相符，進一步地，能夠通過這種顏色加深用戶對網(wǎng)站的印象。如藍色是一種給人感覺非常專業(yè)的顏色，所以許多高科技公司都喜歡使用藍色作為公司網(wǎng)站的顏色。最典型的當(dāng)數(shù)微軟公司（圖2-13）和IBM公司（圖2-14）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-13Microsoft公司主頁圖2-14IBM公司主頁一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-13Micr一、色彩搭配基礎(chǔ)（2）紅色則是熱情和活力的象征，北京市政府網(wǎng)站首都之窗()正是通過紅色來向人們傳達了北京作為中國首都的氣質(zhì)：大氣和熱情，如圖2-15所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）紅色則是熱情和活力的象征，北京市政府網(wǎng)一、色彩搭配基礎(chǔ)（2）易趣是全球最大的中文網(wǎng)上交易平臺，它致力于為所有網(wǎng)絡(luò)用戶建立一個誠信、平等、安全、高效、舒適的網(wǎng)上交易環(huán)境，而對于這一點，沒有比綠色更為合適的顏色，如圖2-16所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）易趣是全球最大的中文網(wǎng)上交易平臺，它致一、色彩搭配基礎(chǔ)（2）選好主色調(diào)之后，接下來要考慮的就是在什么地方使用主色調(diào)。主色調(diào)最常表現(xiàn)在三個位置，首先是頭部，也就是網(wǎng)頁最上面的部分，通常包含導(dǎo)航條。頭部是最能體現(xiàn)主色調(diào)的地方，所以所有的網(wǎng)站都會在頭部表現(xiàn)主色調(diào)。其次是欄目索引條上，欄目索引條雖然面積小，但是出現(xiàn)在網(wǎng)頁的各個部位，所以能非常有效地渲染主色調(diào)。最后是網(wǎng)頁上的文字，文字筆畫雖細，但大面積的文字也能很好地突出主色調(diào)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）選好主色調(diào)之后，接下來要考慮的就是在什一、色彩搭配基礎(chǔ)（2）接著要考慮的是別的地方使用什么顏色去搭配這種主色調(diào)，比如背景色、文字顏色、導(dǎo)航條顏色、插圖顏色等都使用什么顏色。色彩搭配是一項非常精細的工作，因為往往一個細節(jié)就會影響整個網(wǎng)頁的色彩均衡。色彩搭配沒有固定的模式與步驟，先從大面積用色，再到小細節(jié)去搭配顏色，會使得這項工作變得簡單一些。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）接著要考慮的是別的地方使用什么顏色去搭一、色彩搭配基礎(chǔ)（2）（1）選取背景色大多數(shù)的網(wǎng)站都會選取白色作為背景色。白色使得狹小的屏幕空間顯得很大，再多的信息在白色的背景下，其排放也可以顯得很整齊，其頁面也可以顯得非常干凈和整潔。如搜狐、網(wǎng)易、新浪、湖南第一師范等網(wǎng)站都采用白色為背景色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（1）選取背景色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計湖南第一師范主頁一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計湖南第一師范主頁一、色彩搭配基礎(chǔ)（2）（2）導(dǎo)航條的顏色導(dǎo)航條是網(wǎng)站欄目的一個索引，常以一個水平長條形式出現(xiàn)在網(wǎng)頁頭部的下邊（也有的出現(xiàn)在頭部下左邊）。導(dǎo)航條作為頭部的一部分，經(jīng)常采用主色調(diào)，比首都之窗主頁易趣網(wǎng)主頁。另一方面，導(dǎo)航條因為介于網(wǎng)頁的頭部和內(nèi)容部分的中間，所以也經(jīng)常作為頭部和內(nèi)容部分的過渡，也可采用灰色系列導(dǎo)航條，比德德瑪網(wǎng)站主頁、湖南第一師范主頁的導(dǎo)航條。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（2）導(dǎo)航條的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（3）欄目索引條的顏色欄目索引條因為分布在網(wǎng)頁的各個部位，所以經(jīng)常采用主色調(diào)中不同深度的顏色來烘托整體的效果，比如圖4-14所示的IBM公司主頁采用不同的藍色，圖2-15所示的首都之窗主頁采用不同的紅色。欄目索引條也經(jīng)常使用與主色調(diào)非常協(xié)調(diào)的顏色，比如圖2-16所示的易趣網(wǎng)主頁的欄目索引條就使用了淺黃綠色。另外，為了顏色的過渡，位于網(wǎng)頁中間的欄目索引條也經(jīng)常采用淺灰色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（3）欄目索引條的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)一、色彩搭配基礎(chǔ)（2）（4）文字的顏色文字在—個網(wǎng)頁上是無處不在的，但是文字的筆畫比較單薄，所以文字通常用來進—步突出主色凋，或者用來過渡和緩解頁面的顏色。文字的顏色主要根據(jù)文字的背景色進行搭配，它與背景色應(yīng)有較大的反差，如白底黑字、藍底白字等，以便能清楚地顯示文字。其次文字的顏色搭配還得兼顧文字周圍物體的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（4）文字的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（5）插圖的顏色

網(wǎng)頁的插圖通常尺寸都比較小，所以它的顏色可以絢麗、豐富一些，這樣一來可以使頁面變得活潑，二來可以點綴整個頁面。但在有背景的情況下，插入圖片時要特別小心，不要和網(wǎng)頁的背景色及圖所插區(qū)域的背景色相沖突。解決這個問題一般有兩種方法，一種是采用可透明的GIF圖，另一種是將圖片的背景色做成和網(wǎng)頁背景色一樣的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（5）插圖的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計網(wǎng)站也分為很多不同的網(wǎng)頁，比如主頁、欄目首頁、內(nèi)容網(wǎng)頁等，不同的網(wǎng)頁需要不同的版面布局。與報紙、雜志不同的是，網(wǎng)站的所有網(wǎng)頁組成的是一個層次型結(jié)構(gòu)，每一層網(wǎng)頁里都需要建立訪問下一層網(wǎng)頁的超鏈接索引，所以網(wǎng)頁所處的層次越高，網(wǎng)頁中的內(nèi)容就越豐富，網(wǎng)頁的布局就越復(fù)雜。例如，湖南教師網(wǎng)的主頁、欄目首頁和內(nèi)容頁：網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計網(wǎng)站也分為很多不同的網(wǎng)頁，比如主頁、欄目首頁二、版面布局設(shè)計湖南教師網(wǎng)的主頁,欄目首頁和內(nèi)容頁網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計湖南教師網(wǎng)的主頁,欄目首頁和內(nèi)容頁網(wǎng)站建設(shè)與二、版面布局設(shè)計教材圖2-21非常清晰地顯示了從網(wǎng)站層次型結(jié)構(gòu)的頂層主頁到最底層的內(nèi)容網(wǎng)頁，版面布局不斷簡化。這樣，就得到網(wǎng)站在進行版面布局設(shè)計時應(yīng)采用的原則，那就是首先對主頁進行版面布局，然后在主頁布局的基礎(chǔ)上對各欄目的首頁進行版面布局，接著往下，對內(nèi)容網(wǎng)頁進行版面布局。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計教材圖2-21非常清晰地顯示了從網(wǎng)站層次型結(jié)二、版面布局設(shè)計（1）1.版面布局的步驟

第一步是確定面向哪種顯示器的分辨率模式。因為不同的用戶可能使用不同的顯示器和網(wǎng)頁瀏覽器，所以同一個網(wǎng)頁在不同用戶的計算機上顯示很可能是不一樣的，比如用WindowsXP操作系統(tǒng)下的IE瀏覽器在800＊600分辨率的顯示器下看微軟公司的主頁，如圖4-13所示，就和用WindowsXP下的IE瀏覽器在1024＊768分辨率的顯示器下看到的微軟主頁(圖2-22)很不一樣。分辨率越大，顯示面積就越大，所以能顯示的內(nèi)容就越多。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）1.版面布局的步驟網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）800＊600是目前大多數(shù)顯示器設(shè)置的分辨率，所以很多網(wǎng)站在設(shè)計時都針對800＊600進行設(shè)計。但是1024＊768卻是未來的發(fā)展趨勢，將日益成為主流的分辨率模式，所以在設(shè)計時最好能兼顧這兩種分辨率。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）800＊600是目前大多數(shù)顯示器設(shè)置的二、版面布局設(shè)計（1）第二步是確定網(wǎng)頁的框架。框架指的是怎么樣從整體上把頁面劃分開來，比如上下分或者左右分。框架有很多種，最簡單的是圖2-23所示的左右型框架和上下型框架，例如圖2-20所示的湖南教師網(wǎng)站的內(nèi)容網(wǎng)頁就是其中的第一種框架。這種框架一般有大小兩塊區(qū)域，其中一塊較大的區(qū)域放置網(wǎng)頁的主體內(nèi)容，它通常占據(jù)整個屏幕的五分之四。而另一塊較小的區(qū)域通常放置的是網(wǎng)站標(biāo)志和導(dǎo)航條。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）第二步是確定網(wǎng)頁的框架?？蚣苤傅氖窃趺炊婷娌季衷O(shè)計（1）將上下型框架和左右型框架結(jié)合起來可以形成復(fù)合型框架，如圖2-24顯示的就是幾種比較常見的復(fù)合型框架。復(fù)合型框架非常適合于布局大量的內(nèi)容，所以經(jīng)常用于網(wǎng)站主頁的版面布局，比如圖2-12所示的德德瑪網(wǎng)站主頁采用的就是圖2-24中第5種復(fù)合型框架，圖2-15所示的首都之窗主頁和圖2-18湖南教師網(wǎng)主頁采用的就是圖2-24中第4種復(fù)合型框架網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）將上下型框架和左右型框架結(jié)合起來可以形二、版面布局設(shè)計（1）當(dāng)然，并不是所有的網(wǎng)頁都是有框架的，往往這時的網(wǎng)頁都具有相當(dāng)鮮明的個性。它將網(wǎng)頁的內(nèi)容很好地融入到圖片或者FLASH動畫當(dāng)中，給人一種與眾不同的感覺。這種無框架的設(shè)計通常很難，需要很高的電腦美術(shù)功底才行。很多個人站點或者藝術(shù)站點都會采用無框架結(jié)構(gòu)，例如可樂貓網(wǎng)站主頁。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）當(dāng)然，并不是所有的網(wǎng)頁都是有框架的，往二、版面布局設(shè)計（1）第三步就是在框架的不同區(qū)域上安排不同的內(nèi)容。不同的網(wǎng)頁內(nèi)容自然是不一樣的，所以在這里只是向大家介紹內(nèi)容編排上的一個基本知識，那就是人們在瀏覽一個網(wǎng)頁的時候，通常會把第一眼停留在網(wǎng)頁的左上角或中間的地方(如圖2-25所示)，然后才會瀏覽其他部分。這個部分通常稱為焦點，所以在布局內(nèi)容的時候，應(yīng)該把最能傳達信息、最能吸引人的內(nèi)容放在這些地方，比如網(wǎng)站標(biāo)志和最新新聞。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）第三步就是在框架的不同區(qū)域上安排不同的二、版面布局設(shè)計（2）2.版面布局的基本方法熟悉網(wǎng)頁制作的人在拿到網(wǎng)頁的相關(guān)內(nèi)容后，也許很快就可以在腦子里形成大概的布局，并且可以直接用網(wǎng)頁制作工具開始制作。但是對不熟悉網(wǎng)頁布局的人來說，這么做有相當(dāng)大的困難，所以這時，就需要借助于其他的方法來進行網(wǎng)頁布局。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（2）2.版面布局的基本方法網(wǎng)站建設(shè)與網(wǎng)頁二、版面布局設(shè)計（2）第一種方法是用手工的方式在紙上畫草圖。第二種方法使用網(wǎng)頁制作工具Dreamweaver或Frontpage，這兩種工具都提供了圖2-23和圖2-24所示的網(wǎng)頁框架集，或者使用表格布局法。第三種方法是用專業(yè)制圖軟件來進行布局（如Fireworks和Photoshop等），用它們可以像設(shè)計一幅圖片、一幅招貼畫、一幅廣告一樣去設(shè)計一個網(wǎng)頁的界面，然后再考慮如何用網(wǎng)頁制作工具去實現(xiàn)這個網(wǎng)頁。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（2）第一種方法是用手工的方式在紙上畫草圖。2.4節(jié)網(wǎng)站的導(dǎo)航設(shè)計【本節(jié)內(nèi)容】一.導(dǎo)航的實現(xiàn)方法二.導(dǎo)航的設(shè)計策略網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.4節(jié)網(wǎng)站的導(dǎo)航設(shè)計【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、導(dǎo)航的實現(xiàn)方法（1）1.導(dǎo)航條導(dǎo)航最常用的實現(xiàn)方法就是“導(dǎo)航條”。在導(dǎo)航條中，超鏈接所對應(yīng)的網(wǎng)頁在網(wǎng)站的層次型結(jié)構(gòu)中是并列的，所以通過它可以快速地切換到并列的其他網(wǎng)頁。比如圖2-26所示的多媒體CAI課件設(shè)計制作網(wǎng)站主頁左邊一列便是一個導(dǎo)航條，該導(dǎo)航條在所有網(wǎng)頁中都存在，只要單擊這個導(dǎo)航條中任意一個欄目名，就可進入該欄目首頁。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、導(dǎo)航的實現(xiàn)方法（1）1.導(dǎo)航條網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、導(dǎo)航的實現(xiàn)方法（2）除了普通的導(dǎo)航條之外，導(dǎo)航另一種非常重要的實現(xiàn)方法是“路徑導(dǎo)航”，即在網(wǎng)頁上顯示這個網(wǎng)頁在網(wǎng)站層次型結(jié)構(gòu)上的位置。通過路徑導(dǎo)航，用戶不僅可以了解當(dāng)前所處的位置，還可以快速地返回到當(dāng)前網(wǎng)頁以上的任何一層網(wǎng)頁。

圖2-28路徑導(dǎo)航網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、導(dǎo)航的實現(xiàn)方法（2）除了普通的導(dǎo)航條之外，導(dǎo)航另一種非常一、導(dǎo)航的實現(xiàn)方法（3）3.其它導(dǎo)航方式除了“導(dǎo)航條”和“路徑導(dǎo)航”重要方法之外，還有重點導(dǎo)航、相關(guān)導(dǎo)航等擴展導(dǎo)航方法，這些導(dǎo)航可以讓用戶有更多更靈活的方式找到自己所感興趣的網(wǎng)頁。例如圖2-29所示新浪網(wǎng)網(wǎng)頁里的“相關(guān)鏈接”是“相關(guān)導(dǎo)航”。有些網(wǎng)頁上還有“重點導(dǎo)航”，在醒目的地方用一個圖案或按鈕鏈接到重要的網(wǎng)頁中去。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、導(dǎo)航的實現(xiàn)方法（3）3.其它導(dǎo)航方式網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、導(dǎo)航的設(shè)計策略在設(shè)計網(wǎng)站導(dǎo)航時，可以采用的一些基本策略：首先，至少要使用一個一層欄目的導(dǎo)航條，如果欄目底下也有很多內(nèi)容，可以分很多子類的話，那么可以進一步設(shè)計欄目下的導(dǎo)航條。其次，如果網(wǎng)站的層次很深，比如四層以上（主頁作為第一層），最好使用路徑導(dǎo)航。路徑導(dǎo)航可以從第三層以下的網(wǎng)頁開始出現(xiàn)。其他導(dǎo)航方式作為輔助的導(dǎo)航手段，視實際需要而定。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、導(dǎo)航的設(shè)計策略在設(shè)計網(wǎng)站導(dǎo)航時，可以采用的一些基本策略：練習(xí)二在因特網(wǎng)上找到一個欄目層次在三層以內(nèi)的網(wǎng)站，認(rèn)真瀏覽后，完成如下練習(xí)：

1.寫出這個網(wǎng)站的名稱與網(wǎng)站地址；

2.畫出這個網(wǎng)站的欄目層次結(jié)構(gòu)圖；3.畫出這個網(wǎng)站的目錄結(jié)構(gòu)圖；4.分析該網(wǎng)站的風(fēng)格（顏色搭配、版面布局）、導(dǎo)航方式。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計練習(xí)二在因特網(wǎng)上找到一個欄目層次在三層以內(nèi)的網(wǎng)站，認(rèn)真瀏覽后實驗二XXX個人網(wǎng)站的規(guī)劃與設(shè)計實驗內(nèi)容：1.確定XXX個人網(wǎng)站的主題2.規(guī)劃XXX個人網(wǎng)站的欄目（分層設(shè)計）3.規(guī)劃好XXX個人網(wǎng)站的目錄結(jié)構(gòu)4.設(shè)計XXX個人網(wǎng)站的風(fēng)格（色彩搭配、版面布局等）5.XXX個人網(wǎng)站的導(dǎo)航設(shè)計網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計實驗二XXX個人網(wǎng)站的規(guī)劃與設(shè)計實驗內(nèi)容：網(wǎng)站建設(shè)與網(wǎng)專題二

網(wǎng)站的規(guī)劃與設(shè)計

專題二

網(wǎng)站的規(guī)劃與設(shè)計

專題二：網(wǎng)站的規(guī)劃與設(shè)計【專題內(nèi)容】2.1網(wǎng)站的欄目規(guī)劃2.2網(wǎng)站的目錄結(jié)構(gòu)設(shè)計2.3網(wǎng)站的風(fēng)格設(shè)計2.4網(wǎng)站的導(dǎo)航設(shè)計網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計專題二：網(wǎng)站的規(guī)劃與設(shè)計【專題內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.1節(jié)網(wǎng)站的欄目規(guī)劃【本節(jié)內(nèi)容】

一.邏輯結(jié)構(gòu)介紹二.欄目規(guī)劃的任務(wù)三.欄目規(guī)劃舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.1節(jié)網(wǎng)站的欄目規(guī)劃【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)線性結(jié)構(gòu)是最簡單的邏輯結(jié)構(gòu)，如圖2-1所示。它將多個網(wǎng)頁按照一定的先后順序鏈接起來，用戶沒有訪問到前一個網(wǎng)頁就無法進入下一個網(wǎng)頁。圖2-1線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3網(wǎng)頁4一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)線性結(jié)構(gòu)最常用于需要逐步進行的欄目，比如用戶注冊、建立定單、教程等。圖2-2所示的就是一個典型的用戶注冊的例子。圖2-2用戶注冊流程網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計開始注冊接受條款填寫注冊信息完成注冊一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計開始注一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)如圖2-3所示的帶選擇的線性結(jié)構(gòu)，可以根據(jù)用戶不同的選擇來訪問不同的下一個網(wǎng)頁。圖2-3帶選擇的線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1網(wǎng)頁2’網(wǎng)頁3網(wǎng)頁4網(wǎng)頁2一、邏輯結(jié)構(gòu)介紹（1）1.線性結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁1一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)相對于按先后順序組織而成的線性結(jié)構(gòu)，層次型結(jié)構(gòu)是按照網(wǎng)頁之間的包含關(guān)系組織而成的。圖2-4所示的就是一個典型的層次型結(jié)構(gòu)，它很像一棵倒置的樹。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁21網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3主頁網(wǎng)頁22網(wǎng)頁11網(wǎng)頁31圖2-4層次型結(jié)構(gòu)一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)層次型結(jié)構(gòu)簡單而且直觀，能將所有的內(nèi)容劃分得非常清晰且便于理解，因而幾乎所有的網(wǎng)站都采用這種結(jié)構(gòu)來進行總體的欄目規(guī)劃，即將所有的內(nèi)容先分成若干個大欄目，然后再將每個大欄目細分成若干小欄目，以此類推直到不用再細分為止。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)

層次型結(jié)構(gòu)也有不好的地方，就是用戶如果要訪問最底層的網(wǎng)頁就不得不按照層次從上到下一級一級地訪問，最終到達想要訪問的網(wǎng)頁。所以，層次型結(jié)構(gòu)最好的深度就是三層，最多不要超過五層。另外，建立一個良好的導(dǎo)航系統(tǒng)（本專題第4節(jié)將學(xué)習(xí)）也可以彌補層次型結(jié)構(gòu)這方面的缺點。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（2）2.層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)如圖2-5所示，網(wǎng)狀結(jié)構(gòu)是指多個網(wǎng)頁相互之間都有超鏈接的一種結(jié)構(gòu)，這些網(wǎng)頁可以是層次結(jié)構(gòu)上的任意網(wǎng)頁，由于導(dǎo)航的需要或者內(nèi)容上的相關(guān)性而相互鏈接在一起。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁2網(wǎng)頁1網(wǎng)頁3網(wǎng)頁4網(wǎng)頁5圖2-5網(wǎng)狀結(jié)構(gòu)一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計網(wǎng)頁2一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)它的導(dǎo)航條就出現(xiàn)在主頁和其它每一個網(wǎng)頁上，用戶在任何一個網(wǎng)頁上進行訪問的時候，都可以通過這個導(dǎo)航條而一步切換到其他欄目的網(wǎng)頁之上。這個網(wǎng)站各個網(wǎng)頁之間因這個導(dǎo)航條而形成了一個網(wǎng)狀結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-6網(wǎng)狀結(jié)構(gòu)舉例一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)狀結(jié)構(gòu)的實現(xiàn)就在于所有相關(guān)的網(wǎng)頁上保留到其他網(wǎng)頁的超鏈接。這種結(jié)構(gòu)使用戶能更方便地在網(wǎng)站上游弋，但同時也帶來一個龐大超鏈接數(shù)的問題，對于維護來說相當(dāng)麻煩，某個網(wǎng)頁的改動(如改名、刪除、增加)就可能同時需要對所有的網(wǎng)頁進行相應(yīng)的修改。所以在網(wǎng)站中要謹(jǐn)慎使用網(wǎng)狀結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、邏輯結(jié)構(gòu)介紹（3）3.網(wǎng)狀結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)欄目規(guī)劃的主要任務(wù)是對所收集的大量內(nèi)容進行有效篩選，并將它們組織成一個合理的易于理解的邏輯結(jié)構(gòu)。成功的欄目規(guī)劃不僅能給用戶的訪問帶來極大的便利，幫助用戶準(zhǔn)確地了解網(wǎng)站所提供的內(nèi)容和服務(wù)，以及快速地找到自己所感興趣的網(wǎng)頁，還能幫助網(wǎng)站管理員對網(wǎng)站進行更為高效的管理。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)欄目規(guī)劃的主要任務(wù)是對所收集的大量內(nèi)容進行二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目欄目規(guī)劃的第—步就是要確定哪些是必需的欄目，這取決于網(wǎng)站的性質(zhì)。例如，對于一個企業(yè)網(wǎng)站來說，公司簡介、產(chǎn)品介紹、服務(wù)內(nèi)容、技術(shù)支持、聯(lián)系方式等欄目是必不可少的，而對于政府網(wǎng)站來說政務(wù)、政策法規(guī)、地方經(jīng)濟、百姓生活、觀光旅游等欄目都是必需的。個人網(wǎng)站相對來說比較隨意，往往取決于所收集的內(nèi)容，但個人簡介、個人收藏等欄目通常不能缺少。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目除了內(nèi)容欄目之外，網(wǎng)站還應(yīng)該包含另外兩類欄目：用戶指南類欄目和交互性欄。用戶指南類欄目是為了幫助用戶了解這個網(wǎng)站的背景、性質(zhì)、目的、功能及發(fā)展歷程，如何更好地對網(wǎng)站進行訪問，以及網(wǎng)站的最新動態(tài)。常以“幫助”、“關(guān)于網(wǎng)站”、“網(wǎng)站地圖”、“最新動態(tài)”等名稱出現(xiàn)。交互性欄目是能與用戶進行雙向交流的欄目，通過它解答用戶的疑問、了解用戶的需求，還可以獲得用戶對網(wǎng)站的建議和看法。如留言板、論壇（BBS）。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（1）1.確定必需欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（2）2.確定重點欄目確定完需要設(shè)置哪些欄目后，需要從這些欄目中挑選出最重要的幾個欄目，然后對它們進行更詳細的規(guī)劃。這種選擇取決于網(wǎng)站的目的與功能。比如企業(yè)網(wǎng)站，其目的可能是為了更好地推銷自己的產(chǎn)品，所以產(chǎn)品介紹便是它的重點欄目。而個人網(wǎng)站，目的通常是為了讓別人分享他收集到的信息，向別人介紹他的原創(chuàng)作品，它的重點欄目往往是個人作品和個人收藏。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（2）2.確定重點欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)建立層次型結(jié)構(gòu)是一個遞進的過程，即從上到下逐級確定每—層的欄目。首先是確定第一層，即網(wǎng)站所必需的欄目，然后對其中的重點欄目進行進—步規(guī)劃，確定它們所必需的子欄目，以此類推直至不需要再細分為止。將所有的欄目及其子欄目連在一起就形成了網(wǎng)站的層次型結(jié)構(gòu)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)如圖2-7所示的可樂貓網(wǎng)站，它在第—層設(shè)置了“我的資料”、“我的作品”、“懷念家駒”、“給我留言”四個重點欄目和“news”、“info”、“l(fā)ink”三個其他欄目。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2-7可樂貓網(wǎng)站主頁二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)然后對每一個重點欄目又進行了更細的規(guī)劃，比如“我的資料”又分出“我的清單”、“我的愛情”和“我的夢想”三個子欄目，“我的作品”又分出“FLASH”、“CG”和“ARTICLE”三個子欄目。將這些欄目及其子欄目連在一起，我們可以很清楚地看到可樂貓網(wǎng)站的層次型結(jié)構(gòu)，如圖2-8所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）3．建立層次型結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（3）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-8可樂貓網(wǎng)站欄目的層次型邏輯結(jié)構(gòu)

可樂貓網(wǎng)站我的資料我的作品懷念家駒我的清單我的愛情我的夢想FLASHCGARTICLEE成員介紹舊日足跡經(jīng)典照片給我留言NEWSINFOLINK二、欄目規(guī)劃的任務(wù)（3）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計可樂貓網(wǎng)站我的資料二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目其次是設(shè)計這個欄目的實現(xiàn)方法，即設(shè)計這個欄目的網(wǎng)頁構(gòu)成、各個網(wǎng)頁之間的邏輯關(guān)系、各個網(wǎng)頁的內(nèi)容、內(nèi)容的顯示方式、數(shù)據(jù)庫結(jié)構(gòu)等各個方面的問題。例如很多網(wǎng)站都有的用戶注冊欄目，如圖2-9所示，這個欄目通常需要六個網(wǎng)頁，采用線性+分支結(jié)構(gòu)來進行組織。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計不合法開始注冊接受條款填寫注冊信息信息檢驗合法同意不同意完成注冊結(jié)束注冊二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目詳細設(shè)計上圖中的每一個網(wǎng)頁。如第三個網(wǎng)頁“填寫注冊信息”采用表單來實現(xiàn)，所需注冊的信息根據(jù)網(wǎng)站的需求而定，通常包括用戶名、密碼、性別、國籍、省份、E-mail等內(nèi)容。還要設(shè)計好網(wǎng)頁之間的分支關(guān)系，如用戶在第二個網(wǎng)頁同意“接受條款”則進入到“填寫注冊信息”的網(wǎng)頁；不同意“接受條款”時，就要進入到“退出注冊”，該網(wǎng)頁顯示有關(guān)中止注冊的信息。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目最后還要設(shè)計這個欄目和其他欄目之間的關(guān)系。網(wǎng)站有許多欄目，但欄目與欄目之間存在著從數(shù)據(jù)、內(nèi)容到布局等各個層次上的關(guān)聯(lián)。如企業(yè)站點的產(chǎn)品介紹、價格信息和在線定單等欄目之間通常使用統(tǒng)一的數(shù)據(jù)庫，這樣在任何—個欄目中打開同一個產(chǎn)品時都能看到相同的介紹信息，保證了信息的一致性。設(shè)計欄目之間關(guān)系的工作，就是找出各個欄目之間可以共享的相關(guān)內(nèi)容，并確定采用什么樣的方式將它們串聯(lián)起來。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、欄目規(guī)劃的任務(wù)（4）4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)三、欄目規(guī)劃舉例4.設(shè)計每一個欄目欄目規(guī)劃最便捷的方法就是參考同類網(wǎng)站的欄目規(guī)劃，吸收共同的欄目，去掉不適合的欄目，然后添加有自己特色的欄目。參考“德德瑪”網(wǎng)站來學(xué)習(xí)個人網(wǎng)站的欄目規(guī)劃。假若你非常喜歡歌唱家德德瑪，你已經(jīng)收集了很多有關(guān)德德瑪?shù)母枨?、圖片以及報道等。現(xiàn)在要建立一個名為“我從草原來-德德瑪”的個人網(wǎng)站。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例4.設(shè)計每一個欄目網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例根據(jù)上節(jié)所學(xué)知識，首先需要做的是確定網(wǎng)站所必需的欄目。第一個必需的欄目就是圖片欄目，將其取名為“個人圖庫”；接著就是簡介德德瑪?shù)乃囆g(shù)生涯，第二個欄目是“藝術(shù)簡介”；第三個欄目是“草原夜鶯”，專門介紹德德瑪演唱的歌曲與視頻專輯；第四個欄目是“精彩回放”，介紹德德瑪在央視“藝術(shù)人生”、“東方之子”等頻道被報道的專輯；第五個欄目是“文摘報道”介紹報刊登載的有關(guān)道德德瑪歌唱生涯的重要文章；為讓更多朋友參與討論、共享收藏，以及對本網(wǎng)站的建議，還設(shè)置交互性欄目“德迷論壇”，等等。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例根據(jù)上節(jié)所學(xué)知識，首先需要做的是確定網(wǎng)站所必三、欄目規(guī)劃舉例重點欄目的規(guī)劃。“草原夜鶯”、“精彩回放”、“文摘報道”和“德迷論壇”是所有這些欄目中最為重要的欄目，所以需要對它們進行更細的規(guī)劃。“草原夜鶯”欄目又分為“歌曲專輯”和“歌曲插圖”等子欄目。“精彩回放”欄目又分為“藝術(shù)人生”、“愛心世界”、“西部情懷”、“東方之子”等子欄目?！拔恼獔蟮馈睓谀繉⒌禽d報刊對德德瑪?shù)闹匾獔蟮??！暗旅哉搲睓谀砍艘话阏搲瘧?yīng)有的子欄目外，還做一個“論壇展區(qū)”的子欄目，用于展示“德迷”收藏的作品。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例重點欄目的規(guī)劃。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計三、欄目規(guī)劃舉例

網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計藝術(shù)簡介精彩回放藝術(shù)人生精彩圖片西部情懷東方之子文摘報道草原上的夜鶯……

故鄉(xiāng)是塊磁鐵個人圖庫草原夜鶯歌曲專輯歌曲插圖德迷論壇登錄注冊論壇展區(qū)服務(wù)條款完成注冊圖片集音樂集電影集信息填寫信息檢驗搜索……風(fēng)格我從草原來德德瑪個人網(wǎng)站文章內(nèi)插圖友情鏈接圖2-10我從草原來-德德瑪個人網(wǎng)站欄目層次結(jié)構(gòu)三、欄目規(guī)劃舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計藝術(shù)簡介精彩回放藝2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)也可稱為物理結(jié)構(gòu)，它是解決如何在硬盤上更好地存放包括網(wǎng)頁、圖片、Flash動畫、視音頻、數(shù)據(jù)庫等各種資源在內(nèi)的所有網(wǎng)站資源。目錄結(jié)構(gòu)是否合理，對網(wǎng)站的創(chuàng)建效率會產(chǎn)生較大的影響，但更主要的，會對未來網(wǎng)站的性能、網(wǎng)站的維護及擴展產(chǎn)生很大的影響。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)也可稱為物理結(jié)構(gòu)，它2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計【本節(jié)內(nèi)容】一.目錄結(jié)構(gòu)設(shè)計原則二.目錄結(jié)構(gòu)設(shè)計舉例網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.2節(jié)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則目錄結(jié)構(gòu)對用戶來說是不可見的，它只針對網(wǎng)站管理員，所以它的設(shè)計是為了網(wǎng)站管理員能從文件的角度更好地管理網(wǎng)站的所有資源。目錄結(jié)構(gòu)的設(shè)計通常需要遵循以下原則：

1.網(wǎng)站應(yīng)有一個主目錄。

2.不要將所有的文件都直接存放在網(wǎng)站根目錄下

3.根據(jù)欄目規(guī)劃來設(shè)計目錄結(jié)構(gòu)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則目錄結(jié)構(gòu)對用戶來說是不可見的，它只針對網(wǎng)一、目錄結(jié)構(gòu)設(shè)計原則

4.每個目錄下都建立獨立的images（或pictures）子目錄.5.目錄的層次不要太深

6.不要使用中文目錄名和中文文件名

7.可執(zhí)行文件和不可執(zhí)行文件分開放置

8.數(shù)據(jù)庫文件單獨放置網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、目錄結(jié)構(gòu)設(shè)計原則4.每個目錄下都建立獨立的image二、目錄結(jié)構(gòu)設(shè)計舉例以“我從草原來--德德瑪”個人網(wǎng)站為例。在上節(jié)欄目規(guī)劃的基礎(chǔ)上，接著為這個網(wǎng)站設(shè)計它的目錄結(jié)構(gòu)，如圖2-11所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計

dedemaweb

images

jingcaihuifang

images

wengzhanbaodao

images

caoyuanyieying

images

musics

movies

demilundan

images

musics

flashes

movies

youqingliangjie

images二、目錄結(jié)構(gòu)設(shè)計舉例以“我從草原來--德德瑪”個人網(wǎng)站為例。二、目錄結(jié)構(gòu)設(shè)計舉例上圖就是根據(jù)前面所述的若干原則而設(shè)計的目錄結(jié)構(gòu)。從中可以看到，網(wǎng)站的目錄結(jié)構(gòu)和圖2-10所示的層次型結(jié)構(gòu)是對應(yīng)的，每一個目錄下都有—個名為“images”的子目錄，用于保存圖片。

圖2-12我從草原來--德德瑪個人網(wǎng)站網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、目錄結(jié)構(gòu)設(shè)計舉例上圖就是根據(jù)前面所述的若干原則而設(shè)計的目2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計相對于網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計，網(wǎng)站的風(fēng)格設(shè)計是最抽象的。風(fēng)格是指用戶對網(wǎng)站整體形象的一種感覺。這個整體形象包括網(wǎng)站標(biāo)志、色彩、版面布局、交互方式、文字編排、圖片、動畫等諸多因素。風(fēng)格又是獨特的，是本網(wǎng)站不同于其他網(wǎng)站的地方。統(tǒng)一的風(fēng)格使用戶無論處于網(wǎng)站的哪一個網(wǎng)頁，都知道自己正在訪問的是這個網(wǎng)站。例如微軟網(wǎng)站，每一個網(wǎng)頁都有特有的藍色和“Microsoft”標(biāo)志。色彩搭配和版面布局是網(wǎng)站風(fēng)格最重要的兩個方面。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計相對于網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計【本節(jié)內(nèi)容】

一.色彩搭配基礎(chǔ)二.版面布局設(shè)計網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計2.3節(jié)網(wǎng)站的風(fēng)格設(shè)計【本節(jié)內(nèi)容】網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識由光學(xué)知識可知，顏色是因為物體對光的反映或折射而產(chǎn)生的。紅、綠、藍是光的三原色，它們不同程度的組合可以形成各種顏色。在網(wǎng)頁中用光的三原色的不同顏色值組合成各種顏色。常采用6位十六進制的數(shù)值來表示，每兩位代表一種顏色，從左到右依次表示紅色、綠色和藍色，每種顏色的十六進制值從00~FF。顏色值越高表示這種顏色越濃。比如紅色，其數(shù)值為“#FF0000”（＃號表示這是十六進制數(shù)），白色為“#FFFFFF”，黑色為“#000000”。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識在傳統(tǒng)的色彩理論中，顏色一般分為彩色和非彩色（或稱為灰色）兩大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的顏色。在網(wǎng)頁中，如果組成顏色的三種原色數(shù)值相等，就顯示為灰色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識太陽光是多種彩色混合而成的，按顏色的色調(diào)通常將其劃分為七種顏色：紅、橙、黃、綠、青、藍、紫。如果將這七種顏色按這個順序漸變?yōu)橐粭l色帶的話，越靠近紅色，給人的感覺越溫暖，越靠近藍色和紫色，給人的感覺越寒冷。所以紅、橙、黃的組合又稱為暖色調(diào)，青、藍、紫的組合又稱為冷色調(diào)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）1.色彩的基本知識網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）除了冷暖的差別外，不同的單個顏色也會給人帶來不同的感覺，分述如下。紅色：是一種激奮的色彩，給人以沖動、憤怒、熱情和活力的感覺。綠色：介于冷暖兩種色彩的中間，顯得和睦、寧靜、健康、安全。它和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨和時尚的效果。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）除了冷暖的差別外，不同的單個顏色也會一、色彩搭配基礎(chǔ)（1）黃色：充滿快樂、希望、智慧和輕快，它也是最亮的一種顏色。藍色：是最具涼爽、清新、專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛（如天空的色彩）。白色：給人以潔白、明快、純真和干凈的感覺。黑色：通常是深沉、神秘、寂靜、悲哀和壓抑的代表?；疑壕哂兄杏?、平凡、溫和、謙讓、中立和高雅的感覺，它可以和任何一種顏色進行搭配。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（1）黃色：充滿快樂、希望、智慧和輕快，它也一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站的色彩搭配通常分為兩個步驟，第一步就是為整個網(wǎng)站選取—種主色調(diào)，然后再為主色調(diào)搭配多種適合的顏色。主色調(diào)指的是整個網(wǎng)站給人印象最深的顏色，或者說除白色之外用得最多的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配不同的顏色給人的感受是不—樣的，所以選取主色調(diào)最基本的原則就是保證所選的顏色與網(wǎng)站的主題或者形象相符，進一步地，能夠通過這種顏色加深用戶對網(wǎng)站的印象。如藍色是一種給人感覺非常專業(yè)的顏色，所以許多高科技公司都喜歡使用藍色作為公司網(wǎng)站的顏色。最典型的當(dāng)數(shù)微軟公司（圖2-13）和IBM公司（圖2-14）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）2.網(wǎng)站的色彩搭配網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-13Microsoft公司主頁圖2-14IBM公司主頁一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計圖2-13Micr一、色彩搭配基礎(chǔ)（2）紅色則是熱情和活力的象征，北京市政府網(wǎng)站首都之窗()正是通過紅色來向人們傳達了北京作為中國首都的氣質(zhì)：大氣和熱情，如圖2-15所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）紅色則是熱情和活力的象征，北京市政府網(wǎng)一、色彩搭配基礎(chǔ)（2）易趣是全球最大的中文網(wǎng)上交易平臺，它致力于為所有網(wǎng)絡(luò)用戶建立一個誠信、平等、安全、高效、舒適的網(wǎng)上交易環(huán)境，而對于這一點，沒有比綠色更為合適的顏色，如圖2-16所示。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）易趣是全球最大的中文網(wǎng)上交易平臺，它致一、色彩搭配基礎(chǔ)（2）選好主色調(diào)之后，接下來要考慮的就是在什么地方使用主色調(diào)。主色調(diào)最常表現(xiàn)在三個位置，首先是頭部，也就是網(wǎng)頁最上面的部分，通常包含導(dǎo)航條。頭部是最能體現(xiàn)主色調(diào)的地方，所以所有的網(wǎng)站都會在頭部表現(xiàn)主色調(diào)。其次是欄目索引條上，欄目索引條雖然面積小，但是出現(xiàn)在網(wǎng)頁的各個部位，所以能非常有效地渲染主色調(diào)。最后是網(wǎng)頁上的文字，文字筆畫雖細，但大面積的文字也能很好地突出主色調(diào)。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）選好主色調(diào)之后，接下來要考慮的就是在什一、色彩搭配基礎(chǔ)（2）接著要考慮的是別的地方使用什么顏色去搭配這種主色調(diào)，比如背景色、文字顏色、導(dǎo)航條顏色、插圖顏色等都使用什么顏色。色彩搭配是一項非常精細的工作，因為往往一個細節(jié)就會影響整個網(wǎng)頁的色彩均衡。色彩搭配沒有固定的模式與步驟，先從大面積用色，再到小細節(jié)去搭配顏色，會使得這項工作變得簡單一些。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）接著要考慮的是別的地方使用什么顏色去搭一、色彩搭配基礎(chǔ)（2）（1）選取背景色大多數(shù)的網(wǎng)站都會選取白色作為背景色。白色使得狹小的屏幕空間顯得很大，再多的信息在白色的背景下，其排放也可以顯得很整齊，其頁面也可以顯得非常干凈和整潔。如搜狐、網(wǎng)易、新浪、湖南第一師范等網(wǎng)站都采用白色為背景色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（1）選取背景色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計湖南第一師范主頁一、色彩搭配基礎(chǔ)（2）網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計湖南第一師范主頁一、色彩搭配基礎(chǔ)（2）（2）導(dǎo)航條的顏色導(dǎo)航條是網(wǎng)站欄目的一個索引，常以一個水平長條形式出現(xiàn)在網(wǎng)頁頭部的下邊（也有的出現(xiàn)在頭部下左邊）。導(dǎo)航條作為頭部的一部分，經(jīng)常采用主色調(diào)，比首都之窗主頁易趣網(wǎng)主頁。另一方面，導(dǎo)航條因為介于網(wǎng)頁的頭部和內(nèi)容部分的中間，所以也經(jīng)常作為頭部和內(nèi)容部分的過渡，也可采用灰色系列導(dǎo)航條，比德德瑪網(wǎng)站主頁、湖南第一師范主頁的導(dǎo)航條。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（2）導(dǎo)航條的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（3）欄目索引條的顏色欄目索引條因為分布在網(wǎng)頁的各個部位，所以經(jīng)常采用主色調(diào)中不同深度的顏色來烘托整體的效果，比如圖4-14所示的IBM公司主頁采用不同的藍色，圖2-15所示的首都之窗主頁采用不同的紅色。欄目索引條也經(jīng)常使用與主色調(diào)非常協(xié)調(diào)的顏色，比如圖2-16所示的易趣網(wǎng)主頁的欄目索引條就使用了淺黃綠色。另外，為了顏色的過渡，位于網(wǎng)頁中間的欄目索引條也經(jīng)常采用淺灰色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（3）欄目索引條的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)一、色彩搭配基礎(chǔ)（2）（4）文字的顏色文字在—個網(wǎng)頁上是無處不在的，但是文字的筆畫比較單薄，所以文字通常用來進—步突出主色凋，或者用來過渡和緩解頁面的顏色。文字的顏色主要根據(jù)文字的背景色進行搭配，它與背景色應(yīng)有較大的反差，如白底黑字、藍底白字等，以便能清楚地顯示文字。其次文字的顏色搭配還得兼顧文字周圍物體的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（4）文字的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（5）插圖的顏色

網(wǎng)頁的插圖通常尺寸都比較小，所以它的顏色可以絢麗、豐富一些，這樣一來可以使頁面變得活潑，二來可以點綴整個頁面。但在有背景的情況下，插入圖片時要特別小心，不要和網(wǎng)頁的背景色及圖所插區(qū)域的背景色相沖突。解決這個問題一般有兩種方法，一種是采用可透明的GIF圖，另一種是將圖片的背景色做成和網(wǎng)頁背景色一樣的顏色。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計一、色彩搭配基礎(chǔ)（2）（5）插圖的顏色網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計網(wǎng)站也分為很多不同的網(wǎng)頁，比如主頁、欄目首頁、內(nèi)容網(wǎng)頁等，不同的網(wǎng)頁需要不同的版面布局。與報紙、雜志不同的是，網(wǎng)站的所有網(wǎng)頁組成的是一個層次型結(jié)構(gòu)，每一層網(wǎng)頁里都需要建立訪問下一層網(wǎng)頁的超鏈接索引，所以網(wǎng)頁所處的層次越高，網(wǎng)頁中的內(nèi)容就越豐富，網(wǎng)頁的布局就越復(fù)雜。例如，湖南教師網(wǎng)的主頁、欄目首頁和內(nèi)容頁：網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計網(wǎng)站也分為很多不同的網(wǎng)頁，比如主頁、欄目首頁二、版面布局設(shè)計湖南教師網(wǎng)的主頁,欄目首頁和內(nèi)容頁網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計湖南教師網(wǎng)的主頁,欄目首頁和內(nèi)容頁網(wǎng)站建設(shè)與二、版面布局設(shè)計教材圖2-21非常清晰地顯示了從網(wǎng)站層次型結(jié)構(gòu)的頂層主頁到最底層的內(nèi)容網(wǎng)頁，版面布局不斷簡化。這樣，就得到網(wǎng)站在進行版面布局設(shè)計時應(yīng)采用的原則，那就是首先對主頁進行版面布局，然后在主頁布局的基礎(chǔ)上對各欄目的首頁進行版面布局，接著往下，對內(nèi)容網(wǎng)頁進行版面布局。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計教材圖2-21非常清晰地顯示了從網(wǎng)站層次型結(jié)二、版面布局設(shè)計（1）1.版面布局的步驟

第一步是確定面向哪種顯示器的分辨率模式。因為不同的用戶可能使用不同的顯示器和網(wǎng)頁瀏覽器，所以同一個網(wǎng)頁在不同用戶的計算機上顯示很可能是不一樣的，比如用WindowsXP操作系統(tǒng)下的IE瀏覽器在800＊600分辨率的顯示器下看微軟公司的主頁，如圖4-13所示，就和用WindowsXP下的IE瀏覽器在1024＊768分辨率的顯示器下看到的微軟主頁(圖2-22)很不一樣。分辨率越大，顯示面積就越大，所以能顯示的內(nèi)容就越多。網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）1.版面布局的步驟網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計二、版面布局設(shè)計（1）