HTML5 CSS3 Web前端開發

《HTML5+CSS3 Web前端開發》是2018年5月清華大學出版社出版的圖書，作者是唐四薪。 書中的圖片和代碼都採用版面壓縮形式，既能保證讀者看懂，又能使讀者加快閱讀速度，不被無關代碼干擾閱讀。

本書源程式實例多達230餘個，全部按章編號，並且在書中都標明了程式編號，使讀者能在配套素材中快速找到源程式，本書為教師提供了多年修改後精心製作的課件。

基本介紹

• 書名：HTML5+CSS3 Web前端開發
• 作者：唐四薪
• ISBN：9787302491927
• 類別：計算機
• 頁數：320
• 定價：49
• 出版社：清華大學出版社
• 出版時間：2018年5月
• 開本：16開

主要內容

本書全面介紹了基於HTML5+CSS3的Web前端開發技術，在敘述有關原理時安排了大量的相關實例。本書分為9章，內容包括Web前端開發概述，HTML，HTML5與Web標準，CSS樣式美化，CSS布局，表格與表單，回響式網頁設計，JavaScript與jQuery基礎，Bootstrap回響式網頁設計等。附錄中安排了作為課程教學的實驗。

目 錄

第1章Web前端開發概述/1

1.1Web前端開發與網頁設計/1

1.1.1網頁的概念和本質/1

1.1.2網頁設計的兩個基本問題/2

1.1.3網頁設計語言——HTML簡介/3

1.1.4網頁製作軟體/4

1.2網站的創建和製作流程/5

1.2.1網站的特徵/5

1.2.2網站的開發步驟/6

1.2.3在Dreamweaver中建立站點/8

1.3Web伺服器與瀏覽器/10

1.3.1Web伺服器的作用/11

1.3.2瀏覽器的種類和作用/11

1.4URL與域名/13

習題1/14

第2章HTML/15

2.1HTML概述/15

2.1.1HTML文檔的結構/15

2.1.2Dreamweaver的開發界面/16

2.1.3使用DW新建HTML檔案/17

2.1.4HTML標記/17

2.1.5常見的HTML標記及屬性/18

2.2在網頁中添加文本和圖像/19

2.2.1創建文本和列表/19

2.2.2插入圖像/21

2.3利用DW代碼視圖提高效率/22

2.3.1代碼提示/23

2.3.2代碼快速定位/23

2.3.3DW中的常用快捷鍵/24

2.4創建超連結/25

2.4.1超連結標記<a>/25

2.4.2絕對URL與相對URL/27

2.4.3超連結的種類/28

2.4.4超連結目標的打開方式/30

2.4.5超連結製作的原則/30

2.4.6DW中超連結屬性面板的使用/31

2.5插入Flash及嵌入其他網頁/32

2.5.1插入Flash/32

2.5.2嵌入式框架標記<iframe>/33

2.6頭部標記/34

習題/35

第3章HTML5與Web標準/36

3.1HTML5的改進/36

3.1.1HTML5新增的標記/36

3.1.2HTML5語法的改進/38

3.1.3HTML5的視音頻功能/39

3.1.4HTML5的繪圖功能/41

3.2Web標準/44

3.2.1傳統HTML的缺點/44

3.2.2Web標準的含義/45

3.2.3Web標準的優勢/47

3.3HTML元素的概念/47

3.3.1行內元素和塊級元素/48

3.3.2<div>和<span>標記/48

習題/49

第4章CSS樣式美化/50

4.1CSS基礎/50

4.1.1CSS的語法/50

4.1.2在HTML中引入CSS的方法/51

4.1.3選擇器的分類/53

4.1.4CSS文本修飾/56

4.2CSS的特性/57

4.2.1CSS的層疊性/57

4.2.2CSS的繼承性/59

4.2.3選擇器的組合/60

4.3CSS高級選擇器/64

4.3.1關係選擇器/64

4.3.2屬性選擇器/66

4.3.3偽類選擇器/67

4.3.4使用過渡屬性配合動態偽類效果/70

4.3.5偽元素選擇器/73

4.4CSS設計和書寫技巧/75

4.4.1CSS樣式總體設計原則/75

4.4.2DW對CSS的可視化編輯支持/76

4.4.3CSS屬性的值和單位/79

4.4.4網頁中的字型/80

4.4.5字型圖示技術/82

4.5盒子模型及其屬性/84

4.5.1盒子模型概述/84

4.5.2框線border屬性/85

4.5.3圓角borderradius屬性/87

4.5.4圖像框線borderimage屬性/89

4.5.5padding和margin屬性/91

4.6標準流下的定位及套用/92

4.6.1標準流下的定位原則/92

4.6.2margin合併現象/95

4.6.3盒子模型的套用/96

4.6.4Chrome瀏覽器的CSS調試功能/99

4.7背景的運用/100

4.7.1CSS的背景屬性/100

4.7.2背景的基本運用技術/104

4.7.3滑動門技術/107

4.7.4背景圖像的翻轉/111

4.7.5傳統圓角效果/112

4.8CSS3樣式美化功能/114

4.8.1陰影和發光效果/114

4.8.2漸變效果/117

4.8.3描邊效果/120

4.8.4遮罩效果/121

4.9變形與動畫效果/123

4.9.1平面變形效果/123

4.9.23D變換效果/126

4.9.3animation動畫效果/131

習題/134

第5章CSS布局/137

5.1浮動/137

5.1.1盒子浮動後的特點/137

5.1.2清除浮動元素的影響/140

5.1.3清除浮動影響的方法/140

5.2浮動的套用舉例/143

5.2.1圖文混排及首字下沉效果/143

5.2.2水平導航條/144

5.2.3新聞欄目框/145

5.2.4微博對話框/148

5.3相對定位/149

5.3.1定位屬性和偏移屬性/149

5.3.2相對定位的特點/149

5.3.3相對定位的套用舉例/150

5.4絕對定位和固定定位/152

5.4.1絕對定位/152

5.4.2絕對定位的套用舉例/154

5.4.3固定定位/163

5.4.4與定位屬性有關的CSS屬性/163

5.4.5overflow屬性/166

5.4.6vertical-align屬性/167

5.5CSS分欄布局/168

5.5.1分欄布局的種類/169

5.5.2網頁居中的方法/170

5.5.31-3-1版式網頁布局/170

5.5.41-2-1可變寬度布局/174

5.5.5CSS兩列布局案例/176

5.5.6HTML5新增的文檔結構標記/181

5.5.7HTML5網頁布局案例/183

5.6CSS3新增的布局方式/186

5.6.1彈性盒布局/186

5.6.2分欄布局/190

5.7CSS瀏覽器的兼容問題/192

習題/193

第6章表格與表單/195

6.1創建表格/195

6.1.1表格標記/195

6.1.2表格行和單元格標記/197

6.1.3在DW中操作表格的方法/199

6.1.4製作固定寬度的表格/201

6.1.5特殊效果表格的製作/201

6.2使用CSS美化表格/203

6.2.1框線和背景的美化/203

6.2.2隔行變色效果/204

6.3創建表單/205

6.3.1<form>標記及其屬性/206

6.3.2<input>標記/208

6.3.3<select>和<option>標記/211

6.3.4多行文本域標記<textarea>/211

6.3.5表單數據的傳遞過程/212

6.3.6表單中的按鈕/213

6.3.7表單的輔助標記/214

6.3.8HTML5新增的表單標記和屬性/215

6.4美化表單/218

6.4.1搜尋框/218

6.4.2用戶登錄表單/219

6.4.3用戶註冊表單/222

習題/223

第7章回響式網頁設計/225

7.1回響式網頁的基本技術/225

7.1.1媒體查詢/225

7.1.2流式布局/227

7.1.3自適應圖片/229

7.1.4一列變寬、一列固定的方法/231

7.1.5回響式網頁的頭部代碼設定/231

7.2回響式布局的網站實例/232

7.2.1頁面總體布局的實現/233

7.2.2頁頭的設計/235

7.2.3回響式導航條的製作/235

7.2.4回響式欄目的製作/237

習題/239

第8章JavaScript與jQuery基礎/240

8.1JavaScript的代碼結構/240

8.2JavaScript的事件編程/242

8.2.1JavaScript語言基礎/242

8.2.2常用JavaScript事件/242

8.2.3事件監聽程式/243

8.3JavaScriptDOM編程/245

8.3.1動態效果的實現/245

8.3.2獲取指定元素/246

8.3.3訪問元素的CSS屬性/247

8.3.4訪問元素的內容/249

8.4使用瀏覽器對象/249

8.5jQuery基礎/253

8.5.1jQuery的功能和使用/253

8.5.2jQuery中的“$”/254

8.5.3jQuery對象與DOM對象/258

8.5.4jQuery的選擇器/260

8.5.5jQuery的事件綁定/261

8.5.6jQuery中的常用方法/262

8.5.7jQuery套用舉例/263

習題/265

第9章Bootstrap回響式網頁設計/267

9.1Bootstrap的使用/267

9.1.1下載和引用Bootstrap框架/267

9.1.2Bootstrap柵格系統/269

9.1.3使用柵格系統進行回響式布局/271

9.2Bootstrap中的網頁組件/277

9.2.1基於組件的網頁製作方法/277

9.2.2導航條/279

9.2.3輪播外掛程式/283

9.2.4選項卡面板/286

9.2.5媒體對象/288

9.2.6摺疊面板組/290

9.2.7提示框與彈出框/292

9.2.8模態彈窗/293

9.3Bootstrap網頁重構實例/295

習題/297

附錄實驗/299

實驗1個人簡歷網頁/299

實驗2圓餅型盒子的製作/299

實驗3製作背景翻轉的圖示/300

實驗4欄目框的製作/300

實驗5頁頭和導航條的製作/301

實驗6圖片滾動欄的製作/301

實驗7網頁的布局設計/301

實驗8網站首頁的實現/301

實驗9網站列表頁的實現/301

實驗10製作下拉選單/302

實驗11製作Tab面板/302

實驗12使用Bootstrap製作回響式網頁/302

參考文獻/303