第6章網(wǎng)站開發(fā)的過程1

1、Web標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)與標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)與ASP第六章 網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計(jì)的過程 6.1網(wǎng)站開發(fā)的過程網(wǎng)站開發(fā)的過程v與傳統(tǒng)的軟件開發(fā)過程類似，為了加快網(wǎng)站建設(shè)與傳統(tǒng)的軟件開發(fā)過程類似，為了加快網(wǎng)站建設(shè)的速度和減少失誤，應(yīng)該采用一定的制作流程來的速度和減少失誤，應(yīng)該采用一定的制作流程來策劃、設(shè)計(jì)和制作網(wǎng)站。通過使用制作流程確定策劃、設(shè)計(jì)和制作網(wǎng)站。通過使用制作流程確定制作步驟，以確保每一步順利完成。制作步驟，以確保每一步順利完成。v好的制作流程能幫助設(shè)計(jì)者解決策劃網(wǎng)站的繁瑣好的制作流程能幫助設(shè)計(jì)者解決策劃網(wǎng)站的繁瑣性，減小網(wǎng)站開發(fā)項(xiàng)目失敗的風(fēng)險(xiǎn)，同時(shí)又能保性，減小網(wǎng)站開發(fā)項(xiàng)目失敗的風(fēng)險(xiǎn)，同時(shí)又能保證網(wǎng)

2、站的科學(xué)性、嚴(yán)謹(jǐn)性。證網(wǎng)站的科學(xué)性、嚴(yán)謹(jǐn)性。網(wǎng)站的開發(fā)過程v網(wǎng)站的開發(fā)過程大致可分為網(wǎng)站的開發(fā)過程大致可分為v策劃與定義、策劃與定義、v設(shè)計(jì)、設(shè)計(jì)、v開發(fā)、開發(fā)、v測(cè)試測(cè)試v發(fā)布發(fā)布 5個(gè)階段。個(gè)階段。 明確網(wǎng)站定位收集信息和素材設(shè)計(jì)頁面方案制作各個(gè)頁面實(shí)現(xiàn)后臺(tái)功能整合與測(cè)試網(wǎng)站網(wǎng)站維護(hù)和推廣策劃?rùn)谀績(jī)?nèi)容前期中期后期6.1.1 基本任務(wù)和角色基本任務(wù)和角色v在網(wǎng)站開發(fā)的每一個(gè)階段，都需要相關(guān)各方人員在網(wǎng)站開發(fā)的每一個(gè)階段，都需要相關(guān)各方人員的共同合作，包括客戶、設(shè)計(jì)師和編程開發(fā)人員的共同合作，包括客戶、設(shè)計(jì)師和編程開發(fā)人員等不同角色等不同角色 策劃與分析策劃與分析 設(shè)設(shè) 計(jì)計(jì)開開 發(fā)發(fā)測(cè)測(cè) 試

3、試發(fā)發(fā) 布布客戶客戶設(shè)計(jì)師設(shè)計(jì)師設(shè)計(jì)師設(shè)計(jì)師設(shè)計(jì)師設(shè)計(jì)師程序開發(fā)員程序開發(fā)員客戶客戶設(shè)計(jì)師設(shè)計(jì)師程序開發(fā)員程序開發(fā)員設(shè)計(jì)師設(shè)計(jì)師程序開發(fā)員程序開發(fā)員6.1.2 網(wǎng)站開發(fā)過程的各環(huán)節(jié)網(wǎng)站開發(fā)過程的各環(huán)節(jié)v 1. 明確網(wǎng)站定位明確網(wǎng)站定位v 2. 收集信息和素材收集信息和素材v 3. 策劃?rùn)谀績(jī)?nèi)容策劃?rùn)谀績(jī)?nèi)容v 4. 設(shè)計(jì)頁面方案設(shè)計(jì)頁面方案v 5. 制作頁面制作頁面v 6. 實(shí)現(xiàn)后臺(tái)功能實(shí)現(xiàn)后臺(tái)功能v 6. 整合與測(cè)試網(wǎng)站整合與測(cè)試網(wǎng)站v 7. 網(wǎng)站維護(hù)和推廣網(wǎng)站維護(hù)和推廣6.2 遵循遵循Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)步驟標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)步驟v 網(wǎng)頁設(shè)計(jì)是網(wǎng)站開發(fā)中耗時(shí)最多，也是最為關(guān)鍵的一個(gè)環(huán)網(wǎng)頁設(shè)計(jì)是網(wǎng)

4、站開發(fā)中耗時(shí)最多，也是最為關(guān)鍵的一個(gè)環(huán)節(jié)，下面介紹的是從零開始遵循節(jié)，下面介紹的是從零開始遵循Web標(biāo)準(zhǔn)的理念設(shè)計(jì)一個(gè)標(biāo)準(zhǔn)的理念設(shè)計(jì)一個(gè)頁面的過程，我們可以把一個(gè)頁面的完整設(shè)計(jì)過程分為頁面的過程，我們可以把一個(gè)頁面的完整設(shè)計(jì)過程分為7個(gè)步驟個(gè)步驟v （1）內(nèi)容分析：仔細(xì)研究需要在網(wǎng)頁中的展現(xiàn)的內(nèi)容，）內(nèi)容分析：仔細(xì)研究需要在網(wǎng)頁中的展現(xiàn)的內(nèi)容，梳理其中的邏輯關(guān)系，分清層次，以及重要程度。梳理其中的邏輯關(guān)系，分清層次，以及重要程度。v （2）結(jié)構(gòu)設(shè)計(jì)：根據(jù)內(nèi)容分析的成果，搭建出合理的）結(jié)構(gòu)設(shè)計(jì)：根據(jù)內(nèi)容分析的成果，搭建出合理的HTML結(jié)構(gòu)，保證在沒有任何結(jié)構(gòu)，保證在沒有任何CSS樣式的情況下，在

5、瀏覽樣式的情況下，在瀏覽器保持高度可讀性。器保持高度可讀性。v （3）原型設(shè)計(jì)：根據(jù)網(wǎng)頁的結(jié)構(gòu)，繪制出原型線框圖，）原型設(shè)計(jì)：根據(jù)網(wǎng)頁的結(jié)構(gòu)，繪制出原型線框圖，對(duì)頁面進(jìn)行合理的分區(qū)的布局，原型線框圖是設(shè)計(jì)負(fù)責(zé)人對(duì)頁面進(jìn)行合理的分區(qū)的布局，原型線框圖是設(shè)計(jì)負(fù)責(zé)人與客戶交流的最佳媒介。與客戶交流的最佳媒介。v （4）效果圖設(shè)計(jì)：在確定的原型線框圖基礎(chǔ)上，使用美）效果圖設(shè)計(jì)：在確定的原型線框圖基礎(chǔ)上，使用美工軟件，設(shè)計(jì)出具有良好視覺效果的頁面設(shè)計(jì)方法。工軟件，設(shè)計(jì)出具有良好視覺效果的頁面設(shè)計(jì)方法。v （5）布局設(shè)計(jì)：使用）布局設(shè)計(jì)：使用HTML和和CSS對(duì)頁面進(jìn)行布局。對(duì)頁面進(jìn)行布局。v （6）視覺

6、設(shè)計(jì)：使用）視覺設(shè)計(jì)：使用CSS并配合美工設(shè)計(jì)元素，完成由并配合美工設(shè)計(jì)元素，完成由設(shè)計(jì)方法到網(wǎng)頁的轉(zhuǎn)化。設(shè)計(jì)方法到網(wǎng)頁的轉(zhuǎn)化。v （7）交互設(shè)計(jì)：為網(wǎng)頁增添交互效果，如鼠標(biāo)指針經(jīng)過）交互設(shè)計(jì)：為網(wǎng)頁增添交互效果，如鼠標(biāo)指針經(jīng)過和點(diǎn)擊時(shí)的一些特效等。和點(diǎn)擊時(shí)的一些特效等。完整的開發(fā)過程案例6.2.2 內(nèi)容分析內(nèi)容分析v 設(shè)計(jì)一個(gè)網(wǎng)頁的第一步是設(shè)計(jì)一個(gè)網(wǎng)頁的第一步是明確這個(gè)網(wǎng)頁的內(nèi)容明確這個(gè)網(wǎng)頁的內(nèi)容，如網(wǎng)頁需要傳，如網(wǎng)頁需要傳遞給瀏覽者的信息，各種信息的重要性，各種信息的組織架構(gòu)遞給瀏覽者的信息，各種信息的重要性，各種信息的組織架構(gòu)等。以等。以“武漢大學(xué)珞珈學(xué)院武漢大學(xué)珞珈學(xué)院”首頁為例進(jìn)行說

7、明。首頁為例進(jìn)行說明。v 對(duì)于這個(gè)頁面，首先要有明確的網(wǎng)站名稱和標(biāo)志（對(duì)于這個(gè)頁面，首先要有明確的網(wǎng)站名稱和標(biāo)志（logo），此），此外，要使瀏覽者能方便地了解這個(gè)網(wǎng)站所有者的信息，包括指外，要使瀏覽者能方便地了解這個(gè)網(wǎng)站所有者的信息，包括指向自身的介紹（向自身的介紹（“學(xué)校概況學(xué)校概況”）、院系概況等內(nèi)容的鏈接。然）、院系概況等內(nèi)容的鏈接。然后再思考制作這個(gè)網(wǎng)站的目的是什么，這些目的就是該網(wǎng)站的后再思考制作這個(gè)網(wǎng)站的目的是什么，這些目的就是該網(wǎng)站的定位。定位。v 接下來我們可以根據(jù)網(wǎng)站的定位確定該網(wǎng)站具有的接下來我們可以根據(jù)網(wǎng)站的定位確定該網(wǎng)站具有的欄目結(jié)構(gòu)欄目結(jié)構(gòu)，并把每個(gè)第一級(jí)欄目的標(biāo)題

8、作為導(dǎo)航條的導(dǎo)航項(xiàng)。并把每個(gè)第一級(jí)欄目的標(biāo)題作為導(dǎo)航條的導(dǎo)航項(xiàng)。 6.2.3 HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)v可以開始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。因?yàn)槲覀円獙?shí)現(xiàn)可以開始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。因?yàn)槲覀円獙?shí)現(xiàn)結(jié)構(gòu)和表現(xiàn)相分離，所以現(xiàn)在完全不要管結(jié)構(gòu)和表現(xiàn)相分離，所以現(xiàn)在完全不要管CSS，而是完全從網(wǎng)頁的內(nèi)容出發(fā)，根據(jù)上面列出的要而是完全從網(wǎng)頁的內(nèi)容出發(fā)，根據(jù)上面列出的要點(diǎn)，通過點(diǎn)，通過HTML搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。 6.2.4 原型設(shè)計(jì)原型設(shè)計(jì)v在設(shè)計(jì)任何一個(gè)網(wǎng)頁的版面布局之前，都應(yīng)該有在設(shè)計(jì)任何一個(gè)網(wǎng)頁的版面布局之前，都應(yīng)該有一個(gè)構(gòu)思的過程。對(duì)網(wǎng)頁的版面布局，內(nèi)容排列一個(gè)構(gòu)思的過程。對(duì)網(wǎng)頁

9、的版面布局，內(nèi)容排列進(jìn)行全面的分析。如果有條件，應(yīng)該制作出線框進(jìn)行全面的分析。如果有條件，應(yīng)該制作出線框（Wireframe）圖，線框圖通俗地說就是設(shè)計(jì)草）圖，線框圖通俗地說就是設(shè)計(jì)草圖，這個(gè)過程專業(yè)上稱為圖，這個(gè)過程專業(yè)上稱為“原型設(shè)計(jì)原型設(shè)計(jì)”。例如，。例如，在上節(jié)將首頁的內(nèi)容放置在在上節(jié)將首頁的內(nèi)容放置在HTML結(jié)構(gòu)代碼之后，結(jié)構(gòu)代碼之后，就可以先畫一個(gè)如圖就可以先畫一個(gè)如圖6-7所示的網(wǎng)頁線框圖（草所示的網(wǎng)頁線框圖（草圖），以后再按照這個(gè)草圖繪制具體的網(wǎng)頁效果圖），以后再按照這個(gè)草圖繪制具體的網(wǎng)頁效果圖。圖。 6.2.5 網(wǎng)頁效果圖設(shè)計(jì)網(wǎng)頁效果圖設(shè)計(jì)v1. 導(dǎo)航條的設(shè)計(jì)導(dǎo)航條的設(shè)計(jì)v2

10、. 頁腳部分的設(shè)計(jì)頁腳部分的設(shè)計(jì)v精心設(shè)計(jì)的頁腳是有很大作用的，不要將頁腳想精心設(shè)計(jì)的頁腳是有很大作用的，不要將頁腳想象成一條多出來的象成一條多出來的“尾巴尾巴”，而應(yīng)該將它看做是，而應(yīng)該將它看做是一個(gè)支撐點(diǎn)，支撐著上述所有內(nèi)容的一個(gè)區(qū)域。一個(gè)支撐點(diǎn)，支撐著上述所有內(nèi)容的一個(gè)區(qū)域。頁腳區(qū)域中放置的內(nèi)容一般也比較固定，如鏈接、頁腳區(qū)域中放置的內(nèi)容一般也比較固定，如鏈接、聯(lián)系信息及標(biāo)志等。聯(lián)系信息及標(biāo)志等。 6.2.6 布局設(shè)計(jì)布局設(shè)計(jì)v在這一步中，任務(wù)是把各種元素通過在這一步中，任務(wù)是把各種元素通過CSS布局放布局放到適當(dāng)?shù)奈恢?，而暫時(shí)不涉及對(duì)頁面元素美化這到適當(dāng)?shù)奈恢?，而暫時(shí)不涉及對(duì)頁面元素美

11、化這樣細(xì)節(jié)的因素樣細(xì)節(jié)的因素 v1. 整體樣式設(shè)計(jì)整體樣式設(shè)計(jì)v首先對(duì)整個(gè)頁面的共有屬性進(jìn)行一些設(shè)置，例如首先對(duì)整個(gè)頁面的共有屬性進(jìn)行一些設(shè)置，例如字體、字體、margin、padding等屬性都進(jìn)行初始設(shè)置，等屬性都進(jìn)行初始設(shè)置，以保證這些內(nèi)容在各個(gè)瀏覽器中有相同的表現(xiàn)以保證這些內(nèi)容在各個(gè)瀏覽器中有相同的表現(xiàn) v 2. 頁頭部分頁頭部分v #header部分的代碼中，將部分的代碼中，將position屬性設(shè)置為屬性設(shè)置為relative，目，目的是使其包含的子元素使用絕對(duì)定位時(shí)，以頁頭而不是瀏的是使其包含的子元素使用絕對(duì)定位時(shí)，以頁頭而不是瀏覽器窗口為定位基準(zhǔn)，然后設(shè)定它的寬度覽器窗口為定位

12、基準(zhǔn)，然后設(shè)定它的寬度width等于網(wǎng)頁等于網(wǎng)頁的寬。的寬。 v 3. 內(nèi)容部分內(nèi)容部分v 在原型線框圖中，內(nèi)容部分為左右兩列，下面首先對(duì)在原型線框圖中，內(nèi)容部分為左右兩列，下面首先對(duì)HTML代碼進(jìn)行改造，然后設(shè)置相應(yīng)的代碼進(jìn)行改造，然后設(shè)置相應(yīng)的CSS代碼，實(shí)現(xiàn)左代碼，實(shí)現(xiàn)左右分欄的要求右分欄的要求 v 4. 頁腳部分頁腳部分v 為頁腳部分增加一個(gè)為頁腳部分增加一個(gè)div，并將其，并將其id名稱設(shè)置為名稱設(shè)置為“footer” 6.2.7 視覺設(shè)計(jì)視覺設(shè)計(jì)v頁面總體的布局設(shè)計(jì)完成后，就要開始對(duì)細(xì)節(jié)進(jìn)頁面總體的布局設(shè)計(jì)完成后，就要開始對(duì)細(xì)節(jié)進(jìn)行設(shè)計(jì)了，整個(gè)設(shè)計(jì)過程是按照從內(nèi)容到形式，行設(shè)計(jì)了，

13、整個(gè)設(shè)計(jì)過程是按照從內(nèi)容到形式，逐步細(xì)化的思想來進(jìn)行的。視覺設(shè)計(jì)主要是使用逐步細(xì)化的思想來進(jìn)行的。視覺設(shè)計(jì)主要是使用Fireworks切圖再把切好的圖放置到頁面元素的背切圖再把切好的圖放置到頁面元素的背景中實(shí)現(xiàn)的景中實(shí)現(xiàn)的 左側(cè)列和右側(cè)列的視覺設(shè)計(jì)6.2.8 交互效果設(shè)計(jì)交互效果設(shè)計(jì)1. 為為“常用下載常用下載”中項(xiàng)目設(shè)置鼠標(biāo)經(jīng)過時(shí)效果中項(xiàng)目設(shè)置鼠標(biāo)經(jīng)過時(shí)效果#sidebar .downbox li a:hoverbackground: #ffeeee url(images/bullet2.gif) no-repeat 10px center;/* 注意同時(shí)改變了背景顏色和注意同時(shí)改變了背景顏

14、色和作為小圖標(biāo)的背景圖像作為小圖標(biāo)的背景圖像*/color:#CC6633;/* 改變文字顏色改變文字顏色*/2. 圖像邊框動(dòng)態(tài)改變圖像邊框動(dòng)態(tài)改變v當(dāng)鼠標(biāo)經(jīng)過一張展示圖片時(shí)，圖像的邊框顏色由當(dāng)鼠標(biāo)經(jīng)過一張展示圖片時(shí)，圖像的邊框顏色由土黃色變?yōu)樗{(lán)色，背景色也由白色變?yōu)樗{(lán)色土黃色變?yōu)樗{(lán)色，背景色也由白色變?yōu)樗{(lán)色#content a:hover imgpadding: 5px;background: #3d81b4;border: 1px #3d81b4 solid; 6.2.9 總結(jié)總結(jié)CSS布局的優(yōu)點(diǎn)布局的優(yōu)點(diǎn)v 使用使用CSS進(jìn)行布局的最大進(jìn)行布局的最大優(yōu)點(diǎn)是非常靈活，可以方優(yōu)點(diǎn)是非常靈活，

15、可以方便地?cái)U(kuò)展和調(diào)整。例如，便地?cái)U(kuò)展和調(diào)整。例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁面中增加一些內(nèi)需要在頁面中增加一些內(nèi)容，那么不需要修改容，那么不需要修改CSS樣式，只需要簡(jiǎn)單地在樣式，只需要簡(jiǎn)單地在HTML中增加相應(yīng)的結(jié)構(gòu)中增加相應(yīng)的結(jié)構(gòu)模塊就可以了。模塊就可以了。 v 不但如此，設(shè)計(jì)得不但如此，設(shè)計(jì)得足夠合理的頁面可足夠合理的頁面可以非常靈活地修改以非常靈活地修改樣式。例如，只需樣式。例如，只需要將兩列布局的浮要將兩列布局的浮動(dòng)方向交換，就可動(dòng)方向交換，就可以立即得到一個(gè)新以立即得到一個(gè)新的頁面，如圖所示。的頁面，如圖所示。可以看到左右兩列可以看到左右兩列交換了位置。交

16、換了位置。 v 示例示例網(wǎng)頁兼容性測(cè)試方法v將網(wǎng)頁在各種瀏覽器中預(yù)覽將網(wǎng)頁在各種瀏覽器中預(yù)覽v增大或減小瀏覽器的寬度進(jìn)行預(yù)覽（特別注意在增大或減小瀏覽器的寬度進(jìn)行預(yù)覽（特別注意在寬屏顯示器中的效果）寬屏顯示器中的效果）v調(diào)整瀏覽器的默認(rèn)字體大小預(yù)覽（注意調(diào)整瀏覽器的默認(rèn)字體大小預(yù)覽（注意Firefox瀏瀏覽器調(diào)整字體大小后會(huì)使表單文本框的大小發(fā)生覽器調(diào)整字體大小后會(huì)使表單文本框的大小發(fā)生變化）變化）6.3 6.3 網(wǎng)站的風(fēng)格設(shè)計(jì)網(wǎng)站的風(fēng)格設(shè)計(jì)網(wǎng)站的風(fēng)格設(shè)計(jì) v所謂網(wǎng)站風(fēng)格，就是指某一網(wǎng)站的整體形象給瀏所謂網(wǎng)站風(fēng)格，就是指某一網(wǎng)站的整體形象給瀏覽者的綜合感受，是站點(diǎn)與眾不同的特色，它能覽者的綜合

17、感受，是站點(diǎn)與眾不同的特色，它能透露出設(shè)計(jì)者與企業(yè)的文化品位。這個(gè)整體形象透露出設(shè)計(jì)者與企業(yè)的文化品位。這個(gè)整體形象包括網(wǎng)站的包括網(wǎng)站的CI（Corporate Identity，企業(yè)形象，企業(yè)形象，包括標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏包括標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值、存在覽方式、交互性、文字、語氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等諸多因素意義、站點(diǎn)榮譽(yù)等諸多因素 v 風(fēng)格是有人性的，通過網(wǎng)站的外表，內(nèi)容，文字，交流可風(fēng)格是有人性的，通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個(gè)站點(diǎn)的個(gè)性、情緒。是溫文儒雅，是執(zhí)著熱以概括出一個(gè)站點(diǎn)的個(gè)性、情緒

18、。是溫文儒雅，是執(zhí)著熱情，是活潑易變，是放任不羈。象詩詞中的情，是活潑易變，是放任不羈。象詩詞中的“豪放派豪放派”和和“婉約派婉約派”，你可以用人的性格來比喻站點(diǎn)。，你可以用人的性格來比喻站點(diǎn)。v 風(fēng)格的形成需要在開發(fā)中不斷強(qiáng)化、調(diào)整和修飾，也需要風(fēng)格的形成需要在開發(fā)中不斷強(qiáng)化、調(diào)整和修飾，也需要不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計(jì)時(shí)，對(duì)于不同性質(zhì)的行業(yè)，不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計(jì)時(shí)，對(duì)于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的網(wǎng)站風(fēng)格。一般情況下，政府部門的網(wǎng)站應(yīng)體現(xiàn)出不同的網(wǎng)站風(fēng)格。一般情況下，政府部門的網(wǎng)站風(fēng)格應(yīng)比較莊重沉穩(wěn)，文化教育部門的網(wǎng)站應(yīng)該高雅大方，風(fēng)格應(yīng)比較莊重沉穩(wěn)，文化教育部門的網(wǎng)站應(yīng)該高雅

19、大方，娛樂行業(yè)的網(wǎng)站可以活潑生動(dòng)一些，商務(wù)網(wǎng)站可以貼近民娛樂行業(yè)的網(wǎng)站可以活潑生動(dòng)一些，商務(wù)網(wǎng)站可以貼近民俗，而個(gè)人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計(jì)俗，而個(gè)人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計(jì)者的興趣，充分彰顯個(gè)性。者的興趣，充分彰顯個(gè)性。6.3.1 網(wǎng)站風(fēng)格設(shè)計(jì)的基本原則網(wǎng)站風(fēng)格設(shè)計(jì)的基本原則v1. 盡可能地將網(wǎng)站標(biāo)志（盡可能地將網(wǎng)站標(biāo)志（logo）放在每個(gè)頁面最）放在每個(gè)頁面最突出的位置突出的位置 v2. 使用統(tǒng)一的圖片處理效果使用統(tǒng)一的圖片處理效果 v3. 突出主色調(diào)突出主色調(diào) v4. 使用標(biāo)準(zhǔn)字體使用標(biāo)準(zhǔn)字體v風(fēng)格設(shè)計(jì)包含的內(nèi)容很多，其中影響網(wǎng)站風(fēng)格最風(fēng)格設(shè)計(jì)包含的內(nèi)容很

20、多，其中影響網(wǎng)站風(fēng)格最重要的兩個(gè)因素是重要的兩個(gè)因素是網(wǎng)頁色彩的搭配網(wǎng)頁色彩的搭配和和網(wǎng)頁版式的網(wǎng)頁版式的布局設(shè)計(jì)布局設(shè)計(jì) 6.3.2 網(wǎng)頁色彩的搭配網(wǎng)頁色彩的搭配v任何網(wǎng)頁創(chuàng)意使用的視覺元素總的歸納起來不外任何網(wǎng)頁創(chuàng)意使用的視覺元素總的歸納起來不外乎三種：文字、圖像、色彩。三者選用搭配的適乎三種：文字、圖像、色彩。三者選用搭配的適當(dāng)，編排組合的合理，將對(duì)網(wǎng)頁的美化起到直接當(dāng)，編排組合的合理，將對(duì)網(wǎng)頁的美化起到直接的效果。的效果。v在這三者中，色彩的作用不可小覷。色彩決定印在這三者中，色彩的作用不可小覷。色彩決定印象，當(dāng)瀏覽者觀看網(wǎng)頁時(shí)，首先看到的就是網(wǎng)頁象，當(dāng)瀏覽者觀看網(wǎng)頁時(shí)，首先看到的就是

21、網(wǎng)頁的色彩搭配。在這一瞬間，對(duì)網(wǎng)頁的整體印象就的色彩搭配。在這一瞬間，對(duì)網(wǎng)頁的整體印象就已經(jīng)確定下來了，色彩形成的印象非常穩(wěn)固，不已經(jīng)確定下來了，色彩形成的印象非常穩(wěn)固，不知不覺間，就像被牢牢鎖定了一樣。知不覺間，就像被牢牢鎖定了一樣。6.3.3 網(wǎng)頁版式設(shè)計(jì)網(wǎng)頁版式設(shè)計(jì)v網(wǎng)頁中的文字應(yīng)采用合理的字體大小和字形。網(wǎng)頁中的文字應(yīng)采用合理的字體大小和字形。v確保在所有的頁面中導(dǎo)航條位于相同的位置確保在所有的頁面中導(dǎo)航條位于相同的位置v確保頁頭和頁尾部分在所有的頁面中都相同。確保頁頭和頁尾部分在所有的頁面中都相同。v不要使網(wǎng)頁太長(zhǎng)，特別是首頁。不要使網(wǎng)頁太長(zhǎng)，特別是首頁。v確保瀏覽器在滿屏顯示時(shí)網(wǎng)頁

22、不出現(xiàn)水平滾動(dòng)條。確保瀏覽器在滿屏顯示時(shí)網(wǎng)頁不出現(xiàn)水平滾動(dòng)條。v要在網(wǎng)頁中適當(dāng)留出空白要在網(wǎng)頁中適當(dāng)留出空白 網(wǎng)頁的版式種類網(wǎng)頁的版式種類 v（1）T型布局型布局 v所謂所謂T結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景教深，整體效果類似英文字局，因?yàn)椴藛螚l背景教深，整體效果類似英文字母母T,所以我們稱之為所以我們稱之為T形布局。這是網(wǎng)頁設(shè)形布局。這是網(wǎng)頁設(shè)計(jì)中用的最廣返的一種布局方式。這種布局的優(yōu)計(jì)中用的最廣返的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。

23、是初學(xué)者最容易點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人彩上不注意，很容易讓人看之無味看之無味。 （2）“口”型布局 v這是一個(gè)象形的說法，就是頁面一般上下各有一這是一個(gè)象形的說法，就是頁面一般上下各有一個(gè)廣告條，左面是主菜單，右面放友情鏈接等，個(gè)廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是頁面擁擠，不夠靈活。也面，信息量大。缺點(diǎn)是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)。有

24、將四邊空出，只用中間的窗口型設(shè)計(jì)。 （3）“三”型布局 v這種布局多用于國(guó)外站點(diǎn)。特點(diǎn)是頁面上橫向兩這種布局多用于國(guó)外站點(diǎn)。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。放廣告條。 （4）“二”型布局v采取左右或者上下對(duì)稱的布局，一半深色，一半采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。 （5）“POP”布局 v “POP”布局就像一張宣傳海報(bào)，以一張精美圖片作為頁面布局就

25、像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心，在適當(dāng)位置放置主菜單，常用于時(shí)尚類站點(diǎn)的設(shè)計(jì)中心，在適當(dāng)位置放置主菜單，常用于時(shí)尚類站點(diǎn) 6.4 網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計(jì)網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計(jì)v網(wǎng)站中的內(nèi)容是根據(jù)網(wǎng)站的欄目組織起來的，所網(wǎng)站中的內(nèi)容是根據(jù)網(wǎng)站的欄目組織起來的，所以網(wǎng)站欄目相當(dāng)于網(wǎng)站的邏輯結(jié)構(gòu)，而通常都要以網(wǎng)站欄目相當(dāng)于網(wǎng)站的邏輯結(jié)構(gòu)，而通常都要將網(wǎng)站每個(gè)欄目中的網(wǎng)頁分門別類的放在不同的將網(wǎng)站每個(gè)欄目中的網(wǎng)頁分門別類的放在不同的網(wǎng)站子目錄中，所以網(wǎng)站的目錄結(jié)構(gòu)可看成是網(wǎng)網(wǎng)站子目錄中，所以網(wǎng)站的目錄結(jié)構(gòu)可看成是網(wǎng)站的物理結(jié)構(gòu)站的物理結(jié)構(gòu) 6.4.1 網(wǎng)站的欄目規(guī)劃網(wǎng)站的

26、欄目規(guī)劃v 1. 建立層次型結(jié)構(gòu)建立層次型結(jié)構(gòu)v 2. 設(shè)計(jì)每一個(gè)欄目設(shè)計(jì)每一個(gè)欄目信息與網(wǎng)絡(luò)中心網(wǎng)站中心簡(jiǎn)介政策法規(guī)常用下載技術(shù)支持聯(lián)系我們辦公系統(tǒng)部門簡(jiǎn)介機(jī)構(gòu)設(shè)置人員簡(jiǎn)介校內(nèi)規(guī)章國(guó)家法規(guī)常用軟件表格下載6.4.2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì)v1. 目錄結(jié)構(gòu)設(shè)計(jì)的原則目錄結(jié)構(gòu)設(shè)計(jì)的原則（1）網(wǎng)站應(yīng)有一個(gè)主目錄）網(wǎng)站應(yīng)有一個(gè)主目錄（2）不要將所有的文件都直接存放在網(wǎng)站根目錄下）不要將所有的文件都直接存放在網(wǎng)站根目錄下（3）根據(jù)欄目規(guī)劃來設(shè)計(jì)目錄結(jié)構(gòu)）根據(jù)欄目規(guī)劃來設(shè)計(jì)目錄結(jié)構(gòu)（4）每個(gè)目錄下都建立獨(dú)立的）每個(gè)目錄下都建立獨(dú)立的images子目錄子目錄（5）目錄的層次不要太深）目錄的層

27、次不要太深（6）不要使用中文文件名或中文目錄名）不要使用中文文件名或中文目錄名2. 站點(diǎn)結(jié)構(gòu)圖站點(diǎn)結(jié)構(gòu)圖6.5 網(wǎng)站的導(dǎo)航設(shè)計(jì) v在訪問網(wǎng)站的時(shí)候也一樣，用戶期望在任何一個(gè)在訪問網(wǎng)站的時(shí)候也一樣，用戶期望在任何一個(gè)網(wǎng)頁上都能清楚地知道目前所處的位置，并且能網(wǎng)頁上都能清楚地知道目前所處的位置，并且能快速地從這個(gè)網(wǎng)頁切換到想要訪問的網(wǎng)頁。但訪快速地從這個(gè)網(wǎng)頁切換到想要訪問的網(wǎng)頁。但訪問網(wǎng)站的時(shí)候，經(jīng)常會(huì)因?yàn)閱螕暨^多的網(wǎng)頁而迷問網(wǎng)站的時(shí)候，經(jīng)常會(huì)因?yàn)閱螕暨^多的網(wǎng)頁而迷失方向。失方向。v因此網(wǎng)站的導(dǎo)航設(shè)計(jì)對(duì)于一個(gè)網(wǎng)站來說非常的必因此網(wǎng)站的導(dǎo)航設(shè)計(jì)對(duì)于一個(gè)網(wǎng)站來說非常的必要和重要，它是衡量一個(gè)網(wǎng)站是否優(yōu)

28、秀的重要標(biāo)要和重要，它是衡量一個(gè)網(wǎng)站是否優(yōu)秀的重要標(biāo)志。志。6.5.1 導(dǎo)航的實(shí)現(xiàn)方法導(dǎo)航的實(shí)現(xiàn)方法v1. 導(dǎo)航條導(dǎo)航條v2. 路徑導(dǎo)航路徑導(dǎo)航v3. 其他導(dǎo)航方式其他導(dǎo)航方式v4. 搜索搜索沒有導(dǎo)航的導(dǎo)航?jīng)]有導(dǎo)航的導(dǎo)航6.5.2 導(dǎo)航的設(shè)計(jì)策略導(dǎo)航的設(shè)計(jì)策略v首先，任何網(wǎng)站都要有一個(gè)主導(dǎo)航條首先，任何網(wǎng)站都要有一個(gè)主導(dǎo)航條 v其次，如果網(wǎng)站的層次很深，比如四層以上（主其次，如果網(wǎng)站的層次很深，比如四層以上（主頁作為第一層），最好要有路徑導(dǎo)航。頁作為第一層），最好要有路徑導(dǎo)航。 v其他方式的導(dǎo)航只是作為輔助的導(dǎo)航手段，視實(shí)其他方式的導(dǎo)航只是作為輔助的導(dǎo)航手段，視實(shí)際需要而定際需要而定 6.6

29、網(wǎng)站的環(huán)境準(zhǔn)備 v網(wǎng)站環(huán)境準(zhǔn)備是指為網(wǎng)站的運(yùn)行準(zhǔn)備必要的軟、網(wǎng)站環(huán)境準(zhǔn)備是指為網(wǎng)站的運(yùn)行準(zhǔn)備必要的軟、硬件環(huán)境，主要包括運(yùn)行空間的準(zhǔn)備、網(wǎng)絡(luò)接入硬件環(huán)境，主要包括運(yùn)行空間的準(zhǔn)備、網(wǎng)絡(luò)接入條件準(zhǔn)備、域名及條件準(zhǔn)備、域名及IP地址的申請(qǐng)等。對(duì)于中小型地址的申請(qǐng)等。對(duì)于中小型網(wǎng)站來說，主要是指主機(jī)空間準(zhǔn)備和域名申請(qǐng)兩網(wǎng)站來說，主要是指主機(jī)空間準(zhǔn)備和域名申請(qǐng)兩項(xiàng)。項(xiàng)。6.6.1 架設(shè)網(wǎng)站的基本條件架設(shè)網(wǎng)站的基本條件v1. 要有主機(jī)或主機(jī)空間要有主機(jī)或主機(jī)空間v 所謂主機(jī)在這里是指所謂主機(jī)在這里是指Web服務(wù)器。我們知道用戶能瀏覽網(wǎng)服務(wù)器。我們知道用戶能瀏覽網(wǎng)站上的網(wǎng)頁實(shí)際上是從遠(yuǎn)程的站上的網(wǎng)頁實(shí)際上是從遠(yuǎn)程的Web服務(wù)器上讀取了一些