版式是頁(yè)面上字體的平衡和相互作用文字和視覺(jué)的平衡可以幫助瀏覽者了解外形，并且深人頁(yè)面內(nèi)容的精髓。版式扮演著文字和視覺(jué)傳達(dá)的雙重角色。當(dāng)瀏覽者瀏覽頁(yè)面時(shí)，會(huì)潛意識(shí)地注意兩個(gè)功能:首先，他們會(huì)調(diào)查頁(yè)面的整個(gè)圖形樣式; 接著他們會(huì)解析語(yǔ)言并閱讀。好的版式可以通過(guò)提供可視標(biāo)點(diǎn)和圖像語(yǔ)言來(lái)創(chuàng)建用于表現(xiàn)頁(yè)面散文的視覺(jué)層級(jí)效果，這些可視標(biāo)點(diǎn)符號(hào)和圖像語(yǔ)言可以幫助讀者理解散文和圖片、標(biāo)題與下級(jí)文本塊之間的關(guān)聯(lián)。


1. Web字體特色

盡管網(wǎng)頁(yè)的版式基本規(guī)則和傳統(tǒng)印刷文檔十分-致，屏幕字體和紙質(zhì)印刷字體卻大相徑庭。相對(duì)于圖書(shū)、雜志甚至是用廉價(jià)打印機(jī)打印的紙張，計(jì)算機(jī)屏幕顯示字體所采用的分辨率相當(dāng)?shù)?。大多?shù)雜志和圖書(shū)字體都采用1200dpi或者更高的分辨率來(lái)印刷，然而計(jì)算機(jī)屏幕的分辨率卻鮮少85ppi)。當(dāng)前Apple和Windows操作都采用抗鋸齒字體來(lái)增加計(jì)算機(jī)展品上的可視分辨本，通過(guò)平滑處理學(xué)體周圍的邊緣來(lái)達(dá)到效果，因此在正常的屏幕閱讀距離范圍內(nèi)，字體看起來(lái)與高分辨率的打印字體無(wú)太大差異?？逛忼X的工作原理，與易讀性和閱讀相關(guān)的長(zhǎng)期研究表明，抗鋸齒可以提高閱讀速度及準(zhǔn)確度。在放大時(shí)，這些字體會(huì)變模糊，但是在正常的閱讀條件下以則十分清晰。

除了字體分辨率較低外，典型的計(jì)算機(jī)屏幕的可用區(qū)域也要比標(biāo)準(zhǔn)的普通版用器的圖書(shū)開(kāi)本(尤其是高度)要小，垂直高度十分有限。這些最大面積的計(jì)算均已假設(shè)瀏覽者已經(jīng)在屏幕中將瀏覽器窗口進(jìn)行了最大化，而且大多數(shù)時(shí)間，瀏覽器還有可能與瀏覽者在屏幕中打開(kāi)的其他窗口共享屏幕空間。

2. 動(dòng)態(tài)構(gòu)建

Web版式最與眾不同的特征是它的多變性。Web頁(yè)面會(huì)在每次被加載到Web瀏覽器時(shí)動(dòng)態(tài)地構(gòu)建。每行文字、每個(gè)標(biāo)題以及每個(gè)獨(dú)特的字體和樣式都會(huì)經(jīng)由Web瀏覽器、Web服務(wù)器以及瀏覽者的計(jì)算機(jī)操作系統(tǒng)復(fù)雜的交互重新創(chuàng)建。這個(gè)過(guò)程充滿了不可預(yù)知性:缺失的字體、過(guò)時(shí)的瀏覽器、由瀏覽者指定的一組特殊的字體首選項(xiàng)。你應(yīng)該把你的Web頁(yè)面布局和字體看成是頁(yè)面顯示方式的建議，你無(wú)從得知它們?cè)跒g覽者屏幕上的準(zhǔn)確顯示方式。

3.內(nèi)容結(jié)構(gòu)及視覺(jué)邏輯

HTML的發(fā)起人是那些想以共享粒子物理文檔的科學(xué)家們。他們對(duì)文檔在特定計(jì)算機(jī)屏幕上顯示的準(zhǔn)確形式不太感興趣。實(shí)際上，HTML可用來(lái)強(qiáng)制分離內(nèi)容結(jié)構(gòu)和圖形設(shè)計(jì)。在20世紀(jì)90年代的早期，人們根據(jù)這個(gè)意圖來(lái)創(chuàng)建可以在所有系統(tǒng)和瀏覽器(包括可以為有視覺(jué)障礙的用戶“讀”內(nèi)容的瀏覽器)上顯示的萬(wàn)維網(wǎng)頁(yè)面，這些頁(yè)面可以被自動(dòng)搜索和分析引擎精確地解讀。

原Web設(shè)計(jì)師無(wú)視出版的圖形設(shè)計(jì)和編輯管理的傳統(tǒng)，忽略了人的動(dòng)機(jī)及對(duì)說(shuō)服的渴望。早期的Web程序員是如此關(guān)注制作便于機(jī)器使用的Web文檔，以至于他們創(chuàng)建的文字只有機(jī)器(或者粒子物理學(xué)家)可讀。他們僅僅關(guān)注文檔結(jié)構(gòu)邏輯，忽略了人們對(duì)精湛的圖形設(shè)計(jì)和版式的可視化邏輯的需求。

4.層疊樣式表

架構(gòu)邏輯和視覺(jué)邏輯之間的分割通過(guò)層疊樣式表(CSS)來(lái)調(diào)和。樣式表可以控制頁(yè)眉、段落、列表和其他頁(yè)面元素的精準(zhǔn)視覺(jué)樣式。例如，你想將<h3>頁(yè)眉設(shè)置成Arial粗體字，就可以在樣式表中指定這些細(xì)節(jié)。你可以通過(guò)這種方式保留對(duì)HTML結(jié)構(gòu)標(biāo)簽的邏輯使用，而不犧牲圖形設(shè)計(jì)的靈活性。

5.CSS的優(yōu)勢(shì)  

 新設(shè)計(jì)網(wǎng)站時(shí)用到CSS設(shè)計(jì)技術(shù)。

●內(nèi)容和設(shè)計(jì)分離。CSS為網(wǎng)站開(kāi)發(fā)者提供了以下兩種最佳狀態(tài)，反映信息邏輯架構(gòu)的內(nèi)容標(biāo)注，以及自由指定每個(gè)HTML標(biāo)簽的具體外觀

●高效地控制大型文檔集。CSS最強(qiáng)大的功能就是允許網(wǎng)站設(shè)計(jì)者通過(guò)修改單個(gè)樣式表文檔來(lái)控制成千萬(wàn)的頁(yè)面的平面外觀和感受。

6. 樣式表的工作方式

Web樣式表并非是什么新鮮的事物。每個(gè)圖形Web瀏覽器都采用了樣式表，即便是很早之前的Mosaic-最早的圖形Web瀏覽器。在有CSS之前不太可能修改瀏覽器以前確定的固定樣式，例如，heading1 (<h1>)頁(yè)眉在屏幕中的顯示。CSS的基本理念是讓網(wǎng)站作者和用戶確定每個(gè)標(biāo)準(zhǔn)的HTML標(biāo)簽的大小、樣式和布局等細(xì)節(jié)。如果你曾經(jīng)使用過(guò)頁(yè)面布局或者文字處理程序的“樣式”功能，你將可以理解CSS背后的基本原理。文字處理軟件的樣式功能被用來(lái)確定標(biāo)題、子標(biāo)題和內(nèi)文的外觀，之后，在你對(duì)各個(gè)元素應(yīng)用樣式時(shí)，文字就會(huì)被格式化。當(dāng)所有的文字都已經(jīng)被賦予樣式后，便可以通過(guò)簡(jiǎn)單地更改文字的樣式信息來(lái)更改該元素每個(gè)應(yīng)用動(dòng)應(yīng)的外觀。例如，將Heading1元素設(shè)置為T(mén)imes New Roman。如果你改變主意，想采用另一種字體，則只需更改Heading1樣式，整個(gè)文檔中的所有Heading都會(huì)發(fā)生改變來(lái)顯示新字體。CSS的工作方式幾乎與此同出一轍，不同的是你可以使用CSS來(lái)創(chuàng)建主樣式表，該主樣式表可以用來(lái)控制網(wǎng)站建設(shè)中所有與主樣式表相連的頁(yè)面的可視化樣式。

7.媒介樣式表

我們可以使用CSS來(lái)為特定上下文提供適宜的格式。很多媒介都采用HTML和CSS規(guī)范來(lái)展示，不過(guò)，其中“打印”和“手持”是被廣泛支持的兩種規(guī)范。印刷樣式表控制著打印到紙面上的網(wǎng)站建設(shè)頁(yè)面格式，手持樣式表控制著使用移動(dòng)設(shè)備所訪問(wèn)的頁(yè)面格式。這個(gè)功能的意義深遠(yuǎn)，因?yàn)楹冒媸降钠焚|(zhì)會(huì)因?yàn)椴煌浇槎?。例如，那些讓文字在屏幕上可讀的特征會(huì)在紙上.看起來(lái)過(guò)大、模糊。通過(guò)使用適用于不同環(huán)境的媒介樣式表，我們可以將良好的版式橫跨多種媒介發(fā)布。