內容簡介
《Dreamweaver CC+Flash CC+Photoshop CC網頁設計案例課堂(第2版)》以零基礎講解為宗旨,用實例引導讀者深入學習,採取“基礎入門→網頁內容設計→網頁元素設計→網頁動畫設計→項目開發”的講解模式,深入淺出地講解網頁設計的各項技術及實戰技能。《Dreamweaver CC+Flash CC+Photoshop CC網頁設計案例課堂(第2版)》第1篇“基礎入門”主要內容包括網頁設計與網站建設基礎、網頁配色與網站布局等;第2篇“網頁內容設計”主要內容包括使用Dreamweaver CC創建站點、使用文本豐富網頁內容、使用圖像與多媒體網頁元素、設計網頁中的超連結、使用網頁表單和行為等;第3篇“網頁元素設計”主要內容包括調整與修飾圖像、製作網頁特效文字、製作網頁按鈕與導航條、製作網頁特效邊線與背景、製作網頁Logo與網頁Banner等;
作者簡介
劉春茂,本科畢業於上海復旦大學,碩士畢業於清華大學。曾在美國IBM公司移動產品開發組從事Android平台套用的開發。
圖書目錄
第1篇 基 礎 入 門
第1章 開啟網頁設計之路——網頁設計
與網站建設基礎 3
1.1 認識網頁和網站 4
1.1.1 什麼是網頁 4
1.1.2 什麼是網站 5
1.1.3 網站的種類和特點 5
1.2 網頁的相關概念 7
1.2.1 網際網路與全球資訊網 7
1.2.2 瀏覽器與HTML 7
1.2.3 URL、域名與IP位址 8
1.2.4 上傳和下載 8
1.3 網頁的HTML構成 9
1.3.1 文檔標記 9
1.3.2 頭部標記 10
1.3.3 主體標記 10
1.4 HTML的常用標記 11
1.4.1 標題標記 11
1.4.2 段落標記 11
1.4.3 換行標記 12
1.4.4 連結標記 13
1.4.5 列表標記 14
1.4.6 圖像標記 17
1.4.7 表格標記 19
1.4.8 表單標記 21
1.5 綜合案例——製作日程表 22
1.6 疑難解惑 25
第2章 整體把握網站結構——網頁配色與網站布局 27
2.1 善用色彩設計網頁 28
2.1.1 認識色彩 28
2.1.2 確定網站的主題色 29
2.1.3 網頁中色彩的搭配 31
2.1.4 網頁元素的色彩搭配 32
2.1.5 網頁色彩搭配的技巧 34
2.2 常見網站的布局結構 36
2.2.1 “國”字型 36
2.2.2 標題正文型 37
2.2.3 左右框架型 37
2.2.4 上下框架型 37
2.2.5綜合框架型 38
2.2.6封面型 38
2.2.7Flash型 38
2.3綜合案例——定位網站頁面的框架 39
2.4疑難解惑 40
第2篇網頁內容設計
第3章磨刀不誤砍柴工——使用
DreamweaverCC創建站點 43
3.1認識DreamweaverCC 44
3.1.1啟動DreamweaverCC 44
3.1.2認識DreamweaverCC的工作區 45
3.1.3體驗DreamweaverCC的新增功能 47
3.2創建站點 50
3.2.1案例1——創建本地站點 50
3.2.2案例2——創建遠程站點 51
3.3管理站點 52
3.3.1案例3——打開站點 52
3.3.2案例4——編輯站點 52
3.3.3案例5——刪除站點 53
3.3.4案例6——複製站點 54
3.3.5案例7——導出與導入站點 54
3.4操作站點檔案及資料夾 55
3.4.1案例8——創建資料夾 56
3.4.2案例9——創建檔案 56
3.4.3案例10——檔案或資料夾的移動和複製 57
3.4.4案例11——刪除檔案或資料夾 57
3.5綜合案例——創建本地站點 58
3.6疑難解惑 59
第4章製作我的第一個網頁——使用文本豐富網頁內容 61
4.1網頁文檔的基本操作 62
4.1.1案例1——創建網頁 62
4.1.2案例2——頁面屬性 62
4.1.3案例3——保存網頁 64
4.1.4案例4——打開網頁 65
4.1.5案例5——預覽網頁 66
4.2添加網頁內容 67
4.2.1案例6——插入文字 67
4.2.2案例7——設定字型 68
4.2.3案例8——設定字號 68
4.2.4案例9——設定字型顏色 69
4.2.5案例10——設定字型樣式 70
4.2.6案例11——編輯段落 72
4.2.7案例12——創建項目列表 77
4.3使用特殊文本添加網頁內容 79
4.3.1案例13——插入換行符 79
4.3.2案例14——插入水平線 79
4.3.3案例15——插入日期 80
4.3.4案例16——插入特殊字元 81
4.4綜合案例——製作圖文並茂的網頁 82
4.5疑難解惑 84
第5章有圖有真相——使用圖像與多媒體網頁元素 87
5.1常用圖像格式 88
5.1.1GIF格式 88
5.1.2JPEG格式 88
5.1.3PNG格式 89
5.2用圖像美化網頁 89
5.2.1案例1——插入圖像 89
5.2.2案例2——設定圖像的屬性 91
5.2.3案例3——設定圖像對齊方式 93
5.2.4案例4——剪裁需要的圖像 94
5.2.5案例5——調整圖像的亮度與對比度 95
5.2.6案例6——設定圖像的銳化效果 96
5.3插入其他圖像元素 97
5.3.1案例7——插入滑鼠經過圖像 97
5.3.2案例8——插入圖像占位符 99
5.4在網頁中插入多媒體 100
5.4.1案例9——插入背景音樂 100
5.4.2案例10——插入Flash動畫 101
5.4.3案例11——插入FLV視頻 102
5.4.4案例12——插入HTML5音頻 104
5.4.5案例13——插入HTML5視頻 105
5.5綜合案例1——製作精彩的多媒體網頁 107
5.6綜合案例2——在代碼視圖中插入背景音樂 109
5.7疑難解惑 110
第6章不在網頁中迷路——設計網頁中的超連結 113
6.1超級連結 114
6.1.1連結的概念 114
6.1.2常規連結 114
6.1.3連結的類型 115
6.2連結路徑 116
6.2.1什麼是URL 116
6.2.2絕對路徑 116
6.2.3文檔相對路徑 117
6.2.4根相對路徑 117
6.3創建超級連結的方法 117
6.3.1案例1——使用選單命令創建連結 117
6.3.2案例2——使用【屬性】面板創建連結 118
6.3.3案例3——使用【指向檔案】按鈕創建連結 118
6.4創建不同種類的網頁超連結 119
6.4.1案例4——添加文本連結 119
6.4.2案例5——添加圖像連結 120
6.4.3案例6——創建外部連結 121
6.4.4案例7——創建錨記連結 121
6.4.5案例8——創建圖像熱點連結 123
6.4.6案例9——創建電子郵件連結 124
6.4.7案例10——創建下載檔案的連結 125
6.4.8案例11——創建空連結 126
6.4.9案例12——創建腳本連結 126
6.6疑難解惑 128
第7章讓網頁互動起來——使用網頁表單和行為 129
7.1認識表單 130
7.1.1什麼是表單 130
7.1.2認識表單對象 130
7.1.3案例1——插入表單 133
7.1.4案例2——設定表單屬性 134
7.2常用表單對象的套用 135
7.2.1案例3——插入文本域 135
7.2.3案例5——插入複選框 137
7.2.4案例6——插入單選按鈕 138
7.2.5案例7——插入下拉選單 138
7.2.6案例8——插入滾動列表 139
7.2.7案例9——插入按鈕 140
7.2.8案例10——插入圖像按鈕 140
7.2.9案例11——插入檔案上傳域 141
7.3認識行為 142
7.3.1行為的概念 142
7.3.2案例12——打開【行為】面板 143
7.4常用內置行為的套用 143
7.4.1案例13——交換圖像 143
7.4.2案例14——彈出信息 145
7.4.3案例15——打開瀏覽器
視窗 146
7.4.4案例16——檢查表單行為 148
7.4.5案例17——設定狀態欄
文本 149
7.5綜合案例——使用表單製作留言本 151
7.6疑難解惑 154
第3篇網頁元素設計
第8章網頁圖像說變就變——調整與修飾圖像 157
8.1圖像色調的調整 158
8.1.1案例1——調整圖像的亮度與對比度 158
8.1.2案例2——使用【色階】命令調整圖像 158
8.1.3案例3——使用【曲線】命令調整圖像 162
8.1.4案例4——調整圖像的曝光度 165
8.2圖像色彩的調整 166
8.2.1案例5——使用【色相/飽和度】命令 166
8.2.2案例6——使用【自然飽和度】命令 168
8.2.3案例7——使用【色彩平衡】命令 168
8.2.4案例8——使用【黑白】命令 169
8.2.5案例9——使用【照片濾鏡】命令 170
8.2.6案例10——使用【通道混合器】命令 171
8.2.7案例11——使用【匹配顏色】命令 172
8.2.8案例12——使用【替換顏色】命令 174
8.2.9案例13——使用【可選顏色】命令 175
8.2.10案例14——使用【陰影/高光】命令 177
8.3修復圖像中的污點與瑕疵 178
8.3.1案例15——修復圖像中的污點 178
8.3.2案例16——修復圖像中的瑕疵 179
8.3.3案例17——修復圖像選中的區域 179
8.3.4案例18——內容感知移動工具 180
8.3.5案例19——消除照片中的紅眼 181
8.4通過圖像或圖案修飾圖像 182
8.4.1案例20——通過複製圖像修飾圖像 182
8.4.2案例21——通過圖案修飾圖像 183
8.5通過橡皮擦修飾圖像 183
8.5.1案例22——擦除圖像中指定的區域 184
8.5.2案例23——擦除圖像中的指定顏色 184
8.5.3案例24——擦除圖像中相近的顏色 185
8.6修飾圖像中的細節 186
8.6.1案例25——修飾圖像中生硬的邊緣 186
8.6.2案例26——提高圖像的清晰度 187
8.6.3案例27——通過塗抹修飾圖像 187
8.7通過調色修飾圖像 188
8.7.1案例28——減淡工具和加深工具 188
8.7.2案例29——改變圖像色彩的飽和度 189
8.8綜合案例——製作放射線背景圖 189
8.9疑難解惑 190
第9章有情有義的文字——製作網頁特效文字 191
9.1文字的類型 192
9.2輸入文字 192
9.2.1案例1——通過文字工具輸入文字 192
9.2.2案例2——通過文字蒙版工具輸入文字狀選區 194
9.2.3案例3——轉換點文字和段落文字 195
9.2.4案例4——轉換文字排列方向 195
9.3設定文字格式 196
9.3.1案例5——通過選項欄設定格式 196
9.3.2案例6——通過【字元】面板設定文字格式 197
9.3.3案例7——通過【段落】面板設定段落格式 198
9.3.4案例8——設定字元樣式和段落樣式 200
9.3.5案例9——查找和替換文本 200
9.4文字轉換 201
9.4.1案例10——將文字轉換為工作路徑 201
9.4.2案例11——將文字轉換為形狀 202
9.4.3案例12——將文字轉換為圖像 202
9.5製作常見特效文字 203
9.5.1案例13——製作路徑文字 203
9.5.2案例14——製作變形文字 204
9.5.3案例15——製作燃燒文字特效 206
9.6綜合案例——製作空心輪廓字 208
9.7疑難解惑 210
第10章網頁中的路標——製作網頁按鈕與導航條 211
10.1按鈕與導航條的設計原則 212
10.1.1網頁按鈕的設計注意事項 212
10.1.2網頁導航條的設計注意事項 212
10.2製作按鈕 213
10.2.1案例1——製作普通按鈕 213
10.2.2案例2——製作迷你按鈕 214
10.2.3案例3——製作水晶按鈕 217
10.2.4案例4——製作木紋按鈕 221
10.3製作導航條 224
10.3.1案例5——製作橫嚮導航條 224
10.3.2案例6——製作垂直導航條 226
10.4綜合案例——製作水晶風格網站導航條 228
10.5疑難解惑 234
第11章網頁中迷人的藍海——製作網頁特效邊線與背景 235
11.1製作裝飾邊線 236
11.1.1案例1——製作裝飾虛線 236
11.1.2案例2——製作內嵌線條 238
11.1.3案例3——製作斜紋線條 239
11.2製作網頁背景圖片 241
11.2.1案例4——製作漸變背景圖片 241
11.2.2案例5——製作透明背景圖像 244
11.3綜合案例——製作夢幻星光網頁背景 245
11.4疑難解惑 249
第12章網頁中的標誌與旗幟——製作網頁Logo與網頁Banner 251
12.1網頁Logo與Banner概述 252
12.1.1網頁Logo設計標準 252
12.1.2網頁Logo的標準尺寸 253
12.1.3網頁Logo的一般形式 254
12.1.4網頁Banner的標準尺寸 255
12.1.5Banner設計注意要點 255
12.2製作文字Logo 255
12.2.1案例1——製作背景 255
12.2.2案例2——製作文字內容 256
12.2.3案例3——繪製自定義形狀 257
12.2.4案例4——美化文字Logo 258
12.3製作圖案Logo 260
12.3.1案例5——製作背景 260
12.3.2案例6——製作圖案效果 262
12.4製作英文Banner 264
12.4.1案例7——製作Banner背景 264
12.4.2案例8——製作Banner底紋 265
12.4.3案例9——製作文字特效 267
12.5製作中文Banner 267
12.5.1案例10——輸入特效文字 267
12.5.2案例11——將輸入的文字設定為3D效果 268
12.5.3案例12——製作Banner背景 270
12.6綜合案例1——製作圖文結合Logo 271
12.7綜合案例2——製作圖文結合Banner 275
12.8疑難解惑 277
第4篇網頁動畫設計
第13章讓網頁活靈活現——製作簡單網頁動畫元素 281
13.1Flash的基本功能 282
13.1.1矢量繪圖 282
13.1.2動畫設計 282
13.1.3強大的編程功能 282
13.2時間軸、幀和圖層 283
13.2.1什麼是圖層 283
13.2.2時間軸與幀 284
13.3製作簡單動畫 285
13.3.1案例1——製作幀幀動畫 285
13.3.2案例2——製作補間動畫 288
13.3.3案例3——製作遮罩動畫 292
13.3.4案例4——使用動畫預設 294
13.4綜合案例——製作數字倒計時動畫 295
13.5疑難解惑 297
第14章快速組織動畫素材——使用元件和庫 299
14.1創建Flash元件 300
14.1.1元件概述與分類 300
14.1.2案例1——創建圖形元件 300
14.1.3案例2——創建按鈕元件 301
14.1.4案例3——創建影片剪輯元件 304
14.1.5案例4——調用其他文檔中的元件 306
14.2使用實例 306
14.2.1案例5——為實例另外指定一個元件 307
14.2.2案例6——改變實例屬性 307
14.3使用【庫】面板 310
14.3.1案例7——認識【庫】面板 310
14.3.2案例8——庫的管理與使用 311
14.4綜合案例——製作絢麗網頁按鈕 313
14.5疑難解惑 317
第15章網頁元素的動態互動——創建互動式動畫 319
15.1ActionScript概述 320
15.1.1ActionScript基本術語 320
15.1.2【動作】面板 321
15.2使用ActionScript製作動畫特效 322
15.2.1案例1——製作按鈕切換圖片效果 322
15.2.2案例2——製作按鈕切換背景顏色效果 327
15.2.3案例3——製作星光閃爍效果 332
15.3Flash常用組件的使用 336
15.3.1案例4——組件的添加與刪除 337
15.3.2案例5——Button(按鈕)組件 338
15.3.3案例6——CheckBox(複選框)組件 339
15.3.4案例7——ComboBox(下拉列表)組件 340
15.3.5案例8——List平鋪滾動組件 342
15.3.6案例9——RadioButton(單選按鈕)組件 344
15.3.7案例10——ProgressBar(載入進度)組件 346
15.3.8案例11——ScrollPane(滾動條視窗)組件 347
15.4綜合案例——製作飄雪效果 349
15.5疑難解惑 352
第16章讓網頁動起來——製作動態網站的Logo與Banner 353
16.1製作滾動文字Logo 354
16.1.1設定文檔屬性 354
16.1.2製作文字元件 354
16.1.3製作滾動效果 355
16.2製作產品Banner 357
16.2.1製作文字動畫 357
16.2.2製作文字遮罩動畫 359
16.2.3製作圖片動畫 360
16.3疑難解惑 362
第17章動態網頁元素的輸出——Flash動畫的測試與發布 363
17.1Flash動畫的最佳化 364
17.1.1案例1——動畫的最佳化 364
17.1.2案例2——動畫的測試 365
17.2輸出前的格式設定 366
17.2.1案例3——Flash輸出的設定 366
17.2.2案例4——HTML輸出的設定 367
17.2.3案例5——GIF輸出的設定 369
17.2.4案例6——JPEG輸出的設定 370
17.2.5案例7——PNG輸出的設定 371
17.3Flash動畫的發布 372
17.3.1案例8——導出動畫 372
17.3.2案例9——預覽發布動畫 373
17.4疑難解惑 374
第5篇項目開發
第18章讀懂樣式表密碼——使用CSS層疊樣式表 377
18.1初識CSS樣式表 378
18.1.1什麼是CSS 378
18.1.2CSS的3種類型 378
18.1.3CSS的語法格式 379
18.1.4案例1——使用Dreamweaver編寫CSS 380
18.2CSS的使用方式 381
18.2.1案例2——行內樣式 382
18.2.2案例3——內嵌樣式 382
18.2.3案例4——連結樣式 383
18.2.4案例5——導入樣式 385
18.3CSS中的常用樣式 386
18.3.1案例6——使用字型樣式 386
18.3.2案例7——使用文本樣式 390
18.3.3案例8——使用背景樣式 394
18.3.4案例9——設計框線樣式 401
18.3.5案例10——設定列表樣式 405
18.4綜合案例——製作簡單公司主頁 409
18.5疑難解惑 412
第19章架構師的大比拼——利用Div+CSS布局網頁 413
19.1認識並創建層 414
19.1.1什麼是層 414
19.1.2案例1——使用Dreamweaver創建層 414
19.2Div層的定位方法 415
19.2.1盒子模型的概念 415
19.2.2案例2——定義網頁border區域 415
19.2.3案例3——定義網頁padding區域 417
19.2.4案例4——定義網頁margin區域 418
19.3使用CSS排版 421
19.3.1案例5——將頁面用div分塊 421
19.3.2案例6——設定各塊位置 422
19.3.3案例7——用CSS定位 422
19.4常見網頁布局模式 425
19.4.1案例8——網頁單列布局模式 425
19.4.2案例9——網頁1-2-1型布局模式 429
19.4.3案例10——網頁1-3-1型布局模式 432
19.5綜合案例——創建左右布局頁面 435
19.6疑難解惑 438
第20章製作動態網頁基礎——構建動態網站的運行環境 439
20.1PHP基本知識 440
20.1.1PHP的概念 440
20.1.2PHP語言的優勢 440
20.1.3PHP伺服器概述 440
20.2安裝PHP前的準備工作 441
20.2.1軟硬體環境 441
20.2.2案例1——獲取PHP7.1安裝資源包 442
20.3PHP+IIS伺服器的安裝配置 443
20.3.1案例2——IIS簡介及安裝 443
20.3.2案例3——PHP的安裝 444
20.3.3案例4——設定虛擬目錄 447
20.4PHP+Apache伺服器的環境搭建 447
20.4.1Apache簡介 447
20.4.2案例5——關閉原有的網站伺服器 448
20.4.3案例6——安裝Apache 449
20.4.4案例7——將PHP與Apache建立關聯 450
20.5在Windows下使用WampServer組合包 451
20.6綜合案例——測試第一個PHP程式 454
20.7疑難解惑 455
第21章構建動態網站後台數據——使用MySQL資料庫 457
21.1定義一個互動網站 458
21.1.1定義互動網站的重要性 458
21.1.2網頁取得資料庫的原理 458
21.1.3案例1——在DreamweaverCC中定義網站 459
21.2MySQL資料庫的安裝和管理 462
21.2.1案例2——MySQL資料庫的安裝 462
21.2.2案例3——MySQL資料庫的配置 466
21.2.3案例4——phpMyAdmin的安裝 470
21.2.4案例5——MySQL資料庫的建立 471
21.3在網頁中使用MySQL資料庫 477
21.3.1案例6——添加【資料庫】面板 477
21.3.2案例7——建立MySQL資料庫連線 479
21.3.3案例8——綁定記錄集 481
21.4資料庫的備份與還原 484
21.4.1案例9——資料庫的備份 484
21.4.2案例10——資料庫的還原 485
21.5綜合案例——給我的MySQL資料庫加密 486
21.6疑難解惑 487
第22章綜合套用案例——開發網站用戶管理系統 489
22.1系統的功能分析 490
22.1.1規劃網頁結構和功能 490
22.1.2站點檔案規劃 491
22.1.3網頁美工設計 491
22.2資料庫設計與連線 491
22.2.1資料庫設計 492
22.2.2創建資料庫連線 494
22.3用戶登錄模組的設計 496
22.3.1登錄頁面 496
22.3.2登錄成功和登錄失敗頁面的製作 504
22.3.3用戶登錄系統功能的測試 506
22.4用戶註冊模組的設計 507
22.4.1用戶註冊頁面 507
22.4.2註冊成功和註冊失敗頁面 512
22.4.3用戶註冊功能的測試 513
22.5用戶註冊資料修改模組的設計 514
22.5.1修改資料頁面 514
22.5.2更新成功頁面 516
22.5.3修改資料功能的測試 517