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

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

2、站的科學性、嚴謹性。證網站的科學性、嚴謹性。網站的開發(fā)過程v網站的開發(fā)過程大致可分為網站的開發(fā)過程大致可分為v策劃與定義、策劃與定義、v設計、設計、v開發(fā)、開發(fā)、v測試測試v發(fā)布發(fā)布 5個階段。個階段。 明確網站定位收集信息和素材設計頁面方案制作各個頁面實現后臺功能整合與測試網站網站維護和推廣策劃欄目內容前期中期后期6.1.1 基本任務和角色基本任務和角色v在網站開發(fā)的每一個階段，都需要相關各方人員在網站開發(fā)的每一個階段，都需要相關各方人員的共同合作，包括客戶、設計師和編程開發(fā)人員的共同合作，包括客戶、設計師和編程開發(fā)人員等不同角色等不同角色 策劃與分析策劃與分析 設設 計計開開 發(fā)發(fā)測測 試

3、試發(fā)發(fā) 布布客戶客戶設計師設計師設計師設計師設計師設計師程序開發(fā)員程序開發(fā)員客戶客戶設計師設計師程序開發(fā)員程序開發(fā)員設計師設計師程序開發(fā)員程序開發(fā)員6.1.2 網站開發(fā)過程的各環(huán)節(jié)網站開發(fā)過程的各環(huán)節(jié)v 1. 明確網站定位明確網站定位v 2. 收集信息和素材收集信息和素材v 3. 策劃欄目內容策劃欄目內容v 4. 設計頁面方案設計頁面方案v 5. 制作頁面制作頁面v 6. 實現后臺功能實現后臺功能v 6. 整合與測試網站整合與測試網站v 7. 網站維護和推廣網站維護和推廣6.2 遵循遵循Web標準的網頁設計步驟標準的網頁設計步驟v 網頁設計是網站開發(fā)中耗時最多，也是最為關鍵的一個環(huán)網頁設計是網

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

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

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

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

8、作為導航條的導航項。并把每個第一級欄目的標題作為導航條的導航項。 6.2.3 HTML結構設計結構設計v可以開始構建網站的內容結構。因為我們要實現可以開始構建網站的內容結構。因為我們要實現結構和表現相分離，所以現在完全不要管結構和表現相分離，所以現在完全不要管CSS，而是完全從網頁的內容出發(fā)，根據上面列出的要而是完全從網頁的內容出發(fā)，根據上面列出的要點，通過點，通過HTML搭建出網頁的內容結構。搭建出網頁的內容結構。 6.2.4 原型設計原型設計v在設計任何一個網頁的版面布局之前，都應該有在設計任何一個網頁的版面布局之前，都應該有一個構思的過程。對網頁的版面布局，內容排列一個構思的過程。對網頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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