24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » Dreamweaver教程:網頁設計排版的技巧
  • 近期文章

    • 網站設計指南:如何打造一個既專業又人性化的留學教育類網站?
    • 子網域的SEO維護指南,讓流量翻倍成長的秘訣!
    • 無可替代的神秘力量:探索黑色配色方案在網頁設計中的高級應用
    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
  • 網上推廣

    • 子網域的SEO維護指南,讓流量翻倍成長的秘訣!
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
  • 網頁設計

    • 網站設計指南:如何打造一個既專業又人性化的留學教育類網站?
    • 無可替代的神秘力量:探索黑色配色方案在網頁設計中的高級應用
    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

Dreamweaver教程:網頁設計排版的技巧

分類: 最新資訊 日期: 2015-02-17

Dreamweaver教程:網頁設計排版的技巧

排版在網頁設計中經常被忽略。其實這是很傻逼的,因為註重網頁排版確實可以提高你的網頁設計水平和可讀性。下面列出了10個非常有用的排版技巧讓你的網站看起來更好。

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”

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理