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

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

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

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

#headerh1span{display:none;}這樣標(biāo)題部分的視覺(jué)設(shè)計(jì)就設(shè)置完成了。對(duì)標(biāo)題文字進(jìn)行圖像替換最核心的作用就是在HTML代碼中仍然保留h1元素的文字信息，這樣對(duì)于網(wǎng)頁(yè)的維護(hù)和結(jié)構(gòu)完整都有很大好處，同時(shí)對(duì)搜索引擎的優(yōu)化也有很大的意義2021/5/913左側(cè)列和右側(cè)列的視覺(jué)設(shè)計(jì)2021/5/914七、交互效果設(shè)計(jì)1.為“常用下載”設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)效果#sidebar.downboxlia:hover{background:#ffeeeeurl(images/bullet2.gif)no-repeat10pxcenter;/*注意同時(shí)改變了背景顏色和作為小圖標(biāo)的背景圖像*/color:#cc6633; /*改變文字顏色*/}2021/5/915七、交互效果設(shè)計(jì)2.當(dāng)鼠標(biāo)經(jīng)過(guò)一張展示圖片時(shí)，圖像的邊框顏色由土黃色變?yōu)樗{(lán)色，背景色也由白色變?yōu)樗{(lán)色3.解決IE6中的bug2021/5/