《網頁設計基礎培訓教程》是2016年人民郵電出版社出版的圖書。
基本介紹
- 中文名：網頁設計基礎培訓教程
- 作者：數字藝術教育研究室
- 出版社：人民郵電出版社
- 出版時間：2016年
- ISBN：9787115440426
內容簡介,圖書目錄,
內容簡介
本書章節條理清晰，文字通俗易懂，全面介紹了每一款軟體的基本操作方法和相關知識點，並配以精美的案例進行實踐性的講解。通過介紹一個網站的整體製作，向讀者展示了如何結合這3款軟體製作出的網頁作品。本書在內容安排上深入淺出，採用從基礎出發再到專業製作的講述方式，使讀者能獲得更加有效的學習效果。全書共分19章，其中包括了解網頁設計、Photoshop CC入門、使用Photoshop處理網頁文本、修改網頁圖像的形狀和顏色、繪製網頁元素、網頁動畫製作與切片輸出、Flash CC入門、掌握Flash繪圖技法、基礎Flash動畫製作、高級Flash動畫製作、廣告文字動畫和按鈕動畫、Dreamweaver CC入門、在網頁中插入基礎網頁元素、創建網頁連結、在網頁中運用多媒體元素、CSS樣式與DIV+CSS布局、製作網頁表單、為網頁添加特效、製作社區類網站等內容。本書配套光碟中提供了書中所有實例的源檔案和相關素材，並免費提供案例的視頻教程和配套課程的PPT資源下載，方便讀者學習和參考。本書適合作為想要從事網頁設計工作的讀者朋友和廣大網頁設計愛好者的教材，同時也適合高等院校相關專業學生和各類培訓班學生的閱讀參考。
圖書目錄
目 錄
了解網頁設計篇
第1章 了解網頁設計 13
1.1 什麼是網頁設計 14
1.1.1 網頁設計概述 14
1.1.2 網頁設計中的術語 15
1.2 網頁設計常用軟體和技術 17
1.2.1 網頁圖像處理軟體——Photoshop CC 17
1.2.2 網頁動畫製作軟體——Flash CC 17
1.2.3 網頁編輯製作軟體——Dreamweaver CC 18
1.2.4 網頁標記語言——HTML 18
1.2.5 網頁特效腳本語言——JavaScript 19
1.3 “網頁三劍客”的關係 19
1.4 網站建設的基本流程 20
1.4.1 前期網站策劃 20
1.4.2 規劃站點結構 20
1.4.3 收集網站相關素材 20
1.4.4 網頁的版式與布局分析 20
1.4.5 確定網頁的主色調 21
1.4.6 設計網站頁面 21
1.4.7 切割和最佳化網頁圖像 22
1.4.8 製作網站HTML頁面 22
1.4.9 開發動態網站功能模組 22
1.4.10 申請域名和伺服器空間 22
1.4.11 測試並上傳網站 22
1.4.12 網站的更新與維護 22
Photoshop CC篇
第2章 Photoshop CC入門 23
2.1 “網頁三劍客”之Photoshop 24
2.1.1 選擇合適的網頁圖像處理軟體 24
2.1.2 了解網頁圖像處理軟體——Photoshop 24
2.2 認識Photoshop CC工作界面 25
2.3 檔案的基本操作 25
2.3.1 課堂案例——新建一個網頁常用尺寸的文檔 26
2.3.2 新建檔案 27
2.3.3 打開檔案 29
2.3.4 保存檔案 29
2.3.5 導入檔案 29
2.3.6 置入檔案 29
2.3.7 導出檔案 30
2.3.8 關閉檔案 30
2.4 圖像編輯輔助操作 31
2.4.1 課堂案例——在Photoshop中查看網頁圖像 31
2.4.2 使用標尺和參考線 32
2.4.3 課堂案例—校正傾斜圖像 33
2.4.4 使用“裁剪工具” 34
2.4.5 使用“裁切”命令 35
2.5 調整網頁圖像 35
2.5.1 課堂案例—修改網頁圖像大小 35
2.5.2 “圖像大小”對話框 36
2.5.3 “畫布大小”對話框 37
2.6 課堂練習——製作鏡面投影效果 38
2.7 課後習題——裁剪網頁圖像 38
第3章 使用Photoshop CC處理網頁文本 39
3.1 輸入文本 40
3.1.1 課堂案例—輸入廣告文字 40
3.1.2 文字工具組 41
3.1.3 文字工具的“選項”欄 41
3.2 編輯文本 42
3.2.1 課堂案例—製作淘寶促銷廣告 42
3.2.2 “字元”面板 45
3.3 製作特殊文字效果 46
3.3.1 課堂案例—製作變形廣告文字 46
3.3.2 創建變形文字 48
3.3.3 課堂案例——製作路徑文字 49
3.3.4 路徑文字 50
3.4 使用“圖層”面板 50
3.4.1 課堂案例——製作遊戲網站導航 50
3.4.2 “圖層”面板 53
3.4.3 圖層的基本操作 54
3.5 圖層樣式 55
3.5.1 課堂案例——使用圖層樣式製作網頁廣告文字 55
3.5.2 添加圖層樣式 57
3.6 課堂練習——製作網站導航選單 58
3.7 課後習題——製作網頁圖文混排 58
第4章 修改網頁圖像的形狀和顏色 59
4.1 創建與編輯選區 60
4.1.1 課堂案例——製作精美網站促銷廣告 60
4.1.2 選框工具組 63
4.1.3 課堂案例——去除圖像不需要的內容 63
4.1.4 套索工具組 65
4.1.5 魔棒工具組 65
4.1.6 修改選區 65
4.2 修改圖像 66
4.2.1 課堂案例——使用仿製圖章工具複製圖像 67
4.2.2 圖章工具組 68
4.2.3 橡皮擦工具組 69
4.2.4 課堂案例——去除水印 69
4.2.5 修復工具組 71
4.3 調整網頁圖像的顏色 71
4.3.1 課堂案例——調整網頁中的圖像 72
4.3.2 自動調整命令 73
4.3.3 “亮度 對比度”命令 73
4.3.4 課堂案例——調整網站廣告的色調 73
4.3.5 “色相 飽和度”命令 75
4.3.6 課堂案例——替換圖像顏色 75
4.3.7 “替換顏色”命令 77
4.4 課堂練習——調整網站廣告效果 77
4.5 課後習題——匹配網站廣告顏色 78
第5章 繪製網頁元素 79
5.1 基本繪圖工具 80
5.1.1 課堂案例——設計網站廣告圖片 80
5.1.2 畫筆工具 82
5.1.3 鉛筆工具 83
5.2 矢量繪圖工具 83
5.2.1 課堂案例——製作網站水晶質感按鈕 83
5.2.2 矩形工具 87
5.2.3 橢圓工具 88
5.2.4 圓角矩形工具 88
5.2.5 多邊形工具 88
5.2.6 直線工具 89
5.2.7 自定形狀工具 89
5.3 鋼筆工具 89
5.3.1 課堂案例——設計教育網站Logo 90
5.3.2 鋼筆工具 94
5.3.3 添加和刪除錨點 95
5.3.4 課堂案例——設計網站廣告頁面 95
5.3.5 選擇路徑與錨點 101
5.3.6 調整路徑 101
5.3.7 變換路徑 102
5.4 課堂練習——設計網站實用圖示 102
5.5 課後習題——設計企業網站頁面 103
第6章 網頁動畫製作與切片輸出 104
6.1 創建與編輯切片 105
6.1.1 課堂案例——為網頁創建切片 105
6.1.2 創建切片 106
6.1.3 選擇和移動切片 106
6.1.4 刪除切片 107
6.2 圖像最佳化與輸出 107
6.2.1 課堂案例——創建切片並輸出網頁 107
6.2.2 最佳化圖像 109
6.2.3 輸出圖像 109
6.3 創建Gif動畫 110
6.3.1 課堂案例——創建網頁Gif動畫 110
6.3.2 認識“時間軸”面板 114
6.4 課堂練習——將圖片輸出為HTML網頁 116
6.5 課後習題——製作Gif廣告條 116
Flash CC篇
第7章 Flash CC入門 117
7.1 “網頁三劍客”之Flash 118
7.1.1 Flash動畫基礎 118
7.1.2 Flash動畫的套用及發展背景 118
7.2 Flash CC工作界面 120
7.2.1 課堂案例——自定義Flash CC工作區 121
7.2.2 認識Flash CC工作界面 122
7.2.3 選擇適合的工作區 123
7.3 新建Flash檔案 124
7.3.1 課堂案例——通過Flash模板快速製作動畫 124
7.3.2 “新建文檔”對話框 126
7.3.3 “從模板新建”對話框 126
7.3.4 設定Flash文檔屬性 127
7.4 打開和保存Flash檔案 128
7.4.1 課堂案例——打開Flash檔案 128
7.4.2 保存Flash檔案 129
7.4.3 另外儲存為Flash檔案 129
7.4.4 另外儲存為Flash模板檔案 130
7.4.5 關閉Flash檔案 130
7.5 課堂練習——製作海底世界動畫 130
7.6 課後習題——製作下雨動畫 131
第8章 掌握Flash CC的繪圖技法 132
8.1 使用基本繪圖工具 133
8.1.1 課堂案例——繪製卡通表情 133
8.1.2 矩形工具和基本矩形工具 135
8.1.3 橢圓工具和基本橢圓工具 136
8.1.4 填充顏色和筆觸顏色 137
8.1.5 課堂案例——繪製卡通向日葵 138
8.1.6 多角星形工具 142
8.1.7 線條工具 143
8.1.8 鉛筆工具 143
8.1.9 刷子工具 143
8.1.10 橡皮擦工具 144
8.2 高級繪圖工具 145
8.2.1 課堂案例——繪製可愛雪人 145
8.2.2 鋼筆工具 148
8.2.3 調整錨點和錨點轉換 148
8.2.4 添加和刪除錨點 149
8.3 課堂練習——繪製可愛卡通貓 149
8.4 課後習題——繪製蘋果 149
第9章 基礎Flash動畫製作 151
9.1 逐幀動畫 152
9.1.1 課堂案例——製作人物舞蹈動畫 152
9.1.2 逐幀動畫的特點 154
9.1.3 幀、過渡幀、關鍵幀、空白關鍵幀 154
9.2 形狀補間動畫 155
9.2.1 課堂案例——製作太陽公公動畫 155
9.2.2 形狀補間動畫的特點 157
9.2.3 認識“時間軸”面板 157
9.2.4 幀的編輯操作 158
9.3 補間動畫 160
9.3.1 課堂案例——文字淡入淡出動畫 160
9.3.2 補間動畫的特點 164
9.3.3 什麼是元件？ 164
9.3.4 元件的類型 164
9.3.5 “動畫預設”面板 164
9.4 傳統補間動畫 164
9.4.1 課堂案例——製作卡通角色入場動畫 165
9.4.2 傳統補間動畫的特點 168
9.4.3 套用濾鏡效果 169
9.5 課堂練習——製作聖誕老人飛入動畫 169
9.6 課後習題——製作圖像切換動畫 170
第10章 高級Flash動畫製作 171
10.1 引導線動畫 172
10.1.1 課堂案例——製作汽車路徑動畫 172
10.1.2 引導線動畫的特點 174
10.1.3 創建引導層和運動引導層 174
10.2 遮罩動畫 175
10.2.1 課堂案例——多層次遮罩動畫 175
10.2.2 遮罩動畫的特點 177
10.3 3D動畫 177
10.3.1 課堂案例——製作3D旋轉動畫 177
10.3.2 3D旋轉工具 182
10.3.3 3D平移工具 182
10.4 為動畫添加音樂 183
10.4.1 課堂案例——添加背景音樂 183
10.4.2 Flash中支持的音頻格式 186
10.4.3 支持的音頻類型 187
10.4.4 設定音頻屬性 187
10.5 為動畫導入視頻 188
10.5.1 課堂案例——製作網站視頻廣告 188
10.5.2 Flash中支持的視頻格式 190
10.5.3 “導入視頻”對話框 191
10.6 課堂練習——製作3D平移動畫 191
10.7 課後習題——製作圖像切換遮罩動畫 192
第11章 廣告文字動畫和按鈕動畫 193
11.1 廣告文字動畫 194
11.1.1 課堂案例——製作廣告文字動畫 194
11.1.2 文本類型 196
11.1.3 設定文本屬性 197
11.1.4 移動和選擇文本 197
11.1.5 課堂案例——製作閃爍文字動畫 198
11.1.6 為文本設定超連結 200
11.1.7 分離文本 200
11.2 按鈕動畫 200
11.2.1 課堂案例——製作按鈕選單動畫 201
11.2.2 元件的中心點和註冊點 203
11.2.3 編輯元件 204
11.2.4 課堂案例——製作遊戲按鈕動畫 205
11.2.5 認識“庫”面板 208
11.2.6 管理庫項目 209
11.3 課堂練習——製作發光文字動畫 210
11.4 課後習題——製作翻轉按鈕動畫 210
Dreamweaver CC篇
第12章 Dreamweaver CC入門 211
12.1 “網頁三劍客”之Dreamweaver 212
12.1.1 了解網頁製作軟體——Dreamweaver 212
12.1.2 Dreamweaver在網頁製作方面的優勢 212
12.2 認識Dreamweaver CC工作界面 212
12.3 網頁檔案的基礎操作 213
12.3.1 課堂案例——製作個HTML頁面 214
12.3.2 新建網頁 215
12.3.3 打開網頁 216
12.3.4 預覽網頁 216
12.3.5 保存和關閉網頁 217
12.4 創建站點 218
12.4.1 課堂案例——創建站點並設定遠程伺服器 218
12.4.2 切換站點 220
12.4.3 “管理站點”對話框 220
12.5 課堂練習——創建本地靜態站點 221
12.6 課後習題——在代碼視圖中創建HTML頁面 222
第13章 在網頁中插入基礎網頁元素 223
13.1 設定網頁整體屬性 224
13.1.1 課堂案例——控制歡迎頁面整體外觀 224
13.1.2 設定外觀（CSS） 226
13.1.3 設定外觀（HTML） 226
13.1.4 設定連線（CSS） 227
13.1.5 設定標題（CSS） 227
13.1.6 設定標題和編碼 227
13.1.7 設定跟蹤圖像 228
13.2 在網頁中添加文本 228
13.2.1 課堂案例——製作關於我們頁面 229
13.2.2 在網頁中輸入文本的方法 230
13.2.3 設定文本屬性 230
13.2.4 插入水平線 231
13.2.5 插入時間 232
13.2.6 插入特殊字元 232
13.3 在網頁中創建項目列表和編號列表 232
13.3.1 課堂案例——製作新聞列表 233
13.3.2 設定項目列表和編號列表屬性 235
13.4 在網頁中插入圖像 236
13.4.1 課堂案例——製作遊戲介紹頁面 236
13.4.2 網頁圖像格式 238
13.4.3 設定圖像屬性 238
13.4.4 “插入滑鼠經過圖像”對話框 240
13.5 課堂練習——製作圖像頁面 240
13.6 課後習題——製作文本網頁 240
第14章 創建網頁連結 242
14.1 創建普通超連結 243
14.1.1 課堂案例——創建文字和圖像連結 243
14.1.2 相對路徑 245
14.1.3 路徑 245
14.1.4 外部連結和內部連結 246
14.1.5 超連結打開方式 246
14.2 創建特殊超連結 246
14.2.1 課堂案例——創建空連結和下載連結 247
14.2.2 空連結 248
14.2.3 下載連結 248
14.2.4 課堂案例——創建E-mail連結 248
14.2.5 電子郵件連結 250
14.2.6 腳本連結 250
14.2.7 圖像熱點工具 250
14.3 課堂練習——創建腳本連結 250
14.4 課後習題——創建圖像熱點連結 251
第15章 在網頁中運用多媒體元素 252
15.1 HTML5 Audio和HTML5 Video 253
15.1.1 課堂案例——為網頁插入HTML5視頻和音頻 253
15.1.2 插入HTML5 Audio並設定屬性 255
15.1.3 插入HTML5 Video並設定屬性 256
15.2 在網頁中插入Flash動畫 256
15.2.1 課堂案例——製作Flash網頁 257
15.2.2 設定Flash屬性 258
15.3 在網頁中插入FLV視頻 259
15.3.1 課堂案例——製作FLV視頻頁面 259
15.3.2 “插入FLV視頻”對話框 260
15.4 在網頁中插入普通視頻 261
15.4.1 課堂案例——在網頁中插入視頻 261
15.4.2 網頁中常用視頻格式 263
15.4.3 在網頁中添加背景音樂 263
15.4.4 網頁中支持的音頻格式 263
15.5 課堂練習——為網頁添加背景音樂 264
15.6 課後習題——製作Flash歡迎頁 264
第16章 CSS樣式與Div+CSS布局 265
16.1 創建CSS樣式 266
16.1.1 課堂案例——創建標籤CSS樣式和類CSS樣式 266
16.1.2 什麼是CSS樣式 268
16.1.3 CSS樣式的基本寫法 269
16.1.4 CSS樣式的優越性 269
16.1.5 課堂案例——創建ID CSS樣式和複合CSS樣式 269
16.1.6 全新的“CSS設計器”面板 272
16.1.7 編輯CSS樣式 273
16.2 豐富的CSS樣式設定 273
16.2.1 課堂案例——製作圖像展示頁面 274
16.2.2 布局樣式詳解 275
16.2.3 課堂案例——製作網頁文本介紹 276
16.2.4 文本樣式詳解 277
16.2.5 課堂案例——為網頁中的圖像添加框線效果 278
16.2.6 框線樣式詳解 280
16.2.7 課堂案例——設定網頁背景圖像 280
16.2.8 背景樣式詳解 282
16.2.9 課堂案例——美化新聞列表 283
16.2.10 其他樣式詳解 284
16.3 CSS樣式的特殊套用 284
16.3.1 課堂案例——製作遊戲網站新聞 284
16.3.2 CSS類選區 286
16.3.3 課堂案例——在網頁中實現特殊字型效果 286
16.3.4 Web字型 288
16.3.5 Adobe Edge Web Fonts 288
16.4 Div+CSS布局 289
16.4.1 課堂案例——CSS盒模型 289
16.4.2 了解CSS盒模型 291
16.4.3 CSS盒模型要點 291
16.5 課堂練習——創建網頁中超連結CSS樣式 292
16.6 課後習題——網頁布局中的空白邊疊加 292
第17章 製作網頁表單 293
17.1 在網頁中套用常用表單元素 294
17.1.1 課堂案例——製作用戶登錄頁面 294
17.1.2 常用表單元素 298
17.1.3 文本域屬性設定 299
17.1.4 圖像按鈕屬性設定 300
17.1.5 課堂案例——製作網站投票 301
17.1.6 單選按鈕屬性設定 303
17.1.7 複選框屬性設定 303
17.1.8 課堂案例——製作搜尋欄 303
17.1.9 選擇域屬性設定 306
17.1.10 按鈕、重置按鈕和提交按鈕 306
17.2 在網頁中運用HTML5表單元素 307
17.2.1 課堂案例——製作網站留言表單頁面 307
17.2.2 HTML5表單元素 309
17.2.3 電子郵件 310
17.2.4 Url 311
17.2.5 Tel 311
17.3 課堂練習——製作登錄視窗 312
17.4 課後習題——製作用戶註冊頁面 312
第18章 為網頁添加特效 313
18.1 為網頁添加行為 314
18.1.1 課堂案例——為網頁添加彈出信息 314
18.1.2 什麼是事件 315
18.1.3 什麼是動作 316
18.1.4 課堂案例——為網頁添加彈出廣告 316
18.1.5 “打開瀏覽器視窗”對話框 317
18.2 為網頁添加文本行為 317
18.2.1 課堂案例——為網頁添加狀態欄文本 317
18.2.2 設定容器的文本 318
18.2.3 設定文本域文字 319
18.2.4 設定框架文本 319
18.3 為網頁添加jQuery效果 319
18.3.1 課堂案例——實現網頁元素的動態隱藏 320
18.3.2 了解jQuery效果 321
18.4 課堂練習——檢查網頁表單 322
18.5 課後習題——改變網頁元素的屬性 322
網站案例篇
第19章 製作社區類網站 324
19.1 設計社區類網站首頁面 325
19.2 製作網站Flash動畫 329
19.3 製作社區網站頁面 336
