Web前端開發案例剖析教程

本書系統地介紹了Web前端開發技術HTML、CSS、JavaScript和jQuery的核心內容與Web前端網站的設計開發方法，包括Web前端開發概述、HTML5語法基礎、簡單圖文網頁設計、層疊樣式表CSS、網頁的布局設計、JavaScript語言基礎、BOM與DOM編程、HTML5進階、應用CSS3渲染網頁效果、jQuery基礎與應用共10章的內容。 本書面向Web前端設計與開發的實際應用，應用案例剖析教學法的教學理念，實施“案例－應用、知識－應用”雙線與“案例－知識”雙向的教學法，深入剖析知識要點，以問題為導向，培養讀者解決問題的能力。通過閱讀本書，讀者可以快速掌握Web前端網站設計開發的技術和方法，並達到一定的實際應用水平。 本書適合作為普通高校計算機類本科專業的教材，也適合Web前端設計與開發愛好者自學使用。

目錄Contents

 

 

第1章Web前端開發概述1

1.1案例1制作彩色個人簡歷2

1.2萬維網6

1.2.1萬維網的概念6

1.2.2萬維網的組成7

1.2.3萬維網的原理7

1.2.4相關名詞8

1.3網頁與網站9

1.3.1網頁9

1.3.2靜態和動態網頁10

1.3.3Web網站10

1.4HTML與CSS11

1.4.1HTML11

1.4.2CSS13

1.5Web發展歷程15

1.5.1HTML發展歷程15

1.5.2CSS發展歷程15

1.6Web標準16

1.6.1結構標準16

1.6.2表現標準16

1.6.3行為標準16

1.7瀏覽器17

1.7.1主流瀏覽器17

1.7.2瀏覽器內核17

1.8Web前端技術19

1.8.1核心開發技術19

1.8.2常用的技術框架和庫20

1.9開發工具211.9.1Dreamweaver簡介21

1.9.2Dreamweaver工作區21

1.9.3文檔窗口23

1.9.4工具欄24

1.9.5狀態欄25

1.9.6屬性檢查器25

1.9.7插入面板26

1.9.8文件面板27

1.9.9CSS Designer面板27

1.9.10重新排列面板28

1.10案例2應用Dreamweaver面板制作詩詞網頁30

1.11本章小結42

習題42

第2章HTML5語法基礎44

2.1案例3應用Dreamweaver代碼設計網頁模板44

2.2HTML5標簽與屬性50

2.2.1HTML5標簽50

2.2.2標簽屬性54

2.2.3屬性設置實例56

2.3HTML字符實體59

2.4HTML顏色61

2.4.1顏色的表示方法61

2.4.2顏色的搭配63

2.5HTML5文檔結構63

2.5.1HTML5網頁文檔的典型結構63

2.5.2文檔結構標簽用法65

2.6HTML5文檔編碼規則69

2.7本章小結69

習題69

第3章簡單圖文網頁設計71

3.1案例4古典小說網頁設計71

3.2文本網頁設計應用的標簽74

3.2.1<span>標簽74

3.2.2<p>標簽76

3.2.3<h1>～<h6>標簽78

3.2.4<br>標簽78

3.2.5<hr>標簽79

3.2.6<div>標簽80

3.2.7<a>標簽81

3.2.8<marquee>標簽84

3.2.9文本格式標簽85

3.2.10列表標簽87

3.3案例5圖冊網頁設計89

3.4圖冊網頁設計應用的標簽91

3.4.1<img>標簽91

3.4.2<table>組標簽95

3.4.3<map>與<area>標簽99

3.5案例6連環畫網頁設計100

3.6圖文網頁設計應用的標簽104

3.6.1<figure>與<figcaption>標簽105

3.6.2<header>、<nav>與<footer>標簽105

3.6.3<main>、<section>、<article>與<aside>標簽105

3.7案例7線上學習註冊網頁設計108

3.8表單網頁設計應用的標簽111

3.8.1<form>標簽111

3.8.2<input>標簽113

3.8.3<select>標簽119

3.8.4<textarea>標簽120

3.9本章小結121

習題121

第4章層疊樣式表CSS123

4.1案例8彩色版古詩網頁設計123

4.2CSS基本語法127

4.2.1CSS語法格式127

4.2.2CSS的類型128

4.2.3CSS3屬性前綴131

4.3CSS選擇器132

4.3.1基本選擇器132

4.3.2共同屬性選擇器134

4.3.3復合選擇器134

4.3.4屬性選擇器135

4.3.5偽類與偽元素136

4.4CSS優先級139

4.4.1繼承性、層疊性與沖突性139

4.4.2樣式的優先級140

4.5CSS框模型144

4.5.1CSS框模型定義144

4.5.2元素框設置145

4.5.3元素框應用148

4.6CSS樣式常用屬性152

4.6.1文本屬性152

4.6.2字體屬性153

4.6.3背景屬性153

4.6.4列表屬性154

4.6.5表格屬性155

4.6.6visibility屬性155

4.6.7display屬性155

4.6.8position屬性156

4.6.9float與clear屬性156

4.7本章小結157

習題157

第5章網頁的布局設計160

5.1案例9自營電器網店主頁設計160

5.2網頁的布局方法167

5.2.1絕對寬度布局167

5.2.2相對寬度布局169

5.2.3響應式布局171

5.3應用div+CSS設計頁面板塊171

5.3.1頁首板塊設計172

5.3.2頁腳板塊設計172

5.3.3頁面主體板塊設計172

5.4元素框的定位與浮動172

5.4.1靜態定位173

5.4.2固定定位176

5.4.3黏性定位177

5.4.4相對定位178

5.4.5絕對定位181

5.4.6浮動布局184

5.5彈性布局187

5.5.1flex容器187

5.5.2容器的屬性188

5.5.3項目的屬性192

5.6本章小結198

習題198

第6章JavaScript語言基礎200

6.1案例10打字競賽遊戲編程200

6.2JavaScript概述203

6.2.1JavaScript與Java203

6.2.2JavaScript的作用204

6.3在網頁中插入JavaScript的方式206

6.3.1內部嵌入206

6.3.2外部鏈接209

6.3.3行內嵌入210

6.4基本語法211

6.4.1標識符211

6.4.2關鍵字212

6.4.3數據類型212

6.4.4常量213

6.4.5變量214

6.4.6註釋216

6.4.7分號216

6.4.8運算符217

6.4.9表達式219

6.5程序結構219

6.5.1順序結構219

6.5.2分支結構220

6.5.3循環結構223

6.6函數226

6.6.1函數定義226

6.6.2函數返回值228

6.6.3函數調用229

6.7對象230

6.7.1JavaScript對象類型230

6.7.2自定義對象231

6.7.3對象的使用232

6.7.4對象屬性引用234

6.7.5對象的事件234

6.7.6對象方法引用234

6.8內部對象235

6.8.1本地對象235

6.8.2內置對象246

6.9全局函數和屬性247

6.10本章小結248

習題248

第7章BOM與DOM編程251

7.1案例11模擬考試網頁設計251

7.2瀏覽器對象BOM254

7.2.1BOM模型254

7.2.2window對象255

7.2.3screen對象262

7.2.4navigator對象264

7.2.5history對象264

7.2.6location對象265

7.3文檔對象DOM266

7.3.1DOM模型266

7.3.2HTML DOM266

7.3.3查找HTML元素271

7.3.4改變HTML元素的內容273

7.3.5改變HTML元素的屬性273

7.3.6刪除已有的HTML元素和屬性274

7.3.7替換HTML元素275

7.3.8添加新的HTML元素和屬性275

7.4事件機制276

7.4.1事件類型277

7.4.2事件句柄277

7.4.3事件綁定278

7.5本章小結281

習題281

第8章HTML5進階284

8.1案例12簡單的拼圖遊戲設計284

8.2HTML5拖放API287

8.2.1理解拖放過程287

8.2.2設計拖放過程290

8.2.3DragEvent事件291

8.2.4dataTransfer對象292

8.3地理定位294

8.3.1應用定位的過程294

8.3.2Geolocation對象296

8.3.3在地圖上顯示地理位置297

8.4畫布300

8.4.1畫布基礎300

8.4.2畫布應用304

8.5本章小結310

習題310

第9章應用CSS3渲染網頁效果312

9.1案例13汽車自動駕駛動畫設計312

9.2CSS3邊框314

9.2.1邊框顏色315

9.2.2邊框圓角315

9.2.3邊框圖像315

9.3CSS3背景316

9.3.1backgroundorigin316

9.3.2backgroundsize316

9.3.3backgroundclip316

9.3.4backgroundimage317

9.4顏色漸變317

9.4.1CSS3線性漸變317

9.4.2CSS3徑向漸變319

9.5濾鏡屬性320

9.6文本效果323

9.6.1盒子陰影323

9.6.2文本陰影326

9.6.3文本溢出326

9.6.4單詞換行327

9.6.5單詞拆分換行328

9.7轉換屬性328

9.7.12D transform329

9.7.23D transform330

9.8過渡屬性330

9.9CSS3動畫332

9.9.1CSS3動畫原理332

9.9.2多個關鍵幀動畫333

9.10本章小結336

習題337

第10章jQuery基礎與應用339

10.1案例14滑動圖片組網頁設計339

10.2jQuery簡介344

10.3在網頁中引用jQuery345

10.4jQuery語法347

10.5jQuery選擇器350

10.5.1基礎選擇器350

10.5.2層次選擇器352

10.5.3屬性選擇器353

10.5.4表單選擇器354

10.5.5過濾選擇器355

10.5.6jQuery選擇器應用實例359

10.6jQuery事件362

10.6.1文檔事件363

10.6.2鼠標事件365

10.6.3鍵盤事件366

10.6.4表單事件366

10.6.5瀏覽器事件367

10.6.6事件綁定與解除368

10.6.7jQuery事件對象369

10.7jQuery文檔操作372

10.7.1內容操作372

10.7.2屬性操作375

10.7.3樣式操作377

10.7.4節點操作378

10.8jQuery動畫382

10.8.1基本動畫382

10.8.2自定義動畫383

10.9jQuery遍歷385

10.9.1向上遍歷（祖先元素）385

10.9.2向下遍歷（子元素和後代元素）385

10.9.3同級遍歷（同胞元素）386

10.9.4過濾遍歷386

10.10本章小結389

習題389

參考文獻392