第二單元：項(xiàng)目一教育類網(wǎng)站的設(shè)計(jì)與制作

1、第二單元：項(xiàng)目一教育類網(wǎng)站的設(shè)計(jì)與制作前期準(zhǔn)備（網(wǎng)站策劃過程） 一、客戶需求分析 二、網(wǎng)站風(fēng)格定位 1、色彩 2、排版 3、特效 三、網(wǎng)站建設(shè)方案1、頁面風(fēng)格創(chuàng)意設(shè)計(jì)（色彩、排版、特效） 四、網(wǎng)站設(shè)計(jì)方案報(bào)價(jià)明細(xì)2、網(wǎng)站欄目劃分3、網(wǎng)站欄目內(nèi)容介紹4、網(wǎng)站建設(shè)拓?fù)鋱D第二單元色彩色彩色彩色彩色彩的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，網(wǎng)頁的色彩是樹立網(wǎng)站色彩的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。色形象的關(guān)鍵之一，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。色彩總的應(yīng)用原則應(yīng)該是彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比總體協(xié)

2、調(diào)，局部對(duì)比”，即主頁的整體色彩效，即主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。比。網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)表明：彩色的記網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)表明：彩色的記憶效果是黑白的憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面比完全黑白倍。也就是說，在一般情況下，彩色頁面比完全黑白頁面更加吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色（黑色），頁面更加吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色（黑色），邊框、背景、圖片用彩色，這樣頁面整體

3、不單調(diào)，看主要內(nèi)容也不會(huì)眼邊框、背景、圖片用彩色，這樣頁面整體不單調(diào)，看主要內(nèi)容也不會(huì)眼花花色彩色彩色彩有冷暖色之分，冷色（如藍(lán)色）給人的感覺是安靜、冰冷；而暖色色彩有冷暖色之分，冷色（如藍(lán)色）給人的感覺是安靜、冰冷；而暖色（如紅色）給人的感覺是熱烈、火熱。冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生（如紅色）給人的感覺是熱烈、火熱。冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生意想不到的效果。意想不到的效果。 暖色：如圖（暖色：如圖（a）中的黃色、橙色、紅色、紫色等都屬于暖色彩列。暖）中的黃色、橙色、紅色、紫色等都屬于暖色彩列。暖色跟黑色調(diào)和可以達(dá)到很好的效果。暖色一般應(yīng)用于色跟黑色調(diào)和可以達(dá)到很好的效果。暖色一般應(yīng)用于

4、購物類網(wǎng)站、電子商購物類網(wǎng)站、電子商務(wù)網(wǎng)站、兒童類網(wǎng)站等，用以體現(xiàn)商品的琳瑯滿目，兒童類網(wǎng)站的活潑、務(wù)網(wǎng)站、兒童類網(wǎng)站等，用以體現(xiàn)商品的琳瑯滿目，兒童類網(wǎng)站的活潑、溫馨等效果。溫馨等效果。 冷色：如圖（冷色：如圖（b）中的綠色、藍(lán)色、藍(lán)紫色等都屬于冷色彩列。冷色一）中的綠色、藍(lán)色、藍(lán)紫色等都屬于冷色彩列。冷色一般跟白色調(diào)和可以達(dá)到一種很好的效果。冷色一般應(yīng)用于一些般跟白色調(diào)和可以達(dá)到一種很好的效果。冷色一般應(yīng)用于一些高科技、游高科技、游戲類網(wǎng)站，主要表達(dá)嚴(yán)肅、穩(wěn)重等效果。戲類網(wǎng)站，主要表達(dá)嚴(yán)肅、穩(wěn)重等效果。色彩色彩 相近色：色環(huán)中相鄰的三種顏色。如圖（相近色：色環(huán)中相鄰的三種顏色。如圖（c）中

5、的黃）中的黃綠色、黃色和橘黃色。相近色的搭配給人的視覺效果很綠色、黃色和橘黃色。相近色的搭配給人的視覺效果很舒適，很自然，所以相近色在網(wǎng)站設(shè)計(jì)中極為常用。舒適，很自然，所以相近色在網(wǎng)站設(shè)計(jì)中極為常用。 互補(bǔ)色：色環(huán)中相對(duì)的兩種色彩。如圖（互補(bǔ)色：色環(huán)中相對(duì)的兩種色彩。如圖（d）中的亮）中的亮綠色和紫色，另外如紅色和綠色，藍(lán)色和橙色等?；パa(bǔ)綠色和紫色，另外如紅色和綠色，藍(lán)色和橙色等?；パa(bǔ)色調(diào)整一下補(bǔ)色的亮度，有時(shí)候是一種很好的搭配。補(bǔ)色調(diào)整一下補(bǔ)色的亮度，有時(shí)候是一種很好的搭配。補(bǔ)色在網(wǎng)站設(shè)計(jì)中用得也極為普遍。色在網(wǎng)站設(shè)計(jì)中用得也極為普遍。色彩色彩網(wǎng)頁色彩的搭配網(wǎng)頁色彩的搭配網(wǎng)頁設(shè)計(jì)中，色彩永遠(yuǎn)

6、是最重要的一部分。當(dāng)人們距離顯網(wǎng)頁設(shè)計(jì)中，色彩永遠(yuǎn)是最重要的一部分。當(dāng)人們距離顯示屏較遠(yuǎn)的時(shí)候，看到的不是優(yōu)美的版式或者是美麗的圖示屏較遠(yuǎn)的時(shí)候，看到的不是優(yōu)美的版式或者是美麗的圖片，而是網(wǎng)頁的色彩。片，而是網(wǎng)頁的色彩。 使用單色使用單色：先選定一種色彩，然后調(diào)整透明度或者飽和度，先選定一種色彩，然后調(diào)整透明度或者飽和度，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。 使用相近色：使用相近色：就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁可以

7、使網(wǎng)頁避免色紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。彩雜亂，易于達(dá)到頁面的和諧統(tǒng)一。 使用互補(bǔ)色：使用互補(bǔ)色：對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺效果，通對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺效果，通過合理使用對(duì)比色能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以過合理使用對(duì)比色能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫龍點(diǎn)睛的作用。一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫龍點(diǎn)睛的作用。 背景色的使用：背景色的使用：背景色一般采用素淡清雅的色彩，避免采用花紋背景色一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的

8、圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。對(duì)比強(qiáng)烈一些。色彩色彩 色彩的數(shù)量：色彩的數(shù)量：網(wǎng)站用色并不是越多越好，對(duì)于初學(xué)者來說，網(wǎng)頁網(wǎng)站用色并不是越多越好，對(duì)于初學(xué)者來說，網(wǎng)頁用色最好控制在三種色彩以內(nèi)，通過調(diào)整色彩的各種屬性用色最好控制在三種色彩以內(nèi)，通過調(diào)整色彩的各種屬性(三個(gè)屬性）來三個(gè)屬性）來產(chǎn)生變化。產(chǎn)生變化。確定網(wǎng)站的色調(diào)確定網(wǎng)站的色調(diào)色彩色彩 主色調(diào)：主色調(diào)：頁面色彩的主要色調(diào)、總趨勢(shì)，其他配色不能超過頁面色彩的主要色調(diào)、總趨勢(shì)，其他配色不能超過該主要色調(diào)的視覺面積（背景白色不一定根據(jù)視覺

9、面積決定，該主要色調(diào)的視覺面積（背景白色不一定根據(jù)視覺面積決定，可以根據(jù)頁面的感覺需要）?？梢愿鶕?jù)頁面的感覺需要）。 輔色調(diào)：輔色調(diào)：僅次于主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、僅次于主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。支持主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。 點(diǎn)睛色：點(diǎn)睛色：在小范圍內(nèi)點(diǎn)上強(qiáng)烈的顏色來突出主題效果，使頁在小范圍內(nèi)點(diǎn)上強(qiáng)烈的顏色來突出主題效果，使頁面更加鮮明生動(dòng)。面更加鮮明生動(dòng)。 背景色：背景色：襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。色彩色彩返回返回色彩色彩案例欣賞案例欣賞排版排版(

10、網(wǎng)頁版式規(guī)劃）網(wǎng)頁版式規(guī)劃）網(wǎng)頁設(shè)計(jì)中版式規(guī)劃是最重要也是最關(guān)鍵的一個(gè)步驟網(wǎng)頁設(shè)計(jì)中版式規(guī)劃是最重要也是最關(guān)鍵的一個(gè)步驟，網(wǎng)站的版式規(guī)劃要根據(jù)不同的行業(yè)、不同的主題規(guī)，網(wǎng)站的版式規(guī)劃要根據(jù)不同的行業(yè)、不同的主題規(guī)劃最適合的網(wǎng)頁版式。同時(shí)還要考慮到以后用劃最適合的網(wǎng)頁版式。同時(shí)還要考慮到以后用dreamweaver布局時(shí)的方便性。布局時(shí)的方便性。排版排版常用到的版面布局形式有：常用到的版面布局形式有： (1)(1)骨骼型（分欄式結(jié)構(gòu)）骨骼型（分欄式結(jié)構(gòu)）（2 2）“國國”字型布局結(jié)構(gòu)：字型布局結(jié)構(gòu)：頁面的頂部和底部各有一個(gè)橫向的分頁面的頂部和底部各有一個(gè)橫向的分欄，中間是豎向分欄，其欄目數(shù)為三個(gè)

11、以上，通過上下分欄和兩側(cè)的豎欄，中間是豎向分欄，其欄目數(shù)為三個(gè)以上，通過上下分欄和兩側(cè)的豎分欄形成一個(gè)封閉的矩形框，也可以通過一個(gè)矩形的邊框來形成。這種分欄形成一個(gè)封閉的矩形框，也可以通過一個(gè)矩形的邊框來形成。這種結(jié)構(gòu)有一種聚合的力量，使中間的內(nèi)容更加突出。結(jié)構(gòu)有一種聚合的力量，使中間的內(nèi)容更加突出。排版排版n橫欄式劃分橫欄式劃分排版排版n豎欄式劃分豎欄式劃分排版排版n國國字字形形結(jié)結(jié)構(gòu)構(gòu)排版排版（3 3） “ “同同”字型布局結(jié)構(gòu)：字型布局結(jié)構(gòu)：與國字型結(jié)構(gòu)類似，不同的只是與國字型結(jié)構(gòu)類似，不同的只是頁面的底部沒有橫分欄，同樣也可采用邊框來形成。這種結(jié)構(gòu)由于沒頁面的底部沒有橫分欄，同樣也可采

12、用邊框來形成。這種結(jié)構(gòu)由于沒有完全封閉，版面的開放性比國字型結(jié)構(gòu)要好一些。整個(gè)版面除上部有完全封閉，版面的開放性比國字型結(jié)構(gòu)要好一些。整個(gè)版面除上部的橫分欄外，以豎向分欄為主體，兼有平安、穩(wěn)定和嚴(yán)肅、蓬勃向上的橫分欄外，以豎向分欄為主體，兼有平安、穩(wěn)定和嚴(yán)肅、蓬勃向上的感覺。的感覺。（4 4）自由式結(jié)構(gòu)：）自由式結(jié)構(gòu)：看上去沒有明顯的矩形分割痕跡，給予設(shè)計(jì)看上去沒有明顯的矩形分割痕跡，給予設(shè)計(jì)者一個(gè)自由、開放的設(shè)計(jì)空間，設(shè)計(jì)者的創(chuàng)意能夠得到充分的發(fā)揮和者一個(gè)自由、開放的設(shè)計(jì)空間，設(shè)計(jì)者的創(chuàng)意能夠得到充分的發(fā)揮和表現(xiàn)，能夠設(shè)計(jì)出更高藝術(shù)水平的頁面。大多用于網(wǎng)站的導(dǎo)入頁，或表現(xiàn)，能夠設(shè)計(jì)出更高藝術(shù)

13、水平的頁面。大多用于網(wǎng)站的導(dǎo)入頁，或者首頁。者首頁。但自由版式的頁面布局要復(fù)雜一些，需要利用表格中大小不等的矩形但自由版式的頁面布局要復(fù)雜一些，需要利用表格中大小不等的矩形單元格來進(jìn)行無縫拼貼，才能形成一個(gè)完整的自由圖形。單元格來進(jìn)行無縫拼貼，才能形成一個(gè)完整的自由圖形。排版排版n同同字字形形結(jié)結(jié)構(gòu)構(gòu)排版排版n自由版式自由版式排版排版排版排版排版排版版塊（頻道）劃分版塊（頻道）劃分把網(wǎng)站的內(nèi)容按照一定的邏輯關(guān)系分類，形成網(wǎng)站的把網(wǎng)站的內(nèi)容按照一定的邏輯關(guān)系分類，形成網(wǎng)站的內(nèi)容版塊?？砂凑諆?nèi)容的屬性、內(nèi)容的媒體形式、等內(nèi)容版塊?？砂凑諆?nèi)容的屬性、內(nèi)容的媒體形式、等進(jìn)行分類，分類的依據(jù)和邏輯關(guān)系要

14、讓瀏覽者一目了進(jìn)行分類，分類的依據(jù)和邏輯關(guān)系要讓瀏覽者一目了然，這樣瀏覽者根據(jù)版塊結(jié)構(gòu)就知道網(wǎng)站整體內(nèi)容結(jié)然，這樣瀏覽者根據(jù)版塊結(jié)構(gòu)就知道網(wǎng)站整體內(nèi)容結(jié)構(gòu)，明白了是否有他需要的信息以及應(yīng)該在哪個(gè)版塊構(gòu)，明白了是否有他需要的信息以及應(yīng)該在哪個(gè)版塊去瀏覽他需要的信息。去瀏覽他需要的信息。網(wǎng)站欄目劃分版塊劃分應(yīng)該注意的問題：版塊劃分應(yīng)該注意的問題： （1）版塊的數(shù)目不宜太多）版塊的數(shù)目不宜太多 網(wǎng)站的版塊并非越多、分得越細(xì)就越好，只要分類明確，應(yīng)該盡可能網(wǎng)站的版塊并非越多、分得越細(xì)就越好，只要分類明確，應(yīng)該盡可能少一些。一方面分得過細(xì)顯得結(jié)構(gòu)不緊湊，另一方面通常版塊信息要少一些。一方面分得過細(xì)顯得結(jié)

15、構(gòu)不緊湊，另一方面通常版塊信息要帶到它的下級(jí)的各個(gè)欄目中，要占掉非常寶貴的屏幕空間。帶到它的下級(jí)的各個(gè)欄目中，要占掉非常寶貴的屏幕空間。 （2）給版塊起一個(gè)好的名稱）給版塊起一個(gè)好的名稱 版塊的名稱是該版塊內(nèi)容的綜合體現(xiàn)，一要看它是否能體現(xiàn)出版塊內(nèi)版塊的名稱是該版塊內(nèi)容的綜合體現(xiàn)，一要看它是否能體現(xiàn)出版塊內(nèi)容；二是準(zhǔn)確沒有歧義；三是字?jǐn)?shù)要少，要簡(jiǎn)練，并且各版塊名稱的容；二是準(zhǔn)確沒有歧義；三是字?jǐn)?shù)要少，要簡(jiǎn)練，并且各版塊名稱的字?jǐn)?shù)最好一致；四要通俗易懂。字?jǐn)?shù)最好一致；四要通俗易懂。 （3）版塊要獨(dú)立）版塊要獨(dú)立 版塊間沒有包容關(guān)系；版塊間沒有交叉關(guān)系版塊間沒有包容關(guān)系；版塊間沒有交叉關(guān)系（例如：

16、娛樂和觀看電影（例如：娛樂和觀看電影包容關(guān)系包容關(guān)系 美女和影星美女和影星交叉關(guān)系）交叉關(guān)系）網(wǎng)站欄目劃分欄目確定欄目確定網(wǎng)站內(nèi)容在版塊之下再分欄目，如果內(nèi)容很多，還可以在一級(jí)欄目之網(wǎng)站內(nèi)容在版塊之下再分欄目，如果內(nèi)容很多，還可以在一級(jí)欄目之下再分二級(jí)欄目，就像書的章下面分節(jié)，節(jié)下面再分點(diǎn)一樣。欄目的下再分二級(jí)欄目，就像書的章下面分節(jié)，節(jié)下面再分點(diǎn)一樣。欄目的級(jí)數(shù)不宜太多，一般不超過三級(jí)。欄目級(jí)數(shù)越多，網(wǎng)站的結(jié)構(gòu)就越深級(jí)數(shù)不宜太多，一般不超過三級(jí)。欄目級(jí)數(shù)越多，網(wǎng)站的結(jié)構(gòu)就越深，瀏覽者要通過多次點(diǎn)擊才能看到，這是瀏覽者不愿意的。，瀏覽者要通過多次點(diǎn)擊才能看到，這是瀏覽者不愿意的。欄目是版欄目是

17、版塊內(nèi)容和功能的具體體現(xiàn)，除信息內(nèi)容欄目外，還有一些功能欄目，塊內(nèi)容和功能的具體體現(xiàn)，除信息內(nèi)容欄目外，還有一些功能欄目，如如“在線留言、下載專區(qū)等在線留言、下載專區(qū)等“一般的個(gè)人站點(diǎn)內(nèi)容少，只有主欄目一般的個(gè)人站點(diǎn)內(nèi)容少，只有主欄目(主菜單主菜單)就夠了，不需要設(shè)置版就夠了，不需要設(shè)置版塊。如果你覺得的確有必要設(shè)置版塊的，應(yīng)該注意塊。如果你覺得的確有必要設(shè)置版塊的，應(yīng)該注意1.各版塊要有相對(duì)各版塊要有相對(duì)獨(dú)立性。獨(dú)立性。2.各版塊要有相互關(guān)聯(lián)。各版塊要有相互關(guān)聯(lián)。3.版塊的內(nèi)容要圍繞站點(diǎn)主題。關(guān)版塊的內(nèi)容要圍繞站點(diǎn)主題。關(guān)于版塊方面，主要是門戶站點(diǎn)等較大網(wǎng)站需要考慮的問題于版塊方面，主要是門

18、戶站點(diǎn)等較大網(wǎng)站需要考慮的問題網(wǎng)站欄目劃分一般的網(wǎng)站欄目安排要注意以下幾方面一般的網(wǎng)站欄目安排要注意以下幾方面: :(1).(1).一定記住要緊扣你的主題一定記住要緊扣你的主題! !一般的做法是:將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如制作一個(gè)發(fā)布動(dòng)畫的網(wǎng)站，可以將欄目分為動(dòng)物動(dòng)畫，標(biāo)志動(dòng)畫，三維動(dòng)畫，卡通動(dòng)畫等，在首頁上標(biāo)明最近更新的動(dòng)畫。記住:主題欄目個(gè)數(shù)在總欄目中要占絕對(duì)優(yōu)勢(shì)，這樣的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。 (2).(2).設(shè)一個(gè)最近更新或網(wǎng)站指南欄目設(shè)一個(gè)最近更新或網(wǎng)站指南欄目如果你的首頁沒有安排版面放置最近更新內(nèi)容信息，就有必要設(shè)立一個(gè)“最近更新

19、”的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。如果你的主頁內(nèi)容龐大(超過15MB)，層次較多，而又沒有站內(nèi)的搜索引擎，建議您設(shè)置“本站指南”欄目。可以幫助初訪者快速找到他們想要的內(nèi)容。網(wǎng)站欄目劃分(3).(3).設(shè)定一個(gè)可以雙向交流的欄目設(shè)定一個(gè)可以雙向交流的欄目不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調(diào)查表明，提供雙向交流的站點(diǎn)比簡(jiǎn)單的留一個(gè)Email me的站點(diǎn)更具有親和力。(4).(4).設(shè)一個(gè)下載或常見問題回答欄目設(shè)一個(gè)下載或常見問題回答欄目網(wǎng)絡(luò)的特點(diǎn)是信息共享。如果你看到一個(gè)站點(diǎn)有大量的優(yōu)秀的有價(jià)值的資料，你肯定希望能一次性下

20、載，而不是一頁一頁瀏覽存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O(shè)置一個(gè)資料下載欄目，會(huì)得到大家的喜歡。有些站點(diǎn)為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會(huì)因訪問量下降而淘汰(個(gè)人意見:)。另外，如果您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信，你最好設(shè)立一個(gè)常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時(shí)間用以學(xué)習(xí)。網(wǎng)站欄目劃分至于其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題?？偨Y(jié)以上幾點(diǎn)，我們得出劃分欄目需要注意的是:n盡可能刪除與主題無關(guān)的欄目盡可能刪除與主題無關(guān)的欄目n盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上n盡可能方便訪問者

21、的瀏覽和查詢盡可能方便訪問者的瀏覽和查詢網(wǎng)站欄目劃分網(wǎng)站欄目劃分n搜狐網(wǎng)站的頻道與位置n頁面底欄信息內(nèi)容網(wǎng)站欄目劃分n網(wǎng)頁中不同的信息欄目網(wǎng)站欄目劃分網(wǎng)站欄目劃分n第一級(jí)欄目網(wǎng)站欄目劃分n第二級(jí)欄目網(wǎng)站欄目劃分第三級(jí)欄目欄目的級(jí)數(shù)不宜太多，一般不要超過3級(jí)。網(wǎng)站欄目劃分點(diǎn)擊第二個(gè)版塊點(diǎn)擊第二個(gè)版塊“吃喝吃喝”網(wǎng)站欄目劃分網(wǎng)站欄目劃分網(wǎng)站欄目劃分網(wǎng)站欄目劃分網(wǎng)站欄目劃分網(wǎng)站欄目劃分n首頁首頁網(wǎng)站欄目劃分n企業(yè)情報(bào)版塊企業(yè)情報(bào)版塊網(wǎng)站欄目劃分n企業(yè)情報(bào)版塊企業(yè)情報(bào)版塊關(guān)于麥當(dāng)勞關(guān)于麥當(dāng)勞n返回n一般來說，確定網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：一般來說，確定網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：1) 1) 樹狀

22、鏈接結(jié)構(gòu)（一對(duì)一）。樹狀鏈接結(jié)構(gòu)（一對(duì)一）。類似類似DOSDOS的目錄結(jié)構(gòu)，的目錄結(jié)構(gòu)，首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二級(jí)頁面。首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二級(jí)頁面。立體結(jié)構(gòu)看起來就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，立體結(jié)構(gòu)看起來就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問者明一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問者明確知道自己在什么位置，不會(huì)確知道自己在什么位置，不會(huì)“迷迷”路。缺點(diǎn)是瀏覽效路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞經(jīng)首頁。如必須繞經(jīng)首頁。如:

23、: 校園動(dòng)態(tài)校園動(dòng)態(tài)- -教師活動(dòng)教師活動(dòng)- -教師節(jié)教師節(jié)首頁首頁 教學(xué)園地教學(xué)園地- -教師成果教師成果- -學(xué)生作品學(xué)生作品鏈接鏈接案列案列鏈接鏈接鏈接鏈接2) 星狀鏈接結(jié)構(gòu)（一對(duì)多）星狀鏈接結(jié)構(gòu)（一對(duì)多）。類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面。缺點(diǎn)是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置、看了多少內(nèi)容。如: 校園動(dòng)態(tài)校園動(dòng)態(tài)-教師活動(dòng)教師活動(dòng)-學(xué)生活動(dòng)學(xué)生活動(dòng) 首頁首頁 教學(xué)園地教學(xué)園地-教師成果教師成果-學(xué)生作品學(xué)生作品 這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站設(shè)計(jì)中，一般要將這兩種結(jié)構(gòu)混合起來使用。

24、鏈接鏈接 要使網(wǎng)站的鏈接結(jié)構(gòu)清晰明了，一般做法是：首頁和一級(jí)頁面之間用星狀鏈接結(jié)要使網(wǎng)站的鏈接結(jié)構(gòu)清晰明了，一般做法是：首頁和一級(jí)頁面之間用星狀鏈接結(jié)構(gòu)，一級(jí)和二級(jí)頁面之間用樹狀鏈接結(jié)構(gòu)。如：一個(gè)新聞?wù)军c(diǎn)的頁面結(jié)構(gòu)如下：構(gòu)，一級(jí)和二級(jí)頁面之間用樹狀鏈接結(jié)構(gòu)。如：一個(gè)新聞?wù)军c(diǎn)的頁面結(jié)構(gòu)如下： 一級(jí)頁面一級(jí)頁面 二級(jí)頁面二級(jí)頁面 財(cái)經(jīng)新聞頁財(cái)經(jīng)新聞頁 - 財(cái)經(jīng)新聞財(cái)經(jīng)新聞1，財(cái)經(jīng)新聞，財(cái)經(jīng)新聞2. / | 首頁首頁 - 娛樂新聞頁娛樂新聞頁 - 娛樂新聞娛樂新聞1，娛樂新聞，娛樂新聞2. | IT新聞頁新聞頁 - IT新聞新聞1，IT新聞新聞2. 其中，首頁、財(cái)經(jīng)新聞頁、娛樂新聞頁、其中，首頁、財(cái)

25、經(jīng)新聞頁、娛樂新聞頁、IT新聞頁之間是星狀鏈接，可以互相點(diǎn)新聞頁之間是星狀鏈接，可以互相點(diǎn)擊，直接到達(dá)。而財(cái)經(jīng)新聞頁和它的子頁面之間是樹狀連接，瀏覽財(cái)經(jīng)新聞?chuàng)簦苯拥竭_(dá)。而財(cái)經(jīng)新聞頁和它的子頁面之間是樹狀連接，瀏覽財(cái)經(jīng)新聞1后后，我們必須回到財(cái)經(jīng)新聞頁，才能瀏覽，我們必須回到財(cái)經(jīng)新聞頁，才能瀏覽IT新聞新聞2.所以所以,如果為了免去返回一級(jí)頁面如果為了免去返回一級(jí)頁面的麻煩，可將二級(jí)頁面直接用新開窗口的麻煩，可將二級(jí)頁面直接用新開窗口(POP up windows)打開，瀏覽結(jié)束后關(guān)閉打開，瀏覽結(jié)束后關(guān)閉即可。即可。鏈接鏈接n如果站點(diǎn)內(nèi)容龐大、分類明細(xì)，需要超過三級(jí)頁面，那么一定要在頁面里顯示

26、導(dǎo)航條，幫助瀏覽如果站點(diǎn)內(nèi)容龐大、分類明細(xì)，需要超過三級(jí)頁面，那么一定要在頁面里顯示導(dǎo)航條，幫助瀏覽者明確自己所處的位置。者明確自己所處的位置。n返回鏈接鏈接 網(wǎng)頁網(wǎng)頁: :又稱又稱WebWeb頁面頁面，是網(wǎng)絡(luò)文件的組成部分，是可以被，是網(wǎng)絡(luò)文件的組成部分，是可以被瀏覽器訪問的單個(gè)瀏覽器訪問的單個(gè)HTMLHTML超文本文件超文本文件. . 它由文字、表格、圖片、聲音、視頻以及各種功能按它由文字、表格、圖片、聲音、視頻以及各種功能按鈕等組成，這些文字、圖片、按鈕往往又是指向別的主頁的鈕等組成，這些文字、圖片、按鈕往往又是指向別的主頁的連接點(diǎn)。在連接點(diǎn)。在InternetInternet網(wǎng)上，這些

27、連接點(diǎn)又叫超級(jí)鏈接。網(wǎng)上，這些連接點(diǎn)又叫超級(jí)鏈接。 網(wǎng)站網(wǎng)站: :在設(shè)計(jì)時(shí)，將某個(gè)主題明確后，再按所需的單元、在設(shè)計(jì)時(shí)，將某個(gè)主題明確后，再按所需的單元、內(nèi)容經(jīng)過安排，化為各個(gè)不同的網(wǎng)頁，在同一個(gè)結(jié)構(gòu)及訴求內(nèi)容經(jīng)過安排，化為各個(gè)不同的網(wǎng)頁，在同一個(gè)結(jié)構(gòu)及訴求下出現(xiàn)的集合體，就是網(wǎng)站（下出現(xiàn)的集合體，就是網(wǎng)站（Web SiteWeb Site）。）。 有主題性的網(wǎng)站是要經(jīng)過規(guī)劃和構(gòu)架過的網(wǎng)站。在互聯(lián)有主題性的網(wǎng)站是要經(jīng)過規(guī)劃和構(gòu)架過的網(wǎng)站。在互聯(lián)網(wǎng)上，網(wǎng)上，WebWeb站點(diǎn)由一組相互關(guān)聯(lián)的頁面組成，如果把整個(gè)站點(diǎn)由一組相互關(guān)聯(lián)的頁面組成，如果把整個(gè)WWWWWW信息世界看作一個(gè)村子，那么一個(gè)信息世界看作一個(gè)村子，那么一個(gè)WebWeb站點(diǎn)可以理解成一個(gè)站點(diǎn)可以理解成一個(gè)家庭。所有由首頁鏈接出去的網(wǎng)頁集合起來就是網(wǎng)站家庭。所有由首頁鏈接出去的網(wǎng)頁集合起來就是網(wǎng)站. . 進(jìn)入頁（引導(dǎo)頁）進(jìn)入頁（引導(dǎo)頁）: : 進(jìn)入頁是訪問者登錄網(wǎng)站時(shí)看到的第一個(gè)頁面，其主要進(jìn)入頁是訪問者登錄網(wǎng)站時(shí)看到的第一個(gè)頁面，其主要作用是表明瀏覽網(wǎng)站所需要的瀏覽環(huán)境或者網(wǎng)站不同時(shí)期、作用是表明瀏覽網(wǎng)站所需要的瀏覽環(huán)