網頁設計與製作 HTML+CSS+JavaScript標準教程

倪震，南京晓庄学院信息工程学院副教授，中国计算机学会会员、江苏省大数据委员会委员，江苏省人工智能学会（JSAI）委员，数据挖掘与应用专业委员会委员，人工智能教育专业委员会委员，青少年信息与智能教育专业委员会委员。作为主要研究人员主持及参与多项国家自然科学基金及省部级基金项目，在数据挖掘、大数据以及相关领域的信息安全和隐私保护等方面有一定的研究积累，累计发表学术论文20余篇，主编21世纪高校应用型规划教材1本，其他相关教材若干。参与了国家军品973、航天、兵器、总参、总装等多项课题，主持了水利、计量、信息安全领域的多个产品研发。

目錄

CONTENTS

第　1章 網頁設計基礎　1

學習目標　1

1.1　網頁概述　1

1.1.1　什麽是網頁　1

1.1.2　網頁分類　2

1.2　網站的開發流程　2

1.2.1　分析客戶需求　2

1.2.2　註冊網站域名　2

1.2.3　購買服務器　2

1.2.4　選擇網站風格　3

1.2.5　設計/編寫/上線網站　3

1.3　網頁前端開發語言　3

1.3.1　HTML　3

1.3.2　CSS　3

1.3.3　JavaScript　4

1.4　開發第 一個網頁　4

1.4.1　網頁展示工具　4

1.4.2　網頁開發工具　4

1.4.3　創建第 一個網頁　6

思考與練習　8

第　2章 HTML基礎　9

學習目標　9

2.1　HTML概述　10

2.1.1　HTML的發展歷史　10

2.1.2　HTML的標簽　10

2.2　HTML頁面設計　12

2.2.1　文檔類型　12

2.2.2　文檔根部　13

2.2.3　文檔頭部　13

2.2.4　文檔信息　13

2.2.5　文檔標題　14

2.2.6　文檔主體　14

2.3　HTML文字設計　14

2.3.1　文字類型　15

2.3.2　文本控制　19

2.3.3　文本語義　20

2.3.4　特殊字符　20

2.4　使用鏈接　21

2.4.1　什麽是鏈接　22

2.4.2　鏈接標簽　22

2.4.3　錨點鏈接　24

2.5　使用多媒體　28

2.5.1　使用圖片　29

2.5.2　使用視頻和音頻　32

2.6　表格設計　34

2.6.1　創建表格　34

2.6.2　設置表格樣式　35

2.7　表單設計　37

2.7.1　創建表單　37

2.7.2　input控件　38

2.7.3　多行文本框　40

2.7.4　表單分組　41

2.7.5　下拉菜單　42

2.8　HTML 5新結構　43

2.8.1　HTML 5概述　43

2.8.2　HTML 5文檔結構標簽　44

2.9　實戰案例解析——植樹節主題電子板報　45

思考與練習　48

第3章　CSS基礎　49

學習目標　49

3.1　CSS概述　49

3.1.1　什麽是CSS　50

3.1.2　CSS的優勢　50

3.2　CSS語法基礎　50

3.2.1　CSS的樣式規則　51

3.2.2　CSS樣式的引入　51

3.3　CSS選擇器　54

3.3.1　基礎選擇器　54

3.3.2　屬性選擇器　59

3.3.3　關系選擇器　62

3.4　CSS繼承性　65

3.5　CSS層疊性　66

3.6　CSS優先級　67

3.6.1　引入方式　67

3.6.2　權重　67

3.7　實戰案例解析——404通知頁面　69

思考與練習　72

第4章　CSS網頁元素　73

學習目標　73

4.1　文本樣式　73

4.1.1　字體設計　74

4.1.2　文本設計　76

4.2　表格樣式　79

4.2.1　設置邊框　79

4.2.2　設置單元格　79

4.3　列表樣式　80

4.3.1　設置列表項標記　81

4.3.2　圖像作為列表項標記　82

4.3.3　定位列表項標記　82

4.4　盒子模型　83

4.4.1　盒子模型概述　83

4.4.2　盒子模型的邊框　83

4.4.3　盒子模型的邊距　84

4.4.4　盒子模型的寬和高　86

4.4.5　盒子模型的背景　86

4.5　CSS高級屬性　89

4.5.1　透明度　89

4.5.2　漸變　89

4.5.3　陰影　91

4.5.4　過渡　92

4.6　實戰案例解析——招聘網頁　94

思考與練習　97

第5章　DIV+CSS佈局方法　98

學習目標　98

5.1　佈局的基礎元素　98

5.1.1　塊元素div　98

5.1.2　內聯元素span　99

5.1.3　元素類型轉換　100

5.2　佈局方式　101

5.2.1　佈局的流程　101

5.2.2　浮動設計　102

5.2.3　標簽定位　104

5.2.4　溢出　106

5.2.5　標簽堆疊　106

5.3　佈局類型　108

5.3.1　單列佈局　108

5.3.2　雙列佈局　108

5.3.3　三列佈局　109

5.3.4　通欄佈局　109

5.4　實戰案例解析——購物節主題網頁　109

思考與練習　111

第6章　JavaScript基礎　113

學習目標　113

6.1　JavaScript概述　113

6.1.1　JavaScript的發展歷史　114

6.1.2　引入JavaScript　114

6.2　基本語法　115

6.2.1　標識符　115

6.2.2　關鍵字　116

6.2.3　數據類型　116

6.2.4　變量　116

6.2.5　註釋　117

6.3　運算符　118

6.3.1　賦值運算符　118

6.3.2　算術運算符　118

6.3.3　比較運算符　119

6.3.4　邏輯運算符　120

6.4　流程控制結構　121

6.4.1　分支結構　121

6.4.2　循環結構　123

6.4.3　跳轉結構　126

6.5　函數　126

6.5.1　自定義函數　127

6.5.2　預定義函數　128

6.6　對象　129

6.6.1　自定義對象　129

6.6.2　Array數組對象　132

6.6.3　String字符串對象　134

6.6.4　Date日期對象　135

6.7　實戰案例解析——焦點圖片輪播　137

思考與練習　139

第7章　BOM和DOM對象模型　140

學習目標　140

7.1　瀏覽器對象模型BOM　140

7.1.1　瀏覽器對象模型概述　140

7.1.2　Window對象　141

7.1.3　Navigator對象　146

7.1.4　History對象　146

7.1.5　Location對象　148

7.1.6　Screen 對象　149

7.2　文檔對象模型DOM　150

7.2.1　文檔對象模型概述　150

7.2.2　Document對象　151

7.2.3　表單驗證　153

7.3　事件響應　156

7.3.1　事件概述　156

7.3.2　鼠標事件　156

7.3.3　鍵盤事件　158

7.3.4　文檔事件　160

7.4　節點　161

7.4.1　節點關系　161

7.4.2　添加和刪除節點　161

7.4.3　修改屬性節點　164

7.4.4　節點集合　165

7.5　實戰案例解析——選項卡自動切換　166

思考與練習　170

第8章　AJAX和jQuery應用　171

學習目標　171

8.1　AJAX應用　171

8.1.1　AJAX概述　171

8.1.2　配置IIS服務器　173

8.1.3　XMLHttpRequest對象　173

8.1.4　XMLHttpRequest對象的工作過程　174

8.1.5　使用AJAX訪問服務器文件的內容　176

8.2　jQuery應用　177

8.2.1　jQuery概述　177

8.2.2　jQuery引入　177

8.2.3　jQuery基礎語法　178

8.2.4　jQuery選擇器　179

8.2.5　jQuery事件　182

8.2.6　jQuery效果　184

8.3　實戰案例解析——側邊欄折疊菜單效果　187

思考與練習　189

第9章　JavaScript擴展框架應用　191

學習目標　191

9.1　Highcharts框架　192

9.1.1　Highcharts概述　192

9.1.2　Highcharts的引入　192

9.1.3　繪制簡單圖表　192

9.1.4　Highcharts圖表配置項　193

9.1.5　圖表類型　194

9.1.6　版權信息　194

9.1.7　圖例　195

9.1.8　標題和副標題　196

9.1.9　數據列　196

9.1.10　提示框　197

9.2　Vue.js框架　198

9.2.1　Vue.js概述與引入　198

9.2.2　數據和對象　199

9.2.3　生命周期鉤子　200

9.2.4　插值　201

9.2.5　指令　201

9.2.6　事件監聽　206

9.2.7　綁定樣式　209

9.3　實戰案例解析——銷售業績分析頁面　211

思考與練習　214

第　10章 綜合實訓：社區論壇網站　216

學習目標　216

10.1　Discuz!論壇簡介　216

10.2　下載安裝論壇　217

10.2.1　配置服務器和數據庫　217

10.2.2　下載和安裝Discuz!論壇建站程序　217

10.3　論壇管理　221

10.3.1　進入管理界面　221

10.3.2　論壇導航設置　222

10.3.3　設置論壇版塊　222

10.3.4　添加公告　223

10.3.5　添加廣告　224

10.3.6　自定義模板　225

10.4　添加自定義頁面　227

思考與練習　229

第　11章 綜合實訓：電子商務網站　230

學習目標　230

11.1　分析網站效果圖　230

11.2　製作首頁　231

11.2.1　製作頭部　231

11.2.2　製作導航欄　232

11.2.3　製作banner　233

11.2.4　製作商品展示框　235

11.2.5　製作頁腳　236

11.3　添加JavaScript代碼　237

11.4　製作二級頁面　238

11.5　運行網站　239

思考與練習　241