第3章 網(wǎng)頁版式的設(shè)計

第3章網(wǎng)頁版式的設(shè)計本章學習目標(1)理解網(wǎng)頁中的各類元素及其作用；(2)掌握各類網(wǎng)頁的版式設(shè)計方法；(3)掌握網(wǎng)頁模板的創(chuàng)建方法；(4)理解網(wǎng)頁版式設(shè)計的主要策略.本章知識結(jié)構(gòu)網(wǎng)頁排版典型風格網(wǎng)頁排版原則網(wǎng)頁排版設(shè)計規(guī)則網(wǎng)頁版面基本概念網(wǎng)頁排版步驟3.2網(wǎng)頁版面設(shè)計3.1網(wǎng)頁基礎(chǔ)知識3.1網(wǎng)頁基礎(chǔ)知識3.1.1虛擬界面

由于網(wǎng)頁是通過計算機的顯示通道與人們交流的，并不是現(xiàn)實世界中的實際物體，因此又被稱為“虛擬界面”。從網(wǎng)絡(luò)的角度來看，虛擬界面是一個網(wǎng)站的窗口，網(wǎng)站中的數(shù)據(jù)庫信息、鏈接功能以及各種網(wǎng)絡(luò)服務(wù)都通過這個界面進行實施。一個網(wǎng)站的網(wǎng)頁可以有多個，通常根據(jù)需要分層設(shè)置。從平面設(shè)計的角度來看，每個虛擬界面就是一個版面，可以利用平面設(shè)計理念對其進行設(shè)計。但是，網(wǎng)頁畢竟是計算機技術(shù)和多媒體技術(shù)的產(chǎn)物，具有某些一般版面所沒有的特點和性質(zhì)。為了對虛擬版面進行設(shè)計，就必須拓展設(shè)計的范圍，豐富設(shè)計的手段，如對于版面各種媒介的設(shè)計與制作，要應用一些新的技術(shù)。1．版面尺寸規(guī)范化通常采用顯示器的標準顯示模式，下面是常用的顯示器的標準顯示模式1）800像素×600像素。2）1024像素×768像素。3）1280像素×1024像素或更高。3.1.2網(wǎng)頁界面的特點3.1.2網(wǎng)頁界面的特點圖3-1包含多種多媒體的網(wǎng)頁2．媒介形式的多樣化3．有限的界面顏色數(shù)量（一般采用256色模式）4．界面的嵌套性（嵌套和鏈接，整體風格統(tǒng)一和部分表現(xiàn)個性化協(xié)調(diào)）5．具有控制功能（能實現(xiàn)跳轉(zhuǎn)和檢索等功能，完成網(wǎng)絡(luò)操作）3.1.2網(wǎng)頁界面的特點3.1.3網(wǎng)頁的功能其主要功能包括：展示功能超鏈接功能檢索功能統(tǒng)計和計算功能等3.2.1版面編排原則

版面編排的首要任務(wù)就是根據(jù)網(wǎng)頁傳達內(nèi)容的需要，將不同的文字和圖片按照一定的次序用最合理的編排和布局組成一個有機的整體并展現(xiàn)出來。3.2.1版面編排原則版面編排應注意以下幾項基本原則：1．突出中心，理清主次2．搭配合理，大小呼應3．圖文并茂，相得益彰3.2.2網(wǎng)頁排版布局的一般步驟（1）構(gòu)思根據(jù)網(wǎng)站內(nèi)容的整體風格，設(shè)計版面布局。（2）初步填充內(nèi)容這一步就要把一些主要的內(nèi)容放到網(wǎng)頁中，例如，網(wǎng)站的標志、廣告條、菜單、導航條、計數(shù)器等。3.2.2網(wǎng)頁排版布局的一般步驟（3）細化在將各主要元素確定好之后，下面就可以考慮文字、圖像、表格等頁面元素的排版布局了。在這一步，設(shè)計者可以利用網(wǎng)頁編輯工具把草案做成一個簡略的網(wǎng)頁，當然，對每一種元素所占的比例也要有一個詳細的數(shù)字，以便以后修改。3.2.3版面典型風格對稱型對稱型，又稱國字型或同字型，是最常見的結(jié)構(gòu)類型，具有典型的版面平衡，視覺感受沉穩(wěn)大氣、實力感較強等特點，通常被一些政府部門、大型公司等大型網(wǎng)站所采用偏置型網(wǎng)站布局偏置型，又稱拐角型或廠字型，其特點是在沉穩(wěn)大氣的同時略顯個性，版面所容納的信息量大，各種社會服務(wù)機構(gòu)、大專院校、教育機構(gòu)的網(wǎng)站多采用這種類型。偏置型標題型網(wǎng)站布局標題型網(wǎng)頁風格簡練，傳達內(nèi)容直觀，標題型網(wǎng)頁的特點是功能具有單一性，常用于某些產(chǎn)品的宣傳、單一作品的說明和發(fā)布、搜索引擎和軟件注冊頁面等。標題型POP網(wǎng)站布局FLASH布局網(wǎng)站3.2.4網(wǎng)頁排版布局的常用技術(shù)（1）CSS（層疊樣式表）布局

使用CSS布局技術(shù)能完全精確地定位文本圖片。目前，CSS運用的好壞是一個網(wǎng)站優(yōu)秀與否的關(guān)鍵。（2）表格布局

表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響，而且表格在定位圖片和文本上比用CSS更加方便。表格布局惟一的缺點是，當設(shè)計者使用了過多的表格時，會影響頁面的下載速度。（3）框架布局

從布局上考慮，框架結(jié)構(gòu)不失為一個好的布局方法。3.2.5色彩搭配色彩和諧與否，是整個網(wǎng)頁設(shè)計是否成功的關(guān)鍵。色彩總的應用原則是“總體協(xié)調(diào)，局部對比”色彩的特征色彩的基本特征主要有色調(diào)亮度飽和度色相色相：色彩的相貌色彩的外觀特征其實就是色彩的色相。

我們把色相接近的那些色（色相環(huán)中相距30度左右的色）稱為同類色；

色相差別較大的那些色（色相環(huán)中相距90~180度左右的色）稱為對比色或互補色；

色相差別適中的那些色（色相環(huán)中相距50度左右的色）稱為類似色。明度明度色標是我們認識和區(qū)別色彩明度的重要工具。不同的顏色之間存在著明度的不同，從色相環(huán)中我們可以看到黃色最亮，即明度最高；藍色最暗，即明度最低。不同明度的色彩，給人的印象和感受是不同的。一般情況下，人們把明度低于3度的顏色叫暗色，明度高于7度的顏色叫明色，3度和7度之間的色叫中明色。

飽和度又稱純度：色彩的艷麗程度在一個大紅色里逐步添加白色或者是黑色，這個大紅色就會變的不象以前那么艷麗了，這是因為它的純度下降了。根據(jù)色彩純度的特征，自然界的色彩可以分為兩大類，有彩色，即紅，黃，藍等。無彩色，即黑，白，灰。無彩色不帶任何色彩傾向，純度為0。在這個純度色譜中，接近純色的色叫高純度色，接近灰色的色叫低純度色，處于中間狀態(tài)的叫中純度色。

色彩搭配在進行網(wǎng)頁色彩搭配時，應遵循如下要點：確定主體色遵循主從關(guān)系，是處理色彩的主要原則使用相近色設(shè)計時選擇色彩相近的顏色，易于搭配。同一頁面盡量不要多出4種顏色色彩均衡原則當運用了較多明度較高的顏色時可以用黑色或同色相的深色小面積色塊點綴，以增加頁面分量，達到色彩均衡色彩搭配在進行網(wǎng)頁色彩搭配時，應遵循如下要點：黑白灰運用遇到色彩凌亂或純度很高的顏色時，可以大面積的增加白、灰等淺色，小面積增加黑色，以調(diào)節(jié)顏色搭配不當?shù)那闆r。色彩心理與情感不同的顏色會使瀏覽者產(chǎn)生不同的心理感受3.2.6設(shè)計規(guī)則1．首屏頁面的設(shè)計所謂首屏頁面，是指在打開一個網(wǎng)站首頁時，不拖動畫面右側(cè)的滾動條能夠看到的部分，如圖所示。首屏頁面的設(shè)計（1）首屏頁面的尺寸與顯示器的顯示模式有關(guān)，不可采用過高的顯示模式，要考慮多數(shù)顯示器的顯示模式。網(wǎng)頁的寬度應小于屏幕內(nèi)瀏覽器窗口的寬度，網(wǎng)頁向下延伸的長度可隨意些，但不可過長。（2）首屏頁面的把握應著重安排在第一時間里呈現(xiàn)在讀者面前的內(nèi)容（3）設(shè)法抓住讀者的視線避免大段文字敘述；以標題或概要的形式提供重點內(nèi)容，并提供超鏈接；善于制造懸念，并把握懸念的時效性。2．導航欄的設(shè)計導航欄是網(wǎng)頁非常重要的組成部分，是引導閱讀、擴大信息量的有力手段。下圖是網(wǎng)站的導航欄。導航欄的設(shè)計導航欄的設(shè)計應遵循以下原則：1）導航的數(shù)量適當2）導航提示要明確、清晰、醒目3）導航欄盡量采用橫向設(shè)置，可在不使用滾動條的情況下一覽無余。3．媒介規(guī)格設(shè)計（1）圖像為減少數(shù)據(jù)量，圖像應以能夠清晰辨認的最小尺寸為尺度，分辨率采用72dpi，顏色采用256色，格式采用GIF/JPGE/BMP/PNG等（2）動畫動畫數(shù)量不可過多，尺寸不可過大，采用256色，文件格式采用GIF或SWF（3）聲音簡單的音效課采用MIDI聲音，文件格式為MID；對于音樂、語音等要求有一定保真度的聲音，可采用WAV格式或MP3格式的聲音；聲音長度盡可能短4．網(wǎng)頁效果與網(wǎng)頁效率（1）避免濫用媒體形式（2）文字的使用不要輕易使用藝術(shù)字體（3）圖形的使用盡量減少使用數(shù)據(jù)量較大的動畫或圖片（4）背景的處理可使用GIF圖片但要避免喧賓奪主5．強調(diào)整體6．網(wǎng)頁與讀者群7．及時更新網(wǎng)頁3.2.7設(shè)計誤區(qū)1．片面追求版面效果2．使用縱向的導航欄3．使用多種媒體形式4．規(guī)則化案例共享右圖所示的是曙光大學的首頁版式，該網(wǎng)頁版面設(shè)計如下：（1）確定網(wǎng)頁的版面風格（2）確定網(wǎng)頁排版布局的技術(shù)（3）頁面色彩搭配（4）首頁的尺寸設(shè)計（5）導航欄的設(shè)計（6）首頁內(nèi)容設(shè)計（7）素材的使用（8）頁面的整體性設(shè)計實踐項目上網(wǎng)瀏覽網(wǎng)頁，找出書中所述的網(wǎng)頁版式的類型，即書中所提及的典型的網(wǎng)頁布局結(jié)構(gòu)，每種布局結(jié)構(gòu)請分別找出三個以上的網(wǎng)站，將其主頁即對應網(wǎng)址抓屏備注于對應的網(wǎng)頁布局類型之下。注意：課堂上已經(jīng)介紹的網(wǎng)站不能使用。

實踐項目(2)“愛家美食”網(wǎng)站首頁版面的效果如右圖所示。請使用網(wǎng)頁版面設(shè)計技術(shù)設(shè)計“愛家美食”網(wǎng)站首頁版面。(3)在訪問網(wǎng)站過程中，借助于課本的幫助，請思考“主頁”“導航頁”“鏈接頁”這三個概念的區(qū)別聯(lián)系課后思考題1．對于現(xiàn)在普遍使用的24in顯示器，網(wǎng)頁的版面尺寸設(shè)置為多少像素合適？為什么？2．上網(wǎng)瀏覽網(wǎng)頁，指出這些網(wǎng)頁版面屬于哪種類型。3．色彩搭配有哪些原則？請