網頁設計與製作教程（第3版）

成書過程

修訂情況

該次改版主要對Dreamweaver部分的內容進行了最佳化，刪除了FrontPage和Fireworks的內容，增加了CSS方面的內容，以適應網頁設計技術發展的趨勢。

該教材各章內容主要由楊選輝編寫完成，其中谷艷紅參與編寫了該教材第5、6、8章的部分內容，曾群、郭路生、李晚照、龔花萍、方玉鳳、葛偉、屈文建分別參與編寫了該教材的第1、2、3、4、6、7章和附錄的部分內容，孫斌、趙瓏、郭曉虹、饒志華、敖建華、張婕鈺參與了該教材第2、3、5、6、7、8章部分案例的設計和編寫工作。全書由楊選輝擬定大綱和統稿。該教材得到了南昌大學教材出版項目的資助。

出版工作

2014年9月1日，該教材由清華大學出版社出版。

出版社工作人員

責任編輯	封面設計	責任校對	責任印製
焦虹	常雪影	時翠蘭	宋林

內容簡介

該教材是介紹網頁設計與製作技術的教程，以網頁設計軟體作為技術支持，介紹了網頁的構思、規劃、製作和網站建設的全過程。全書分為兩篇共8章，並包括三個附錄。第1篇（第1～5章）是基礎篇，介紹了網頁製作基礎知識、HTML簡介、CSS基礎知識、網站建設概論和當時主流的網頁製作工具DreamweaverCS5；第2篇（第6～8章）是提高篇，介紹了網頁布局方法CSS+Div、網頁製作輔助工具PhotoshopCS5和FlashCS5；附錄中提供了網頁特效原始碼和輔助設計小軟體及每章課後習題的參考答案。

教材目錄

第1篇基礎篇

第1章網頁製作基礎知識2

1.1Internet的基礎知識2

1.1.1Internet簡介2

1.1.2Internet的發展歷程3

1.1.3中國Internet的發展4

1.1.4Internet的功能8

1.2.2HTTP和FTP協定12

1.2.3超連結和超文本13

1.2.4Internet地址13

1.2.5域名15

1.2.6URL16

1.3網頁與網站的基礎知識17

1.3.1網頁、網頁檔案和網站17

1.3.2靜態網頁和動態網頁18

1.3.3網頁界面的構成18

1.3.4網站的分類19

1.3.5Web伺服器和網頁瀏覽器20

1.3.6網站開發工具21

1.3.7網頁程式語言22

思考與練習23

第2章HTML簡介25

2.1HTML概述25

2.1.1HTML的發展歷程25

2.1.2一個簡單的HTML實例26

2.1.3HTML的基本概念27

2.1.4HTML文檔的基本結構28

2.1.5HTML的基本語法規則29

2.2HTML的文本格式標記31

2.2.1標題文字標記31

2.2.2文字字型標記32

2.2.3文本修飾標記33

2.2.4段落標記33

2.2.5強制換行標記34

2.2.6插入水平線標記34

2.2.7預排格式標記35

2.2.8定位標記35

2.2.9列表標記37

2.2.10文字滾動標記39

2.3HTML的圖像與多媒體標記40

2.3.1圖像標記40

2.3.2背景聲音標記42

2.3.3多媒體標記42

2.4HTML的超連結標記43

2.5HTML的表格標記44

2.6HTML的表單標記47

2.7HTML的框架標記53

2.8HTML綜合實例57

思考與練習58

第3章CSS基礎知識62

3.1CSS概述62

3.1.1CSS與HTML的關係62

3.1.2CSS的優點62

3.1.3一個CSS的套用實例63

3.2CSS的基本語法64

3.2.1CSS的語法64

3.2.2CSS的語法規則65

3.3CSS的使用方法66

3.3.1行內式66

3.3.2嵌入式67

3.3.3連結式68

3.3.4導入式69

3.3.5引入方式的優先權69

3.4CSS選擇器70

3.4.1標記選擇器70

3.4.2類選擇器71

3.4.3ID選擇器72

3.4.4偽類選擇器74

3.4.5後代選擇器75

3.4.6通用選擇器75

3.4.7選擇器的集體聲明75

3.5CSS的層疊性77

3.6CSS的繼承性80

3.7CSS屬性的值和單位81

3.8套用CSS修飾網頁文本83

思考與練習87

第4章網站建設概論89

4.1網站建設的步驟89

4.1.1網站的規劃90

4.1.2網站的設計92

4.1.3網站的實現98

4.1.4網站的測試和發布98

4.1.5網站的推廣和維護101

4.2網站建設的原則104

4.3網頁的可視化設計概論108

4.3.1網頁的版面布局108

4.3.2網頁的色彩搭配115

4.3.3網頁的藝術設計119

4.3.4網頁的點、線、面的運用122

4.3.5網頁中文字和圖形的設計125

思考與練習128

第5章Dreamweaver CS5基礎知識130

5.1Dreamweaver CS5概述130

5.1.1初識Dreamweaver CS5130

5.1.2Dreamweaver CS5的工作界面130

5.2站點的創建和管理132

5.2.1創建本地站點132

5.2.2管理本地站點134

5.2.3管理本地站點中的檔案134

5.3網頁文檔的基本操作135

5.3.1新建網頁135

5.3.2設定頁面屬性135

5.3.3保存、打開和預覽網頁140

5.4編輯與設定網頁文本141

5.4.1輸入普通文本141

5.4.2設定文本格式142

5.4.3插入其他元素145

5.4.4創建一個純文字頁面的實例147

5.5插入圖像150

5.5.1插入圖像150

5.5.2編輯圖像153

5.5.3插入其他圖像元素157

5.5.4創建添加圖像元素的頁面的實例158

5.6插入多媒體160

5.6.1插入Flash160

5.6.2插入音頻160

5.6.3插入視頻162

5.6.4創建添加多媒體元素的頁面的實例163

5.7創建超連結166

5.7.1創建文本連結166

5.7.2創建圖像連結167

5.7.3創建電子郵件連結168

5.7.4創建錨記連結169

5.7.5檢查與修復連結171

5.7.6創建添加超連結的頁面的實例172

5.8表格的使用173

5.8.1創建表格174

5.8.2選擇表格元素175

5.8.3表格的屬性設定176

5.8.4表格的基本操作177

5.8.5表格運用的實例180

5.8.6表格的布局功能182

5.8.7套用表格布局設計網頁的實例187

5.9框架的使用193

5.9.1創建框架193

5.9.2框架集和框架屬性的設定194

5.9.3在框架中設定連結196

5.9.4使用框架布局功能設計頁面的實例197

5.9.5嵌入式框架的套用方法201

5.10表單的使用205

5.10.1創建表單205

5.10.2添加表單元素206

5.10.3製作表單頁面的實例209

5.11模板的使用210

5.11.1模板的基本操作211

5.11.2模板的套用實例212

5.12行為的套用215

5.12.1行為的基本操作215

5.12.2常見的行為事件和行為動作215

5.12.3行為的套用實例218

5.13CSS樣式表的套用220

5.13.1CSS的基本操作220

5.13.2CSS的套用實例223

5.14APDiv的套用225

5.14.1APDiv的基本操作225

5.14.2APDiv的套用實例226

思考與練習229

第2篇提高篇

第6章CSS+Div網頁布局234

6.1盒子模型234

6.1.1盒子模型的屬性及設定234

6.1.2盒子模型的計算238

6.1.3盒子模型的套用舉例239

6.2普通流:display屬性240

6.2.1display的引入240

6.2.2display屬性的取值242

6.2.3display的套用舉例243

6.3浮動:float屬性244

6.3.1float屬性的取值245

6.3.2浮動的清除247

6.3.3float屬性的套用舉例248

6.4定位:position屬性249

6.4.1position屬性的取值249

6.4.2相對定位250

6.4.3絕對定位252

6.5CSS+Div布局255

6.5.1布局前的準備255

6.5.2常見的布局種類257

6.5.3布局實例一268

6.5.4布局實例二271

思考與練習281

第7章PhotoshopCS5基礎知識284

7.1PhotoshopCS5概述284

7.1.1圖形圖像的基本概念284

7.1.2PhotoshopCS5的功能簡介286

7.1.3PhotoshopCS5的工作界面287

7.2PhotoshopCS5的檔案操作289

7.2.1新建檔案289

7.2.2打開檔案291

7.2.3置入檔案291

7.2.4保存檔案291

7.2.5使用標尺、格線等輔助工具292

7.3圖像的基本操作292

7.3.1剪下、複製和貼上292

7.3.2圖像的旋轉和變形293

7.3.3移動圖像296

7.3.4清除圖像296

7.3.5還原、重做與恢復操作296

7.4色彩和色調的調整297

7.4.1顏色的基本屬性297

7.4.2調整圖像色調298

7.4.3調整圖像色彩299

7.5PhotoshopCS5的文字操作300

7.5.1文字的輸入300

7.5.2文字的編輯305

7.5.3文字的轉換306

7.6PhotoshopCS5的選區操作308

7.6.1創建選區308

7.6.2編輯選區311

7.7PhotoshopCS5的圖層操作312

7.7.1認識圖層和圖層面板312

7.7.2編輯和管理圖層313

7.7.3圖層混合模式的套用315

7.7.4圖層樣式的套用317

7.8PhotoshopCS5中通道和蒙版的套用320

7.8.1認識通道321

7.8.2通道的套用322

7.8.3創建和編輯蒙版325

7.8.4蒙版的套用326

7.9PhotoshopCS5中濾鏡的套用332

7.9.1濾鏡基礎知識332

7.9.2濾鏡的套用334

7.10PhotoshopCS5網頁設計套用實例337

7.10.1設計Logo337

7.10.2設計Banner339

7.10.3設計字型343

7.10.4設計導航344

7.10.5設計主頁面347

7.10.6圖像合成350

7.10.7利用切片功能製作網頁351

思考與練習354

第8章FlashCS5基礎知識357

8.1FlashCS5概述357

8.1.1Flash動畫技術的特點357

8.1.2Flash動畫的套用358

8.1.3FlashCS5的界面介紹358

8.2FlashCS5的基本操作366

8.2.1Flash文檔的基本操作366

8.2.2Flash圖形的繪製和對象的編輯368

8.2.3Flash文本的創建和編輯374

8.3時間軸、幀和圖層376

8.3.1時間軸376

8.3.2幀377

8.3.3圖層379

8.4元件、實例和庫381

8.4.1元件381

8.4.2實例382

8.4.3庫384

8.5Flash動畫製作385

8.5.1Flash動畫的基礎知識385

8.5.2逐幀動畫387

8.5.3形狀補間動畫390

8.5.4動作補間動畫391

8.5.5引導層動畫395

8.5.6遮罩動畫398

8.5.7互動式動畫400

8.6Flash在網頁製作中的套用403

8.6.1利用Flash製作網站Logo403

8.6.2利用Flash製作網站Banner405

8.6.3利用Flash製作一個網站的首頁408

8.7Flash動畫的測試和發布412

8.7.1動畫的最佳化412

8.7.2動畫的測試413

8.7.3動畫的發布與導出414

思考與練習415

附錄A實用的網頁特效原始碼417

附錄B便捷的輔助設計小軟體424

附錄C思考與練習的參考答案428

參考文獻440

（註：目錄排版順序為從左列至右列）

教學資源

配套教材

該教材有配套的實驗指導教材——《網頁設計與製作實驗指導（第3版）》。

書名	書號	出版社	出版時間	作者
《網頁設計與製作實驗指導（第3版）》	9787302372691	清華大學出版社	2014.09.01	楊選輝

課程資源

該教材還配有多媒體教學課件和網路教學平台等立體化的教學資源。

教材特色

全書兼顧了入門和提高兩個層次，關注了每個軟體常用和實用的部分，注重實踐能力的培養。

該教材從基礎知識入手，挑選了網頁設計與製作技術中基本、實用的知識進行了介紹，讀者可以在實例中學到設計網頁的知識和掌握製作網站的技能；
該教材按照教學規律設計了內容和結構，按照由易到難的原則進行了編排，從理論到方法，再從方法到實踐，突出了實例教學，併兼顧了入門和提高兩個層次；
該教材每章後面均提供了的思考與練習題供讀者鞏固和延伸所學知識。

作者簡介

楊選輝，男，碩士，南昌大學管理學院信息管理系副教授。研究領域為信息資源管理、信息系統設計。主講課程有《信息系統分析與設計》《網站設計與開發》。