HTML+CSS+DIV網頁設計與佈局（第3版）（微課版）

武漢工程科技學院電腦與人工智能學院，系主任。曾獲湖北省“創領行動”暨創業培訓講師大賽省級三等獎；武漢工程科技學院第四屆教師教學創新大賽二等獎。先後主持教育部供需對接就業育人項目1項、主持校級課程思政示範課1項、主持校級教改項目1項；指導學生參加電腦設計大賽、華為ICT大賽、新華三杯大學生數字技術大賽等賽事獲國家級比賽獎項2項，省級獎項7項。

第 1章 認識網站開發 1

1.1　網站開發概述　1

1.1.1　網頁概述　1

1.1.2　網頁構成元素　1

1.1.3　網站建設流程　2

1.1.4　網站開發軟件　3

1.2　HTML簡介　4

1.2.1　HTML基本概念　4

1.2.2　HTML基本結構　4

1.3　一個簡單的HTML實例　4

1.3.1　編寫HTML代碼　4

1.3.2　運行HTML文件查看效果　5

1.4　HTML基本標簽　6

1.4.1　文件類型指令　6

1.4.2　文件類型標簽　6

1.4.3　HTML頭標簽　6

1.4.4　HTML主體標簽　7

1.4.5　頁面標題　7

1.5　HTML頁面的元信息META　7

1.5.1　頁面的關鍵字　7

1.5.2　頁面的對外說明　8

1.5.3　網頁的作者信息　8

1.5.4　網頁的開發語言　8

1.5.5　網頁的定時跳轉　8

1.6　小結　8

習題　9

上機指導　9

實驗一　9

實驗二　10

第　2章 網頁文字和圖片　11

2.1　文字格式　11

2.1.1　文字大小　11

2.1.2　字體　12

2.1.3　字體顏色　13

2.1.4　加粗與斜體　15

2.1.5　插入線與刪除線　16

2.1.6　上標與下標　16

2.2　與文字排版相關的標簽　17

2.2.1　文本縮進　17

2.2.2　換行　17

2.2.3　段落　18

2.2.4　預定義格式　19

2.2.5　水平分隔線　20

2.3　在網頁中插入圖片　21

2.4　HTML5文檔結構標簽　22

2.5　小結　24

習題　24

上機指導　25

實驗一　25

實驗二　25

第3章　超鏈接　27

3.1　創建超鏈接　27

3.1.1　超鏈接標簽　27

3.1.2　鏈接地址　28

3.1.3　打開鏈接的方式　29

3.2　錨點　30

3.2.1　創建錨點　30

3.2.2　鏈接到本頁錨點　30

3.2.3　鏈接到其他網頁的錨點　31

3.3　圖像的超鏈接　32

3.3.1　將整個圖像設置為鏈接　32

3.3.2　設置圖像熱點區域　33

3.4　小結　33

習題　34

上機指導　34

實驗一　34

實驗二　35

實驗三　36

第4章　表格　37

4.1　創建表格　37

4.2　表格屬性　38

4.2.1　表格寬度　38

4.2.2　表格高度　39

4.2.3　表格背景圖片　41

4.2.4　單元格間距　42

4.2.5　表格內單元格與文字的距離　43

4.3　表格邊框　44

4.3.1　邊框寬度　44

4.3.2　邊框顏色　46

4.4　設置表格行的對齊方式　47

4.4.1　垂直對齊方式　47

4.4.2　水平對齊方式　48

4.5　行和列的合並　49

4.5.1　列的合並　49

4.5.2　行的合並　50

4.6　表格結構　51

4.6.1　表頭　51

4.6.2　主體　52

4.6.3　表尾　53

4.7　表格標題　55

4.8　表格嵌套　56

4.9　小結　57

習題　57

上機指導　58

實驗一　58

實驗二　59

實驗三　60

第5章　多媒體和列表　62

5.1　多媒體元素　62

5.2　視頻元素　62

5.2.1　插入視頻元素　62

5.2.2　循環播放視頻　63

5.2.3　自動播放視頻　64

5.2.4　設置視頻封面　65

5.3　音頻元素　66

5.4　無序列表　67

5.4.1　無序列表結構　67

5.4.2　無序列表的列表項樣式　68

5.5　有序列表　69

5.5.1　有序列表結構　69

5.5.2　有序列表的列表項樣式　70

5.6　嵌套列表　71

5.7　定義列表　72

5.8　目錄列表　73

5.9　小結　74

習題　74

上機指導　74

實驗一　74

實驗二　75

實驗三　75

第6章　表單　77

6.1　添加表單　77

6.1.1　鏈接跳轉　77

6.1.2　鏈接跳轉方式　78

6.1.3　表單名稱　78

6.2　輸入標簽　78

6.2.1　文本框　78

6.2.2　密碼框　79

6.2.3　單選按鈕　79

6.2.4　復選框　80

6.2.5　“提交”按鈕　81

6.2.6　“重置”按鈕　82

6.2.7　“圖像”按鈕　82

6.2.8　文件域　83

6.2.9　隱藏域　84

6.3　下拉列表　85

6.4　文本域　86

6.5　小結　86

習題　86

上機指導　87

實驗一　87

實驗二　87

實驗三　88

第7章　認識CSS　89

7.1　CSS簡介　89

7.2　CSS樣式表的設置方法　89

7.2.1　內聯樣式表　89

7.2.2　內部樣式表　90

7.2.3　外部樣式表　91

7.2.4　引用多個CSS外部樣式表　92

7.2.5　使用@import引用外部樣式表　92

7.2.6　CSS註釋　93

7.3　選擇器　94

7.3.1　元素選擇器　94

7.3.2　類選擇器　95

7.3.3　ID選擇器　98

7.3.4　包含選擇器　98

7.3.5　分組選擇器　101

7.3.6　通用選擇器　102

7.3.7　子選擇器　103

7.3.8　相鄰選擇器　105

7.3.9　屬性選擇器　106

7.4　偽類和偽元素　109

7.4.1　偽類　109

7.4.2　偽元素　110

7.5　CSS優先級　111

7.6　CSS中的單位　113

7.6.1　顏色單位　113

7.6.2　長度單位　113

7.6.3　時間單位　114

7.6.4　角度單位　114

7.6.5　頻率單位　114

7.7　小結　114

習題　114

上機指導　115

實驗一　115

實驗二　115

實驗三　116

第8章　設置文字和文本樣式　117

8.1　設置文字樣式　117

8.1.1　設置字體　117

8.1.2　設置文字大小　118

8.1.3　設置粗體　119

8.1.4　設置文字顏色　120

8.1.5　設置斜體　121

8.1.6　綜合設置　121

8.2　設置文本樣式　122

8.2.1　設置陰影效果　122

8.2.2　大小寫轉換　123

8.2.3　設置文本縮進　124

8.2.4　設置文本的水平對齊方式　125

8.2.5　設置文本的垂直對齊方式　126

8.2.6　設置文本流入方向　127

8.2.7　設置文本修飾　128

8.3　空格與換行　129

8.3.1　空格的處理方式　129

8.3.2　字內換行　131

8.4　設置間距　132

8.4.1　設置行間距　132

8.4.2　設置字間距　134

8.4.3　設置詞間距　135

8.5　小結　137

習題　137

上機指導　138

實驗一　138

實驗二　138

實驗三　139

第9章　設置背景、邊框、邊距和補白　140

9.1　背景顏色　140

9.2　背景圖像　140

9.2.1　設置背景圖像　141

9.2.2　設置固定背景圖像　142

9.2.3　設置背景圖像平鋪方式　143

9.2.4　背景圖像定位　145

9.3　邊框　147

9.3.1　設置邊框樣式　147

9.3.2　設置不同的邊框樣式　148

9.3.3　設置邊框寬度　149

9.3.4　設置不同的邊框寬度　150

9.3.5　設置邊框顏色　151

9.3.6　設置不同的邊框顏色　152

9.3.7　綜合設置邊框效果　153

9.4　邊距　154

9.4.1　設置上邊距　154

9.4.2　設置下邊距　155

9.4.3　設置左邊距　156

9.4.4　設置右邊距　157

9.4.5　綜合設置邊距　158

9.5　補白　159

9.5.1　設置頂端補白　159

9.5.2　設置底部補白　160

9.5.3　設置左側補白　160

9.5.4　設置右側補白　161

9.5.5　綜合設置補白　161

9.6　小結　162

習題　163

上機指導　163

實驗一　163

實驗二　164

實驗三　165

第　10章 設置表格、列表和滾動條樣式　166

10.1　表格　166

10.1.1　合並表格邊框　166

10.1.2　定義表格邊框間距　167

10.1.3　定義表格標題位置　168

10.1.4　設置表格佈局　170

10.2　列表　171

10.2.1　設置列表符號樣式　171

10.2.2　使用圖片設置列表符號樣式　173

10.2.3　列表符號顯示位置　174

10.2.4　綜合設置列表樣式　175

10.3　滾動條　176

10.3.1　設置滾動條顏色　176

10.3.2　設置滾動條寬度　177

10.4　小結　178

習題　179

上機指導　179

實驗一　179

實驗二　180

實驗三　180

第　11章 CSS3特效和動畫　182

11.1　圓角　182

11.1.1　設置邊框為圓角　182

11.1.2　設置每個圓角為指定值　183

11.2　透明度　184

11.3　背景　185

11.4　漸變　187

11.4.1　線性漸變　187

11.4.2　徑向漸變　188

11.5　2D 和3D轉換　190

11.5.1　2D轉換　190

11.5.2　3D轉換　191

11.6　過渡　193

11.7　動畫　194

11.8　小結　196

習題　197

上機指導　197

實驗一　197

實驗二　198

第　12章 控制元素佈局　199

12.1　塊級元素和內聯元素　199

12.1.1　塊級元素和內聯元素的概念　199

12.1.2　div元素和span元素　199

12.2　定位　201

12.2.1　定位方式　201

12.2.2　偏移　201

12.2.3　綜合應用　202

12.2.4　定位元素的層疊次序　204

12.3　浮動　205

12.3.1　浮動的概念　206

12.3.2　設置浮動　206

12.3.3　清除浮動　207

12.4　溢出與剪切　208

12.4.1　設置溢出效果　208

12.4.2　設置水平方向超出範圍的處理方式　210

12.4.3　設置垂直方向超出範圍的處理方式　211

12.4.4　內容的剪切　211

12.5　對象的顯示與隱藏　212

12.6　小結　213

習題　214

上機指導　214

實驗一　214

實驗二　215

實驗三　215

第　13章 網頁佈局與設計技巧　217

13.1　網頁佈局　217

13.1.1　網頁大小　217

13.1.2　網頁欄目劃分　218

13.1.3　表格佈局　219

13.1.4　CSS佈局　220

13.2　CSS佈局技巧　222

13.2.1　一欄佈局　222

13.2.2　二欄佈局　223

13.2.3　多欄佈局　224

13.3　CSS盒子模型　225

13.3.1　盒子模型的概念　225

13.3.2　設置外邊距　225

13.3.3　設置邊框樣式　226

13.3.4　設置內邊距　228

13.4　小結　229

習題　229

上機指導　229

實驗一　229

實驗二　230

實驗三　231

第　14章 JavaScript快速入門　232

14.1　初識JavaScript　232

14.1.1　JavaScript語言的組成　232

14.1.2　嵌入方式　236

14.1.3　註釋　237

14.2　動態對元素操作　237

14.2.1　document對象　238

14.2.2　獲取元素中的內容　239

14.2.3　修改元素內容和屬性值　241

14.2.4　修改元素樣式　242

14.3　事件　244

14.3.1　事件方法的基礎語法　244

14.3.2　鼠標事件　244

14.3.3　鍵盤事件　245

14.3.4　表單事件　246

14.4　小結　247

習題　247

上機指導　248

實驗一　248

實驗二　249

實驗三　249

第　15章 網頁佈局綜合案例——寶貝屋網上商店　251

15.1　案例分析　251

15.2　內容分析　252

15.3　原型設計　252

15.4　佈局設計　253

15.4.1　整體樣式設計　253

15.4.2　頁頭部分　254

15.4.3　內容部分　258

15.4.4　頁腳部分　262

15.5　交互效果設計　263

15.5.1　頂部導航欄　263

15.5.2　主導航欄　264

15.5.3　賬號區　264

15.5.4　圖像邊框　264

15.5.5　產品分類　265

15.6　Banner自動輪播效果　265

15.7　小結　267