內(nèi)容簡介

本書以實(shí)用為原則，每章圍繞知識點(diǎn)儲備、實(shí)例演示、任務(wù)訓(xùn)練、知識拓展、單元測試五部分展開，本書內(nèi)容涵蓋網(wǎng)頁設(shè)計(jì)概述、網(wǎng)頁基本元素、常用網(wǎng)頁布局、Div+CSS、表單、行為特效、模板和庫、HTML 5等。

本書可作為計(jì)算機(jī)相關(guān)專業(yè)網(wǎng)頁設(shè)計(jì)與制作的教材，也可供網(wǎng)頁設(shè)計(jì)愛好者學(xué)習(xí)參考，尤其適合網(wǎng)頁設(shè)計(jì)初學(xué)者使用。

　　

前    言

　　本書以實(shí)用為原則，融"教、學(xué)、做"于一體。實(shí)例以Dreamweaver CS6為載體，使讀者循序漸進(jìn)地充分理解并掌握HTML、CSS、JavaScript等的功能與HTML5的前景，為后續(xù)課程奠定良好的基礎(chǔ)，并激發(fā)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性。

　　全書結(jié)構(gòu)新穎，每章圍繞知識點(diǎn)儲備、實(shí)例演示、任務(wù)訓(xùn)練、知識拓展、單元測試五部分展開。在教學(xué)內(nèi)容的組織、知識點(diǎn)的由簡單到復(fù)雜、由易到難、"設(shè)計(jì)"視圖與"代碼"視圖相結(jié)合，使學(xué)生循序漸進(jìn)地、合理地組織學(xué)習(xí)知識、訓(xùn)練技能、拓展知識，有興趣、由表及里地學(xué)習(xí)。

　　本書由重慶航天職業(yè)技術(shù)學(xué)院陳艷平、徐受蓉?fù)?dān)任主編，趙葉青、董明、舒蕾、李怡平擔(dān)任副主編。具體編寫分工如下：第1章、5章、8章由陳艷平編寫，第2章由李怡平編寫，第3章由徐受蓉編寫，第4章由趙葉青編寫，第6章由董明編寫，第7章由舒蕾編寫。

　　本書在編寫過程中，參閱了大量的相關(guān)教材和專業(yè)書籍，在此一并向各位專家及各位參考書籍的編者表示感謝！相關(guān)的教學(xué)素材可聯(lián)系編者郵件發(fā)送或在清華大學(xué)出版社網(wǎng)站下載。

　　鑒于編者水平有限，書中難免有不足之處，歡迎各位專家和廣大讀者不吝賜教并批評指正。

　　

 

　　編  者  

目    錄

 

第1章  網(wǎng)頁設(shè)計(jì)概述 1

1.1  網(wǎng)頁與網(wǎng)站 1

1.1.1  網(wǎng)頁 1

1.1.2  網(wǎng)站 2

1.1.3  網(wǎng)站的工作原理 2

1.1.4  網(wǎng)頁基本構(gòu)成元素 3

1.2  網(wǎng)頁制作基礎(chǔ)知識 4

1.2.1  網(wǎng)頁的基礎(chǔ)知識 4

1.2.2  網(wǎng)頁制作工具 5

1.2.3  網(wǎng)頁設(shè)計(jì)與制作的分類 6

1.3  網(wǎng)頁設(shè)計(jì)的基本流程 6

1.4  創(chuàng)建本地站點(diǎn) 7

1.4.1  Dreamweaver CS6簡介 7

1.4.2  建立本地站點(diǎn) 9

1.4.3  管理本地站點(diǎn) 12

1.4.4  網(wǎng)頁文件的基本操作 13

1.4.5  設(shè)置首選參數(shù) 15

1.4.6  使用輔助工具 18

1.5  超文本標(biāo)記語言HTML 20

1.5.1  HTML概述 20

1.5.2  常用HTML標(biāo)記 21

1.6  實(shí)例演示 22

1.6.1  實(shí)例情景--創(chuàng)建本地教學(xué)

站點(diǎn) 22

1.6.2  實(shí)例效果 22

1.6.3  實(shí)現(xiàn)方案 22

1.7  任務(wù)訓(xùn)練 23

1.7.1  訓(xùn)練目的 23

1.7.2  訓(xùn)練內(nèi)容 23

1.8  知識拓展 24

單元測試 24

第2章  認(rèn)識網(wǎng)頁基本元素 26

2.1  文本 26

2.1.1  添加文本 26

2.1.2  設(shè)置文本屬性 28

2.1.3  插入特殊文本 32

2.1.4  文本超鏈接 34

2.2  圖像 37

2.2.1  圖像格式 38

2.2.2  插入圖像 39

2.2.3  設(shè)置圖像屬性 39

2.2.4  其他圖像元素 40

2.2.5  圖文混排 42

2.2.6  圖像超鏈接 43

2.3  多媒體 45

2.3.1  網(wǎng)頁中的動(dòng)畫 45

2.3.2  音樂播放功能 47

2.3.3  視頻播放功能 49

2.4  實(shí)例演示 50

2.4.1  實(shí)例情景--制作風(fēng)景區(qū)

網(wǎng)頁 50

2.4.2  實(shí)例效果 50

2.4.3  實(shí)現(xiàn)方案 51

2.5  任務(wù)訓(xùn)練 52

2.5.1  訓(xùn)練目的 52

2.5.2  訓(xùn)練內(nèi)容 52

2.6  知識拓展 53

單元測試 53

第3章  認(rèn)識常用網(wǎng)頁布局 55

3.1  表格 55

3.1.1  插入表格及嵌套表格 56

3.1.2  設(shè)置表格和單元格屬性 59

3.1.3  選擇單元格、行或列及表格 60

3.1.4  表格的基本操作 61

3.1.5  表格布局實(shí)例 62

3.2  層AP Div 64

3.2.1  創(chuàng)建AP Div 64

3.2.2  AP Div的屬性 66

3.2.3  "AP元素"面板 67

3.2.4  AP Div的重疊與嵌套 68

3.2.5  AP Div的基本操作 70

3.2.6  AP Div布局實(shí)例 71

3.3  實(shí)例演示 73

3.3.1  實(shí)例情景--制作在線作業(yè)

系統(tǒng)主頁 73

3.3.2  實(shí)例效果 73

3.3.3  實(shí)現(xiàn)方案 74

3.4  任務(wù)訓(xùn)練 76

3.4.1  訓(xùn)練目的 76

3.4.2  訓(xùn)練內(nèi)容 76

3.5  知識拓展 78

單元測試 78

第4章  認(rèn)識Div+CSS布局 79

4.1  Div概述 79

4.1.1  什么是Div 79

4.1.2  網(wǎng)頁中插入Div 81

4.1.3  Div的嵌套 83

4.2  CSS概述 84

4.2.1  什么是CSS 85

4.2.2  創(chuàng)建CSS樣式 85

4.2.3  CSS樣式在網(wǎng)頁中的應(yīng)用 94

4.3  盒子模型 97

4.3.1  盒子模型概述 97

4.3.2  margin、padding與border 98

4.3.3  塊級元素與內(nèi)聯(lián)元素 103

4.3.4  Div的浮動(dòng)與定位 105

4.4  常用布局方式 111

4.4.1  居中布局 111

4.4.2  固定寬度布局 113

4.4.3  可變寬度布局 114

4.5  實(shí)例演示 116

4.5.1  實(shí)例情景--制作在線作業(yè)

系統(tǒng)首頁 116

4.5.2  實(shí)例效果 116

4.5.3  實(shí)現(xiàn)方案 117

4.6  任務(wù)訓(xùn)練 124

4.6.1  訓(xùn)練目的 124

4.6.2  訓(xùn)練內(nèi)容 124

4.7  知識拓展 125

單元測試 126

第5章  認(rèn)識表單 127

5.1  創(chuàng)建表單 127

5.1.1  表單概述 127

5.1.2  插入表單 128

5.1.3  表單屬性 128

5.2  創(chuàng)建表單對象 129

5.2.1  文本字段 129

5.2.2  隱藏域 131

5.2.3  復(fù)選框和復(fù)選框組 132

5.2.4  單選按鈕和單選按鈕組 134

5.2.5  列表/菜單 135

5.2.6  跳轉(zhuǎn)菜單 136

5.2.7  圖像域 137

5.2.8  文件域 137

5.2.9  按鈕 138

5.2.10  標(biāo)簽 138

5.2.11  字段集 138

5.3  Spry表單驗(yàn)證 139

5.3.1  Spry驗(yàn)證文本域 139

5.3.2  Spry驗(yàn)證文本區(qū)域 140

5.3.3  Spry驗(yàn)證復(fù)選框 141

5.3.4  Spry驗(yàn)證選擇 141

5.3.5  Spry驗(yàn)證密碼 142

5.3.6  Spry驗(yàn)證確認(rèn) 142

5.3.7  Spry驗(yàn)證單選按鈕組 143

5.4  使用行為驗(yàn)證表單 144

5.5  實(shí)例演示 147

5.5.1  實(shí)例情景--制作郵箱注冊

單網(wǎng)頁 147

5.5.2  實(shí)例效果 147

5.5.3  實(shí)現(xiàn)方案 147

5.6  任務(wù)訓(xùn)練 149

5.6.1  訓(xùn)練目的 149

5.6.2  訓(xùn)練內(nèi)容 150

5.7  知識拓展 151

單元測試 151

第6章  認(rèn)識行為特效 152

6.1  認(rèn)識行為 152

6.1.1  行為基本概念 152

6.1.2  "行為"面板 153

6.1.3  添加行為步驟 154

6.1.4  修改行為 155

6.2  使用內(nèi)置行為 156

6.2.1  交換圖像 156

6.2.2  彈出消息 157

6.2.3  打開瀏覽器窗口 157

6.2.4  轉(zhuǎn)到URL 159

6.2.5  拖動(dòng)AP元素 159

6.2.6  設(shè)置狀態(tài)欄文本 160

6.2.7  改變屬性 161

6.2.8  顯示/漸隱 162

6.2.9  調(diào)用JavaScript 163

6.3  實(shí)例演示 165

6.3.1  實(shí)例情景--用JavaScript

完成行為特效 165

6.3.2  實(shí)例效果 165

6.3.3  實(shí)現(xiàn)方案 166

6.4  任務(wù)訓(xùn)練 168

6.4.1  訓(xùn)練目的 168

6.4.2  訓(xùn)練內(nèi)容 168

6.5  知識拓展 169

單元測試 169

第7章  認(rèn)識模板和庫 170

7.1  模板 170

7.1.1  創(chuàng)建模板 170

7.1.2  創(chuàng)建可編輯區(qū)域 171

7.1.3  管理模板 172

7.2  庫 176

7.2.1  創(chuàng)建庫文件 177

7.2.2  編輯庫項(xiàng)目 178

7.2.3  為頁面添加庫項(xiàng)目 179

7.3  實(shí)例演示 179

7.3.1  實(shí)例情景--制作風(fēng)花雪月

網(wǎng)站 179

7.3.2  實(shí)例效果 180

7.3.3  實(shí)現(xiàn)方案 180

7.4  任務(wù)訓(xùn)練--模板應(yīng)用 184

7.4.1  訓(xùn)練目的 184

7.4.2  訓(xùn)練內(nèi)容 184

7.5  知識拓展 185

單元測試 185

第8章  初識HTML5 186

8.1  HTML5概述 186

8.1.1  HTML5簡介 186

8.1.2  HTML5的新特性 186

8.1.3  HTML5的優(yōu)點(diǎn) 187

8.2  HTML5視頻 187

8.2.1  HTML5視頻簡介 187

8.2.2  HTML5視頻實(shí)例 188

8.2.3  使用 DOM控制 190

8.3  HTML5音頻 192

8.3.1  HTML5音頻簡介 192

8.3.2  HTML5音頻實(shí)例 193

8.4  初識Canvas 194

8.4.1  Canvas簡介 194

8.4.2  繪制圖形 195

8.4.3  使用圖像 199

8.5  實(shí)例演示 201

8.5.1  實(shí)例情景--制作七巧板 201

8.5.2  實(shí)例效果 201

8.5.3  實(shí)現(xiàn)方案 202

8.6  任務(wù)訓(xùn)練 204

8.6.1  訓(xùn)練目的 204

8.6.2  訓(xùn)練內(nèi)容 204

8.7  知識拓展 206

單元測試 206

參考文獻(xiàn) 207