網頁設計與網站建設

如今，互聯網已經在人們的生活中佔據了重要位置，它可以將豐富多彩的文本、圖像、動畫等結合起來，隨時隨地供用户瀏覽。目前網頁設計與網站建設技術成了熱門。頁面設計、動畫設計、圖形圖像設計是網頁設計與網站建設的三大核心。隨着網頁設計與網站建設技術的不斷髮展和完善，產生了眾多網頁製作軟件。但是目前使用最多的是Photoshop、Dreamweaver、Flash三個軟件的組合，它們能完全高效地實現網頁設計的各種功能，所以稱這三個軟件的組合為黃金搭檔。現在，Adobe公司又及時地推出了Dreamweaver CS6、Flash CS6、Photoshop CS6，它們已經成為網頁設計與網站建設的夢幻工具組合，以其強大的功能和易學易用的特性，贏得了廣大網頁設計人員的青睞。

本書詳細介紹瞭如何進行網站的前期策劃，如何綜合使用Dreamweaver CS6、Photoshop CS6和Flash CS6等工具來建設網站，如何在ASP環境下建設動態網站，以及數據庫的創建和網站的策劃、維護、宣傳與推廣等內容。

本書共分為21章，以“建站快速入門”—“設計令人流連忘返的靜態網頁”—“開發動態數據庫網站”—“設計與處理精美的網頁圖像”—“設計超炫的網頁動畫”—“網站的策劃與安全管理”—“完整商業網站的建設”為線索具體展開。其中，第1章為網頁設計與網站建設基礎；第2章為用色彩搭配賞心悦目的網站；第3章為快速掌握Dreamweaver CS6設計基本網頁；第4章為設計豐富多彩的圖像和多媒體網頁；第5章為使用表格和Spry排版網頁，第6章為使用模板和庫快速創建網頁；第7章為使用行為和腳本設計動感特效網頁；第8章為使用CSS樣式表美化網頁；第9章為用CSS+Div靈活佈局頁面；第10章為動態網站開發基礎；第11章為設計動態網站常用模塊；第12章為使用Photoshop CS6設計網頁中的特效文字；第13章為設計網頁中經典圖像元素；第14章為使用Flash CS6創建基本動畫；第15章為使用Flash CS6創建交互動畫；第16章為網站的整體策劃；第17章為網站頁面設計策劃；第18章為網站的安全與運營維護；第19章為網站建設規範和基本流程；第20章為設計企業宣傳展示型網站；第21章為設計在線購物網站。

本書作者具有多年網站設計與教學經驗，精選了多年設計與教學實踐中具有代表性和實用性的實例，詳細介紹了使用Dreamweaver CS6編輯網頁、使用Photoshop CS6處理圖形和圖像及使用Flash CS6製作動畫的方法。本書具有如下特點。

結構安排合理。本書採用“基礎知識+上機練習+綜合應用”的結構，以使讀者能夠更好地理解和掌握每章所講述的內容。在每章的最後基本上都有“綜合應用”，將本章的內容進行了一次完整的貫通，以幫助讀者鞏固本章的相關知識點及提升讀者解決實際問題的能力。另外作者還毫無保留地將現實工作中大量非常實用的經驗、技巧貢獻出來。

商業案例，實戰性強。本書使用了大量的典型商業網站案例，採用圖解的方式講解軟件的使用和技巧，適時添加“提示”，以補充使用技巧和知識鏈接，讀者可以快捷地學習操作和應用，實戰性非常強。

雙欄排版，提示標註。採用雙欄圖解排版，一步一圖，圖文對應，並在圖中添加了操作提示標註，以便於讀者快速學習。

代碼揭秘。隨着網站設計人員技術的提升，對代碼會有越來越深刻的研究，增加“代碼揭秘”欄目，側重代碼的提供，要點進行重點標註與提示。

專家秘笈。每章最後一部分均安排了專家秘笈，這些秘笈來源於網站建設專家多年的經驗和技巧總結，解答了初學者常見的困惑，擴大了初學者的知識面。

超值配套光盤。本書所附光盤的內容為書中介紹的範例的源文件及重點實例的操作演示視頻，供讀者學習時參考和對照使用。在光盤中還有“HTML常用標記手冊”、“JavaScript語法手冊”、“CSS屬性一覽表”、“VBScript語法手冊”、“ADO對象方法屬性詳解”、“常見網頁配色詞典”等內容，在製作網頁時也是很有用的參考。

本書語言通俗易懂，知識系統全面，突出了實戰性，採用由淺入深的編排方法，內容豐富，結構清晰，實例眾多，圖文並茂，適用於以下讀者對象：網頁設計與製作人員、網站建設與開發人員、大中專院校相關專業師生、網頁製作培訓班學員、個人網站愛好者與自學讀者。

本書由國內著名網頁設計培訓專家郭海旺主編，參加編寫的還有鄧靜靜、李銀修、劉宇星、鄧方方、張禮明、孫良軍、楊建偉、李曉民、劉中華、孫起雲、呂志彬等。由於本書編者水平有限，加之時間倉促，不足之處在所難免，歡迎廣大讀者批評指正。

編 者

2012年8月 ^[1] 

本書詳細介紹瞭如何進行網站的前期策劃，如何綜合使用Dreamweaver CS6、Photoshop CS6和Flash CS6等工具來建設網站，如何在ASP環境下建設動態網站，以及數據庫的創建和網站的策劃、維護、宣傳與推廣等內容。

本書語言通俗易懂，知識系統全面，突出了實戰性，採用由淺入深的編排方法，內容豐富，結構清晰，實例眾多，圖文並茂，適用於以下讀者對象：網頁設計與製作人員、網站建設與開發人員、大中專院校相關專業師生、網頁製作培訓班學員、個人網站愛好者與自學讀者。 ^[2] 

第1篇 建站快速入門

網頁設計與網站建設基礎 2

1.1 常見的網站類型 3

1.1.1 個人網站 3

1.1.2 企業類網站 3

1.1.3 娛樂休閒類網站 3

1.1.4 機構類網站 4

1.1.5 行業信息類網站 4

1.1.6 購物類網站 5

1.1.7 門户類網站 5

1.2 常用網頁設計軟件和技術 6

1.2.1 網頁編輯排版軟件 6

1.2.2 網頁動畫製作軟件 7

1.2.3 網頁圖像設計軟件 7

1.2.4 網頁標記語言HTML 8

1.2.5 網頁腳本語言 9

1.2.6 動態網頁編程語言ASP 10

1.3 靜態網頁和動態網頁 10

1.3.1 靜態網頁 10

1.3.2 動態網頁 11

用色彩搭配賞心悦目的網站 12

2.1 色彩基礎知識 13

2.1.1 色彩的基本概念 13

2.1.2 網頁色彩的冷暖視覺 13

2.2 常見網頁色彩搭配分析 15

2.2.1 綠色 15

2.2.2 黃色 16

2.2.3 藍色 17

2.2.4 紅色 18

2.2.5 紫色 19

2.2.6 灰色 20

2.2.7 黑色 21

2.3 頁面色彩搭配 21

2.3.1 網頁色彩搭配原理 21

2.3.2 網頁配色方法 23

第2篇 設計令人流連忘返的靜態網頁

快速掌握Dreamweaver CS6設計基本網頁 26

3.1 Dreamweaver CS6簡述 28

3.2 Dreamweaver CS6的工作界面 28

3.2.1 菜單欄 29

3.2.2 插入欄 29

3.2.3 浮動面板 29

3.2.4 “屬性”面板 30

3.2.5 文檔窗口 30

3.3 創建和管理站點 31

3.3.1 上機練習——創建本地站點 31

3.3.2 上機練習——管理本地站點 32

3.4 插入文本 34

3.4.1 上機練習——插入普通文本 34

3.4.2 上機練習——設置文本屬性 35

3.4.3 上機練習——插入特殊字符 36

3.5 使用列表 38

3.5.1 上機練習——插入項目列表 38

3.5.2 插入編號列表 39

3.6 在網頁中插入文件頭部內容 40

3.6.1 插入META信息 40

3.6.2 設置基礎 41

3.6.3 插入關鍵字 42

3.6.4 插入説明 42

3.6.5 設置刷新 42

3.7 插入其他對象 43

3.7.1 上機練習——插入日期 43

3.7.2 上機練習——插入水平線 44

3.8 綜合應用 46

3.9 專家秘籍 49

設計豐富多彩的圖像和多媒體網頁 51

4.1 在網頁中插入圖像 53

4.1.1 網頁中圖像的常見格式 53

4.1.2 上機練習——插入圖像 53

4.2　網頁圖像的應用 55

4.2.1　上機練習——鼠標經過圖像 55

4.2.2　上機練習——插入圖像佔位符 57

4.3 插入聲音 59

4.3.1 音頻文件格式 59

4.3.2 上機練習——添加背景音樂 59

4.4　插入視頻 61

4.4.1　視頻的文件格式 61

4.4.2　上機練習——在網頁中插入視頻 62

4.5 插入其他媒體文件 63

4.5.1 上機練習——插入Flash 63

4.5.2 上機練習——插入Java Applet 65

4.6 網頁鏈接的創建 67

4.6.1 網頁鏈接的基本類型 67

4.6.2 上機練習——圖像熱點鏈接 68

4.6.3 上機練習——E-mail鏈接 69

4.6.4 上機練習——下載文件鏈接 71

4.6.5 上機練習——錨點鏈接 72

4.6.6 上機練習——腳本鏈接 74

4.6.7 上機練習——空鏈接 75

4.7 綜合應用 76

4.8 專家秘籍 81

使用表格和Spry排版網頁 82

5.1 插入表格 83

5.1.1 上機練習——插入表格 83

5.1.2 上機練習——添加內容到單元格 86

5.2 編輯表格 87

5.2.1 選擇表格及其元素 87

5.2.2 調整表格和單元格的大小 91

5.2.3 添加、刪除行或列 93

5.2.4 拆分單元格 94

5.2.5 合併單元格 95

5.2.6 剪切、複製、粘貼表格 95

5.3 設置表格屬性 96

5.3.1 設置整個表格的屬性 96

5.3.2 設置行、列和單元格屬性 96

5.4 使用Spry佈局對象 97

5.4.1 上機練習——使用Spry菜單欄 97

5.4.2 使用Spry選項卡式面板 98

5.4.3 使用Spry摺疊式 99

5.4.4 上機練習——使用Spry可摺疊面板 100

5.5 綜合應用——製作圓角表格 100

5.6 專家秘籍 103

使用模板和庫快速創建網頁 105

6.1 創建模板 106

6.1.1 上機練習——新建模板 106

6.1.2 上機練習——從現有文檔創建模板 108

6.2 創建可編輯區域 109

6.2.1 上機練習——插入可編輯區域 109

6.2.2 刪除可編輯區域 110

6.3 使用模板創建網頁 110

6.4 創建與應用庫項目 112

6.4.1 上機練習——創建庫項目 112

6.4.2 上機練習——應用庫項目 114

6.4.3 上機練習——修改庫項目 115

6.5 綜合應用 116

6.6 專家秘籍 121

使用行為和腳本設計動感特效網頁 123

7.1 動作和事件 124

7.1.1 動作 124

7.1.2 事件 125

7.2 行為的添加與編輯 126

7.2.1 行為的添加 126

7.2.2 行為的修改 127

7.3 使用Dreamweaver內置行為 127

7.3.1 上機練習——交換圖像 127

7.3.2 恢復交換圖像 128

7.3.3 上機練習——打開瀏覽器窗口 129

7.3.4 上機練習——調用JavaScript 131

7.3.5 改變屬性 133

7.3.6 上機練習——拖動AP元素 133

7.3.7 上機練習——轉到URL 135

7.3.8 上機練習——彈出信息 136

7.3.9 上機練習——預先載入圖像 138

7.3.10 上機練習——設置狀態欄文本 139

7.3.11 跳轉菜單 140

7.3.12 顯示-隱藏元素 142

7.3.13 上機練習——檢查表單 144

7.3.14 上機練習——增大/收縮效果 146

7.3.15 上機練習——擠壓效果 147

7.4 使用JavaScript製作網頁特效 149

7.4.1 上機練習——製作滾動文字公告 149

7.4.2 上機練習——禁止下載網頁圖像 150

7.4.3 上機練習——設置為IE首頁 152

7.4.4 上機練習——添加到收藏夾 153

7.5 專家秘籍 154

使用CSS樣式表美化網頁 156

8.1 CSS樣式表 157

8.2 CSS基本語法 158

8.3 設置CSS屬性 159

8.3.1 設置CSS類型屬性 159

8.3.2 設置CSS背景屬性 160

8.3.3 設置CSS區塊屬性 162

8.3.4 設置CSS方框屬性 163

8.3.5 設置CSS邊框屬性 164

8.3.6 設置CSS列表屬性 165

8.3.7 設置CSS定位屬性 165

8.3.8 設置CSS擴展屬性 166

8.4 鏈接到或導出外部CSS樣式表 167

8.4.1 上機練習——創建內部樣式表 167

8.4.2 上機練習——創建外部樣式表 169

8.4.3 上機練習——鏈接外部樣式表 170

8.5 綜合應用 172

8.6 專家秘籍 176

用CSS+Div靈活佈局頁面 177

9.1　初識Div 178

9.1.1　Div概述 178

9.1.2　CSS+Div佈局的優勢 178

9.2 關於AP Div 179

9.2.1 AP Div的概念 179

9.2.2 AP Div面板 179

9.2.3 創建普通AP Div 180

9.2.4 創建嵌套AP Div 181

9.3 設置AP Div的屬性 181

9.3.1 設置AP Div的顯示/隱藏屬性 181

9.3.2 改變AP Div的堆疊順序 182

9.3.3 為AP Div添加滾動條 182

9.3.4 改變AP Div的可見性 183

9.4 CSS定位與Div佈局 184

9.4.1 盒子模型 184

9.4.2 元素的定位 184

9.5 CSS+Div佈局的常用方法 187

9.5.1 使用Div對頁面整體規劃 188

9.5.2 使用CSS定位 188

9.6 綜合應用——利用模板製作CSS佈局網頁 190

9.7 專家秘籍 193

第3篇 開發動態數據庫網站

動態網站開發基礎 197

10.1 動態網頁的特點和製作流程 199

10.1.1 動態網頁的特點 199

10.1.2 動態網頁的製作流程 200

10.2 在網頁中插入交互式表單對象 200

10.2.1 上機練習——插入表單域 201

10.2.2 上機練習——插入文本域 202

10.2.3 上機練習——插入複選框和單選按鈕 205

10.2.4 上機練習——插入列表/菜單 207

10.2.5 上機練習——插入文件域和按鈕 208

10.3 搭建本地服務器 212

10.3.1 上機練習——安裝IIS 212

10.3.2 上機練習——配置Web服務器 213

10.4 創建數據庫連接 214

10.4.1 上機練習——創建ODBC連接 214

10.4.2 上機練習——使用DSN創建ADO連接 215

10.5 編輯數據表記錄 216

10.5.1 創建記錄集（查詢） 216

10.5.2 插入記錄 218

10.5.3 更新記錄 219

10.5.4 刪除記錄 220

10.6 添加服務器行為 221

10.6.1 插入重複區域 221

10.6.2 插入顯示區域 222

10.6.3 記錄集分頁 223

10.6.4 轉到詳細頁面 224

10.6.5 轉到相關頁面 224

10.6.6 用户身份驗證 225

10.7 專家秘籍 227

設計動態網站常用模塊 230

11.1 設計留言系統 231

11.1.1 需求分析與設計思路 231

11.1.2 設計數據庫與數據庫連接 232

11.1.3 創建留言列表頁面 234

11.1.4 創建留言詳細頁面 238

11.1.5 創建添加留言頁面 240

11.2 設計新聞發佈系統 244

11.2.1 主要功能頁面 245

11.2.2 設計數據庫 246

11.2.3 創建數據庫連接 248

11.2.4 新聞列表頁面的製作 249

11.2.5 新聞詳細頁面的製作 255

11.2.6 後台登錄頁面 257

11.2.7 刪除新聞頁面的製作 260

11.2.8 添加新聞頁面的製作 262

11.2.9 修改新聞頁面的製作 264

11.2.10 新聞管理總頁面 266

11.3 專家秘籍 270

第4篇 設計與處理精美的網頁圖像

使用Photoshop CS6設計網頁中的特效文字 273

12.1 使用文字工具 274

12.1.1 上機練習——文字的輸入 274

12.1.2 上機練習——設置文字屬性 275

12.1.3 上機練習——文字的變形 277

12.2　Photoshop圖層基本操作 278

12.2.1　添加圖層 278

12.2.2　刪除圖層 278

12.2.3　合併圖層 279

12.2.4　設置圖層樣式 279

12.3　設計常見的網頁特效文字 281

12.4 專家秘籍 288

設計網頁中經典圖像元素 289

13.1　設計網站Logo 290

13.1.1　Logo的特點 290

13.1.2　Logo設計標準 291

13.1.3　上機練習——網站Logo設計實例 291

13.2　網絡廣告的製作 293

13.2.1　網絡廣告設計技巧 293

13.2.2 上機練習——設計網絡廣告 294

13.3 設計網站首頁 298

13.3.1 上機練習——首頁的製作 298

13.3.2 上機練習——切割輸出首頁圖像 304

13.4　設計網頁按鈕 306

13.5 製作導航欄 309

13.6 專家秘籍 312

第5篇 設計超炫的網頁動畫

使用Flash CS6創建基本動畫 314

14.1 Flash CS6工作界面 315

14.2 時間軸與關鍵幀 317

14.2.1 時間軸 317

14.2.2 時間軸中的圖層 318

14.2.3 關鍵幀 318

14.3 創建基本動畫 319

14.3.1 上機練習——逐幀動畫 319

14.3.2 上機練習——補間動畫 322

14.4 創建引導動畫 324

14.4.1 引導動畫的創建原理 324

14.4.2 上機練習——創建引導動畫 324

14.5 創建遮罩動畫 327

14.5.1 遮罩動畫的創建原理 327

14.5.2 上機練習——創建遮罩動畫 327

14.6 創建有聲動畫 330

14.6.1 Flash中可使用的聲音文件類型 330

14.6.2 添加聲音 330

14.6.3 編輯聲音 332

14.6.4 上機練習——創建聲音動畫 333

14.7 專家秘籍 335

使用ActionScript創建交互動畫 336

15.1 ActionScript概述 337

15.1.1 ActionScript的發展史 337

15.1.2 ActionScript 3.0的特點 338

15.2 ActionScript 3.0語句中的參數 339

15.2.1 ActionScript中的專業術語 339

15.2.2 ActionScript 3.0基本語法 341

15.3 常用ActionScript語句 343

15.3.1 for循環 343

15.3.2 while和do while循環 343

15.3.3 條件語句 344

15.3.4 特殊條件判斷 344

15.4 代碼的輸入 344

15.5 ActionScript的編輯環境 345

15.6 利用ActionScript製作交互網頁的動畫 346

15.6.1 綜合應用1——創建跳轉到其他網頁動畫 346

15.6.2 綜合應用2——創建網頁導航動畫 348

15.6.3 綜合應用3——創建鼠標特效 353

15.6.4 綜合應用4——製作發光旋轉效果 356

15.6.5 綜合應用5——製作響應鼠標效果 360

15.7 專家秘籍 364

第6篇 網站的策劃與安全管理

網站的整體策劃 366

16.1 為什麼要進行網站策劃 367

16.2 如何進行網站策劃 368

16.2.1 網站策劃的原則 368

16.2.2 網站策劃的關鍵點 369

16.3 如何確定網站的定位 370

16.4 確定網站的目標用户 371

16.5 網站的內容策劃 372

16.5.1 網站內容策劃的重要性 372

16.5.2 如何做好網站內容策劃 372

網站頁面設計策劃 374

17.1 網站欄目和頁面設計策劃 376

17.1.1 網站的欄目策劃 376

17.1.2 網站的頁面策劃 377

17.2 網站導航設計 378

17.2.1 導航設計的基本要求 378

17.2.2 全局導航的基本要素 379

17.2.3 輔助導航的設計要點 379

17.2.4 導航設計要點 380

17.3 網站頁面版式風格設計 381

17.3.1 網站內容的排版 381

17.3.2 網站網頁的佈局形式 382

17.3.3 網站界面設計的兼容性 384

17.3.4 界面佈局與內容的相關性 384

17.4 網站視覺元素設計 385

17.4.1 讓文字易辨識 385

17.4.2 讓圖片更合理 386

17.4.3 讓表單更易用 387

17.4.4 讓按鈕更易點擊 388

網站的安全與運營維護 390

18.1 Web服務的高級設置 391

18.1.1 設置用户 391

18.1.2 NTFS權限的設置 393

18.1.3 目錄和應用程序訪問權限的設置 394

18.1.4 匿名和授權訪問控制 395

18.1.5 備份與還原IIS 396

18.2 反黑客技術 397

18.2.1 計算機的設置 397

18.2.2 隱藏IP地址 400

18.2.3 操作系統賬號管理 401

18.2.4 安裝必要的安全軟件 402

18.2.5 瀏覽器的安全設置 402

18.2.6 網站防火牆的應用 403

18.3 網站運營 404

18.3.1 網站運營的工作內容 404

18.3.2 網站運營的關鍵問題 405

18.4 網站日常維護與管理 406

第7篇 完整商業網站的建設

網站建設規範和基本流程 408

19.1 網站建設規範 409

19.1.1 組建開發團隊規範 409

19.1.2 開發工具規範 409

19.1.3 超鏈接規範 409

19.1.4 文件夾和文件命名規範 410

19.1.5 代碼設計規範 411

19.2 網站建設的基本流程 411

19.2.1 網站的需求分析 412

19.2.2 網站整體規劃 412

19.2.3 確定網站整體風格 412

19.2.4 收集資源 413

19.2.5 設計網頁圖像 414

19.2.6 編輯製作網頁 415

19.2.7 開發動態網站模塊 416

19.2.8 申請域名和服務器空間 416

19.2.9 測試與發佈上傳 417

19.2.10 網站維護 418

19.2.11 網站推廣 418

設計企業宣傳展示型網站 422

20.1 網站前期策劃 423

20.2 網站的版面佈局及色彩 424

20.2.1 草案及粗略佈局 424

20.2.2 確定網站的色彩 424

20.3 設計網站首頁 425

20.3.1 首頁的設計 425

20.3.2 切割首頁 431

20.4 創建本地站點 433

20.5 二級模板頁面的設計 434

20.5.1 創建庫文件 434

20.5.2 創建模板 436

20.5.3 利用模板創建二級頁面 439

20.6 專家秘籍 441

設計在線購物網站 444

21.1 購物網站設計概述 445

21.1.1 購物網站概念 445

21.1.2 購物網站的設計要點 445

21.1.3 主要功能頁面 446

21.2 創建數據庫與數據庫連接 448

21.2.1 創建數據庫表 448

21.2.2 創建數據庫連接 450

21.3 設計購物系統前台頁面 451

21.3.1 設計商品分類展示頁面 451

21.3.2 設計商品詳細信息頁面 455

21.4 設計購物系統後台管理 457

21.4.1 設計添加商品頁面 457

21.4.2 設計商品管理頁面 461

21.4.3 製作修改頁面 465

21.4.4 設計刪除頁面 467

21. 5 專家秘籍 470 ^[2]