網頁迅速改頭換面的必殺利器

你應該對於Flickr網站中可以直接在圖片上選定範圍，註記說明的酷炫特色印象深刻吧？以往你認為需要透過JavaScript才能搞定的功能，是否想過可以輕而易舉地達成？CSS（Cascading Style Sheets）是包括字體、顏色、排版所發展出來的網頁樣式技術，至今已發展到第三版，其強大功能可以大幅取代許多傳統開發方式。

先前收到朋友轉寄的一個推崇CSS技術的網頁，以鮮明的漫畫手法強調CSS的好處，文中提到一些思維，著實讓筆者對CSS有了全新的看法。該文作者強烈摒棄以往以表格方式排版，認為這是不明智（其實是不客氣地評為愚蠢）的作法，尤其是在複雜度較高的版面時，不僅容易造成HTML檔案過度肥大，而且網頁呈現效能也相對受到影響。

CSS無所不在，就怕你不用它

在強調使用者介面至上的當代，CSS隱然已成為網頁技術的重要利器，市面上常見像是部落格平臺的版面配置、Webmail電子郵件信箋的選用，以及個人化網頁的樣式設定功能，以達到風貌切換而內容不變的效果，幾乎都是基於CSS技術所發展出來的網頁應用。由於視覺化的設計已經是網頁程式中重要的一環，透過妥善運用CSS屬性，除了能在網頁中呈現完全相同的效果外，還有以下的特性：

● 檔案相對較小，可讓網頁更快速呈現
● HTML程式碼減少，修改網頁更有效率
● 透過統一的樣式定義，讓整個網站保持視覺美感一致，在瀏覽上更具親和力
● 強化文件內容的可讀性，使得文件的結構更加靈活
● Write Once，Run Anywhere，樣式只要定義一次，在不同的網頁間都可以套用

HTML功能太多，要通盤了解所有屬性有實務上的困難，因此大多數的讀者在設計網頁時，大都會依賴功能較強的HTML編輯工具（像是Dreamweaver、FrontPage等），或是參考別人網頁的製作方式來加速製作。不過若要將CSS發揮到淋漓盡致，洞悉原始碼是免不了的。

《CSS Mastery》作者群都是具有多年經驗的網頁設計師，在HTML與CSS技術上學有專精，並將他們過去在工作上曾經遭遇到的問題都記錄下來。書中提到不少程式建議寫法，採用了許多進階的技巧，以較少的程式碼表現出相同的效果。

融合實務經驗彙集而成的好書

HTML雖說簡單易學不是什麼新的技術，但也許正因為它的彈性，可能讓讀者使用錯誤而不自覺，使得網頁結構不佳造成日後維護的負擔。本書一開始便讓讀者思考如何正確使用HTML，省思以往在使用網頁設計時是否有些不當或設計不佳的手法，應進而採用較佳的方式。

本書在前面幾章中介紹了CSS的基本概念，對屬性名詞有了明確的定義，讓初學者可以奠定良好的學習基礎。除了瞭解如何將CSS結合到既有的HTML程式碼中外，程式碼的結構化設計也是重點所在。

當然，本書同樣討論到一般網頁設計常見的應用，像是分欄版面、邊界空間的配置、各種樣式的連結設定、網頁導覽列的進階設計、運用背景圖案處理特效等。作者在內容中結合了過往經驗中遭遇到的狀況以及建議的作法。

另外，當你依賴CSS的程度愈高，即可能因結構複雜造成除錯不易的狀況，本書亦有專章討論如何有效除錯，亦為異於坊間同類書之處。

以案例帶出CSS設計的精神所在

紙上談兵了那麼久，本書的最後附上了兩個具有實作價值的Case Study，直接拿現有的網站實例說明，抽絲剖繭地將網站元素逐一分離，從版面的配置，透過畫面說明對應到屬性值的設定，加深讀者對常用屬性的掌握程度。

身為程式開發人員的你，不要認為CSS只是美工人員需要了解的技術，其實它只需短短幾行定義，便可以省去你冗長的開發時間，是相當值得研究的一門課題。

不妨仔細想想，你目前使用CSS的比重有多少？還是單純以HTML Tag的方式設計版面嗎？本書可以讓你擺脫傳統利用Table指令與空白GIF笨拙的設計方法，以CSS取而代之。

CSS Mastery: Advanced Web Standards Solutions

Andy Budd、Simon Collison、Cameron Moll /著

friends of ED/出版

售價：34.99美元

Amazon四顆半星

《作者簡介》

陳宏一

交通大學資訊管理研究所碩士。目前任職於某數位行銷公司技術經理，曾任職於南亞科技資訊部工程師、資迅人網路研發副理、艾群科技產品研發部經理，專精於OOAD、 J2EE 相關技術、Open Source、資料庫設計、軟體開發流程及專案管理等；取得SCJP、SCWCD、SCJD、SCEA、ITIL等認證。曾經歷大型社群及電子商務網站、 WAP/3G行動加值服務、CTI/CRM客服系統架構規畫設計等。