現(xiàn)代網(wǎng)頁設(shè)計與制作研討

1、網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作學習情境1：網(wǎng)站的設(shè)計規(guī)劃2009-7-15教學目標教學目標 知識目標：知識目標： 1了解網(wǎng)站的分類 2了解網(wǎng)站建設(shè)的流程 3了解網(wǎng)站風格設(shè)計的原理 4了解網(wǎng)站布局及欄目能力目標：能力目標： 1能明確網(wǎng)站類型及主題 2能根據(jù)用戶需求設(shè)計網(wǎng)站的總體結(jié)構(gòu)圖 3能確定網(wǎng)站的總體色彩搭配及風格 4完成網(wǎng)站建設(shè)的設(shè)計報告2009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009-7-152009

2、-7-152009-7-152009-7-152009-7-152009-7-152009-7-15 http:/ 確定網(wǎng)站目標2. 考慮用戶群3一個好的網(wǎng)站名4明確的網(wǎng)站標志5確定網(wǎng)站的欄目 6確定網(wǎng)站的目錄結(jié)構(gòu) 7確定網(wǎng)站的鏈接結(jié)構(gòu) 2009-7-15第一步第一步：明確建設(shè)網(wǎng)站目的及功能定位明確建設(shè)網(wǎng)站目的及功能定位2009-7-15第一步：明確建設(shè)網(wǎng)站目的及功能定位第一步：明確建設(shè)網(wǎng)站目的及功能定位 網(wǎng)站定位:就是網(wǎng)站在Internet上扮演什么角色，要向目標群(瀏覽者)傳達什么樣的核心概念，透過網(wǎng)站發(fā)揮什么樣的作用。 網(wǎng)站定位是網(wǎng)站建設(shè)的策略，而網(wǎng)站架構(gòu)、內(nèi)容、表現(xiàn)等都圍繞這些網(wǎng)站定位

3、展開,網(wǎng)站定位的好壞直接決定著網(wǎng)站的前景和規(guī)模。2009-7-15第一步第一步：明確建設(shè)網(wǎng)站目的及功能定位明確建設(shè)網(wǎng)站目的及功能定位1.1.確定網(wǎng)站目標確定網(wǎng)站目標 網(wǎng)站的目標就是網(wǎng)站設(shè)計者根據(jù)自身的實力制定的目標，這應該是網(wǎng)站遠景規(guī)劃，你的網(wǎng)站向哪個方向發(fā)展，發(fā)展空間有多大，預計受眾有哪些，受眾量有多少。 2009-7-15明確建設(shè)網(wǎng)站目的及功能定位明確建設(shè)網(wǎng)站目的及功能定位 福建省國際電子商務中心，以“依托高科技，推廣電子商務，促進信息化”為目標，以服務為唯一的宗旨，為我省外經(jīng)貿(mào)企業(yè)提供全面的國際貿(mào)易電子商務解決方案，全程電子商務應用，承擔技術(shù)支持、技術(shù)培訓及相關(guān)政策指導。 該網(wǎng)站其功能應

4、定位：提供服務的電子商提供服務的電子商務網(wǎng)站。務網(wǎng)站。 2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 一個成功的網(wǎng)站，和實體公司一樣需要總體的形象包裝和設(shè)計準確的，有創(chuàng)意的CI設(shè)計的網(wǎng)站的宣傳推廣有著不可忽略的效果。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 1設(shè)計網(wǎng)站的標志LOGO 網(wǎng)站的標志（LOGO）是一個站點特色和內(nèi)涵集中體現(xiàn)，標志圖形的設(shè)計創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容。它可以是中文、英文字母、可以是符號、圖案、可以是動畫或者人物等。最常見的和最簡單的方式是用自己網(wǎng)站名稱的英文字母作標志，采用不同的字體。2009-7-15第二步：設(shè)計網(wǎng)站的

5、第二步：設(shè)計網(wǎng)站的CI 形象形象 如 IBM公司是以英文字母稍加處理作的標志，新浪網(wǎng)是用字母SINA和一只眼睛作標志 ，奔馳汽車的方向盤標志2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 網(wǎng)站的標志，就如同商標一樣，是站點特色和內(nèi)涵的集中體現(xiàn)，因此在進行網(wǎng)頁標志設(shè)計的時候，要總體考慮整個網(wǎng)站的定位，兼顧各個層次和鏈接的需要，突出自已的網(wǎng)站的經(jīng)營理念，再深入地設(shè)計自已的網(wǎng)站標志，讓大家看見標志就能聯(lián)想起你的站點。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 它表示阿里巴巴不是什么了不起的大公司，我們是跑得比較快一點，但直到今天它仍然還很小，很多事情需

6、要踏踏實實地從小A做起，相信一定會有一天成為行業(yè)的大A。 它還代表了阿里巴巴微笑文化：阿里人不一定要有統(tǒng)一制服但一定要有統(tǒng)一表情。這是對工作上的職業(yè)理解,以苦為樂, 更多也是人生的理解, 人生不如意十之八九, 要有充滿樂趣的探險精神.這樣度過一生會覺得沒有那么辛苦?；厥椎臅r候不記得有多苦,更多的是快樂的橋段.微笑文化蘊含了很多東西，包括對人生的理解。 它表示要讓三種人微笑和滿意，第一客戶賺到錢，企業(yè)有更大的發(fā)展，客戶才會滿意；能夠幫助客戶成功，員工會覺得自己的付出得到肯定，是有價值的，也會滿意有成就感，一家客戶能賺錢員工有歸屬感的公司，業(yè)績一定不會差，最終股東的投資也有高額回報，也會很滿意。

7、2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 福建省國際電子商務中心 的logo 該logo整體看去像一個字母e字，代表著公司是一個從事電子商務的， 小e中心像一條騰飛的龍，寓意著公司的前程將像龍一樣飛黃騰達，將有大的發(fā)展。 字母FIECC是公司名字（Fujian International Electronic Commerce Center）的縮寫。 2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 2選擇網(wǎng)站的標準色彩 網(wǎng)站給人的第一印象來自視覺的色彩感受，確定網(wǎng)站的標準色彩是網(wǎng)站建設(shè)重要的一步，它不但關(guān)系到網(wǎng)站內(nèi)容傳達，而且會影響到瀏覽者的情

8、緒。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 認識色彩2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 紅色-紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色也是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光，也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 網(wǎng)頁顏色的應用機率中，根據(jù)網(wǎng)頁主題內(nèi)容的需求，純粹使用紅色為主色調(diào)的網(wǎng)站相對較

9、少，多用于輔助色、點睛色，達到陪襯、醒目的效果。通常都配以其他顏色調(diào)和。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 綠色-介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 橙色-橙色具有輕快、歡欣、收獲、溫馨、時尚的效果，是快樂、喜悅、能量的色彩。具有健康、富有活力、勇敢自由等象征意義，能給人有莊嚴、尊貴、神秘等

10、感覺。橙色在空氣中的穿透力僅次于紅色，也是容易造成視覺疲勞的顏色。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 黃色-黃色是陽光的色彩，具有活潑與輕快的特點，給人十分年輕的感覺。象征光明、希望、高貴、愉快。淺黃色表示柔弱，灰黃色表示病態(tài)。它的亮度最高，和其他顏色配合很活潑，有溫曖感，具有快樂、希望、智慧和輕快的個性，有希望與功名等象征意義。黃色也代表著土地、象征著權(quán)力，并且還具有神秘的宗教色彩。 2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二

11、步：設(shè)計網(wǎng)站的CI 形象形象 藍色-藍色是色彩中比較沉靜的顏色，它是冷色調(diào)最典型的代表色。象征著永恒與深邃、高遠與博大、壯闊與浩渺，是令人心境暢快的顏色。 藍色的樸實、穩(wěn)重、內(nèi)向性格，襯托那些性格活躍、具有較強擴張力的色彩，運用對比手法，同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當，能構(gòu)成和諧的對比調(diào)和關(guān)系。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 白色-具有潔白，明快，純真，清潔的感受。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 黑色-具有

12、嚴肅、夜晚、穩(wěn)重、深沉，神秘的色彩。2009-7-15第二步第二步：設(shè)計網(wǎng)站的CI 形象 灰色-具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 企業(yè)的標準色，也就是企業(yè)在自己標志、產(chǎn)品及宣傳品等方面統(tǒng)一使用的一個固定的顏色。 如：長虹公司的紅色，IBM的蔚藍色、可口可樂的紅色、聯(lián)想集團的藍色、希望集團的藍色。這些顏色與企業(yè)的形象又經(jīng)融為一體，成為企業(yè)的象征，使人們對它由熟悉了解而產(chǎn)生信任感和認同感。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 國際電子商務中心是一個以提供電子商務技術(shù)服務為主的企業(yè)，而藍

13、色是當前該行業(yè)的流行色，考慮到其的行業(yè)特性，以及色彩的不同心理作用，公司的設(shè)計者最后確定藍色為公司網(wǎng)站的標準色彩，網(wǎng)站的背景色為白色， LOGO使用淺藍色，專業(yè)廣告句使用淺藍色，文字大部份使用黑色，鏈接使用淺藍色，輔助色是白色，點睛色是橙色。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 3設(shè)計網(wǎng)站的標準字體 在字體的設(shè)計應注意以下準則： 文字必須清晰可讀，大小合適，文字的顏色和背景色有較為強烈的對比度，文字周圍的設(shè)計元素不能對文字造成干擾。 字體與網(wǎng)站的風格的統(tǒng)一性、諧調(diào)性 盡可能少用游動文字、圖形文字。2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形

14、象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象2009-7-15第二步：設(shè)計網(wǎng)站的第二步：設(shè)計網(wǎng)站的CI 形象形象 因此該中心網(wǎng)站的設(shè)計師也選擇了網(wǎng)頁默認的宋體為網(wǎng)站的主要字體。在導航和目錄的部份字體加粗，達到突出的效果。字體的主要色彩是黑色，輔助色是白色和藍色，顯得莊重、大方，個別地方用了較亮的紅起突出和點睛的作用。2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 網(wǎng)站欄目規(guī)劃對于網(wǎng)站的成敗有著非常直接的關(guān)系，網(wǎng)站欄目兼具以下兩個功能，二者不可或缺。 1提綱挈領(lǐng)，點題明義。 現(xiàn)在網(wǎng)絡(luò)的速度越來越快，網(wǎng)絡(luò)上的信息也越來越豐富，而瀏覽者卻越來越缺

15、乏瀏覽耐心。在打開網(wǎng)站的數(shù)秒鐘內(nèi)，一旦找不到自己所需的信息，網(wǎng)站就會被瀏覽者毫不客氣地關(guān)掉。因此，網(wǎng)站的欄目規(guī)劃首先要做到“提綱挈領(lǐng)、點題明義”，用最簡練的語言提煉出網(wǎng)站中每一個部分的內(nèi)容，清晰地告訴瀏覽者網(wǎng)站在說什么，有哪些信息和功能。 2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 2指引迷途，清晰導航 網(wǎng)站的內(nèi)容越多，瀏覽者也越容易迷失。除了“提綱”的作用之外，網(wǎng)站的導航機制是網(wǎng)站內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)站導航是否合理是網(wǎng)站易用性評價的重要指標之一。網(wǎng)站的導航機制一般包括全局導航、輔助導航、站點地圖等體現(xiàn)網(wǎng)站結(jié)構(gòu)的、對用戶進行引導的因素。 2009-7-15第三步：

16、規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 （1）全局導航）全局導航 全局導航（又稱主導航，它是出現(xiàn)在網(wǎng)站的每一個頁面上一組通用的導航元素，以一致的外觀出現(xiàn)在網(wǎng)站的每一頁，扮演著對用戶最基本的訪問方向性指引。2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 注明：1即站點的logo，同時點擊logo也可以返回到首頁，2是網(wǎng)站的欄目設(shè)置，3是站內(nèi)搜索，4是與顧客轉(zhuǎn)化有關(guān)的常用工具12342009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 2）輔助導航輔助導航 輔助導航又被稱作面包屑路徑或?qū)蛹壊藛?，體現(xiàn)為內(nèi)頁的“當前位置”提示。輔助導航的作用

17、是無論用戶身處站內(nèi)何處，均不會迷路，尤其當網(wǎng)站的欄目層次較多的時候，正確的輔助導航的設(shè)置尤為重要。它從另一個層面反映了網(wǎng)站的結(jié)構(gòu)層次，是對全局導航的有效補充2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 注明：輔助導航出現(xiàn)在聯(lián)想網(wǎng)站的每一個內(nèi)頁緊靠主導航條下的位置，以“”來對層級進行分隔，簡單而形象從視覺上暗示了瀏覽層次的前進方向；末尾的“臺式機”和當前所在頁面的名稱一致，并用不同的顏色加以突出，讓瀏覽者對當前的所在位置一目了然2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接 （3）網(wǎng)站地圖網(wǎng)站地圖 網(wǎng)站地圖（SiteMap）將網(wǎng)站內(nèi)深層次的鏈接關(guān)系以一個扁平的頁面呈

18、現(xiàn)出來，同它的命名一樣，讓用戶對網(wǎng)站的內(nèi)容與結(jié)構(gòu)全局快速了解。就如大賣場指示圖一樣讓我們對各個賣場的區(qū)域劃分具體位置有個初步的了解。 2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接注明：該網(wǎng)站地圖放棄所有虛飾性圖片，富有層次感的設(shè)計將欄目結(jié)構(gòu)層次清晰地呈現(xiàn)出來；并對重要欄目有簡述說明，對用戶起到很好的指引作用。 2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 在欄目的設(shè)置上，該公司的設(shè)計者也充分的考慮了用戶的需求，在網(wǎng)站的頁面上規(guī)化了四個的全局導航欄。 網(wǎng)頁上方導航條：首頁、服務、解決方案、經(jīng)驗分享和關(guān)于我們 網(wǎng)頁下方導航條：關(guān)于我們、本

19、網(wǎng)簡介、廣告服務、聯(lián)系我們、友情鏈接、法律申明 站內(nèi)搜索 站外快速鏈接 該網(wǎng)站內(nèi)的鏈接采用的是星狀鏈接結(jié)構(gòu)，站內(nèi)還使用了輔助導航和網(wǎng)站地圖，使用戶可以方便的找到自已想要的東西，可以隨時回到想去的頁面。2009-7-15第三步：規(guī)化網(wǎng)站的欄目及鏈接第三步：規(guī)化網(wǎng)站的欄目及鏈接 在項目上主要分為以下幾塊： 關(guān)于我們欄目：分為中心介紹、新聞動態(tài)、社會責任、中心刊物、合作伙伴和聯(lián)系我們。 產(chǎn)品欄目：分為財務軟件、外貿(mào)管理軟件、外貿(mào)操盤手軟件。 服務欄目：分為戰(zhàn)略咨詢、營銷策劃、培訓認證、信息服務、技術(shù)支持、網(wǎng)站建設(shè)。 解決方案欄目：分為全方們國際貿(mào)易解決方案和開發(fā)區(qū)公共信息服務平臺解決方案； 2009

20、-7-15第四步：設(shè)計網(wǎng)站的布局第四步：設(shè)計網(wǎng)站的布局 網(wǎng)站界面的布局方式、展示形式直接影響用戶使用網(wǎng)站的方便性。合理的頁面布局令用戶快速發(fā)現(xiàn)網(wǎng)站的核心內(nèi)容和服務；如果頁面布局不合理，用戶不知道如何開始獲取所需的信息、或者怎么執(zhí)行操作來獲得相應的服務，那么他們就會離開這個網(wǎng)站，甚至以后都不會再訪問這個網(wǎng)站。2009-7-15網(wǎng)頁排版布局的步驟網(wǎng)頁排版布局的步驟 構(gòu)思 根據(jù)網(wǎng)站的內(nèi)容整體風格，設(shè)計版面布局。你可以參考其他的優(yōu)秀的網(wǎng)站，調(diào)用自己的各種知識儲備，特別是藝術(shù)方面的，在大腦中不斷地醞釀、碰撞，往往不經(jīng)意就有閃光的思想出現(xiàn)。這時你就要抓緊時間把它變成文字的東西，用筆在紙上粗略的勾畫出布局的

21、輪廓，不要講究細節(jié)，只要有一個輪廓就行。當然你也可以有多種想法，盡量都把它們畫出來，然后再比較，采用一種比較滿意的方案。2009-7-15網(wǎng)頁排版布局的步驟網(wǎng)頁排版布局的步驟 初步填充內(nèi)容 這一步就要把一些主要的內(nèi)容放到網(wǎng)頁中，例如網(wǎng)站的標志、廣告條、菜單、導航條、計數(shù)器等，要注意重點突出，把網(wǎng)站標志、廣告條、菜單放在最突出、最醒目的位置，然后再考慮其它的元素的放置。 2009-7-15網(wǎng)頁排版布局的步驟網(wǎng)頁排版布局的步驟 細化 在將各主要元素確定之后，下面就可以考慮文字、圖像、表格等頁面元素的排版布局了。在這一步，你可以用網(wǎng)頁編輯工具把草案做成一個簡略的網(wǎng)頁，當然對每一個元所占的比例也要有一

22、個詳細的數(shù)字，以便以后修改。 經(jīng)過以上幾步之后，相信你的網(wǎng)頁布局已經(jīng)初具規(guī)模了，讓別人看一下，給你提些建議，再不斷修改，一個很有特色的網(wǎng)頁就要浮出水面了。 2009-7-15第四步：設(shè)計網(wǎng)站的布局第四步：設(shè)計網(wǎng)站的布局 網(wǎng)頁排版布局的原則網(wǎng)頁排版布局的原則 上面我們簡要的介紹了設(shè)計網(wǎng)頁布局的步驟，事實上，在構(gòu)思和設(shè)計的過程中，你還必須要掌握以下的幾項原則： 平衡性 一個好的網(wǎng)頁布局應該給人一種安定、平穩(wěn)的感覺，它不僅表現(xiàn)在文字、圖像等要素的空間占用上分布均勻，而且還有色彩的平衡，要給人一種協(xié)調(diào)的感覺。2009-7-15網(wǎng)頁排版布局的原則網(wǎng)頁排版布局的原則 對稱性 對稱是一種美，我們生活中有許多

23、事物都是對稱的，但過度的對稱就會給人一種呆板、死氣沉沉的感覺，因此要適當?shù)拇蚱茖ΨQ，制造一點變化。 對比性 讓不同的形態(tài)、色彩等元素相互對比，來形成鮮明的視覺效果。例如黑白對比，圓形和方形對比等，它們往往能夠創(chuàng)造出富有變化的效果。2009-7-15網(wǎng)頁排版布局的原則網(wǎng)頁排版布局的原則 疏密度 網(wǎng)頁要做到疏密有度，即平常所說的“密不透風，疏可跑馬”。不要整個網(wǎng)頁一種樣式，要適當進行留白，過用空格，改變行間距、字間距等制造一些變化的效果。 比例 比例適錄，這在布局中非常重要，雖然不一定都要做到黃金分割，但比例一定要協(xié)調(diào)。 2009-7-15常見網(wǎng)站布局的版式常見網(wǎng)站布局的版式 骨骼型 網(wǎng)頁版式的骨

24、骼型是一種規(guī)范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。 2009-7-15骨骼型骨骼型2009-7-15常見網(wǎng)站布局的版式常見網(wǎng)站布局的版式 2.滿版型 頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設(shè)計中的運用越來越多。 2009-7-15滿版型滿版型2009-7-15常見網(wǎng)站布局的版式常見網(wǎng)站布局的版式 3.分割

25、型 把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對比的強弱。2009-7-15分割型分割型2009-7-15分割型分割型2009-7-15分割型分割型2009-7-15水平不均勻分割水平不均勻分割 如果上半部安置標題或?qū)Ш剑瑒t面積較??；上半部安置主體內(nèi)容，則面積適當加大。 2009-7-15垂直分割垂直分割 垂直不均勻分割:多數(shù)用在二級頁面,左邊放置導航條,右邊顯示相關(guān)信息. 2009-7-15垂直分割垂直分割 也有應用在首頁上的,產(chǎn)生強烈的藝術(shù)效果. 2009-7-15垂直變化分割垂直變化分割 可以多次垂直向分割,也可進行多級分割.不過一般很少有人單獨使用這種版