《網(wǎng)頁(yè)設(shè)計(jì)》課件-1-2網(wǎng)頁(yè)設(shè)計(jì)的流程

網(wǎng)頁(yè)設(shè)計(jì)的流程目錄◎前期策劃組織◎網(wǎng)頁(yè)的制作◎網(wǎng)頁(yè)的測(cè)試01前期策劃組織02網(wǎng)頁(yè)制作03網(wǎng)頁(yè)測(cè)試前期策劃組織1首先要根據(jù)項(xiàng)目需求準(zhǔn)確的定位，明確目標(biāo)。同時(shí)要設(shè)定網(wǎng)站需要包含的模塊，確定網(wǎng)頁(yè)的主題和風(fēng)格，規(guī)劃好網(wǎng)站欄目并進(jìn)而確定網(wǎng)站的色彩、網(wǎng)頁(yè)版面布局。1.明確目標(biāo)，規(guī)劃網(wǎng)站欄目網(wǎng)頁(yè)的配色要跟據(jù)項(xiàng)目的主題去確定色彩，要使用好顏色就要掌握顏色的感情和含義的。紅色橙色黃色綠色藍(lán)色紫色褐色黑色白色灰色2.網(wǎng)頁(yè)配色前期策劃組織1常用的幾個(gè)網(wǎng)頁(yè)的配色的方法。（1）需要考慮整體色系例如：用暖色系的配色方案，可以讓網(wǎng)頁(yè)呈現(xiàn)出溫暖的感覺用冷色系的方案，就會(huì)讓網(wǎng)頁(yè)呈現(xiàn)出清涼、平靜的感覺。2.網(wǎng)頁(yè)配色前期策劃組織1（2）底色與圖形要協(xié)調(diào)使用圖形作為頁(yè)面的主要元素，加強(qiáng)底色與圖形之間必須有明顯的對(duì)比，這樣可以突出頁(yè)面內(nèi)容，將圖形的美感快速傳遞給訪問者。2.網(wǎng)頁(yè)配色前期策劃組織1（3）善用色彩的調(diào)和使用近似色，讓頁(yè)面出現(xiàn)階梯漸變的效果，這就是色彩的調(diào)和。這可以使網(wǎng)頁(yè)避免色彩雜亂，達(dá)到頁(yè)面和諧統(tǒng)一的效果。2.網(wǎng)頁(yè)配色前期策劃組織1（4）善用色彩的對(duì)比色彩對(duì)比是突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺效果的一種常用方法。在進(jìn)行色彩配色時(shí)，通過合理進(jìn)行對(duì)比色的搭配使用，就可以輕易突出重點(diǎn)。2.網(wǎng)頁(yè)配色前期策劃組織1根據(jù)視覺流程,常見版式：水平分割、垂直分割、水平-垂直交叉分割等。3.網(wǎng)頁(yè)的版式前期策劃組織1網(wǎng)頁(yè)的制作21.草圖繪制例如：依據(jù)參考頁(yè)面來繪制的網(wǎng)頁(yè)的框架結(jié)構(gòu)圖網(wǎng)頁(yè)的制作22.草圖轉(zhuǎn)化為網(wǎng)頁(yè)將剛剛規(guī)劃的網(wǎng)頁(yè)，使用常用的網(wǎng)頁(yè)編輯軟件制作成網(wǎng)頁(yè)。常用的網(wǎng)頁(yè)編輯軟件主要分為兩個(gè)類型：純文本編輯工具，例如記事本、Notepade++、HBuilder、eclipse等。所見即所得的網(wǎng)頁(yè)編輯軟件，例如Dreamweaver，同時(shí)要結(jié)合Photoshop圖像處理軟件來制作網(wǎng)頁(yè)的背景、標(biāo)題圖片、按鈕、動(dòng)畫等。網(wǎng)頁(yè)的測(cè)試3

據(jù)瀏覽器的種類、客戶端的要求以及網(wǎng)站的大小進(jìn)行站點(diǎn)測(cè)試，通常是將站點(diǎn)移到一個(gè)模擬調(diào)試服務(wù)器上進(jìn)行測(cè)試或編輯。檢查鏈接功能是否可用。為了使頁(yè)面對(duì)不支持的標(biāo)簽、樣式、插件等在瀏覽器中能兼容