幾種有用的網頁排版技巧分享打賞

在網頁設計中經常會忽略排版,其實這是很不利于SEO和提高用戶體驗的舉動,因為注重網頁排版可以提高你的網頁設計水平和可讀性。下面分享幾種有用的排版技巧,希望有用。

1、糾正行高

最常見的網頁布局錯誤之一是定義了不正確的行高。行高是定義一行文本的高度,所以我們必須按照文本字體大小來設定行高。
一般來說,在設置文本行高的時候,我經常在字體大小的基礎上加上7個像素(對12-17像素的字體而言)

body{
font-size:14px;
line-height:21px; /* 14px + 7px */
}

2、糾正標題margin值

另外一個常見的錯誤是標題周圍不正確的margin值。標題其實是與它下面的段落是相關聯的,而不僅僅是兩個段落的分 割符。這就是為什么標題的margin-top比margin-bottom要寬。

3、不要使用過多的字體

為了確保可讀性和專業性,你的網頁上不應該使用超過3種字體。使用過多的字體會干擾你的用戶而且讓你的網站看起 來很亂。相反,較少的字體讓你的網站顯得干凈易讀。你可以標題使用一種字體,正文使用一種字體,最后 logo或副標題使用另外的字體。

4、代碼部分使用等寬字體

如果你是一位開發者(就像大部分讀這篇博客的人)你可能想貼一些代碼在你的博客里。如果是這樣,請使用等寬字體。 那么,什么是等寬字體?它就是字母和字符占相同水平寬度的字體。

那么在網站的代碼段你應該使用哪種字體呢? 到目前為止 Courier字體是最流行的,那么嘗試一下最新的一些字體像 Consolas或 Monaco怎么樣呢?那你一定要看看這里咯。這里

5、關注對比

即使你的網站有很好的排版了,另一個需要注意的是對比。如果你的頁面背景是中灰色(#999999),那么不要使用深灰色(#333333)的文本,否則你的內容很難看清,尤其是對一些年紀比較大的或視力差的人。

總之,除非你的網站是關于黑客、黑帽seo或哥特搖滾的,不然你應該使用淺色背景和深色字體來保證清晰的對比度增加你網站的可讀性。

6、只給鏈接的文本加下劃線

在我上網的12年中,瀏覽器用在鏈接的默認樣式一直是藍色文本加下劃線。雖然這個藍色經常被改成另外的顏色,但下劃線一直被當做是鏈接的常規樣式。這就是為什么除了鏈接你不要給其他的東西加上下劃線的原因。否則,這可能對你的用戶造成很大的困惑。

7、創建樣式庫

讓你的網站產生視覺震撼的一個簡單高效的方法是給特殊的頁面創建特殊的樣式。例如,創建一個.warning的CSS類來向 你的用戶顯示“警告”。

8、按級別來排列標題和文本

為了增加可讀性,給標題、介紹段落和常規文本創建標簽層級是很重要的,這樣你的用戶可以看清你的文章結構并能很 快的找到他們感興趣的部分。

9、大膽留白

我認為最重要的排版技巧之一是“大膽留白”。留白是指空白區或沒有使用的空間,它會使你的設計整齊而專業。許多人 喜歡蘋果網站的原因是:它盡管簡單但很精致,而且有很多留白。

10、正確使用標點符號

如果你想提升你的排版水平不容忽視的一點是正確使用標點符號。例如,引號經常用雙撇符號代替(譯者注:我想作者要表達的意思應該是全角符號和半角符號的區別,就像中文的引號和英文的引號不同一樣)。

注意區分雙撇符號:

He said 'Hello'.

同樣的文本,使用引號:

He said "Hello".

這樣更好,不是嗎?如果你是WordPress用戶,你可能很樂意知道你最喜歡的博客平臺自動將雙撇號轉換為智能的引號 。否則,你得使用HTML字符編碼。如下所示:

He said "Hello".

注:轉自網絡,來源外文翻譯,個別技巧可能不適于中文頁面排版,但思想可以參考

幾種有用的網頁排版技巧分享
文章《幾種有用的網頁排版技巧分享》二維碼
  • 微信打賞
  • 支付寶打賞

已有32條評論

  1. 涅槃歸來

    拜讀了“設計園地”兩篇大作,都很有收獲,謝謝分享!

    2013-03-27 11:59 回復
  2. 灑脫口才網

    挺收益的 支持博主

    2012-11-05 13:47 回復
  3. 小鬼哥

    有些真沒注意到,比如參考蘋果的留空白,我還是不太贊同。

    2012-07-31 07:35 回復
  4. 小鬼哥

    有些真沒注意到,比如參考蘋果的留空白,我還是不太贊同。

    2012-07-31 07:35 回復
  5. 悠閑資訊網

    不錯,把它保存到我的博客保存

    2012-07-30 18:02 回復
    • 樸人博客

      你這句話讓我很糾結額。怎么理解哦?呵呵

      2012-07-30 18:07 回復
      • 悠閑資訊網

        有用的文章我就會把他放到我的博客 以后要找就在我的博客找就可以了

        2012-08-08 10:45 回復
  6. 悠閑資訊網

    不錯,把它保存到我的博客保存

    2012-07-30 18:02 回復
    • 樸人博客

      你這句話讓我很糾結額。怎么理解哦?呵呵

      2012-07-30 18:07 回復
  7. 土木壇子

    補充,我說的是你文中的引號。

    2012-07-25 16:16 回復
    • 樸人博客

      不熟悉英文啊,也沒找到原文出自哪里,可能翻譯的人都翻譯錯了吧。

      2012-07-25 17:36 回復
  8. 土木壇子

    補充,我說的是你文中的引號。

    2012-07-25 16:16 回復
    • 樸人博客

      不熟悉英文啊,也沒找到原文出自哪里,可能翻譯的人都翻譯錯了吧。

      2012-07-25 17:36 回復
  9. 土木壇子

    He said “Hello”.上面的這個寫法是不對的,要注意中文和外文中雙引號的不同。要不很難看。

    2012-07-25 16:15 回復
    • 樸人博客

      這個我也搞不清楚了,在別的地方看到的別人翻譯的文章,我改成單引號和雙引號了,

      2012-07-25 17:17 回復
  10. 土木壇子

    He said “Hello”.
    上面的這個寫法是不對的,要注意中文和外文中雙引號的不同。要不很難看。

    2012-07-25 16:15 回復
    • 樸人博客

      這個我也搞不清楚了,在別的地方看到的別人翻譯的文章,我改成單引號和雙引號了,

      2012-07-25 17:17 回復
  11. 小思設計

    過來學些了!

    2012-07-24 10:41 回復
  12. 小思設計

    過來學些了!

    2012-07-24 10:41 回復
  13. 籃球比分

    學習了,謝謝分享

    2012-07-24 10:34 回復
  14. 籃球比分

    學習了,謝謝分享

    2012-07-24 10:34 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖