Dreamweaver 基礎與實戰教程

第01章
Dreamweaver CC 入門
1.1 什麽是網頁 002
1.1.1 網頁設計與網頁製作 002
1.1.2 網頁設計術語 003
1.2 Dreamweaver CC簡介 004
1.3 Dreamweaver CC的安裝與啟動 005
1.3.1 系統要求 005
課堂案例 安裝Dreamweaver CC 006
1.3.2 Dreamweaver CC的啟動 007
1.4 Dreamweaver CC的工作界面 007
1.4.1 認識Dreamweaver CC的工作界面 008
1.4.2 “插入”面板 008
1.4.3 狀態欄 010
1.5 網頁文件的基本操作 011
1.5.1 新建網頁文件 011
1.5.2 保存網頁文件 012
1.5.3 打開網頁文件 013
1.5.4 預覽網頁 013
課堂練習 新建並保存網頁文件 014
課堂練習 打開並預覽網頁 015
課後習題 016

第02章 創建與管理站點
2.1 創建站點 018
課堂案例 創建本地靜態站點 018
課堂案例 創建企業站點並設置遠程服務器 019
2.2 站點文件的基本操作 020
2.2.1 創建頁面 021
2.2.2 創建文件夾 021
2.2.3 移動和復制文件或文件夾 021
2.2.4 重命名文件或文件夾 022
2.2.5 刪除文件或文件夾 022
2.3 管理站點 022
2.3.1 站點的切換 022
2.3.2 “管理站點”對話框 023
課堂練習 在站點中新建文件夾和網頁文件 023
課後習題 024

第03章 從HTML到HTML 5
3.1 HTML基礎 026
3.1.1 HTML概述 026
3.1.2 HTML文檔的特點 026
3.1.3 HTML文檔的結構 026
3.1.4 HTML的基本語法 027
3.1.5 HTML代碼編寫的註意事項 028
3.2 HTML中常用的重要標簽 028
3.2.1 字符格式標簽 028
3.2.2 區段格式標簽 029
3.2.3 列表標簽 029
3.2.4 表格標簽 030
3.2.5 超鏈接標簽 030
3.2.6 多媒體標簽 031
3.2.7 表單標簽 031
3.2.8 分區標簽 032
3.3 在Dreamweaver中編寫HTML代碼 032
課堂案例 在設計視圖中製作HTML頁面 033
課堂案例 在代碼視圖中製作HTML頁面 033
3.4 HTML 5基礎 035
3.4.1 HTML 5概述 035
3.4.2 HTML 5的文檔結構 035
3.4.3 HTML 5的優勢 036
3.5 HTML 5中新增的標簽 037
3.5.1 結構標簽 037
3.5.2 文本標簽 037
3.5.3 應用和輔助標簽 037
3.5.4 進度標簽 038
3.5.5 交互性標簽 038
3.5.6 在文檔和應用中使用的標簽 038
3.5.7 ＜ruby＞標簽 039
3.5.8 其他標簽 039
3.6 網頁中的其他源代碼 039
3.6.1 CSS樣式代碼 039
3.6.2 JavaScript腳本 040
3.6.3 源代碼中的註釋 040
課堂練習 使用記事本製作HTML頁面 041
課後習題 042

第04章 精通CSS樣式
4.1 瞭解CSS樣式 044
4.1.1 什麽是CSS樣式 044
4.1.2 CSS樣式的發展 044
4.1.3 CSS樣式規則 045
4.2 認識“CSS設計器”面板 045
4.2.1 “源”選項區 046
4.2.2 “@媒體”選項區 047
4.2.3 “選擇器”選項區 048
4.2.4 “屬性”選項區 048
4.3 CSS選擇器 048
課堂案例 使用通配符選擇器控制網頁中的所有
標簽 052
課堂案例 使用標簽選擇器設置網頁整體樣式 053
課堂案例 創建和使用ID CSS樣式 054
課堂案例 創建和使用類CSS樣式 056
課堂案例 設置網頁中的超鏈接偽類樣式 057
課堂案例 創建並應用派生選擇器 059
課堂案例 同時定義多個網頁元素樣式 060
4.4 使用CSS樣式的方法 061
課堂案例 鏈接外部CSS樣式表文件 062
4.5 豐富的CSS樣式設置 064
4.5.1 佈局樣式設置 064
課堂案例 佈局CSS樣式 065
4.5.2 文本樣式設置 067
課堂案例 設置網頁中的文字效果 068
4.5.3 邊框樣式設置 069
課堂案例 設置網頁元素的邊框效果 070
4.5.4 背景樣式設置 071
課堂案例 為網頁元素設置背景圖像 072
4.5.5 其他樣式設置 073
課堂練習 鏈接外部CSS樣式表文件 073
課堂練習 在網頁中設置文字列表效果 075
課後習題 076

第05章 CSS 3.0新增屬性及應用
5.1 新增的顏色定義方法 078
5.1.1 HSL顏色的定義方法 078
5.1.2 HSLA顏色的定義方法 078
5.1.3 RGBA顏色的定義方法 078
課堂案例 為網頁元素設置半透明背景 079
5.2 新增的文字設置屬性 080
5.2.1 text-overflow屬性 080
5.2.2 word-wrap屬性 081
5.2.3 word-break和word-space屬性 081
5.2.4 text-shadow屬性 082
課堂案例 為網頁文字設置陰影效果 082
5.2.5 @font-face規則 084
課堂案例 在網頁中實現特殊字體效果 084
5.3 新增的背景設置屬性 086
5.3.1 background-size屬性 086
課堂案例 實現始終滿屏顯示的網頁背景 087
5.3.2 background-origin屬性 089
5.3.3 background-clip屬性 090
5.3.4 background屬性 090
課堂案例 為網頁設置多背景圖像 091
5.4 新增的邊框設置屬性 092
5.4.1 border-colors屬性 092
5.4.2 border-image屬性 093
5.4.3 border-radius屬性 093
課堂案例 為網頁元素設置圓角效果 094
5.4.4 box-shadow屬性 096
課堂案例 為網頁元素設置陰影效果 097
5.5 新增的多列佈局屬性 098
5.5.1 columns屬性 098
5.5.2 column-width屬性 099
5.5.3 column-count屬性 099
5.5.4 column-gap屬性 099
5.5.5 column-rule屬性 100
5.5.6 column-span屬性 100
課堂案例 設置網頁內容分欄顯示 101
5.6 新增的盒模型設置屬性 103
5.6.1 opacity屬性 103
課堂案例 設置網頁元素的不透明度 104
5.6.2 overflow-x和overflow-y屬性 105
5.6.3 resize屬性 106
5.6.4 outline屬性 106
5.6.5 content屬性 108
課堂案例 為網頁元素賦予文字內容 108
課堂練習 實現網頁元素的任意縮放 109
課堂練習 為網頁元素添加輪廓外邊框效果 110
課後習題 112

第06章 Div+CSS網頁佈局
6.1 創建Div 114
6.1.1 瞭解Div 114
6.1.2 如何插入Div 114
6.1.3 在設計視圖中插入Div 115
6.1.4 塊元素與行內元素 116
6.1.5 Div+CSS佈局的優勢 117
6.2 CSS基礎盒模型 117
6.2.1 CSS基礎盒模型概述 118
6.2.2 margin屬性——邊距 119
課堂案例 製作歡迎頁面 119
6.2.3 border屬性——邊框 120
課堂案例 為圖像添加邊框效果 120
6.2.4 padding屬性——填充 121
課堂案例 設置網頁元素盒模型效果 122
6.2.5 空白邊疊加 123
課堂案例 網頁中空白邊疊加的應用 123
6.3 網頁元素的定位 124
6.3.1 CSS的定位屬性 125
6.3.2 相對定位relative 125
課堂案例 實現網頁元素的疊加顯示 126
6.3.3 絕對定位absolute 127
課堂案例 網頁元素固定在頁面右側 127
6.3.4 固定定位 128
課堂案例 實現固定位置的頂部導航欄 128
6.3.5 浮動定位 129
課堂案例 製作順序排列的圖像列表 129
6.4 常用網頁佈局方式 132
6.4.1 居中佈局 132
6.4.2 浮動佈局 134
6.4.3 自適應高度的解決方法 138
課堂練習 CSS盒模型綜合應用 138
課堂練習 設置元素溢出處理 140
課後習題 142

第07章 插入文本元素
7.1 設置網頁頭信息 144
7.1.1 設置網頁標題 144
7.1.2 設置網頁關鍵字 144
7.1.3 設置網頁說明 145
7.1.4 插入視口 145
7.1.5 設置網頁META信息 145
課堂案例 設置網頁頭信息 147
7.2 在網頁中輸入文本 148
7.2.1 在網頁中輸入文本的兩種方法 148
課堂案例 製作內容介紹網頁 149
7.2.2 插入段落 150
7.2.3 插入換行符 150
7.3 插入特殊的文本對象 151
7.3.1 插入水平線 151
課堂案例 在網頁中插入水平線 152
7.3.2 插入時間 153
7.3.3 插入空格和特殊字符 153
課堂案例 在網頁中插入系統時間和特殊字符 154
7.4 插入列表 155
7.4.1 插入ul項目列表 155
課堂案例 製作新聞列表 156
7.4.2 插入ol編號列表 157
課堂案例 製作排行列表 157
7.4.3 設置列表屬性 158
課堂練習 在網頁中實現滾動文本效果 159
課堂練習 在網頁中實現圖文混排 161
課後習題 162

第08章 插入圖像和多媒體元素
8.1 插入圖像元素 164
課堂案例 製作圖像歡迎網頁 164
8.1.1 設置圖像屬性 165
8.1.2 鼠標經過圖像 165
課堂案例 製作網站導航菜單 166
8.2 插入Canvas元素 167
8.2.1 瞭解Canvas元素 167
8.2.2 插入Canvas元素 167
8.2.3 使用JavaScript實現在畫布中繪圖的
流程 168
課堂案例 在網頁中繪制圓形 169
8.3 插入動畫元素 170
課堂案例 在網頁中插入Flash動畫 170
8.3.1 設置Flash SWF屬性 172
8.3.2 插入Flash Video 172
課堂案例 在網頁中插入Flash Video 173
8.3.3 瞭解動畫合成 174
課堂案例 在網頁中插入動畫合成 174
8.4 插入插件 175
8.4.1 使用插件嵌入音頻 175
課堂案例 在網頁中嵌入音頻 176
8.4.2 使用插件嵌入視頻 177
課堂案例 在網頁中嵌入視頻 177
8.5 插入HTML 5 Audio元素 179
8.5.1 插入HTML 5 Audio元素 179
8.5.2 HTML 5支持的音頻文件格式 179
課堂案例 在網頁中插入HTML與Audio元素 180
8.6 插入HTML 5 Video元素 180
8.6.1 插入HTML 5 Video元素 181
8.6.2 HTML 5支持的視頻文件格式 181
8.6.3 Audio與Video元素屬性 181
課堂案例 製作HTML 5視頻頁面 182
課堂練習 為網頁添加背景音樂 183
課堂練習 實現圖片滾動效果 184
課後習題 186

第09章 設置網頁超鏈接
9.1 創建超鏈接 188
9.1.1 創建文字和圖像超鏈接 188
9.1.2 設置超鏈接屬性 189
9.1.3 相對路徑和絕對路徑 189
課堂案例 設置網頁中的文字和圖像超鏈接 190
9.2 錨點鏈接 192
9.2.1 插入錨點 192
9.2.2 創建錨點鏈接 192
課堂案例 製作錨點鏈接頁面 192
9.3 創建特殊的超鏈接 194
9.3.1 空鏈接 194
9.3.2 文件下載鏈接 194
課堂案例 創建空鏈接和文件下載鏈接 194
9.3.3 腳本鏈接 196
課堂案例 創建關閉瀏覽器窗口的鏈接 196
9.4 理解超鏈接屬性 197
9.4.1 a:link 197
9.4.2 a:active 198
9.4.3 a:hover 198
9.4.4 a:visited 199
課堂練習 在網頁中創建E-mail鏈接 199
課堂練習 使用CSS樣式美化網頁超鏈接 201
課後習題 202

第10章 插入表單元素
10.1 表單概述 204
10.1.1 表單的作用 204
10.1.2 常用表單元素 204
10.1.3 HTML 5表單元素 205
10.2 常用表單元素的應用 206
10.2.1 表單域 206
10.2.2 文本域 207
10.2.3 密碼域 208
10.2.4 按鈕、提交和重置 208
10.2.5 圖像按鈕 209
課堂案例 製作登錄頁面 210
10.2.6 文本區域 212
10.2.7 文件域 212
10.2.8 隱藏域 213
10.2.9 選擇域 213
10.2.10 單選按鈕和單選按鈕組 214
10.2.11 復選框和復選框組 215
課堂案例 製作註冊頁面 215
10.3 HTML 5表單元素的應用 219
10.3.1 電子郵件 219
10.3.2 Url 219
10.3.3 Tel 220
10.3.4 搜索 220
10.3.5 數字 220
10.3.6 範圍 221
10.3.7 顏色 221
10.3.8 時間日期相關表單元素 222
課堂案例 製作留言表單頁面 222
課堂練習 製作投票表單 225
課堂練習 製作發表日誌表單頁面 226
課後習題 228

第11章 表格和iFrame框架
11.1 認識表格 230
11.1.1 插入表格 230
11.1.2 在網頁中插入表格 230
11.1.3 表格標題 231
課堂練習 創建數據表格 231
11.2 表格的基本操作 232
11.2.1 選擇表格和單元格 232
11.2.2 表格和單元格屬性設置 233
11.3 表格數據處理 233
11.3.1 排序表格 233
課堂案例 對表格數據進行排序 234
11.3.2 導入和導出表格數據 235
課堂案例 在網頁中導入外部數據 235
11.4 iFrame框架 236
課堂案例 製作iFrame框架頁面 237
11.5 使用HTML 5結構元素 238
11.5.1 Header 239
11.5.2 Navigation 239
11.5.3 Main 239
11.5.4 Section 240
11.5.5 Article 240
11.5.6 Aside 240
11.5.7 Footer 241
課堂案例 使用HTML 5結構元素製作網頁 241
課堂練習 設置表頭、表主體和表尾 244
課堂練習 iFrame框架頁面鏈接 245
課後習題 247

第12章模板和庫的應用
12.1 使用模板 249
12.1.1 模板的特點 249
12.1.2 創建模板 249
課堂案例 將網頁創建為模板 249
12.1.3 嵌套模板 250
課堂案例 定義模板頁面中的可編輯區域 251
課堂案例 定義模板頁面中的可選區域 252
課堂案例 定義模板頁面中的可編輯可選區域 253
12.1.4 定義重復區域 254
12.1.5 設置可編輯標簽屬性 254
12.2 應用模板 254
課堂案例 創建基於模板的網頁 254
12.2.1 更新模板及基於模板的網頁 256
12.2.2 刪除網頁中使用的模板 257
課堂練習 創建網站庫項目 257
課堂練習 在網頁中插入庫項目 258
課後習題 260

第13章 使用行為創建動態效果
13.1 瞭解行為 262
13.1.1 什麽是事件 262
13.1.2 什麽是行為 262
13.1.3 為網頁元素添加行為的方法 262
13.2 為網頁添加行為 263
課堂案例 應用“交換圖像”行為 263
課堂案例 為網頁添加彈出信息 264
13.2.1 恢復交換圖像 265
課堂練習 為網頁添加彈出信息窗口 266
課堂案例 在網頁中實現元素的拖動 266
課堂練習 改變網頁元素屬性 268
課堂案例 實現網頁元素的顯示和隱藏 269
13.2.2 檢查插件 270
課堂練習 實現表單驗證 271
13.2.3 調用JavaScript 272
課堂練習 在網頁中插入跳轉菜單 273
13.2.4 跳轉菜單開始 274
課堂案例 實現網頁跳轉 274
13.2.5 預先載入圖像 275
13.3 為網頁添加文本行為 275
13.3.1 設置容器的文本 276
課堂案例 設置文本域默認文字內容 276
13.3.2 設置框架文本 277
課堂案例 設置網頁狀態欄文本 277
13.4 為網頁添加jQuery效果 278
課堂案例 實現網頁元素的動態隱藏 279
課堂練習 實現網頁元素的高光過渡 281
課堂練習 為網頁添加“調用JavaScript”行為 282
課堂練習 實現網頁元素的漸隱和漸顯 283
課後習題 284

第14章 綜合案例
14.1 製作企業宣傳網站頁面 286
14.2 製作房地產宣傳網站頁面 290
14.3 製作兒童教育網站頁面 294
課後習題答案 300