網頁排版幾個基本元素

有如下幾個基本元素：

字體、字號

現在隨着顯示器愈來愈大，分辨率愈來愈高，常常會以爲看12px的文字有點吃力，作爲設計師也會不自覺的開始大量使用14px的字體，並且 愈來愈多的網站開始使用1五、16px甚至18px以上的字號作正文文字。大字號的使用，對英文字體來說，襯線體的高辨識度和流暢閱讀的優點就體現出來 了。中文宋體在顯示14號以上字體時，單線條大字老是看上去有些單薄不那麼協調，特別是這款點陣字在ClearType（http://baike.baidu.com/view/755822.htm） 強制平滑顯示狀態下尤爲顯得模糊不清。微軟雅黑就是微軟在這個字體顯示問題上的解決方案。

讓咱們分別對比下中英文的襯線體與非襯線體在不一樣字號時的顯示效果。

英文以Times和Verdanad爲例，中文以宋體和微軟雅黑爲例。

行長

咱們隨手拿起一本書或者一份報紙，數一數每行的文字，通常狀況下都不會超過40個漢字。這是由於若是每行文字過長，讀者會不停的轉動脖子，感到疲憊 的同時也會下降閱讀效率；目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節奏。這點一樣適用於網頁上的文章閱讀。因爲顯示器是橫向的，咱們更 要注意劃分閱讀區域。

文本寬度控制在450-700px爲宜，此範圍內參照字號大小；
英文每行80-100個字母（空格算一個字母）爲宜；
中文每行30-40個漢字爲宜。

間距

經過設置間距，咱們就能夠控制文字的密度。若是每行間距過小，與文字過長同樣，讀者瀏覽文章時也容易串行；若是行距過寬，閱讀時就會感受文章不夠連貫。

間距沒有固定的值，一般是根據字體大小來定義的。在word裏咱們常看到雙倍行距、單倍行距和1.5倍行距的選項。網頁上行距的單位經常使用 em來表示，無論是中文網站仍是英文網站，你們多喜歡用1.5em－1.8em的行距。以1.6em的行距爲例，字號16px的字，行距就是 25.6px。

如（圖）所示，1.5-1.8em的行距的確是很是適於閱讀的文字密度。

關於段距，咱們要考慮一下具體實際狀況。好比文章篇幅較短，就不須要很寬的段距；二文章篇幅很長，特別是那些偏學術的比較枯燥的文章，就要多利用段距把握文章的節奏，給閱讀者喘息和思考的機會，且使文章更有層次和可讀性。

背景

白色是全頻光，全放射光對人眼睛的最有刺激，因此不少印刷品讀物的紙張都選用乳白色或者淡黃色的紙張。因爲顯示器自己就發光，因此同是純白色背景的 文字，在電腦上比在紙上閱讀會使眼睛更容易疲乏，另有研究代表：在電腦上閱讀只有在紙上閱讀速度的78%，閱讀效率大大減低。所以，爲了提升頁面瀏覽的舒 適度和效率，愈來愈多的頁面採用淺灰色和淡黃色作爲頁面背景。

另外，印刷品以文字爲主的出版物每每會採用低光澤度的紙張，也是由於光澤度高的紙張反射度高，致使閱讀質量降低，容易令人視覺疲勞

技巧

另外下面我還複製了一篇關於排版技巧的文章，但願能做爲資料方便你們學習。

網頁的排版問題經常被忽視。這挺遺憾的，若是你能改進你的網頁排版，那麼設計和可讀性也就隨之改進。在這篇文章中，介紹了10個很是有用的排版技巧，可使你的網站看起來更好。 

1. 設置正確的行高 

最多見的網頁排版錯誤之一絕對是錯誤的行高。行高用來定義文本行的高度，因此它必需要根據字體大小進行設置。 

通常來講，當我設置文本行的高度時我老是再給字體大小增長7個像素的行間距（字體大小爲12至15個像素）。

Css代碼 

1. BODY {  

2.     字體大小：14px;  

3.     行高：21px; / * 14px + 7px * /  

4. }  

2. 設置正確的標題間空白 

另外一個常見的錯誤是標題周圍的空白。標題是與它下面的段落相關聯的，它不是兩個段落之間的分隔符。這就是爲何一個標題的上邊緣空白應該比下邊緣的空白寬。 

3. 不要使用太多不一樣的字體 

爲了保證網頁的可讀性和專業性，你不該該使用超過3種不一樣的字體。使用太多的字體會給讀者帶來困擾，也會使你的頁面看起來雜亂。 

另外一方面，使用更少的字體，使你的頁面看起來整潔和易讀。你可讓標題使用一種字體，正文使用一種字體，標語和副標題使用另外一種字體。 

4. 使用等寬字體來顯示代碼段 

若是你是一個開發人員，你可能想把一些代碼片斷放在你的博客上。若是是這樣，請使用等寬字體顯示你的代碼片斷。那麼，什麼是等寬字體？這個字體的字母和每一個字符佔有相同數量的水平空間。 

那麼，在一個網站上應該用什麼字體顯示代碼片斷呢？Courier字體是目前最流行的，可是爲何不嘗試使用目前最新的字體，如Consolas 或者 Monaco？若是你想選擇更多的字體，你必定要看看這裏。 

5. 注意對比度 

若是你的網站排版很好，那麼另一點要考慮的就是對比度。若是你的頁面背景是灰色（#999999），那麼不要使用深灰色的文本（#333333），不然你的內容可能難以辨認，尤爲是老年人或者視力很差的人。 

通常來講，若是你的網站是與黑客、黑帽SEO或哥特搖滾等有關，你應該使用淺色背景和深色的字體造成鮮明的對比，加強你的網站的可讀性。 

6. 保證有劃線的文本能夠連接 

瀏覽器的默認連接格式是一個帶下劃線的藍色字體文本。儘管藍色經常會改變爲其餘顏色，下劃線一直是公認的連接格式。這就是爲何有下劃線的文本一般被認爲是能夠連接的，而不是其餘的意思。不然，這將會給你的讀者帶來很大的困擾。 

7. 建立一個樣式庫 

讓你的網站給讀者帶來視覺震撼的一個簡單而有效的方法是爲特定的用戶建立特定的風格。例如，建立.warning CSS類向讀者顯示警告信息。 

8. 標題和文本有層次感 

爲了提升網頁的可讀性，給標題、簡介、段落和正文建立出層次感是很是重要的，這樣你的文章很是形象的呈現給讀者，他們會迅速找到感興趣的部分。 

9. 不要擔心頁面有空白部分 

我所知道的最好的排版建議之一是：「不要懼怕頁面有空白部分」。它可使你的頁面看上去整潔和專業。不少人都喜歡蘋果的網站風格，緣由是：網頁雖然複雜精細，但頁面簡單並有大量的空白區域。 

10. 使用正確的符號 

若是你正在尋找方法改善你的排版，很重要的一點是使用正確的符號。例如，可使用雙引號（「」）來代替角秒符號（""）。或者你也能夠試試HTML字符編碼 &s;ldquo; „ 。 

原文參考自：http://caibaojian.com/521.html和http://www.iteye.com/news/25623

（本文算是結束我過年的吃喝玩樂，開始投向我所熱愛的網絡時代來咯！但願你們在新的一年裏學習進步。）