第1章網頁設計與網站建設基礎   1

1.1預備知識   2

1.1.1什麼是網站   2

1.1.2靜態網頁和動態網頁 2

1.1.3申請域名       3

1.1.4申請服務器空間  7

1.2常用的網頁設計軟件    9

1.2.1網頁設計軟件Dreamweaver 9

1.2.2圖像設計軟件Photoshop       10

1.2.3動畫設計軟件Flash   10

1.2.4HTML標記   11

1.2.5FTP軟件       12

1.3網站建設的一般流程    13

1.3.1網站的定位   13

1.3.2規劃站點結構      14

1.3.3網站整體規劃      14

1.3.4收集資料與素材  15

1.3.5設計網頁頁面      15

1.3.6切圖並制作成頁面     16

1.3.7開發動態網站模塊     16

1.3.8發布與上傳   18

1.3.9後期更新與維護  18

1.3.10網站的推廣 18

第2章網頁版面設計和布局    19

2.1網頁版面布局設計 20

2.1.1網頁版面布局原則     20

2.1.2點、線、面的構成     22

2.2網頁布局方法  24

2.2.1紙上布局法   24

2.2.2軟件布局法   25

2.3常見的網頁結構類型    26

2.3.1“廠”字型布局  26

2.3.2“國”字型布局  26

2.3.3“框架”型布局  27

2.3.4“封面”型布局  27

2.3.5Flash型布局 28

2.4文字與版式設計     28

2.4.1文字的字體、字號、行距       28

2.4.2文字的顏色   29

2.4.3文字的圖形化      30

2.5圖像設計排版  30

2.5.1網頁中應用圖像的注意要點   30

2.5.2讓圖片更合理      31

第3章網頁色彩的選擇及搭配       33

3.1色彩基礎知識  34

3.1.1色彩的基本概念  34

3.1.2網頁安全色   35

3.2色彩的三要素  36

3.2.1色相 36

3.2.2明度 36

3.2.3純度 37

3.3各種顏色的色彩搭配    37

3.3.1紅色 37

3.3.2黃色 38

3.3.3藍色 38

3.3.4綠色 39

3.3.5紫色 39

3.3.6橙色 40

3.3.7白色 40

3.3.8黑色 40

3.3.9灰色 41

3.4頁面色彩搭配  42

3.4.1網頁色彩搭配原理     42

3.4.2網頁設計中色彩搭配的技巧   43

第4章熟悉Dreamweaver CC 47

4.1認識Dreamweaver CC界面      48

4.1.1文檔工具欄   48

4.1.2常用菜單命令      49

4.1.3插入工具欄   49

4.1.4屬性面板       50

4.1.5面板組    50

4.2創建本地站點  51

4.3管理站點   52

4.3.1打開站點       52

4.3.2編輯站點       53

4.3.3刪除站點       53

4.3.4復制站點       54

4.4綜合實例—創建本地站點   54

第5章給網頁添加文字和圖像       56

5.1文本的輸入和編輯 57

5.1.1輸入文本       57

5.1.2設置文本屬性      58

5.1.3輸入特殊字符      60

5.2在網頁中插入圖像 61

5.2.1插入圖像       61

5.2.2設置圖像屬性      63

5.2.3插入鼠標經過圖像     65

5.3鏈接的設置      67

5.3.1鏈接的類型   67

5.3.2設置文本鏈接和圖像鏈接       67

5.3.3創建圖像熱點鏈接     68

5.3.4創建電子郵件鏈接     70

5.3.5創建下載文件的鏈接 71

5.4插入媒體   72

5.4.1插入Flash動畫   72

5.4.2插入視頻       74

5.4.3插入網頁背景音樂網頁    76

5.5綜合實例—制作圖文混排的多媒體頁面       78

第6章使用行為和JavaScript添加網頁特效     81

6.1特效中的行為和事件    82

6.1.1動作 82

6.1.2事件 83

6.2使用Dreamweaver內置行為   84

6.2.1?交換圖像  84

6.2.2彈出提示信息      86

6.2.3打開瀏覽器窗口  87

6.2.4轉到URL       88

6.2.5預先載入圖像      90

6.2.6檢查表單       92

6.2.7?設置狀態欄文本    93

6.3利用腳本制作特效網頁       94

6.3.1制作滾動公告網頁     94

6.3.2制作自動關閉網頁     96

第7章創建表單   98

7.1表單概述   99

7.2插入輸入類表單對像    99

7.2.1插入表單域   99

7.2.2插入文本域   101

7.2.3插入密碼域   103

7.2.4插入多行文本域  103

7.2.5插入隱藏域   104

7.2.6插入復選框   104

7.2.7插入單選按鈕      105

7.2.8插入列表/菜單    106

7.2.9插入Tel  108

7.2.10插入文件域 108

7.2.11插入圖像域 109

7.2.12插入按鈕     110

7.3綜合實例—制作電子郵件表單  110

第8章用表格排版網頁     115

8.1在網頁中插入表格 116

8.1.1插入表格       116

8.1.2添加內格     117

8.2設置表格屬性  118

8.2.1格屬性  118

8.2.2設置表格屬性      118

8.3表格的基本操作     119

8.3.1選定表格       119

8.3.2添加行或列   120

8.3.3刪除行或列   121

8.3.4格   122

8.3.5格   122

8.3.6調整表格大小      123

8.4表格的其他功能     124

8.4.1導入表格式數據  124

8.4.2排序表格       126

8.5綜合實例   128

實戰1—利用表格排版頁面  128

實戰2—創建網頁圓角表格  133

第9章使用模板和庫快速

               創建網頁   137

9.1認識模板   138

9.2創建模板   138

9.2.1在空白文檔中創建模板    138

9.2.2從現有文檔創建模板 139

9.2.3創建可編輯區域  140

9.3創建基於模板的頁面    142

9.4庫的創建、管理與應用       144

9.4.1創建庫項目   144

9.4.2庫項目的應用      146

9.4.3編輯庫項目   148

9.5綜合實例—創建完整的企業網站模板    149

實戰1—創建模板    150

實戰2—利用模板創建網頁  154

第10章使用CSS樣式美化網頁    158

10.1初識CSS 159

10.1.1CSS概述     159

10.1.2CSS的作用 159

10.1.3基本CSS語法   160

10.2添加CSS的方法  161

10.3定義CSS樣式的屬性 162

10.3.1文本樣式的定義       162

10.3.2背景樣式的定義       162

10.3.3區塊樣式的定義       163

10.3.4方框樣式的定義       164

10.3.5邊框樣式的定義       164

10.3.6列表樣式的定義       165

10.3.7定位樣式的定義       165

10.3.8擴展樣式的定義       166

10.3.9CSS過渡     167

第11章CSS DIV布局方法      168

11.1網站與Web標準 169

11.1.1什麼是Web標準     169

11.1.2為什麼要建立Web標準       170

11.2CSS布局理念       170

11.2.1將頁面用div分塊   170

11.2.2設計各塊的位置       171

11.2.3用CSS定位       172

11.3固定寬度布局       173

11.3.1一列固定寬度    173

11.3.2兩列固定寬度    174

11.3.3圓角框  175

11.4可變寬度布局       177

11.4.1一列自適應 177

11.4.2兩列寬度自適應       178

11.4.3兩列右列寬度自適應      180

11.4.4三列浮動中間寬度自適應     180

11.4.5三行二列居中高度自適應布局    182

11.5CSS布局與傳統的表格方式布局分析  183

第12章快速掌握圖像設計軟件Photoshop      186

12.1Photoshop 簡介  187

12.1.1菜單欄  188

12.1.2工具箱及工具選項欄      188

12.1.3文檔窗口及狀態欄   189

12.1.4面板      189

12.2繪圖工具使用       190

12.2.1使用矩形工具和圓角矩形工具    190

12.2.2使用單行選框工具及單列選框工具   191

12.2.3使用直線工具    192

12.2.4使用油漆桶工具       192

12.2.5使用漸變工具    193

12.3制作文本特效       194

12.3.1圖層的基本操作       194

12.3.2使用圖層樣式    195

12.3.3輸入文本     195

12.3.4設置文本格式    196

12.3.5設置變形文字    197

12.3.6使用濾鏡     197

12.4綜合實例 198

實例1—繪制愛心圖標   198

實例2—立體質感的3D文字      201

第13章頁面圖像的切割與優化     204

13.1優化頁面圖像       205

13.1.1圖像的優化 205

13.1.2輸出透明GIF圖像   205

13.2網頁切片輸出       207

13.2.1創建切片     207

13.2.2編輯切片     207

13.2.3優化和輸出切片       208

13.3創建GIF動畫       209

13.3.1GIF動畫原理     209

13.3.2制作GIF動畫    209

13.4綜合實例 212

實例1—切割輸出網站主頁  212

實例2—在Dreamweaver中優化圖像    213

第14章設計網頁素材       215

14.1設計網站Logo     216

14.1.1網站Logo的重要性       216

14.1.2網站Logo設計原則       216

14.1.3實例1—設計網站Logo 217

14.2設計網站Banner 218

14.2.1什麼是Banner  218

14.2.2Banner的制作原則 219

14.2.3實例2—設計Banner     219

14.3制作網頁導航條   221

14.3.1網頁導航條簡介       221

14.3.2實例3—設計橫向導航條     222

第15章動畫設計軟件Flash CC入門   224

15.1Flash CC簡介       225

15.1.1Flash應用範圍 225

15.1.2Flash CC工作界面   227

15.2Flash動畫制作基礎知識  230

15.2.1建立與保存Flash動畫  231

15.2.2設置Flash的屬性   231

15.2.3使用Flash時間軸   232

15.2.4插入關鍵幀 233

15.2.5添加圖層與圖層管理      233

15.2.6件     234

15.2.7庫的管理與使用       235

15.3Flash動畫的優化與發布  236

15.3.1優化動畫     236

15.3.2測試動畫     237

15.3.3設置動畫發布格式   237

15.4綜合實例—創作簡單動畫 238

第16章制作簡單的Flash動畫     241

16.1圖層基本操作和管理  242

16.1.1圖層的概念 242

16.1.2創建和編輯圖層文件夾  242

16.1.3引導圖層     243

16.1.4遮罩圖層     244

16.2創建逐幀動畫       244

16.3補間動畫的制作   246

實例1—創建改變對像大小的動畫    246

實例2—創建形狀補間動畫  249

16.4利用圖層制作動畫      250

實例3—創建沿曲線運動的動畫 250

實例4—創建遮罩動畫   253

第17章制作聲音和視頻動畫  255

17.1導入聲音文件       256

17.1.1Flash中聲音的類型       256

17.1.2導入音頻文件    256

17.2添加聲音 257

17.2.1輕松為按鈕添加聲音      257

17.2.2為影片添加聲音       259

17.3聲音屬性的編輯   260

17.3.1設置聲音的重復播放      260

17.3.2設置聲音的同步方式      260

17.4導入視頻文件       261

17.4.1Flash支持的視頻格式   261

17.4.2在Flash中嵌入視頻      261

17.5綜合實例—給Flash動畫片頭添加聲音     263

第18章網站的發布與維護      265

18.1站點的測試    266

18.1.1檢查鏈接     266

18.1.2站點報告     267

18.1.3清理文檔     267

18.2網頁的上傳    268

18.2.1使用LeapFtp軟件上傳文件       268

18.2.2利用Dreamweaver上傳網頁     269

18.3網站的維護    271

18.3.1網站的軟硬件維護   271

18.3.2網站內容維護    271

18.3.3網站備份     271

18.4網站安全維護       272

18.4.1目錄和應用程序訪問權限的設置       272

18.4.2匿名和授權訪問控制      273

18.4.3隱藏IP地址      273

18.4.4操作繫統賬號管理   274

18.4.5安裝必要的安全軟件      275

第19章網站的宣傳推廣   276

19.1注冊到搜索引擎   277

19.1.1搜索引擎     277

19.1.2搜索引擎的原理       278

19.1.3搜索引擎分類    278

19.1.4搜索引擎注冊    279

19.1.5搜索引擎優化原則   279

19.2導航網站登錄       281

19.3友情鏈接 281

19.4網絡廣告 282

19.5發布信息推廣       283

19.6利用群組消息即時推廣     283

19.7電子郵件 284

19.7.1電子郵件推廣    284

19.7.2電子郵件推廣的技巧      285

19.8問答式免費推廣   285

19.9在博客中推廣       286

19.10傳統網下推廣    288

第20章設計制作公司宣傳網站     290

20.1網站前期策劃       291

20.1.1網站總體策劃    291

20.1.2功能規劃     292

20.2利用Photoshop設計網站首頁      294

20.3在Dreamweaver中進行頁面排版制作      300

20.3.1創建本地站點    300

20.3.2創建網站二級網頁   301

20.4制作彈出窗口頁面      305

隨著計算機和網絡技術的飛速發展，目前網頁設計與網站建設技術成了熱門。頁面設計、動畫設計、圖形圖像設計是網頁設計與網站建設的三大核心。隨著網頁設計與網站建設技術的不斷發展和完善，產生了眾多網頁制作軟件。Dreamweaver、Flash和Photoshop三劍客的組合，是大家在網頁設計時經常使用的，這三款軟件的共同點就是簡單易懂、容易上手，而且可以保證你的設計能展現出不同的風采。這三款軟件的組合完全能高效地實現網頁的各種功能，所以稱它們為黃金搭檔。現在它們已經成為網頁設計與網站建設的夢幻工具組合，以其強大的功能和易學易用的特性，贏得了廣大網頁設計人員的青睞。

本書的特色

本書面向網頁設計制作的初、中級用戶，采用由淺入深、循序漸進的方式進行講解，內容豐富，結構安排合理，實例均來自設計一線，特別適合作為教材。

實戰性強

本書的特點是對每個知識點從實例的角度進行介紹，這些實例均采用循序漸進的制作流程進行詳細講解，使讀者輕松上手，舉一反三。

結構完整

本書以實用功能講解為核心，每小節分為基本知識學習和課堂練一練兩部分。基本知識學習部分以基本知識為主，講解每個知識點的操作和用法，操作步驟詳細，目標明確；課堂練一練部分則相當於一個學習任務或案例制作，並結合大量實例分述三款軟件和動態網頁技術。後通過綜合實例講述網站建設的全過程。

案例豐富

本書把知識點融彙於繫統的案例實訓當中，並且結合經典案例進行講解和拓展，進而達到“知其然，並知其所以然”的效果，力求達到理論知識與實際操作的完美結合。

讀者對像

網頁設計與制作人員

網站建設與開發人員

大中專院校相關專業師生

網頁制作培訓班學員

個人網站愛好者與自學讀者

本書能夠在這麼短的時間內出版，是與很多人的努力分不開的。我要感謝很多在我寫作的過程中給予幫助的朋友們，他們為此書的編寫和出版做了大量的工作，在此向他們致以深深的謝意。

本書由著名網頁設計培訓專家張忠瓊主筆，另外參加編寫的還有程振宏、馮雷雷、晁輝、陳石送、何琛、吳秀紅、王鼕霞、何本軍、喬海麗、鄧仰偉、孫雷傑、孫文記、何立、倪慶軍、胡秀娥、趙良濤、徐曦、劉桂香、葛俊科、葛俊彬等。由於作者水平有限，加之創作時間倉促，書中的不足之處在所難免，歡迎廣大讀者批評指正。

作者

2017年7月