在作者近十余年的Web技術課程教學實踐中，每逢在網(wǎng)上書店或者實體書店為新學期的課程選定教材時，面對琳瑯滿目的前端開發(fā)圖書時，感激和期待便油然而生。感激有這么多技術大伽、一線教師、從業(yè)人員關注和研究這個領域，并不辭勞苦地分享各自的研究、開發(fā)實踐和教學心得。與此同時，Web技術類的圖書越多，難免我的期待越高，期望這次總應該能找到符合我們專業(yè)的教材，可當翻閱完了書架上所有相關圖書時，難免絲絲失望和無奈，現(xiàn)有圖書多以HTML5、CSS3、JavaScript技術羅列為主導，又或者以某個軟件的功能模塊為主導，多側重于介紹Web技術孤立的知識和技術，沒能融入前端開發(fā)工作過程任務間的銜接和工作情境，對初學者認識和實踐中的誤區(qū)沒有給予指導解惑，而不是以培養(yǎng)學習者前端開發(fā)能力的為主導，不是以培養(yǎng)學習者透析前端開發(fā)模式為主導，同時現(xiàn)有教材也忽視了教師組織課堂教學的需要，沒有開展教與學過程分析，沒有兼顧好教學內容組織和教學過程組織，給教師教學設計和學生能力和知識的構建沒有做好鋪墊，教師不好用，學生不樂意學。由此感慨等一本符合自己課程需求的教材怎么會要這么久，難道真的要一萬年嗎？2016年10月26日~28日，工業(yè)和信息化職業(yè)教育教學指導委員會計算機專指委在大連召開數(shù)字媒體應用技術專業(yè)建設研討會，研討會由大連東軟信息學院、東軟電子出版社承辦，研討會非常成功，來自全國的數(shù)字媒體類參會人員交流的心得，提出了各自的期待和需求，出版社領導和編輯鼓勵大家結合課程教學需求開發(fā)配套教材和資源，由此激發(fā)了我編著此本的決心和奢求。
我的期望在于，以學習者勝任前端工程師崗位工作任務為目標，循序漸進，掌握HTML5、CSS3、JavaScript、jQuery等技術綜合應用，熟悉WebStorm開發(fā)環(huán)境，適應網(wǎng)頁前端開發(fā)工作的規(guī)范化、模塊化和組件化崗位要求。以任務導入激發(fā)學習者學習積極性，以工作過程必需的任務目標維持學習者的學習積極性，以核心知識幫助學習構建自己新的認知結構，任務實施以建立項目、編寫HTML、編寫CSS和瀏覽器測試為工作過程，詳盡地的指導學習者的前端開發(fā)能力實踐，以強化訓練提升學生的知識和能力的遷移能力，期待這種設計和嘗試，真正讓教師好用，學生樂意學。
本書得到了廣東省高職教育品牌專業(yè)項目的經(jīng)費支持，企業(yè)一線的前端開發(fā)人員邱景生、楊起捷、黃亮等參與了項目任務設計和并給予了全程指導，劉琳、寧艷也提出了很多寶貴建議，全書由趙建保負責整體設計、主體編著和統(tǒng)稿，參與編著的人員有陸麗純、鄧夢佳、蔣國才、鐘曉妮。大連東軟電子出版社的領導和編輯衛(wèi)杲旻、李卓超老師對本書的整體設計和編寫提供了寶貴的建議和指導，在此表示衷心的感謝。本書涉及到的主要軟件及資源有WebStorm、jQuery、Bootstrap等，請在學習前自行下載或購買這些軟件，并根據(jù)軟件向導完成安裝。本書配套素材資源請按出版社指引下載。
由于IT發(fā)展迅猛，作者項目實踐和知識視野有限，經(jīng)驗不夠豐富，書中不足之處在所難免，墾請讀者提出寶貴的意見和建議。聯(lián)系方式（E-mail）：mpcer@163.com
目錄
任務1 搭建Web前端開發(fā)環(huán)境... 13
1.1 任務導入... 13
1.2 任務目標... 13
1.3 核心知識... 13
1.3.1 網(wǎng)頁訪問機制... 13
1.3.2 瀏覽器市場份額... 14
1.3.3 瀏覽器內核及渲染過程... 15
1.3.4 PHP
Web服務器組件... 16
1.3.5 Web服務器啟動失敗原因分析... 16
1.3.6 移動前端開發(fā)環(huán)境網(wǎng)絡拓撲結構... 17
1.3.7
WebStorm優(yōu)勢... 17
1.3.8 EMMET語法... 17
1.4 任務實施... 18
1.4.1 操作系統(tǒng)版本及位數(shù)識別... 18
1.4.2
Chrome瀏覽器... 19
1.4.3 搭建Web服務器... 22
1.4.4
WebStorm.. 26
1.4.5 移動端測試環(huán)境... 32
1.5 強化訓練... 33
任務2 編寫網(wǎng)頁模板... 34
2.1 任務導入... 34
2.2 任務目標... 34
2.3 核心知識... 35
2.3.1 Web標準... 35
2.3.2 Web項目結構... 35
2.3.3 通用規(guī)范... 36
2.3.4 HTML規(guī)范... 37
2.3.5 CSS命名規(guī)范... 39
2.3.6 JS規(guī)范... 44
2.3.7 圖像規(guī)范... 45
2.3.8
DOCTYPE（文檔類型）... 45
2.3.9 meta. 45
2.3.10
favicon. 46
2.3.11 CSS概述... 46
2.3.12 CSS 語法... 47
2.3.13 CSS存在方式... 47
2.3.14 CSS繼承與優(yōu)先級規(guī)則... 49
2.3.15 CSS3新增功能... 49
2.3.16 CSS3選擇器類型... 50
2.3.17 鏈接JS. 52
2.3.18 HTML頁面模板... 53
2.4 任務實施... 53
2.4.1 建立項目... 53
2.4.2 編寫HTML文件... 54
2.4.3 編寫CSS樣式... 56
2.4.4 編寫JS腳本... 60
2.4.5 瀏覽器測試... 61
2.5 強化訓練... 62
任務3 文本排版... 63
3.1 任務導入... 63
3.2 任務目標... 63
3.3 核心知識... 64
3.3.1 元素默認樣式屬性值... 64
3.3.2 瀏覽器默認樣式... 65
3.3.3 字體屬性... 66
3.3.4 字族font-family. 66
3.3.5 字體大小font-size. 69
3.3.6 字體變形font-variant 71
3.3.7 字體樣式font-style. 71
3.3.8 字體粗細font-weight 71
3.3.9 字體屬性font 72
3.3.10 文本屬性text 74
3.3.11 文本顏色color 75
3.3.12 顏色模式... 75
3.3.13 上標(sup)下標(sub) 77
3.3.14 文本效果text-decoration. 77
3.3.15 字母間距l(xiāng)etter-spacing. 77
3.3.16 單詞間距word-spacing. 77
3.3.17 空白white-space. 78
3.3.18 文本換行word-wrap. 78
3.3.19 文本換行word-break. 79
3.3.20 文本縮進text-indent 79
3.3.21 文本對齊text-align. 80
3.3.22 垂直對齊vertical-align. 80
3.3.23 文本陰影text-shadow.. 81
3.3.24 溢出文本text-overflow.. 83
3.3.25 文字方向direction. 84
3.3.26 行高line-height 84
3.4 任務實施... 87
3.4.1 建立項目... 87
3.4.2 編寫HTML文件... 87
3.4.3 編寫CSS樣式... 88
3.4.4 瀏覽器測試... 90
3.5 強化訓練... 90
任務4 Web字體圖標... 90
4.1 任務導入... 90
4.2 任務目標... 91
4.3 核心知識... 91
4.3.1
Sprite圖標的缺陷... 91
4.3.2 字體圖標... 92
4.3.3 Font
Awesome. 92
4.3.4
Glyphicons 93
4.3.5 CSS
content 屬性... 94
4.3.6 字體圖標定義... 94
4.3.7 字體圖標用法... 96
4.4 任務實施... 97
4.4.1 建立項目... 97
4.4.2 編寫HTML文件... 97
4.4.3 編寫CSS樣式... 97
4.4.4 瀏覽器測試... 99
4.5 強化訓練... 99
任務5 圖片排版... 99
5.1 任務導入... 99
5.2 任務目標... 100
5.3 核心知識... 101
5.3.1 圖片來源... 101
5.3.2 圖像質量評價... 101
5.3.3 img標記... 103
5.3.4 網(wǎng)頁圖片4大格式... 103
5.3.5
figure與figcaption. 105
5.3.6 CSS控制圖片大小... 106
5.3.7 CSS圖片左右對齊... 106
5.3.8 CSS圖片居中對齊... 106
5.3.9 CSS響應式圖片... 106
5.3.10 CSS圖像風格樣式... 107
5.3.11 疊加式圖片標題排版... 107
5.3.12 CSS精靈圖... 109
5.3.13 圖片陰影（box-shadow）... 110
5.3.14 CSS3的圓角（border-radius）... 111
5.4 任務實施... 112
5.4.1 建立項目... 112
5.4.2 編寫HTML文件... 113
5.4.3 編寫CSS樣式... 114
5.4.4 瀏覽器測試... 117
5.5 強化訓練... 117
任務6 列表排版... 118
6.1 任務導入... 118
6.2 任務目標... 119
6.3 核心知識... 119
6.3.1 HTML列表類型... 119
6.3.2 嵌套列表... 120
6.3.3 列表HTML結構... 120
6.3.4
list-style-type屬性... 121
6.3.5
list-style-image屬性... 122
6.3.6
list-style-position屬性... 122
6.3.7 列表默認樣式... 122
6.3.8 自定義列表符號... 123
6.4 任務實施... 124
6.4.1 建立項目... 124
6.4.2 編寫HTML文件... 125
6.4.3 編寫CSS樣式... 127
6.4.4 瀏覽器測試... 128
6.5 強化訓練... 128
任務7 表格排版... 129
7.1 任務導入... 129
7.2 任務目標... 130
7.3 核心知識... 130
7.3.1 表格HTML結構... 130
7.3.2 表格的層次結構... 131
7.3.3 行合并和列合并... 132
7.3.4 表格刪除和隱藏... 133
7.3.5 邊框border 134
7.3.6 表格邊框合并與分離... 135
7.3.7 表格對齊... 136
7.3.8 條紋表格... 136
7.3.9 懸停表格... 136
7.4 任務實施... 137
7.4.1 建立項目... 137
7.4.2 編寫HTML文件... 137
7.4.3 編寫CSS樣式... 138
7.4.4 瀏覽器測試... 139
7.5 強化訓練... 140
任務8 表單排版... 141
8.1 任務導入... 141
8.2 任務目標... 141
8.3 核心知識... 142
8.3.1 表單工作原理... 142
8.3.2 form標簽... 142
8.3.3 文本框（input）... 143
8.3.4 文本域（textarea）... 145
8.3.5 選擇框（select）... 145
8.3.6 按鈕... 146
8.3.7 HTML5表單結構... 146
8.3.8 表單控件大小... 147
8.4 任務實施... 148
8.4.1 建立項目... 148
8.4.2 編寫HTML文件... 149
8.4.3 編寫CSS樣式... 151
8.4.4 編寫JS腳本... 155
8.4.5 瀏覽器測試... 156
8.5 強化訓練... 158
任務9 按鈕... 158
9.1 任務導入... 158
9.2 任務目標... 159
9.3 核心知識... 159
9.3.1
button標簽與屬性... 159
9.3.2 按鈕基礎樣式... 160
9.3.3 原始按鈕外觀... 160
9.3.4 按鈕大小... 161
9.3.5 按鈕狀態(tài)... 162
9.3.6 CSS3 漸變Gradient 162
9.3.7 陰影box-shadow.. 166
9.3.8 圓角border-radius 166
9.4 任務實施... 167
9.4.1 建立項目... 167
9.4.2 編寫HTML文件... 167
9.4.3 編寫CSS樣式... 168
9.4.4 瀏覽器測試... 170
9.5 強化訓練... 170
任務10 選項卡Tab. 171
10.1 任務導入... 171
10.2 任務目標... 172
10.3 核心知識... 172
10.3.1 選項卡HTML模型... 172
10.3.2 重置無序列表ul屬性... 173
10.3.3 浮動定位float 173
10.3.4 絕對定位absolute. 173
10.3.5 選項卡切換原理... 174
10.4 任務實施... 174
10.4.1 建立項目... 174
10.4.2 編寫HTML文件... 175
10.4.3 編寫CSS樣式... 177
10.4.4 編寫JS腳本... 179
10.4.5 瀏覽器測試... 179
10.5 強化訓練... 180
任務11 輪播圖排版... 181
11.1 任務導入... 181
11.2 任務目標... 182
11.3 核心知識... 182
11.3.1 輪播圖結構模型... 182
11.3.2 輪播圖HTML結構... 183
11.3.3 輪播的JS實現(xiàn)... 184
11.4 任務實施... 184
11.4.1 建立項目... 184
11.4.2 編寫HTML文件... 184
11.4.3 編寫CSS樣式... 186
11.4.4 編寫JS腳本... 188
11.4.5 瀏覽器測試... 190
11.5 強化訓練... 190
任務12 下拉菜單... 190
12.1 任務導入... 190
12.2 任務目標... 191
12.3 核心知識... 191
12.3.1 全局導航... 191
12.3.2 多級下拉菜單結構... 191
12.3.3 導航菜單層次結構... 192
12.3.4
inlinke-block. 193
12.3.5 元素垂直居中... 193
12.3.6
box-shadow的理解... 193
12.3.7 繪制三角形圖標... 194
12.3.8 超鏈接... 196
12.3.9 絕對地址和相對地址... 198
12.3.10 鏈接目標target 199
12.4 任務實施... 199
12.4.1 建立項目... 199
12.4.2 編寫HTML文件... 200
12.4.3 編寫CSS樣式... 202
12.4.4 瀏覽器測試... 208
12.5 強化訓練... 209
任務13 浮動布局... 209
13.1 任務導入... 209
13.2 任務目標... 210
13.3 核心知識... 210
13.3.1 盒子模型... 210
13.3.2 內邊距padding. 213
13.3.3 外邊距margin. 213
13.3.4 box-sizing. 216
13.3.5 顯示類型display. 216
13.3.6 div嵌套... 217
13.3.7 id與class 217
13.3.8 標準文檔流... 218
13.3.9 浮動float 218
13.3.10 清除clear 220
13.3.11 溢出（overflow）... 222
13.3.12
iframe(內聯(lián)框架) 222
13.4 任務實施... 223
13.4.1 建立項目... 223
13.4.2 編寫HTML文件... 223
13.4.3 編寫CSS樣式... 225
13.4.4 瀏覽器測試... 226
13.5 強化訓練... 227
任務14 流式布局... 227
14.1 任務導入... 227
14.2 任務目標... 228
14.3 核心知識... 228
14.3.1 固定寬度布局... 228
14.3.2 流式布局... 229
14.4 任務實施... 229
14.4.1 建立項目... 229
14.4.2 編寫HTML文件... 230
14.4.3 編寫CSS樣式... 232
14.4.4 瀏覽器測試... 233
14.5 強化訓練... 234
任務15 彈性布局... 234
15.1 任務導入... 234
15.2 任務目標... 234
15.3 核心知識... 235
15.3.1 彈性布局... 235
15.3.2 彈性布局存在的問題... 235
15.4 任務實施... 235
15.4.1 建立項目... 235
15.4.2 編寫HTML文件... 235
15.4.3 編寫CSS樣式... 237
15.4.4 瀏覽器測試... 238
15.5 強化訓練... 239
任務16 定位布局... 240
16.1 任務導入... 240
16.2 任務目標... 240
16.3 核心知識... 241
16.3.1 定位（positioning）... 241
16.3.2 相對定位relative. 241
16.3.3 絕對定位absolute. 241
16.3.4 固定定位fixed. 242
16.3.5
z-index深度... 242
16.3.6 包含塊... 243
16.4 任務實施... 243
16.4.1 建立項目... 243
16.4.2 編寫HTML文件... 244
16.4.3 編寫CSS樣式... 247
16.4.4 瀏覽器測試... 249
16.5 強化訓練... 249
任務17 CSS3多列布局... 249
17.1 任務導入... 249
17.2 任務目標... 250
17.3 核心知識... 251
17.3.1 多列布局原理... 251
17.3.2
columns屬性... 251
17.3.3 列寬度column-width. 251
17.3.4 列數(shù)column-count 251
17.3.5 列間距column-gap. 252
17.3.6
column-rule. 252
17.3.7
column-span. 252
17.3.8 瀏覽器前綴... 253
17.4 任務實施... 253
17.4.1 建立項目... 253
17.4.2 編寫HTML文件... 254
17.4.3 編寫CSS樣式... 255
17.4.4 瀏覽器測試... 257
17.5 強化訓練... 257
任務18 響應式頁面排版... 258
18.1 任務導入... 258
18.2 任務目標... 258
18.3 核心知識... 258
18.3.1 響應式布局概述... 258
18.3.2 響應式布局關鍵技術... 259
18.3.3 響應式布局技巧... 262
18.3.4 Viewport定義... 263
18.3.5 響應式設計流程... 263
18.4 任務實施... 264
18.4.1 建立項目... 264
18.4.2 編寫HTML文件... 264
18.4.3 編寫CSS樣式... 266
18.4.4 瀏覽器測試... 271
18.5 強化訓練... 272
任務19 前端框架BootStrap. 273
19.1 任務導入... 273
19.2 任務目標... 273
19.3 核心知識... 274
19.3.1
jQuery. 274
19.3.2
Bootstrap. 274
19.3.3 CDN.. 274
19.3.4
Bootstrap網(wǎng)絡系統(tǒng)... 275
19.3.5
Bootstrap媒體查詢... 276
19.4 任務實施... 277
19.4.1 下載BootStrap. 277
19.4.2 建立項目... 279
19.4.3 編寫HTML文件... 279
19.4.4 編寫CSS樣式... 284
19.4.5 瀏覽器測試... 286
19.5 強化訓練... 286
書單推薦
