Web前端技術項目式教程（HTML5+CSS3+Flex+Bootstrap)

唐彩虹

1980年2月22日出生，講師。
2006年6月獲得暨南大學計算機軟件專業碩士學位，2006年7月至今任職於廣東輕工職業技術學院，
擔任信息技術學院數字媒體技術專業專任教師，從教至今一直講授Web前端開發相關課程，
指導學生實訓和畢業設計，積累了豐富的授課經驗，2012年起擔任《網頁製作》平台課程負責人，
先後主持多項校級科研和教改項目，發表科研和教改論文十餘篇。

目錄：
任務一初探Web前端技術1
任務描述1
知識引入1
1．網站、網頁和主頁1
2．什麼是Web和Web標準4
3．Web前端技術的發展4
4．搭建Web前端開發環境5
5．Web頁面的基本結構6
6．瀏覽器兼容性7
任務實現：動手編寫第一個前端頁面7
任務小結10
課後練習10

任務二使用HTML5搭建旅遊公司網站首頁結構11
任務描述11
知識引入11
1．HTML5的標題、段落和文本格式化標籤11
2．HTML5的圖片標籤13
3．HTML5的列表標籤14
4．HTML5的超鏈接標籤15
5．HTML5的表格標籤17
6．傳統的佈局標籤和19
7．HTML5的各種語義化分段元素19
任務實現：搭建旅遊公司網站首頁結構22
1．規劃網站目錄結構22
2．分析首頁文檔結構22
3．構建首頁結構22
4．添加網頁內容24
任務拓展：製作旅遊公司網站二級頁面32
任務小結35
課後練習35

任務三使用DIV+CSS實現旅遊公司網站首頁佈局36
任務描述36
知識引入36
1．CSS規則的基本語法36
2．CSS選擇器37
3．CSS規則的應用方式40
4．CSS的層疊和繼承41
5．CSS盒子模型43
6．CSS盒子的定位機制46
7．DIV+CSS佈局剖析51
任務實現：使用DIV+CSS佈局旅遊公司首頁55
1．新建CSS樣式表文件並應用到網頁中55
2．基礎樣式設置55
3．頭部佈局與定位56
4．主體內容.main_top區域佈局與定位56
5．主體內容.main_middle區域佈局與定位58
6．主體內容.main_bottom區域佈局與定位58
7．頁腳區域佈局與定位58
任務拓展：使用CSS實現旅遊公司網站二級頁面“華陽湖景區”的佈局結構59
任務小結61
課後練習61

任務四使用CSS3美化超鏈接62
任務描述62
知識引入62
1．超鏈接的基本屬性62
2．CSS樣式偽類63
3．鼠標特效64
任務實現：實現首頁中的超鏈接效果66
1．設置首頁頭部導航條超鏈接樣式66
2．設置尾部超鏈接樣式68
任務拓展：實現二級頁面“華陽湖景區”的導航條鏈接72
任務小結73
課後練習73

任務五使用CSS3製作導航74
任務描述74
知識引入74
1．列表符號74
2．圖片符號76
3．列表符號位置77
任務實現：製作旅遊公司網站首頁導航79
1．水平排列導航條79
2．編排頁面中間內容區域81
任務拓展：製作二級菜單和職位列表84
1．製作二級菜單84
2．製作職位列表89
任務小結93
課後練習93

任務六美化網頁94
任務描述94
知識引入94
1．text-shadow 94
2．box-shadow 96
3．border-radius 99
4．background 101
5．opacity 102
6．Font Awesome字體圖標103
7．Animation動畫屬性105
任務實現：美化旅遊公司網站頁面108
1．為網頁添加圖標108
2．為按鈕添加陰影108
3．設置圖片透明度109
任務拓展：利用阿里巴巴矢量圖標庫製作購物車110
任務小結112
課後練習113

任務七添加用戶交互界面——表單114
任務描述114
知識引入114
1．標籤115
2． 元素116
3．HTML5新增的類型123
任務實現：製作旅遊公司網站首頁搜索框、意見反饋表126
1．製作搜索框126
2．製作意見反饋表128
任務拓展：實現搜索框長度變化133
任務小結134
課後練習134

任務八使用Flex實現網頁響應式佈局135
任務描述135
知識引入135
1．響應式佈局基礎知識135
2．Flex佈局139
任務實現：使用Flex佈局重構旅遊公司首頁144
1．實現圖片為響應式145
2．設置怪異盒模型計算容器寬度145
3．彈性文字145
4．媒體查詢145
5．實現首頁頭部響應式效果146
6．主體內容.main_top區域的實現147
7．主體內容.main_middle區域的實現148
8．主體內容.main_bottom區域的實現149
9．實現頁腳效果150
任務拓展：使用Flex佈局重構二級頁面“華陽湖景區” 151
任務小結152
課後練習152

任務九使用Bootstrap實現網頁響應式佈局153
任務描述153
知識引入153
1．Bootstrap環境搭建153
2．容器154
3．柵格系統154
4．樣式155
5．組件156
任務實現：使用Bootstrap重構旅遊公司首頁157
1．下載Bootstrap 157
2．網頁頭部代碼實現158
3．圖片輪播效果代碼實現159
4．公司介紹區域代碼實現160
5．景區圖片部分代碼實現161
6．求職信息區域代碼實現162
7．頁腳區域代碼實現164
任務拓展：使用Bootstrap重構二級頁面“華陽湖景區” 164
任務小結167
課後練習167

任務十綜合練習——兒童玩具商城網站設計與製作168
任務描述168
任務實現：設計與製作兒童玩具商城網站169
1．規劃網站目錄結構169
2．首頁代碼實現170
3．“進口玩具”頁面代碼實現191
4．“相關文章”頁面代碼實現201
5．“聯繫我們”頁面代碼實現207
任務小結209
課後練習209