內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取“基礎知識→核心技術→高級應用→行業應用案例→全能拓展”的講解模式，深入淺出地講解Dreamweaver CC網頁設計的各項技術及實戰技能。

本書第1篇基礎知識主要講解網頁設計與制作基礎、認識Dreamweaver CC、創建網頁中的文本；第2篇核心技術主要講解使用圖像和多媒體、HTML5新增元素與屬性速覽、設計網頁超鏈接、表格的應用、使用網頁表單和行為、使用模板和庫；第3篇高級應用主要講解使用CSS樣式表美化網頁、網頁布局典型范例、在網頁中編寫JavaScript、網站的發布、網站配色與布局；第4篇行業應用案例主要講解制作電子商務類網頁、制作網上音樂類網頁、制作休閑娛樂類網頁、制作移動設備類網頁的方法；第5篇全能拓展主要講解網站優化與推廣、網站安全與防御。

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

前   言

Preface

“實戰從入門到精通(視頻教學版)”系列圖書是專門為職場辦公初學者量身定做的一套學習用書，整套書涵蓋辦公、網頁設計等方面。整套書具有以下特點。

前沿科技

無論是Office辦公，還是Dreamweaver CC、Photoshop CC、Flash CC，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。

權威的作者團隊

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

學習型案例設計

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

為什么要寫這樣一本書

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

本書特色

 零基礎、入門級的講解

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

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

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

 隨時檢測自己的學習成果

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

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

 細致入微、貼心提示

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

 專業創作團隊和技術支持

本書由劉玉紅、侯永崗編著，IT應用實訓中心提供技術支持。您在學習過程中遇到任何問題，可關注微信訂閱號zhihui8home進行提問，專家人員會在線答疑。

 “Dreamweaver CC網頁設計”學習最佳途徑

本書以學習“Dreamweaver網頁設計”的最佳制作流程來分配章節，從Dreamweaver CC基本操作開始，然后講解了網頁美化布局、行業應用案例、網站全能拓展等。特別在本書中講述了4個行業應用案例的設計過程，以便更進一步地提高大家的實戰技能。本書架構如下。

 

超值光盤

 全程同步教學錄像

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

 超多容量王牌資源大放送

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

讀者對象

 沒有任何Dreamweaver CC基礎的初學者。

 有一定的Dreamweaver基礎，想精通網頁設計的人員。

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

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

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

創作團隊

本書由劉玉紅和王攀登編著，參加編寫的人員還有劉玉萍、周佳、付紅、李園、郭廣新、侯永崗、蒲娟、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、梁云梁和周浩浩。在編寫過程中，我們力盡所能地將最好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。

                            

 

                                                               編　者

 

目錄

第1篇  基礎知識

第1章　開啟網頁設計之路——網頁設計與制作基礎

1.1  認識網頁和網站 4

1.1.1　什么是網頁 4

1.1.2　什么是網站 5

1.1.3　網站的種類和特點 5

1.2  網頁的相關概念 6

1.2.1　因特網與萬維網 6

1.2.2　瀏覽器與HTML 6

1.2.3　URL、域名與IP地址 7

1.2.4　上傳和下載 8

1.3  網頁的HTML構成 8

1.3.1　文檔標簽 9

1.3.2　頭部標簽 9

1.3.3　主體標簽 9

1.4  HTML常用標簽 9

1.5  實戰演練——制作日程表 21

1.6  高手甜點 25

1.7  跟我練練手 26

第2章　磨刀不誤砍柴工——認識Dreamweaver CC7

2.1  走進Dreamweaver CC 28

2.1.1　案例1——安裝Dreamweaver CC 28

2.1.2　案例2——啟動Dreamweaver CC 29

2.2  Dreamweaver CC的工作環境 30

2.2.1　認識Dreamweaver CC的工作界面 30

2.2.2　熟悉【插入】面板組 32

2.3  體驗Dreamweaver CC的新增功能 34

2.4  認識站點 36

2.5  創建站點 36

2.5.1　案例3——創建本地站點 37

2.5.2　案例4——創建遠程站點 37

2.6  管理站點 38

2.6.1　案例5——打開站點 38

2.6.2　案例6——編輯站點 39

2.6.3　案例7——刪除站點 39

2.6.4　案例8——復制站點 40

2.7  操作站點文件及文件夾 40

2.7.1　案例9——創建文件夾 40

2.7.2　案例10——創建文件 41

2.7.3　案例11——文件或文件夾的移動和復制 41

2.7.4　案例12——刪除文件或文件夾 42

2.8  實戰演練1——創建本地站點 42

2.9  實戰演練2——創建站點文件和文件夾 43

2.10  高手甜點 45

2.11  跟我練練手 46

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

3.1  網頁設計的基本操作 48

3.1.1　案例1——新建網頁 48

3.1.2　案例2——保存網頁 48

3.1.3　案例3——打開網頁 49

3.1.4　案例4——預覽網頁 49

3.2  設置頁面屬性 50

3.3  用文字充實網頁 54

3.3.1　案例5——插入文字 54

3.3.2　案例6——設置字體 55

3.3.3　案例7——設置字號 57

3.3.4　案例8——設置字體顏色 57

3.3.5　案例9——設置字體樣式 58

3.3.6　案例10——編輯段落 59

3.3.7　案例11——檢查拼寫 64

3.3.8　案例12——創建項目列表 65

3.4  特殊文本的操作 67

3.4.1　案例13——插入換行符 67

3.4.2　案例14——插入水平線 67

3.4.3　案例15——插入日期 68

3.4.4　案例16——插入特殊字符 69

3.4.5　案例17——插入注釋 70

3.5  實戰演練——設置主頁中的跟蹤圖像 71

3.6  高手甜點 73

3.7  跟我練練手 74

第2篇  核心技術

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

4.1  選擇適合網頁中圖像的格式 78

4.2  用圖像美化網頁 79

4.2.1　案例1——插入圖像 79

4.2.2　案例2——圖像屬性設置 80

4.2.3　案例3——圖像的對齊方式 82

4.2.4　案例4——插入鼠標經過圖像 83

4.2.5　案例5——插入圖像占位符 84

4.3  在網頁中插入多媒體 85

4.3.1　案例6——插入背景音樂 85

4.3.2　案例7——插入Flash動畫 86 

4.3.3　案例8——插入FLV 87

4.3.4　案例9——插入HTML5音頻 88

4.3.5　案例10——插入HTML5視頻 89

4.4　實戰演練——制作圖文并茂的網頁 90

4.5  高手甜點 92

4.6  跟我練練手 92

第5章　Web新面孔——HTML5新增元素與屬性速覽

5.1  新增的主體結構元素 94

5.1.1　案例1——section元素 94

5.1.2　案例2——article元素 94

5.1.3　案例3——aside元素 97

5.1.4　案例4——nav元素 98

5.1.5　案例5——time元素 100

5.2  新增的非主體結構元素 101

5.2.1　案例6——header元素 101

5.2.2　案例7——hgroup元素 102

5.2.3　案例8——footer元素 103

5.2.4　案例9——figure元素 104

5.2.5　案例10——address元素 105

5.3  新增其他常用元素 107

5.3.1　案例11——mark元素 107

5.3.2　案例12——rp、rt與ruby元素 107

5.3.3　案例13——progress元素 108

5.3.4　案例14——command元素 109

5.3.5　案例15——embed元素 109

5.3.6　案例16——details與summary元素 110

5.3.7　案例17——datalist元素 110

5.4  新增的全局屬性 111

5.4.1　案例18——content Editable屬性 111

5.4.2　案例19——spellcheck屬性 112

5.4.3　案例20——tabIndex屬性 112

5.5  新增的其他屬性與廢除的屬性 114

5.5.1　案例21——表單相關的屬性 114

5.5.2　案例22——鏈接相關屬性 119

5.5.3　案例23——其他新增屬性 121

5.5.4　案例24——HTML5廢除的屬性 121

5.6  實戰演練——制作HTML5的網頁 123

5.7  高手甜點 125

5.8  跟我練練手 126

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

6.1  鏈接與路徑 128

6.1.1　鏈接的概念 128

6.1.2　鏈接的路徑 128

6.1.3　鏈接的類型 129

6.2  添加網頁超鏈接 130

6.2.1　案例1——添加文本鏈接 130

6.2.2　案例2——添加圖像鏈接 131

6.2.3　案例3——創建外部鏈接 132

6.2.4　案例4——創建錨記鏈接 132

6.2.5　案例5——創建圖像熱點鏈接 133

6.2.6　案例6——創建電子郵件鏈接 134

6.2.7　案例7——創建下載文件的鏈接 135

6.2.8　案例8——創建空鏈接 136

6.2.9　案例9——創建腳本鏈接 136

6.2.10  案例10——鏈接的檢查 137

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

6.4  高手甜點 139

6.5  跟我練練手 139

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

7.1  插入表格 142

7.2  選擇表格 143

7.2.1　案例1——選擇完整的表格 143

7.2.2　案例2——選擇行和列 144

7.2.3　案例3——選擇單元格 144

7.3  表格屬性 145

7.3.1　案例4——設置單元格屬性 145

7.3.2　案例5——設置整個表格屬性 146

7.4  操作表格 147

7.4.1　案例6——調整大小 147

7.4.2　案例7——增加行、列 147

7.4.3　案例8——刪除行、列 149

7.4.4　案例9——剪切、復制和粘貼單元格 149

7.4.5　案例10——合并和拆分單元格 150

7.5　操作表格數據 151

7.5.1　案例11——向表格中輸入文本 151

7.5.2　案例12——向表格中插入圖像 151

7.5.3　案例13——表格數據的排序 152

7.5.4　案例14——導入表格數據 153

7.5.5　案例15——導出表格數據 153

7.6  實戰演練——使用表格布局網頁 154

7.7  高手甜點 157

7.8  跟我練練手 158

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

8.1  認識表單 160

8.2  在網頁中插入表單元素 160

8.2.1　案例1——插入表單域 161

8.2.2　案例2——插入文本域 161

8.2.3　案例3——插入密碼域 163

8.3  在網頁中插入復選框和單選按鈕 164

8.3.1　案例4——插入復選框 164

8.3.2　案例5——插入單選按鈕 165

8.4  制作網頁菜單和列表 165

8.4.1　案例6——插入下拉菜單 165

8.4.2　案例7——插入滾動列表 166

8.5  在網頁中插入按鈕 167

8.5.1　案例8——插入按鈕 167

8.5.2　案例9——插入圖像按鈕 167

8.6  插入文件上傳域 168

8.7  添加網頁行為 169

8.7.1　案例10——打開【行為】面板 169

8.7.2　案例11——添加行為 170

8.8  常用行為的應用 170

8.8.1　案例12——交換圖像 171

8.8.2　案例13——彈出信息 172

8.8.3　案例14——打開瀏覽器窗口 173

8.8.4　案例15——檢查表單行為 175

8.8.5　案例16——設置狀態欄文本 177

8.9  實戰演練——使用表單制作留言本 178

8.10  高手甜點 181

8.11  跟我練練手 182

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

9.1  創建模板 184

9.1.1　案例1——在空白文檔中創建模板 184

9.1.2　案例2——在【資源】面板中創建模板 184

9.1.3　案例3——從現有文檔創建模板 185

9.1.4　案例4——創建可編輯區域 186

9.2  管理模板 187

9.2.1　案例5——從模板中分離文檔 187

9.2.2　案例6——更新模板及基于模板的網頁 188

9.3  庫概述 189

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

9.4.1　案例7——創建庫項目 190

9.4.2　案例8——庫項目的應用 191

9.4.3　案例9——編輯庫項目 192

9.5  實戰演練——創建基于模板的頁面 194

9.6　高手甜點 196

9.7　跟我練練手 196

第3篇  高級應用

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

10.1  初識CSS 200

10.1.1　CSS概述 200

10.1.2　CSS的作用 200

10.1.3　基本CSS語法 201

10.1.4　案例1——使用Dreamweaver CC

             編寫CSS 201

10.2  使用CSS的方法 203

10.2.1　案例2——行內樣式 203

10.2.2　案例3——內嵌樣式 203

10.2.3　案例4——鏈接樣式 204

10.2.4　案例5——導入樣式 205

10.2.5　案例6——優先級問題 206

10.3  使用CSS樣式美化網頁 208

10.3.1　案例7——使用字體樣式美化文字 208

10.3.2　案例8——使用文本樣式美化文本 212

10.3.3　案例9——使用背景樣式美化背景 215

10.3.4　案例10——使用鏈接樣式美化鏈接 218

10.3.5　案例11——使用列表樣式美化列表 219

10.3.6　案例12——使用區塊樣式美化區塊 221

10.3.7　案例13——使用寬高樣式設定寬高 222

10.3.8　案例14——使用邊框樣式美化邊框 223

10.4  實戰演練——設定網頁中鏈接樣式 225

10.5  高手甜點 228

10.6  跟我練練手 228

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

11.1  使用CSS排版 230

11.1.1　案例1——將頁面用DIV分塊 230

11.1.2　案例2——設置各塊位置 230

11.1.3　案例3——用CSS定位 230

11.2  固定寬度網頁剖析與布局 233

11.2.1　案例4——網頁單列布局模式 233

11.2.2　案例5——網頁1-2-1型布局模式 237

11.2.3　案例6——網頁1-3-1型布局模式 240

11.3  自動縮放網頁1-2-1型布局模式 244

11.3.1　案例7——“1-2-1”等比例變寬布局 244

11.3.2　案例8——“1-2-1”單列變寬布局 245

11.4  自動縮放網頁1-3-1型布局模式 246

11.4.1　案例9——“1-3-1”三列寬度等比例布局 246

11.4.2　案例10——“1-3-1”單側列寬度固定的

             變寬布局 246

11.4.3　案例11——“1-3-1”中間列寬度固定的

　          變寬布局 249

11.4.4　案例12——“1-3-1”雙側列寬度固定的

             變寬布局 252

11.4.5　案例13——“1-3-1”中列和側列寬度

             固定的變寬布局 255

11.5  實戰演練——使用CSS設定網頁布局

          列的背景色 258

11.6  高手甜點 259

11.7  跟我練練手 260

第12章　讓網頁更絢麗——在網頁中編寫JavaScript

12.1  認識JavaScript 262

12.1.1　什么是JavaScript 262

12.1.2　JavaScript的特點 262

12.2  JavaScript 在HTML中的使用 263

12.2.1　案例1——在HTML網頁頭中嵌入

              JavaScript代碼 263

12.2.2　案例2——在HTML網頁中嵌入

              JavaScript代碼 264

12.2.3　案例3——在HTML網頁的元素事件中嵌

             入JavaScript代碼 265

12.2.4　案例4——在HTML中調用已經存在的

              JavaScript文件 266

12.2.5　案例5——通過JavaScript偽URL引入

              JavaScript腳本代碼 267

12.3　JavaScript的基本語法 268

12.3.1　執行順序 268

12.3.2　區分大小寫 268

12.3.3　分號與空格 268

12.3.4　對代碼行進行折行 269

12.3.5　案例6——注釋 269

12.4  JavaScript 的數據結構 270

12.4.1　標識符 270

12.4.2　關鍵字 271

12.4.3　保留字 271

12.4.4　常量 272

12.4.5　變量 272

12.5　案例7——使用函數 274

12.6  JavaScript的常用事件 275

12.6.1　案例8——頁面事件 275

12.6.2　案例9——鼠標事件 276

12.6.3　案例10——鍵盤事件 277

12.6.4　案例11——表單處理事件 279

12.7  實戰演練——使用事件動態改變圖片

           的焦點 281

12.8  高手甜點 282

12.9  跟我練練手 282

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

13.1　上傳網站前的準備工作 284

13.1.1　注冊域名 284

13.1.2　申請空間 285

13.2  測試網站 286

13.2.1　案例1——測試站點范圍的鏈接 286

13.2.2　案例2——改變站點范圍的鏈接 286

13.2.3　案例3——查找和替換 287

13.2.4　案例4——清理文檔 288

13.3  上傳網站 289

13.3.1　案例5——使用Dreamweaver CC上傳網站 289

13.3.2　案例6——使用FTP工具上傳網站 290

13.4  高手甜點 292

13.5  跟我練練手 293

第14章　整體把握網站結構——網站配色與布局

14.1　善用色彩設計網頁 296

14.1.1　認識色彩 296

14.1.2　案例1——網頁上的色彩處理 297

14.2  網頁色彩的搭配 300

14.2.1　案例2——確定網站的主題色 300

14.2.2　案例3——網頁色彩搭配原理 301

14.2.3　案例4——網頁中色彩的搭配 303

14.2.4　案例5——網頁元素的色彩搭配 304

14.2.5　案例6——網頁色彩搭配的技巧 305

14.3  布局網站板塊結構 306

14.3.1　案例7——“國”字型 307

14.3.2　案例8——標題正文型 307

14.3.3　案例9——左右框架型 307

14.3.4　案例10——上下框架型 307

14.3.5　案例11——綜合框架型 308

14.3.6　案例12——封面型 308

14.3.7　案例13——Flash型 308

14.4  網站配色應用案例 308

14.4.1　案例14——網絡購物網站色彩應用 308

14.4.2　案例15——游戲網站色彩應用 309

14.4.3　案例16——企業門戶網站色彩應用 310

14.4.4　案例17——時政新聞網站色彩應用 311

14.4.5　案例18——影音視頻網站色彩應用 311

14.4.6　案例19——電子商務網站色彩應用 312

14.4.7　案例20——娛樂網站色彩應用 312

14.5　實戰演練——定位網站頁面的框架 313

14.6　高手甜點 314

14.7  跟我練練手 314

第4篇  行業應用案例

第15章　行業綜合案例1——制作電子商務類網頁

15.1  整體布局 318

15.1.1　設計分析 318

15.1.2　排版架構 318

15.2  模塊組成 319

15.3  制作步驟 319

15.3.1　樣式表 319

15.3.2　網頁頭部 325

15.3.3　主體第一通欄 328

15.3.4　主體第二通欄 328

15.3.5　主體第三通欄 329

15.3.6　網頁底部 331

第16章　行業綜合案例2——制作網上音樂類網頁

16.1  構思布局 336

16.1.1　設計分析 336

16.1.2　排版架構 336

16.2  模塊分割 338

16.2.1　頁頭部分 338

16.2.2　左側內容列表 340

16.2.3　中間內容列表 342

16.2.4　右側內容列表 344

16.2.5　頁腳部分 346

16.3  整體調整 346

16.3.1　頁面內容主體調整 346

16.3.2　頁面整體調整 347

第17章　行業綜合案例3——制作休閑娛樂類網頁

17.1  整體布局 350

17.1.1　設計分析 350

17.1.2　排版架構 351

17.2  模塊組成 351

17.3  制作步驟 352

17.3.1　制作樣式表 352

17.3.2　Logo與導航菜單 359

17.3.3　搜索條 359

17.3.4　左側視頻模塊 360

17.3.5　評論模塊 361

17.3.6　右側熱門推薦 362

17.3.7　底部模塊 365

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

18.1  網站設計分析 368

18.2  網站結構分析 368

18.3  網站主頁面的制作 369

18.4  網站成品預覽 370

第5篇  全能拓展

第19章　增加點擊率——網站優化與推廣

19.1  在網站中添加廣告 380

19.1.1　網站廣告分類 380

19.1.2　添加網站廣告 381

19.2　添加實用查詢工具 382

19.2.1　添加天氣預報 382

19.2.2　添加IP查詢 383

19.2.3　添加萬年歷 383

19.2.4　添加列車時刻查詢 384

19.3  網站的宣傳與推廣 385

19.3.1　網站宣傳實用策略 385

19.3.2　利用大眾傳媒進行推廣 386

19.3.3　利用網絡媒介進行推廣 386

19.3.4　利用其他形式進行推廣 388

19.4  實戰演練——查看網站的流量 388

19.5  高手甜點 391

19.6  跟我練練手 391

第20章　打造堅實的堡壘——網站安全與防御

20.1  網站維護基礎知識 394

20.1.1　網站的維護與安全 394

20.1.2　常見的網站攻擊方式 395

20.2  網站安全防御策略 396

20.2.1　案例1——檢測上傳文件的安全性 396

20.2.2　案例2——設置網站訪問權限 397

20.3  高手甜點 399

20.4  跟我練練手 400