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

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