網頁設計與製作教程(HTML5 CSS3 JavaScript jQuery)(第2版)

作譯者:張曉蕾

出版時間:2018-08

千 字 數:486

版次:01-01

頁 數:304

開本:16開裝幀:I S B N :9787121342189

換版:

本書面向網站開發與網頁製作的讀者,採用全新流行的Web標準,以Web前端開發技術HTML5、CSS3、JavaScript和jQuery為基礎,由淺入深、完整詳細地介紹了網站設計與網頁製作的相關知識。本書共分13章,主要內容包括HTML5基礎知識、編輯網頁元素、頁面的布局與互動、CSS3入門、盒模型、使用CSS修飾頁面外觀、CSS布局技術、JavaScript程式設計基礎、HTML5進階、jQuery基礎、jQuery的動畫效果、jQuery UI外掛程式的用法.和天地環保綜合案例網站。本書內容緊扣國家對高等學校培養高級套用型、複合型人才的技能水平和知識結構的要求,以天地環保網站項目案例的開發思路為主線,採用模組分解、任務驅動、子任務實現和代碼設計四層結構,通過對模組中每個任務相應知識點的講解,引導讀者學習網頁製作、設計、規劃的基本知識,以及項目開發、測試的完整流程。

第1章 HTML5基礎知識 1

1.1 Web技術和瀏覽器 1

1.2 Web標準 1

1.2.1 什麼是Web標準 1

1.2.2 建立Web標準的優點 2

1.2.3 理解表現和結構相分離 2

1.3 HTML5概述 3

1.3.1 Web技術發展歷程 3

1.3.2 HTML5的特性 4

1.3.3 HTML5元素 4

1.4 HTML5的基本結構 5

1.4.1 HTML5語法結構 5

1.4.2 HTML5編寫規範 6

1.4.3 HTML5文檔結構 6

1.5 創建HTML檔案 7

1.6 搭建支持HTML5的瀏覽器

環境 8

1.7 網頁頭部標籤 9

1.8 注釋 11

1.9 特殊符號 11

習題1 12

第2章 編輯網頁元素 13

2.1 文本元素 13

2.2 文本層次語義元素 15

2.3 基本排版元素 17

2.4 圖像 21

2.4.1 網頁圖像的格式及使用

要點 21

2.4.2 圖像標籤 22

2.4.3 設定網頁背景圖像 24

2.4.4 圖文混排 24

2.4.5 案例—製作天地環保

“關於我們”圖文混排

頁面 25

2.5 超連結 26

2.5.1 超連結概述 26

2.5.2 超連結的套用 26

2.5.3 案例—製作天地環保

“下載專區”頁面 30

2.6 列表 32

2.6.1 無序列表 32

2.6.2 有序列表 33

2.6.3 定義列表 34

2.6.4 嵌套列表 35

2.7 標籤 35

2.8 標籤 36

2.9 綜合案例—製作天地環保

“公司名片”頁面 37

習題2 38

第3章 頁面的布局與互動 40

3.1 表格 40

3.1.1 表格的結構 40

3.1.2 表格的基本語法 40

3.1.3 表格的屬性 41

3.1.4 不規範表格 43

3.1.5 表格數據的分組 44

3.1.6 表格的嵌套 46

3.1.7 案例—使用表格布局

天地環保“工程展示”

頁面 46

3.2 使用結構元素構建網頁布局 47

3.3 頁面互動元素 53

3.3.1 details元素和summary

元素 53

3.3.2 progress元素 54

3.3.3 meter元素 54

3.4 表單 55

3.4.1 表單的基本概念 55

3.4.2 表單標籤 55

3.4.3 表單元素 56

3.4.4 案例—製作天地環保

“會員註冊”表單 60

3.4.5 表單分組 61

3.4.6 使用表格布局表單 62

3.4.7 表單的高級用法 63

習題3 64

第4章 CSS3基礎 66

4.1 CSS概述 66

4.2 CSS的優勢與局限性 68

4.3 CSS語法基礎 70

4.3.1 CSS樣式規則 70

4.3.2 基本選擇符 71

4.3.3 複合選擇符 73

4.3.4 通配符選擇符 75

4.3.5 特殊選擇符 76

4.4 CSS的屬性單位 77

4.4.1 長度、百分比單位 78

4.4.2 色彩單位 78

4.5 網頁中引用CSS的方法 79

4.5.1 行內樣式 79

4.5.2 內部樣式表 80

4.5.3 鏈入外部樣式表 81

4.5.4 導入外部樣式表 82

4.5.5 案例—製作“天地環保

工程簡介”頁面 83

4.6 文檔結構 85

4.6.1 文檔結構的基本概念 85

4.6.2 繼承 86

4.6.3 樣式表的層疊、特殊性

與重要性 87

4.6.4 元素類型 88

4.6.5 案例—製作天地環保

“核心業務”局部頁面 89

習題4 90

第5章 盒模型 91

5.1 盒模型簡介 91

5.2 盒模型的屬性 92

5.2.1 框線 92

5.2.2 外邊距 95

5.2.3 內邊距 96

5.2.4 案例—盒模型的演示 97

5.3 盒模型的大小 98

5.3.1 盒模型的寬度與高度 98

5.3.2 設定塊級元素與行級

元素的寬度和高度 98

5.4 盒模型綜合案例—“天地環保”

頁面頂部內容 99

5.5 盒子的定位 101

5.5.1 定位屬性 101

5.5.2 定位方式 103

5.6 浮動與清除浮動 106

5.6.1 浮動 106

5.6.2 清除浮動 109

5.6.3 案例—天地環保“登錄”

頁面的整體布局 110

習題5 112

第6章 使用CSS修飾頁面外觀 113

6.1 設定字型樣式 113

6.2 設定文本樣式 115

6.3 設定圖像樣式 118

6.3.1 圖像縮放 119

6.3.2 圖像框線 120

6.3.3 圖像的不透明度 121

6.3.4 背景圖像 121

6.3.5 背景重複 122

6.3.6 背景圖像定位 123

6.3.7 設定背景圖像固定 125

6.3.8 背景圖像大小 125

6.4 設定表格樣式 126

6.4.1 常用的CSS表格屬性 126

6.4.2 案例—使用隔行換色

表格製作“環保工程年度

排行榜” 128

6.5 設定表單樣式 129

6.5.1 使用CSS修飾常用的

表單元素 130

6.5.2 案例—製作“天地環保

用戶調查”頁面 131

6.6 設定連結 133

6.6.1 設定文字連結的外觀 133

6.6.2 圖文連結 135

6.7 設定列表 136

6.7.1 表格布局的缺點 136

6.7.2 列表布局的優勢 136

6.7.3 CSS列表屬性 136

6.7.4 案例—製作天地環保

二維碼名片 140

6.8 創建導航選單 141

6.9 綜合案例—製作“綠色環保”

社區頁面 144

習題6 151

第7章 CSS布局技術 152

7.1 Div+CSS布局技術簡介 152

7.2 使用嵌套的Div布局頁面 153

7.2.1 將頁面用Div分塊 153

7.2.2 案例—製作“環保空間”

頁面 153

7.3 典型的CSS布局樣式 156

7.3.1 兩列布局樣式 156

7.3.2 三列布局樣式 159

7.4 綜合案例—製作天地環保

“部落格”頁面 162

習題7 170

第8章 JavaScript程式設計基礎 171

8.1 JavaScript概述 171

8.2 在網頁中使用JavaScript 171

8.3 JavaScript基本語法 174

8.4 JavaScript的程式結構 176

8.4.1 簡單語句 176

8.4.2 程式控制流程 178

8.5 函式 181

8.6 基於對象的JavaScript語言 183

8.7 DOM編程 185

8.7.1 window對象 186

8.7.2 document對象 187

8.7.3 location對象 189

8.7.4 history對象 190

8.7.5 form對象 190

8.8 JavaScript的對象事件處理

程式 191

8.8.1 對象的事件 191

8.8.2 常用的事件及處理 191

8.8.3 表單對象與互動性 194

8.9 綜合案例—Web頁面信息

互動 196

習題8 197

第9章 HTML5的高級套用 199

9.1 HTML5拖放API 199

9.1.1 draggable屬性 199

9.1.2 拖放觸發的事件和數據

傳遞 200

9.2 多媒體播放 202

9.2.1 HTML5的多媒體支持 202

9.2.2 音頻標籤 203

9.2.3 視頻標籤 204

9.2.4 HTML5多媒體API 205

9.3 Canvas繪圖 207

9.3.1 創建元素 207

9.3.2 構建繪圖環境 208

9.3.3 通過JavaScript繪製

圖形 208

9.4 HTML5地理定位API 216

9.4.1 Geolocation基礎 216

9.4.2 Geolocation API實現

地理定位 217

9.4.3 案例—使用HTML5

獲取地理位置及百度

地圖 218

9.5 HTML5的發展前景 221

習題9 221

第10章 jQuery基礎 222

10.1 jQuery概述 222

10.2 編寫jQuery程式 223

10.3 jQuery對象和DOM對象 224

10.3.1 jQuery對象和DOM

對象簡介 224

10.3.2 jQuery對象和DOM

對象的相互轉換 225

10.4 jQuery外掛程式 228

10.5 jQuery選擇器簡介 228

10.6 基礎選擇器 229

10.7 層次選擇器 234

10.8 過濾選擇器 237

10.9 表單選擇器 241

10.10 jQuery的基本操作 242

10.10.1 元素屬性的操作 242

10.10.2 元素樣式的操作 245

10.10.3 元素內容和值的

操作 247

習題10 249

第11章 jQuery的動畫效果 251

11.1 jQuery的動畫方法簡介 251

11.2 顯示與隱藏效果 252

11.3 淡入/淡出效果 255

11.4 滑動效果 258

11.5 綜合案例—製作摺疊式

導航選單 260

習題11 262

第12章 jQuery UI外掛程式的用法 263

12.1 jQuery UI概述 263

12.2 jQuery UI的常用外掛程式 267

12.2.1 日期選擇器外掛程式 267

12.2.2 摺疊面板外掛程式 268

12.2.3 標籤頁外掛程式 271

12.2.4 自動完成外掛程式 272

習題12 275

第13章 天地環保綜合案例網站 277

13.1 網站的開發流程和組織結構 277

13.1.1 網站的開發流程 277

13.1.2 創建站點目錄 278

13.1.3 網站頁面的組成 279

13.2 網站技術分析 279

13.3 製作網站首頁 280

13.4 製作聯繫我們頁面 291

13.5 實訓網站 292

習題13 292

熱門詞條

聯絡我們