Bulletproof Web Design

這篇書評跟摘要是我向某網頁設計師 Dick 邀稿的，Dick 目前正潛心研究CSS中。

Bulletproof web Design
無懈可擊的網站設計
Improving flexibility and protecting against worst-case scenarios with XHML and CSS
用XHTML和CSS來改善網頁彈性並針對最差的情況作準備

基本上，這本應該說是CSS入門。導入的觀念相當強調網頁的親和力，裡面有很多NOTE和TIP很一針見血。整本書都著重在設計階段的全盤考量夠不夠，尤其在不同解析度或是不同字體大小的狀況下整個頁面會不會走樣，你可以暸解到一般設計容易犯的缺點，也順便教你怎樣可以設計的更好考慮到更多種的狀況。

如果是要自己開始親手打造網頁，這本書算是不錯的入門引導。對那些拿CSS來做純粹文字樣式的人很適合，中級以上的想學習的話直接看看他的最後一章範例大概就能夠窺探整本書的精神了。

第一章 活動的文字

• 以關鍵字指定文字大小，提供使用者掌控、提高彈性。
• 考量IE的使用者需能自動調整字的大小
• 善用關鍵字定義讓使用者可以很容易的理解以及控制
• 使用百分比定義字體能夠使整個網站字體獲得整體有效控制
• 即便在瀏覽器的初始設定;仍然可提供較好的文字瀏覽

第二章 高延展性的導覽

• 提高導覽本身的延展性;不論前景的文字多寡或是多大;導覽的內容量都能夠處理不同的情況
• 避免採用圖片做導覽連結;容易造成低階使用者無法正常瀏覽
• 利用簡單的法則來設計導覽(善用水平條列),提高親和力以及各種瀏覽器或裝置的接受程度
• 以純文字做的導航容易維護;不需要像圖片一樣每次都要修改原始圖檔
• 導覽背景在設計的階段應該要考慮到當文字變大時；應該還是要能讓使用者正常瀏覽

第三章 可擴充的表列

• 盡量少對水平元件指定高度
• 可適當的把背景設計在CSS之內有助於程式碼的精簡
• 利用背景可以以百分比位置固定在兩側的浮動方式來設計水平元件
• 例用兩個背景靠其左右;可以讓元件因應不同的寬度作變化
• 設計之前要先想好元件的擴充性; 高度和寬度問題;背景會不會穿梆

第四章 創意浮動

• 以浮動元件達成表格的效果。
• 一開始設計的時候就先考慮最優的設計方式來設計複雜的結構;
• 標題前面可以利用浮動方式加入圖片;並且讓圖片與文字水平對齊
• 多做幾種測試來確認你的浮動版型不會因為不同的設定產生無法瀏覽的狀況

第五章 不會破格的方框

• 先替不知道內容的方框樣式作準備
• 利用兩張背景圖片來設計固定的寬度的橢圓角方框
• 需要考慮內容高度或寬度來設計背景
• 兩張背景或許只各用到一部份;但是組合起來仍可以正常瀏覽 

第六章 不支援圖檔？不支援 CSS？沒有問題。

• 確保內容在不支援圖檔、CSS 的瀏覽器之內仍能正常顯示。
• 10秒鐘來測試你的網頁圖片和CSS是否容易閱讀;並不斷因應更多的情況修改設計
• 背景能夠採用色碼就用色碼;好過採用背景圖；確保低頻寬用戶可以快速讀取頁面
• 加強驗證可以減少頁面設計的錯誤

第七章 表格的轉換

• 移除資料表內的展示設定，重新以 CSS 整修。
• ＜table Cellspacing=”0″＞並移除表格內的寬度背景和邊距設定,重新寫在CSS
• 記得要寫caption
• 利用th和td的屬性來設計表格
• 可以利用tr加入背景設計

第八章 活動的版型

• 實驗能擴大、收縮的頁面佈局。
• 採用float屬性來設計滿版FOOTER的多欄式版型
• 利用百分比相減可設定各欄之間的寬度和相隔或是利用外包DIV的方式來設定每個欄寬
• 實驗等高可變動的多欄位的設計方法

第九章 整合應用

• 將「無懈可擊的概念」應用到整個頁面設計裡。
• 把前幾章提到的設計方法同時應用到一個例子
• 針對高度和footer問題以及CSS HACK的註解說明