內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取“精通網頁設計技法→精通網頁設計藝術→精通網頁元素設計技法→精通網頁動畫設計→綜合網站開發實戰”的講解模式，深入淺出地講解網頁設計的各項技術及實戰技能。

本書第1篇“精通網頁設計技法”主要講解認識Dreamweaver CC、創建網頁中的文本、插入圖像與多媒體、設計網頁超鏈接、表格的應用、使用網頁表單和行為、使用模板和庫等；第2篇“精通網頁設計藝術”主要講解網站配色與布局、使用CSS樣式表美化網頁、網頁布局典型范例等；第3篇“精通網頁元素設計技法”主要講解Photoshop CC基本操作、制作網頁文字特效、制作網頁按鈕與特效框線、制作網頁導航條等；第4篇“精通網頁動畫設計”主要講解制作簡單網頁動畫、使用時間軸、幀和圖層、使用元件和庫、制作動態網站Logo與Banner等；第5篇“綜合網站開發實戰”主要講解Photoshop CC設計網頁、Flash CC設計網頁、Dreamweaver CC開發網站留言系統、設計移動設備類型網頁、網站的發布等；在DVD光盤中贈送了豐富的資源，諸如本書實例源代碼、教學幻燈片、本書精品教學視頻、88個實用類網頁模板、精選的JavaScript實例、HTML5標簽速查手冊、CSS屬性速查表、JavaScript函數速查手冊、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。

本書適合任何想學習網頁設計的人員，無論您是否從事計算機相關行業，是否接觸過網頁設計，通過學習均可快速掌握網頁的設計方法和技巧。

 

前言

"實戰從入門到精通（視頻教學版）"系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書，整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點：

前沿科技

無論是網站建設、數據庫設計還是HTML5、CSS3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。

作者團隊

組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。

學習型案例設計

以技術的實際應用過程為主線，全程采用圖解和同步多媒體結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度，提升學習效率。

為什么要寫這樣一本書

隨著網絡的發展，很多企事業單位和廣大網民對于建立網站的需求越來越強烈，另外對于大中專院校，很多學生需要做網站畢業設計，但是這些讀者又不懂網頁代碼程序，不知道從哪里下手。為此，本書針對這樣的零基礎的讀者，全面帶領讀者學習網頁設計和網站建設的全面知識，讀者在網頁設計和網站建設中遇到的技術，本書中基本上都有詳細講解。通過本書的實訓，讀者可以很快地上手設計網頁和開發網站，提高職業化能力，從而幫助解決公司需求問題。

本書特色

零基礎、入門級的講解

無論您是否從事計算機相關行業，是否接觸過Dreamweaver CC、Photoshop CC和Flash CC網頁設計和動態網站開發，都能從本書中找到最佳起點。

超多、實用、專業的范例和項目

本書在編排上緊密結合深入學習Dreamweaver CC、Photoshop CC和Flash CC網頁設計和開發網站技術的先后過程，從Dreamweaver CC的基本操作開始，逐步帶領大家深入地學習各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者讀起來簡明輕松，操作起來有章可循。

隨時檢測自己的學習成果

每章首頁中，均提供了學習目標，以指導讀者重點學習及學后檢查。

大部分章節最后的“跟我練練手”板塊，均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。

細致入微、貼心提示

本書在講解過程中，各章均使用了“注意”“提示”“技巧”等小欄目，使讀者在學習過程中更清楚地了解相關操作、理解相關概念，并輕松掌握各種操作技巧。

專業創作團隊和技術支持

本書由千谷網絡科技實訓中心提供技術支持。

您在學習過程中遇到任何問題，可加入QQ群（號碼為221376441）進行提問，專家人員會在線答疑。

超值光盤

全程同步教學錄像

涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點。能夠比看書更輕松地掌握書中所有的Dreamweaver CC、Photoshop CC和Flash CC網頁設計和開發網站知識，而且擴展的講解部分能使您得到比書中更多的收獲。

超多容量王牌資源大放送

贈送大量王牌資源，包括本書實例素材文件、教學幻燈片、本書精品教學視頻、網頁樣式與布局案例賞析、Dreamweaver CC快捷鍵和技巧、HTML標簽速查表、精彩網站配色方案賞析、CSS+DIV布局賞析案例、Web前端工程師常見面試題等。

讀者對象

沒有任何Dreamweaver CC、Photoshop CC和Flash CC網頁設計基礎的初學者。

有一定的Dreamweaver CC、Photoshop CC和Flash CC網頁設計和基礎，想精通網頁設計的人員。

有一定的網頁設計基礎，沒有項目經驗的人員。

正在進行畢業設計的學生。

大專院校及培訓學校的老師和學生。

創作團隊

本書由劉玉紅和蒲娟編著，參加編寫的人員還有劉玉萍、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、梁云梁和周浩浩。在編寫過程中，我們力盡所能地將最好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請讀者不吝指正。若您在學習中遇到困難或疑問，或有何建議，可發電子郵件至電子郵箱（地址為357975357@qq.com）。

                                                                編　者

目錄

第1篇  精通網頁設計技法

第1章 磨刀不誤砍柴工——認識Dreamweaver CC 

1.1　 走進Dreamweaver CC 4

1.1.1　安裝Dreamweaver CC 4

1.1.2　啟動Dreamweaver CC 5

1.2　 Dreamweaver CC的工作環境 6

1.2.1　認識Dreamweaver CC的工作界面 6

1.2.2　 熟悉【插入】面板 8

1.3　 體驗Dreamweaver CC的新增功能 9

1.4　 創建站點 12

1.4.1　案例1——創建本地站點 12

1.4.2　案例2——創建遠程站點 13

1.5　管理站點 14

1.5.1　案例3——打開站點 14

1.5.2　案例4——編輯站點 14

1.5.3　案例5——刪除站點 15

1.5.4　案例6——復制站點 16

1.6　操作站點文件及文件夾 16

1.6.1　案例7——創建文件夾 16

1.6.2　案例8——創建文件 17

1.6.3　案例9——文件或文件夾的移動和復制 17

1.6.4　案例10——刪除文件或文件夾 18

1.7　高手解惑 18

1.8　跟我練練手 20

第2章 網頁內容之美——創建網頁中的文本

2.1　網頁設計的基本操作 21

2.1.1　案例1——新建網頁 21

2.1.2　案例2——保存網頁 21

2.1.3　案例3——打開網頁 23

2.1.4　案例4——預覽網頁 23

2.2　設置頁面屬性 24

2.3　用文字充實網頁 28

2.3.1　案例5——插入文字 28

2.3.2　案例6——設置字體 29

2.3.3　案例7——設置字號 30

2.3.4　案例8——設置字體顏色 31

2.3.5　案例9——設置字體樣式 32

2.3.6　案例10——編輯段落 33

2.3.7　案例11——檢查拼寫 38

2.3.8　案例12——創建項目列表 39

2.4　特殊文本的操作 41

2.4.1　案例13——插入換行符 41

2.4.2　案例14——插入水平線 42

2.4.3　案例15——插入日期 42

2.4.4　案例16——插入特殊字符 43

2.4.5　案例17——插入注釋 44

2.5　實戰演練——設置主頁中的跟蹤圖像 44

2.6　高手解惑 46

2.7　跟我練練手 46

第3章 有圖有真相——使用圖像和多媒體

3.1　 選擇適合網頁中圖像的格式 48

3.2　 用圖像美化網頁 49

3.2.1　案例1——插入圖像 49

3.2.2　案例2——圖像屬性設置 50

3.2.3　案例3——圖像的對齊方式 52

3.2.4　案例4——插入鼠標經過圖像 52

3.2.5　案例5——插入圖像占位符 54

3.3　在網頁中插入多媒體 55

3.3.1　案例6——插入背景音樂 55

3.3.2　案例7——插入Flash動畫 56

3.3.3　案例8——插入FLV視頻 57

3.3.4　案例9——插入HTML5音頻 59

3.3.5　案例10——插入HTML5視頻 59

3.4　實戰演練——制作圖文并茂的網頁 61

3.5　高手解惑 62

3.6　跟我練練手 63

第4章 不在網頁中迷路——設計網頁超鏈接

4.1　鏈接與路徑 66

4.1.1　鏈接的概念 66

4.1.2　鏈接路徑 66

4.1.3　鏈接的類型 67

4.2　 添加網頁超鏈接 68

4.2.1　案例1——添加文本鏈接 68

4.2.2　案例2——添加圖像鏈接 69

4.2.3　案例3——創建外部鏈接 70

4.2.4　案例4——創建錨記鏈接 70

4.2.5　案例5——創建圖像熱點鏈接 72

4.2.6　案例6——創建電子郵件鏈接 72

4.2.7　案例7——創建下載文件的鏈接 73

4.2.8　案例8——創建空鏈接 74

4.2.9　案例9——創建腳本鏈接 74

4.3　案例10——鏈接的檢查 75

4.4　實戰演練——為企業網站添加友情鏈接 76

4.5　高手解惑 77

4.6　跟我練練手 77

第5章 簡單的網頁布局——表格的應用

5.1　插入表格 80

5.2　選擇表格 81

5.2.1　案例1——選擇完整的表格 81

5.2.2　案例2——選擇行和列 82

5.2.3　案例3——選擇單元格 82

5.3　表格屬性 83

5.3.1　案例4——設置單元格屬性 83

5.3.2　案例5——設置整個表格屬性 84

5.4　操作表格 84

5.4.1　案例6——調整大小 85

5.4.2　案例7——增加行、列 85

5.4.3　案例8——刪除行、列、單元格內容 86

5.4.4　案例9——剪切、復制和粘貼單元格 87

5.4.5　案例10——合并和拆分單元格 87

5.5　操作表格數據 88

5.5.1　案例11——向表格中輸入文本 89

5.5.2　案例12——向表格中插入圖像 89

5.5.3　案例13——表格數據的排序 89

5.5.4　案例14——導入表格數據 90

5.5.5　案例15——導出表格數據 91

5.6　實戰演練——使用表格布局網頁 92

5.7　高手解惑 94

5.8　跟我練練手 95

第6章 讓網頁互動起來——使用網頁表單和行為

6.1　認識表單 98

6.2　在網頁中插入表單元素 98

6.2.1　案例1——插入表單域 98

6.2.2　案例2——插入文本域 99

6.2.3　案例3——插入密碼域 100

6.3　在網頁中插入復選框和單選按鈕 101

6.3.1　案例4——插入復選框 101

6.3.2　案例5——插入單選按鈕 102

6.4　制作網頁列表和菜單 102

6.4.1　案例6——插入下拉菜單 103

6.4.2　案例7——插入滾動列表 103

6.5　在網頁中插入按鈕 104

6.5.1　案例8——插入按鈕 104

6.5.2　案例9——插入圖像按鈕 104

6.6　插入文件上傳域 105

6.7　添加網頁行為 106

6.7.1　案例10——打開【行為】面板 106

6.7.2　案例11——添加行為 107

6.8　常用行為的應用 107

6.8.1　案例12——交換圖像 107

6.8.2　案例13——彈出信息 109

6.8.3　案例14——打開瀏覽器窗口 110

6.8.4　案例15——檢查表單行為 111

6.8.5　案例16——設置狀態欄文本 113

6.9　實戰演練——使用表單制作留言本 114

6.10　高手解惑 117

6.11　跟我練練手 118

第7章 批量制作風格統一的網頁——使用模板和庫

7.1　 創建模板 120

7.1.1　案例1——在空白文檔中創建模板 120

7.1.2　案例2——在【資源】面板中創建模板 120

7.1.3　案例3——從現有文檔創建模板 121

7.1.4　案例4——創建可編輯區域 121

7.2　管理模板 123

7.2.1　案例5——從模板中分離 123

7.2.2　案例6——更新模板及基于模板的網頁 123

7.3　庫概述 124

7.4　庫的創建、管理與應用 125

7.4.1　案例7——創建庫項目 125

7.4.2　案例8——庫項目的應用 126

7.4.3　案例9——編輯庫項目 127

7.5　實戰演練——創建基于模板的頁面 128

7.6　高手解惑 130

7.7　跟我練練手 130

第2篇  精通網頁設計藝術

第8章 第一視覺最重要——網站配色與布局

8.1　 善用色彩設計網頁 134

8.1.1　認識色彩 134

8.1.2　案例1——網頁上的色彩處理 135

8.2　 網頁色彩的搭配 138

8.2.1　案例2——確定網站的主題色 138

8.2.2　案例3——網頁色彩搭配原理 139

8.2.3　案例4——網頁中色彩的搭配 141

8.2.4　案例5——網頁元素的色彩搭配 143

8.2.5　案例6——網頁色彩搭配的技巧 144

8.3　布局網站板塊結構 146

8.3.1　案例7——“國”字型 146

8.3.2　案例8——標題正文型 146

8.3.3　案例9——左右框架型 146

8.3.4　案例10——上下框架型 147

8.3.5　案例11——綜合框架型 147

8.3.6　案例12——封面型 147

8.3.7　案例13——Flash型 147

8.4　網站配色應用案例 148

8.4.1　案例14——網絡購物網站色彩應用 148

8.4.2　案例15——游戲網站色彩應用 148

8.4.3　案例16——企業門戶網站色彩應用 149

8.4.4　案例17——時政新聞網站色彩應用 152

8.4.5　案例18——影音視頻網站色彩應用 152

8.4.6　案例19——電子商務網站色彩應用 153

8.4.7　案例20——娛樂網站色彩應用 154

8.5　實戰演練——定位網站頁面的框架 154

8.6　高手解惑 156

8.7　跟我練練手 156

第9章 讀懂樣式表密碼——使用CSS 樣式表美化網頁

9.1　初識CSS 158

9.1.1　CSS概述 158

9.1.2　CSS的作用 158

9.1.3　基本CSS語法 159

9.1.4　案例1——使用Dreamweaver CC

           編寫CSS 159

9.2　使用CSS的方法 161

9.2.1　案例2——行內樣式 161

9.2.2　案例3——內嵌樣式 162

9.2.3　案例4——鏈接樣式 163

9.2.4　案例5——導入樣式 164

9.2.5　案例6——優先級問題 165

9.3　使用CSS樣式美化網頁 167

9.3.1　案例7——使用字體樣式美化文字 167

9.3.2　案例8——使用文本樣式美化文本 168

9.3.3　案例9——使用背景樣式美化背景 169

9.4　實戰演練——設定網頁中鏈接樣式 171

9.5　高手解惑 174

9.6　跟我練練手 174

第10章 架構師的大比拼——網頁布局典型范例

10.1　 使用CSS排版 176

10.1.1　案例1——將頁面用div分塊 176

10.1.2　案例2——設置各塊位置 176

10.1.3　案例3——用CSS定位 176

10.2　固定寬度網頁剖析與布局 179

10.2.1　案例4——網頁單列布局模式 179

10.2.2　案例5——網頁1-2-1型布局模式 182

10.3　自動縮放網頁1-2-1型布局模式 186

10.3.1　案例6——“1-2-1”等比例變寬布局 186

10.3.2　案例7——“1-2-1”單列變寬布局 186

10.4　實戰演練——使用CSS設定網頁

          布局列的背景色 187

10.5　高手解惑 188

10.6　跟我練練手 189

第3篇  精通網頁元素設計技法

第11章 網頁元素設計利器——Photoshop CC

11.1　Photoshop CC工作界面 194

11.1.1　案例1——認識菜單欄 194

11.1.2　案例2——認識選項欄 194

11.1.3　案例3——認識工具箱 195

11.1.4　案例4——認識圖像窗口 196

11.1.5　案例5——認識面板 197

11.1.6　案例6——認識狀態欄 198

11.2　文件的基本操作 199

11.2.1　案例7——新建文件 199

11.2.2　案例8——打開文件 201

11.2.3　案例9——保存文件 202

11.2.4　案例10——置入文件 203

11.3　應用圖像輔助工具 204

11.3.1　案例11——使用標尺 204

11.3.2　案例12——使用參考線 205

11.3.3　案例13——使用對齊功能 206

11.4　實戰演練——載入預設資源 206

11.5　高手解惑 208

11.6　跟我練練手 208

第12章 網頁中的文字設計——制作網頁文字特效

12.1　文字的類型 210

12.2　輸入文字 210

12.2.1　通過文字工具輸入文字 210

12.2.2　通過文字蒙版工具輸入文字選區 212

12.2.3　轉換點文字和段落文字 213

12.2.4　轉換文字排列方向 213

12.3　設置文字格式 214

12.3.1　通過選項欄設置格式 214

12.3.2　通過字符面板設置文字格式 215

12.3.3　通過段落面板設置段落格式 216

12.4　制作常見特效文字 218

12.4.1　制作路徑文字 218

12.4.2　制作變形文字 210

12.5　實戰演練——為文本添加外部

           字體樣式 211

12.6　高手解惑 212

12.7　跟我練練手 213

第13章 網頁中迷人的藍海——制作網頁按鈕與特效邊線

13.1　制作按鈕 216

13.1.1　案例1——制作普通按鈕 216

13.1.2　案例2——制作迷你按鈕 218

13.1.3　案例3——制作水晶按鈕 230

13.1.4　案例4——制作木紋按鈕 235

13.2　制作裝飾邊線 238

13.2.1　案例5——制作裝飾虛線 238

13.2.2　案例6——制作分割線條 240

13.2.3　案例7——制作斜紋區域 240

13.3　高手解惑 241

13.4　跟我練練手 242

第14章 網站中的路標——制作網頁導航條

14.1　網頁導航條簡介 244

14.2　制作網頁導航條 244

14.2.1　案例1——制作導航條框架 244

14.2.2　案例2——制作斜紋 245

14.2.3　案例3——制作縱向導航條 246

14.3　高手解惑 248

14.4　跟我練練手 249

第4篇  精通網頁動畫設計

第15章 讓網頁活靈活現——制作簡單網頁動畫

15.1　了解Flash CC 254

15.1.1　繪制矢量繪圖 254

15.1.2　設計制作動畫 254

15.1.3　強大的編程功能 254

15.2　Flash CC的工作界面 255

15.3　Flash CC的基本操作 260

15.3.1　案例1——新建Flash文件 260

15.3.2　案例2——打開Flash文件 261

15.3.3　案例3——保存和關閉Flash文件 262

15.4　使用文本工具 264

15.4.1　案例4——利用文本工具輸入文字 264

15.4.2　案例5——設置文本字符屬性 264

15.4.3　案例6——設置傳統文本的段落屬性 265

15.5　變形文本 266

15.6　分離文本 267

15.7　高手解惑 268

15.8　跟我練練手 268

第16章 動畫的核心技術——使用時間軸、幀和圖層

16.1　制作Flash CC動畫基礎 270

16.1.1　案例1——動作補間動畫的制作 270

16.1.2　案例2——形狀補間動畫的制作 271

16.2　圖層操作基礎 273

16.2.1　案例3——創建圖層和圖層文件夾 273

16.2.2　案例4——編輯圖層 275

16.2.3　案例5——設置圖層的狀態與屬性 277

16.3　時間軸與幀 279

16.3.1　案例6——幀的分類 279

16.3.2　案例7——插入幀 280

16.3.3　案例8——幀標簽、注釋和錨記 281

16.4　對幀進行操作 282

16.4.1　案例9——幀的刪除和清除 282

16.4.2　案例10——幀的選取、復制、

             粘貼和移動 282

16.4.3　案例11——翻轉幀與洋蔥皮工具 283

16.5　實戰演練——制作數字倒計時動畫 284

16.6　高手解惑 286

16.7　跟我練練手 287

第17章 利用元件和庫組織動畫素材

17.1　創建Flash元件 290

17.1.1　元件概述與分類 290

17.1.2　案例1——創建元件 290

17.1.3　案例2——調用其他文檔中的元件 295

17.2　使用實例 296

17.2.1　案例3——為實例另外指定一個元件 296

17.2.2　案例4——改變實例 297

17.3　使用“庫”面板 298

17.3.1　認識“庫”面板 298

17.3.2　案例5——庫的管理與使用 299

17.4　實戰演練——制作絢麗網頁按鈕 301

17.5　高手解惑 306

17.6　跟我練練手 306

第18章 制作動態網站Logo與Banner

18.1　 制作滾動文字Logo 308

18.1.1　設置文檔屬性 308

18.1.2　制作文字元件 308

18.1.3　制作滾動效果 309

18.2　 制作產品Banner 311

18.2.1　制作文字動畫 311

18.2.2　制作文字遮罩動畫 313

18.2.3　制作圖片動畫 313

18.3　 高手解惑 315

18.4　 跟我練練手 315

第5篇  綜合網站開發實戰

第19章 綜合案例實戰1——Photoshop CC設計網頁

19.1　設計網頁Logo 320

19.2　設計網頁導航欄 323

19.3　設計網頁的Banner 323

19.4　設計網頁正文部分 327

19.4.1　設計正文導航 327

19.4.2　設計正文內容 329

19.5　設計網頁頁腳部分 332

19.6　組合在線購物網頁 332

19.7　保存網頁 334

19.8　對網頁進行切片處理 335

第20章 綜合案例實戰2——制作個人Flash網站

20.1　實例分析 338

20.1.1　背景概述 338

20.1.2　實例簡介 338

20.2　主要知識點 338

20.3　具體的設計步驟 339

20.3.1　網站結構規劃 339

20.3.2　主場景的設計 339

20.3.3　次場景的設計 342

20.4　高手解惑 346

第21章 開發網站交互留言板系統

21.1 　系統的功能分析 348

21.1.1　規劃網頁結構和功能 348

21.1.2　網頁美工設計 348

21.2　 數據庫設計與連接 349

21.2.1　數據庫的設計 349

21.2.2　創建數據庫連接 352

21.3　 留言板管理系統頁面的制作 354

21.3.1　留言板管理系統主頁面的制作 354

21.3.2　訪問者留言頁面的制作 360

21.4　 留言板系統后臺管理的制作 362

21.4.1　管理員登錄頁面的制作 362

21.4.2　留言板后臺管理主頁面的制作 363

21.4.3　刪除留言頁面 367

第21章 行業綜合案例4——制作移動設備類型網頁

21.1　網站設計分析 370

21.2　網站結構分析 370

21.3　網站主頁面的制作 371

21.4　網站成品預覽 372

第23章 讓別人瀏覽我的成果—網站的發布

23.1　上傳網站前的準備工作 380

23.1.1　注冊域名 380

23.1.2　申請空間 381

23.2　測試網站 382

23.2.1　案例1——測試站點范圍的鏈接 382

23.2.2　案例2——改變站點范圍的鏈接 382

23.2.3　案例3——查找和替換 383

23.2.4　案例4——清理文檔 384

23.3　上傳網站 384

23.3.1　案例5——使用Dreamweaver

              上傳網站 385

23.3.2　案例6——使用FTP工具上傳網站 386

23.4　高手解惑 388

23.5　跟我練練手 389