網(wǎng)頁設(shè)計(jì)與制作綜合網(wǎng)站規(guī)劃與設(shè)計(jì)授課教師：喬振華HTMLCSSJavaScript目錄CONTENTS1網(wǎng)站開發(fā)制作流程2定位網(wǎng)站主題3素材的收集整理4網(wǎng)站導(dǎo)航的設(shè)計(jì)5網(wǎng)站的布局設(shè)計(jì)6小結(jié)知識(shí)點(diǎn)講解

01綜合網(wǎng)站的制作開發(fā)流程是什么？

02如何確定網(wǎng)站的主題風(fēng)格？

03常見的網(wǎng)頁布局有哪些？思考網(wǎng)站開發(fā)制作流程011、網(wǎng)站開發(fā)制作流程網(wǎng)站建設(shè)是一個(gè)系統(tǒng)工程，有一定的基本流程，必須遵循相應(yīng)的設(shè)計(jì)步驟才能設(shè)計(jì)出令客戶滿意的網(wǎng)站。因此，在進(jìn)行網(wǎng)站建設(shè)前，有必要了解整個(gè)網(wǎng)站建設(shè)的基本流程，才能制作出更好更合理的網(wǎng)站。網(wǎng)站開發(fā)制作流程如下圖所示02定位網(wǎng)站主題2、定位網(wǎng)站主題在制作設(shè)計(jì)一個(gè)網(wǎng)站的時(shí)候，首先遇到的問題就是定位網(wǎng)站主題。所謂主題就是網(wǎng)站的內(nèi)容屬于哪種類型的題材，這就需要對(duì)市場進(jìn)行調(diào)研與分析，了解目前互聯(lián)網(wǎng)的發(fā)展?fàn)顩r及同類型網(wǎng)站的發(fā)展、經(jīng)營情況，汲取這些網(wǎng)站的特點(diǎn)，發(fā)揮自己的優(yōu)勢，進(jìn)而確定自己網(wǎng)站的功能，在根據(jù)網(wǎng)站功能確定網(wǎng)站應(yīng)到達(dá)的目的和應(yīng)起到的作用，確定網(wǎng)站的名稱。

確定了網(wǎng)站的主題，就要確定網(wǎng)站的名稱，網(wǎng)站的名稱很重要，它是網(wǎng)站主題的概況和濃縮，決定著網(wǎng)站是否更容易被人接受。所以網(wǎng)站的名稱一定要簡短有特色，容易被用戶記住且能體現(xiàn)出一定的內(nèi)涵，這樣才會(huì)給瀏覽者更多的想象力和沖擊力。2、定位網(wǎng)站主題03素材的收集整理3、素材的收集整理素材的收集整理網(wǎng)站的主要內(nèi)容是文本、圖像和多媒體，構(gòu)成了網(wǎng)站的主體內(nèi)容。否則，沒有一個(gè)好的結(jié)構(gòu)設(shè)計(jì)達(dá)到網(wǎng)站設(shè)計(jì)的初衷，就無法吸引用戶。在網(wǎng)站主題確定之后，我們需要對(duì)每個(gè)頁面的內(nèi)容做一個(gè)大致的規(guī)劃和設(shè)計(jì)，比如哪些頁面需要使用模板，哪些頁面需要使用特殊設(shè)計(jì)的圖像，哪些頁面需要使用更動(dòng)態(tài)的效果，如何設(shè)計(jì)菜單，使用什么樣的鏈接樣式，使用什么顏色和樣式的頁面等等，所有這些都對(duì)資源的收集起著引導(dǎo)作用。3、素材的收集整理>文本素材。文本內(nèi)容可以讓瀏覽者明白網(wǎng)頁要表達(dá)的內(nèi)容，可以通過多種途徑獲取文本素材，比如企業(yè)、用戶，也可以通過權(quán)威性的官網(wǎng)、書籍等途徑收集，還可以由制作者自己編輯文字材料。>圖片素材。例如，企業(yè)的標(biāo)志、網(wǎng)頁的背景圖像等，這些圖像對(duì)觀看者的視覺有很大的影響，可以自己拍攝制作，可以根據(jù)企業(yè)要求制作。3、素材的收集整理>庫文件。對(duì)于一些常見和重要的網(wǎng)頁對(duì)象，需要管理和使用庫文件。在設(shè)計(jì)網(wǎng)頁之前，可以編輯這些庫文件以備將來用。>Flash和其他多媒體元素。Flash和其他多媒體元素在許多網(wǎng)站中使用越來越多，這些多媒體元素需要在網(wǎng)頁設(shè)計(jì)之前正確收集或生成。04網(wǎng)站導(dǎo)航的設(shè)計(jì)4、網(wǎng)站導(dǎo)航的設(shè)計(jì)導(dǎo)航菜單是網(wǎng)站主要內(nèi)容或特征的列表，通常由一組鏈接或icon組成，并在視覺樣式上與網(wǎng)站其他內(nèi)容有顯著差異。導(dǎo)航菜單對(duì)于一個(gè)網(wǎng)站來說是非常重要的，它可以讓頁面瀏覽變得更容易，如果沒有一個(gè)好的導(dǎo)航欄，即使網(wǎng)頁做的再怎么好，也會(huì)給瀏覽者造成很差的體驗(yàn)。

那么在設(shè)計(jì)導(dǎo)航欄的時(shí)候，我們需要注意以下幾個(gè)原則：1.導(dǎo)航菜單要清晰可見；2.導(dǎo)航菜單要易于操作；3.謹(jǐn)慎選擇導(dǎo)航欄的方向。05網(wǎng)站的布局設(shè)計(jì)5、網(wǎng)站的布局設(shè)計(jì)（1）網(wǎng)頁布局網(wǎng)頁布局在很大程度上決定了網(wǎng)站的訪問者將如何與網(wǎng)頁內(nèi)容進(jìn)行交互。不同的網(wǎng)頁布局帶來的交互體驗(yàn)是不一樣的，因此網(wǎng)頁的設(shè)計(jì)常常需要根據(jù)不同的產(chǎn)品特點(diǎn)選擇不同的網(wǎng)頁布局，由此獲得良好的用戶體驗(yàn)。網(wǎng)頁布局元素一般包括：01網(wǎng)站名稱02導(dǎo)航欄03主圖內(nèi)容04側(cè)邊區(qū)05搜索區(qū)06友情鏈接07版權(quán)5、網(wǎng)站的布局設(shè)計(jì)（1）網(wǎng)頁布局網(wǎng)站的風(fēng)格大部分是各不相同，但是布局都有一定的規(guī)律，常見的網(wǎng)站布局形式有八種:拐角型布局2標(biāo)題正文型布局3封面型布局4“T”結(jié)構(gòu)布局5“口”型布局6對(duì)稱對(duì)比布局7POP布局8“國”字型布局15、網(wǎng)站的布局設(shè)計(jì)（2）網(wǎng)站的色彩搭配網(wǎng)頁中的色彩搭配設(shè)計(jì)影響著網(wǎng)站的美觀度，也是帶給瀏覽者的第一視覺上的沖擊，因此，確定網(wǎng)站的色彩是非常重要的一步，不同的顏色搭配可能會(huì)影響到瀏覽者的情緒，賞心悅目的色彩搭配才能吸瀏覽者停留在網(wǎng)站上瀏覽信息。在具體的網(wǎng)頁設(shè)計(jì)中，色彩搭配可以參考一下幾個(gè)原則：原則1色彩的鮮明性原則3色彩的藝術(shù)性原則2色彩的獨(dú)特性原則4色彩搭配的合理性06小結(jié)今天的內(nèi)容已經(jīng)學(xué)完了，大家對(duì)網(wǎng)站的設(shè)計(jì)與制作流程也有了一定了解。同時(shí)也希望大家能夠做一次反思，在平時(shí)的生活學(xué)習(xí)中，如何去合理規(guī)劃自己的