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

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

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

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

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

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

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

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

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

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

飽和度又稱純度：色彩的艷麗程度在一個(gè)大紅色里逐步添加白色或者是黑色，這個(gè)大紅色就會變的不象以前那么艷麗了，這是因?yàn)樗募兌认陆盗恕８鶕?jù)色彩純度的特征，自然界的色彩可以分為兩大類，有彩色，即紅，黃，藍(lán)等。無彩色，即黑，白，灰。無彩色不帶任何色彩傾向，純度為0。在這個(gè)純度色譜中，接近純色的色叫高純度色，接近灰色的色叫低純度色，處于中間狀態(tài)的叫中純度色。

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

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