網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程電子教案9單元

第15章網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)前面各章主要學(xué)習(xí)了網(wǎng)頁(yè)制作的技術(shù)和方法，要制作出優(yōu)美的網(wǎng)頁(yè)，首先應(yīng)對(duì)網(wǎng)站進(jìn)行規(guī)劃，對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)。設(shè)計(jì)網(wǎng)頁(yè)應(yīng)遵循一定的規(guī)則，學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)必須了解網(wǎng)頁(yè)設(shè)計(jì)的基本原理和方法，為網(wǎng)頁(yè)設(shè)計(jì)和制作提供理論指導(dǎo)和方法支持。課程引導(dǎo)知識(shí)技能目標(biāo)（1）掌握網(wǎng)站的開(kāi)發(fā)流程，了解網(wǎng)站的規(guī)劃與組織。（2）掌握網(wǎng)頁(yè)設(shè)計(jì)的基本原理與方法。網(wǎng)頁(yè)瀏覽效果展示“長(zhǎng)沙世界之窗”旅游網(wǎng)站首頁(yè)index.html的瀏覽效果如圖15-1所示。圖15-1“長(zhǎng)沙世界之窗”網(wǎng)站首頁(yè)的瀏覽效果本章操作任務(wù)（1）在站點(diǎn)“長(zhǎng)沙世界之窗”下創(chuàng)建文件夾“16網(wǎng)頁(yè)設(shè)計(jì)”，在該文件夾中創(chuàng)建一個(gè)命名為“index.html”的網(wǎng)頁(yè)（2）運(yùn)用本章所學(xué)習(xí)的方法和技巧對(duì)該網(wǎng)頁(yè)15.html的頁(yè)面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。15.1網(wǎng)站的規(guī)劃與開(kāi)發(fā)流程15.2網(wǎng)頁(yè)的設(shè)計(jì)原理與技巧15.1網(wǎng)站的規(guī)劃與開(kāi)發(fā)流程網(wǎng)站的基本開(kāi)發(fā)流程如下：第一個(gè)階段：規(guī)劃和準(zhǔn)備階段（1）需求分析、決定網(wǎng)站的主題、風(fēng)格（2）收集資料、準(zhǔn)備素材并進(jìn)行整理修改（3）規(guī)劃網(wǎng)站結(jié)構(gòu)和頁(yè)面版式15.1.1網(wǎng)站的開(kāi)發(fā)流程第二個(gè)階段：網(wǎng)頁(yè)設(shè)計(jì)、制作階段（1）網(wǎng)站總體設(shè)計(jì)（2）設(shè)計(jì)界面、制作網(wǎng)站中的各個(gè)網(wǎng)頁(yè)（3）將各個(gè)網(wǎng)頁(yè)通過(guò)超鏈接進(jìn)行整合第三個(gè)階段：網(wǎng)站的發(fā)布、推廣與維護(hù)階段（1）測(cè)試、調(diào)試與完善網(wǎng)站（2）發(fā)布與推廣網(wǎng)站（3）維護(hù)與更新網(wǎng)站1．網(wǎng)站需求分析15.1.2網(wǎng)站規(guī)劃與組織網(wǎng)站是向?yàn)g覽者提供信息的一種方式，必須明確設(shè)計(jì)網(wǎng)站的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)計(jì)劃，網(wǎng)站設(shè)計(jì)的第一步就是進(jìn)行網(wǎng)站需求分析。在著手設(shè)計(jì)網(wǎng)站之前，要確定好網(wǎng)站的主題。網(wǎng)站名稱要合法、合情、合理2．策劃網(wǎng)站主題和內(nèi)容確定好網(wǎng)站的主題后，就要根據(jù)該主題確定網(wǎng)站的風(fēng)格，網(wǎng)站風(fēng)格是指網(wǎng)站的外觀和表現(xiàn)形式，要明確網(wǎng)站的類型，根據(jù)網(wǎng)站類型確定網(wǎng)格的風(fēng)格，不同類型的網(wǎng)站具有不同的風(fēng)格，版面設(shè)計(jì)、顏色搭配也各有特點(diǎn)。3．規(guī)劃網(wǎng)站風(fēng)格網(wǎng)站風(fēng)格通過(guò)網(wǎng)站中的頁(yè)面來(lái)體現(xiàn)的，最主要的是通過(guò)首頁(yè)來(lái)體現(xiàn)的。具體包括頁(yè)面的版式結(jié)構(gòu)、色彩搭配、圖像動(dòng)畫的使用等方面。規(guī)劃網(wǎng)站結(jié)構(gòu)首先要建立一張站點(diǎn)圖，站點(diǎn)圖中包括站點(diǎn)所有的關(guān)鍵頁(yè)面、它們之間的相互關(guān)主要的鏈接等，設(shè)計(jì)網(wǎng)頁(yè)的主要技術(shù)要點(diǎn)也應(yīng)規(guī)劃好。4．規(guī)劃網(wǎng)站結(jié)構(gòu)（1）規(guī)劃網(wǎng)站的欄目結(jié)構(gòu)劃分信息的方法有兩種：一種是自頂向下劃分，另一種是自下而上劃分。（2）規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)構(gòu)建目錄結(jié)構(gòu)的基本要求有：不要將所有文件都存放在根目錄下按欄目?jī)?nèi)容建立子目錄在每個(gè)主目錄下都建立獨(dú)立的image、flash、music子目錄目錄的層次不要太深（3）規(guī)劃網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)常用的有兩種基本方式：樹(shù)狀鏈接結(jié)構(gòu)同，網(wǎng)狀鏈接結(jié)構(gòu)。實(shí)際應(yīng)用中，將兩種鏈接結(jié)構(gòu)混合使用。15.2網(wǎng)頁(yè)的設(shè)計(jì)原理與技巧1．用戶致上原則2．易用性原則3．實(shí)用性原則15.2.1網(wǎng)頁(yè)設(shè)計(jì)的基本原則1．網(wǎng)頁(yè)版式類型15.2.2網(wǎng)頁(yè)版面布局設(shè)計(jì)（1）“國(guó)”字型（2）拐角型（3）上下型（4）左右框架型（5）上下框架型（6）綜合框架型（7）封面型（8）Flash動(dòng)畫型網(wǎng)頁(yè)頁(yè)面內(nèi)容主要包括文字和圖像，文字又分為標(biāo)題和正文，主要考慮以下幾點(diǎn)：（1）主次分明、中心突出（2）大小搭配、相互呼應(yīng)（3）圖文并茂、相得益彰（4）適當(dāng)留空、清晰易讀2．網(wǎng)頁(yè)頁(yè)面內(nèi)容的編排（1）利用留空和劃線進(jìn)行分塊（2）利用色塊進(jìn)行分塊（3）利用線框分塊3．網(wǎng)頁(yè)版面內(nèi)容的分塊Logo是網(wǎng)站的標(biāo)志、名片，如同商標(biāo)一樣，Logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。Logo標(biāo)志可以是中文、英文字母，也可以是符號(hào)、圖案，還可以是動(dòng)物或者人物等。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自網(wǎng)站的名稱和內(nèi)容，可以分為三個(gè)方面：15.2.3網(wǎng)站標(biāo)志Logo設(shè)計(jì)（1）網(wǎng)站有代表性的人物、動(dòng)物、花草，可以用它們作為設(shè)計(jì)藍(lán)本，加以卡通化和藝術(shù)化。（2）網(wǎng)站有代表性的物品，可以用物品作為標(biāo)志。（3）用自己網(wǎng)站的英文名稱作標(biāo)志，采用不同的字體、字母的變形制作標(biāo)志。★課堂實(shí)踐★打開(kāi)網(wǎng)站“課堂實(shí)踐”文件夾“16網(wǎng)頁(yè)設(shè)計(jì)”中網(wǎng)頁(yè)文檔“16.html”，運(yùn)用本章所介紹的方法和技巧對(duì)該網(wǎng)頁(yè)的頁(yè)面布局、顏色搭配、文字圖像進(jìn)行合理調(diào)整和優(yōu)化。然后瀏覽其效果，直到自己認(rèn)為滿意為止。★課外拓展實(shí)踐★在“湖鐵職院學(xué)院網(wǎng)站”站點(diǎn)文件夾“16網(wǎng)頁(yè)設(shè)計(jì)”中創(chuàng)建網(wǎng)頁(yè)index.html，并運(yùn)用本章所學(xué)習(xí)的方法和技巧對(duì)網(wǎng)頁(yè)的版式結(jié)構(gòu)、導(dǎo)航欄設(shè)計(jì)、顏色搭配、文字效果、網(wǎng)頁(yè)特效等方面進(jìn)行美化、優(yōu)化?！锉菊滦〗Y(jié)★