內容簡介
本書針對零基礎的讀者，用實例引導讀者深入學習，採取“HTML基礎知識→HTML5高級技術→用CSS美化網頁→網頁布局和JavaScript→綜合案例實戰”的模式，深入淺出地講解網頁製作的各項技術及實戰技能。 本書第1篇主要講解HTML入門知識、網頁文檔結構、網頁中的文本和圖像、建立超連結、創建表格和表單等內容；第2篇主要講解HTML5快速入門、HTML5中的多媒體、使用HTML5繪製圖形等內容；第3篇主要講解CSS概述與基本語法、美化網頁字型與段落、美化網頁圖片、美化網頁背景與框線、美化表格和表單樣式、美化超連結和滑鼠指針、控制網頁導航選單的樣式等內容；第4篇主要講解CSS+DIV盒子的浮動與定位、網頁布局剖析與製作、JavaScript和jQuery、經典的網頁動態特效案例等；
目錄
目錄
第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 使用DreamweaverCC編寫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
