網(wǎng)頁設(shè)計(jì)與制作 HTML+CSS+JavaScript標(biāo)準(zhǔn)教程

目錄
CONTENTS
第 1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ) 1
學(xué)習(xí)目標(biāo) 1
1.1 網(wǎng)頁概述 1
1.1.1 什么是網(wǎng)頁 1
1.1.2 網(wǎng)頁分類 2
1.2 網(wǎng)站的開發(fā)流程 2
1.2.1 分析客戶需求 2
1.2.2 注冊(cè)網(wǎng)站域名 2
1.2.3 購買服務(wù)器 2
1.2.4 選擇網(wǎng)站風(fēng)格 3
1.2.5 設(shè)計(jì) 編寫 上線網(wǎng)站 3
1.3 網(wǎng)頁前端開發(fā)語言 3
1.3.1 HTML 3
1.3.2 CSS 3
1.3.3 JavaScript 4
1.4 開發(fā)第 一個(gè)網(wǎng)頁 4
1.4.1 網(wǎng)頁展示工具 4
1.4.2 網(wǎng)頁開發(fā)工具 4
1.4.3 創(chuàng)建第 一個(gè)網(wǎng)頁 6
思考與練習(xí) 8
第 2章 HTML基礎(chǔ) 9
學(xué)習(xí)目標(biāo) 9
2.1 HTML概述 10
2.1.1 HTML的發(fā)展歷史 10
2.1.2 HTML的標(biāo)簽 10
2.2 HTML頁面設(shè)計(jì) 12
2.2.1 文檔類型 12
2.2.2 文檔根部 13
2.2.3 文檔頭部 13
2.2.4 文檔信息 13
2.2.5 文檔標(biāo)題 14
2.2.6 文檔主體 14
2.3 HTML文字設(shè)計(jì) 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 鏈接標(biāo)簽 22
2.4.3 錨點(diǎn)鏈接 24
2.5 使用多媒體 28
2.5.1 使用圖片 29
2.5.2 使用視頻和音頻 32
2.6 表格設(shè)計(jì) 34
2.6.1 創(chuàng)建表格 34
2.6.2 設(shè)置表格樣式 35
2.7 表單設(shè)計(jì) 37
2.7.1 創(chuàng)建表單 37
2.7.2 input控件 38
2.7.3 多行文本框 40
2.7.4 表單分組 41
2.7.5 下拉菜單 42
2.8 HTML 5新結(jié)構(gòu) 43
2.8.1 HTML 5概述 43
2.8.2 HTML 5文檔結(jié)構(gòu)標(biāo)簽 44
2.9 實(shí)戰(zhàn)案例解析——植樹節(jié)主題電子板報(bào) 45
思考與練習(xí) 48
第3章 CSS基礎(chǔ) 49
學(xué)習(xí)目標(biāo) 49
3.1 CSS概述 49
3.1.1 什么是CSS 50
3.1.2 CSS的優(yōu)勢(shì) 50
3.2 CSS語法基礎(chǔ) 50
3.2.1 CSS的樣式規(guī)則 51
3.2.2 CSS樣式的引入 51
3.3 CSS選擇器 54
3.3.1 基礎(chǔ)選擇器 54
3.3.2 屬性選擇器 59
3.3.3 關(guān)系選擇器 62
3.4 CSS繼承性 65
3.5 CSS層疊性 66
3.6 CSS優(yōu)先級(jí) 67
3.6.1 引入方式 67
3.6.2 權(quán)重 67
3.7 實(shí)戰(zhàn)案例解析——404通知頁面 69
思考與練習(xí) 72
第4章 CSS網(wǎng)頁元素 73
學(xué)習(xí)目標(biāo) 73
4.1 文本樣式 73
4.1.1 字體設(shè)計(jì) 74
4.1.2 文本設(shè)計(jì) 76
4.2 表格樣式 79
4.2.1 設(shè)置邊框 79
4.2.2 設(shè)置單元格 79
4.3 列表樣式 80
4.3.1 設(shè)置列表項(xiàng)標(biāo)記 81
4.3.2 圖像作為列表項(xiàng)標(biāo)記 82
4.3.3 定位列表項(xiàng)標(biāo)記 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高級(jí)屬性 89
4.5.1 透明度 89
4.5.2 漸變 89
4.5.3 陰影 91
4.5.4 過渡 92
4.6 實(shí)戰(zhàn)案例解析——招聘網(wǎng)頁 94
思考與練習(xí) 97
第5章 DIV CSS布局方法 98
學(xué)習(xí)目標(biāo) 98
5.1 布局的基礎(chǔ)元素 98
5.1.1 塊元素div 98
5.1.2 內(nèi)聯(lián)元素span 99
5.1.3 元素類型轉(zhuǎn)換 100
5.2 布局方式 101
5.2.1 布局的流程 101
5.2.2 浮動(dòng)設(shè)計(jì) 102
5.2.3 標(biāo)簽定位 104
5.2.4 溢出 106
5.2.5 標(biāo)簽堆疊 106
5.3 布局類型 108
5.3.1 單列布局 108
5.3.2 雙列布局 108
5.3.3 三列布局 109
5.3.4 通欄布局 109
5.4 實(shí)戰(zhàn)案例解析——購物節(jié)主題網(wǎng)頁 109
思考與練習(xí) 111
第6章 JavaScript基礎(chǔ) 113
學(xué)習(xí)目標(biāo) 113
6.1 JavaScript概述 113
6.1.1 JavaScript的發(fā)展歷史 114
6.1.2 引入JavaScript 114
6.2 基本語法 115
6.2.1 標(biāo)識(shí)符 115
6.2.2 關(guān)鍵字 116
6.2.3 數(shù)據(jù)類型 116
6.2.4 變量 116
6.2.5 注釋 117
6.3 運(yùn)算符 118
6.3.1 賦值運(yùn)算符 118
6.3.2 算術(shù)運(yùn)算符 118
6.3.3 比較運(yùn)算符 119
6.3.4 邏輯運(yùn)算符 120
6.4 流程控制結(jié)構(gòu) 121
6.4.1 分支結(jié)構(gòu) 121
6.4.2 循環(huán)結(jié)構(gòu) 123
6.4.3 跳轉(zhuǎn)結(jié)構(gòu) 126
6.5 函數(shù) 126
6.5.1 自定義函數(shù) 127
6.5.2 預(yù)定義函數(shù) 128
6.6 對(duì)象 129
6.6.1 自定義對(duì)象 129
6.6.2 Array數(shù)組對(duì)象 132
6.6.3 String字符串對(duì)象 134
6.6.4 Date日期對(duì)象 135
6.7 實(shí)戰(zhàn)案例解析——焦點(diǎn)圖片輪播 137
思考與練習(xí) 139
第7章 BOM和DOM對(duì)象模型 140
學(xué)習(xí)目標(biāo) 140
7.1 瀏覽器對(duì)象模型BOM 140
7.1.1 瀏覽器對(duì)象模型概述 140
7.1.2 Window對(duì)象 141
7.1.3 Navigator對(duì)象 146
7.1.4 History對(duì)象 146
7.1.5 Location對(duì)象 148
7.1.6 Screen 對(duì)象 149
7.2 文檔對(duì)象模型DOM 150
7.2.1 文檔對(duì)象模型概述 150
7.2.2 Document對(duì)象 151
7.2.3 表單驗(yàn)證 153
7.3 事件響應(yīng) 156
7.3.1 事件概述 156
7.3.2 鼠標(biāo)事件 156
7.3.3 鍵盤事件 158
7.3.4 文檔事件 160
7.4 節(jié)點(diǎn) 161
7.4.1 節(jié)點(diǎn)關(guān)系 161
7.4.2 添加和刪除節(jié)點(diǎn) 161
7.4.3 修改屬性節(jié)點(diǎn) 164
7.4.4 節(jié)點(diǎn)集合 165
7.5 實(shí)戰(zhàn)案例解析——選項(xiàng)卡自動(dòng)切換 166
思考與練習(xí) 170
第8章 AJAX和jQuery應(yīng)用 171
學(xué)習(xí)目標(biāo) 171
8.1 AJAX應(yīng)用 171
8.1.1 AJAX概述 171
8.1.2 配置IIS服務(wù)器 173
8.1.3 XMLHttpRequest對(duì)象 173
8.1.4 XMLHttpRequest對(duì)象的工作過程 174
8.1.5 使用AJAX訪問服務(wù)器文件的內(nèi)容 176
8.2 jQuery應(yīng)用 177
8.2.1 jQuery概述 177
8.2.2 jQuery引入 177
8.2.3 jQuery基礎(chǔ)語法 178
8.2.4 jQuery選擇器 179
8.2.5 jQuery事件 182
8.2.6 jQuery效果 184
8.3 實(shí)戰(zhàn)案例解析——側(cè)邊欄折疊菜單效果 187
思考與練習(xí) 189
第9章 JavaScript擴(kuò)展框架應(yīng)用 191
學(xué)習(xí)目標(biāo) 191
9.1 Highcharts框架 192
9.1.1 Highcharts概述 192
9.1.2 Highcharts的引入 192
9.1.3 繪制簡單圖表 192
9.1.4 Highcharts圖表配置項(xiàng) 193
9.1.5 圖表類型 194
9.1.6 版權(quán)信息 194
9.1.7 圖例 195
9.1.8 標(biāo)題和副標(biāo)題 196
9.1.9 數(shù)據(jù)列 196
9.1.10 提示框 197
9.2 Vue.js框架 198
9.2.1 Vue.js概述與引入 198
9.2.2 數(shù)據(jù)和對(duì)象 199
9.2.3 生命周期鉤子 200
9.2.4 插值 201
9.2.5 指令 201
9.2.6 事件監(jiān)聽 206
9.2.7 綁定樣式 209
9.3 實(shí)戰(zhàn)案例解析——銷售業(yè)績分析頁面 211
思考與練習(xí) 214
第 10章 綜合實(shí)訓(xùn)：社區(qū)論壇網(wǎng)站 216
學(xué)習(xí)目標(biāo) 216
10.1 Discuz!論壇簡介 216
10.2 下載安裝論壇 217
10.2.1 配置服務(wù)器和數(shù)據(jù)庫 217
10.2.2 下載和安裝Discuz!論壇建站程序 217
10.3 論壇管理 221
10.3.1 進(jìn)入管理界面 221
10.3.2 論壇導(dǎo)航設(shè)置 222
10.3.3 設(shè)置論壇版塊 222
10.3.4 添加公告 223
10.3.5 添加廣告 224
10.3.6 自定義模板 225
10.4 添加自定義頁面 227
思考與練習(xí) 229
第 11章 綜合實(shí)訓(xùn)：電子商務(wù)網(wǎng)站 230
學(xué)習(xí)目標(biāo) 230
11.1 分析網(wǎng)站效果圖 230
11.2 制作首頁 231
11.2.1 制作頭部 231
11.2.2 制作導(dǎo)航欄 232
11.2.3 制作banner 233
11.2.4 制作商品展示框 235
11.2.5 制作頁腳 236
11.3 添加JavaScript代碼 237
11.4 制作二級(jí)頁面 238
11.5 運(yùn)行網(wǎng)站 239
思考與練習(xí) 241