Web標準設計

第一章 Web標準不是神話
1.1 理解Web標準
1.1.1 Web標準是什么
1.1.2 錯誤的思維
1.1.3 無障礙網頁倡議（WAI）
1.2 量化Web標準
1.2.1 大部分通過W3C校驗的網站只是偽標準
1.2.2 Web標準要求一覽表
1.2.3 是追求標準還是理解標準
1.3 為什么選擇Web標準
1.4 CSS為什么著火
1.4.1 CSS的作用
1.4.2 CSS 布局 VS. 表格布局
1.5 我能否學好Web標準
1.5.1 我需要具備什么素質和條件才能學好Web標準
1.5.2 學習的重點與難點
1.6 欲善其事， 先利其器
1.6.1 軟件的選擇
1.6.2 調試環(huán)境
第二章 XHTML——瀏覽器上的新大陸
2.1 一切從語義開始
2.2 網頁的構成
2.3 常見標簽
2.3.1 標題
2.3.2 內容
2.3.3 列表
2.3.4 表格
2.3.5 表單
2.3.6 注釋
2.4 比HTML多出一個X
2.4.1 還多了什么
2.4.2 誰影響了網頁的樣子
2.4.2.1 瀏覽器的多模式
2.4.2.2 開啟通往標準的模式
2.4.3 堅持Strict Markup
2.4.4 語義化
2.5 按語義來分類
2.6 塊元素與內聯(lián)元素
2.7 div不是神
2.7.1 合理應用
2.7.1.1 嵌套
2.7.1.2 div不是table
2.7.2 div與span的差別
第三章 CSS——網頁美容師
3.1 語法結構
3.1.1 基本結構
3.1.2 樣式表中的注釋
3.1.3 字符轉義
3.2 選擇符的使用
3.2.1 通配選擇符
3.2.2 類型選擇符
3.2.3 包含選擇符
3.2.4 子對象選擇符
3.2.5 相鄰選擇符
3.2.6 屬性選擇符
3.2.6.1 匹配屬性和屬性值
3.2.6.2 類選擇符
3.2.7 ID選擇符
3.2.8 選擇符分組
3.3 偽元素與偽類
3.3.1 偽類
3.3.1.1 ：first-child偽類
3.3.1.2 鏈接偽類——：link 和 ：visited
3.3.1.3 動態(tài)偽類——：hover. ：active與：focus
3.3.1.4 語言偽類——：lang
3.3.2 偽對象
3.3.2.1 ：first-letter
3.3.2.2 ：first-line
3.3.2.3 ：before和 ：after
3.4 常用單位
3.4.1 長度單位
3.4.1.1 px vs. em
3.4.1.2 百分比單位
3.4.1.3 其他長度單位
3.4.2 顏色單位
3.5 應用 CSS 在網頁上
3.5.1 鏈入外部樣式表
3.5.2 定義內部樣式
3.5.3 定義內聯(lián)定義
3.5.4 導入指定的外部樣式表
3.5.5 各種方式的差異
3.5.6 糟糕的手持設備
3.6 繼承與覆蓋
3.7 優(yōu)先權的計算
第四章 用XHTML和CSS來“擺”網頁
4.1 開始你的第一個頁面
4.2 文字的表現
4.2.1 字體的外型
4.2.2 顏色的定義
4.2.3 背景的定義
4.3 最簡單的布局
4.3.1 Margin 與 Padding
4.3.2 單列固定寬度居中
4.3.3 單列自適應寬度
4.3.4 奇怪的高度
4.3.5 邊框的定義
4.4 郁悶的盒模型
4.5 文字旁邊的圖片
4.5.1 baseline
4.5.2 垂直對齊
4.5.3 圖片的浮動
4.6 列表的應用
4.6.1 定義列表的外觀
4.6.2 導航菜單的應用
4.6.3 列表的常見應用
4.7 表格
4.7.1 表格的控制
4.7.2 為不同瀏覽器使用不同的選擇符
4.7.3 偽表格——看起來像， 其實卻不是表格
4.8 表單
4.8.1 樣式表單
4.8.2 表單元素的細節(jié)
4.8.3 注冊表單
第五章 布局之道
5.1 固定的左右分欄
5.1.1 經典的三行兩列固定寬度的布局
5.1.2 兩列等高——背景偽造篇（一）
5.1.3 自由與未來
5.2 自適應的左右分欄
5.2.1 經典的三行兩列自適應寬度的布局
5.2.2 兩列等高——背景偽造篇（二）
5.2.3 百分比的細節(jié)
5.2.4 clear：right與overflow
5.3 一欄固定寬度， 一欄自適應寬度
5.3.1 單欄浮動
5.3.2 浮動的負值可以讓主要的內容優(yōu)先顯示
5.3.3 Min & Max
5.4 多欄布局
5.4.1 三欄固定寬度和自適應的布局
5.4.2 混合固定寬度和自適應寬度的多欄布局
5.4.3 流出固定寬度的兩欄在自適應寬度的中欄后面
5.4.4 偏移出來固定寬度的兩欄在自適應寬度的中欄后面
5.5 組合之路
第六章 不要害怕各式各樣的瀏覽器
6.1 瀏覽器的市場
6.1.1 古老的IE5.x
6.1.1.1 IE5.x/win
6.1.1.2 IE5.x/mac
6.1.2 討厭的IE6
6.1.3 里程碑——IE7
6.1.4 新一代的IE4
6.1.5 開發(fā)利刃——Firefox
6.1.6 華麗的Oprea
6.1.7 異軍——Safari
6.2 兼容之道
6.2.1 條件注釋
6.2.2 過濾瀏覽器
6.2.3 破壞屬性
6.2.4 Hack之道
6.3 兼容問題
6.3.1 一切從浮動開始
6.3.2 Layout初體驗
6.3.3 閉合浮動元素
6.3.4 IE受不了浮動
6.3.4.1 浮動元素雙倍margin
6.3.4.2 消失的margin-bottom
6.3.4.3 砍掉的內容
6.3.4.4 消失的內容
6.3.4.5 多了一只“豬”
6.3.5 IE的其他問題
6.3.5.1 背景消失
6.3.5.2 背景原點
6.3.5.3 沒有內容的內容
6.3.5.4 消失的滾動條
6.3.5.5 更多的消失
6.3.6 Layout全接觸
6.3.6.1 默認Layout元素
6.3.6.2 屬性觸發(fā)Layout
6.3.6.3 關于內聯(lián)元素
6.3.6.4 重置hasLayout
6.3.6.5 引起問題
6.3.7 塊級格式化范圍（block formatting context）..
6.3.8 其他瀏覽器的問題
第七章 CSS常用技巧
7.1 滑動門技術
7.1.1 滑動門的原理
7.1.2 當只有文字被放大時
7.1.3 一張圖片當N個門使用
7.1.4 一些可能會被忽略的問題
7.1.5 其他的一些應用
7.2 圓角
7.3 圖片的細節(jié)
7.3.1 載入中的圖片
7.3.2 加載不了的圖片
7.3.3 縮放的圖片
7.3.4 偽類縮放的圖片
7.4 被放大的文字
7.5 當前標識
7.5.1 視覺標識
7.5.2 面包屑（Breadcrumbs）
7.5.3 操作步驟
7.6 居中元素
7.6.1 垂直居中多行文字
7.6.2 未知大小圖片在已知大小容器中垂直和水平居中
7.6.3 相對頁面垂直和水平居中已知大小的容器
7.7 隱藏的Tips會出現
7.7.1 實現原理
7.7.2 圖片信息
第八章 文字的藝術
8.1 中文的特殊性
8.2 縮放機制
8.2.1 縮放的文字
8.2.2 縮放的盒子
8.3 行高與基線
8.3.1 行高的細節(jié)
8.3.2 基線
8.3.3 文本空間
8.4 input里的文字
8.5 鏈接的范圍
8.5.1 額外的點擊空間
8.5.2 缺少的點擊空間
8.6 不間斷的文字
8.7 省略掉的文字
8.8 字體的介紹
8.8.1 中文字體
8.8.2 英文字體
8.9 語言會影響到字體
第九章 細品命名與微格式
9.1 命名規(guī)則
9.2 命名原則
9.3 不再陌生的 Microformats
9.3.1 認識微格式
9.3.2 從微格式中提煉知識
9.4 ID與CLASS選擇誰
9.5 自定義標簽
9.6 命名的重要性
第十章 換個思維來設計
10.1 消失了文字， 看到了彩虹
10.1.1 文字變成圖片的幾種方法
10.1.2 文字也可以用Flash來表現
10.2 用div代替html/ body
10.3 縮放的布局
10.3.1 實現原理
10.3.2 縮放一半
10.3.3 精準em
10.4 網頁是可以用疊的
10.4.1 在一屏幕里顯示所有內容
10.4.2 圖片的位置
10.4.3 position：absolute的層疊
10.5 百分比加減固定數值
10.5.1 50%+200px
10.5.2 50%-200px
10.6 兩列等高——margin負值篇
10.7 類display：inline-block的應用
第十一章 隱藏在瀏覽器背后的CSS
11.1 (X)HTML與CSS校驗的意義
11.2 IE背后的善良
11.2.1 IE常見私有屬性
11.2.2 濾鏡
11.3 火狐貍的尾巴帶著CSS3的味道
11.3.1 At-rules 規(guī)則
11.3.2 Properties 屬性
11.3.3 Values 屬性值
11.4 其他瀏覽器的兼容方案
第十二章 JavaScript讓Web動起來
12.1 概念
12.1.1 什么是JavaScript
12.1.2 ECMAScript是什么
12.1.3 什么是DOM
12.1.4 什么是BOM
12.1.5 想法
12.1.6 怎樣讓JavaScript運行
12.2 編程基礎
12.2.1 語法
12.2.2 變量
12.2.3 基本數據類型
12.2.3.1 數值
12.2.3.2 字符串
12.2.3.3 布爾型
12.2.4 表達式與運算符
12.2.4.1 算術運算符
12.2.4.2 關系運算符
12.2.4.3 邏輯運算符
12.2.4.4 賦值運算符
12.2.5 基本語句
12.2.5.1 條件語句
12.2.5.2 循環(huán)語句
12.2.6 函數
12.2.7 對象
12.3 DOM無處不在
12.3.1 把文檔表示為樹
12.3.2 樹的節(jié)點
12.3.3 節(jié)點的屬性
12.3.4 HTML DOM 特征
12.4 事件處理
12.4.1 什么是事件
12.4.2 Event對象
12.4.3 事件的綁定
12.4.4 分離
12.5 只要改變className就可以改變很多——下拉菜單的練習
12.5.1 結構的選擇
12.5.2 分離實現效果
12.5.3 想法
12.6 表單的輔助
12.6.1 檢查數據
12.6.2 隱式提示
12.6.3 創(chuàng)建內容——innerHTML VS createElement
12.6.4 setTimeout的用處
12.6.5 Ajax初體驗
12.6.6 HTML5的表單元素
12.7 class特效
第十三章 親 和 力
13.1 概念
13.2 Web內容可訪問性指南
13.2.1 并非所有的內容都是顯示的
13.2.2 保持原有功能的有效性
13.2.3 讓文字看得見
13.2.4 熱鍵操作
13.2.5 導航
13.2.6 標題與內容
13.2.7 語言與編碼
13.2.8 親和力聲明
13.2.9 建議
13.3 技術層上的一些親和力
13.3.1 如何讓鏈接變得更有表達能力
13.3.2 擴展鏈接的提示
13.3.3 節(jié)省步驟
13.3.4 圖片還是背景圖片
第十四章 XML的無限變化
14.1 XML的作用
14.1.1 XML能做什么
14.1.2 XML的表現
14.1.3 XML+CSS的表現
14.1.4 元素的語義
14.1.5 XSLT初體驗
14.2 XPath與XSLT
14.2.1 XPath簡介
14.2.2 XSLT應用XPath
14.2.3 程序性轉換的XSLT
14.2.4 XSLT常見元素
14.2.5 XSLT函數 document
14.2.6 XPath定位
14.2.6.1 定位路徑表達式
14.2.6.2 軸
14.2.6.3 節(jié)點測試
14.2.7 XPath基本表達式
14.2.8 XPath常見函數
14.2.9 X練習
14.3 華麗的RSS
14.3.1 復習
14.3.2 轉換時間格式的模板與參數的應用
14.3.3 過濾與排序
14.3.4 背景色交替
14.3.5 顯示(X)HTML內容
14.3.6 還能做什么？
14.4 XML的周邊與命運
14.4.1 XML Schema
14.4.2 WML
14.4.3 SVG
14.4.4 XML的未來
第十五章 簡單的實戰(zhàn)
15.1 創(chuàng)建開源社區(qū)系統(tǒng)OpenLab的首頁
15.1.1 分析結構
15.1.2 疊出來的頭部
15.1.3 一張背景的導航
15.1.4 表格無敵
15.1.5 隱藏內容
15.1.6 顯示的變化
15.2 Ao.A相冊
15.2.1 分析結構
15.2.2 大背景
15.2.3 基本結構
15.2.4 圖片展示
15.2.5 浮動的空白
15.2.6 小小的Tip提示
15.2.7 IE的兼容問題
15.2.8 放棄也是一種美！
15.2.9 精準到px
15.2.10 讓網頁動起來——JavaScript
15.2.10.1 那JavaScript要應用在哪些地方呢？
15.2.10.2 那使用JavaScript要注意什么呢？
15.2.11 讓網頁動起來——Flash
15.2.12 網頁并非會按我們所想的顯示
15.2.13 網頁并不一定要用瀏覽器看的
15.2.14 打印網頁
15.3 架構前端
15.3.1 腳本框架
15.3.2 模塊化樣式表
15.3.3 模塊化(X)HTML
15.3.4 文件架構
15.4 給自己做點什么
15.4.1 開始設計屬于你自己的網站
15.4.2 結構與表現
15.4.3 華麗的效果源自哪里?
第十六章 最后的建議
16.1 思維的樂趣
16.1.1 堅持獨立思考
16.1.2 要善于自己發(fā)現和解決問題
16.1.3 不斷豐富知識， 提高所掌握知識的質量
16.1.4 換個角度思考問題
16.2 減少重復開發(fā)的選擇
16.3 讓維護方便點
16.3.1 適當的注釋
16.3.2 API手冊
16.4 以后自學的方向
附錄