內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取“網站基礎入門→制作靜態網頁→網頁美化布局→設計網頁元素→開發動態網站→網站開發實戰→網站全能擴展”的講解模式，深入淺出地講解網頁設計和網站建設的各項技術及實戰技能。

本書第1篇【網站基礎入門】主要內容包括網頁設計與網站建設基礎、網站配色與布局、HTML語言速成、網站建設基本流程與制作工具等。第2篇【制作靜態網頁】主要內容包括使用Dreamweaver CC創建站點、使用文本豐富網頁內容、使用圖像與多媒體網頁元素、設計網頁中的超鏈接、使用網頁表單和行為等。第3篇【網頁美化布局】主要內容包括使用表格布局網頁、使用CSS層疊樣式表、利用CSS+Div布局網頁等。第4篇【設計網頁元素】主要內容包括調整與修飾圖像、制作網頁按鈕與導航條、制作網頁特效邊線與背景、制作網頁Logo與網頁Banner、制作簡單網頁動畫元素、創建交互式動畫、制作動態網站的Logo與Banner等。第5篇【開發動態網站】主要內容包括認識PHP語言、配置動態網站運行環境、使用MySQL數據庫、動態網站應用模塊開發等。第6篇【網站開發實戰】主要內容包括開發網站用戶管理系統和開發信息資訊管理系統等。第7篇【網站全能擴展】主要內容包括網站的測試與發布、網站安全與防御、網站優化與推廣等。

 

本書面向初、中級用戶，適合任何想學習網頁設計和網站建設的人員，無論您是否從事計算機相關行業，無論您是否接觸過網頁設計和網站建設，通過學習本書均可快速掌握設計網頁和開發動態網站的方法和技巧。

 

 

前    言

　　“網站開發案例課堂”系列圖書是專門為辦公技能和網頁設計初學者量身定制的一套學習用書。整套書涵蓋網頁設計、網站開發、數據庫設計等方面。整套書具有以下幾個特點。

面向前沿科技

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

權威的作者團隊

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

學習型案例設計

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

為什么要寫這樣一本書

　　隨著網絡的發展，很多企事業單位和廣大網民對于建立網站的需求越來越強烈。另外，對于大中專院校，很多學生需要做網站畢業設計，但是這些讀者又不懂網頁代碼程序，不知道從哪里下手。針對這些情況，我們編寫了本書，以期引導讀者學習網頁設計和網站建設的全面知識。通過本書的實訓，讀者可以很快地學會設計網頁和開發網站，提高職業化能力，從而幫助解決公司與求職者的雙重需求問題。

本書特色

零基礎、入門級的講解

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

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

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

隨時檢測自己的學習成果

　　大部分章末的“疑難解惑”板塊，均根據本章內容精選而成，從而幫助讀者解決自學過程中最常見的疑難問題。

細致入微、貼心提示

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

專業創作團隊和技術支持

　　您在學習過程中遇到任何問題，可加入QQ群(案例課堂VIP，號碼為451102631)進行提問，專家人員會在線答疑。

超值資源大放送

全程同步教學錄像

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

超多容量王牌資源

　　贈送大量王牌資源，包括本書實例源代碼、教學幻燈片、本書精品教學視頻、88個實用類網頁模板、12部網頁開發必備參考手冊、11個精彩JavaScript案例、Dreamweaver CC快捷鍵速查手冊、HTML標簽速查表、精彩網站配色方案賞析、網頁樣式與布局案例賞析、CSS+Div布局賞析案例、Web前端工程師常見面試題等。讀者可以通過QQ群(案例課堂VIP，號碼為451102631)獲取贈送資源，也可以掃描二維碼，下載本書資源。

讀者對象

沒有任何網頁設計和網站建設基礎的初學者。

有一定的網頁設計和網站建設的基礎，想精通網站開發的人員。

有一定的動態網站開發基礎，沒有項目經驗的人員。

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

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

創作團隊

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

　　　　

 

　　                                                      編  者  

 

 

目    錄

第1篇  網站基礎入門

 

第1章  網站建設入門——網頁設計與

網站建設基礎 3

1.1  認識網頁和網站 4

1.1.1  網頁 4

1.1.2  網站 4

1.1.3  網站的分類 5

1.2  認識網頁的基本組成 6

1.2.1  網址 7

1.2.2  網頁標題 7

1.2.3  Logo 7

1.2.4  文本 8

1.2.5  圖像 8

1.2.6  導航欄 9

1.2.7  超鏈接 9

1.2.8  表單 9

1.2.9  動畫 10

1.2.10  Banner 10

1.3  認識靜態網頁與動態網頁 11

1.3.1  靜態網頁 11

1.3.2  動態網頁 11

1.4  網站建設的相關概念 12

1.4.1  因特網與萬維網 12

1.4.2  瀏覽器與HTML 12

1.4.3  URL、域名與IP地址 13

1.4.4  上傳和下載 14

1.5  疑難解惑 14

第2章  第一視覺最重要——網站配色

與布局 15

2.1  善用色彩設計網頁 16

2.1.1  認識色彩 16

2.1.2  確定網站的主題色 17

2.1.3  網頁中色彩的搭配 19

2.1.4  網頁元素的色彩搭配 20

2.1.5  網頁色彩搭配的技巧 21

2.2  常見的網站布局結構 23

2.2.1  “國”字型 24

2.2.2  標題正文型 24

2.2.3  左右框架型 24

2.2.4  上下框架型 25

2.2.5  綜合框架型 25

2.2.6  封面型 25

2.2.7  Flash型 26

2.3  網站的色彩應用案例 26

2.3.1  案例1——網絡購物類網站的

色彩應用 26

2.3.2  案例2——游戲類網站的色彩

應用 27

2.3.3  案例3——企業門戶網站的色彩

應用 28

2.3.4  案例4——時政新聞類網站的

色彩應用 28

2.3.5  案例5——影音類網站的色彩

應用 29

2.3.6  案例6——娛樂類網站的色彩

應用 30

2.4  綜合案例——定位網站頁面的框架 30

2.5  疑難解惑 31

第3章  讀懂網頁密碼——HTML語言

速成 33

3.1  網頁的HTML構成 34

3.1.1  文檔標記 34

3.1.2  頭部標記 35

3.1.3  主體標記 35

3.2  HTML的常用標記 36

3.2.1  標題標記<h1>到<h6> 36

3.2.2  段落標記<p> 36

3.2.3  換行標記<br> 37

3.2.4  鏈接標記<a> 38

3.2.5  列表標記<ul> 39

3.2.6  圖像標記<img> 41

3.2.7  表格標記<table> 44

3.2.8  表單標記<form> 45

3.3  綜合案例——制作日程表 46

3.4  疑難解惑 49

第4章  開啟網頁制作之路——網站建設

基本流程與制作工具 51

4.1  建站方式 52

4.1.1  自助建站 52

4.1.2  智能建站 52

4.1.3  專業設計 53

4.2  建站流程 53

4.2.1  網站規劃 53

4.2.2  搜集資料 54

4.2.3  制作網頁 54

4.2.4  網站測試 55

4.2.5  申請域名 55

4.2.6  申請空間 55

4.2.7  網站備案 55

4.2.8  發布網頁 57

4.2.9  網站推廣和維護 57

4.3  制作網頁的常用軟件 58

4.3.1  案例1——認識網頁布局

軟件Dreamweaver CC 58

4.3.2  案例2——認識圖像處理

軟件Photoshop CC 58

4.3.3  案例3——認識動畫制作

軟件Flash CC 59

4.4  綜合案例——網頁制作軟件間的

相互關系 60

4.5  疑難解惑 61

 

　　

第2篇  制作靜態網頁

 

第5章  磨刀不誤砍柴工——使用

DreamweaverCC創建站點 65

5.1  認識Dreamweaver CC 66

5.1.1  啟動Dreamweaver CC 66

5.1.2  認識Dreamweaver CC的

工作區 67

5.1.3  體驗Dreamweaver CC的新增

功能 69

5.2  創建站點 72

5.2.1  案例1——創建本地站點 72

5.2.2  案例2——創建遠程站點 73

5.3  管理站點 74

5.3.1  案例3——打開站點 74

5.3.2  案例4——編輯站點 75

5.3.3  案例5——刪除站點 76

5.3.4  案例6——復制站點 76

5.3.5  案例7——導出與導入站點 77

5.4  操作站點文件及文件夾 79

5.4.1  案例8——創建文件夾 79

5.4.2  案例9——創建文件 79

5.4.3  案例10——文件或文件夾的

移動和復制 80

5.4.4  案例11——刪除文件或

文件夾 80

5.5  綜合案例——創建本地站點 81

5.6  疑難解惑 82

第6章  制作我的第一個網頁——使用文本

豐富網頁內容 83

6.1  網頁文檔的基本操作 84

6.1.1  案例1——創建網頁 84

6.1.2  案例2——頁面屬性 84

6.1.3  案例3——保存網頁 87

6.1.4  案例4——打開網頁 87

6.1.5  案例5——預覽網頁 88

6.2  使用文字添加網頁內容 89

6.2.1  案例6——插入文字 89

6.2.2  案例7——設置字體 90

6.2.3  案例8——設置字號 90

6.2.4  案例9——設置字體顏色 91

6.2.5  案例10——設置字體樣式 92

6.2.6  案例11——編輯段落 94

6.2.7  案例12——創建項目列表 99

6.3  使用特殊文本添加網頁內容 101

6.3.1  案例13——插入換行符 101

6.3.2  案例14——插入水平線 102

6.3.3  案例15——插入日期 102

6.3.4  案例16——插入特殊字符 103

6.4  綜合案例——制作圖文并茂的網頁 104

6.5  疑難解惑 107

第7章  有圖有真相——使用圖像與

多媒體網頁元素 109

7.1  常用圖像格式 110

7.1.1  GIF格式 110

7.1.2  JPEG格式 110

7.1.3  PNG格式 111

7.2  用圖像美化網頁 111

7.2.1  案例1——插入圖像 111

7.2.2  案例2——設置圖像的屬性 113

7.2.3  案例3——設置圖像對齊

方式 115

7.2.4  案例4——剪裁需要的圖像 116

7.2.5  案例5——調整圖像的亮度

與對比度 117

7.2.6  案例6——設置圖像的銳化

效果 118

7.3  插入其他圖像元素 119

7.3.1  案例7——插入鼠標經過

圖像 119

7.3.2  案例8——插入圖像占位符 121

7.3.3  案例9——插入圖像熱點

區域 122

7.4  在網頁中插入多媒體 123

7.4.1  案例10——插入背景音樂 123

7.4.2  案例11——插入Flash動畫 124

7.4.3  案例12——插入FLV視頻 125

7.4.4  案例13——插入HTML 5

音頻 127

7.4.5  案例14——插入HTML 5

視頻 129

7.5  綜合案例1——制作精彩的多媒體

網頁 130

7.6  綜合案例2——在代碼中插入背景

音樂 132

7.7  疑難解惑 134

第8章  不在網頁中迷路——設計網頁中

的超鏈接 135

8.1  超級鏈接 136

8.1.1  鏈接的概念 136

8.1.2  常規的鏈接 136

8.1.3  鏈接的類型 137

8.2  鏈接路徑 138

8.2.1  什么是URL 138

8.2.2  絕對路徑 138

8.2.3  相對路徑 139

8.2.4  根相對路徑 139

8.3  創建超級鏈接的方法 139

8.3.1  案例1——使用菜單命令創建

鏈接 139

8.3.2  案例2——使用【屬性】面板

創建鏈接 140

8.3.3  案例3——使用【指向文件】

按鈕創建鏈接 140

8.4  創建不同種類的網頁超鏈接 141

8.4.1  案例4——添加文本鏈接 141

8.4.2  案例5——添加圖像鏈接 142

8.4.3  案例6——創建外部鏈接 143

8.4.4  案例7——創建錨記鏈接 143

8.4.5  案例8——創建圖像熱點

鏈接 145

8.4.6  案例9——創建電子郵件

鏈接 146

8.4.7  案例10——創建下載文件的

鏈接 147

8.4.8  案例11——創建空鏈接 148

8.4.9  案例12——創建腳本鏈接 148

8.5  綜合案例——為企業網站添加友情

鏈接 149

8.6  疑難解惑 150

第9章  讓網頁互動起來——使用網頁

表單和行為 151

9.1  認識表單 152

9.1.1  什么是表單 152

9.1.2  認識表單對象 152

9.1.3  案例1——插入表單 155

9.1.4  案例2——設置表單屬性 156

9.2  常用表單對象的應用 157

　　

　　

9.2.1  案例3——插入文本域 157

9.2.2  案例4——插入密碼域 158

9.2.3  案例5——插入復選框 159

9.2.4  案例6——插入單選按鈕 160

9.2.5  案例7——插入下拉菜單 160

9.2.6  案例8——插入滾動列表 161

9.2.7  案例9——插入按鈕 162

9.2.8  案例10——插入圖像按鈕 162

9.2.9  案例11——插入文件上傳域 163

9.3  認識行為 164

9.3.1  行為的概念 164

9.3.2  案例12——打開【行為】

面板 164

9.4  常用內置行為的應用 165

9.4.1  案例13——交換圖像 165

9.4.2  案例14——彈出信息 167

9.4.3  案例15——打開瀏覽器窗口 168

9.4.4  案例16——檢查表單行為 170

9.4.5  案例17——設置狀態欄文本 171

9.5  綜合案例——使用表單制作留言本 173

9.6  疑難解惑 176

 

　　

第3篇  網頁美化布局

 

第10章  簡單的網頁布局——使用表格

 布局網頁 179

10.1  案例1——插入表格 180

10.2  選中表格 181

10.2.1  案例2——選中完整的表格 181

10.2.2  案例3——選中行和列 182

10.2.3  案例4——選中單元格 183

10.3  表格屬性 183

10.3.1  案例5——設置單元格屬性 184

10.3.2  案例6——設置整個表格

 屬性 185

10.4  操作表格 185

10.4.1  案例7——調整表格的大小 185

10.4.2  案例8——增加行和列 186

10.4.3  案例9——刪除行、列、

 單元格 187

10.4.4  案例10——剪切、復制和粘貼

 單元格 188

10.4.5  案例11——合并和拆分

 單元格 189

10.5  操作表格數據 190

10.5.1  案例12——在表格中輸入

 文本 190

10.5.2  案例13——在表格中插入

 圖像 191

10.5.3  案例14——表格中的數據

 排序 191

10.5.4  案例15——導入Excel表格

 數據 192

10.6  綜合案例——使用表格布局網頁 193

10.7  疑難解惑 196

第11章  讀懂樣式表密碼——使用CSS

 層疊樣式表 197

11.1  初識CSS樣式表 198

11.1.1  什么是CSS 198

11.1.2  CSS的3種類型 198

11.1.3  CSS的語法格式 199

11.1.4  案例1——使用Dreamweaver

 編寫CSS 200

11.2  CSS的使用方式 201

11.2.1  案例2——行內樣式 201

11.2.2  案例3——內嵌樣式 202

11.2.3  案例4——鏈接樣式 203

11.2.4  案例5——導入樣式 204

11.3  CSS中的常用樣式 205

11.3.1  案例6——使用字體樣式 206

11.3.2  案例7——使用文本樣式 210

11.3.3  案例8——使用背景樣式 214

11.3.4  案例9——設計邊框樣式 221

11.3.5  案例10——設置列表樣式 225

11.4  綜合案例——制作簡單公司主頁 229

11.5  疑難解惑 232

第12章  架構師的大比拼——利用CSS+

 Div布局網頁 233

12.1  認識并創建層 234

12.1.1  什么是層 234

12.1.2  案例1——使用Dreamweaver

 創建層 234

12.2  Div層的定位方法 235

12.2.1  盒子模型的概念 235

12.2.2  案例2——定義網頁border

 區域 236

12.2.3  案例3——定義網頁padding

 區域 237

12.2.4  案例4——定義網頁margin

 區域 239

12.3  使用CSS排版 242

12.3.1  案例5——將頁面用DIV

 分塊 242

12.3.2  案例6——設置各塊位置 243

12.3.3  案例7——用CSS定位 243

12.4  常見網頁布局模式 246

12.4.1  案例8——網頁單列布局

 模式 246

12.4.2  案例9——網頁1-2-1型布局

 模式 250

12.4.3  案例10——網頁1-3-1型布局

 模式 253

12.5  綜合案例——創建左右布局頁面 257

12.6  疑難解惑 260

　　

 

　　

第4篇  設計網頁元素

 

第13章  網頁圖像說變就變——調整

 與修飾圖像 263

13.1  圖像色調的調整 264

13.1.1  案例1——調整圖像的亮度

 與對比度 264

13.1.2  案例2——使用【色階】命令

 調整圖像 264

13.1.3  案例3——使用【曲線】命令

 調整圖像 268

13.1.4  案例4——調整圖像的

 曝光度 271

13.2  圖像色彩的調整 272

13.2.1  案例5——使用【色相/飽和度】

 命令 272

13.2.2  案例6——使用【自然飽和度】

 命令 274

13.2.3  案例7——使用【色彩平衡】

 命令 274

13.2.4  案例8——使用【黑白】

 命令 275

13.2.5  案例9——使用【照片濾鏡】

 命令 276

13.2.6  案例10——使用【通道混合器】

 命令 277

13.2.7  案例11——使用【匹配顏色】

 命令 278

13.2.8  案例12——使用【替換顏色】

 命令 280

13.2.9  案例13——使用【可選顏色】

 命令 282

13.2.10  案例14——使用【陰影/高光】

  命令 283

13.3  修復圖像中的污點與瑕疵 284

13.3.1  案例15——修復圖像中的

 污點 284

13.3.2  案例16——修復圖像中的

 瑕疵 285

13.3.3  案例17——修復圖像選中的

 區域 286

13.3.4  案例18——內容感知移動

 工具 286

13.3.5  案例19——消除照片中的

 紅眼 287

13.4  通過圖像或圖案修飾圖像 288

13.4.1  案例20——通過復制圖像修飾

 圖像 288

13.4.2  案例21——通過圖案修飾

 圖像 289

13.5  通過橡皮擦修飾圖像 290

13.5.1  案例22——擦除圖像中指定的

 區域 290

13.5.2  案例23——擦除圖像中的指定

 顏色 290

13.5.3  案例24——擦除圖像中相近的

 顏色 291

13.6  修飾圖像中的細節 292

13.6.1  案例25——修飾圖像中生硬的

 邊緣 292

13.6.2  案例26——提高圖像的

 清晰度 293

13.6.3  案例27——通過涂抹修飾

 圖像 293

13.7  通過調色修飾圖像 294

13.7.1  案例28——減淡工具和加深

 工具 294

13.7.2  案例29——改變圖像色彩的

 飽和度 295

13.8  綜合案例——制作放射線背景圖 295

13.9  疑難解惑 296

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

 網頁按鈕與導航條 297

14.1  按鈕與導航條的設計原則 298

14.1.1  網頁按鈕的設計注意事項 298

14.1.2  網頁導航條的設計注意

 事項 298

14.2  制作按鈕 299

14.2.1  案例1——制作普通按鈕 299

14.2.2  案例2——制作迷你按鈕 301

14.2.3  案例3——制作水晶按鈕 303

14.2.4  案例4——制作木紋按鈕 307

14.3  制作導航條 310

14.3.1  案例5——制作橫向導航條 310

14.3.2  案例6——制作垂直導航條 313

14.4  綜合案例——制作水晶風格網站

 導航條 314

14.5  疑難解惑 320

第15章  網頁中迷人的藍海——制作

 網頁特效邊線與背景 321

15.1  制作裝飾邊線 322

15.1.1  案例1——制作裝飾虛線 322

15.1.2  案例2——制作內嵌線條 324

15.1.3  案例3——制作斜紋線條 325

15.2  制作網頁背景圖片 327

15.2.1  案例4——制作漸變背景

 圖片 327

15.2.2  案例5——制作透明背景

 圖像 330

15.3  綜合案例——制作夢幻星光網頁

 背景 331

15.4  疑難解惑 336

第16章  網頁中的標志與旗幟——制作

 網頁Logo與網頁Banner 337

16.1  網頁Logo與Banner概述 338

16.1.1  網頁Logo設計標準 338

16.1.2  網頁Logo的標準尺寸 339

16.1.3  網頁Logo的一般形式 340

16.1.4  網頁Banner的標準尺寸 341

16.1.5  Banner設計的注意要點 341

16.2  制作文字Logo