網(wǎng)頁面布局設(shè)計PPT課件

1、網(wǎng)站內(nèi)容的規(guī)劃與腳本編寫 目前，全世界的網(wǎng)站總數(shù)已經(jīng)超過了6000萬個，如何使自己的網(wǎng)站能夠在眾多的網(wǎng)站中脫穎而出，令人刮目相看，關(guān)鍵是提升網(wǎng)站的知名度和訪問率，而對網(wǎng)站內(nèi)容進行詳細的規(guī)劃和注重網(wǎng)絡(luò)應(yīng)用則是提高網(wǎng)站訪問率的重要因素。從最新的網(wǎng)絡(luò)統(tǒng)計分析報告中得知，網(wǎng)站訪問率的78%來自于搜索引擎，而網(wǎng)站在搜索引擎中的排名與網(wǎng)站的內(nèi)容有很大的關(guān)系。第1頁/共60頁 網(wǎng)站內(nèi)容規(guī)劃是進行網(wǎng)頁設(shè)計的第一步，寫好內(nèi)容腳本是十分關(guān)鍵的。下面我們分別對“.com”、“.net”、“.edu”、“.gov”為后綴的網(wǎng)站進行分析，學會網(wǎng)站腳本的編寫。第2頁/共60頁教育科研網(wǎng)站的規(guī)劃 教育科研網(wǎng)站是指那些針對特

2、定的人群，圍繞特定的學習主題、教科研主題、學習素材類事物主題，完成特定信息的搜索和提供、組織與發(fā)布，或者提供互動學習平臺的教育類網(wǎng)站，其最高層域名一般為“.edu”。 教育科研網(wǎng)站的內(nèi)容主要是圍繞教學和科研來進行的，突出教師和學生的地位，據(jù)此畫出具體的信息結(jié)構(gòu)圖。第3頁/共60頁第4頁/共60頁政府網(wǎng)站的規(guī)劃 政府網(wǎng)站是指以政府機構(gòu)為主體構(gòu)建的網(wǎng)站，主要為政府稅收和政府公共服務(wù)提供網(wǎng)絡(luò)化的交流平臺，并且通過網(wǎng)絡(luò)增加政府與百姓交流的渠道，聽取百姓的心聲和意見，提高政府機關(guān)的辦事效率。其最高層域名一般為“.gov”。 政府機關(guān)網(wǎng)站的內(nèi)容主要從省市概況、政府管理、政府監(jiān)督、便民服務(wù)等幾個方面來進行設(shè)

3、計，據(jù)此畫出具體的信息結(jié)構(gòu)圖腳本。 第5頁/共60頁第6頁/共60頁企業(yè)機構(gòu)網(wǎng)站的規(guī)劃 企業(yè)機構(gòu)網(wǎng)站是指以企業(yè)單位為主體而構(gòu)建的網(wǎng)站，其目的是為了利用網(wǎng)絡(luò)宣傳企業(yè)形象，展示企業(yè)文化，推銷企業(yè)產(chǎn)品，拓寬企業(yè)的營銷渠道。其最高層域名一般為“.com”。 企業(yè)機構(gòu)網(wǎng)站的內(nèi)容一般從企業(yè)介紹、產(chǎn)品展示、售后服務(wù)等方面來進行設(shè)計，參照若干企業(yè)網(wǎng)站畫出企業(yè)網(wǎng)站的內(nèi)容結(jié)構(gòu)圖。第7頁/共60頁第8頁/共60頁服務(wù)機構(gòu)網(wǎng)站的規(guī)劃 服務(wù)機構(gòu)網(wǎng)站是指以服務(wù)機構(gòu)為主體構(gòu)建的網(wǎng)站，包括商業(yè)服務(wù)機構(gòu)網(wǎng)站、金融服務(wù)機構(gòu)網(wǎng)站、郵政通信服務(wù)機構(gòu)網(wǎng)站、家政服務(wù)機構(gòu)網(wǎng)站、休閑娛樂服務(wù)機構(gòu)網(wǎng)站、行業(yè)機構(gòu)網(wǎng)站等。其最高層域名一般為“.n

4、et”，少數(shù)為 “.com”。 服務(wù)機構(gòu)網(wǎng)站的內(nèi)容主要從ISP因特網(wǎng)內(nèi)容接入服務(wù)、ICP因特網(wǎng)內(nèi)容提供服務(wù)、ASP因特網(wǎng)內(nèi)容應(yīng)用服務(wù)這三個方面來進行設(shè)計，據(jù)此畫出具體的信息結(jié)構(gòu)圖腳本。第9頁/共60頁第10頁/共60頁網(wǎng)頁版面布局設(shè)計 版面指的是從瀏覽器看到的完整的一個頁面（可以包含框架和層）。 由于不同的瀏覽者所擁有的顯示器的分辨率不一致，所以在設(shè)計網(wǎng)頁的時候要考慮到瀏覽者的實際情況。目前常見的網(wǎng)頁所采用的分辨率有：640*480像素、800*600像素、1024*768像素等。第11頁/共60頁網(wǎng)頁布局 以最適合瀏覽的方式將圖片和文字擺放在頁面的不同位置。 網(wǎng)頁布局的基本原理是共通的，只要

5、領(lǐng)會要點，就能夠舉一反三。第12頁/共60頁創(chuàng)作階段打草稿 新建的頁面就像一張白紙，沒有任何表格、框架和約定俗成的東西，我們可以任意發(fā)揮自己的想象力，把想到的“景象”畫上去（建議用一張白紙和一支鉛筆，當然用圖像處理軟件Fireworks MX等也可以）。這屬于創(chuàng)作階段，不講究細膩工整，不必考慮細節(jié)功能，只以粗略的線條勾畫出創(chuàng)意的輪廓即可。盡可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。 第13頁/共60頁布局的草稿第14頁/共60頁粗略布局 在草稿的基礎(chǔ)上將確定需要放置的功能模塊安排到頁面上。遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標志、主菜單等最重要的模塊放在最顯眼、最突出的位置上，然后再

6、考慮次要模塊的排放。 一般情況下，將網(wǎng)站的LOGO、導航條等元素放在屏幕左邊顯眼的位置上，訪問者在瀏覽網(wǎng)頁時可以對網(wǎng)站內(nèi)容一目了然。 第15頁/共60頁“星火網(wǎng)”首頁的粗略布局圖第16頁/共60頁最終定案 將粗略布局精細化，具體化。憑借智慧和經(jīng)驗，多方聯(lián)想，才能做出具有創(chuàng)意的布局。第17頁/共60頁“星火網(wǎng)”首頁的最終定案圖第18頁/共60頁網(wǎng)頁版面布局的原則 （1）正常平衡亦稱“勻稱”，多指左右、上下對照形式，主要強調(diào)秩序，能達到安定誠實、信賴的效果。 （2）異常平衡即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調(diào)性、不安性、高注目性的效果。第19頁/共60頁網(wǎng)頁版面布局

7、的原則 （3）對比所謂對比，不僅利用色彩、色調(diào)等技巧來進行表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等對比。 （4）凝視所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。第20頁/共60頁網(wǎng)頁版面布局的原則 （5）空白空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品位的優(yōu)越感，這種表現(xiàn)方法對體現(xiàn)網(wǎng)頁的格調(diào)十分有效。 （6）盡量用圖片解說此方法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內(nèi)容，可以傳達給瀏覽者更多的信息。第21頁/共60頁網(wǎng)頁版面布局的樣式 就像傳統(tǒng)的報刊雜志一樣，我們可以將頁面看作一張報紙或一本

8、雜志中的一頁來進行排版布局。設(shè)計版面時要把文字、圖片、空白當作一個整體來看待，采用平面分割的方式，調(diào)動全部面積來構(gòu)建這個版面。下面我們來探討一下頁面布局的樣式。 第22頁/共60頁左右對齊方式布局 左右對齊方式滿載著文字信息，沒有浪費空間的感覺，是最適合傳遞商業(yè)性信息的樣式。 第23頁/共60頁全景式布局 全景式分散排列多張圖片，看起來就像在瞭望臺上看全景畫，訪問者可以自由、閑庭信步地參與進來。 第24頁/共60頁全景式布局第25頁/共60頁包圍式布局 包圍式布局的基本思路是頁面四周用色塊或圖案包圍起來，以便產(chǎn)生一個被限定的世界。如果色塊或圖案是深重的顏色，則表示這個范圍拒絕他人入侵，如果是淺

9、色調(diào)，則表示這是一個柔和的世界。 第26頁/共60頁包圍式布局第27頁/共60頁對稱式布局 對稱式布局的基本思路是以中心線為基準，左右對稱，是一種格調(diào)高雅的安定型版式。第28頁/共60頁第29頁/共60頁第30頁/共60頁第31頁/共60頁第32頁/共60頁單側(cè)對齊式布局單側(cè)對齊式布局的基單側(cè)對齊式布局的基本思路是以左則對本思路是以左則對齊為基調(diào)，將右側(cè)齊為基調(diào)，將右側(cè)散開，一般用在追散開，一般用在追求理智和自由感適求理智和自由感適當?shù)钠胶鈭龊?，既當?shù)钠胶鈭龊?，既暗示了頁面的格調(diào)，暗示了頁面的格調(diào)，也傳達了自由的氣也傳達了自由的氣氛。氛。 第33頁/共60頁衛(wèi)星式布局衛(wèi)星式以指太衛(wèi)星式以指太陽

10、為中心的衛(wèi)陽為中心的衛(wèi)星環(huán)繞型，傳星環(huán)繞型，傳遞出家庭的印遞出家庭的印象，讓訪問者象，讓訪問者沉浸在可以自沉浸在可以自由參與的開放由參與的開放感中。感中。第34頁/共60頁散開式布局散開式具有山水散開式具有山水畫般的自由和優(yōu)畫般的自由和優(yōu)雅，不同的國家，雅，不同的國家，在散開式的構(gòu)成在散開式的構(gòu)成設(shè)計上有不同特設(shè)計上有不同特征，西方人講究征，西方人講究左右平衡，日本左右平衡，日本以追求典雅感為以追求典雅感為目的。目的。 第35頁/共60頁照片組合式布局一張照片單獨看起來可能無趣，但在一組照片組合之后就可能產(chǎn)生了新的情趣，照片組合式與全景式共同創(chuàng)造出一種自發(fā)來去自由的輕松氣氛。 第36頁/共60頁第37頁/共60頁第38頁/共60頁第39頁/共60頁第40頁/共60頁第41頁/共60頁第42頁/共60頁第43頁/共60