Programming Design Notes

Blueprint 是一套 CSS Framework，將平時製作網頁常用的 CSS 寫好。有時用 div 作網頁佈局時又要對不同瀏覽器作出調較，例如在 IE6 的 div 經常走到非預想的位置，要設定好不同瀏覽器的 CSS 實在很浪費時間和精力，幸好 Blueprint 已經做好了不同瀏覽器的設定，令我們可以專注於網頁開發的核心部份。

Blueprint 已經通過了 W3C 的認證，所以不同擔心用 Blueprint 做出來的網頁不是一個良好格式的網頁 (除非是自己寫的 HTML 或 CSS 過不了 W3C 的認證)。

下載 Blueprint: Download

現在大部份顯示器的像素是 1024 x 768，網頁的安全闊度是在 980 像素以下，超過這個闊度很大機會令用戶體驗不到最佳的瀏覽效果。因為在 1024 x 768 解像度的顯示器下看你的網頁會出現一條長長滾動條，給用戶拉左或拉向右，這意味用戶有機會看不到右邊的內容。

Blueprint 設定好最大闊度為 950 像素，並分為 24 格，每一格為 30 像素，格和格之間隔開 10 像素。即是 30 像素 * 24 格 + 10 像素 * 23 格，總共 950 像素。這樣說應該很難懂吧。看看以下的圖。


知道了基本結構後便開始試試利用 Blueprint 製作簡單的網頁佈局。

先在網頁的 head 內載入 Blueprint 的 CSS file。

<link rel="stylesheet" href="style/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="style/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="style/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

第 3 行的 CSS 會是 IE6, IE7 瀏覽器才會載入。IE 真是很麻煩…

先在 body 加入一個 div:

<div class="container">
</div>

所有的內容都會在這一個 div 內。Blueprint 提供了一個功能，在網頁開發期間可以將格顯示出來，只需在以上的 div 加上 showgrid 這個 class 就可以。

<div class="container showgrid">
</div>

現在設定網頁佈局。例如要將網頁佈局設定成 2 個欄位，像 Blog 的佈局，左邊是文章的位置，而右邊是放小工具的位置，可以根著以下設定:

<div class="container">
    <div class="span-18">
        Posts
    </div>
    <div class="span-6 last">
        Tools
    </div>
</div>

網頁佈局會是這個樣子:

你可以想像 span 就是格的意思，而 span-1 即是 1 格，span-18 即是佔用 18 格。而格和格加在一起是 24 即是剛好是 Blueprint 設定的最大像素 - 950 像素，在以上的例子是 span-18 和 span-6，加在一起剛好是 Blueprint 設定的最大像素。而排在最後的格需要加上 last 這個 CSS Class，不然會出錯誤。

如果要在網頁加上 header 和 footer 可根據以下的設定:

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-18">
        Posts
    </div>
    <div class="span-6 last">
        Tools
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

網頁佈局會是這個樣子:



這樣就設定了網頁基本佈局了，實在是大大減少了設定佈局時間。div 又不會出現在非預想的位置。

而在格內也可以放入格，格的總數不可超過包著它的格的數目，即是可以這樣:

<div class="container showgrid">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-18">
        <div class="span-10">
            Posts
        </div>
        <div class="span-8 last">
            AD
        </div>
    </div>
    <div class="span-6 last">
        Tools
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

網頁佈局會是這個樣子:

Blueprint 亦支援 border 的功能，格的最右邊會出現一條直線，用來分隔格和格。加入 border 或 colborder 這個 class 就可以，而其中 colborder 會佔用一個格的位置，border 則不會。

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-18">
        <div class="span-10 colborder">
            Posts
        </div>
        <div class="span-7 last">
            AD
        </div>
    </div>
    <div class="span-6 last">
        Tools
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

因為 colborder 佔用了 1 格位置，所以是 10 + 1 + 7 = 18。剛好是第 5 行的 div 的格數目。

網頁佈局會是這個樣子:



如果想 Posts 的位置不要那麼貼邊，想隔開左邊一格位置，可以加入 prepend-1，prepend-1 即是向左邊加入一格空位，除了 prepend 還有 append，加入 append-1 即是在格的右方留有一格空位，記著加入了 prepend 或 append 都要減少 span 的格數，好像以下這樣:

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-18">
        <div class="span-9 prepend-1 colborder">
            Posts
        </div>
        <div class="span-6 append-1 last">
            AD
        </div>
    </div>
    <div class="span-6 last">
        Tools
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

span-9 + prepend-1 + colborder + span-6 + append-1 = 9 + 1 + 1 + 6 + 1 = 18
加入 prepend 或 append 就是這個意思，原本第 6 行的 div 是 span-10，加入 prepend-1 後便變成 span-9，即是 prepend 或 append 的格數亦會計算在內。

網頁佈局會是這個樣子:


Blueprint 有一個特別的 CSS Class，就是 pull 和 push。意思是 推 和 拉，這個有點特別，本來 objA 是在 div A 內的，但將 objA 加上 push-1，objA 便會被推到下格的格子上，push-1 並不是 1 格 30 像素的意思，例如有一個 span-18 接一個 span-6，剛剛好 24 格，在 span-18 的東西加上 push-1 後，便會被推到 span-6 的位置上，而 span-6 的東西加上 pull-1 後，便會被拉到 span-18 的位置上，有點難懂吧，用以下的 HTML 自己試試吧!

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-18">
        <div class="span-9 prepend-1 colborder">
            <div class="push-2">Posts</div>
        </div>
        <div class="span-6 append-1 last">
            <div class="pull-2">AD</div>
        </div>
    </div>
    <div class="span-6 last">
        Tools
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

Posts 將會出現在 span-6 的格上，而 AD 將會出現在 span-9 的格上。

相關書籍: