1、網頁的版式設計網頁的版式設計很多從事網頁設計的計算機專業(yè)人員，對于網頁的制作技術駕輕就熟，但對于網頁富有藝術性和個性的設計卻感到力不從心。特別是沒有經過藝術設計專業(yè)訓練的網頁制作者，在掌握了網頁制作技術的情況下，都渴望將自己的網頁制作得更具創(chuàng)意和美感。目前關于網頁制作的討論和介紹，多以講解軟件的技術性操作為主要內容，側重藝術方面的非常之少。很多從事網頁設計的計算機專業(yè)人員，對于網頁的制作技術駕輕就熟一、文字的格式化 1.字號、字體、行距 字號大小可以用不同的方式來計算，例如磅（point）或像素（pixel）。因為以計算機的像素技術為基礎的單位需要在打印時轉換為磅，所以，建議采用磅為單位。 一

2、、文字的格式化 1.字號、字體、行距 最適合于網頁正文顯示的字體大小為12磅左右，現在很多的綜合性站點，由于在一個頁面中需要安排的內容較多，通常采用9磅的字號。較大的字體可用于標題或其他需要強調的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字號容易產生整體感和精致感，但可讀性較差。 最適合于網頁正文顯示的字體大小為網頁設計者可以用字體來更充分地體現設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是，無論選擇什么字體，都要依據網頁的總體設想和瀏覽者的需要。 網頁設計者可以用字體來更充分地體現設計中要表達的情感。字 粗體字強壯有力，有男性特點，適合機械、建筑業(yè)等內容；細體字高雅

3、細致，有女性特點，更適合服裝、化妝品、食品等行業(yè)的內容。在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多采。關鍵是如何根據頁面內容來掌握這個比例關系。 粗體字強壯有力，有男性特點，適合機械、建筑業(yè)等圖1：通過文字大小疏密進行處理，突出重點，層次分明。 圖1：通過文字大小疏密進行處理，突出重點，層次分明。 從加強平臺無關性的角度來考慮，正文內容最好采用缺省字體。因為瀏覽器是用本地機器上的字庫顯示頁面內容的。作為網頁設計者必須考慮到大多數瀏覽者的機器里只裝有三種字體類型及一些相應的特定字體。而你指定的字體在瀏覽者的機器里并不一定能夠找到，這給網頁設計帶來很大的局限。解決

4、問題的辦法是：在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中。 從加強平臺無關性的角度來考慮，正文內容最好采用行距的變化也會對文本的可讀性產生很大影響。一般情況下，接近字體尺寸的行距設置比較適合正文。行距的常規(guī)比例為10:12，即用字10點，則行距12點。這主要是出于以下考慮：適當的行距會形成一條明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。行距的變化也會對文本的可讀性產生很大影響。一般情況下，接除了對于可讀性的影響，行距本身也是具有很強表現力的設計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現獨特的審美意趣。例如，加寬行距可以

5、體現輕松、舒展的情緒，應用于娛樂性、抒情性的內容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現出獨到的匠心。 除了對于可讀性的影響，行距本身也是具有很強表現力的設計語行距可以用行高（line-height）屬性來設置，建議以磅或默認行高的百分數為單位。例如：line-height：20pt、line-height：150%。 行距可以用行高（line-height）屬性來設置，建圖2：上、中部文字編排疏散，傳達出輕松愉快的感覺。下部的文字編排采用較小的行距，與上面的編排方式形成對比，豐富了版面空間層次。圖2：上、中部文字編排疏散，傳達出輕松愉快的感覺。2.文字

6、的整體編排 頁面里的正文部分是由許多單個文字經過編排組成的群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。從藝術的角度可以將字體本身看成是一種藝術形式，它在個性和情感方面對人們有著很大影響。在網頁設計中，字體的處理與顏色、版式、圖形等其他設計元素的處理一樣非常關鍵。從某種意義上來講，所有的設計元素都可以理解為圖形。 2.文字的整體編排 頁面里的正文部分是由許多單個文字經過（1）文字的圖形化字體具有兩方面的作用：一是實現字意與語義的功能，二是美學效應。所謂文字的圖形化，即是強調它的美學效應，把記號性的文字作為圖形元素來表現，同時又強化了原有的功能。作為網頁設計者，既可以按照常規(guī)的方式來設置字

7、體，也可以對字體進行藝術化的設計。無論怎樣，一切都應圍繞如何更出色地實現自己的設計目標。 （1）文字的圖形化字體具有兩方面的作用：一是實現字意與語將文字圖形化、意象化，以更富創(chuàng)意的形式表達出深層的設計思想，能夠克服網頁的單調與平淡，從而打動人心。 將文字圖形化、意象化，以更富創(chuàng)意的形式表達出深層的設計思圖3：將文字放大，不僅實現了字意與語義的功能，而且具備了視覺沖擊力。 圖3：將文字放大，不僅實現了字意與語義的功能，而且具備了視覺（2）文字的疊置 文字與圖像之間或文字與文字之間在經過疊置后，能夠產生空間感、跳躍感、透明感、雜音感和敘事感，從而成為頁面中活躍的、令人注目的元素。雖然疊置手法影響了

8、文字的可讀性，但是能造成頁面獨特的視覺效果。這種不追求易讀，而刻意追求“雜音”的表現手法，體現了一種藝術思潮。因而，它不僅大量運用于傳統(tǒng)的版式設計，在網頁設計中也被廣泛采用。 （2）文字的疊置 文字與圖像之間或文字與文字之間在經過疊圖4：由字符(ASCII碼)組成的網站標志。 圖4：由字符(ASCII碼)組成的網站標志。 圖5：通過文字的大小、明暗、疏密以及疊置等變化，產生雜音感，起到較好的視覺引導作用。 圖5：通過文字的大小、明暗、疏密以及疊置等變化，（3）標題與正文 在進行標題與正文的編排時，可先考慮將正文作雙欄、三欄或四欄的編排，再進行標題的置入。將正文分欄，是為了求取頁面的空間與彈性，

9、避免通欄的呆板以及標題插入方式的單一性。標題雖是整段或整篇文章的標題，但不一定千篇一律地置于段首之上?？勺骶又小M向、豎向或邊置等編排處理，甚至可以直接插入字群中，以新穎的版式來打破舊有的規(guī)律。 （3）標題與正文 在進行標題與正文的編排時，可先考慮將正（4）文字編排的四種基本形式 頁面里的正文部分是由許多單個文字經過編排組成的群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。 兩端均齊文字從左端到右端的長度均齊，字群形成方方正正的面，顯得端正、嚴謹、美觀。 居中排列在字距相等的情況下，以頁面中心為軸線排列，這種編排方式使文字更加突出，產生對稱的形式美感。 左對齊或右對齊左對齊或右對齊使行首或

10、行尾自然形成一條清晰的垂直線，很容易與圖形配合。這種編排方式有松有緊，有虛有實，跳動而飄逸，產生節(jié)奏與韻律的形式美感。左對齊符合人們閱讀時的習慣，顯得自然；右對齊因不太符合閱讀習慣而較少采用，但顯得新穎。 繞圖排列將文字繞圖形邊緣排列。如果將退底圖插入文字中，會令人感到融洽、自然。 （4）文字編排的四種基本形式 頁面里的正文部分是由許多圖6：文字與圖片穿插排列，密集的文字形成塊面，豐富了頁面層次。 圖6：文字與圖片穿插排列，密集的文字形成塊面，豐富了頁面層次3.文字的強調 （1） 行首的強調 將正文的第一個字或字母放大并作裝飾性處理，嵌入段落的開頭，這在傳統(tǒng)媒體版式設計中稱之為“下墜式”。此技

11、巧的發(fā)明溯源于歐洲中世紀的文稿抄寫員。由于它有吸引視線、裝飾和活躍版面的作用，所以被應用于網頁的文字編排中。其下墜幅度應跨越一個完整字行的上下幅度。至于放大多少，則依據所處網頁環(huán)境而定。 3.文字的強調 （1） 行首的強調 將圖7：下墜式的行首強調，有吸引視線與活躍畫面的作用。 圖7：下墜式的行首強調，有吸引視線與活躍畫面的作用。 （2） 引文的強調 在進行網頁文字編排時，常常會碰到提綱挈領性的文字，即引文（也稱為眉頭）。引文概括一個段落、一個章節(jié)或全文大意，因此在編排上應給予特殊的頁面位置和空間來強調。引文的編排方式多種多樣，如將引文嵌入正文的左右側、上方、下方或中心位置等，并且可以在字體或

12、字號上與正文相區(qū)別而產生變化。 （2） 引文的強調 在進行網頁文字編排時，常常會（3）個別文字的強調 如果將個別文字作為頁面的訴求重點，則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識地強化文字的視覺效果，使其在頁面整體中顯得出眾而奪目。另外，改變某些文字的顏色，也可以使這部分文字得到強調。這些方法實際上都是運用了對比的法則。（3）個別文字的強調 如果將個別文字作為4.文字的顏色在網頁設計中，設計者可以為文字、文字鏈接、已訪問鏈接和當前活動鏈接選用各種顏色。例如，如果你使用Dreamweaver編輯器，默認的設置是這樣的：正常字體顏色為黑色，默認的鏈接顏色為蘭色，鼠標點擊之后

13、又變?yōu)樽霞t色。使用不同顏色的文字可以使想要強調的部分更加引人注目，但應該注意的是，對于文字的顏色，只可少量運用，如果什么都想強調，其實是什么都沒有強調。況且，在一個頁面上運用過多的顏色，會影響瀏覽者閱讀頁面內容，除非你有特殊的設計目的。 4.文字的顏色在網頁設計中，設計者可以為文字、文字鏈接、圖8：根據頁面色調靈活運用文字的色彩，既符合頁面的整體氛圍，又保證了可讀性。 圖8：根據頁面色調靈活運用文字的色彩，既符合頁面的整體氛圍，顏色的運用除了能夠起到強調整體文字中特殊部分的作用之外，對于整個文案的情感表達也會產生影響。這涉及到色彩的情感象征性問題，限于篇幅，在這里不做深入探討。 另外需要注意的

14、是文字顏色的對比度，它包括明度上的對比、純度上的對比以及冷暖的對比。這些不僅對文字的可讀性發(fā)生作用，更重要的是，你可以通過對顏色的運用實現想要的設計效果、設計情感和設計思想。 顏色的運用除了能夠起到強調整體文字中特殊部分的作用之外，對于二、圖像 除了文本之外，網頁上最重要的設計元素莫過于圖像了。一方面，圖像的應用使網頁更加美觀、有趣；另一方面，圖像本身也是傳達信息的重要手段之一。與文字相比，它直觀、生動，可以很容易地把那些文字無法表達的信息表達出來，易于瀏覽者理解和接受。 二、圖像 除了文本之外，網頁上最重要的設計元素莫過于圖1.圖像的格式 Web通常使用兩種圖像格式：GIF和JPEG。除此以

15、外，還有兩種適合網絡傳播但沒有被廣泛應用的圖像格式：PNG和MNG。 1.圖像的格式 Web通常使用兩種圖像格式：GIF和J2.圖像的形式同印刷排版一樣，靜態(tài)圖像在網頁排版中的運用不外乎四種形式：方形圖、退底圖、出血圖以及這三種形式的結合使用。 2.圖像的形式同印刷排版一樣，靜態(tài)圖像在網頁排版中的運用 （1）方形圖即圖形以直線邊框來規(guī)范和限制，是一種最常見、最簡潔、最單純的形態(tài)。方形圖使圖像內容更突出且將主體形象與環(huán)境共融，可以完整地傳達主題思想，富有感染性。配置方形圖的頁面，給人以穩(wěn)重、可信、嚴謹、理性、莊重和安靜等感覺，但有時也顯得平淡、呆板。 （1）方形圖即圖形以直線邊框來規(guī)范和限制，是

16、一種最常見 圖9：典型的方形圖，四周留出邊框，使圖片內容突出。 圖9：典型的方形圖，四周留出邊框，使圖片內容突出。 （2）退底圖將圖像中的背景去掉，只留下主題形象。退底圖形自由而突出，更具有個性，因而給人印象深刻。配置退底圖的頁面，輕松、活潑，動態(tài)十足，而且圖文結合自然，給人以親和感。但也容易造成凌亂和不整體的感覺。 （2）退底圖將圖像中的背景去掉，只留下主題形象。退底圖形自圖10：人物全部退底，文字色塊的安排輕松隨意，是面向年輕人的設計。 圖10：人物全部退底，文字色塊的安排輕松隨意，是面向年輕人的（3）出血圖 圖像的一邊或幾個邊充滿頁面，有向外擴張和舒展之勢。一般用于傳達抒情或運動信息的頁

17、面，因不受邊框限制，感覺上與人更加接近，便于情感與動感的發(fā)揮。 （3）出血圖 圖像的一邊或幾個邊充滿頁面，有向外擴圖11：四邊出血，有強烈的擴張感。 圖11：四邊出血，有強烈的擴張感。 圖12：主體形象退底且兩邊出血。主體形象的方向性 與右側文字的排列方式具有引導視覺的作用。 圖12：主體形象退底且兩邊出血。主體形象的方向性 3.圖像的編排 （1）四角與中軸四點結構 頁面的四個角與對角線、中軸四點及水平與垂直的中軸線，具有支配頁面結構的作用。 3.圖像的編排 （1）四角與中軸四點結構 四角是頁面邊界相交形成的四個點，把四角連接起來的斜線即對角線，交叉點為頁面中心。中軸四點指經過頁面中心的垂直線

18、和水平線的端點。這四個點可上、下、左、右移動。 通過四角與中軸四點結構的不同組合、變化，可以求得多樣的頁面結構。在圖像排版時緊緊抓住這八個點，可以突出網頁的形式美感，網頁的版式設計、視覺流程的籌劃也得到相應簡化。 四角是頁面邊界相交形成的四個點，把四角連圖13：著重于對左上角和右下角的控制，右下角的樹葉起到呼應與穩(wěn)定頁面的作用。圖13：著重于對左上角和右下角的控制，圖14：飽滿的頁面構圖，巧妙地利用表盤穩(wěn)定住頁面四角。圖14：飽滿的頁面構圖，巧妙地利用表盤穩(wěn)定住頁面四角。圖15：以水平分割為主的頁面，右上角與左下角安排了文字，打破呆板的感覺。 圖15：以水平分割為主的頁面，右上角與左下角安排了

19、文字，打破圖16：多幅圖片使水平垂直線規(guī)律地等量分割，獲得了理性與秩序的美。圖16：多幅圖片使水平垂直線規(guī)律地等量分割，獲得了理性與秩序圖17：圖片與文字穿插編排，形成散點組合。 運用線條的分割、文字的群組化以及單一的背景色形成整體感。圖17：圖片與文字穿插編排，形成散點組合。 圖18：在塊狀組合結構中，如圖片太多，則無法突出重點。這個頁面通過改變圖片的面積，有效地分開了層次。 圖18：在塊狀組合結構中，如圖片太多，則無法突出重點。這個4.圖像的處理 圖像的外形、大小、數量以及與背景的關系，都與內容有著密切的聯系。 （1）圖像的外形處理圖像的外形能使頁面的氣氛發(fā)生變化，并直接影響瀏覽者的興趣。

20、一般而言，方形的穩(wěn)定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟親切，退底圖及一些不規(guī)則或不帶邊框的圖像活潑。 4.圖像的處理 圖像的外形、大小、數量以及與背景的 （2）圖像的面積 圖像在網頁中占據的面積大小能直接顯示其重要程度。一般地，大圖像容易形成視覺焦點，感染力強，傳達的情感較為強烈；小圖像常用來穿插在字群中，顯得簡潔而精致，有點綴和呼應頁面主題的作用。在一個頁面中，如果只有大圖像而無小圖像或細密的文字，就會顯得空洞，但只有小圖像而無大圖像又使頁面缺乏視覺沖擊力。 （2）圖像的面積 圖像在網頁中占據的面積大小 圖像的大小不僅決定著主從關系，也控制著頁面的均衡與運動。大小對比強烈，給人跳躍感

21、，使主角更突出；大小對比減弱，則頁面穩(wěn)定、安靜。這是因為，訪問者在瀏覽頁面時，首先會注意到大圖像，然后再看到較小的圖像，這種由大到小的引導，使瀏覽者的視線在頁面上流動，便造成一種動勢，使頁面活潑起來。 圖像的大小不僅決定著主從關系，也控制著頁面的均衡與 因此，在網頁設計時，應首先確定主要形象與次要形象，擴大主要圖像的面積，使次要角色縮小到從屬地位。只有大小圖像主次得當地穿插組合，才能構成最佳的頁面視覺效果。 因此，在網頁設計時，應首先確定主要形象與次要形象，圖19：作為主體的人物形象，既突出了大小對比又增強了頁面的親和力。圖19：作為主體的人物形象，既突出了大小對比又增強了頁面的親（3）圖像的

22、數量 圖像的數量是根據內容決定的。只用一幅圖像，會使內容突出、頁面安定。增加一幅圖像，頁面會因為有了對比和呼應而活躍起來。再增加一幅，則更加熱鬧、活潑。但是，限于目前網絡的傳輸速度，使用圖像時一定要謹慎，大的圖像會降低頁面顯示速度，即使是小圖像，如果運用數量過多，同樣會使頁面下載速度變慢。隨著網絡環(huán)境及技術條件的改善，這種情況已經有了很大的改觀。 （3）圖像的數量 圖像的數量是根據內容決定的。（4）與背景的關系 網頁圖像與背景是對比和統(tǒng)一的關系。也就是說，圖像與背景在和諧統(tǒng)一的基礎上，應存在一定的對比，以使主要圖像更加突出。如精密的相機鏡頭以粗糙的巖石為背景，明亮的文字以深邃的星空為背景，或者

23、使用沒有背景及陪襯物的退底圖像，周圍留出大面積空白，都是利用對比對主體形象起到突出作用。 （4）與背景的關系 網頁圖像與背景是對比和統(tǒng)一的5.圖像在長頁面中的應用 網頁一般都是縱向的(也有特意設計成橫向滾屏的)，其長度從一屏到三屏不等，有時甚至更多。訪問者在瀏覽頁面時，通過拖動垂直滾動條使網頁一屏一屏地顯示，但這并不意味著我們可以將整個頁面分割開來，孤立地進行每一屏的設計。頁面的整體感是建立在形象的啟承關系上，盡管頁面被分割成幾屏來顯示，但圖像或文字的延續(xù)性應使瀏覽者得到完整、統(tǒng)一的視覺感受。設計者所要做的就是進行通盤考慮，例如：尋找對比中的和諧、建立同一的視覺識別等，來處理好每一屏與整個頁面

24、的關系。 5.圖像在長頁面中的應用 網頁一般都是縱向的(也圖20：巧妙地運用動態(tài)元素，比印刷媒體具有更強的表現力。以橫貫頁面的長條色塊統(tǒng)一畫面，圖片安排隨意，疏密有致，使整體風格既統(tǒng)一又有變化。 圖20：巧妙地運用動態(tài)元素，比印刷媒體具有更強的表現力。以三、版式的基本類型 網頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。三、版式的基本類型 網頁版式的基本類型主要有骨骼型1.骨骼型 網頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。

25、這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。 1.骨骼型 網頁版式的骨骼型是一種規(guī)范的、理性的圖21：綜合運用多種分欄形式。圖21：綜合運用多種分欄形式。2.滿版型 頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網頁設計中的運用越來越多。 2.滿版型 頁面以圖像充滿整版。主要以圖像為訴求點，也圖22：四邊出血，向外擴張，適合年輕人的口味。 圖22：四邊出血，向外擴張，適合年輕人的口味。 3.分割型 把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩

26、個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜。可以調整圖片和文案所占的面積，來調節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產生自然和諧的效果。 3.分割型 把整個頁面分成上下或左右兩部分，分別安排圖23：分割線上的壓置的圖片既打破了頁面分割的生硬感， 也使自身得到強調。左邊框上的小標簽乃點睛之筆。 圖23：分割線上的壓置的圖片既打破了頁面分割的生硬感， 4.中軸型 沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。 4.中軸型 沿瀏覽器窗口的中軸將圖片或文字作水平或垂直圖24：不易覺察的中軸型版式，給人以輕快之感。圖24：不易覺察的中軸型版式，給人以輕快之感。5.曲線型 圖片、文字在頁面上作曲線的分割或編排構成，產生韻律與節(jié)奏。 圖25：網站的導航標題沿圖形弧線排列。5