第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
1.1 網(wǎng)頁(yè)開發(fā)概述 2
1.1.1 什么是網(wǎng)站 2
1.1.2 網(wǎng)站的類型 2
1.1.3 網(wǎng)站開發(fā)流程 6
1.1.4 認(rèn)識(shí)網(wǎng)頁(yè) 7
1.2 網(wǎng)頁(yè)設(shè)計(jì)理念 9
1.2.1 網(wǎng)頁(yè)色彩基礎(chǔ) 9
1.2.2 網(wǎng)頁(yè)配色藝術(shù) 10
1.2.3 網(wǎng)頁(yè)布局藝術(shù) 12
1.3 網(wǎng)頁(yè)設(shè)計(jì)常用工具 15
1.4 AIGC在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用 16
新手答疑 18

第2章 Dreamweaver輕松入門
2.1 Dreamweaver工作界面 20
2.2.1 工作區(qū) 20
2.2.2 自定義軟件界面 20
2.2.3 4種視圖模式 22
動(dòng)手練 自定義首選項(xiàng) 23
2.2 站點(diǎn)的創(chuàng)建與管理 24
2.2.1 創(chuàng)建站點(diǎn) 24
2.2.2 編輯站點(diǎn) 25
2.2.3 導(dǎo)入和導(dǎo)出站點(diǎn) 26
2.2.4 新建文件或文件夾 26
2.2.5 編輯文件或文件夾 26
2.3 文檔的基礎(chǔ)操作 27
2.3.1 新建文檔 27
2.3.2 打開文檔 27
2.3.3 插入文檔 27
2.3.4 保存文檔 28
2.3.5 關(guān)閉文檔 28
綜合實(shí)戰(zhàn)：網(wǎng)頁(yè)本地站點(diǎn)的創(chuàng)建 28
新手答疑 30

第3章 制作網(wǎng)頁(yè)內(nèi)容
3.1 插入網(wǎng)頁(yè)文本 32
3.1.1 插入文本 32
3.1.2 設(shè)置文本格式 32
3.1.3 設(shè)置段落格式 33
3.1.4 設(shè)置文本樣式 34
3.1.5 使用列表 34
3.1.6 在網(wǎng)頁(yè)中插入特殊元素 35
動(dòng)手練 為讀書網(wǎng)頁(yè)添加文本 36
3.2 插入網(wǎng)頁(yè)圖像 38
3.2.1 插入圖像 38
3.2.2 圖像的屬性設(shè)置 38
3.2.3 圖像的對(duì)齊方式 39
動(dòng)手練 為餐具網(wǎng)頁(yè)添加圖像 40
3.2.4 替換文本 40
3.2.5 鼠標(biāo)經(jīng)過(guò)圖像 40
3.3 插入多媒體元素 42
3.3.1 插入HTML 5 Video元素 42
3.3.2 插入HTML 5 Audio元素 43
動(dòng)手練 為視頻網(wǎng)頁(yè)添加小視頻 44
3.4 創(chuàng)建超鏈接 45
3.4.1 超鏈接路徑 45
3.4.2 創(chuàng)建超鏈接 46
3.4.3 管理網(wǎng)頁(yè)超鏈接 49
動(dòng)手練 為裝飾網(wǎng)頁(yè)添加超鏈接 50
綜合實(shí)戰(zhàn)：制作影音網(wǎng)站首頁(yè) 52
新手答疑 56

第4章 設(shè)計(jì)網(wǎng)頁(yè)布局
4.1 網(wǎng)頁(yè)布局類型 58
4.2 用表格布局網(wǎng)頁(yè) 58
4.2.1 插入表格 58
4.2.2 表格屬性 59
4.2.3 編輯表格 61
動(dòng)手練 制作建筑企業(yè)網(wǎng)頁(yè) 63
4.3 Div與CSS布局基礎(chǔ) 66
4.3.1 Div概述 66
4.3.2 創(chuàng)建Div 66
4.3.3 CSS布局方法 67
動(dòng)手練 制作首飾店網(wǎng)頁(yè) 69
綜合實(shí)戰(zhàn)：制作咖啡小店網(wǎng)頁(yè) 73
新手答疑 78

第5章 使用CSS美化網(wǎng)頁(yè)
5.1 創(chuàng)建CSS樣式 80
5.1.1 CSS的定義 80
5.1.2 CSS設(shè)計(jì)器 81
5.1.3 創(chuàng)建CSS樣式 81
5.1.4 CSS屬性 83
動(dòng)手練 美化運(yùn)動(dòng)網(wǎng)頁(yè) 86
5.2 CSS規(guī)則定義 89
5.2.1 類型 89
5.2.2 背景 90
5.2.3 區(qū)塊 90
5.2.4 方框 91
5.2.5 邊框 91
5.2.6 列表 91
5.2.7 定位 92
5.2.8 擴(kuò)展 92
5.2.9 過(guò)渡 92
動(dòng)手練 調(diào)整綠植網(wǎng)頁(yè)樣式 93
綜合實(shí)戰(zhàn)：美化自行車網(wǎng)頁(yè) 95
新手答疑 100

第6章 應(yīng)用交互特效
6.1 什么是行為 102
6.1.1 行為 102
6.1.2 常見事件 103
6.2 窗口交互行為 104
6.2.1 調(diào)用JavaScript 104
6.2.2 轉(zhuǎn)到URL 104
6.2.3 打開瀏覽器窗口 105
6.3 圖像交互行為 105
6.3.1 交換圖像與恢復(fù)交換圖像 105
6.3.2 預(yù)先載入圖像 106
6.3.3 顯示-隱藏元素 106
動(dòng)手練 網(wǎng)頁(yè)交換圖像 107
6.4 文本交互行為 108
6.4.1 彈出信息 108
6.4.2 設(shè)置狀態(tài)欄文本 108
6.4.3 設(shè)置容器的文本 109
6.4.4 設(shè)置文本域文字 109
動(dòng)手練 為網(wǎng)頁(yè)添加文本交互行為 109
6.5 表單交互行為 110
6.5.1 跳轉(zhuǎn)菜單 110
6.5.2 檢查表單 110
綜合實(shí)戰(zhàn)：提升購(gòu)物網(wǎng)頁(yè)交互性 111
新手答疑 114

第7章 創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)
7.1 使用表單 116
7.1.1 認(rèn)識(shí)表單 116
7.1.2 基本表單對(duì)象 116
7.2 文本類表單 117
7.2.1 文本 117
7.2.2 密碼 118
7.2.3 文本區(qū)域 118
動(dòng)手練 制作科技網(wǎng)站登錄頁(yè) 119
7.3 選擇類表單 121
7.3.1 單選按鈕和單選按鈕組 121
7.3.2 復(fù)選框和復(fù)選框組 122
7.3.3 選擇 123
7.4 其他常用表單 123
7.4.1 提交和重置按鈕 123
7.4.2 文件 124
動(dòng)手練 制作旅社預(yù)訂頁(yè) 124
綜合實(shí)戰(zhàn)：設(shè)計(jì)知識(shí)競(jìng)賽網(wǎng)頁(yè) 128
新手答疑 132

第8章 網(wǎng)頁(yè)模板與庫(kù)
8.1 創(chuàng)建模板 134
8.1.1 直接創(chuàng)建模板 134
8.1.2 從現(xiàn)有網(wǎng)頁(yè)中創(chuàng)建模板 134
動(dòng)手練 制作服裝網(wǎng)頁(yè)模板 135
8.2 管理和使用模板 136
8.2.1 編輯模板 136
8.2.2 應(yīng)用模板 137
8.2.3 從模板中分離 138
8.2.4 更新頁(yè)面 138
動(dòng)手練 應(yīng)用服裝網(wǎng)頁(yè)模板 138
8.3 庫(kù)項(xiàng)目 141
8.3.1 創(chuàng)建庫(kù)項(xiàng)目 141
8.3.2 應(yīng)用庫(kù)項(xiàng)目 142
8.3.3 編輯和更新庫(kù)項(xiàng)目 143
綜合實(shí)戰(zhàn)：制作自然科普網(wǎng)頁(yè)模板并應(yīng)用 144
新手答疑 148

第9章 網(wǎng)頁(yè)動(dòng)畫基礎(chǔ)知識(shí)
9.1 Animate工作界面 150
9.2 文檔基本操作 151
9.2.1 新建文檔 151
9.2.2 設(shè)置文檔屬性 152
9.2.3 打開已有文檔 152
9.2.4 導(dǎo)入素材 152
9.2.5 保存文檔 153
9.2.6 測(cè)試與發(fā)布動(dòng)畫 153
動(dòng)手練 導(dǎo)出網(wǎng)頁(yè)可用GIF動(dòng)畫 155
9.3 繪制矢量圖形 156
9.3.1 輔助繪圖工具 156
9.3.2 繪制線條 157
9.3.3 繪制簡(jiǎn)單圖形 158
9.3.4 繪制復(fù)雜圖形 161
9.3.5 設(shè)計(jì)圖形色彩 162
9.3.6 編輯所繪圖形 164
動(dòng)手練 繪制雪花造型豐富網(wǎng)頁(yè) 168
綜合實(shí)戰(zhàn)：繪制電視機(jī)網(wǎng)頁(yè)圖標(biāo) 169
新手答疑 172

第10章 網(wǎng)頁(yè)動(dòng)畫的制作
10.1 時(shí)間軸與圖層 174
10.1.1 認(rèn)識(shí)時(shí)間軸 174
10.1.2 圖層的基本操作 174
10.1.3 幀的基本操作 176
動(dòng)手練 網(wǎng)頁(yè)標(biāo)題文字跳動(dòng)動(dòng)畫 178
10.2 元件 180
10.2.1 元件的類型 180
10.2.2 創(chuàng)建元件 181
10.2.3 編輯元件 182
10.2.4 實(shí)例的創(chuàng)建與編輯 183
動(dòng)手練 頁(yè)面文字出現(xiàn)動(dòng)畫 184
10.3 庫(kù) 187
10.3.1 認(rèn)識(shí)庫(kù)面板 187
10.3.2 重命名庫(kù)項(xiàng)目 187
10.3.3 創(chuàng)建文件夾 187
10.4 動(dòng)畫的制作 188
10.4.1 逐幀動(dòng)畫 188
10.4.2 補(bǔ)間動(dòng)畫 188
10.4.3 引導(dǎo)動(dòng)畫 190
10.4.4 遮罩動(dòng)畫 191
10.4.5 交互動(dòng)畫 191
動(dòng)手練 網(wǎng)頁(yè)遮罩動(dòng)畫 194
綜合實(shí)戰(zhàn)：制作網(wǎng)頁(yè)輪播圖動(dòng)畫 197
新手答疑 200

第11章 網(wǎng)頁(yè)特效的制作
11.1 文本的應(yīng)用 202
11.1.1 文本類型 202
11.1.2 設(shè)置文字屬性 203
11.1.3 設(shè)置段落格式 203
11.1.4 創(chuàng)建文本鏈接 204
動(dòng)手練 文字網(wǎng)站文字變形動(dòng)畫 204
11.2 濾鏡的應(yīng)用 205
11.2.1 認(rèn)識(shí)濾鏡 205
11.2.2 編輯濾鏡 206
動(dòng)手練 網(wǎng)頁(yè)鏤空裝飾文字 207
11.3 音視頻的應(yīng)用 207
11.3.1 音視頻文件格式 207
11.3.2 導(dǎo)入聲音 208
11.3.3 編輯優(yōu)化聲音 209
11.3.4 導(dǎo)入視頻文件 211
11.3.5 編輯處理視頻 212
動(dòng)手練 制作網(wǎng)頁(yè)裝飾性小視頻 212
綜合實(shí)戰(zhàn)：制作音頻播放頁(yè)面 214
新手答疑 216

第12章 網(wǎng)頁(yè)圖像基礎(chǔ)知識(shí)
12.1 Photoshop軟件簡(jiǎn)介 218
12.1.1 Photoshop工作界面 218
12.1.2 自定義圖像窗口 219
12.2 編輯圖像文檔 220
12.2.1 圖像文檔管理 220
12.2.2 圖像尺寸調(diào)整 222
12.2.3 畫布尺寸調(diào)整 222
12.2.4 裁剪工具 222
動(dòng)手練 裁剪網(wǎng)頁(yè)圖像 223
12.3 頁(yè)面布局工具 224
12.3.1 標(biāo)尺 224
12.3.2 網(wǎng)格 224
12.3.3 參考線 224
12.4 網(wǎng)頁(yè)圖像基礎(chǔ)知識(shí) 225
12.4.1 位圖與矢量圖 225
12.4.2 分辨率 225
12.4.3 圖像格式 226
12.4.4 圖像顏色模式 226
綜合實(shí)戰(zhàn)：為網(wǎng)頁(yè)圖像添加邊框 227
新手答疑 228

第13章 網(wǎng)頁(yè)圖像的處理
13.1 創(chuàng)建與編輯選區(qū) 230
13.1.1 創(chuàng)建選區(qū) 230
13.1.2 編輯選區(qū) 231
動(dòng)手練 合成奇幻網(wǎng)頁(yè)圖像 233
13.2 修改圖像 234
13.2.1 橡皮擦工具組 234
13.2.2 圖章工具組 235
13.2.3 修復(fù)工具組 236
動(dòng)手練 修復(fù)網(wǎng)頁(yè)圖像 237
13.3 圖層與蒙版 238
13.3.1 圖層的基本操作 238
13.3.2 圖層樣式的運(yùn)用 241
13.3.3 圖層的混合模式 242
13.3.4 圖層蒙版的操作 243
動(dòng)手練 合成趣味網(wǎng)頁(yè)圖像 245
13.4 調(diào)整網(wǎng)頁(yè)圖像 248
12.4.1 色彩三要素 248
12.4.2 常用圖像調(diào)整命令 249
12.4.3 調(diào)整圖層 250
動(dòng)手練 網(wǎng)頁(yè)圖像調(diào)色 251
13.5 運(yùn)用濾鏡增強(qiáng)網(wǎng)頁(yè)圖像的效果 253
13.5.1 使用濾鏡庫(kù) 253
13.5.2 風(fēng)格化濾鏡組 253
13.5.3 模糊濾鏡組 254
13.5.4 扭曲濾鏡組 255
13.5.5 像素化濾鏡組 256
動(dòng)手練 網(wǎng)頁(yè)圖像內(nèi)容添加 257
綜合實(shí)戰(zhàn)：制作線上課程封面 258
新手答疑 262

第14章 網(wǎng)頁(yè)元素的設(shè)計(jì)
14.1 設(shè)計(jì)網(wǎng)頁(yè)文字 264
14.1.1 輸入和編輯文字 264
14.1.2 路徑文字 266
14.2 設(shè)計(jì)標(biāo)志和圖標(biāo) 267
14.2.1 制作網(wǎng)站標(biāo)志 267
14.2.2 制作頁(yè)面圖標(biāo) 268
14.3 設(shè)計(jì)按鈕和導(dǎo)航條 269
14.3.1 繪制網(wǎng)頁(yè)按鈕 269
動(dòng)手練 制作下載按鈕 269
14.3.2 繪制網(wǎng)頁(yè)導(dǎo)航條 271
動(dòng)手練 制作電影網(wǎng)站首頁(yè)導(dǎo)航條 271
14.4 設(shè)計(jì)網(wǎng)頁(yè)廣告 273
14.4.1 制作Banner 273
動(dòng)手練 制作茶文化網(wǎng)站首頁(yè)Banner 273
14.4.2 制作網(wǎng)頁(yè)通欄廣告 274
動(dòng)手練 制作鞋類產(chǎn)品促銷通欄廣告 274
14.5 設(shè)計(jì)網(wǎng)頁(yè)并輸出 276
14.5.1 制作網(wǎng)站首頁(yè) 276
動(dòng)手練 制作美食網(wǎng)站首頁(yè) 277
14.5.2 創(chuàng)建切片 281
動(dòng)手練 創(chuàng)建美食網(wǎng)站首頁(yè)切片 281
14.5.3 優(yōu)化導(dǎo)出切片 282
動(dòng)手練 導(dǎo)出美食網(wǎng)站首頁(yè)切片 282
綜合實(shí)戰(zhàn)：繪制咖啡網(wǎng)站標(biāo)志 284
新手答疑 286

附贈(zèng) HTML 5知識(shí)手冊(cè)
（本部分內(nèi)容請(qǐng)掃碼查看電子文檔）

?設(shè)計(jì)之下，
?每次點(diǎn)擊都有意義。