HTML+CSS+JavaScript網頁設計實戰

第1篇 HTML基礎知識
第1章 HTML入門知識
1.1 網頁與網站 4
1.1.1 什麼是網頁與網站 4
1.1.2 網頁基本構成元素 5
1.2 HTML的基本概念 6
1.2.1 什麼是HTML 6
1.2.2 HTML的發展歷程 6
1.2.3 HTML頁面的整體結構 7
1.3 使用瀏覽器查看源文件 8
1.4 大神解惑 9
1.5 跟我練練手 9
第2章 網頁文檔結構
2.1 HTML文件基本結構 12
2.2 HTML5基本標記詳解 12
2.2.1 文檔類型說明 12
2.2.2 HTML標記 13
2.2.3 頭標記 13
2.2.4 網頁的主體標記body 15
2.2.5 頁面注釋標記 16
2.3 HTML5語法的變化 16
2.3.1 標記不再區分大小寫 17
2.3.2 允許屬性值不使用引號 17
2.3.3 允許部分屬性值的屬性省略 17
2.4 網頁文件的編寫方法 18
2.4.1 使用記事本手工編寫網頁 18
2.4.2 使用Dreamweaver CC編寫HTML文件 19
2.5 符合W3C標准的HTML5網頁 20
2.6 大神解惑 21
2.7 跟我練練手 22
第3章 網頁中的文本和圖像
3.1 在網頁中添加文本 24
3.1.1 普通文本的添加 24
3.1.2 特殊字符文本的添加 24
3.1.3 特殊文本的添加 26
3.2 文本排版 27
3.2.1 換行標記 27
3.2.2 段落標記 28
3.2.3 標題標記 28
3.3 文字列表 29
3.3.1 建立無序列表 29
3.3.2 建立有序列表 30
3.3.3 建立不同類型的無序列表 30
3.3.4 建立不同類型的有序列表 31
3.3.5 建立嵌套列表 31
3.3.6 自定義列表 32
3.4 網頁中的圖像 32
3.4.1 插入圖像 32
3.4.2 設置圖像的寬度和高度 34
3.4.3 設置圖像的提示文字 35
3.4.4 將圖片設置為網頁背景 36
3.4.5 排列圖像 36
3.5 圖文並茂房屋裝飾裝修網頁 37
3.6 在線購物網站產品展示效果 38
3.7 大神解惑 39
3.8 跟我練練手 40
第4章 建立超鏈接
4.1 網頁超鏈接的概念 42
4.1.1 什麼是網頁超鏈接 42
4.1.2 超鏈接中的URL 42
4.1.3 超鏈接的URL類型 43
4.2 建立網頁超鏈接 43
4.2.1 創建超文本鏈接 43
4.2.2 創建圖片鏈接 44
4.2.3 創建下載鏈接 46
4.2.4 使用相對路徑和絕對路徑 46
4.2.5 設置以新窗口顯示超鏈接頁面 47
4.2.6 設置電子郵件鏈接 48
4.3 浮動框架 49
4.4 精確定位熱點區域 50
4.5 使用錨鏈接制作電子書閱讀網頁 54
4.6 大神解惑 56
4.7 跟我練練手 56
第5章 創建表格和表單
5.1 表格的基本結構 58
5.2 創建表格 59
5.2.1 創建普通表格 59
5.2.2 創建帶有標題的表格 60
5.2.3 定義表格的邊框類型 60
5.2.4 定義表格的表頭 61
5.2.5 設置表格背景 61
5.2.6 設置單元格背景 62
5.2.7 合並單元格 63
5.2.8 排列單元格中的內容 66
5.2.9 設置表格的行高與列寬 66
5.3 創建完整的表格 67
5.4 認識表單 68
5.5 表單基本元素的使用 69
5.5.1 單行文本輸入框 69
5.5.2 多行文本輸入框 70
5.5.3 密碼域 70
5.5.4 單選按鈕 71
5.5.5 復選框 72
5.5.6 下拉選擇框 73
5.5.7 普通按鈕 73
5.5.8 提交按鈕 74
5.5.9 重置按鈕 75
5.6 表單高級元素的使用 75
5.6.1 url屬性的應用 76
5.6.2 email屬性的應用 76
5.6.3 date和time屬性的應用 76
5.6.4 number屬性的應用 77
5.6.5 range屬性的應用 78
5.6.6 required屬性的應用 79
5.7 創建用戶反饋表單 79
5.8 制作商品報價單 81
5.9 大神解惑 83
5.10 跟我練練手 84

第2篇 HTML5高級技術
第6章 HTML5快速入門
6.1 各大瀏覽器與HTML5的兼容性 88
6.2 檢測瀏覽器是否支持HTML標記 88
6.3 語法變化和標記 89
6.3.1 HTML5的語法變化 89
6.3.2 HTML5中的標記方法 89
6.3.3 版本兼容性 90
6.4 新增的元素和廢除的元素 91
6.4.1 新增的結構元素 92
6.4.2 新增的input元素類型 94
6.4.3 新增的其他元素 94
6.4.4 廢除的元素 96
6.5 新增的屬性和廢除的屬性 97
6.5.1 新增的屬性 97
6.5.2 廢除的屬性 101
6.6 新增全局屬性 103
6.6.1 contentEditable屬性 103
6.6.2 designMode屬性 103
6.6.3 hidden屬性 104
6.6.4 spellcheck屬性 104
6.6.5 tabIndex屬性 104
6.7 大神解惑 106
6.8 跟我練練手 106
第7章 HTML5中的多媒體
7.1 網頁音頻標記 108
7.1.1 audio標記概述 108
7.1.2 audio標記的屬性 108
7.1.3 音頻解碼器 109
7.1.4 瀏覽器對audio標記的支持情況 109
7.2 網頁視頻標記 109
7.2.1 video標記概述 109
7.2.2 video標記屬性 110
7.2.3 視頻解碼器 110
7.2.4 瀏覽器對video標記的支持情況 111
7.3 添加網頁音頻文件 111
7.3.1 設置背景音樂 111
7.3.2 設置音樂循環播放 112
7.4 添加網頁視頻文件 112
7.4.1 為網頁添加視頻文件 112
7.4.2 設置自動運行 113
7.4.3 設置視頻文件的循環播放 114
7.4.4 設置視頻窗口的高度與寬度 114
7.5 添加網頁滾動文字 115
7.5.1 滾動文字標記 115
7.5.2 滾動方向屬性 116
7.5.3 滾動方式屬性 117
7.5.4 滾動速度屬性 117
7.5.5 滾動延遲屬性 118
7.5.6 滾動循環屬性 119
7.5.7 滾動范圍屬性 119
7.5.8 滾動背景顏色屬性 120
7.5.9 滾動空間屬性 121
7.6 大神解惑 122
7.7 跟我練練手 122
第8章 使用HTML5繪制圖形
8.1 什麼是canvas 124
8.2 繪制基本形狀 125
8.2.1 繪制矩形 125
8.2.2 繪制圓形 126
8.2.3 使用moveTo與lineTo繪制直線 127
8.2.4 使用bezierCurveTo繪制貝塞爾曲線 128
8.3 繪制漸變圖形 130
8.3.1 繪制線性漸變 130
8.3.2 繪制徑向漸變 132
8.4 繪制變形圖形 133
8.4.1 變換原點坐標 133
8.4.2 圖形縮放 134
8.4.3 旋轉圖形 135
8.5 繪制其他樣式的圖形 136
8.5.1 圖形組合 136
8.5.2 繪制帶陰影的圖形 138
8.5.3 繪制文字 139
8.6 使用圖像 141
8.6.1 繪制圖像 141
8.6.2 圖像平鋪 142
8.6.3 圖像裁剪 143
8.6.4 像素處理 145
8.7 圖形的保存與恢復 147
8.7.1 保存與恢復圖形狀態 147
8.7.2 保存文件 148
8.8 繪制火柴棒人物 149
8.9 繪制商標 151
8.10 大神解惑 153
8.11 跟我練練手 154

第3篇 用CSS美化網頁
第9章 CSS概述與基本語法
9.1 CSS概述 158
9.1.1 CSS功能 158
9.1.2 瀏覽器與CSS的兼容性 158
9.1.3 CSS基礎語法 159
9.1.4 CSS常用單位 159
9.2 編輯和瀏覽CSS 164
9.2.1 手工編寫CSS 164
9.2.2 用Dreamweaver編寫CSS 165
9.3 在HTML中使用CSS的方法 167
9.3.1 行內樣式 167
9.3.2 內嵌樣式 168
9.3.3 鏈接樣式 169
9.3.4 導入樣式 170
9.3.5 優先級問題 171
9.4 CSS的常用選擇器 172
9.4.1 標記選擇器 173
9.4.2 類選擇器 173
9.4.3 ID選擇器 174
9.4.4 全局選擇器 175
9.4.5 組合選擇器 175
9.4.6 繼承選擇器 176
9.4.7 偽類選擇器 177
9.5 選擇器聲明 178
9.5.1 集體聲明 178
9.5.2 多重嵌套聲明 179
9.6 制作炫彩網站Logo 179
9.7 制作學生信息統計表 182
9.8 大神解惑 183
9.9 跟我練練手 184
第10章 美化網頁字體與段落
10.1 美化網頁文字 186
10.1.1 設置文字的字體 186
10.1.2 設置文字的字號 187
10.1.3 設置字體風格 188
10.1.4 設置加粗字體 189
10.1.5 將小寫字母轉換為大寫字母 190
10.1.6 設置字體的復合屬性 191
10.1.7 設置字體顏色 192
10.2 設置文本的高級樣式 193
10.2.1 設置文本陰影效果 193
10.2.2 設置文本溢出效果 194
10.2.3 設置文本的控制換行 195
10.2.4 保持字體尺寸不變 196
10.3 美化網頁中的段落 197
10.3.1 設置單詞之間的間隔 197
10.3.2 設置字符之間的間隔 198
10.3.3 設置文字的修飾效果 199
10.3.4 設置垂直對齊方式 200
10.3.5 轉換文本的大小寫 202
10.3.6 設置文本的水平對齊方式 203
10.3.7 設置文本的縮進效果 205
10.3.8 設置文本的行高 205
10.3.9 文本的空白處理 206
10.3.10 文本的反排 208
10.4 設置網頁標題 209
10.5 制作新聞頁面 211
10.6 大神解惑 212
10.7 跟我練練手 212
第11章 美化網頁圖片
11.1 圖片縮放 214
11.1.1 通過描述標記width和height縮放圖片 214
11.1.2 使用CSS中的max-width和max-height縮放圖片 214
11.1.3 使用CSS中的width和height縮放圖片 215
11.2 設置圖片的對齊方式 216
11.2.1 設置圖片橫向對齊 216
11.2.2 設置圖片縱向對齊 217
11.3 圖文混排 219
11.3.1 設置文字環繞效果 219
11.3.2 設置圖片與文字的間距 220
11.4 制作學校宣傳單 221
11.5 制作簡單圖文混排網頁 223
11.6 大神解惑 225
11.7 跟我練練手 225
第12章 美化網頁背景與邊框
12.1 使用CSS美化背景 228
12.1.1 設置背景顏色 228
12.1.2 設置背景圖片 229
12.1.3 背景圖片重復 230
12.1.4 背景圖片隨文檔滾動 231
12.1.5 背景圖片位置 233
12.1.6 背景圖片大小 234
12.1.7 背景顯示區域 235
12.1.8 背景圖像裁剪區域 237
12.1.9 背景復合屬性 237
12.2 使用CSS美化邊框 238
12.2.1 設置邊框樣式 238
12.2.2 設置邊框顏色 239
12.2.3 設置邊框線寬 240
12.2.4 設置邊框復合屬性 242
12.3 設置邊框圓角效果 242
12.3.1 設置圓角邊框 243
12.3.2 指定兩個圓角半徑 243
12.3.3 繪制四個不同的圓角邊框 244
12.3.4 繪制不同種類的邊框 245
12.4 制作簡單公司主頁 246
12.5 制作簡單生活資訊主頁 250
12.6 大神解惑 251
12.7 跟我練練手 252
第13章 美化表格和表單樣式
13.1 美化表格樣式 254
13.1.1 設置表格邊框樣式 254
13.1.2 設置表格邊框寬度 255
13.1.3 設置表格背景顏色 256
13.2 美化表單樣式 257
13.2.1 美化表單中的元素 257
13.2.2 美化提交按鈕 259
13.2.3 美化下拉列表框 260
13.3 制作用戶登錄頁面 262
13.4 制作用戶注冊頁面 264
13.5 大神解惑 266
13.6 跟我練練手 266
第14章 美化超鏈接和鼠標指針
14.1 美化超鏈接 268
14.1.1 改變超鏈接基本樣式 268
14.1.2 設置帶有提示信息的超鏈接 269
14.1.3 設置超鏈接的背景圖 270
14.1.4 設置超鏈接的按鈕效果 271
14.2 美化鼠標特效 272
14.2.1 控制鼠標箭頭 272
14.2.2 設置鼠標變幻式超鏈接 273
14.2.3 設置網頁頁面滾動條 274
14.3 圖片版本超鏈接 276
14.4 鼠標特效實例 278
14.5 制作一個簡單的導航欄 280
14.6 大神解惑 281
14.7 跟我練練手 282
第15章 控制網頁導航菜單的樣式
15.1 使用CSS美化項目列表 284
15.1.1 美化無序列表 284
15.1.2 美化有序列表 285
15.1.3 美化自定義列表 286
15.1.4 制作圖片列表 287
15.1.5 縮進圖片列表 288
15.1.6 列表復合屬性 289
15.2 使用CSS制作網頁菜單 290
15.2.1 制作無序列表的菜單 290
15.2.2 制作水平樣式菜單 292
15.3 模擬SOSO導航欄 294
15.4 將段落轉變成列表 297
15.5 大神解惑 299
15.6 跟我練練手 300

第4篇 網頁布局和JavaScript
第16章 CSS+DIV盒子的浮動與定位
16.1 定義DIV 304
16.1.1 什麼是DIV 304
16.1.2 創建DIV 304
16.2 盒子的定位 305
16.2.1 靜態定位 305
16.2.2 相對定位 306
16.2.3 絕對定位 307
16.2.4 固定定位 308
16.2.5 盒子的浮動 308
16.3 其他CSS布局定位方式 310
16.3.1 溢出（overflow）定位 310
16.3.2 隱藏（visibility）定位 311
16.3.3 z-index空間定位 313
16.4 多列布局 314
16.4.1 設置列寬度 314
16.4.2 設置列數 316
16.4.3 設置列間距 317
16.4.4 設置列邊框樣式 318
16.5 定位網頁布局樣式 320
16.6 大神解惑 323
16.7 跟我練練手 324
第17章 網頁布局剖析與制作
17.1 固定寬度網頁剖析與布局 326
17.1.1 網頁單列布局模式 326
17.1.2 網頁1-2-1型布局模式 328
17.1.3 網頁1-3-1型布局模式 330
17.2 自動縮放網頁1-2-1型布局模式 333
17.2.1 1-2-1等比例變寬布局 333
17.2.2 1-2-1單列變寬布局 334
17.3 自動縮放網頁1-3-1型布局模式 335
17.3.1 1-3-1三列寬度等比例布局 335
17.3.2 1-3-1單側列寬度固定的變寬布局 335
17.3.3 1-3-1中間列寬度固定的變寬布局 337
17.3.4 1-3-1雙側列寬度固定的變寬布局 339
17.3.5 1-3-1中列和左側列寬度固定的變寬布局 342
17.4 分列布局背景色的使用 344
17.4.1 設置固定寬度布局的列背景色 344
17.4.2 設置特殊寬度變化布局的列背景色 346
17.4.3 設置單列寬度變化布局的列背景色 347
17.4.4 設置多列等比例寬度變化布局的列背景 349
17.5 大神解惑 352
17.6 跟我練練手 352
第18章 JavaScript和jQuery
18.1 認識JavaScript 354
18.1.1 什麼是JavaScript 354
18.1.2 在HTML網頁頭中嵌入
JavaScript代碼 354
18.2 JavaScript對象與函數 355
18.2.1 認識對象 356
18.2.2 認識函數 356
18.3 JavaScript事件 358
18.3.1 事件與事件處理概述 358
18.3.2 JavaScript的常用事件 359
18.4 認識jQuery 360
18.4.1 jQuery能做什麼 361
18.4.2 jQuery的配置 361
18.5 jQuery選擇器 362
18.5.1 jQuery的工廠函數 362
18.5.2 常見選擇器 363
18.6 大神解惑 364
18.7 跟我練練手 365
第19章 經典的網頁動態特效案例
19.1 文字特效 368
19.1.1 打字效果的文字 368
19.1.2 文字升降特效 370
19.1.3 跑馬燈效果 372
19.2 圖片特效 373
19.2.1 閃爍圖片 373
19.2.2 左右移動的圖片 375
19.3 網頁菜單特效 378
19.3.1 向上滾動菜單 378
19.3.2 樹形菜單 379
19.4 鼠標特效 384
19.4.1 鼠標的圖片跟蹤 384
19.4.2 鼠標的文字跟蹤 385
19.5 時間特效 387
19.5.1 時鍾特效 387
19.5.2 制作簡單日歷表 392
19.6 頁面特效 395
19.6.1 網頁自動滾屏 395
19.6.2 顏色選擇器 398
19.7 大神解惑 401
19.8 跟我練練手 402

第5篇 綜合案例實戰
第20章 制作企業門戶類網頁
20.1 構思布局 406
20.1.1 設計分析 406
20.1.2 排版架構 407
20.2 模塊分割 408
20.2.1 Logo與導航菜單 408
20.2.2 左側文本介紹 410
20.2.3 右側導航鏈接 411
20.2.4 版權信息 413
20.3 整體調整 414
第21章 制作在線購物類網頁
21.1 整體布局 416
21.1.1 設計分析 416
21.1.2 排版架構 417
21.2 模塊分割 417
21.2.1 Logo與導航區 417
21.2.2 Banner與資訊區 419
21.2.3 產品類別區域 420
21.2.4 頁腳區域 421
第22章 制作移動設備類網頁
22.1 網站設計分析 424
22.2 網站結構分析 424
22.3 網站主頁面的制作 425
22.4 網站成品預覽 427

「實戰從入門到精通」系列圖書是專門為初學者量身定做的一套學習用書，由劉玉紅策划，千谷網絡科技實訓中心的高級講師編著，整套書涵蓋高效辦公、網站開發、數據庫設計等方面。整套書具有以下特點。