|
序：
Web設(shè)計(jì)師與開(kāi)發(fā)者面對(duì)的一個(gè)很大挑戰(zhàn)是跨越純視覺(jué)思考者和純線性思考者之間的交流鴻溝。只有少數(shù)的人才有能力平衡精巧而有創(chuàng)意的設(shè)計(jì)與日益進(jìn)步的復(fù)雜技術(shù)間的關(guān)系。正因?yàn)槿绱�，Jeffrey Zeldman，DouglasBowman和Dave Shea都為這個(gè)行業(yè)做出了具大的貢獻(xiàn)，不僅因?yàn)樗麄兊墓ぷ骷骖櫢鞣矫�，更重要的是他們把這種能力傳授給別人。
數(shù)年前，我在New Rider出版了一本叫作IntegratedWeb Design的書(shū)，在這本書(shū)中我就試圖解決上述問(wèn)題。我們?cè)鯓硬拍茏屧O(shè)計(jì)者具有符號(hào)和結(jié)構(gòu)的思考能力？如何讓邏輯分析型的思考者喜歡和理解美學(xué)？還有更為復(fù)雜的溝通與管理、市場(chǎng)營(yíng)銷等領(lǐng)域。而更大的難題在于創(chuàng)建真正強(qiáng)大的平臺(tái)來(lái)實(shí)現(xiàn)高效的工作流程、有力的技術(shù)和奇妙的設(shè)計(jì)，讓我們這個(gè)行業(yè)持續(xù)發(fā)展，并不斷追求卓越。
這使我想到Andy Clerke。幾年前我第一次注意到Andy的工作是因?yàn)樗牟┛�。他在博客中發(fā)表一些關(guān)于標(biāo)簽命名規(guī)范和CSS的帖子，這個(gè)主題在很長(zhǎng)的一段時(shí)間里吸引了我。通過(guò)深入研讀他的文章和他的設(shè)計(jì)作品，我意識(shí)到這個(gè)博客的主人是一個(gè)擁有把想法付諸實(shí)踐的激情的家伙。2005年著名的“Britpack Invasion”期間，我們相會(huì)在SXSW大會(huì)上。我們開(kāi)始討論一些問(wèn)題。之后的幾個(gè)月里，我們開(kāi)發(fā)了一系列深受歡迎的內(nèi)容，包括“設(shè)計(jì)師的CSS”和“開(kāi)發(fā)者的CSS”，旨在通過(guò)我們互補(bǔ)的技術(shù)和經(jīng)驗(yàn)來(lái)教育和啟發(fā)我們的同行。
當(dāng)寫(xiě)一本書(shū)的主意順理成章地進(jìn)入我們的會(huì)談時(shí)，我非常熱情地把Andy介紹給了Peachpit和New Riders的出版人Nancy Aldrich-Ruenzel，我知道如果有什么印刷品能把握Andy的思想的話， 那一定是New Riders的“Voices That Matter”系列。后來(lái)我們?nèi)齻�(gè)人在舊金山會(huì)面。有趣的是，我坐在他們旁邊，卻沒(méi)能在這次促膝長(zhǎng)談中插上幾句嘴。顯然，他們是棋逢對(duì)手了。我們堅(jiān)決認(rèn)為這本書(shū)將是恰到好處，尤其是鑒于Dave Shea和我設(shè)計(jì)的The Zen of CSS（禪意花園）的成功。我參與這本書(shū)的編輯工作，和Andy一起調(diào)整書(shū)的觀點(diǎn)和內(nèi)容。而Dave也將參與，為這本書(shū)撰寫(xiě)前言，讓本書(shū)成為任何想成為更好的設(shè)計(jì)師或更好的開(kāi)發(fā)人員的讀者的資源。
正是這本書(shū)所面臨的挑戰(zhàn)，促成了它的完善。你看，由于Andy技術(shù)上的成就，他是而且將一直是一個(gè)視覺(jué)型人才。而我在設(shè)計(jì)領(lǐng)域可能受過(guò)大量的正規(guī)的美學(xué)的訓(xùn)練，我是一個(gè)邏輯、線性思維的人。Andy跟所有的視覺(jué)型思考者一樣，生活在一個(gè)充滿想象力和創(chuàng)造力的世界，而我喜歡秩序、交流與過(guò)程。在寫(xiě)作本書(shū)的過(guò)程中，有許多的挑戰(zhàn)是我們必須面對(duì)和解決的，而這種種問(wèn)題在我們的領(lǐng)域與我們這種類型的人之間是到處可見(jiàn)的。這本書(shū)，其不可思議的美感、扎實(shí)的技術(shù)和如真實(shí)的夢(mèng)境，正是我們最初的設(shè)想：進(jìn)一步證實(shí)只有當(dāng)人們致力打破那些難以逾越的鴻溝時(shí)，真正的創(chuàng)新才會(huì)發(fā)生。今天我可以帶著自豪、尊敬和榮譽(yù)將這段經(jīng)歷的結(jié)果分享給努力工作想要超越職業(yè)挑戰(zhàn)的您。但愿本書(shū)像我們希望的那樣幫助您讓W(xué)eb工作的每件事情都如我們所想所愿那樣完成。
獻(xiàn)上我所有愛(ài)，
Molly E. Holzschlag
2006年10月于倫敦
譯者序：
界面重不重要？
我在一次做顧問(wèn)時(shí)，這樣跟開(kāi)發(fā)人員闡述，重視界面其實(shí)是事半而功倍的事情。
你做了一個(gè)很不錯(cuò)的產(chǎn)品，有很強(qiáng)大的功能，代碼規(guī)范，架構(gòu)設(shè)計(jì)堪稱典范，唯一的不足在于界面流于庸俗。
為了將產(chǎn)品推向市場(chǎng)，你做了非常詳細(xì)的說(shuō)明，一一介紹產(chǎn)品的設(shè)計(jì)和功能，然后你的業(yè)務(wù)員手捧宣傳材料努力地向客戶介紹這款產(chǎn)品。但很多客戶都心不在焉地聽(tīng)著，一過(guò)打著電話，一邊看著手表，最后非常有禮貌地告訴你的業(yè)務(wù)員，他們還要“研究研究”。好不容易有一個(gè)客戶比較有興趣地聽(tīng)完了功能介紹，但后來(lái)一看產(chǎn)品的界面，又呶起了嘴—因?yàn)樗X(jué)得讓他的客戶看到界面如此落伍的軟件，是一件很沒(méi)面子的事。
后來(lái)，你做了一個(gè)功能很簡(jiǎn)單的產(chǎn)品，它專注于一件事情，甚至用一句言簡(jiǎn)意賅的話就能清楚地說(shuō)明。但是這個(gè)產(chǎn)品有著簡(jiǎn)單易用的操作方式，界面也美觀大方，處處閃動(dòng)著靈感，顯得非常精致。你為這個(gè)產(chǎn)品做了一個(gè)布滿界面截圖的精美的使用說(shuō)明書(shū)。你的業(yè)務(wù)員只是把這個(gè)很薄的小冊(cè)子放在客戶的辦公桌上，也沒(méi)有打擾他們的工作，就回家睡大覺(jué)了。然而這一次，你反而接到了很多客戶打來(lái)的訂購(gòu)電話，因?yàn)樗麄冇X(jué)得這個(gè)產(chǎn)品一開(kāi)始就深深吸引了他們，而且產(chǎn)品功能也一目了然，極具價(jià)值。通過(guò)這個(gè)故事，深陷于邏輯與秩序的代碼開(kāi)發(fā)者也許能明白，只注意功能和架構(gòu)并不能成為“Heros”。Web 2.0思潮的涌動(dòng)，AJAX技術(shù)的炙手可熱，讓很多人認(rèn)識(shí)到了客戶端技術(shù)的重要。但惡補(bǔ)了一番Javascript和CSS后，心中仍感覺(jué)不到一絲踏實(shí)—因?yàn)閺囊婚_(kāi)始就沒(méi)有了解Web 2.0思想的核心，“為了技術(shù)而技術(shù)”，照著書(shū)本寫(xiě)幾個(gè)Demo又怎能駕馭這個(gè)更加“苛刻”（海量信息時(shí)代，用戶找信息已經(jīng)變成了信息主動(dòng)找用戶，如何在眾多競(jìng)爭(zhēng)者中脫穎而出、吸引用戶變得困難重重）和“變化多端”（客戶訪問(wèn)終端也在發(fā)生很大的變化，拿著手機(jī)、PDA或你想都想不到的終端看網(wǎng)頁(yè)也大有人在）的時(shí)代。
從2005年CSS類書(shū)籍的熱銷的情況來(lái)看，估計(jì)很多人都學(xué)會(huì)了float和clear，也理解了什么是盒模型。但剛剛學(xué)會(huì)使用@import指令來(lái)使瀏覽器能夠?qū)敫呒?jí)CSS設(shè)計(jì)，學(xué)會(huì)了幾個(gè)CSS hacks、“山頂角”和“滑動(dòng)門(mén)”的你，不得不馬上面對(duì)Andy又為我們提出更高的目標(biāo)的現(xiàn)實(shí)。
閱讀這本書(shū)是很享受的，掠過(guò)一幅幅精美的圖片，最先進(jìn)的Web設(shè)計(jì)思想已深深地印在你的腦海中，開(kāi)發(fā)人員得以理解什么是設(shè)計(jì)，設(shè)計(jì)人員也學(xué)會(huì)了擺脫從視覺(jué)的角度去思考設(shè)計(jì)的舊習(xí)，何樂(lè)而不為呢？而每每想到我再也不用花費(fèi)大量口舌去糾正別人“Web標(biāo)準(zhǔn)就是用DIV而不用Table”的論調(diào)，則更是心中暗爽。
本書(shū)由譚振林、何潁、桂冠、于飛、田少雄合作翻譯。由于這本書(shū)的語(yǔ)言非�；顫�，增加了我們翻譯時(shí)理解和表達(dá)作者本意的難度，但我的合譯者們堅(jiān)強(qiáng)地走過(guò)了這段艱難的旅程，相信我們每一個(gè)人都在這個(gè)過(guò)程中成長(zhǎng)了。
最后，謝謝你們。
任何語(yǔ)言在這本漂亮的書(shū)的面前，都顯得那么蒼白無(wú)力，大家還是趕快翻開(kāi)書(shū)頁(yè)吧！
譚振林
2007年5月于深圳羅湖
前言
為了介紹這本書(shū)，我建議您先不要去閱讀它，而是花點(diǎn)時(shí)間好好欣賞它。
希望通過(guò)粗略地翻閱書(shū)頁(yè)，您已經(jīng)在某種意義上領(lǐng)會(huì)了它的設(shè)計(jì)風(fēng)格。它太漂亮了，不是嗎？圖片和截屏俯拾皆是。亮點(diǎn)在于它巧妙地利用圖像而不是一行接一行沉悶的標(biāo)記和CSS。引入真實(shí)的例子說(shuō)明具體的Web議題。太不可思議了，關(guān)于代碼的書(shū)居然可以看上去這樣漂亮！
這就是我要提醒您的。正如您可能已經(jīng)從書(shū)名中推斷出來(lái)的，這不僅僅是另一本代碼書(shū)籍，它的內(nèi)容遠(yuǎn)遠(yuǎn)不止于此。它闡述了代碼和設(shè)計(jì)的精妙配合、代碼如何很好地支持設(shè)計(jì)創(chuàng)意以及如何打破枷鎖，讓我們不必過(guò)于顧忌實(shí)現(xiàn)。正如您將從這些頁(yè)面中學(xué)到的那樣，龐大的在線空間，比如Yahoo，已經(jīng)開(kāi)始使用向下兼容老瀏覽器的技術(shù)，但更重要的是，很多公司正在使用新的技術(shù)充分發(fā)揮新型瀏覽器的優(yōu)勢(shì)。而這些技術(shù)全都是我們需要實(shí)踐并應(yīng)用到自己的項(xiàng)目中產(chǎn)生效果的。Andy Clarke向我們展示如何做到這些。
某種意義上，這本書(shū)讓我想起了2005年早期的一些事情。也許您讀過(guò)《CSS禪意花園》（已由人民郵電出版社翻譯出版），一本我有幸和MollyHolzschlag合著的書(shū)，她也是本書(shū)的編輯。
在《CSS禪意花園》中，我們首次討論CSS不僅放在面向結(jié)構(gòu)化代碼的風(fēng)格中討論，還應(yīng)結(jié)合設(shè)計(jì)理論和精心設(shè)計(jì)的例子來(lái)解釋、說(shuō)明和啟發(fā)。而本書(shū)讓我想到了一個(gè)很好的下一步。完成了《CSS禪意花園》，然后呢？Clarke先生走過(guò)來(lái)，告訴了我們所有的答案。
在《CSS禪意花園》中我們領(lǐng)會(huì)到基于CSS的設(shè)計(jì)并不一定丑，在技藝高超的視覺(jué)設(shè)計(jì)師的手中，CSS可創(chuàng)造無(wú)限可能�，F(xiàn)在我們通過(guò)學(xué)習(xí)本書(shū)明白Web現(xiàn)在的情形僅是一個(gè)起點(diǎn)，是時(shí)候展望未來(lái)了。
更重要的是理解。本書(shū)不僅僅是一本指南，只介紹那些眾多技術(shù)手冊(cè)已經(jīng)講解得很充分的內(nèi)容。您面臨這本書(shū)的理念的挑戰(zhàn)，啟發(fā)您把Web從現(xiàn)在的情況帶入一個(gè)新的高度。本書(shū)不僅是一本解決問(wèn)題的手冊(cè)，更是一份宣言：超越今日之Web。不要只是關(guān)注過(guò)去，把您的目光轉(zhuǎn)向更廣闊的未來(lái)。Clarke先生告訴了您如何去做。
Dave Shea
2006年10月
專家評(píng)書(shū)：
《超越CSS》，我聽(tīng)到這本書(shū)名時(shí)充滿了無(wú)限期待，由于標(biāo)準(zhǔn)化WEB頁(yè)面制作的熱捧，市面上關(guān)于CSS的書(shū)籍也雨后春筍般的熱銷開(kāi)來(lái)。《超越css》到底如何超越呢？
當(dāng)W3C提出結(jié)構(gòu)與表現(xiàn)分離的思想開(kāi)始，CSS這項(xiàng)技術(shù)就開(kāi)始在WEB領(lǐng)域得到了廣泛應(yīng)用,頁(yè)面設(shè)計(jì)師開(kāi)始嘗試使用CSS來(lái)控制頁(yè)面的展示效果，使用符合標(biāo)準(zhǔn)的XHTML標(biāo)簽來(lái)構(gòu)架網(wǎng)頁(yè)基本結(jié)構(gòu)，設(shè)計(jì)師們也逐漸發(fā)現(xiàn)在頁(yè)面結(jié)構(gòu)標(biāo)準(zhǔn)化框架下，使用CSS可以隨心所欲控制頁(yè)面中內(nèi)容的布局、定位、字體大小及所有內(nèi)容展現(xiàn)的表現(xiàn)形式，也幫助我們更好的協(xié)調(diào)頁(yè)面內(nèi)容組織與關(guān)系。CSS+DIV的排版布局方式可以說(shuō)推動(dòng)了網(wǎng)頁(yè)發(fā)展的一場(chǎng)革命，web中越來(lái)越多頁(yè)面結(jié)構(gòu)更加合理化，頁(yè)面中數(shù)據(jù)可以更好的被搜索引擎檢索到，合理的頁(yè)面框架也很好的被程序開(kāi)發(fā)人員認(rèn)可。CSS廣泛應(yīng)用從2001年到現(xiàn)在，已經(jīng)不再單純是一種技術(shù)，而更加帶有了藝術(shù)氣息。WEB頁(yè)面可以由CSS控制其所展現(xiàn)的樣式，通過(guò)改變某個(gè)CSS文件來(lái)做到頁(yè)面在瞬間發(fā)生結(jié)構(gòu)和顏色的變化而滿足不同環(huán)境的需求。
《超越CSS》這本書(shū)中，作者向我們介紹了如何將CSS技術(shù)與藝術(shù)美妙結(jié)合起來(lái),使用大量范例來(lái)論證如何更加藝術(shù)化展示CSS技術(shù),而不再單單是純粹CSS技術(shù)應(yīng)用的知識(shí)推廣。
它不僅教會(huì)我們?nèi)绾胃玫氖褂肅SS來(lái)控制頁(yè)面布局和頁(yè)面表現(xiàn)效果，并且它引導(dǎo)我們?nèi)绾稳ナ褂煤侠淼腦HTML標(biāo)簽。XHTML作為一種優(yōu)秀的結(jié)構(gòu)化語(yǔ)言，更好的使用XHTML標(biāo)簽，頁(yè)面的結(jié)構(gòu)才更加合理、規(guī)范。合理化選擇XHTML標(biāo)簽加之CSS及CSS高級(jí)技巧的靈活運(yùn)用，我們的WEB頁(yè)面才會(huì)更加的完善。在本書(shū)中，作者以Cookr項(xiàng)目為主題，用結(jié)構(gòu)和表現(xiàn)分離的手法，逐步去實(shí)現(xiàn)Cookr項(xiàng)目的制作過(guò)程。對(duì)于Cookr項(xiàng)目首頁(yè)，合理的使用<h1>-<h6>標(biāo)簽，然后配合使用<ul>及<p>標(biāo)簽，完成了首頁(yè)的結(jié)構(gòu)布局，沒(méi)有冗余的不必要的標(biāo)簽，作者還應(yīng)用了類似<cite>及<blockquote>輔助標(biāo)簽來(lái)配合使用以控制實(shí)現(xiàn)預(yù)先設(shè)計(jì)的效果，啟發(fā)我們對(duì)輔助標(biāo)簽應(yīng)用的靈感。如果能靈活使用<cite><dfn><var><code>等標(biāo)簽，會(huì)帶來(lái)事半功倍的效果。頁(yè)面主體結(jié)構(gòu)之后就是使用CSS完成表現(xiàn)層的制作。作者詳細(xì)聲明瀏覽器默認(rèn)樣式的定義，可以說(shuō)對(duì)于默認(rèn)的樣式定義考慮非常充分，涵蓋了常用的標(biāo)簽的全局定義，為之后使用這些標(biāo)簽做好了鋪墊。通過(guò)Cookr項(xiàng)目的實(shí)戰(zhàn)，作者介紹了布局、定位、字體彈性控制、顏色控制等CSS技巧，在CSS的使用中，作者應(yīng)用z-index,position等技巧處理版式表現(xiàn)效果，值得我們效仿、思考。最后作者為我們展示了排版樣式的定義，使其Cookr項(xiàng)目的交互原形的最終完成。在《超越CSS》中，學(xué)習(xí)CSS不再枯燥，因?yàn)樗囆g(shù)與技術(shù)得到了結(jié)合。
沒(méi)有最好、只有更好，《超越CSS》值得擁有。
——CSDN UI組組長(zhǎng),首席頁(yè)面架構(gòu)師武悅
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁(yè) 《超越CSS》新書(shū)上市 下一頁(yè) 目錄
|
第 1 頁(yè) 
第 2 頁(yè) 序、前言
