網(wǎng)頁設(shè)計流程

網(wǎng)頁設(shè)計流程李文兢網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第1頁。案例描述網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第2頁。網(wǎng)站的開發(fā)過程網(wǎng)站的開發(fā)過程大致可分為5個階段：策劃與分析、設(shè)計、開發(fā)、測試、發(fā)布在網(wǎng)站開發(fā)的每一個階段，都需要相關(guān)各方人員的共同合作，包括客戶、設(shè)計師和編程開發(fā)人員等不同角色策劃與分析設(shè)計開發(fā)測試發(fā)布客戶設(shè)計師設(shè)計師設(shè)計師架構(gòu)師程序開發(fā)員客戶設(shè)計師程序開發(fā)員設(shè)計師程序開發(fā)員網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第3頁。網(wǎng)站開發(fā)過程的各環(huán)節(jié)明確網(wǎng)站定位收集信息和素材設(shè)計頁面方案制作各個頁面實(shí)現(xiàn)后臺功能整合與測試網(wǎng)站網(wǎng)站維護(hù)和推廣策劃欄目內(nèi)容前期中期后期網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第4頁。遵循Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計步驟步驟工具內(nèi)容分析結(jié)構(gòu)設(shè)計原型設(shè)計效果圖設(shè)計布局設(shè)計視覺設(shè)計交互設(shè)計鉛筆紙橡皮HTMLAxureRPVisioFireworksWordFireworksPhotoshopCSSHTMLCSSHTMLFireworksPhotoshopCSSJavaScriptDreamWeaver網(wǎng)頁設(shè)計是網(wǎng)站開發(fā)中耗時最多，也是最為關(guān)鍵的一個環(huán)節(jié)，下面介紹的是從零開始遵循Web標(biāo)準(zhǔn)的理念設(shè)計一個頁面的過程，我們可以把一個頁面的完整設(shè)計過程分為7個步驟：網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第5頁。遵循Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計步驟內(nèi)容分析：仔細(xì)研究需要在網(wǎng)頁中的展現(xiàn)的內(nèi)容，梳理其中的邏輯關(guān)系，分清層次，以及重要程度。結(jié)構(gòu)設(shè)計：根據(jù)內(nèi)容分析的成果，搭建出合理的HTML結(jié)構(gòu)，保證在沒有任何CSS樣式的情況下，在瀏覽器保持高度可讀性。原型設(shè)計：根據(jù)網(wǎng)頁的結(jié)構(gòu)，繪制出原型線框圖，對頁面進(jìn)行合理的分區(qū)的布局，原型線框圖是設(shè)計負(fù)責(zé)人與客戶交流的最佳媒介。效果圖設(shè)計：在確定的原型線框圖基礎(chǔ)上，使用美工軟件，設(shè)計出具有良好視覺效果的圖片。布局設(shè)計：使用HTML和CSS對頁面進(jìn)行布局。視覺設(shè)計：使用CSS并配合美工設(shè)計元素，完成由設(shè)計方法到網(wǎng)頁的轉(zhuǎn)化。交互設(shè)計：為網(wǎng)頁增添交互效果，如鼠標(biāo)指針經(jīng)過和點(diǎn)擊時的一些特效等。網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第6頁。一、內(nèi)容分析參考已有的網(wǎng)站明確網(wǎng)頁的內(nèi)容，如網(wǎng)頁需要傳遞給瀏覽者的信息，各種信息的重要性，各種信息的組織架構(gòu)等。以“信息與網(wǎng)絡(luò)中心”首頁為例進(jìn)行說明。對于這個頁面，首先要有明確的網(wǎng)站名稱和標(biāo)志（logo），此外，要使瀏覽者能方便地了解這個網(wǎng)站所有者的信息，包括指向自身的介紹（“關(guān)于我們”）、聯(lián)系方式等內(nèi)容的鏈接。然后再思考制作這個網(wǎng)站的目的是什么，因?yàn)檫@個網(wǎng)站的根本目的是為了對外宣傳網(wǎng)絡(luò)中心這個部門，給全校師生員工提供更便捷的網(wǎng)絡(luò)和信息化服務(wù)，實(shí)現(xiàn)數(shù)字化校園，信息化教學(xué)。那么這些目的就是該網(wǎng)站的定位。根據(jù)網(wǎng)站的定位確定該網(wǎng)站具有的欄目結(jié)構(gòu)，并把每個第一級欄目的標(biāo)題作為導(dǎo)航條的導(dǎo)航項(xiàng)。

網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第7頁。二、HTML結(jié)構(gòu)設(shè)計使用具有一定含義的標(biāo)記，如<h1><p>…任何一個頁面，應(yīng)該盡可能保證在不使用CSS的情況下，依然保持良好的結(jié)構(gòu)和可讀性。這不僅僅對訪問者有幫助，而且有助于被搜索引擎收錄。當(dāng)有若干個項(xiàng)目并列時，<ul>是較好的選擇。網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第8頁。三、原型設(shè)計首頁二級頁面內(nèi)頁網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第9頁。四、效果圖設(shè)計網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第10頁。五、布局設(shè)計在這一步中，任務(wù)是把各種元素通過CSS布局放到適當(dāng)?shù)奈恢?，而暫時不涉及對頁面元素美化這樣細(xì)節(jié)的因素1.整體樣式設(shè)計首先對整個頁面的共有屬性進(jìn)行一些設(shè)置，例如字體、margin、padding等屬性都進(jìn)行初始設(shè)置，以保證這些內(nèi)容在各個瀏覽器中有相同的表現(xiàn)2.頁頭部分#header部分的代碼中，將position屬性設(shè)置為relative，目的是使其包含的子元素使用絕對定位時，以頁頭而不是瀏覽器窗口為定位基準(zhǔn)，然后設(shè)定它的寬度width等于網(wǎng)頁的寬。3.內(nèi)容部分在原型線框圖中，內(nèi)容部分為左右兩列，下面首先對HTML代碼進(jìn)行改造，然后設(shè)置相應(yīng)的CSS代碼，實(shí)現(xiàn)左右分欄的要求4.頁腳部分為頁腳部分增加一個div，并將其id名稱設(shè)置為“footer”網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第11頁。六、視覺設(shè)計頁面總體的布局設(shè)計完成后，就要開始對細(xì)節(jié)進(jìn)行設(shè)計了，整個設(shè)計過程是按照從內(nèi)容到形式，逐步細(xì)化的思想來進(jìn)行的。視覺設(shè)計主要是使用Fireworks切圖再把切好的圖放置到頁面元素的背景中實(shí)現(xiàn)的網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第12頁。用圖像替換標(biāo)題文字的方法可以看到圖像已經(jīng)出現(xiàn)在正確的位置，但是原來的標(biāo)題文字還在上面，這時為了隱藏原來的文字，需要在HTML中為文字套一層<span>標(biāo)記，代碼如下：

<h1><span>信息與網(wǎng)絡(luò)中心</span></h1>然后在CSS中通過display屬性將它隱藏起來，代碼如下：

#headerh1span{display:none;}這樣標(biāo)題部分的視覺設(shè)計就設(shè)置完成了。對標(biāo)題文字進(jìn)行圖像替換最核心的作用就是在HTML代碼中仍然保留h1元素的文字信息，這樣對于網(wǎng)頁的維護(hù)和結(jié)構(gòu)完整都有很大好處，同時對搜索引擎的優(yōu)化也有很大的意義網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第13頁。左側(cè)列和右側(cè)列的視覺設(shè)計網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第14頁。七、交互效果設(shè)計1.為“常用下載”設(shè)置鼠標(biāo)經(jīng)過時效果#sidebar.downboxlia:hover{background:#ffeeeeurl(images/bullet2.gif)no-repeat10pxcenter;/*注意同時改變了背景顏色和作為小圖標(biāo)的背景圖像*/color:#cc6633; /*改變文字顏色*/}網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第15頁。七、交互效果設(shè)計2.當(dāng)鼠標(biāo)經(jīng)過一張展示圖片時，圖像的邊框顏色由土黃色變?yōu)樗{(lán)色，背景色也由白色變?yōu)樗{(lán)色3.解決IE6中的bug網(wǎng)頁設(shè)計流程全文共18頁，當(dāng)前為第16頁?？偨Y(jié)CSS布局的優(yōu)點(diǎn)使用CSS進(jìn)行布局的最大優(yōu)點(diǎn)是非常靈活，可以方便地擴(kuò)展和調(diào)整。例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁面中增加一些內(nèi)容，那么不需要修改CSS樣式，只需要簡單地在HTML中增加相應(yīng)的結(jié)構(gòu)模