漸進(jìn)增強(qiáng)的Web設(shè)計(jì)

第一部分 測(cè)試驅(qū)動(dòng)的漸進(jìn)增強(qiáng)方法
第1章 我們的方法
1.1 測(cè)試瀏覽器能力
1.2 規(guī)劃漸進(jìn)增強(qiáng)：X光透視
1.3 從X光到實(shí)踐：漸進(jìn)增強(qiáng)開(kāi)發(fā)的構(gòu)成
1.4 理論結(jié)合實(shí)踐
第2章 漸進(jìn)增強(qiáng)實(shí)踐：X光透視
2.1 X光透視概述
2.1.1 定義內(nèi)容層級(jí)并將組件映射到HTML
2.1.2 編寫(xiě)基礎(chǔ)標(biāo)記和盡可能少的安全樣式
2.1.3 應(yīng)用標(biāo)記、樣式和腳本增強(qiáng)
2.2 案例1：規(guī)劃新聞網(wǎng)站的結(jié)構(gòu)和組織方式
2.2.1 評(píng)估內(nèi)容組織和命名方式
2.2.2 借助原生HTML層級(jí)功能實(shí)現(xiàn)內(nèi)容組織
2.2.3 構(gòu)建導(dǎo)航
2.2.4 處理分層和動(dòng)畫(huà)內(nèi)容
2.2.5 支持動(dòng)態(tài)過(guò)濾和排序
2.3 案例2：結(jié)賬表單中的工作流、驗(yàn)證和數(shù)據(jù)提交
2.3.1 解構(gòu)結(jié)賬表單設(shè)計(jì)
2.3.2 標(biāo)記表單以確?？稍L問(wèn)性
2.3.3 添加限制與驗(yàn)證
2.3.4 組合基本和增強(qiáng)體驗(yàn)
2.4 案例3：預(yù)算計(jì)算器里的交互數(shù)據(jù)可視化
2.4.1 選擇預(yù)算線(xiàn)組件的基本標(biāo)記
2.4.2 從基礎(chǔ)標(biāo)記開(kāi)始創(chuàng)建可訪問(wèn)的滑塊
2.4.3 制作餅圖
2.5 案例4：支持功能完備瀏覽器應(yīng)用程序的各種功能——照片管理器
2.5.1 制作全局導(dǎo)航元素的標(biāo)記
2.5.2 支持專(zhuān)輯和多張照片的復(fù)雜交互
2.5.3 創(chuàng)建自定義表單和疊加
2.5.4 創(chuàng)建返回按鈕支持
2.6 在實(shí)踐中運(yùn)用X光的核對(duì)清單
第3章 編寫(xiě)有意義的標(biāo)記
3.1 標(biāo)記文本和圖像
3.1.1 用于標(biāo)記有意義文本的元素
3.1.2 列表
3.1.3 表格式數(shù)據(jù)
3.1.4 圖像
3.1.5 嵌入式富媒體
3.1.6 嵌入外部網(wǎng)頁(yè)內(nèi)容
3.2 標(biāo)記交互內(nèi)容
3.2.1 錨鏈接
3.2.2 表單結(jié)構(gòu)
3.2.3 表單控件
3.3 創(chuàng)建頁(yè)面環(huán)境
3.3.1 了解何時(shí)該用塊級(jí)元素或內(nèi)聯(lián)元素
3.3.2 用ID和類(lèi)標(biāo)識(shí)元素
3.3.3 用WAI-ARIA路標(biāo)角色標(biāo)識(shí)頁(yè)面主要版塊
3.3.4 保持源代碼順序清晰易讀
3.3.5 使用title屬性
3.4 建立一張HTML文檔
3.4.1 DOCTYPE
3.4.2 文檔頭
3.5 加入可訪問(wèn)性
3.5.1 可訪問(wèn)性指導(dǎo)原則和法律標(biāo)準(zhǔn)
3.5.2 Web內(nèi)容可訪問(wèn)性指南
第4章 有效應(yīng)用樣式
4.1 將樣式應(yīng)用到網(wǎng)頁(yè)
4.1.1 將樣式保存在外部樣式表里
4.1.2 鏈接到外部樣式表
4.1.3 使用有意義的命名慣例
4.2 為基本和增強(qiáng)體驗(yàn)添加樣式
4.2.1 基本體驗(yàn)里的安全樣式
4.2.2 為增強(qiáng)體驗(yàn)添加樣式
4.3 可訪問(wèn)性的考慮要點(diǎn)
4.4 應(yīng)對(duì)bug和瀏覽器差異
4.4.1 條件注釋
4.4.2 常見(jiàn)問(wèn)題和變通方法
第5章 編寫(xiě)增強(qiáng)和交互腳本
5.1 如何正確引用JavaScript
5.1.1 避免內(nèi)聯(lián)JavaScript
5.1.2 引用外部JavaScript
5.2 理解JavaScript在基本體驗(yàn)里的位置
5.3 腳本增強(qiáng)的最佳實(shí)踐
5.3.1 在內(nèi)容就緒時(shí)運(yùn)行腳本
5.3.2 給標(biāo)記應(yīng)用行為
5.3.3 用JavaScript構(gòu)建增強(qiáng)標(biāo)記
5.3.4 管理內(nèi)容可見(jiàn)性
5.3.5 應(yīng)用樣式增強(qiáng)
5.4 保持和增強(qiáng)可用性與可訪問(wèn)性
5.4.1 實(shí)現(xiàn)鍵盤(pán)訪問(wèn)
5.4.2 指派WAI-ARIA屬性
5.4.3 測(cè)試可訪問(wèn)性
5.4.4 維持狀態(tài)和“后退”按鈕
第6章 測(cè)試瀏覽器能力
6.1 EnhanceJS：一套能力測(cè)試框架
6.2 通過(guò)EnhanceJS應(yīng)用增強(qiáng)
6.3 配置EnhanceJS
6.3.1 載入額外的樣式表
6.3.2 載入額外的腳本
6.3.3 自定義體驗(yàn)切換鏈接
6.3.4 強(qiáng)制通過(guò)或不通過(guò)EnhanceJS測(cè)試
6.4 擴(kuò)展EnhanceJS測(cè)試套件
6.4.1 用EnhanceJS選項(xiàng)修改測(cè)試套件
6.4.2 創(chuàng)建EnhanceJS的新實(shí)例或多個(gè)實(shí)例
6.4.3 為調(diào)試開(kāi)啟能力測(cè)試警告
6.5 在服務(wù)器上優(yōu)化EnhanceJS
第二部分 漸進(jìn)增強(qiáng)實(shí)戰(zhàn)
第7章 用漸進(jìn)增強(qiáng)方法構(gòu)建組件
7.1 組件是如何編寫(xiě)的
7.2 在組件各章里導(dǎo)航
7.3 可下載的范例代碼
第8章 可折疊內(nèi)容
8.1 X光透視
8.2 創(chuàng)建可訪問(wèn)的可折疊內(nèi)容
8.2.1 基礎(chǔ)標(biāo)記和樣式
8.2.2 增強(qiáng)標(biāo)記和樣式
8.2.3 實(shí)現(xiàn)可折疊的增強(qiáng)腳本
8.3 使用可折疊腳本
第9章 標(biāo)簽頁(yè)
9.1 X光透視
9.2 創(chuàng)建標(biāo)簽頁(yè)
9.2.1 基礎(chǔ)標(biāo)記和樣式
9.2.2 增強(qiáng)標(biāo)記和樣式
9.2.3 標(biāo)簽頁(yè)腳本
9.3 讓標(biāo)簽頁(yè)更進(jìn)一步
9.3.1 書(shū)簽和歷史（后退按鈕）追蹤
9.3.2 自動(dòng)輪換的標(biāo)簽頁(yè)
9.3.3 引用外部標(biāo)簽內(nèi)容
9.3.4 將標(biāo)簽頁(yè)顯示為手風(fēng)琴組件
9.4 使用標(biāo)簽頁(yè)腳本
第10章 工具提示
10.1 X光透視
10.2 用title內(nèi)容創(chuàng)建工具提示
10.2.1 基礎(chǔ)標(biāo)記和樣式
10.2.2 增強(qiáng)標(biāo)記和樣式
10.2.3 工具提示增強(qiáng)腳本
10.3 用錨鏈接創(chuàng)建工具提示
10.4 用外部來(lái)源創(chuàng)建工具提示
10.5 使用工具提示腳本
第11章 樹(shù)形控件
11.1 X光透視
11.2 創(chuàng)建樹(shù)形控件
11.2.1 基礎(chǔ)標(biāo)記和樣式
11.2.2 增強(qiáng)標(biāo)記和樣式
11.2.3 樹(shù)形控件增強(qiáng)腳本
11.3 使用樹(shù)形控件腳本
第12章 HTML5 canvas圖表
12.1 X光透視
12.2 基礎(chǔ)標(biāo)記
12.3 創(chuàng)建可訪問(wèn)的圖表
12.3.1 解析表格數(shù)據(jù)
12.3.2 用canvas實(shí)現(xiàn)數(shù)據(jù)可視化
12.3.3 添加表格增強(qiáng)樣式
12.3.4 保持?jǐn)?shù)據(jù)的可訪問(wèn)性
12.4 讓canvas圖表更進(jìn)一步：visualize.js插件
第13章 對(duì)話(huà)框和疊加層
13.1 X光透視
13.2 創(chuàng)建對(duì)話(huà)框
13.2.1 基礎(chǔ)標(biāo)記和樣式
13.2.2 增強(qiáng)標(biāo)記和樣式
13.2.3 對(duì)話(huà)框增強(qiáng)腳本
13.3 讓對(duì)話(huà)框更進(jìn)一步
13.4 使用對(duì)話(huà)框腳本
第14章 按鈕
14.1 X光透視
14.2 給基于input的按鈕添加樣式
14.2.1 基礎(chǔ)標(biāo)記和樣式
14.2.2 增強(qiáng)標(biāo)記和樣式
14.2.3 懸停狀態(tài)增強(qiáng)腳本
14.3 創(chuàng)建帶有復(fù)雜視覺(jué)格式的按鈕
14.3.1 基礎(chǔ)標(biāo)記和樣式
14.3.2 增強(qiáng)標(biāo)記和樣式
14.3.3 input轉(zhuǎn)button增強(qiáng)腳本
14.4 使用input轉(zhuǎn)button腳本
14.5 讓按鈕更進(jìn)一步
第15章 復(fù)選框、單選按鈕和星級(jí)評(píng)分
15.1 X光透視
15.2 創(chuàng)建自定義復(fù)選框
15.2.1 基礎(chǔ)標(biāo)記
15.2.2 增強(qiáng)標(biāo)記和樣式
15.2.3 復(fù)選框腳本
15.3 創(chuàng)建自定義單選按鈕
15.3.1 基礎(chǔ)標(biāo)記
15.3.2 增強(qiáng)標(biāo)記和樣式
15.3.3 單選按鈕腳本
15.4 讓自定義input更進(jìn)一步：星級(jí)評(píng)分組件
15.4.1 基礎(chǔ)標(biāo)記
15.4.2 增強(qiáng)標(biāo)記和樣式
15.4.3 編寫(xiě)星級(jí)評(píng)分組件腳本
15.5 使用自定義input和星級(jí)評(píng)分腳本
第16章 滑塊
16.1 X光透視
16.2 創(chuàng)建滑塊
16.2.1 基礎(chǔ)標(biāo)記和樣式
16.2.2 增強(qiáng)標(biāo)記和樣式
16.2.3 滑塊腳本
16.3 使用滑塊腳本
第17章 下拉菜單
17.1 X光透視
17.2 創(chuàng)建可訪問(wèn)的自定義下拉菜單
17.2.1 基礎(chǔ)標(biāo)記和樣式
17.2.2 增強(qiáng)標(biāo)記和樣式
17.2.3 自定義下拉菜單增強(qiáng)腳本
17.3 讓自定義下拉菜單更進(jìn)一步：給選項(xiàng)添加高級(jí)樣式
17.4 使用自定義下拉菜單腳本
第18章 列表生成器
18.1 X光透視
18.2 創(chuàng)建列表生成器
18.2.1 基礎(chǔ)標(biāo)記和樣式
18.2.2 增強(qiáng)標(biāo)記和樣式
18.2.3 列表生成器腳本
18.3 讓列表生成器更進(jìn)一步：多項(xiàng)選擇、排序、自動(dòng)完成和上下文菜單
18.3.1 多項(xiàng)選擇
18.3.2 拖放排序
18.3.3 自動(dòng)完成
18.3.4 上下文菜單
18.4 使用列表生成器腳本
第19章 文件輸入控件
19.1 X光透視
19.2 創(chuàng)建自定義的文件輸入控件
19.2.1 基礎(chǔ)標(biāo)記和樣式
19.2.2 增強(qiáng)標(biāo)記和樣式
19.2.3 自定義文件輸入控件的腳本
19.3 使用自定義文件輸入控件腳本
放眼未來(lái)