目錄
第1 章 網頁設計基礎與製作流程
1.1 Web 網際網路基礎知識 1
1.1.1 網際網路、網站和網頁的關係 1
1.1.2 網頁語言 1
1.1.3 常用Web 瀏覽器 2
1.1.4 域名與URL 3
1.1.5 HTTP 與FTP 3
1.2 什麼是網頁 3
1.3 怎樣設計出好的網頁 8
1.4 網站製作流程 12
1.4.1 前期策劃 12
1.4.2 網頁的實施與細化 12
1.4.3 後期維護 12
1.5 本章小結 12
第2 章 初識Dreamweaver CC
2.1 Dreamweaver CC 簡介 13
2.2 安裝和卸載Dreamweaver CC 17
2.3 Dreamweaver CC 工作界面 20
2.4 Dreamweaver CC 選單欄 21
2.5 Dreamweaver CC 中的面板 32
2.6 本章小結 34
第3 章 創建與管理站點
3.1 創建本地站點 35
3.2 站點的高級選項設定 39
3.3 站點的規劃與基本操作 42
3.4 Business Catalyst 46
3.5 管理站點 49
3.6 創建遠程企業站點 50
動手實踐——創建遠程企業站點 50
3.7 本章小結 52
第4 章 HTML 與HTML 5
4.1 HTML 語言 53
4.2 在Dreamweaver CC 中編寫HTML 57
4.3 快速標籤編輯器 61
4.4 使用“代碼片斷”面板 62
4.5 在Dreamweaver 中最佳化網頁代碼 63
4.6 認識全新的HTML 5 64
4.7 本章小結 68
第5 章 設定網頁頭信息
5.1 設定頭信息 69
5.2 設定社區生活網站頭信息 73
動手實踐——設定社區生活網站頭信息 73
5.3 本章小結 74
第6 章 網頁整體屬性設定
6.1 “頁面屬性”對話框 75
6.2 使用輔助工具 82
6.3 設定個人網站頁面屬性 85
動手實踐——設定個人網站頁面屬性 85
6.4 本章小結 86
第7 章 精通CSS 樣式
7.1 什麼是CSS 樣式 87
7.2 全新的“CSS 設計器”面板 89
7.3 CSS 選擇器類型 92
7.4 在網頁中套用CSS 樣式的方法 101
7.5 CSS 樣式設定選項詳解 106
7.6 CSS 過渡效果 115
動手實踐——使用CSS 過渡實現網頁特效 115
7.7 CSS 類選區 118
動手實踐——為元素套用多個類CSS 樣式 118
7.8 製作設計類網站頁面 120
動手實踐——製作設計類網站頁面 120
7.9 本章小結 126
第8 章 認識並套用CSS 3 屬性
8.1 CSS 3 新增選擇器類型 127
8.1.1 屬性選擇器 127
8.1.2 結構偽類選擇器 128
8.1.3 UI 元素狀態偽類選擇器 128
8.2 CSS 3 新增布局屬性 129
8.2.1 overflow 屬性 129
8.2.2 opacity 屬性 129
動手實踐——實現網頁元素半透明效果 129
8.2.3 column 屬性 130
動手實踐——實現網頁內容分欄顯示 130
8.3 CSS 3 新增文本屬性 131
8.3.1 word-wrap 屬性 131
8.3.2 text-overflow 屬性 131
8.3.3 text-shadow 屬性 132
動手實踐——在網頁中實現文字陰影 132
8.4 CSS 3 新增框線屬性 132
8.4.1 border-colors 屬性 133
8.4.2 border-image 屬性 133
8.4.3 border-radius 屬性 133
動手實踐——實現網頁中圓角框線效果 133
8.5 CSS 3 新增背景屬性 134
8.5.1 HSL 和HSLA 顏色設定方法 134
8.5.2 RGBA 顏色設定方法 134
動手實踐——實現半透明背景顏色 135
8.5.3 background-origin 屬性 135
8.5.4 background-clip 屬性 135
8.5.5 background-size 屬性 136
動手實踐——控制網頁中背景圖像的大小 136
8.5.6 box-shadow 屬性 137
動手實踐——實現網頁元素陰影效果 137
8.6 CSS 3 新增其他屬性 137
8.6.1 outline 屬性 138
8.6.2 resize 屬性 138
8.6.3 content 屬性 138
8.7 使用CSS 3 實現滑鼠滑過圖像動態效果 138
動手實踐——實現滑鼠滑過圖像動態效果 138
8.8 本章小結 140
第9 章 使用DIV+CSS 靈活布局網頁
9.1 什麼是網站標準 141
9.2 關於表格布局 142
9.2.1 表格布局的特點 142
9.2.2 冗餘的嵌套表格和混亂的結構 142
9.3 關於DIV+CSS 布局 143
9.3.1 什麼是Web 標準 143
9.3.2 DIV+CSS 的優勢 143
9.4 塊元素和行內元素 144
9.4.1 塊元素 144
9.4.2 行內元素 144
9.5 在網頁中插入Div 144
9.5.1 Div 是什麼 144
9.5.2 如何在網頁中插入Div 145
9.5.3 Div 的嵌套 145
9.6 關於DIV+CSS 盒模型 146
9.6.1 盒模型的概念 147
9.6.2 margin（邊界） 147
動手實踐——定位網頁元素位置 147
9.6.3 border（框線） 148
動手實踐——為網頁元素添加框線 148
9.6.4 padding（填充） 149
動手實踐——控制Div 中內容的位置 149
9.6.5 content（內容） 150
9.7 DIV+CSS 布局定位 150
9.7.1 元素定位的CSS 屬性 150
9.7.2 relative（相對定位） 150
動手實踐——實現網頁元素相對定位 150
9.7.3 absolute（絕對定位） 151
動手實踐——實現網頁元素絕對定位 152
9.7.4 fixed（固定定位） 152
動手實踐——實現網頁元素固定定位 153
9.7.5 float（浮動定位） 153
動手實踐——實現網頁元素浮動定位 153
9.7.6 空白邊疊加 155
動手實踐——空白邊疊加在網頁中的套用 156
9.8 常用DIV+CSS 布局方式 157
9.8.1 Div 高度自適應 157
9.8.2 網頁內容居中布局 157
9.8.3 網頁元素浮動布局 158
9.8.4 流體格線布局 159
動手實踐——製作商場網站IPAD頁面布局 160
9.9 插入HTML 5 結構元素 164
9.9.1 頁眉 164
9.9.2 頁腳 165
9.9.3 Navigation 165
9.9.4 章節 165
9.9.5 文章 165
9.9.6 側邊 166
9.9.7 圖 166
9.10 製作休閒遊戲網站頁面 167
動手實踐——製作休閒遊戲網站頁面 167
9.11 本章小結 174
第10 章 在網頁中輸入文本
10.1 輸入文本 175
10.1.1 在網頁中輸入文本 175
動手實踐——製作文本網頁 175
10.1.2 頁面編碼以及分行和分段 176
10.2 文本屬性的設定 177
10.2.1 設定HTML 選項面板 177
10.2.2 設定CSS 選項面板 178
10.3 檢查拼寫與查找替換 180
10.3.1 檢查拼寫 180
10.3.2 查找和替換 180
10.4 在網頁中插入其他文本對象 181
10.4.1 無序列表和有序列表 181
動手實踐——製作新聞列表 181
10.4.2 設定列表屬性 183
10.4.3 插入水平線 184
動手實踐——插入水平線 184
10.4.4 設定水平線屬性 184
10.4.5 插入日期 185
動手實踐——插入日期 185
10.4.6 “插入日期”對話框 185
10.4.7 插入特殊字元 186
10.5 網頁中特殊文字效果的實現方法 186
10.5.1 Adobe Edge Web Fonts 186
動手實踐——使用Adobe Edge Web Fonts 186
10.5.2 Web 字型 187
動手實踐——實現特殊的字型效果 187
10.6 在網頁中實現文本滾動 189
動手實踐——在網頁中實現文本滾動 189
10.7 製作企業網站頁面 191
動手實踐——製作企業網站頁面 191
10.8 本章小結 196
第11 章 在網頁中插入圖像
11.1 網頁圖像的基本知識 197
11.1.1 GIF 格式 197
11.1.2 JPEG 格式 197
11.1.3 PNG 格式 198
11.2 在網頁中插入圖像 198
11.2.1 插入圖像 198
動手實踐——插入圖像 198
11.2.2 設定圖像屬性 199
11.3 插入其他圖像元素 202
11.3.1 滑鼠經過圖像 202
動手實踐——製作互動導航選單 202
11.3.2 插入Fireworks HTML 203
11.4 插入HTML 5 畫布 203
11.4.1 插入畫布 203
11.4.2 設定畫布屬性 204
11.4.3 如何使用畫布在網頁中繪製圖形 204
11.4.4 使用HTML 5 畫布繪製矩形 204
動手實踐——使用HTML 5 畫布
繪製矩形 204
11.4.5 使用HTML 5 畫布實現圓形圖片 205
動手實踐——使用HTML 5 畫布實現圓形圖片 205
11.5 製作旅遊信息網站頁面 206
動手實踐——製作旅遊信息網站頁面 207
11.6 本章小結 212
第12 章 在網頁中插入多媒體元素
12.1 插入Edge Animate 作品 213
動手實踐——製作廣告展示頁面 213
12.2 HTML 5 Video 214
12.2.1 HTML 5 所支持的視頻檔案格式 214
12.2.2 插入HTML 5 Video 214
動手實踐——製作HTML 5 視頻頁面 215
12.2.3 設定HTML 5 Video 屬性 215
12.3 HTML 5 Audio 216
12.3.1 HTML 5 所支持的音頻檔案格式 216
12.3.2 插入HTML 5 Audio 216
動手實踐——製作HTML 5 音頻網頁 217
12.3.3 設定HTML 5 Audio 屬性 217
12.4 在網頁中插入Flash 動畫和FLV 視頻 218
12.4.1 插入Flash 動畫 218
動手實踐——製作Flash 歡迎頁面 218
12.4.2 設定Flash 動畫屬性 219
12.4.3 插入Flash Video 220
動手實踐——在網頁中插入FLV 視頻 220
12.4.4 “插入FLV”對話框 221
12.5 為網頁添加背景音樂 221
12.5.1 網頁中常用的音頻格式 221
12.5.2 使用 標籤添加背景音樂 222
動手實踐——為網頁添加背景音樂 222
12.5.3 使用外掛程式嵌入音頻 223
動手實踐——在網頁中嵌入音頻 223
12.6 在網頁中插入視頻 224
12.6.1 網頁中常用的視頻格式 224
12.6.2 插入視頻 224
動手實踐——在網頁中嵌入普通視頻 224
12.7 製作休閒旅遊網站頁面 225
動手實踐——製作休閒旅遊網站頁面 226
12.8 本章小結 230
第13 章 網頁中連結的設定
13.1 連結與路徑的關係 231
13.1.1 相對路徑 231
13.1.2 創建內部連結 231
動手實踐——創建內部連結 231
13.1.3 絕對路徑 232
13.1.4 創建外部連結 233
動手實踐——創建外部連結 233
13.1.5 根路徑 234
13.2 文字和圖像連結 234
13.2.1 創建文字連結 234
動手實踐——創建文字連結 234
13.2.2 創建圖像連結 235
動手實踐——創建圖像連結 235
13.2.3 連結打開方式 236
13.3 網頁中的特殊連結 236
13.3.1 空連結 236
動手實踐——在網頁中創建空連結 236
13.3.2 檔案下載連結 237
動手實踐——在網頁中創建檔案下載連結 237
13.3.3 E-mail 連結 238
動手實踐——在網頁中創建E-mail 連結 238
13.3.4 腳本連結 239
動手實踐——在網頁中創建腳本連結 239
13.3.5 圖像熱點連結 240
動手實踐——在網頁中創建圖像熱點連結 240
13.4 CSS 超連結樣式偽類 241
動手實踐——美化網頁中的超連結文字 241
13.5 製作音樂類網站頁面 243
動手實踐——製作音樂類網站頁面 243
13.6 本章小結 252
第14 章 使用表格和IFrame 框架布局網頁
14.1 插入表格及設定表格屬性 253
14.1.1 “表格”對話框 253
14.1.2 插入表格 253
動手實踐——在網頁中插入表格 253
14.1.3 選擇表格和單元格 254
動手實踐——選擇表格和單元格 254
14.1.4 設定表格屬性 255
14.1.5 設定單元格屬性 255
14.2 編輯表格 256
14.2.1 調整表格大小 256
14.2.2 調整單元格大小 256
14.2.3 插入行或列 257
14.2.4 刪除行或列 257
14.2.5 複製和貼上單元格 257
14.2.6 合併單元格 258
14.2.7 拆分單元格 258
14.3 表格的高級處理技巧 259
14.3.1 排序表格 259
動手實踐——對表格數據進行排序 259
14.3.2 導入表格式數據 260
動手實踐——在網頁中導入表格式數據內容 260
14.3.3 導出表格數據 261
14.4 使用CSS 實現表格特效 262
14.4.1 使用CSS 實現隔行變色的單元格 262
動手實踐——使用CSS 實現隔行變色的單元格 262
14.4.2 使用CSS 實現互動變色表格 263
動手實踐——使用CSS 實現互動變色表格 263
14.5 使用IFrame 框架布局網頁 263
14.5.1 製作IFrame 框架頁面 264
動手實踐——製作IFrame 框架頁面 264
14.5.2 IFrame 框架頁面連結 265
動手實踐——IFrame 框架頁面連結 265
14.6 製作社區類網站頁面 265
動手實踐——製作社區類網站頁面 266
14.7 本章小結 272
第15 章 使用行為豐富網頁效果
15.1 了解Dreamweaver CC 中的行為 273
15.1.1 什麼是行為 273
15.1.2 “行為”面板 273
15.2 添加行為實現網頁特效 274
15.2.1 交換圖像 274
動手實踐——實現圖像翻轉效果 274
15.2.2 彈出信息 275
動手實踐——添加彈出歡迎信息 275
15.2.3 恢復交換圖像 275
15.2.4 打開瀏覽器視窗 276
動手實踐——實現彈出網頁視窗 276
15.2.5 拖動AP 元素 277
動手實踐——實現網頁中可拖動元素 277
15.2.6 改變屬性 278
動手實踐——動態改變圖像框線顏色 279
15.2.7 顯示- 隱藏元素 280
動手實踐——控制網頁中對象的顯示和隱藏 280
15.2.8 檢查外掛程式 282
動手實踐——檢查瀏覽器是否安裝Flash 外掛程式 282
15.2.9 檢查表單 283
動手實踐——檢查網頁登錄表單信息 283
15.2.10 設定文本 285
動手實踐——動態改變網頁中Div 的文本內容 285
動手實踐——為網頁表單元素設定內容 286
動手實踐——設定瀏覽器狀態欄文本 287
15.2.11 調用JavaScript 288
動手實踐——在網頁中調用JavaScript腳本 288
15.2.12 跳轉選單 289
15.2.13 跳轉選單開始 289
15.2.14 轉到URL 289
動手實踐——實現特殊的打開連結頁面方式 290
15.2.15 預先載入圖像 290
15.3 添加jQuery 效果實現網頁特效 291
15.3.1 關於jQuery 效果 291
15.3.2 套用Blind 行為 291
動手實踐——動態顯示隱藏網頁導航 292
15.3.3 套用Bounce 行為 293
動手實踐——實現網頁元素的抖動 294
15.3.4 套用Clip 行為 295
動手實踐——實現網頁元素的快速隱藏 295
15.3.5 套用Drop 行為 295
動手實踐——實現網頁元素的漸隱漸現效果 296
15.3.6 套用Highlight 行為 297
動手實踐——實現網頁元素的
高光過渡效果 297
15.4 製作交友網站頁面 298
動手實踐——製作交友網站頁面 298
15.5 本章小結 304
第16 章 使用表單創建互動網頁
16.1 關於表單 305
16.2 插入常用表單元素 305
16.2.1 認識常用表單元素 305
16.2.2 表單域 306
動手實踐——插入表單域 306
16.2.3 設定表單域屬性 307
16.2.4 文本域 308
動手實踐——插入文本域 308
16.2.5 設定文本域屬性 309
16.2.6 密碼域 309
動手實踐——插入密碼域 310
16.2.7 文本區域 310
動手實踐——插入文本區域 310
16.2.8 設定文本區域屬性 311
16.2.9 按鈕、提交按鈕和重置按鈕 312
動手實踐——插入提交按鈕和重置按鈕 312
16.2.10 插入檔案域 313
動手實踐——插入檔案域 313
16.2.11 設定檔案域屬性 314
16.2.12 圖像按鈕 314
動手實踐——插入圖像按鈕 314
16.2.13 設定圖像按鈕屬性 315
16.2.14 隱藏域 315
16.2.15 選擇域 315
動手實踐——插入選擇域 316
16.2.16 設定選擇域屬性 316
16.2.17 單選按鈕和單選按鈕組 317
動手實踐——插入單選按鈕組 317
16.2.18 複選框和複選框組 317
動手實踐——插入複選框 317
16.2.19 設定複選框屬性 318
16.3 插入HTML 5 表單元素 319
16.3.1 認識HTML 5 表單元素 319
16.3.2 電子郵件 319
16.3.3 Url 320
16.3.4 Tel 320
16.3.5 搜尋 320
16.3.6 數字 320
16.3.7 範圍 321
16.3.8 顏色 321
16.3.9 時間日期相關表單元素 322
16.3.10 製作網站留言頁面 323
動手實踐——製作網站留言頁面 323
16.4 製作登錄頁面 326
動手實踐——製作登錄頁面 326
16.5 製作用戶註冊頁面 330
動手實踐——製作用戶註冊頁面 331
16.6 本章小結 336
第17 章 創建庫和模板網頁
17.1 庫在網頁中的套用 337
17.1.1 新建庫項目 337
動手實踐——新建庫項目 337
17.1.2 在網頁中套用庫項目 338
動手實踐——在網頁中套用庫項目 339
17.1.3 編輯和更新庫項目 339
17.1.4 庫項目的“屬性”面板 340
17.2 創建模板頁面 340
17.2.1 模板的特點 340
17.2.2 新建網頁模板 340
動手實踐——新建網頁模板 340
17.2.3 “另外儲存模板”對話框 341
17.2.4 創建模板中的可編輯區域 342
動手實踐——創建模板中的可編輯區域 342
17.2.5 創建模板中的可選區域 343
動手實踐——創建模板中的可選區域 343
17.2.6 “新建可選區域”對話框 343
17.2.7 創建模板中的可編輯可選區域 344
動手實踐——創建模板中的可編輯可選區域 344
17.2.8 創建模板中的重複區域 345
17.2.9 可編輯標籤屬性 345
17.3 在網頁中套用模板 345
17.3.1 新建基於模板的頁面 345
動手實踐——新建基於模板的頁面 345
17.3.2 刪除網頁中所使用的模板 348
17.3.3 更新網頁模板 348
17.4 製作藝術類網站頁面 349
動手實踐——製作藝術類網站頁面 349
17.5 本章小結 356
第18 章 jQuery Mobile 和jQuery UI 的套用
18.1 關於jQuery Mobile 357
18.1.1 jQuery Mobile 概述 357
18.1.2 創建jQuery Mobile 頁面 357
18.1.3 jQuery Mobile 基本頁面結構 358
18.2 認識jQuery Mobile 對象 359
18.2.1 頁面 359
18.2.2 列表視圖 360
18.2.3 布局格線 362
18.2.4 可摺疊區塊 362
18.2.5 表單元素 362
動手實踐——製作jQuery Mobile表單頁面 362
18.3 製作jQuery Mobile 網站頁面 365
動手實踐——製作旅遊信息手機網站頁面 365
18.4 jQuery UI 概述 369
18.5 認識jQuery UI 組件 369
18.5.1 Accordion 369
18.5.2 Tabs 370
18.5.3 Datepicker 370
18.5.4 Progressbar 371
18.5.5 Dialog 371
18.5.6 Autocomplete 371
18.5.7 Slider 372
18.5.8 Button 372
18.5.9 Buttonset 372
18.5.10 Checkbox Buttons 373
18.5.11 Radio Buttons 373
18.6 使用Accordion 組件 374
18.6.1 設定Accordion 組件屬性 374
18.6.2 製作摺疊式公告 374
動手實踐——製作摺疊式公告 375
18.7 使用Tabs 組件 377
18.7.1 設定Tabs 組件屬性 377
18.7.2 製作選項卡式新聞列表 377
動手實踐——製作選項卡式新聞列表 378
18.8 本章小結 380
第19 章 網站的測試、上傳與維護
19.1 網站測試 381
19.1.1 檢查連結 381
動手實踐——檢查連結 381
19.1.2 W3C 驗證 382
動手實踐——W3C 驗證 382
19.1.3 創建站點報告 383
19.2 上傳網站 383
19.2.1 域名、空間的申請 384
19.2.2 上傳或下載網頁檔案 384
動手實踐——上傳或下載網頁檔案 384
19.2.3 使用其他上傳工具 386
動手實踐——使用其他上傳工具 387
19.3 站點維護 388
19.3.1 激活取出和存回功能 388
動手實踐——激活取出和存回功能 388
19.3.2 取出 389
19.3.3 存回 389
19.3.4 取消取出和存回操作 390
19.4 本章小結 390
第20 章 商業網站實戰
20.1 製作企業類網站頁面 391
20.1.1 設計分析 391
20.1.2 實例製作 391
動手實踐——製作企業類網站頁面 392
20.1.3 實例小結 395
20.2 製作遊戲類網站頁面 396
20.2.1 設計分析 396
20.2.2 實例製作 396
動手實踐——製作遊戲類網站頁面 396
20.2.3 實例小結 403
20.3 製作兒童類網站頁面 403
20.3.1 設計分析 403
20.3.2 實例製作 403
動手實踐——製作兒童類網站頁面 403
20.3.3 實例小結 412
20.4 本章小結 412
