基本介紹
- 書名：精通HTML 5+CSS 3——100%網頁設計與布局密碼
- 作者：龍馬工作室
- ISBN：9787115352316
- 頁數：394頁
- 定價：59.8元
- 出版社：人民郵電出版社
- 出版時間：2016年1月
- 裝幀：平裝
- 開本：16開
內容簡介,圖書目錄,
內容簡介
《精通HTML 5+CSS 3——100%網頁設計與布局密碼》深入淺出，結合實際案例系統地講解了使用HTML 5和CSS 3進行網頁設計與布局的知識和技巧。全書分為4個部分。第 1篇【HTML 5篇】主要介紹了HTML 5的基礎知識和基本結構，以及如何在網頁上設計文本、色彩、圖片、列表、段落、超連結、多媒體、表單和謎欠辣店框架等，還對HTML 5的本地存儲和離線Web套用進行了講解。第 2篇【CSS 3篇】主要介紹了CSS 3的基礎知識和網頁樣式代碼的生成方法，以及如何通過CSS 3設定文本樣式、網頁圖像特效、背景顏色與背景圖像等，還對CSS的高級特性、CSS定位與DIV布局核心技術、盒子的浮動與定位等進行了講解。第3篇【綜合套用篇】主要介紹了如何綜合套用HTML 5和CSS 3設計製作影音視頻網站、企業入口網站、電子商務網站和休閒旅遊網站的頁面。第4篇【實戰篇】選取了頁凝慨熱門的新聞網站和微博/部落格網站進行分析，並以此為基盼慨格礎指導讀者完成自己的網站設計。
《精通HTML 5+CSS 3——100%網頁設計與布局密碼》附贈一張DVD多媒體教學光碟，包含與圖拔熱斷書內容同步的教學錄像，以及本書所有案例的原始碼和相關學習資料的電子書、教學錄像等超值資源，便於讀者擴展學習。
《精通HTML 5+CSS 3——100%網頁設計與布局密碼》內容翔實，結構清晰，既適合HTML 5和CSS 3的初學者自學使用，也可以作為各類院校相關專業學生和電腦培訓班的教材或輔導用書。
圖書目錄
第 1篇 HTML 5篇
第 1章 HTML 5基礎 2
1.1 HTML 5簡介 3
1.1.1 HTML發展史 3
1.1.2 瀏覽器兼容性分析 3
1.1.3 效率和用戶優先特性 3
1.1.4 化繁為簡的設計原則 拔說殼4
1.1.5 通用訪問方式 4
1.2 HTML 5的新變化 5
1.2.1 語法的變只謎化 6
1.2.2 新增的元素和廢除的元素 6
1.2.3 新增的屬性和廢除的屬性 10
1.2.4 全局屬性的變化 14
1.3 HTML 5檔案的編寫方法 17
1.3.1 使用記事本 18
1.3.2 使用Dreamweaver 19
1.3.3 編寫第 一個HTML 5網頁檔案 20
高手私房菜 22
技巧：使用記事本編輯HTML檔案後在瀏覽器中預覽 22
第 2章 HTML 5的基本結構 23
2.1 HTML 5的適用範圍 24
2.2 使用瀏覽器查看HTML 5檔案 24
2.2.1 瀏覽器對HTML 5的兼容 24
2.2.2 查看頁面效果 24
2.2.3 查看網頁源檔案 25
2.3 一個簡單的HTML 5頁面 25
2.3.1 搭建瀏覽器環境 25
2.3.2 檢測瀏覽器是否支持HTML標記 26
2.3.3 用HTML標準結構編寫“hello，world”頁面 27
2.4 HTML基本結構 28
2.4.1 文檔類型說明 28
2.4.2 HTML標記 28
2.4.3 頭標記head 29
2.4.4 標題標記title 29
2.4.5 元信息標記meta 30
2.4.6 網頁的主體標記 31
2.4.7 頁面注釋標記 32
2.5 製作符合W3C標準的HTML 5網頁 33
高手私房菜 34
技巧1：網頁中常用的語言編碼方式 34
技巧2：網頁中的基本標籤是否必須成對出現 34
第3章 網頁文本設計 35
3.1 添加網頁文本 36
3.1.1 普通文本 36
3.1.2 特殊文字元號 36
3.2 網頁文本排版 37
3.2.1 換行標記
與段落標記
37
3.2.2 標題標記
~
39
3.2.3 文本水平居中標記
40
3.3 成才教育網文本設計 41
高手私房菜 42
技巧：區別換行標記和段落標記 42
第4章 網頁色彩和圖片設計 43
4.1 網頁色彩與圖片 44
4.2 網乃凳棕拜頁圖像的套用 44
4.2.1 網頁圖片格式 44
4.2.2 在網頁中插入圖像標記 45
4.2.3 設定圖像源檔案 46
4.2.4 設定圖像在網頁中的寬度和高度 47
4.2.5 設定圖像的提示文字 48
4.3 製作茂森房地產廣告網頁 49
高手私房菜 50
技巧：alt屬性的值 50
第5章 網頁列表和段落設計 51
5.1 網頁文字列表設計 52
5.1.1 建立無序列表 52
5.1.2 建立有序列表 53
5.2 設定網頁段落格式 54
5.2.1 單詞間隔 55
5.2.2 字元間隔 56
5.2.3 文字修飾 57
5.2.4 垂直對齊方式 58
5.2.5 水平對齊方式 59
5.2.6 文本縮進 61
5.2.7 文本行高 62
5.2.8 處理空白 63
5.3 製作圖文混排型網頁 64
高手私房菜 66
技巧：文字和圖片的導航速度誰**快 66
第6章 網頁超連結設計 67
6.1 連結和路徑 68
6.1.1 超連結的概念 68
6.1.2 連結路徑URL 69
6.1.3 HTTP路徑 69
6.1.4 FTP路徑 70
6.1.5 電子郵件路徑 71
6.2 連結元素 72
6.2.1 指定路徑屬性 72
6.2.2 顯示連結目標屬性 73
6.2.3 激活順序屬性 75
6.2.4 連結的熱鍵屬性 76
6.3 圖像連結 77
6.3.1 創建連結區域元素 77
6.3.2 連結區域的名稱屬性 77
6.3.3 定義滑鼠敏感區元素 77
6.3.4 連結的路徑屬性 79
6.3.5 連結的文本說明屬性 80
6.3.6 使用圖片中的連結 81
高手私房菜 82
技巧：區分URI、URL和URN 82
第7章 網頁多媒體設計 83
7.1 HTML5中的 Audio和Video 84
7.1.1 視頻容器 84
7.1.2 音頻解碼器和視頻解碼器 84
7.1.3 瀏覽器對Audio和Video標籤的支持情況 85
7.2 使用Audio和Video API 85
7.2.1 理解媒體元素 85
7.2.2 使用audio元素 86
7.2.3 使用video元素 87
7.3 設定網頁多媒體屬性 88
7.4 調用網頁多媒體的方法 90
7.5 視頻播放頁面 91
高手私房菜 94
技巧：在Firefox 8.0中正常播放HTML 5支持的視頻格式檔案 94
第8章 網頁表單設計 95
8.1 表單簡介 96
8.1.1 表單的用途 96
8.1.2 表單的屬性設定 97
8.2 表單基本元素的套用 98
8.2.1 文字欄位 98
8.2.2 密碼框 99
8.2.3 單選按鈕 100
8.2.4 複選框 101
8.2.5 列表框 102
8.2.6 列表項 103
8.2.7 普通按鈕 104
8.2.8 提交按鈕 105
8.2.9 圖像域 106
8.3 表單高級元素的使用 107
8.3.1 URL類型元素 107
8.3.2 Email類型元素 108
8.3.3 date類型元素 109
8.3.4 time類型元素 110
8.3.5 datetime類型元素 110
8.3.6 datetime-local類型元素 111
8.3.7 month類型元素 112
8.3.8 week類型元素 113
8.3.9 number類型元素 114
8.3.10 range類型元素 114
8.3.11 search類型元素 115
8.3.12 tel類型元素 116
8.3.13 color類型元素 117
高手私房菜 118
技巧1：在表單中實現檔案上傳框 118
技巧2：解決單選按鈕可以同時選中多個問題 118
第9章 網頁框架設計 119
9.1 框架結構概述 120
9.2 創建框架 121
9.2.1 創建預定義的框架集 122
9.2.2 向框架中添加內容 123
9.2.3 創建嵌套框架集 125
9.3 保存框架和框架集檔案 126
9.3.1 保存所有的框架集檔案 126
9.3.2 保存框架集檔案 127
9.3.3 保存框架檔案 127
9.4 選擇框架和框架集 127
9.4.1 在【框架】面板中選擇框架和框架集 128
9.4.2 在文檔視窗中選擇框架或框架集 129
9.5 設定框架和框架集屬性 130
9.5.1 設定框架屬性 130
9.5.2 設定框架集屬性 131
9.5.3 改變框架的背景顏色 131
9.6 使用標籤對創建嵌入式框架 133
高手私房菜 134
技巧1：框架長度或者寬度的設定 134
技巧2：設定框架框線的注意事項 134
第 10章 HTML 5本地存儲 135
10.1 Web Storage存儲 136
10.1.1 sessionStorage對象 136
10.1.2 localStorage對象 137
10.2 操作localStorage 138
10.2.1 清空localStorage數據 138
10.2.2 遍歷localStorage數據 139
10.2.3 使用JSON對象存取數據 139
10.2.4 管理localStorage數據 142
10.3 WebSQL資料庫套用 142
10.3.1 打開與創建資料庫 143
10.3.2 執行事務 143
10.3.3 插入數據 143
10.3.4 數據管理 144
高手私房菜 144
技巧：Web SQL的使用 144
第 11章 構建HTML 5離線Web套用—快取技術 145
11.1 HTML 5離線Web套用概述 146
11.2 使用HTML 5離線Web套用API 146
11.2.1 檢查瀏覽器的支持情況 146
11.2.2 搭建簡單的離線應用程式 147
11.2.3 支持離線行為 147
11.2.4 Manifest檔案 148
11.2.5 ApplicationCache API 149
11.3 使用HTML 5離線Web套用構建套用 150
11.3.1 創建記錄資源的manifest檔案 150
11.3.2 創建構成界面的HTML和CSS 151
11.3.3 創建離線的JavaScript 152
11.3.4 檢查applicationCache的支持情況 154
11.3.5 為Update按鈕添加處理函式 154
11.3.6 添加Geolocation的支持情況 155
11.3.7 添加Storage功能代碼 155
11.3.8 添加離線事件處理程式 156
高手私房菜 156
技巧1：不同的瀏覽器可以讀取同一個Web中存儲的數據嗎 156
技巧2：離線存儲站點時是否需要瀏覽者同意 156
第 2篇 CSS 3篇
第 12章 CSS 3樣式核心基礎 158
12.1 創建使用CSS的網頁 159
12.2 CSS語法書寫標準 161
12.2.1 規則塊 161
12.2.2 @規則 161
12.2.3 規則集 162
12.2.4 注釋 164
12.2.5 字元和大小寫 164
12.3 關鍵字和字元串 165
12.3.1 客戶端瀏覽器的特定擴展 165
12.3.2 字元串 165
12.4 CSS標準 166
12.4.1 CSS樣式標準 166
12.4.2 傳統HTML的缺點分析 167
12.4.3 CSS樣式的引用 169
12.4.4 編輯CSS樣式 171
12.4.5 瀏覽器與CSS的兼容性分析 171
12.5 使用CSS選擇器 172
12.5.1 標記選擇器 172
12.5.2 類別選擇器 173
12.5.3 ID選擇器 176
12.6 在HTML中調用CSS的方法 177
12.6.1 直接定義CSS樣式 177
12.6.2 內嵌式CSS樣式 178
12.6.3 連結式CSS樣式 179
12.6.4 導入外部CSS樣式 180
12.6.5 CSS樣式優先權 181
高手私房菜 182
技巧1：使用全局選擇器“*” 182
技巧2：簡寫CSS字型屬性 182
第 13章 網頁樣式代碼的生成方法 183
13.1 從零開始手工編寫 184
13.1.1 編寫標題樣式代碼 185
13.1.2 編寫圖片控制代碼 186
13.1.3 設定網頁正文 187
13.1.4 設定整體頁面樣式 187
13.1.5 定義段落樣式 188
13.2 完整網頁代碼分析 188
13.2.1 獲取網頁代碼 189
13.2.2 查看網頁樣式代碼 190
13.2.3 分析網頁樣式代碼結構 191
13.2.4 讀懂網頁樣式代碼 191
13.2.5 讀懂CSS注釋 191
13.3 使用Dreamweaver輔助工具創建頁面 191
13.3.1 創建頁面 191
13.3.2 分析頁面結構 192
13.3.3 與手工編寫的區別 192
13.4 在Dreamweaver中新建CSS樣式 193
13.5 在Dreamweaver中編輯CSS樣式 194
13.6 為圖像創建CSS樣式 195
高手私房菜 196
技巧1：Dreamweaver CS6中快捷鍵的使用 196
技巧2：超連結的一些特殊效果 196
第 14章 用CSS 3設定文本樣式 197
14.1 樣式的參數單位 198
14.2 設定網頁文本的基本樣式 200
14.2.1 網頁文本顏色的定義 200
14.2.2 定義整體頁面文本樣式 201
14.2.3 設定具體文字的字型 203
14.2.4 設定文字的傾斜效果 203
14.2.5 設定文字的粗細效果 205
14.3 設定網頁文本的行高與間距 206
14.3.1 設定網頁文字間距 206
14.3.2 設定網頁文字行高 207
14.3.3 設定網頁文欄位落間距 208
14.4 設定網頁文本的對齊方式 209
14.4.1 文本的水平對齊方式 209
14.4.2 文本的垂直對齊方式 211
14.5 設定文字與背景顏色 212
14.5.1 使用樣式參數進行設定 212
14.5.2 更簡潔的解決方案 214
14.6 設定其他網頁文本樣式 215
14.6.1 英文字母大小寫的自動轉換 216
14.6.2 控制文字的大小 217
14.6.3 網頁文字的裝飾效果 218
14.6.4 設定段落首行縮進效果 219
高手私房菜 220
技巧：通過濾鏡屬性設定文字效果 220
第 15章 用CSS 3設定網頁圖像特效 221
15.1 設定圖像框線 222
15.1.1 圖像框線基本屬性 222
15.1.2 為不同的框線分別設定樣式 223
15.2 圖像縮放功能的實現 224
15.3 圖文混排 225
15.3.1 文字環繞 226
15.3.2 設定圖像與文字的間距 227
15.4 製作長泰養生網頁 228
15.5 設定圖像與文字的對齊方式 231
15.5.1 橫向對齊方式 231
15.5.2 縱向對齊方式 233
高手私房菜 234
技巧1：解決在瀏覽器中圖像無法顯示的問題 234
技巧2：解決圖像超出撐破DIV的問題 234
第 16章 用CSS 3設定網頁背景顏色與背景圖像 235
16.1 設定背景顏色 236
16.2 設定背景圖像 237
16.3 設定背景圖像平鋪 238
16.4 設定背景圖像位置 239
16.5 設定背景圖像位置固定 241
16.6 用圖像替換標題的文本 243
16.7 使用滑動門技術的標題 244
高手私房菜 245
技巧：為網頁內容添加水印 245
第 17章 CSS 3的高級特性 247
17.1 複合選擇器 248
17.1.1 交集選擇器 248
17.1.2 並集選擇器 249
17.1.3 後代選擇器 250
17.2 CSS的繼承特性 251
17.2.1 繼承關係 252
17.2.2 CSS繼承的運用 252
17.3 CSS的層疊特性 253
高手私房菜 256
技巧：CSS選擇器的特殊性 256
第 18章 CSS定位與DIV布局核心技術 257
18.1 塊級元素和行內級元素 258
18.1.1 塊級元素和行內級元素的不同 258
18.1.2 DIV元素和span元素 260
18.2 使用DIV標記與span標記布局網頁 261
18.3 盒子模型 262
18.3.1 盒子模型的概念 262
18.3.2 網頁border區域定義 263
18.3.3 網頁padding區域定義 265
18.3.4 網頁margin區域定義 266
18.4 box類型和display屬性 268
18.4.1 HTML元素默認的box類型 268
18.4.2 視點和Box容器 269
18.4.3 塊級元素和塊級Box 269
18.4.4 行內級元素和行內級Box 270
18.4.5 插入式Box 271
18.5 可視性 271
18.6 綜合實例 273
18.6.1 圖文層疊效果 273
18.6.2 歌曲編輯列表 275
18.6.3 文字陰影效果 277
高手私房菜 278
技巧1：visibility和display屬性的區別 278
技巧2：CSS border的默認值 278
第 19章 CSS+DIV盒子的浮動與定位 279
19.1 定義DIV 280
19.1.1 什麼是DIV 280
19.1.2 插入DIV 280
19.1.3 DIV的嵌套和固定格式 281
19.2 CSS布局定位 282
19.2.1 浮動定位 282
19.2.2 position定位 283
19.3 盒子的浮動 285
19.4 盒子的定位 287
19.4.1 靜態定位 288
19.4.2 相對定位 288
19.4.3 絕對定位 288
19.4.4 固定定位 290
19.5 可視化盒子模型 290
19.5.1 盒子模型 290
19.5.2 視覺可視化模型 290
19.5.3 空白邊疊加 290
19.6 固定寬度網頁布局 291
19.6.1 單列布局模式 291
19.6.2 1-2-1型布局模式 296
19.6.3 1-3-1型布局模式 301
19.7 縮放網頁 302
19.7.1 1-2-1型布局模式網頁的縮放 302
19.7.2 1-3-1型布局模式網頁的縮放 303
19.7.3 變寬布局類型總結 305
19.7.4 分列布局背景色 305
高手私房菜 306
技巧1：id和class屬性名稱使用限制 306
技巧2：框架中百分比的關係 306
第3篇 綜合套用篇
第 20章 用HTML 5+CSS 3設計與布局影音視頻網站 308
20.1 影音網站主頁規劃 309
20.1.1 影音網站主頁基本規劃 309
20.1.2 網頁整體架構布局規劃 309
20.2 用DIV+CSS布局 309
20.2.1 布局頁面頭部結構 309
20.2.2 布局頁面中間部分 310
20.2.3 布局頁面底部 310
20.3 製作網站的步驟 311
20.3.1 使用HTML 5設計網站 311
20.3.2 定義網站CSS樣式 312
20.3.3 設計頂部模組 317
20.3.4 設計網站主體模組 319
20.3.5 設計網站頁面的底部 320
20.4 微調網站細節 321
20.4.1 部分內容調整 321
20.4.2 模組調整 321
20.4.3 調整後預覽測試 325
高手私房菜 326
技巧：設定DIV垂直居中 326
第 21章 用HTML 5+CSS 3設計與布局企業入口網站 327
21.1 企業入口網站主頁規劃 328
21.1.1 企業主頁的配色 328
21.1.2 架構企業主頁布局 328
21.1.3 用DIV布局頁面框圖 329
21.2 製作網站的步驟 329
21.2.1 使用HTML 5設計網站 329
22.2.2 定義網站CSS樣式 330
21.2.3 設計網頁頂部模組 332
21.2.4 設計網頁中間主體模組 333
21.2.5 設計網頁底部模組 335
21.3 微調網站細節 335
21.3.1 部分內容調整 335
21.3.2 模組調整 336
21.3.3 調整後預覽測試 337
高手私房菜 338
技巧1：在IE瀏覽器中解決雙邊距問題 338
技巧2：定義元素外邊距的注意事項 338
第 22章 用HTML 5+CSS 3設計與布局電子商務網站 339
22.1 電子商務網站主頁規劃 340
22.1.1 分析主頁需求 341
22.1.2 確定內容模組 341
22.1.3 畫出效果圖 342
22.2 製作網站的步驟 342
22.2.1 使用HTML 5設計網站 342
22.2.2 定義網站CSS樣式 342
22.2.3 設計網頁頭部 343
22.2.4 設計分類及區域選擇模組 345
22.2.5 設計新品展示模組 347
22.2.6 設計側邊欄模組 348
22.2.7 設計熱門城市索引模組 353
22.2.8 設計底部模組 354
22.3 微調網站細節 355
22.3.1 部分內容調整 355
22.3.2 模組調整 356
22.3.3 調整後預覽測試 356
高手私房菜 356
技巧1：使三層並列網頁在IE和Firefox中顯示效果相同 356
技巧2：在IE中，解決圖片和下方父元素產生的間隙的問題 356
第 23章 用HTML 5+CSS 3設計與布局休閒旅遊網站 357
23.1 休閒旅遊網站主頁規劃 358
23.1.1 旅遊網站主頁基本規劃 358
23.1.2 網頁整體架構布局規劃 358
23.1.3 用DIV+CSS布局網頁框架 358
23.2 製作網站的步驟 358
23.2.1 使用HTML 5設計網站 358
23.2.2 定義網站CSS樣式 359
23.2.3 設計頁面頭部模組 360
23.2.4 設計頁面中間部分模組 362
23.2.5 設計頁面底部模組 363
23.2.6 微調網站細節並預覽 363
高手私房菜 364
技巧1：定義塊的高度時，如果高度小於10px，則顯示10px，怎么解決 364
技巧2：在瀏覽器中，列表選項li為浮動時，列表後面的元素不能換行，怎么解決 364
第4篇 實戰篇
第 24章 新聞類網站布局分析 366
24.1 鳳凰網整體布局分析 367
24.1.1 整體布局分析 367
24.1.2 版面架構分析 367
24.1.3 首頁分析 368
24.2 新華網整體布局分析 369
24.2.1 整體布局分析 369
24.2.2 版面架構分析 370
24.2.3 網站模組組成 370
24.3 製作自己的新聞網站——龍馬新聞網 371
24.3.1 需求分析 371
24.3.2 結構與布局 371
24.3.3 網站製作步驟 371
高手私房菜 378
技巧1：表單輸入單元的覆蓋刪除效果 378
技巧2：表單輸入單元的單擊刪除效果 378
第 25章 微博/部落格類網站布局分析 379
25.1 新浪微博/部落格整體布局 380
25.1.1 布局結構分析 380
25.1.2 版面架構分析 380
25.1.3 模組組成 381
25.2 騰訊微博/部落格網站 382
25.2.1 布局結構分析 382
25.2.2 版面架構分析 382
25.2.3 模組組成 383
25.3 製作自己的網站——龍馬微博/部落格網 384
25.3.1 需求分析 384
25.3.2 結構與布局 385
25.3.3 網站製作步驟 385
高手私房菜 394
技巧1：善用CSS縮寫可以減少頁面檔案大小 394
技巧2：顏色代碼的縮寫 394
2.3.3 用HTML標準結構編寫“hello，world”頁面 27
2.4 HTML基本結構 28
2.4.1 文檔類型說明 28
2.4.2 HTML標記 28
2.4.3 頭標記head 29
2.4.4 標題標記title 29
2.4.5 元信息標記meta 30
2.4.6 網頁的主體標記 31
2.4.7 頁面注釋標記 32
2.5 製作符合W3C標準的HTML 5網頁 33
高手私房菜 34
技巧1：網頁中常用的語言編碼方式 34
技巧2：網頁中的基本標籤是否必須成對出現 34
第3章 網頁文本設計 35
3.1 添加網頁文本 36
3.1.1 普通文本 36
3.1.2 特殊文字元號 36
3.2 網頁文本排版 37
3.2.1 換行標記
與段落標記
37
3.2.2 標題標記
~
39
3.2.3 文本水平居中標記
40
3.3 成才教育網文本設計 41
高手私房菜 42
技巧：區別換行標記和段落標記 42
第4章 網頁色彩和圖片設計 43
4.1 網頁色彩與圖片 44
4.2 網頁圖像的套用 44
4.2.1 網頁圖片格式 44
4.2.2 在網頁中插入圖像標記 45
4.2.3 設定圖像源檔案 46
4.2.4 設定圖像在網頁中的寬度和高度 47
4.2.5 設定圖像的提示文字 48
4.3 製作茂森房地產廣告網頁 49
高手私房菜 50
技巧：alt屬性的值 50
第5章 網頁列表和段落設計 51
5.1 網頁文字列表設計 52
5.1.1 建立無序列表 52
5.1.2 建立有序列表 53
5.2 設定網頁段落格式 54
5.2.1 單詞間隔 55
5.2.2 字元間隔 56
5.2.3 文字修飾 57
5.2.4 垂直對齊方式 58
5.2.5 水平對齊方式 59
5.2.6 文本縮進 61
5.2.7 文本行高 62
5.2.8 處理空白 63
5.3 製作圖文混排型網頁 64
高手私房菜 66
技巧：文字和圖片的導航速度誰**快 66
第6章 網頁超連結設計 67
6.1 連結和路徑 68
6.1.1 超連結的概念 68
6.1.2 連結路徑URL 69
6.1.3 HTTP路徑 69
6.1.4 FTP路徑 70
6.1.5 電子郵件路徑 71
6.2 連結元素 72
6.2.1 指定路徑屬性 72
6.2.2 顯示連結目標屬性 73
6.2.3 激活順序屬性 75
6.2.4 連結的熱鍵屬性 76
6.3 圖像連結 77
6.3.1 創建連結區域元素 77
6.3.2 連結區域的名稱屬性 77
6.3.3 定義滑鼠敏感區元素 77
6.3.4 連結的路徑屬性 79
6.3.5 連結的文本說明屬性 80
6.3.6 使用圖片中的連結 81
高手私房菜 82
技巧：區分URI、URL和URN 82
第7章 網頁多媒體設計 83
7.1 HTML5中的 Audio和Video 84
7.1.1 視頻容器 84
7.1.2 音頻解碼器和視頻解碼器 84
7.1.3 瀏覽器對Audio和Video標籤的支持情況 85
7.2 使用Audio和Video API 85
7.2.1 理解媒體元素 85
7.2.2 使用audio元素 86
7.2.3 使用video元素 87
7.3 設定網頁多媒體屬性 88
7.4 調用網頁多媒體的方法 90
7.5 視頻播放頁面 91
高手私房菜 94
技巧：在Firefox 8.0中正常播放HTML 5支持的視頻格式檔案 94
第8章 網頁表單設計 95
8.1 表單簡介 96
8.1.1 表單的用途 96
8.1.2 表單的屬性設定 97
8.2 表單基本元素的套用 98
8.2.1 文字欄位 98
8.2.2 密碼框 99
8.2.3 單選按鈕 100
8.2.4 複選框 101
8.2.5 列表框 102
8.2.6 列表項 103
8.2.7 普通按鈕 104
8.2.8 提交按鈕 105
8.2.9 圖像域 106
8.3 表單高級元素的使用 107
8.3.1 URL類型元素 107
8.3.2 Email類型元素 108
8.3.3 date類型元素 109
8.3.4 time類型元素 110
8.3.5 datetime類型元素 110
8.3.6 datetime-local類型元素 111
8.3.7 month類型元素 112
8.3.8 week類型元素 113
8.3.9 number類型元素 114
8.3.10 range類型元素 114
8.3.11 search類型元素 115
8.3.12 tel類型元素 116
8.3.13 color類型元素 117
高手私房菜 118
技巧1：在表單中實現檔案上傳框 118
技巧2：解決單選按鈕可以同時選中多個問題 118
第9章 網頁框架設計 119
9.1 框架結構概述 120
9.2 創建框架 121
9.2.1 創建預定義的框架集 122
9.2.2 向框架中添加內容 123
9.2.3 創建嵌套框架集 125
9.3 保存框架和框架集檔案 126
9.3.1 保存所有的框架集檔案 126
9.3.2 保存框架集檔案 127
9.3.3 保存框架檔案 127
9.4 選擇框架和框架集 127
9.4.1 在【框架】面板中選擇框架和框架集 128
9.4.2 在文檔視窗中選擇框架或框架集 129
9.5 設定框架和框架集屬性 130
9.5.1 設定框架屬性 130
9.5.2 設定框架集屬性 131
9.5.3 改變框架的背景顏色 131
9.6 使用標籤對創建嵌入式框架 133
高手私房菜 134
技巧1：框架長度或者寬度的設定 134
技巧2：設定框架框線的注意事項 134
第 10章 HTML 5本地存儲 135
10.1 Web Storage存儲 136
10.1.1 sessionStorage對象 136
10.1.2 localStorage對象 137
10.2 操作localStorage 138
10.2.1 清空localStorage數據 138
10.2.2 遍歷localStorage數據 139
10.2.3 使用JSON對象存取數據 139
10.2.4 管理localStorage數據 142
10.3 WebSQL資料庫套用 142
10.3.1 打開與創建資料庫 143
10.3.2 執行事務 143
10.3.3 插入數據 143
10.3.4 數據管理 144
高手私房菜 144
技巧：Web SQL的使用 144
第 11章 構建HTML 5離線Web套用—快取技術 145
11.1 HTML 5離線Web套用概述 146
11.2 使用HTML 5離線Web套用API 146
11.2.1 檢查瀏覽器的支持情況 146
11.2.2 搭建簡單的離線應用程式 147
11.2.3 支持離線行為 147
11.2.4 Manifest檔案 148
11.2.5 ApplicationCache API 149
11.3 使用HTML 5離線Web套用構建套用 150
11.3.1 創建記錄資源的manifest檔案 150
11.3.2 創建構成界面的HTML和CSS 151
11.3.3 創建離線的JavaScript 152
11.3.4 檢查applicationCache的支持情況 154
11.3.5 為Update按鈕添加處理函式 154
11.3.6 添加Geolocation的支持情況 155
11.3.7 添加Storage功能代碼 155
11.3.8 添加離線事件處理程式 156
高手私房菜 156
技巧1：不同的瀏覽器可以讀取同一個Web中存儲的數據嗎 156
技巧2：離線存儲站點時是否需要瀏覽者同意 156
第 2篇 CSS 3篇
第 12章 CSS 3樣式核心基礎 158
12.1 創建使用CSS的網頁 159
12.2 CSS語法書寫標準 161
12.2.1 規則塊 161
12.2.2 @規則 161
12.2.3 規則集 162
12.2.4 注釋 164
12.2.5 字元和大小寫 164
12.3 關鍵字和字元串 165
12.3.1 客戶端瀏覽器的特定擴展 165
12.3.2 字元串 165
12.4 CSS標準 166
12.4.1 CSS樣式標準 166
12.4.2 傳統HTML的缺點分析 167
12.4.3 CSS樣式的引用 169
12.4.4 編輯CSS樣式 171
12.4.5 瀏覽器與CSS的兼容性分析 171
12.5 使用CSS選擇器 172
12.5.1 標記選擇器 172
12.5.2 類別選擇器 173
12.5.3 ID選擇器 176
12.6 在HTML中調用CSS的方法 177
12.6.1 直接定義CSS樣式 177
12.6.2 內嵌式CSS樣式 178
12.6.3 連結式CSS樣式 179
12.6.4 導入外部CSS樣式 180
12.6.5 CSS樣式優先權 181
高手私房菜 182
技巧1：使用全局選擇器“*” 182
技巧2：簡寫CSS字型屬性 182
第 13章 網頁樣式代碼的生成方法 183
13.1 從零開始手工編寫 184
13.1.1 編寫標題樣式代碼 185
13.1.2 編寫圖片控制代碼 186
13.1.3 設定網頁正文 187
13.1.4 設定整體頁面樣式 187
13.1.5 定義段落樣式 188
13.2 完整網頁代碼分析 188
13.2.1 獲取網頁代碼 189
13.2.2 查看網頁樣式代碼 190
13.2.3 分析網頁樣式代碼結構 191
13.2.4 讀懂網頁樣式代碼 191
13.2.5 讀懂CSS注釋 191
13.3 使用Dreamweaver輔助工具創建頁面 191
13.3.1 創建頁面 191
13.3.2 分析頁面結構 192
13.3.3 與手工編寫的區別 192
13.4 在Dreamweaver中新建CSS樣式 193
13.5 在Dreamweaver中編輯CSS樣式 194
13.6 為圖像創建CSS樣式 195
高手私房菜 196
技巧1：Dreamweaver CS6中快捷鍵的使用 196
技巧2：超連結的一些特殊效果 196
第 14章 用CSS 3設定文本樣式 197
14.1 樣式的參數單位 198
14.2 設定網頁文本的基本樣式 200
14.2.1 網頁文本顏色的定義 200
14.2.2 定義整體頁面文本樣式 201
14.2.3 設定具體文字的字型 203
14.2.4 設定文字的傾斜效果 203
14.2.5 設定文字的粗細效果 205
14.3 設定網頁文本的行高與間距 206
14.3.1 設定網頁文字間距 206
14.3.2 設定網頁文字行高 207
14.3.3 設定網頁文欄位落間距 208
14.4 設定網頁文本的對齊方式 209
14.4.1 文本的水平對齊方式 209
14.4.2 文本的垂直對齊方式 211
14.5 設定文字與背景顏色 212
14.5.1 使用樣式參數進行設定 212
14.5.2 更簡潔的解決方案 214
14.6 設定其他網頁文本樣式 215
14.6.1 英文字母大小寫的自動轉換 216
14.6.2 控制文字的大小 217
14.6.3 網頁文字的裝飾效果 218
14.6.4 設定段落首行縮進效果 219
高手私房菜 220
技巧：通過濾鏡屬性設定文字效果 220
第 15章 用CSS 3設定網頁圖像特效 221
15.1 設定圖像框線 222
15.1.1 圖像框線基本屬性 222
15.1.2 為不同的框線分別設定樣式 223
15.2 圖像縮放功能的實現 224
15.3 圖文混排 225
15.3.1 文字環繞 226
15.3.2 設定圖像與文字的間距 227
15.4 製作長泰養生網頁 228
15.5 設定圖像與文字的對齊方式 231
15.5.1 橫向對齊方式 231
15.5.2 縱向對齊方式 233
高手私房菜 234
技巧1：解決在瀏覽器中圖像無法顯示的問題 234
技巧2：解決圖像超出撐破DIV的問題 234
第 16章 用CSS 3設定網頁背景顏色與背景圖像 235
16.1 設定背景顏色 236
16.2 設定背景圖像 237
16.3 設定背景圖像平鋪 238
16.4 設定背景圖像位置 239
16.5 設定背景圖像位置固定 241
16.6 用圖像替換標題的文本 243
16.7 使用滑動門技術的標題 244
高手私房菜 245
技巧：為網頁內容添加水印 245
第 17章 CSS 3的高級特性 247
17.1 複合選擇器 248
17.1.1 交集選擇器 248
17.1.2 並集選擇器 249
17.1.3 後代選擇器 250
17.2 CSS的繼承特性 251
17.2.1 繼承關係 252
17.2.2 CSS繼承的運用 252
17.3 CSS的層疊特性 253
高手私房菜 256
技巧：CSS選擇器的特殊性 256
第 18章 CSS定位與DIV布局核心技術 257
18.1 塊級元素和行內級元素 258
18.1.1 塊級元素和行內級元素的不同 258
18.1.2 DIV元素和span元素 260
18.2 使用DIV標記與span標記布局網頁 261
18.3 盒子模型 262
18.3.1 盒子模型的概念 262
18.3.2 網頁border區域定義 263
18.3.3 網頁padding區域定義 265
18.3.4 網頁margin區域定義 266
18.4 box類型和display屬性 268
18.4.1 HTML元素默認的box類型 268
18.4.2 視點和Box容器 269
18.4.3 塊級元素和塊級Box 269
18.4.4 行內級元素和行內級Box 270
18.4.5 插入式Box 271
18.5 可視性 271
18.6 綜合實例 273
18.6.1 圖文層疊效果 273
18.6.2 歌曲編輯列表 275
18.6.3 文字陰影效果 277
高手私房菜 278
技巧1：visibility和display屬性的區別 278
技巧2：CSS border的默認值 278
第 19章 CSS+DIV盒子的浮動與定位 279
19.1 定義DIV 280
19.1.1 什麼是DIV 280
19.1.2 插入DIV 280
19.1.3 DIV的嵌套和固定格式 281
19.2 CSS布局定位 282
19.2.1 浮動定位 282
19.2.2 position定位 283
19.3 盒子的浮動 285
19.4 盒子的定位 287
19.4.1 靜態定位 288
19.4.2 相對定位 288
19.4.3 絕對定位 288
19.4.4 固定定位 290
19.5 可視化盒子模型 290
19.5.1 盒子模型 290
19.5.2 視覺可視化模型 290
19.5.3 空白邊疊加 290
19.6 固定寬度網頁布局 291
19.6.1 單列布局模式 291
19.6.2 1-2-1型布局模式 296
19.6.3 1-3-1型布局模式 301
19.7 縮放網頁 302
19.7.1 1-2-1型布局模式網頁的縮放 302
19.7.2 1-3-1型布局模式網頁的縮放 303
19.7.3 變寬布局類型總結 305
19.7.4 分列布局背景色 305
高手私房菜 306
技巧1：id和class屬性名稱使用限制 306
技巧2：框架中百分比的關係 306
第3篇 綜合套用篇
第 20章 用HTML 5+CSS 3設計與布局影音視頻網站 308
20.1 影音網站主頁規劃 309
20.1.1 影音網站主頁基本規劃 309
20.1.2 網頁整體架構布局規劃 309
20.2 用DIV+CSS布局 309
20.2.1 布局頁面頭部結構 309
20.2.2 布局頁面中間部分 310
20.2.3 布局頁面底部 310
20.3 製作網站的步驟 311
20.3.1 使用HTML 5設計網站 311
20.3.2 定義網站CSS樣式 312
20.3.3 設計頂部模組 317
20.3.4 設計網站主體模組 319
20.3.5 設計網站頁面的底部 320
20.4 微調網站細節 321
20.4.1 部分內容調整 321
20.4.2 模組調整 321
20.4.3 調整後預覽測試 325
高手私房菜 326
技巧：設定DIV垂直居中 326
第 21章 用HTML 5+CSS 3設計與布局企業入口網站 327
21.1 企業入口網站主頁規劃 328
21.1.1 企業主頁的配色 328
21.1.2 架構企業主頁布局 328
21.1.3 用DIV布局頁面框圖 329
21.2 製作網站的步驟 329
21.2.1 使用HTML 5設計網站 329
22.2.2 定義網站CSS樣式 330
21.2.3 設計網頁頂部模組 332
21.2.4 設計網頁中間主體模組 333
21.2.5 設計網頁底部模組 335
21.3 微調網站細節 335
21.3.1 部分內容調整 335
21.3.2 模組調整 336
21.3.3 調整後預覽測試 337
高手私房菜 338
技巧1：在IE瀏覽器中解決雙邊距問題 338
技巧2：定義元素外邊距的注意事項 338
第 22章 用HTML 5+CSS 3設計與布局電子商務網站 339
22.1 電子商務網站主頁規劃 340
22.1.1 分析主頁需求 341
22.1.2 確定內容模組 341
22.1.3 畫出效果圖 342
22.2 製作網站的步驟 342
22.2.1 使用HTML 5設計網站 342
22.2.2 定義網站CSS樣式 342
22.2.3 設計網頁頭部 343
22.2.4 設計分類及區域選擇模組 345
22.2.5 設計新品展示模組 347
22.2.6 設計側邊欄模組 348
22.2.7 設計熱門城市索引模組 353
22.2.8 設計底部模組 354
22.3 微調網站細節 355
22.3.1 部分內容調整 355
22.3.2 模組調整 356
22.3.3 調整後預覽測試 356
高手私房菜 356
技巧1：使三層並列網頁在IE和Firefox中顯示效果相同 356
技巧2：在IE中，解決圖片和下方父元素產生的間隙的問題 356
第 23章 用HTML 5+CSS 3設計與布局休閒旅遊網站 357
23.1 休閒旅遊網站主頁規劃 358
23.1.1 旅遊網站主頁基本規劃 358
23.1.2 網頁整體架構布局規劃 358
23.1.3 用DIV+CSS布局網頁框架 358
23.2 製作網站的步驟 358
23.2.1 使用HTML 5設計網站 358
23.2.2 定義網站CSS樣式 359
23.2.3 設計頁面頭部模組 360
23.2.4 設計頁面中間部分模組 362
23.2.5 設計頁面底部模組 363
23.2.6 微調網站細節並預覽 363
高手私房菜 364
技巧1：定義塊的高度時，如果高度小於10px，則顯示10px，怎么解決 364
技巧2：在瀏覽器中，列表選項li為浮動時，列表後面的元素不能換行，怎么解決 364
第4篇 實戰篇
第 24章 新聞類網站布局分析 366
24.1 鳳凰網整體布局分析 367
24.1.1 整體布局分析 367
24.1.2 版面架構分析 367
24.1.3 首頁分析 368
24.2 新華網整體布局分析 369
24.2.1 整體布局分析 369
24.2.2 版面架構分析 370
24.2.3 網站模組組成 370
24.3 製作自己的新聞網站——龍馬新聞網 371
24.3.1 需求分析 371
24.3.2 結構與布局 371
24.3.3 網站製作步驟 371
高手私房菜 378
技巧1：表單輸入單元的覆蓋刪除效果 378
技巧2：表單輸入單元的單擊刪除效果 378
第 25章 微博/部落格類網站布局分析 379
25.1 新浪微博/部落格整體布局 380
25.1.1 布局結構分析 380
25.1.2 版面架構分析 380
25.1.3 模組組成 381
25.2 騰訊微博/部落格網站 382
25.2.1 布局結構分析 382
25.2.2 版面架構分析 382
25.2.3 模組組成 383
25.3 製作自己的網站——龍馬微博/部落格網 384
25.3.1 需求分析 384
25.3.2 結構與布局 385
25.3.3 網站製作步驟 385
高手私房菜 394
技巧1：善用CSS縮寫可以減少頁面檔案大小 394
技巧2：顏色代碼的縮寫 394
