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

1、Web標(biāo)準(zhǔn)網(wǎng)頁設(shè)計與標(biāo)準(zhǔn)網(wǎng)頁設(shè)計與ASP第六章 網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計的過程 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è)計和制作網(wǎng)站。通過使用制作流程確定策劃、設(shè)計和制作網(wǎng)站。通過使用制作流程確定制作步驟，以確保每一步順利完成。制作步驟，以確保每一步順利完成。v好的制作流程能幫助設(shè)計者解決策劃網(wǎng)站的繁瑣好的制作流程能幫助設(shè)計者解決策劃網(wǎng)站的繁瑣性，減小網(wǎng)站開發(fā)項目失敗的風(fēng)險，同時又能保性，減小網(wǎng)站開發(fā)項目失敗的風(fēng)險，同時又能保證網(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è)計、設(shè)計、v開發(fā)、開發(fā)、v測試測試v發(fā)布發(fā)布 5個階段。個階段。 明確網(wǎng)站定位收集信息和素材設(shè)計頁面方案制作各個頁面實現(xiàn)后臺功能整合與測試網(wǎng)站網(wǎng)站維護和推廣策劃欄目內(nèi)容前期中期后期6.1.1 基本任務(wù)和角色基本任務(wù)和角色v在網(wǎng)站開發(fā)的每一個階段，都需要相關(guān)各方人員在網(wǎng)站開發(fā)的每一個階段，都需要相關(guān)各方人員的共同合作，包括客戶、設(shè)計師和編程開發(fā)人員的共同合作，包括客戶、設(shè)計師和編程開發(fā)人員等不同角色等不同角色 策劃與分析策劃與分析 設(shè)設(shè) 計計開開 發(fā)發(fā)測測 試

3、試發(fā)發(fā) 布布客戶客戶設(shè)計師設(shè)計師設(shè)計師設(shè)計師設(shè)計師設(shè)計師程序開發(fā)員程序開發(fā)員客戶客戶設(shè)計師設(shè)計師程序開發(fā)員程序開發(fā)員設(shè)計師設(shè)計師程序開發(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. 策劃欄目內(nèi)容策劃欄目內(nèi)容v 4. 設(shè)計頁面方案設(shè)計頁面方案v 5. 制作頁面制作頁面v 6. 實現(xiàn)后臺功能實現(xiàn)后臺功能v 6. 整合與測試網(wǎng)站整合與測試網(wǎng)站v 7. 網(wǎng)站維護和推廣網(wǎng)站維護和推廣6.2 遵循遵循Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計步驟標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計步驟v 網(wǎng)頁設(shè)計是網(wǎng)站開發(fā)中耗時最多，也是最為關(guān)鍵的一個環(huán)網(wǎng)頁設(shè)計是網(wǎng)

4、站開發(fā)中耗時最多，也是最為關(guān)鍵的一個環(huán)節(jié)，下面介紹的是從零開始遵循節(jié)，下面介紹的是從零開始遵循Web標(biāo)準(zhǔn)的理念設(shè)計一個標(biāo)準(zhǔn)的理念設(shè)計一個頁面的過程，我們可以把一個頁面的完整設(shè)計過程分為頁面的過程，我們可以把一個頁面的完整設(shè)計過程分為7個步驟個步驟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ù)內(nèi)容分析的成果，搭建出合理的）結(jié)構(gòu)設(shè)計：根據(jù)內(nèi)容分析的成果，搭建出合理的HTML結(jié)構(gòu)，保證在沒有任何結(jié)構(gòu)，保證在沒有任何CSS樣式的情況下，在

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

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

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

8、作為導(dǎo)航條的導(dǎo)航項。并把每個第一級欄目的標(biāo)題作為導(dǎo)航條的導(dǎo)航項。 6.2.3 HTML結(jié)構(gòu)設(shè)計結(jié)構(gòu)設(shè)計v可以開始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。因為我們要實現(xiàn)可以開始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。因為我們要實現(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ù)上面列出的要點，通過點，通過HTML搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。 6.2.4 原型設(shè)計原型設(shè)計v在設(shè)計任何一個網(wǎng)頁的版面布局之前，都應(yīng)該有在設(shè)計任何一個網(wǎng)頁的版面布局之前，都應(yīng)該有一個構(gòu)思的過程。對網(wǎng)頁的版面布局，內(nèi)容排列一個構(gòu)思的過程。對網(wǎng)頁

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

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

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

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

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

14、色和作為小圖標(biāo)的背景圖像作為小圖標(biāo)的背景圖像*/color:#CC6633;/* 改變文字顏色改變文字顏色*/2. 圖像邊框動態(tài)改變圖像邊框動態(tài)改變v當(dāng)鼠標(biāo)經(jīng)過一張展示圖片時，圖像的邊框顏色由當(dāng)鼠標(biāo)經(jīng)過一張展示圖片時，圖像的邊框顏色由土黃色變?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)點布局的優(yōu)點v 使用使用CSS進(jìn)行布局的最大進(jìn)行布局的最大優(yōu)點是非常靈活，可以方優(yōu)點是非常靈活，

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

16、換了位置。 v 示例示例網(wǎng)頁兼容性測試方法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)整字體大小后會使表單文本框的大小發(fā)生覽器調(diào)整字體大小后會使表單文本框的大小發(fā)生變化）變化）6.3 6.3 網(wǎng)站的風(fēng)格設(shè)計網(wǎng)站的風(fēng)格設(shè)計網(wǎng)站的風(fēng)格設(shè)計 v所謂網(wǎng)站風(fēng)格，就是指某一網(wǎng)站的整體形象給瀏所謂網(wǎng)站風(fēng)格，就是指某一網(wǎng)站的整體形象給瀏覽者的綜合感受，是站點與眾不同的特色，它能覽者的綜合

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

18、。是溫文儒雅，是執(zhí)著熱情，是活潑易變，是放任不羈。象詩詞中的情，是活潑易變，是放任不羈。象詩詞中的“豪放派豪放派”和和“婉約派婉約派”，你可以用人的性格來比喻站點。，你可以用人的性格來比喻站點。v 風(fēng)格的形成需要在開發(fā)中不斷強化、調(diào)整和修飾，也需要風(fēng)格的形成需要在開發(fā)中不斷強化、調(diào)整和修飾，也需要不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計時，對于不同性質(zhì)的行業(yè)，不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計時，對于不同性質(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)站可以活潑生動一些，商務(wù)網(wǎng)站可以貼近民娛樂行業(yè)的網(wǎng)站可以活潑生動一些，商務(wù)網(wǎng)站可以貼近民俗，而個人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計俗，而個人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計者的興趣，充分彰顯個性。者的興趣，充分彰顯個性。6.3.1 網(wǎng)站風(fēng)格設(shè)計的基本原則網(wǎng)站風(fēng)格設(shè)計的基本原則v1. 盡可能地將網(wǎng)站標(biāo)志（盡可能地將網(wǎng)站標(biāo)志（logo）放在每個頁面最）放在每個頁面最突出的位置突出的位置 v2. 使用統(tǒng)一的圖片處理效果使用統(tǒng)一的圖片處理效果 v3. 突出主色調(diào)突出主色調(diào) v4. 使用標(biāo)準(zhǔn)字體使用標(biāo)準(zhǔn)字體v風(fēng)格設(shè)計包含的內(nèi)容很多，其中影響網(wǎng)站風(fēng)格最風(fēng)格設(shè)計包含的內(nèi)容很

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

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

22、不出現(xiàn)水平滾動條。確保瀏覽器在滿屏顯示時網(wǎng)頁不出現(xiàn)水平滾動條。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)容的布局，因為菜單條背景教深，整體效果類似英文字局，因為菜單條背景教深，整體效果類似英文字母母T,所以我們稱之為所以我們稱之為T形布局。這是網(wǎng)頁設(shè)形布局。這是網(wǎng)頁設(shè)計中用的最廣返的一種布局方式。這種布局的優(yōu)計中用的最廣返的一種布局方式。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明。

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

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

25、像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，在適當(dāng)位置放置主菜單，常用于時尚類站點的設(shè)計中心，在適當(dāng)位置放置主菜單，常用于時尚類站點 6.4 網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計網(wǎng)站的欄目規(guī)劃和目錄結(jié)構(gòu)設(shè)計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)站每個欄目中的網(wǎng)頁分門別類的放在不同的將網(wǎng)站每個欄目中的網(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è)計每一個欄目設(shè)計每一個欄目信息與網(wǎng)絡(luò)中心網(wǎng)站中心簡介政策法規(guī)常用下載技術(shù)支持聯(lián)系我們辦公系統(tǒng)部門簡介機構(gòu)設(shè)置人員簡介校內(nèi)規(guī)章國家法規(guī)常用軟件表格下載6.4.2 網(wǎng)站的目錄結(jié)構(gòu)設(shè)計網(wǎng)站的目錄結(jié)構(gòu)設(shè)計v1. 目錄結(jié)構(gòu)設(shè)計的原則目錄結(jié)構(gòu)設(shè)計的原則（1）網(wǎng)站應(yīng)有一個主目錄）網(wǎng)站應(yīng)有一個主目錄（2）不要將所有的文件都直接存放在網(wǎng)站根目錄下）不要將所有的文件都直接存放在網(wǎng)站根目錄下（3）根據(jù)欄目規(guī)劃來設(shè)計目錄結(jié)構(gòu)）根據(jù)欄目規(guī)劃來設(shè)計目錄結(jié)構(gòu)（4）每個目錄下都建立獨立的）每個目錄下都建立獨立的images子目錄子目錄（5）目錄的層次不要太深）目錄的層

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

28、秀的重要標(biāo)要和重要，它是衡量一個網(wǎng)站是否優(yōu)秀的重要標(biāo)志。志。6.5.1 導(dǎo)航的實現(xiàn)方法導(dǎo)航的實現(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è)計策略導(dǎo)航的設(shè)計策略v首先，任何網(wǎng)站都要有一個主導(dǎo)航條首先，任何網(wǎng)站都要有一個主導(dǎo)航條 v其次，如果網(wǎng)站的層次很深，比如四層以上（主其次，如果網(wǎng)站的層次很深，比如四層以上（主頁作為第一層），最好要有路徑導(dǎo)航。頁作為第一層），最好要有路徑導(dǎo)航。 v其他方式的導(dǎo)航只是作為輔助的導(dǎo)航手段，視實其他方式的導(dǎo)航只是作為輔助的導(dǎo)航手段，視實際需要而定際需要而定 6.6

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