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

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

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

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

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