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

第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ì)和制造提供實(shí)際指點(diǎn)和方法支持。課程引導(dǎo)知識(shí)技藝目的〔1〕掌握網(wǎng)站的開(kāi)發(fā)流程，了解網(wǎng)站的規(guī)劃與組織?！?〕掌握網(wǎng)頁(yè)設(shè)計(jì)的根本原理與方法。網(wǎng)頁(yè)閱讀效果展現(xiàn)“長(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è)面規(guī)劃、顏色搭配、文字圖像進(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ī)劃和預(yù)備階段〔1〕需求分析、決議網(wǎng)站的主題、風(fēng)格〔2〕搜集資料、預(yù)備素材并進(jìn)展整理修正〔3〕規(guī)劃網(wǎng)站構(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è)經(jīng)過(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)站是向閱讀者提供信息的一種方式，必需明確設(shè)計(jì)網(wǎng)站的目的和用戶需求，從而做出真實(shí)可行的設(shè)計(jì)方案，網(wǎng)站設(shè)計(jì)的第一步就是進(jìn)展網(wǎng)站需求分析。在著手設(shè)計(jì)網(wǎng)站之前，要確定好網(wǎng)站的主題。網(wǎng)站稱號(hào)要合法、合情、合理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)格經(jīng)過(guò)網(wǎng)站中的頁(yè)面來(lái)表達(dá)的，最主要的是經(jīng)過(guò)首頁(yè)來(lái)表達(dá)的。詳細(xì)包括頁(yè)面的版式構(gòu)造、顏色搭配、圖像動(dòng)畫(huà)的運(yùn)用等方面。規(guī)劃網(wǎng)站構(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)站構(gòu)造〔1〕規(guī)劃網(wǎng)站的欄目構(gòu)造劃分信息的方法有兩種：一種是自頂向下劃分，另一種是自下而上劃分?！?〕規(guī)劃網(wǎng)站的目錄構(gòu)造構(gòu)建目錄構(gòu)造的根本要求有：不要將一切文件都存放在根目錄下按欄目?jī)?nèi)容建立子目錄在每個(gè)主目錄下都建立獨(dú)立的image、flash、music子目錄目錄的層次不要太深〔3〕規(guī)劃網(wǎng)站的鏈接構(gòu)造網(wǎng)站的鏈接構(gòu)造常用的有兩種根本方式：樹(shù)狀鏈接構(gòu)造同，網(wǎng)狀鏈接構(gòu)造。實(shí)踐運(yùn)用中，將兩種鏈接構(gòu)造混合運(yùn)用。15.2網(wǎng)頁(yè)的設(shè)計(jì)原理與技巧1．用戶致上原那么2．易用性原那么3．適用性原那么15.2.1網(wǎng)頁(yè)設(shè)計(jì)的根本原那么1．網(wǎng)頁(yè)版式類型15.2.2網(wǎng)頁(yè)版面規(guī)劃設(shè)計(jì)〔1〕“國(guó)〞字型〔2〕拐角型〔3〕上下型〔4〕左右框架型〔5〕上下框架型〔6〕綜合框架型〔7〕封面型〔8〕Flash動(dòng)畫(huà)型網(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)涵的集中表達(dá)。Logo標(biāo)志可以是中文、英文字母，也可以是符號(hào)、圖案，還可以是動(dòng)物或者人物等。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自網(wǎng)站的稱號(hào)和內(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)志?！?〕用本人網(wǎng)站的英文稱號(hào)作標(biāo)志，采用不同的字體、字母的變形制造標(biāo)志?！镎n堂實(shí)際★翻開(kāi)網(wǎng)站“課堂實(shí)際〞文件夾“16網(wǎng)頁(yè)設(shè)計(jì)〞中網(wǎng)頁(yè)文檔“16.html〞，運(yùn)用本章所引見(jiàn)的方法和技巧對(duì)該網(wǎng)頁(yè)的頁(yè)面規(guī)劃、顏色搭配、文字圖像進(jìn)展合理調(diào)整和優(yōu)化。然后閱讀其效果，直到本人以為稱心為止?！镎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è)的版式構(gòu)造、導(dǎo)航欄設(shè)計(jì)、顏色搭配、文字效果、網(wǎng)頁(yè)特效等方面進(jìn)展美化、優(yōu)化。★本章小結(jié)★