<![CDATA[wowbox blog (網頁設計知識庫)]]> http://www.wowbox.com.tw/blog/ PJBlog2 2008-08-20T03:36:43+08:00 <![CDATA[USB 3.0 長這樣！]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:36:43+08:00 2008-08-20T03:36:43+08:00

USB 3.0 規範實際上只完成了 90% 而已，但因為 AMD 和 Nvidia 兩間公司怕 Intel 挾著身為 USB Implementers Forum 主導者的優勢，在開發晶片組上偷跑，所以聯手揚言如果 Intel 不把規格放出來的話，他們就要另起爐灶，開發自家的 USB 3.0，所以 Intel 只好提早把規格放出來。

新的 USB 3.0 當然和 USB 2.0 相容，但單向傳輸速率高了五倍，而且因為新規格是 Full Duplex 的，因此雙向傳輸合計等於是以前的十倍之多。可惜 USB 產品中用得到 Full Duplex 的應用不多，所以這個全速應該是發揮不出來。另外，因為考量到近代使用 USB 供電、充電的設備愈來愈多，因此 USB 3.0 的供電力也提高到了每個 port 900mA，這樣接 USB Hub 也是方便許多。

上圖就是 USB 3.0 的線。據說線和 Cat.5 的一樣粗。
]]> http://www.wowbox.com.tw/blog/default.asp?id=3007 <![CDATA[IE7的web標準之道 Ⅰ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:31:37+08:00 2008-08-20T03:31:37+08:00
且看《IE7的web標準之道》系列文章，和你一起見證IE7的改變！

兩份報表

什麼也別說，讓我們從一張統計圖表開始。這是網站在最近一段時間內，統計出來的關於瀏覽器類型的報表：



瀏覽器類型的報表(2008.1.1~2008.2.15)

從這份報表中可以清楚的看到IE6依然佔據著半壁江山。而即使在博客園這樣,使用FireFox瀏覽器較多的集合體用戶中，FireFox的使用率也只是佔到13%。位居第二的便是微軟強力推廣的IE7，份額已經佔到接近30%。

如果說上面的統計圖表，表明了IE7的市場佔有率的話，那麼下面的這張圖表則說明了IE7的強勁的市場佔有速度。下面的圖表是我的博客在去年某段時間內（2007年5月1日——2007年6月30日），統計出來的關於瀏覽器類型的統計報告：



瀏覽器類型的報表(2007.5.1~2007.6.30)

對比第一份報表和第二份報表，可以發現，IE6的市場佔有率在被IE7和FireFox快速的蠶食，其中IE7的搶佔份額比FireFox更多。

通過對上面兩份報表的分析，網頁設計人員可以得到的信息是：

IE6依然是主流，需要提供絕對的頁面兼容
IE7有著強勁的佔有率和發展速度，也需要提供很好的頁面兼容
FireFox的使用者在不停的增加，並有一定的市場佔有率，需要提供較好的頁面兼容
其他內核的瀏覽器，目前仍然不成氣候，在頁面兼容上只需要兼顧一下即可

黑馬IE7

隨著微軟不停的採用更為 強勁和有效的推廣手段 ，IE7的市場佔有率將會進一步的擴展，較為保守的估計1-2年內IE7的市場佔有率，將會高於IE6的市場佔有率。所以，網頁設計人員必須從現在就開始，關注IE7的一些改進和升級，特別是對於web標準方面的改進和變化。

IE7不僅僅是市場佔有速度方面表現出強勁的一面，在功能改進和對IE6bug的修正上也是有很大的動作。可以說，在web標準的道路上IE7走出了非常漂亮的一步。

IE7的web標準之道系列文章

IE7走出了漂亮的一步，但是我們呢？我們是否準備好了呢？我們是否瞭解IE7在web標準道路上的歷程呢？我們是否也邁出了web標準的那一步呢？

《IE7的web標準之道》系列，我想從我知道的方面，細細數來IE7在web標準到了上的點點滴滴，相對於IE6的改進和升級，對於IE6中bug的修正，為了兼容IE6而採取的一些措施和方法。我希望通過這個系列的寫作，以及IE7市場佔有率迅速膨脹的時代契機，讓更多的朋友開始關注web標準設計。

《1：前言（兼目錄）》
《2：更豐富的CSS選擇符》
《3：引起頁面佈局混亂的禍首 》
《4：歌劇院魅影bug 》
《5：上去了！終於上去了！》
《6：置換元素與行距bug 》
《7：float雙倍margin bug 》
《8：躲貓貓bug》
《9：瘋了的邊框線》  ]]> http://www.wowbox.com.tw/blog/default.asp?id=3006 <![CDATA[AS把所有內容變成黑白的]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:25:09+08:00 2008-08-20T03:25:09+08:00
程序代碼 程序代碼
import flash.filters.ColorMatrixFilter;
var myarr:Array = [0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0];
var mycler:ColorMatrixFilter = new ColorMatrixFilter(myarr);
_root.filters = new Array(mycler);
//以上內容放在第一貞，所有內容就變成黑白的了!
]]> http://www.wowbox.com.tw/blog/default.asp?id=3005 <![CDATA[Javascript 淺析註冊事件 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:17:43+08:00 2008-08-20T03:17:43+08:00 http://www.cssrain.cn/article.asp?id=985

首先是最常規的方法：
程序代碼 程序代碼
<p id="para" title="cssrain demo!" onclick="test()" >test</p>
<script>
function test(){
  alert("test");
}
</script>

當某一天，我們知道JavaScript要跟HTML結構實現分離後，就會改了一種寫法：
程序代碼 程序代碼
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}
window.onload = function(){
    document.getElementById("para").onclick = test;
}
</script>

當我們工作越來越久後，有時候我們需要對某個元素綁定多個相同的事件類型：
程序代碼 程序代碼
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
     document.getElementById("para").onclick = test;
     document.getElementById("para").onclick = pig;
}
</script>

如果按照上面的寫法，我們只能輸出第二個函數。
這時候我們需要用到attachEvent方法：
程序代碼 程序代碼
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
     document.getElementById("para").attachEvent("onclick",test);
     document.getElementById("para").attachEvent("onclick",pig);
}
</script>

在一段時間內，你並沒發現這段代碼有任何錯誤。
某一天，一個名叫firefox的瀏覽器 闖入你的視野，當我們把這段代碼放到firefox中執行後，
發現並不能正常運行。 問題就這樣，越來越多，然而作為一名JS程式設計師，這些都是必須面對的。

為了解決這段代碼的平台兼容性問題，我翻翻手冊，知道了firefox跟ie的區別：
firefox中註冊事件使用：addEventListener方法，同時為了兼容ie，我們必須用到if ... else...
程序代碼 程序代碼
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

window.onload = function(){
         var element =  document.getElementById("para");
         if(element.addEventListener){  // firefox  , w3c
                element.addEventListener("click",test,false);
    element.addEventListener("click",pig,false);
         } else {   // ie
    element.attachEvent("onclick",test);
    element.attachEvent("onclick",pig);
         }
}
</script>

此時，代碼就可以在多個平台上工作了。

但隨著水平的進步，你不滿足每次都去判斷，你想把這個判斷封裝起來，以後可以直接調用：
程序代碼 程序代碼
<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
  alert("test");
}

function pig(){
  alert("pig");
}

function addListener(element,e,fn){
     if(element.addEventListener){
          element.addEventListener(e,fn,false);
     } else {
          element.attachEvent("on" + e,fn);
     }
}

window.onload = function(){
         var element =  document.getElementById("para");
         addListener(element,"click",test);
         addListener(element,"click",pig);
}
</script>

至此，作為一個程式設計師的工作就完了。
中間我們從一個最傳統，最基本的寫法，然後實現Js和HTML的分離，然後又實現對同一個元素註冊多個事件，期間，我們發現註冊事件的兼容性問題。最後我們對註冊事件的方法進行封裝，方便以後使用。]]> http://www.wowbox.com.tw/blog/default.asp?id=3004 <![CDATA[不要犯WEB字體編輯的10種錯誤 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:12:51+08:00 2008-08-20T03:12:51+08:00
雖然許多設計師已非常熟練的使用了Web標準，讓人遺憾的是有很多細節的排版處理仍然和傳統的屏幕印刷要求背道而馳。這裡有10種致命的語義錯誤的演示，把它們公佈出來以避免您在網頁排版中繼續使用：

1、使用連字符而不要用一個em的虛線



使用em的虛線是現在的WEB編輯非常流行的做法。

2、使用句點，而不是省略號



這是一個專門的印刷方面的省略號標記（特別是在西歐字符中），由三個點組成，區別於中文裡面的省略符號。

3、使用正確的引號



在引用的部分，你應該保留引號在需要的地方，這將表示該部分是授權使用還是部分免費的發佈的。

4、嚴格控制句子之間的雙倍間距



這是一個來源於ASCII時期的經典錯誤，雙倍間距的句子已經沒有人再使用了，請你注意這點。

5、對於版權符號的準確使用



使用錯誤的版權符號，不但侵犯了版權協議也可能對你的版權保護產生負面作用，你應該使用McCoy (&copy;), 這才是標準版權符號。  

6、句子中不要使用過多的強調表達



你可以使用粗體，斜體，或者部分下劃線來強調你的內容，但是請不要在同一行內使用它們。

7、下劃線標注的是您的超文本鏈接而不是其他內容



這樣的內容並不會讓閱讀更為清楚，事實上讀者根本搞不清他們有何重要，如果你一定要這麼做，你可以嘗試用border-bottom: solid 1px #00f;來代替上面的效果。

8、通過photoshop設計字體假的樣式



如果你的字體並沒有提供粗體，斜體等樣式，請不要在photoshop中把他們製作成圖片然後混到你的WEB排版中，這樣做非常幼稚。

9、不要使用口音上的字符



當你使用某些其他國家語言的詞彙時，特別是人名，請不要想當然的用口音來判斷書寫，這是很不禮貌的做法。

10、不要使用CSS來定義大寫字符



大寫字符首先是難以閱讀的，如果不是作為裝飾的需要，請盡量少的使用它們，特別是在整行的文字排版中。]]> http://www.wowbox.com.tw/blog/default.asp?id=3003 <![CDATA[網站的視覺設計 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:06:44+08:00 2008-08-20T03:06:44+08:00
logo：
基本logo特徵，符合logo設計基礎（平面設計通用）顯示器效果：清晰度，最小尺寸（因顯示器分辨率而帶來的，等同線下平面設計的印刷效果）

文字：
內容等級決定字體、字號大小、粗細；狀態決定顏色（默認或者根據網站特殊統一）
廣告、內容圖片：
尺寸樣式的定位，同一頁面的和諧性，圖片的優化，位置的節奏，大小對比。

icon：
品牌性，表達準確合理，設計手法（依據品牌性），一致性，作用：吸引，醒目，方便識別、理解、操作、記憶。

可點擊（button)：
區別（不可點擊），根據人的生活經驗：厚度，可按，質感（實體聯想），色彩（品牌性、統一性、對比性）；統一的樣式大小（依據裡面文字的內邊距統一）

背景圖片：
氛圍效果營造，同產品的統一性，優化（品質大小，色彩信息，實現方案）。

圖文排版：
主圖次文，圖文節奏，空隙，模塊化。

當前狀態：
放大（形狀），變色（反色、對比色、明度純度區別色），鏈進鏈出後指定內容提示。

交互控件：
樣式合理準確性（人對系統默認的認知和生活常規認知），狀態（視覺表現樣式和動作過程優化），創意。

loading：
內容關聯性（loading前後的內容關聯），無聊等待的樂趣，體積、面積優化，創意。
用戶反饋_ 成功、出錯、提示、無結果：
文案（明確、合理、人性化、創意），圖形（明確、醒目、色彩的心理認知準確度）。

動畫效果：
過程合理（模擬真實環境的合理化），連續，節奏感，用戶日常動作表現，音效配合，創意。

首尾設計：
首（品牌宣傳、自身特點、明確內容、氣氛表達、創意。尾：呼應、節奏（與首），創意。

適應屏設計（全屏設計）：
最大最小屏幕的考慮（文字、圖片的位置、折行效果）

固定尺寸的柵格設計：
合理的單元格（考慮黃金分割），單元格面積節奏，邊距統一性

demo設計樣稿：
對內容最多最少的考慮。

頁面：
品牌性，基調元素一致性，復用性，節奏感、面積感，視覺第一吸引，引導瀏覽，點線面關係，素描原理（運用素描的基本規律來做頁面）。

閱讀：
背景對閱讀（視力）的舒適度，內容與背景的對比舒適度。 ]]> http://www.wowbox.com.tw/blog/default.asp?id=3002 <![CDATA[註冊表單的規則 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-20T03:00:59+08:00 2008-08-20T03:00:59+08:00 Patterns for Sign Up &Ramp Up》讀後感，細細讀完了發現，它更為接近吸引註冊、提升活躍度的社區構建引導，是一份社區活躍會員度研究的好資料。

既然答應寫讀後感，就從我的視角來說一點與註冊有關的東西，先把整篇資料的骨架分解一下，然後再結合其中觀點談目前的感受。

註冊其實是個有點枯燥的任務，《Patterns for Sign Up &Ramp Up》裡提到的觀點是：

Give the user good reasons to join
乍看起來有點營銷的味道，事物的本質不變，但人的情緒是可以扭轉的——讓用戶有充分的理由來註冊；

Make the sign-up process feel effortless
改變枯燥令人生厭的感覺，就是我們需要做的努力：讓表單或整個註冊過程變得輕鬆省力；

Don't leave new users hanging
這個觀點在整篇資料裡的意義側重於提升活躍度的辦法——用戶不是完成了註冊就完成了使命，瞭解社區的新事物才是剛剛開始；

Accelerate initial connection-making
如果說活躍度從上一個觀點拉開序幕，那麼這裡就是如何使用戶在社區裡開始生活，建立聯繫比如通過自己之前發佈的信息來聯繫好友，真的體驗海內存知己，天涯若比鄰的感覺。

整篇的骨架結構就是一個循序漸進的行為引導，為facebook的引入會員、維護社區活躍的初始引導，做了詳細的註解和指導，可做手冊查閱。讀後側重工作的總結，梳理幾條註冊表單的規則：

1. 當表單結構需要多步時，需要注意的是給出清晰的導航
使用進度標尺來告訴用戶當前的位置和整個步驟
強調幾個步驟中的邏輯聯繫，比如標明：step1、step2、step3
用有意義的圖片或ICON甚至是標題來解釋各個步驟
使用簡單的語言或第二人稱描述行為動作
邏輯步驟最好限制在3步內

2. 用戶在註冊行為中的提示
提示信息（tips）盡量在需要幫助或有前後行為銜接的地方出現
對用戶的鼓勵應在進程中體現，如每完成一項輸入提示一個打勾的圖標
盡量避免出現彈出框的警示提醒
ICON的出錯提示避免用警告的表達，使用戶有挫敗感
簡單易識別的ICON來標記提示、成功、出錯的樣式
提交表單時如果有出錯，過長的表單最好將出錯提醒顯示在整表頭部，指引用戶改正

3. 關於文案
質量重於數量，一針見血地說出亮點，而非平鋪羅列
盡力避免有特殊含義的文案，如果有專屬名詞請一定要解釋清楚，避免用戶的困惑
盡力思考文案表面的亮點，什麼才最吸引用戶，有時「最新」的字樣不一定是用戶最感興趣的
在我們以往的項目中多項數據和實踐強調證明文案真的很重要

4. 表單的佈局
盡量使用對齊的字段、等長的輸入框以及一致的視覺樣式來減少視覺干擾
盡量控制在一屏內出現3-6個字段和輸入框（多用於多步驟的情況）
如果有選填和必填時標明差別

為不同概念的信息歸類，盡可能地分開選填和必填
這些表單設計的通用規則，美國Yahoo的LukeW同學對表單做的充分解釋也涵蓋了它們，都是最為常用的，總結一下給同學們參考，活躍度的引導還是有非常多能深挖的點。這裡按下不表，留作後續分解。]]> http://www.wowbox.com.tw/blog/default.asp?id=3001 <![CDATA[標記語言——為文字指定樣式 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-17T16:12:52+08:00 2008-08-17T16:12:52+08:00 Chapter 12 CSS佈局

標準化設計解決方案 - 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook

Part 2: Simplebits Of Style  簡短精悍的樣式

Chapter 13 為文字指定樣式

想以一章的篇幅來討論用CSS設定文字樣式的做法是個好點子。一般處理文字內容大概是應用CSS最多的地方，就算對沒有完全遵守標準的網站來說也是一樣。去掉網頁中反覆出現的<font>標籤曾經是(現在也是)十分吸引設計者的事情，而且不難看出以CSS控制文字排印的巨大優勢，也就是進一步分離內容和展示方式。

從先前的很多例子我們知道了CSS能處理許多情況，而設定文字樣式就算對最基本的網頁來說也是加上設計元素最簡單的方法。同時，以CSS為文字加上樣式也能讓我們避免在頁面內加上不必要的圖片。

在這一章裡，我們將看到CSS如何把一段乏味普通的文字帶到另一個高度(以新色彩，大小和字體)。

如何讓超文本看起來更酷？

指定文字樣式是CSS最擅長的工作之一，就算是面對略嫌老舊，不完整支持CSS進階功能的瀏覽器也是一樣。在過去，設計者與開發者或許會想在設計文字達到大小，粗體之外的效果時，製作出以今日標準來看無法忍受並且難以使用的網頁(曾經看過文字大多以圖片表現的網頁嗎？但你又恰巧在使用文字瀏覽器的時候...)

為了提供你一些使用圖片之外的替代方法同時能回答上面這個問題，在這章中，會用一段尚未設定樣式的文字作為開頭，逐漸為它加上各種CSS規則，使它成為引人注目的設計。

不斷改變的Times

開始先以瀏覽器的預設字體看一段即將處理的文字。以我的情形來說，預設字體是16像素的Times。並在Mac OS X上面使用Safari瀏覽器，因為這樣，所以看到的文字會是以反鋸齒方式描繪的，如果是使用Windows XP並啟動了ClearType的話，也能看到類似的效果。

Times(或者是變體 Times New Roman)是許多瀏覽器的預設字體，然而，這很容易被使用者改成他們自己喜歡的字體，因此你當然不能依賴這個預設值。

圖13-1顯示了我們在本章裡使用的尚未加上樣式的文字內容：一個以<h1>標記的簡單標題，跟這是三段家居裝潢的技巧說明。


圖13-1 瀏覽器顯示標題，文字的預設效果

改變行高

最簡單，最有效的文字樣式效果之一，是line-height屬性，在每行文字之間加上一些額外的空間，就能讓文字段落更容易閱讀，更吸引人，也能為你的頁面帶來奇妙的效果。

只要為<body>標籤加上以下的CSS規則就能完成這個技巧。當然也可以為其它標籤加上這條規則，比如說只想改變<p>的行高。
程序代碼 程序代碼
body {
  line-height: 1.5em;
  }

這段代碼的意義是：頁面上文字的行高應該是文字高度的1.5倍。我喜歡在指定line-height的時候使用em單位，因為它們會隨著字體大小而改變。

圖13-2顯示的是加上line-height之後的效果。


圖13-2 預設文字加上行高之後的效果

看起來已經變得很棒了，小小的line-height能辦到的效果實在驚人。

都在家族裡

當然，我們也能改變字體，但需要留意的是可能會被使用者系統上安裝的字體限制住。

接著以font-family屬性為實例加上一組希望使用的字體。這邊的概念是：指定一組字體列表，中間以逗號隔開，並且以希望使用的順序排列。如果使用者沒有安裝列表中的第一個字體，瀏覽器會選用第二個字體，以此類推。
程序代碼 程序代碼
body {
  font-family: Georgia, Times, serif;
  line-height: 1.5em;
  }

在前面這個例子裡，所要求的是"用Georgia字體修飾所有文字，如果使用者沒有安裝Georgia的話，改用Times，如果還沒有安裝Times的話，就是用預設的serif字體"。

圖13-3顯示了示例加上font-family之後的效果。


圖13-3 以Georgia字體顯示的示例效果。

名稱內含空格的字體

如果像指定名稱內含空白的字體(比如說Lucida Grande)，就必須以引號包住整個字體名稱。

在下面的例子中，將把Lucida Grande(有名的Macintosh字體)選為希望使用的字體，並且指定Trebuchet MS(有名的Windows字體)作為第二候補，再加上一個通吃的sans-serif。在前面兩種字體都沒有安裝的情況下，取用預設的sans-serif字體。
程序代碼 程序代碼
body {
  font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
  line-height: 1.5em;
  }

字距調整(又稱作字母間隔)

字距調整是個在印刷界描述文字間隔的名詞。與其同義的CSS屬性是letter-spacing。接著，讓我們為<h1>標籤使用letter-spacing屬性，為示例的標題加點料。

在為<h1>標籤應用letter-spacing之後，就能使標題更引人注目，而不必打開圖片編輯器開始製作圖片文字。

首先，讓我們為letter-spacing屬性加上負數值把標題的文字緊縮：
程序代碼 程序代碼
h1 {
  letter-spacing: -2px;
  }

修改成果在圖13-4里能看到。


圖13-4 為<h1>加上負數值得letter-spacing

或者嘗試加上正數的letter-spacing並同時用font-style屬性把標題改為斜體：
程序代碼 程序代碼
h1 {
  letter-spacing: 4px;
  font-style: italic;
  }

圖13-5是依照上述修改過後的效果，單就文字來講變得十分引人注目了，不是嗎？不使文字間距變動的太誇張是個明智之舉，因為這樣反而很容易使文字變得難以閱讀，一旦內容難以閱讀，還有誰會在意它吸不吸引人呢？你說是吧!


圖13-5 使用正數letter-spacing值，並且應用斜體

首字大寫

首字大寫在印刷界十分常見，這能為段落加上華麗而優雅的效果，而且不必用上圖片就能辦到這種效果，只用CSS就夠了。

首先，必須為標記源代碼加上一個"樣式錨點"讓我們有辦法調用第一段的第一個字母。我們將 "I" 用一組<span>標籤包起來並給它指定class=drop，如果我們才能在頁面或整個網站裡重複使用首字大寫效果。
程序代碼 程序代碼
<p><span class="drop">I</span>f you're painting with latex paints, and the job ...

在某些完全支持CSS2規範的現代瀏覽器中，我們可以用：first-letter偽類設定段落首字效果，而不必加上額外的<span>標籤，雖然語義上非常棒，不幸的是許多瀏覽器都不支持這個效果。

現在我們能完全控制第一段的 "I" 字母了，讓我們加上CSS聲明，以便把字體放大，同時將它浮動到左側(這樣，其他的文字才不會包圍它顯示)，我們也會加上裝飾用的背景，邊框。
程序代碼 程序代碼
.drop {
  float: left;
  font-size: 400%;
  line-height: 1em;
  margin: 4px 10px 10px 0;
  padding: 4px 10px;
  border: 2px solid #ccc;
  background: #eee;
  }

結合我們現在為示例內容加上的所有樣式，圖13-6是瀏覽器顯示首字大寫的效果，它完全沒有用上圖片，只靠簡單的CSS與標記語法完成。


圖13-6 用CSS製作的首字大寫效果。

文字對齊

同樣受印刷界啟發，我們能以text-align屬性為文字應用左右對齊效果。左右對齊之後的文字會拉開單字之間的距離，讓每行的寬度變得一樣長，造出緊密，界限明確的分欄效果。
程序代碼 程序代碼
body {
  font-family: Georgia, Times, serif;
  line-height: 1.5em;
  text-align: justify;
  }

圖13-7是作為示例的文字，現在左右對齊了!


圖13-7 以text-align屬性左右對齊過的文字效果

留意文字內容在左側以及右側都排列成一條直線。其他text-align屬性能使用的設定值有：left,right,center。

舉例來說，我們也能為<h1>標籤應用text-align屬性，將示例的標題居中。
程序代碼 程序代碼
h1 {
  letter-spacing: 4px;
  font-style: italic;
  text-align: center;
  }

圖13-8是標題居中之後的效果。


圖13-8 用textalign屬性把<h1>居中

轉化文字

有個text-transform屬性能轉化文字內容的大小寫，而不管標記內容的大小寫是怎樣的。舉例來說，標題是以下面這段的寫法標記的：
程序代碼 程序代碼
<h1>A Painting Tip</h1>

只要在CSS內使用text-transform屬性，就能把整個標題轉化成大寫(想要的話也能轉化成小寫)，而不必修改標記源代碼的內容，除了先前為<h1>標籤加上的樣式之外，把標題全部變成大寫的CSS規則就是這麼簡單：
程序代碼 程序代碼
h1 {
  letter-spacing: 4px;
  font-style: italic;
  text-align: center;
  text-transform: uppercase;
  }

成果就像13-9這樣，不必與標記源代碼較勁了，只要改改CSS，就能改變頁面(甚至整個網站)某些特定標籤的大小寫用法。


圖13-9 用CSS把標題變成大寫

小型大寫字母

大多數瀏覽器都支持font-variant屬性，讓我們以小型大寫字母修飾內容(也就是以不同大小的大寫文字顯示內容)。

讓我們為示例的標題加上font-variant屬性：
程序代碼 程序代碼
h1 {
  letter-spacing: 4px;
  text-align: center;
  font-variant: small-caps;
  }

圖13-10 顯示了標題換用小型大寫字母之後的效果：這又是一個以標記語法和CSS模仿印刷界做法的方法。


圖13-10 用了小型大寫字母的標題

段落首行縮進

再次向印刷界看齊(天哪，你看得出這裡的趨勢嗎？)，我們可以利用text-indent屬性縮進段落第一行內容。加上正值的話，就會使文字縮進指定的量。

通過將示例中的每個段落縮進3em或者說是3個字符能夠佔用的最大寬度。我要拿掉首字大寫，讓它不會與第一段第一行的縮進效果打架。

縮進所有<p>的第一行所需的CSS就像這樣：
程序代碼 程序代碼
p {
  text-indent: 3em;
  }

圖13-11顯示了修改效果，你能看到每段文字的第一行都縮進了我們設定的值，會選擇使用em單位是因為，如此一來縮進長度會與字體大小維持正比，當使用者決定自己放大或縮小字體時，這個方法就能展示它的好處了。


圖13-11 用text-indent屬性縮進段落首行的效果

歸納

討論了幾個為文字指定樣式的CSS屬性之後，希望你能瞭解大多數時候，你不需要依賴繪圖工具也能造出不錯的效果。通常只要為標記源代碼加上一點樣式就夠了，有時還能達到非常棒的效果。

當然，有些狀況可能需要把文字做成圖片，比如說公司的標誌，或者是做某些頁面元素的時候需要用到的特殊字體，任何事情的關鍵都在平衡，試著先用CSS指定樣式，如此一來你的標記源代碼會更乾淨，更容易使用。

CSS提供了修改文字，加上樣式的控制方法，結果也好的令人驚訝，這會是個很不錯的設計工具，讓你能繼續維持短小靈活的標記源代碼。]]> http://www.wowbox.com.tw/blog/default.asp?id=3000 <![CDATA[標記語言 CSS佈局 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-17T13:15:40+08:00 2008-08-17T13:15:40+08:00 Chapter 11 打印樣式

標準化設計解決方案 - 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook

Part 2: Simplebits Of Style  簡短精悍的樣式

Chapter 12 CSS佈局

本書到此為止，討論的主要是頁面內部元素，也就是內容，但是大結構怎麼辦？長久以來，設計者都依賴表格進行分欄佈局，常常在表格之內嵌套其他表格以便達成恰巧正確的間隔，視覺效果。這些龐大的排版內容不僅下載很慢，維護起來也很費心力，更別提文字瀏覽器，屏幕閱讀器，小屏幕設備根本無法正確讀取了。

在這一章內，將使用四種常見的做法，結合CSS於結構化標記語法製作兩欄佈局。很快地就會發現，不用嵌套表格，間隔用的GIF也能做出分欄版面佈局。

稍後在"技巧延伸"中，將會討論Windows版Internet Explorer 5.0盒模型的問題，以及繞過它的方法。也將分享一個以CSS達成等寬欄位的簡單秘密。

要如何以CSS作出兩欄版面佈局？

答案是有好幾種方法，為了帶領你起步，同時幫助你瞭解兩種常見方法的差異(浮動與定位)，因此先把焦點放在四種不同的方法上，在此每一種方法都能做出兩欄佈局，同時具備頁首和頁尾。

我的願望是：你能以本章作為指引開始構建一個網站，並發揮本書其他章節之內的方法製作內容。

我們將討論的四種方法都應用在文檔的<body>與</body>標籤之間，同時我會在開始討論每種方法之前介紹將會使用的標記語法結構。

為了讓你了解圍繞著每種方法的頁面結構，讓我們大致看一下還需要加入些什麼：
程序代碼 程序代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...方法示範...
</body>
</html>

為了讓你可以瞭解要達成的版面配置，請看圖12-1：這就是我們想要完成的分欄版面佈局。


圖12-1 兩欄佈局的框線圖

方法A：浮動側邊欄
程序代碼 程序代碼
<div id="header">
  ...頁頭部分...
</div>
<div id="sidebar">
  ...側邊欄部分...
</div>
<div id="content">
  ...主體部分...
</div>
<div id="footer">
  ...頁腳部分...
</div>

上面就是我們要以CSS的float屬性製作成分欄佈局的標記源代碼，使用<div>標籤把頁面元素分成幾個邏輯段落，每個都設定了唯一的id：

#header: 包含標題圖片，導航欄等
#sidebar: 包含額外的內容鏈接與相關資訊
#content: 包含主要的文字內容，也是頁面的焦點所在
#footer: 包含版權信息，作者，輔助鏈接等
把這些頁面段落拆開，能讓我們能完全控制版面佈局，只要指定幾條CSS規則，就可以馬上完成兩欄佈局。

為頁首與頁尾指定樣式

要把內容結構轉化成分欄佈局的第一步，是為頁首，頁尾加上一點背景顏色以及一點內補丁，這樣能使內容更容易凸顯出來。
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

為方法A的結構加上前面這段CSS會使它顯示成圖12-2這樣，我為各個段落加了一些假象的內容。


圖12-2 為頁首，頁尾指定樣式

當然，在#header與#footer裡，可以繼續為這些段落指定適當的樣式，像是font-family，color，鏈接色彩等等。現在讓我們把兩欄版面製造出來。

浮動側邊欄

方法A的精華，在於它以float屬性把#sidebar放到主要內容<div>的任一邊去。以這個例子來說，將它放到內容的右側，但是放到另一側當然也行。

浮動#sidebar的關鍵在於，在標記源代碼中，必須出現在主內容<div>之前，這樣一來，側邊欄的頂部就會與主內容的頂部排齊。

接著，為#sidebar加上float屬性，同時把它的寬度設為30%，指定背景顏色：
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#sidebar {
  float: right;
  width: 30%;
  background: #999;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

圖12-3是加上這段CSS之後的顯示效果，能看到側邊欄跑到右邊去了，而主要內容在側邊欄範圍之內流動。


圖12-3 把#sidebar浮動到主要內容的右側

真正的欄位

看看圖12-3，我們還沒有真正完成兩欄佈局，為了完成這個效果還必須取#content這個<div>，指定與憂側邊欄寬度相同的右外補丁，因此產生放置#sidebar的空間。

需要加上的CSS就是這麼簡單：
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#sidebar {
  float: right;
  width: 30%;
  background: #999;
  }
#content {
  margin-right: 34%;
  }
#footer {
  clear: right;
  padding: 20px;
  background: #eee;
  }

我們會發現，我們給content設定的右外補丁大小比#sidebar還大4%，如此能在兩欄之間留下一點空位。圖12-4是以瀏覽器查看的效果，你可以發現只要為<div>設定右外補丁，就能造出第二欄的假象。


圖12-4 兩欄佈局

同時要留意的是對#footer所加上的clear:right規則，這個規則很重要，能確保頁尾一定會出現在側邊欄和內容區之後，而不受兩欄的長度變動影響，頁尾會避開任何先前出現的float內容。

現在有了能使用的兩欄佈局，可以繼續為現在的CSS聲明加上更多邊界，背景，邊框與其他元素，使外觀更吸引人。

至今為止我們都以百分比設定寬度，以便造出靈活的佈局(欄寬會自動隨著使用者的視窗寬度縮放)。我們也能以像素單位造出定寬佈局，但是以像素指定內外補丁大小時，必須注意IE for Windows錯誤解析CSS盒模型的問題，你能在本章的"盒模型問題"找到更多信息以及能用的解決方法。

方法B：雙重浮動
程序代碼 程序代碼
<div id="header">
  ...header content here...
</div>
<div id="content">
  ...main content here...
</div>
<div id="sidebar">
  ...sidebar content here...
</div>
<div id="footer">
  ...footer content here...
</div>

方法A的缺點之一是：為了浮動側邊欄，則必須在標記源代碼之內把側邊欄放到主內容<div>的前面，關閉CSS的瀏覽器，文字瀏覽器，屏幕閱讀器與其他不支持CSS的設備將會在頁面主要內容之前顯示(或念出)側邊欄的內容。這樣實在不嚴謹。

我們可以利用float做法，並避開這個問題，只要交換標記源代碼裡的主內容，側邊欄<div>的位置(如上所示)，然後以CSS將兩者浮動到不同邊即可。
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  float: right;
  width: 30%;
  background: #999;
  }
#footer {
  clear: both;
  padding: 20px;
  background: #eee;
  }

通過把兩個<div>浮動到不同方向，就能以最恰當的方式排列源代碼(主內容放在側邊欄前面)，同時仍能得到圖12-4這樣的效果。

避開兩邊

同樣重要的是，你必須將#footerdeclear屬性設為both，如此一來不管兩欄的長度多長，頁尾總是顯示在最後，而標籤源代碼的內容順序也改善了。

方法C：浮動主內容
程序代碼 程序代碼
<div id="header">
  ...頁頭內容...
</div>
<div id="content">
  ...主內容...
</div>
<div id="sidebar">
  ...側邊欄...
</div>
<div id="footer">
  ...頁尾內容...
</div>

還有個值得一提的方法，只需要用一個float屬性，同時標記源代碼仍然可以將主內容的<div>放在側邊欄之前。

只要將主內容的<div>浮動到左側，並且為它設定小於100%的寬度，如此一來就能在右側留下足夠空間擺放側邊欄。

CSS內容

方法C需要的CSS內容再簡單不過了，"一個float屬性"，內容區希望使用的寬度，以及兩欄之間留下的小邊界。
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

請注意我們並不需要定義側邊欄的寬度，因為它會自動填滿主內容<div>用剩下的空間(在這個例子中是34%)。

悲慘的背景

圖12-5就是以瀏覽器查看的成果，哦喔!在某些常用瀏覽器裡，側邊欄的背景顏色會出現在主內容區底下，由於側邊欄並未制定寬度，因此它想擴到與瀏覽器視窗一樣寬。


圖12-5 浮動內容，但是側邊欄的背景顏色透了出來

這個部分只要我們能在側邊欄左邊加上寬度與內容區相同的外邊界便可以避開這個問題。實際上我們會把外補丁設的稍微大一點，以便在兩欄之間留下一點空白。
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  }
#sidebar {
  margin-left: 70%;
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }


簡單樸素

或者是，如果涉及不需要用到背景色的話，那就不必設定邊界了，圖12-6是去掉整個#sidebar聲明，在為主內容<div>加上一點右外補丁之後的結果。此時兩欄會共用頁面預設的背景色。


圖12-6 不使用背景色的浮動內容

CSS則能縮減成：
程序代碼 程序代碼
#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66%;
  margin-right: 6%;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

除了加上左外補丁(或是省去背景色)之外，還有個使用背景圖片的替代做法能讓分欄具備背景色彩，我稍後會在本章的" 技巧延伸 "單元裡提示這個小秘密。

方法D：定位
程序代碼 程序代碼
<div id="header">
  ...頁首內容...
</div>
<div id="content">
  ...主內容...
</div>
<div id="sidebar">
  ...側邊欄...
</div>
<div id="footer">
  ...頁腳內容...
</div>

方法D是使用相同的標記源代碼結構，然後以最有效率的方式排列<div>：把主內容放在側邊欄之前，關閉樣式的瀏覽器，屏幕閱讀器會先收到主內容部分，再收到側邊欄，在定位時，標記源代碼內的順序與頁面元素出現的位置沒有關係。

能夠預測的高度

CSS內容與前三個方法有點類似，第一個差異是對頁首指定的像素高度，我們需要能夠預測的高度以便稍後為側邊欄定位。

在這裡隨機選了一個數字，而這需要根據頁首使用的內容調整，像是標誌，導航欄，搜索表單等。
程序代碼 程序代碼
#header {
  height: 40px;
  background: #ccc;
  }
#footer {
  padding: 20px;
  background: #eee;
  }


為各欄留下空間

接著，要為#content這個<div>設定右外補丁，就像前幾個方法一樣，這能為右側邊欄留下空間，稍後會使用絕對定位法(不是浮動)把右側邊欄放進去。
程序代碼 程序代碼
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#footer {
  padding: 20px;
  background: #eee;
  }


放進側邊欄

最後，要使用絕對定位法把#sidebar這個<div>放到#content的邊界裡，也必須去掉瀏覽器在頁面周圍加上的預設邊界，如此一來定位座標在所有瀏覽器之內就會一致了。
程序代碼 程序代碼
body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

在指定position:absolute之後，就能以top與right坐標把#sidebar準確的放到所想的位置(圖12-7)。


圖12-7 以定位做出的兩欄佈局效果

我們敘述了 "把 #sidebar這個<div>放到距離瀏覽器視窗上邊緣40像素，右邊緣0像素的位置"，除此之外，也能用bottom和left指定坐標。

頁尾問題

以先前的方法浮動分欄時，可以用clear屬性確保頁尾橫跨整個瀏覽器視窗的寬度，而不受主內容，側邊欄的長度影響。

在定位時，側邊欄的文檔流獨立於整個頁面之外，所以只要側邊欄比內容還長，它就會蓋住頁尾部分。(圖12-8)


圖12-8 側邊欄與頁尾重疊

面對這個問題我常用的解決方法之一，是為頁尾指定與主內容一樣的右外補丁，讓側邊欄能夠延伸超過頁尾。

使用這個方法的話，CSS需要調整成這樣：
程序代碼 程序代碼
body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  margin-right: 34%;
  padding: 20px;
  background: #eee;
  }

這個解決方案在內容很短，側邊欄很長的頁面上看起來有點怪，但是它的確有效，結果可參照圖12-9，示範了側邊欄避開頁尾的情況。


圖12-9 外補丁和主內容相同的頁尾

除了使用float屬性之外，也能用定位製造出分欄佈局，讓我們看看最後一個選擇，方法D。

三人行

如果想做三欄佈局的話該怎麼辦？沒問題，而且在使用絕對定位時很容易加入。只需要為主內容，也為加上左外補丁，大小足夠容納第三欄即可。

另一個側邊欄能夠放在標記源代碼之內任何地方，因為會需要再度使用絕對定位進行佈局。

假設加了第二個側欄，並將它取名# sidecolumn，接著以下面這段CSS為它空出位置，再把它放進去。
程序代碼 程序代碼
body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 24%;
  margin-left: 24%;
  }
#sidecolumn {
  position: absolute;
  top: 40px;
  left: 0;
  width: 20%;
  background: #999;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 20%;
  background: #999;
  }
#footer {
  margin-right: 24%;
  margin-left: 24%;
  padding: 20px;
  background: #eee;
  }

剛才完成的部分是在主內容，頁尾區空出左外補丁(避免重疊)，與之前做右側邊欄一樣，接著以絕對定位法放進新的#sidecolumn ，將它放在距離上邊緣40像素，距離左邊緣0像素的位置。

你有留意我們稍微修正了寬度以容納第三欄嗎？由於我們使用百分比，因此這個佈局會隨著瀏覽器的寬度縮放，或者也可以為任何一欄指定像素寬度，以便使佈局寬度固定下來。

圖12-10是用瀏覽器查看這個示例的效果，一份以CSS絕對定位完成的靈活三欄佈局。


圖12-10 以定位法作出的靈活三欄佈局

歸納

我們在這章稍微研究了以CSS規劃版面佈局是能夠達成的效果。本章的目的是提供你發揮的基礎，因此示範了兩種主要的做法：浮動和定位。

我希望你能繼續深入嘗試CSS佈局技巧，去掉頁面內的嵌套表格，並且換上更多瀏覽器與設備能讀取的靈活的結構化的標記語法。

如果你想知道更多關於CSS版面佈局的資訊，那麼一定要看看這些資源：

"The Layout Reservoir" 這是個使用絕對定位製作多欄排版的絕佳示例。
"From Table Hacks to CSS Layout: A Web Designer's Journey" : Jeffrey Zeldman撰寫的絕佳教學，記錄了建立雙欄佈局所需的步驟。
"CSS Layout Technoques: For Fun and Profit" : Eric Costello的各種CSS佈局資源。
"Little Boxes" : Owen Briggs編寫的許多CSS佈局示例的漂亮界面。
"CSS Zen Garden" : "示範以CSS為基礎的設計能達成什麼視覺效果"。 Dave Shea培養的"花園"以單一XHTML文檔展示讀者投稿的最新CSS設計(當然也包含佈局)。這是個能看到CSS佈局能力極致的神奇網站。
技巧延伸

現在我們經過了建立基本CSS佈局的基礎，該是討論Windows版Internet Explorer 5與5.5版，以及它們錯誤解析CSS盒模型這個不幸問題的時候了。稍後也會分享一個通過平鋪背景圖片達成等高欄位佈局的秘密技巧。

盒模型問題

本章開始的時候我們討論了建立多欄CSS佈局的方法，只用width屬性定義每欄的寬度，當你開始為這些欄位加上補丁，邊框的時候，事情就變得有些複雜了。為什麼？

不幸的是，Internet Explorer 5 for Windows在加上內外補丁，邊框的時候，無法正確計算外包元素的寬度。

舉例來說，除了IE5 for Windows之外，所有支持CSS1的瀏覽器都會將外包元素的寬度計算為寬度，內補丁，邊框三者相加，這是W3C希望所有瀏覽器處理CSS盒模型的方式。

但是IE5 for Windows會將邊框和內補丁算在指定的寬度之內，搞混淆了？不用擔心，直接看看問題會對你有所幫助。

眼見為實

比較一下圖12-11和12-12，圖12-11是個200像素寬的元素，兩側各有10像素的內補丁，以及5像素的邊框，把水平部分的數值全加起來，就能知道實際寬度為230像素。


圖12-11 盒模型的正確計算結果


圖12-12 IE5 for Windows 錯誤的內補丁，邊框，寬度計算結果

這是符合設計的盒模型：width屬性總是定義元素的內容範圍，而內補丁，邊框則會加到這個數值上。

因此，如果將側邊欄的寬度定義成200像素然後加上內補丁和邊框，CSS的聲明如下：
程序代碼 程序代碼
#sidebar {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  }

把寬度設定為200像素，但是側邊欄實際需要230像素的空間，除了IE5 for Windows以外。 IE5 for Windows 裡側邊欄總共會佔用200像素，把內補丁和邊框都算在裡面。

圖12-12 顯示的是當width屬性指定為200像素時，邊框和內補丁會佔用內容空間，而不是內容空間之外。

搖擺不定的寬度

我們反對為元素指定邊框，內補丁的理由就是實際寬度會隨著使用者瀏覽器的不同而不同，就算在今天，幾百萬使用IE5.x的用戶還是會看到明顯偏差的設計結果。同時有個重點必須記住：在這段文字撰寫的時候，仍然有太多人在使用IE5以致我們不能忽視這個問題。

所以該怎麼辦？恩，幸運的是，有個能修復這個問題的技巧，這個技巧可以提供兩種不同的寬度，一種給IE5 for Windows，另一種給其他瀏覽器以便得到正確的盒模型。

盒模型Hack

親切的Tantek Celik寫了盒模型Hack，讓我們能提供兩種不同寬度：一種調整過，只會被Window Internet Explorer 5使用，另一種則給其他所有瀏覽器使用。

通過IE5和IE5.5才有的CSS解析Bugs，可以指定一個略大的寬度(容納邊框和內補丁)，然後以實際的寬度覆蓋這個數值，讓其他瀏覽器能顯示出正確的結果。

源代碼示例

舉例來說，如果希望把側邊欄的內容區域寬度設為200像素寬，加上10像素內補丁和5像素邊框，那麼我們的CSS看起來就像：
程序代碼 程序代碼
#sidebar {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  }

對IE5 for Windows來說，則需要把寬度指定為230像素(加上兩側內補丁和邊框的寬度)，接著再以200像素覆蓋回來，讓符合標準的瀏覽器得到正確的寬度。
程序代碼 程序代碼
#sidebar {
  padding: 10px;
  border: 5px solid black;
  width: 230px; /* for IE5/Win */
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px; /* actual value */
  }

留意IE5 for Windows的值先出現，接著幾條讓IE5 for Windows認為聲明已經結束的規則，在此我們使用voice-family屬性，原因單純只是瀏覽器認得它的話也不會改變視覺效果，最後指定實際的寬度，覆蓋最初的width規則，第二個width規則會被IE5 for Windows忽略。

結果在IE5 for Windows以及其他所有兼容CSS2的瀏覽器上看起來應該完全相同。沒有使用這個hack的話，IE5 for Windows的使用者就會看到比設計還瘦的欄寬。

對Opera友好

對於同樣擁有IE5 for Windows解析錯誤的CSS2兼容瀏覽器來說，我們必須在每次使用盒模型補丁之後加上一段額外的聲明，這個稱為"對Opera友好"的規則會讓所有符合標準的瀏覽器不被解析Bug卡住，確保他們能顯示出期望中的寬度。
程序代碼 程序代碼
#sidebar {
  padding: 10px;
  border: 5px solid black;
  width: 230px; /* for IE5/Win */
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px; /* actual value */
  }
html>body #sidebar {
  width: 200px;
  }

有了這段規則，就可以完全繞過IE5 for Windows錯誤解析CSS盒模型的問題，讓所有人都能看到正確的效果。

不止寬度

在這裡以"盒模型Hack"達成顯示相同寬度，但是這個Hack其實能在任何想為IE5 for Windows提供不同CSS內容時派上用場。任何Hack都必須小心使用，同時只有在真正需要的時候才使用，記住 "盒模型Hack"的使用地點是個好主意，這樣才能在未來輕易拿掉它。

本文撰寫時仍有上百萬網絡使用者仍然使用IE5 for Windows，因此這個補丁不可或缺。

下面這段"偽裝的欄位"原始出自2004年一月份的A List Apart雜誌()。

偽裝的欄位

關於我個人網站的設計，我最常被問到的問題是：

"你是如何讓右欄的背景色一路延伸到整頁底部的？"

其實這只是個簡單的概念，真的。而且這個概念能應用到本章開始所述的每種佈局方法上。

垂直伸展

CSS最容易讓人感到挫折的性質之一，是元素只會垂直伸展到真正需要的長度。這代表如果在<div>裡放一張200像素高的圖片，那麼<div>就只會在頁面上延伸200像素。

當你以<div>切割頁面段落，接著用本章開始時的方法用CSS完成多欄佈局時，這就會成為有趣的困境，某一欄可能比其他欄都長(圖12-13)，當你想為每欄選用獨特的背景色彩時，視內容多寡而定，做出兩個一樣長的欄位可能十分困難。


圖12-13 長度不一樣的欄位

有幾個做法能讓闌尾看起來一樣長，不受欄位包含的內容的影響。我準備分享我的解決方法(適用於絕對定位佈局法)，而這個方法實在是莫名其妙的...簡單。

作弊

這個難以啟齒的簡單秘訣，是用一個垂直排列的背景圖片作出彩色欄位的錯覺。在SimpleBits(http://www.simplebits.com/)，我用了類似圖12-14的背景圖片(為了示範而修改了比例)：左邊有裝飾用條紋，中間留下寬闊的空白空間安放主要內容，接著是一條1像素的邊框，然後是右側邊欄的淺棕色區域，跟著是反向的裝飾用條紋。


圖12-14 tile.gif 2像素高的背景圖片，預先分配好欄寬。

整個圖片沒有幾像素高，但是垂直平鋪之後，他就能造成一路到底的彩色欄位，不管欄位內容多長都無所謂。

CSS內容
我為<body>標籤加上這條CSS規則：
程序代碼 程序代碼
background: #ccc url(tile.gif) repeat-y 50% 0;

這會使整個頁面的背景色設為灰色，並且只垂直平鋪圖片(repeat-y)，後面的50% 0代表背景圖片的定位：在這個例子裡，是從瀏覽器視窗左邊緣算起50%(使圖片居中)，並且緊貼上邊緣。

欄位定位

放好背景圖之後，在把我的定位佈局放到上面，為左欄，右欄指定內外補丁以確保它們會對齊正確位置：也就是背景圖創造出來的虛假欄位裡(圖12-15)。


圖12-15 平鋪背景圖創造出的彩色欄位

有個重點必須要注意：如果哪一欄指定了邊框，內外補丁的話，就仍然用Tantek Celik的盒模型Hack為IE5 for Windows修正盒模型問題(參照本章稍早的"盒模型問題")。

或者是，如果能夠只使用外補丁，避免邊框與內補丁的話，就不需要加上盒模型Hack了，同時，如果欄位的內容只單純放在平鋪背景圖之上(透明顯示)，那麼要避免使用Hack也應該很簡單。

只要有用就好

雖然我以絕對定位法在自己的網站上做了兩欄佈局，但是你也能用本章開始時提過的其他方法達成一樣好的效果。同樣的想法仍然適用：平鋪背景圖，接著再浮動某個欄位，使其覆蓋在模擬的欄位背景上。

這是個簡單的概念，但是能夠解決設計者在構建CSS佈局時經常遇到的挫折之一。

結論

我希望本章能帶給你開始探索CSS佈局的刺激世界，本章開始時我們看到了四種構建版面佈局的方式，其中三種用了float屬性，還有一種用了絕對定位。一定要去看看我列出的額外資源，裡面有更多佈局的技巧和示範。

我們也討論了盒模型Hack在建立具備邊框，內補丁的欄位時有何重要性，讓這些效果在IE5 for Windows以及其他瀏覽器上表現一致。

最後，我分享了一個有用的技巧，讓你在設計CSS佈局時能做出等高欄位，這是某些人認為十分基本，但實現上經常讓人感到挫折的設計目標。只要小小一個平鋪背景圖就能搞定，讓你得到能夠抵達頁面底部(不管內容多長)的欄位。]]> http://www.wowbox.com.tw/blog/default.asp?id=2999 <![CDATA[IE下中英文字體不能對齊原因及解決 ]]> Admin http://www.wowbox.com.tw/blog/ hanher@hotmail.com 2008-08-11T23:37:26+08:00 2008-08-11T23:37:26+08:00


如果所示，在IE下當一行文字同時有英文跟中文的時候，鏈接下劃線就會發生折行，也就表示這個時候中英文是沒有對齊的！（FIREFOX不受此問題影響）

但是經過測試，默認的直接在頁面裡設置鏈接的時候是不會出現這個情況的！
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]




那麼疑惑又來了，是什麼導致了中英文偏差呢？！解決辦法又是什麼呢？！於是經過我測試發現兩種情況（當然有可能有更多導致的情況。你們可以自己去嘗試），當中英文對象的相鄰元素擁有vertical-align屬性設置（比如前面一張小圖片，或者文本框，我們需要把他們垂直對齊，一般都會給圖片，文本框（其他任意內聯塊元素）設置vertical-align:middle;來實現）的時候，那麼就會影響到中英文的不對齊。

還有一種情況就是父元素（表格除外）擁有vertical-align屬性設置的時候，裡面的子元素中英文也會對不齊。
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]


怎麼解決這個問題呢？！

先說第一種，就是臨近元素的vertical-middle導致的無法對齊的偏差問題解決方案：

給中英文對像加一個zoom:1觸發它的haslayout,通過研究發現一旦它有了haslayout之後，中英文就不會對不齊。
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]


第二種情況就是父元素的vertical-middle導致的無法對齊的偏差問題解決方案：

給中英文對像加句vertical-align:baseline就可以解決！
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]


但是我們可以看到，下劃線好像貼的過緊，這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合！。
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]


如果您碰到其他情況的中英文對不齊的情況，那麼也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過於就是直接中英文都統一使用細明體。]]> http://www.wowbox.com.tw/blog/default.asp?id=2998