網頁設計與製作標準教程Dreamweaver+HTML+Flash+Photoshop（微課視頻版）

目 錄

Dreamweaver

HTML Flash

Photoshop

第1章  網頁設計基礎

1.1 網頁開發概述 2

1.1.1 什麽是網站 2

1.1.2 網站的類型 2

1.1.3 網站開發流程 6

1.1.4 認識網頁 7

1.2 網頁設計理念 9

1.2.1 網頁色彩基礎 9

1.2.2 網頁配色藝術 10

1.2.3 網頁佈局藝術 12

1.3 網頁設計常用工具 15

1.4 AIGC在網頁設計中的應用 16

新手答疑 18

第2章  Dreamweaver輕松入門

2.1 Dreamweaver工作界面 20

2.2.1 工作區 20

2.2.2 自定義軟件界面 20

2.2.3 4種視圖模式 22

動手練 自定義首選項 23

2.2 站點的創建與管理 24

2.2.1 創建站點 24

2.2.2 編輯站點 25

2.2.3 導入和導出站點 26

2.2.4 新建文件或文件夾 26

2.2.5 編輯文件或文件夾 26

2.3 文檔的基礎操作 27

2.3.1 新建文檔 27

2.3.2 打開文檔 27

2.3.3 插入文檔 27

2.3.4 保存文檔 28

2.3.5 關閉文檔 28

綜合實戰：網頁本地站點的創建 28

新手答疑 30

第3章  製作網頁內容

3.1 插入網頁文本 32

3.1.1 插入文本 32

3.1.2 設置文本格式 32

3.1.3 設置段落格式 33

3.1.4 設置文本樣式 34

3.1.5 使用列表 34

3.1.6 在網頁中插入特殊元素 35

動手練 為讀書網頁添加文本 36

3.2 插入網頁圖像 38

3.2.1 插入圖像 38

3.2.2 圖像的屬性設置 38

3.2.3 圖像的對齊方式 39

動手練 為餐具網頁添加圖像 40

3.2.4 替換文本 40

3.2.5 鼠標經過圖像 40

3.3 插入多媒體元素 42

3.3.1 插入HTML 5 Video元素 42

3.3.2 插入HTML 5 Audio元素 43

動手練 為視頻網頁添加小視頻 44

3.4 創建超鏈接 45

3.4.1 超鏈接路徑 45

3.4.2 創建超鏈接 46

3.4.3 管理網頁超鏈接 49

動手練 為裝飾網頁添加超鏈接 50

綜合實戰：製作影音網站首頁 52

新手答疑   56

第4章  設計網頁佈局

4.1 網頁佈局類型 58

4.2 用表格佈局網頁 58

4.2.1 插入表格 58

4.2.2 表格屬性 59

4.2.3 編輯表格 61

動手練 製作建築企業網頁 63

4.3 Div與CSS佈局基礎 66

4.3.1 Div概述 66

4.3.2 創建Div 66

4.3.3 CSS佈局方法 67

動手練 製作首飾店網頁 69

綜合實戰：製作咖啡小店網頁 73

新手答疑   78

第5章  使用CSS美化網頁

5.1 創建CSS樣式 80

5.1.1 CSS的定義 80

5.1.2 CSS設計器 81

5.1.3 創建CSS樣式 81

5.1.4 CSS屬性 83

動手練 美化運動網頁 86

5.2 CSS規則定義 89

5.2.1 類型 89

5.2.2 背景 90

5.2.3 區塊 90

5.2.4 方框 91

5.2.5 邊框 91

5.2.6 列表 91

5.2.7 定位 92

5.2.8 擴展 92

5.2.9 過渡 92

動手練 調整綠植網頁樣式 93

綜合實戰：美化自行車網頁 95

新手答疑 100

第6章  應用交互特效

6.1 什麽是行為 102

6.1.1 行為 102

6.1.2 常見事件 103

6.2 窗口交互行為 104

6.2.1 調用JavaScript 104

6.2.2 轉到URL 104

6.2.3 打開瀏覽器窗口 105

6.3 圖像交互行為 105

6.3.1 交換圖像與恢復交換圖像 105

6.3.2 預先載入圖像 106

6.3.3 顯示-隱藏元素 106

動手練 網頁交換圖像 107

6.4 文本交互行為 108

6.4.1 彈出信息 108

6.4.2 設置狀態欄文本 108

6.4.3 設置容器的文本 109

6.4.4 設置文本域文字 109

動手練 為網頁添加文本交互行為 109

6.5 表單交互行為 110

6.5.1 跳轉菜單 110

6.5.2 檢查表單 110

綜合實戰：提升購物網頁交互性 111

新手答疑 114

第7章  創建動態網頁

7.1 使用表單 116

7.1.1 認識表單 116

7.1.2 基本表單對象 116

7.2 文本類表單 117

7.2.1 文本 117

7.2.2 密碼 118

7.2.3 文本區域 118

動手練 製作科技網站登錄頁 119

7.3 選擇類表單 121

7.3.1 單選按鈕和單選按鈕組 121

7.3.2 復選框和復選框組 122

7.3.3 選擇 123

7.4 其他常用表單 123

7.4.1  “提交”和“重置”按鈕 123

7.4.2 文件 124

動手練 製作旅社預訂頁 124

綜合實戰：設計知識競賽網頁 128

新手答疑 132

第8章  網頁模板與庫

8.1 創建模板 134

8.1.1 直接創建模板 134

8.1.2 從現有網頁中創建模板 134

動手練 製作服裝網頁模板 135

8.2 管理和使用模板 136

8.2.1 編輯模板 136

8.2.2 應用模板 137

8.2.3 從模板中分離 138

8.2.4 更新頁面 138

動手練 應用服裝網頁模板 138

8.3 庫項目 141

8.3.1 創建庫項目 141

8.3.2 應用庫項目 142

8.3.3 編輯和更新庫項目 143

綜合實戰：製作自然科普網頁模板並應用 144

新手答疑 148

第9章  網頁動畫基礎知識

9.1 Animate工作界面 150

9.2 文檔基本操作 151

9.2.1 新建文檔 151

9.2.2 設置文檔屬性 152

9.2.3 打開已有文檔 152

9.2.4 導入素材 152

9.2.5 保存文檔 153

9.2.6 測試與發布動畫 153

動手練 導出網頁可用GIF動畫 155

9.3 繪制矢量圖形 156

9.3.1 輔助繪圖工具 156

9.3.2 繪制線條 157

9.3.3 繪制簡單圖形 158

9.3.4 繪制復雜圖形 161

9.3.5 設計圖形色彩 162

9.3.6 編輯所繪圖形 164

動手練 繪制雪花造型豐富網頁 168

綜合實戰：繪制電視機網頁圖標 169

新手答疑 172

第10章   網頁動畫的製作

10.1 時間軸與圖層 174

10.1.1 認識時間軸 174

10.1.2 圖層的基本操作 174

10.1.3 幀的基本操作 176

動手練 網頁標題文字跳動動畫 178

10.2 元件 180

10.2.1 元件的類型 180

10.2.2 創建元件 181

10.2.3 編輯元件 182

10.2.4 實例的創建與編輯 183

動手練 頁面文字出現動畫 184

10.3 庫 187

10.3.1 認識“庫”面板 187

10.3.2 重命名庫項目 187

10.3.3 創建文件夾 187

10.4   動畫的製作 188

10.4.1 逐幀動畫 188

10.4.2 補間動畫 188

10.4.3 引導動畫 190

10.4.4 遮罩動畫 191

10.4.5  交互動畫 191

動手練 網頁遮罩動畫 194

綜合實戰：製作網頁輪播圖動畫 197

新手答疑 200

第11章  網頁特效的製作

11.1 文本的應用 202

11.1.1 文本類型 202

11.1.2 設置文字屬性 203

11.1.3 設置段落格式 203

11.1.4 創建文本鏈接 204

動手練 文字網站文字變形動畫 204

11.2 濾鏡的應用 205

11.2.1 認識濾鏡 205

11.2.2 編輯濾鏡 206

動手練 網頁鏤空裝飾文字 207

11.3 音視頻的應用 207

11.3.1 音視頻文件格式 207

11.3.2 導入聲音 208

11.3.3 編輯優化聲音 209

11.3.4 導入視頻文件 211

11.3.5  編輯處理視頻 212

動手練 製作網頁裝飾性小視頻 212

綜合實戰：製作音頻播放頁面 214

新手答疑 216

第12章  網頁圖像基礎知識

12.1 Photoshop軟件簡介 218

12.1.1 Photoshop工作界面 218

12.1.2 自定義圖像窗口 219

12.2 編輯圖像文檔 220

12.2.1 圖像文檔管理 220

12.2.2 圖像尺寸調整 222

12.2.3 畫布尺寸調整 222

12.2.4 裁剪工具 222

動手練 裁剪網頁圖像 223

12.3 頁面佈局工具 224

12.3.1 標尺 224

12.3.2 網格 224

12.3.3 參考線 224

12.4 網頁圖像基礎知識 225

12.4.1 位圖與矢量圖 225

12.4.2 分辨率 225

12.4.3 圖像格式 226

12.4.4 圖像顏色模式 226

綜合實戰：為網頁圖像添加邊框 227

新手答疑 228

第13章  網頁圖像的處理

13.1 創建與編輯選區 230

13.1.1 創建選區 230

13.1.2 編輯選區 231

動手練 合成奇幻網頁圖像 233

13.2 修改圖像 234

13.2.1 橡皮擦工具組 234

13.2.2 圖章工具組 235

13.2.3 修復工具組 236

動手練 修復網頁圖像 237

13.3 圖層與蒙版 238

13.3.1 圖層的基本操作 238

13.3.2 圖層樣式的運用 241

13.3.3 圖層的混合模式 242

13.3.4 圖層蒙版的操作 243

動手練 合成趣味網頁圖像 245

13.4 調整網頁圖像 248

12.4.1 色彩三要素 248

12.4.2 常用圖像調整命令 249

12.4.3 調整圖層 250

動手練 網頁圖像調色 251

13.5 運用濾鏡增強網頁圖像的效果 253

13.5.1 使用濾鏡庫 253

13.5.2 風格化濾鏡組 253

13.5.3 模糊濾鏡組 254

13.5.4 扭曲濾鏡組 255

13.5.5 像素化濾鏡組 256

動手練 網頁圖像內容添加 257

綜合實戰：製作線上課程封面 258

新手答疑 262

第14章  網頁元素的設計

14.1 設計網頁文字 264

14.1.1 輸入和編輯文字 264

14.1.2 路徑文字 266

14.2 設計標志和圖標 267

14.2.1 製作網站標志 267

14.2.2 製作頁面圖標 268

14.3 設計按鈕和導航條 269

14.3.1 繪制網頁按鈕 269

動手練 製作下載按鈕 269

14.3.2 繪制網頁導航條 271

動手練 製作電影網站首頁導航條 271

14.4 設計網頁廣告 273

14.4.1 製作Banner 273

動手練 製作茶文化網站首頁Banner 273

14.4.2 製作網頁通欄廣告 274

動手練 製作鞋類產品促銷通欄廣告 274

14.5 設計網頁並輸出 276

14.5.1 製作網站首頁 276

動手練 製作美食網站首頁 277

14.5.2 創建切片 281

動手練 創建美食網站首頁切片 281

14.5.3 優化導出切片 282

動手練 導出美食網站首頁切片 282

綜合實戰：繪制咖啡網站標志 284

新手答疑 286

附贈   HTML 5知識手冊

（本部分內容請掃碼查看電子文檔）

?設計之下，

?每次點擊都有意義。