網(wǎng)站規(guī)劃課件

第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)第15章網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計前面各章主要學(xué)習(xí)了網(wǎng)頁制知識技能目標（1）掌握網(wǎng)站的開發(fā)流程，了解網(wǎng)站的規(guī)劃與組織。（2）掌握網(wǎng)頁設(shè)計的基本原理與方法。（3）掌握網(wǎng)頁設(shè)計的規(guī)范。知識技能目標（1）掌握網(wǎng)站的開發(fā)流程，了解網(wǎng)站的規(guī)網(wǎng)頁瀏覽效果展示“長沙世界之窗”旅游網(wǎng)站首頁index.html的瀏覽效果如圖15-1所示。圖15-1“長沙世界之窗”網(wǎng)站首頁的瀏覽效果網(wǎng)頁瀏覽效果展示“長沙世界之窗”旅游網(wǎng)站首頁ind本章操作任務(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)化。本章操作任務(wù)（1）在站點“長沙世界之窗”下創(chuàng)建文件夾“15.1網(wǎng)站的規(guī)劃與開發(fā)流程15.2網(wǎng)頁的設(shè)計原理與技巧15.1網(wǎng)頁設(shè)計的規(guī)范15.1網(wǎng)站的規(guī)劃與開發(fā)流程15.2網(wǎng)頁的設(shè)計原理與技巧1515.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ā)流程15.1網(wǎng)站的規(guī)劃與開發(fā)流程網(wǎng)站的基本開發(fā)流程如下：15第二個階段：網(wǎng)頁設(shè)計、制作階段（1）網(wǎng)站總體設(shè)計（2）設(shè)計界面、制作網(wǎng)站中的各個網(wǎng)頁（3）將各個網(wǎng)頁通過超鏈接進行整合第二個階段：網(wǎng)頁設(shè)計、制作階段第三個階段：網(wǎng)站的發(fā)布、推廣與維護階段（1）測試、調(diào)試與完善網(wǎng)站（2）發(fā)布與推廣網(wǎng)站（3）維護與更新網(wǎng)站第三個階段：網(wǎng)站的發(fā)布、推廣與維護階段1．網(wǎng)站需求分析15.1.2網(wǎng)站規(guī)劃與組織網(wǎng)站是向瀏覽者提供信息的一種方式，必須明確設(shè)計網(wǎng)站的目的和用戶需求，從而做出切實可行的設(shè)計計劃，網(wǎng)站設(shè)計的第一步就是進行網(wǎng)站需求分析。1．網(wǎng)站需求分析15.1.2網(wǎng)站規(guī)劃與組織網(wǎng)站是向瀏覽在著手設(shè)計網(wǎng)站之前，要確定好網(wǎng)站的主題。主題是網(wǎng)站的靈魂，它決定網(wǎng)站的內(nèi)容和形式。沒有主題的網(wǎng)站會雜亂無章。網(wǎng)站名稱要合法、合情、合理。名稱要有特色，體現(xiàn)一定的內(nèi)涵。2．策劃網(wǎng)站主題和內(nèi)容在著手設(shè)計網(wǎng)站之前，要確定好網(wǎng)站的主題。主題是網(wǎng)站的

確定好網(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è)計、顏色搭配也各有特點。網(wǎng)站風(fēng)格通過網(wǎng)站中的頁面來體現(xiàn)的，最主要的是通過首頁來體現(xiàn)的。具體包括頁面的版式結(jié)構(gòu)、色彩搭配、圖像動畫的使用等方面。3．規(guī)劃網(wǎng)站風(fēng)格確定好網(wǎng)站的主題后，就要根據(jù)該主題確定網(wǎng)站的風(fēng)格，網(wǎng)站規(guī)劃網(wǎng)站結(jié)構(gòu)首先要建立一張站點圖，站點圖中包括站點所有的關(guān)鍵頁面、它們之間的相互鏈接關(guān)系等。一個優(yōu)秀的網(wǎng)站應(yīng)該結(jié)構(gòu)清晰、導(dǎo)航簡單方便，瀏覽者能夠快速準確地找到自己需要的信息。4．規(guī)劃網(wǎng)站結(jié)構(gòu)規(guī)劃網(wǎng)站結(jié)構(gòu)首先要建立一張站點圖，站點圖中包括站點所有（1）規(guī)劃網(wǎng)站的欄目結(jié)構(gòu)劃分信息的方法有兩種：一種是自頂向下劃分：按照從上到下、從粗到細的原則劃分信息塊，以確定網(wǎng)站的內(nèi)容結(jié)構(gòu)。另一種是自下而上劃分：先將所有信息羅列出來，然后向上分類，形成站點的內(nèi)容結(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子目錄目錄的層次不要太深，不要使用中文目錄名（2）規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)不要將所有文件都存放在根目錄下（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)混合使用。（3）規(guī)劃網(wǎng)站的鏈接結(jié)構(gòu)15.2網(wǎng)頁的設(shè)計原理與技巧1．用戶致上原則2．易用性原則3．實用性原則15.2.1網(wǎng)頁設(shè)計的基本原則15.2網(wǎng)頁的設(shè)計原理與技巧1．用戶致上原則15.2.11．網(wǎng)頁版式類型15.2.2網(wǎng)頁版面布局設(shè)計（1）“國”字型一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。

（2）拐角型這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側(cè)是導(dǎo)航鏈接。1．網(wǎng)頁版式類型15.2.2網(wǎng)頁版面布局設(shè)計（1）“國”字（3）上下型這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。（4）左右框架型這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標題或Logo，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。

（5）上下框架型與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架

（3）上下型（6）綜合框架型上兩種結(jié)構(gòu)的結(jié)合，相對復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。

（7）封面型這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。

（8）Flash動畫型其實這與封面型結(jié)構(gòu)是類似的，只是這種類型采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富。

（6）綜合框架型網(wǎng)頁頁面內(nèi)容主要包括文字和圖像，文字又分為標題和正文，主要考慮以下幾點：（1）主次分明、中心突出（2）大小搭配、相互呼應(yīng)（3）圖文并茂、相得益彰（4）適當(dāng)留空、清晰易讀2．網(wǎng)頁頁面內(nèi)容的編排網(wǎng)頁頁面內(nèi)容主要包括文字和圖像，文字又分為標題和正文（1）利用留空和劃線進行分塊（2）利用色塊進行分塊（3）利用線框分塊3．網(wǎng)頁版面內(nèi)容的分塊（1）利用留空和劃線進行分塊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è)計Logo是網(wǎng)站的標志、名片，如同商標一樣，Logo是（1）網(wǎng)站有代表性的人物、動物、花草，可以用它們作為設(shè)計藍本，加以卡通化和藝術(shù)化。（2）網(wǎng)站有代表性的物品，可以用物品作為標志。（3）用自己網(wǎng)站的英文名稱作標志，采用不同的字體、字母的變形制作標志。（1）網(wǎng)站有代表性的人物、動物、花草，可以用它們作為設(shè)計★課堂實踐★打開網(wǎng)站“課堂實踐”文件夾“16網(wǎng)頁設(shè)計”中網(wǎng)頁文檔“16.html”，運用本章所介紹的方法和技巧對該網(wǎng)頁的頁面布局、顏色搭配、文字圖像進行合理調(diào)整和優(yōu)化。然后瀏覽其效果，直到自己認為滿意為止?！镎n堂實踐★打開網(wǎng)站“課堂實踐”文件夾“16網(wǎng)頁設(shè)（1）特色鮮明（2）搭配合理（3）講究藝術(shù)性（4）合理使用鄰近色（5）合理使用對比色（6）巧妙使用背景色（7）嚴格控制色彩的數(shù)量4．頁面色彩的搭配技巧15.2.4網(wǎng)頁色彩設(shè)計（1）特色鮮明4．頁面色彩的搭配技巧15.2.4網(wǎng)頁色彩設(shè)15.2.5網(wǎng)頁導(dǎo)航設(shè)計導(dǎo)航是網(wǎng)站設(shè)計不可缺少的元素之一，它不僅僅是信息結(jié)構(gòu)的基礎(chǔ)分類也是瀏覽者瀏覽網(wǎng)站的路標。導(dǎo)航作為頁面的重要視覺元素，放置在明顯、易找的區(qū)域是必要，讓瀏覽者進入網(wǎng)站第一時間就可以看到它。導(dǎo)航設(shè)計的目標是方便用戶瀏覽，結(jié)構(gòu)應(yīng)當(dāng)十分清晰。15.2.5網(wǎng)頁導(dǎo)航設(shè)計導(dǎo)航是網(wǎng)站設(shè)計不可缺少的元導(dǎo)航樣式有很多，包括橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖片式導(dǎo)航、下拉菜單導(dǎo)航、隱藏式導(dǎo)航等。網(wǎng)站導(dǎo)航的表現(xiàn)形式主要有：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。導(dǎo)航樣式有很多，包括橫排導(dǎo)航、豎排導(dǎo)航、多排導(dǎo)航、圖（1）菜單菜單是網(wǎng)站最常見的導(dǎo)航方法，一個好的菜單系統(tǒng)關(guān)鍵在于能適應(yīng)網(wǎng)站的層次需要，并且容易讓瀏覽者理解網(wǎng)站的結(jié)構(gòu)。（1）菜單（2）站內(nèi)搜索引擎站內(nèi)搜索引擎提供了一種主動查詢方式，瀏覽者只要把自己需要尋找的內(nèi)容的關(guān)鍵字輸入到搜索引擎中，網(wǎng)站將自動地查找出站內(nèi)符合條件的頁面，這是一種人性化的做法。（2）站內(nèi)搜索引擎（3）當(dāng)前瀏覽位置所謂“當(dāng)前瀏覽位置”就是在網(wǎng)站的每個頁面中加入當(dāng)前位置的文字說明并逐級加入鏈接。（3）當(dāng)前瀏覽位置15.2.6網(wǎng)頁頁面元素設(shè)計1．頁面標題設(shè)計頁面標題相當(dāng)于商店的招牌，標題通常位于頁面的上端或中央，清楚明確地表示出來。（1）標題大小、粗細要合適（2）標題使用鮮艷的色彩（3）利用空間突出標題15.2.6網(wǎng)頁頁面元素設(shè)計1．頁面標題設(shè)計頁面標（1）文字字體的選擇網(wǎng)頁中正文文本一般可使用系統(tǒng)默認的中文字體和西文字體，若需使用特殊字體，一般把使用了特殊字體的對象制作成圖片。常用的中文字體有宋體、黑體、楷體、仿宋體、行書、隸書、魏碑等，常用英文字體有TimesNewRoman、Arial、Impact等2．頁面中文字設(shè)計（1）文字字體的選擇2．頁面中文字設(shè)計（2）文字粗細的確定文字變細會顯得十分優(yōu)美，反之將文字變粗會顯得有力。（3）文字字號的確定對于網(wǎng)頁中正文文本，其字號一般設(shè)置為10～12磅；對于網(wǎng)頁中版權(quán)聲明等文本一般設(shè)置為9～10磅；對于網(wǎng)頁中標題文本，一般設(shè)置為12～18磅。（4）文字的字間距和行間距網(wǎng)頁中文本的字間距和行間距在某種程度上會改變訪問者的閱讀心理。（2）文字粗細的確定網(wǎng)頁中圖像在信息傳達上應(yīng)用具備以下功能：（1）要有良好的視覺吸引力，能吸引瀏覽者的注意力。（2）要簡潔明確地傳達網(wǎng)站信息，能使人們一目了然地抓住網(wǎng)站信息的重點。（3）要有強而有力的誘導(dǎo)作用，造成鮮明的視覺感受效果，從觀看過程中產(chǎn)生愿望和欲求。3．頁面中圖像應(yīng)用網(wǎng)頁中圖像在信息傳達上應(yīng)用具備以下功能：3．頁面中圖對圖像的處理主要包括以下幾個方面：（1）圖像的外形處理（2）圖像的面積處理（3）圖像的數(shù)量處理（4）圖像的背景處理對圖像的處理主要包括以下幾個方面：在網(wǎng)頁中使用圖像應(yīng)注意下面幾點：（1）首頁最好有Logo，主要圖像（2）圖像最好有一定的實際作用，減少裝飾性圖像的比例，以突出主題（3）圖像要清晰（4）為圖像加替代文字在網(wǎng)頁中使用圖像應(yīng)注意下面幾點：15.3網(wǎng)頁設(shè)計的規(guī)范1．網(wǎng)頁的寬度15.3.1網(wǎng)頁版面尺寸規(guī)范目前我國的網(wǎng)絡(luò)用戶，大部分使用15英寸和17英寸顯示器，采用1024×768分辨率的用戶最多，為了考慮這部分瀏覽者的需要，制作網(wǎng)頁時一般按照1024×768（單位為像素）分辨率的規(guī)格來設(shè)計，頁面寬度不超過1屏。15.3網(wǎng)頁設(shè)計的規(guī)范1．網(wǎng)頁的寬度15.3.1網(wǎng)頁版面從理論上來講網(wǎng)頁的長度可以無限長的，但一般不宜超過3屏，最佳長度為1.8～2.5屏。2．網(wǎng)頁的長度從理論上來講網(wǎng)頁的長度可以無限長的，但一般不宜超過3屏一般地，網(wǎng)站的首頁大?。òㄋ袌D像、文本、多媒體對象）不宜超過30KB，網(wǎng)站的二級頁面的文件（包括所有圖像、文本、多媒體對象）不宜超過45KB。如果網(wǎng)頁大太，網(wǎng)頁下載的速度會變慢，影響瀏覽速度。3．網(wǎng)頁文件大小一般地，網(wǎng)站的首頁大?。òㄋ袌D像、文本、多媒體對象廣告尺寸應(yīng)為標準尺寸，全尺寸banner不超過14KB。4．廣告尺寸廣告尺寸應(yīng)為標準尺寸，全尺寸banner不超過14KB15.3.2文件夾、文件命名規(guī)范主要命名規(guī)則有：（1）文件夾命名一般采用英文小寫字母，特殊情況可以使用中文拼音，常見的文件夾命