網站重構:套用Web標準進行設計

網站重構:套用Web標準進行設計

《網站重構:套用Web標準進行設計》是2011年電子工業出版社出版的圖書,作者是澤爾特曼、馬克蒂。本書提供了更多明確的見解和新的例子,來闡述基於標準的設計的核心思想,為讀者的網站最終確定一個合理的設計與開發方法。

基本介紹

  • 書名:網站重構:套用Web標準進行設計
  • 作者: (美)澤爾特曼(Zeldman,J.)    馬克蒂(Marcotte,E.)
  • 譯者:傅捷 祝軍 李宏
  • ISBN:9787121127755
  • 出版社:電子工業出版社
  • 出版時間:2011 年3月
  • 開本:16開
  • 上架時間:2011-3-7
  • 版次:3-1
  • 頁碼:1
內容簡介,目錄,譯者序,

內容簡介

暢銷書作家、設計師、網頁標準教父jeffrey zeldman再次更新了他經典的、顛覆行業的指南書。這已經是本書的第3版了,此次更新基本涵蓋了隨著環境和技術的變化,web標準所面臨的挑戰以及因此而發生的改善。第3版讓基於標準的設計思想更加清晰,更加易於理解,幫助你在這個領域中保持聰明和領先。
與前兩版不同的是,在第3版,除了有很多的“why”來提出問題,也提供了大量的“how”來解決問題。另外,在寫作方法上作者力圖用詼諧的、有吸引力的寫作風格,使複雜的技術更易於理解消化,幫助你輕鬆創建一個訪問快速、低成本維護和開發、更多用戶的網站,幫助你用新技術使css布局適應多個瀏覽器,使網站內容更容易被搜尋和訪問到。

目錄

《網站重構:套用web標準進行設計》
第1部分
第0章 在開始閱讀之前 2
0.1 終止不斷“改版-淘汰”的怪圈 3
0.2 不要死讀書 4
漸進的標準,而不是一套不變的硬性規定 4
0.3 一些重要的定義 5
0.4 一種方法不能解決所有問題 6
0.5 歡迎優勝團隊 7
第1章 99.9%的網站已經過時了 10
1.1 現代瀏覽器和web標準 11
1.2 新版本新代碼 12
1.3 多版本問題 13
1.4 垃圾代碼來了 15
錯誤標記:最初,個人環境是無約束的 15
1.5 代碼分支可能影響你網站的長期健康 17
1.6 臃腫標記的隱藏成本 20
1.7 向前兼容(backward-compatibility)是一個謊言 22
禁止用戶不利於業務發展 23
1.8 治療 26
.第2章 根據標準設計和建造 28
2.1 歷經磨難 30
2.2 無標準時代的設計成本 31
2.3 時髦的站點,古老的方法 32
2.4 web標準三劍客 38
2.4.1 結構 39
2.4.2 表現 41
2.4.3 行為 41
2.5 實際套用 42
2.6 web標準組織:可移植性 44
一個文檔服務所有需求 44
2.7 “a list apart”:一個頁面,多種顯示方式 47
2.7.1 螢幕以外的設計 48
2.7.2 節約時間和成本,增加擴展性 50
2.8 我們去向何方 50
第3章 溫和勸導 54
第4章 web標準的未來 60
4.1 可發現性、聚合、部落格、播客、長尾、ajax
4.1 (以及其他使標準成功的理由) 60
4.1.1 通用語言xml 61
4.1.2 發明的源泉 66
4.1.3 標準的未來 76
4.2 html5的誕生 77
4.2.1 ie瀏覽器和web標準 80
4.2.2 創作和出版工具 80
第2部分
第5章 現代標記語言 84
5.1 垃圾代碼標記的可恥秘密 90
5.1.1 重新闡述了什麼 93
5.1.2 執行概要 94
5.1.3 xhtml 2為你我而生 95
5.2 5個堅持用html的原因 96
5.3 5個使用xhtml 1的原因 97
5.4 不使用xhtml 1的原因 97
第6章 xhtml和語義標記 98
6.1 轉換到xhtml:規則簡單,容易上手 99
6.1.1 用正確的文檔類型(doctype)和命名空間(namespace) 99
6.1.2 哪一種doctype適合你 100
6.1.3 嚴格與過渡:我們這個時代的大戰役 101
6.1.4 緊隨doctype之後的是namespace 103
6.1.5 聲明你的字元集 104
6.1.6 用小寫字母書寫所有的標籤 106
6.1.7 給所有屬性值加引號 108
6.1.8 所有屬性都需要值 109
6.1.9 關閉所有的標籤 110
6.1.10 不要在注釋內容中使用“—” 111
6.1.11 將所有的[和&符號編碼 111
6.1.12 執行概要:xhtml的規則 112
6.1.13 字元編碼:無趣,很無趣,真的很無趣 112
6.2 結構健康——對我有益 114
6.2.1 用理性代替樣式來標記你的文檔 114
6.2.2 視覺元素和結構 120
第7章 html5:新的希望 121
7.1 html5和web應用程式:風險很大 121
7.2 html5和xhtml 123
該死的命名法 124
7.3 html5元素大檢閱 125
7.3.1 頁面結構的語義化 126
7.3.2 html5:只是個規範 130
7.3.3 學習更多 132
第8章 更嚴格穩健的頁面保證:結構和語義 134
8.1 div、id及其他 135
8.1.1 為什麼叫div 135
8.1.2 id與class 137
8.2 讓你的內容容易找到,容易使用 139
8.2.1 語義化標記和可重用性 140
8.2.2 現代標記的常見錯誤 142
8.2.3 divs剛剛好 145
8.2.4 熱愛id 146
8.2.5 清除(或最小化)內嵌css和腳本 146
8.2.6 暫停並回顧 147
第9章 css入門 148
9.1 css概述 148
9.2 css的優點 149
9.3 樣式解析 150
9.3.1 選擇器、聲明、屬性和值 150
9.3.2 可選值和默認值 152
9.3.3 繼承和它的不足之處 154
9.3.4 派生選擇器 155
9.3.5 class選擇器 158
9.3.6 外聯、嵌入、內聯樣式 160
9.4 “最合適方案”的設計方法 164
第10章 css布局:標記、盒模型和浮動 166
10.1 頁面流之道 166
10.2 盒模型 167
盒模型是如何工作的 168
10.3 實用布局101 171
10.3.1 從基礎開始 172
10.3.2 使用class 175
10.4 重新進行布局 179
10.4.1 內容清單,終極版 181
10.4.2 套用樣式 184
10.4.3 再次運用浮動 187
10.4.4 處理細節 189
10.5 小結一下 192
第11章 深入瀏覽器之一:doctype 切換和標準模式 193
11.1 doctype切換的傳奇故事 193
11.1.1 用來切換標準的開關 194
11.1.2 切換開關浮出水面 195
11.2 doctype切換基礎 195
11.2.1 切換有多準確 196
11.2.2 web標準和ie8 196
11.2.3 web標準和gecko 198
11.2.4 完整的和不完整的doctype 199
11.2.5 完整的xhtml doctype列表 200
11.2.6 保持簡單 202
第12章 深入瀏覽器之二:bug、變通辦法和css3帶來的一線希望 203
12.1 細述css的bug 204
12.1.1 浮動元素的雙倍邊距bug 209
12.1.2 png圖片的透明背景問題 211
12.1.3 前進之路 211
12.1.4 發現問題僅僅是戰鬥的一半 212
12.2 css3:新的熱點 220
12.2.1 關於alpha通道 221
12.2.2 突破四四方方的樣子 224
12.2.3 讓編碼器注意 225
12.3.4 重新思考“支持” 227
12.3 flash和quicktime:期望的對象 230
12.3.1 可嵌入的對象:一個傲慢與復仇的故事 230
12.3.2 w3c的雙重報復 231
12.3.3 折中方法:在支持標準的同時嵌入多媒體 231
12.3.4 美中不足:對象失效 232
12.3.5 使用一點javascript 233
12.4 一個枯燥的變通辦法世界 233
第13章 深入瀏覽器之三:文字版式 235
13.1 關於文字版式 236
13.2 web字型的a-b-c 239
13.2.1 web字型的簡短歷史 241
13.2.2 最終的標準尺寸 243
13.2.3 手臂和像素 244
13.2.4 無聲無息地被遺忘 246
13.3 字型尺寸的冒險之旅 247
13.3.1 頁面縮放功能:使像素更安全 249
13.3.2 使用em值來設定尺寸:歡笑和眼淚 252
13.3.3 使用字型尺寸關鍵字的方法 253
13.4 我想要我的“franklin gothic”字型 254
13.4.1 css@font-face:在web上使用現實的字型 255
13.4.2 sifr——可訪問的替代類型 257
13.4.3 cufón——“使用你想用的字型” 258
13.4.4 typekit和它的兄弟們 259
第14章 可訪問性:web標準的靈魂 262
14.1 建立可訪問性網站的五個技巧 263
14.1.1 開始 263
14.1.2 使用有邏輯的頁面結構 263
14.1.3 提供鍵盤訪問的方法 263
14.1.4 提供可選方案 264
14.1.5 挑選一種標準,然後堅持下去 264
14.2 有關訪問性的書籍 265
14.3 普遍的質疑 267
14.3.1 “盲人億萬富翁” 267
14.3.2 可訪問性不只是視力受損用戶的問題 268
14.3.3 508條款的解釋 269
14.4 糾正關於可訪問性的錯誤觀點 270
14.5 關於可訪問性的小技巧,一個一個元素地介紹 274
14.5.1 圖片 274
14.5.2 專業工具 282
14.5.3 保持有效的tab鍵:我們的好朋友,tabindex屬性 283
14.5.4 為可訪問性做計畫:你將受益良多 283
第15章 使用基於dom的腳本語言 285
15.1 關於dom的書 285
15.2 dom是什麼 287
15.2.1 使網頁變得像應用程式的標準化方法 288
15.2.2 那么,它在哪裡運行呢 290
15.3 合理使用dom 291
15.3.1 它是如何工作的 291
15.3.2 檢查是否支持 296
15.3.3 不同的代碼書寫方式 297
15.3.4 樣式切換器:有助於增強可訪問性,提供更多的選擇 298
15.4 學會使用你喜愛的(javascript)開發庫 300
15.5 你應該如何使用dom呢 303
第16章 一個網站重構的實例 304
16.1 來自過去的靈感 307
16.2 根據內容的設計 310
16.2.1 留白 311
16.2.2 字型、介紹和首字母下沉 313
16.2.3 基本模式 318
16.2.4 頁腳的創新 318
16.2.5 刊頭設計 324
第17章簡單的標準,迷人的界面 327
17.1 檢視內容 328
從內容檢視到實現策略 333
17.2 再次深入標記 336
17.3 開始套用樣式表 339
有了方法,其他就簡單了 343
17.4 使用dom 346
17.4.1 結識“colgroup” 346
17.4.2 使用jquery 348
17.5 標準貫穿始終 353

譯者序

一本好書,不僅僅帶來知識,更重要的是傳達一種理念、一種思想,引起我們更多的思考。《網站重構》無疑就是這樣一本好書。它的出版猶如一聲春雷打破了網頁設計行業的沉寂,傳統技術方式受到挑戰並逐步被淘汰,Web標準技術成為行業新的標準和開發指南。
如果說六年前,本書第1版出版時,我們還需要大聲呼喊,我們要重視和推廣Web標準理念。那么六年後,當本書即將出版第3版的時候,Web標準已經成為網頁設計行業的共識,成為Web開發通用的技術標準,成為網頁設計師入門的基礎知識。
關於作者
作者Jeffrey Zeldman 是老牌的網頁設計師,也是Web標準技術的捍衛者和“傳教士”。他在1998年創立的Web標準組曾經幫助Netscape公司和微軟公司結束了瀏覽器私有技術之戰;他的工作小組長期幫助和推進瀏覽器(例如IE5、IE7等版本)對Web標準的支持。本書自2004年第1版出版以來已經被翻譯為 15種語言,成為成千上萬網頁設計師學習網頁技術的重要指南書籍。由於Jeffrey Zeldman對Web標準技術的長期推廣和堅持,被《商業周刊》譽為“Web標準國王”。
這是一本什麼樣的書
這是一本介紹Web標準的書籍。它是具有“里程碑”意義的書,已經在Web發展過程中開創一個嶄新的時代!
它的“里程碑”意義對於中國的網站項目開發者和網頁設計師來說尤為深刻。在本書出版之前,中國幾乎所有的網頁開發都採用表格布局法,《網站重構》出版後,以“CSS布局”為典型代表的Web標準技術逐步為大家接受,直到今天被廣泛採用。Web標準技術不僅僅是一種技術的進步和更替,更重要的是它的這種思想和理念,深深影響了這一代網頁設計師,讓我們開始學會思考,在“漂亮”的頁面背後,我們長期忽略並應該關注的東西,包括:網站的成本、易用性、可維護性、SEO以及可訪問性。
《網站重構:套用Web標準進行設計》的第1部分介紹了Web標準思想的產生、發展和推廣,讓我們了解採用Web標準的好處;書的第2部分結合實例,從技術細節上講解了如何採用Web標準技術進行網頁開發。通過閱讀本書,你可以了解:
什麼是Web標準?
Web標準有什麼好處?
如何採用Web標準技術進行網頁設計和開發?
適合什麼樣的人看
這本書適合的讀者是:所有的網站設計師、開發者和網站管理者。
不論你是這一行業的新手還是資深人士,閱讀本書都將讓你獲益匪淺。管理者可以了解如何降低網站成本,如何獲得更多用戶;設計師可以領悟到“表現和結構相分離”的真諦,用CSS自由地控制布局;開發者可以掌握如何降低維護成本,如何重用內容,如何延長網站的壽命。
對於已經了解和熟悉Web標準的開發者來說,本書第3版增加了更多實用的內容:
Web標準技術的最新發展動態和方向;
最新技術的介紹(包括HTML5、CSS3和網頁字型),以及這些技術將對網站產生怎樣的影響;
更多的實例套用和技術解決方案。
譯者感言
從本書第1版出版到現在已經六年了,從Web標準“零”概念到目前行業內的普遍運用,不得不說是一個令人驚喜的變化。中國的網頁設計師、開發者、管理者跟上了這一輪的技術變革。Web標準在快速發展,雖然Web標準的思想核心依然是網站可用性,但隨著更新的設備出現和技術的發展,許多老的Web標準開始淘汰,許多新的規範開始醞釀和發展,例如HTML5、CSS3等。學無止境,我們的設計師和開發者依然須要迎頭趕上。
↓展開全部內容
前言回到頂部↑
當我和同事們在1998年創建The Web Standards Project(網頁標準計畫小組,WaSP)的時候,我們並不知道有效的(valid)、語義化的標記(semantic markup)會讓你的網站內容更容易被Google發現。是的,它確實有這個效果,但在Google出現之前,那並不是我們關注Web標準的原因。20世紀90年代,一個網頁設計高手的定義是:能夠用5套代碼方案為他的客戶設計網站,讓它在以下瀏覽器中都能正確顯示:Netscape 3、Netscape 4、IE3、IE4以及其他非主流瀏覽器。
如果還希望你的網站能在Netscape和微軟的IE3、IE4瀏覽器里實現一些其他功能,那么你將不得不在同一個頁面里使用兩種不兼容的腳本語言,每種語言又有兩個版本,總計四種不兼容的腳本語言。這些代碼又混雜在使用複雜的表格布局(table layouts)的HTML代碼里,結果就是:頁面上至少多了60%不必要的代碼。當網站改版,重新設計,或者需要調整你的網站內容時,你會發現除了更高的成本之外,修改也非常困難,因為內容和布局完全混雜在一起。
圖1 對於站點擁有者來說,遵循Web標準的一個巨大
好處是:他的站點內容更容易被用戶和搜尋引擎找
對於我們這些WaSP發起人來說,所有瀏覽器的私有代碼都會嚴重威脅到Web發展。它導致每個網站至少浪費25%的開發時間,從而成本提高至少25%。而且,如果在1998年設計一個簡單網站就需要寫5套代碼,那么未來的網頁設計會變成什麼樣子?如果瀏覽器廠商為了競爭,故意推出不兼容的私有代碼,那么我們這場自從印刷術發明以來最激動人心的出版和通信技術進步會不會倒退?10年以後,我們是不是製作一個簡單網站,就需要花費12倍的成本,寫12套代碼才能實現?
Web標準——語義(X)HTML標記、CSS布局、基於JavaScript的不衝突腳本編程和DOM,是以上所有問題的解決方案。而且,一直以來,WaSP和其他組織對標準的倡導,最終說服了那些瀏覽器廠商支持標準,以及更多的專業人士來使用標準。
使用Web標準進行設計的好處(如圖1所示),將在本書第1部分詳細解釋,它們包括如下內容。
恰當的語義化標記將使你的網站內容更容易被用戶和搜尋引擎找到。只要將代碼從無語義的表格布局轉換成結構良好的語義標記,網站就可以提高在搜尋引擎結果列表中的位置,提升它們的Alexa排名,並提高其他可發現性(Findability)的指標。(可發現性,是標準化的重要指標,以衡量搜尋引擎最佳化(SEO)帶來的好處。)
將網站的表現從結構和行為中剝離出來,使你的開發和測試更加容易,也更加便利,可以降低你的總預算,或者讓你在網站可用性和內容開發方面的現金投入更寬裕。
將網站的表現從結構和行為中剝離出來,使你的網站更輕量級,從而提高性能。
將網站的表現從結構和行為中剝離出來,使用適當的有語義的標記,使你的網站更容易被各種瀏覽器和不同設備訪問,包括移動設備和給殘疾人士使用的瀏覽工具,例如螢幕閱讀器和其他輸入替代設備。使用Web標準設計網站同樣有利於提供手機版本,如果你希望推出網站的手機版本,採用標準會使它變得更容易。而且在某些情況下可能根本就不需要推出手機版本,當然這也取決於你的網站內容。
使用Web標準而不是瀏覽器私有的代碼設計網站,更加適應未來的發展。如果你的網站正確採用HTML 4.01或者XHTML 1.0,並用CSS2布局,將得到各種瀏覽器的永久支持,即使HTML5、CSS3或者其他新的規範已經確定下來,甚至它們得到將來新的瀏覽器的出色支持,你採用現在的Web標準製作的網站仍將完美工作。而非標準的網站則沒這么幸運,在好一點的情況下,它們會出現混亂,不好的話,網站將停止工作。
本書前兩個版本已經翻譯成15種語言,從保加利亞到韓國,基於標準的設計概念和方法已經被廣泛地介紹給世界上成千上萬的設計師和開發者,以及他們的客戶。自從本書2003年開始銷售以來,幾乎所有承包商或自行開發的公司都已經有了至少一位Web標準的擁護者。這個行業在不斷發展,不再只是那些領先的設計師們擁抱Web標準了,也不再只有那些前衛的承包商宣稱自己在基於標準的設計方面很專業了。
而當本書的第3版面世的時候,Web標準已經成為了設計主流,設計師和開發者開始爭論CSS3,甚至不少人已經開始嘗試微格式(microformats)和HTML5;符合Web標準現已成為包括蘋果、Google、Opera、Adobe、微軟等公司以及開源社區的軟體必備項目。
這個版本經過了大幅度修訂和重寫,並重新組成了以下兩個部分。
書的第1部分解釋了傳統的設計方法帶來的問題以及Web標準如何解決這些問題。同時也提供了充足的論據給那些需要“推銷”基於標準設計方案給那些仍然對標準持懷疑態度的客戶、同事和老闆的人。我們繼續探查不斷擴展的Web標準體系,展示新老標準是如何將整個網路變成一個動態的、有著眾多的套用和高可訪問性、可發現性(以及漂亮的外觀)的內容平台。在第一部分的結尾我們展望一下Web的未來。
書的第2部分為讀者介紹了XHTML、HTML5和CSS,以及(更重要的)結構化,語義化的標記原則;簡潔的、健壯的、最佳化的CSS布局,以及不衝突的腳本編程(unobtrusive scripting)。之後是側邊欄在布局和易用性上的重要性。在第2部分結尾,我們將深入一些網站設計項目去揭示它們關於標準的秘密。
我很感激我的新合著作者Ethan Marcotte、我們的編輯Erin Kissane,以及技術編輯Aaron Gustafson,沒有比這更好的團隊了。如果這是一本好書,那么就感謝這些夥計吧。
第一次接觸Web標準的新朋友,歡迎你們!還有那些早已經和我們共渡旅程的老朋友,歡迎你們回來!

相關詞條

熱門詞條

聯絡我們