Web前端開(kāi)發(fā)案例教程（HTML5+CSS3 微課版）

第 1章
Web前端開(kāi)發(fā)概述\t1
1．1 認(rèn)識(shí)Web前端開(kāi)發(fā)\t1
1．2 Web相關(guān)概念\t1
1．3 HTML5概述\t3
1．4 常用的瀏覽器\t3
1．5 創(chuàng)建第 一個(gè)HTML5頁(yè)面\t4
1．5．1 Dreamweaver工具簡(jiǎn)介\t4
1．5．2 案例：創(chuàng)建第 一個(gè)HTML5
網(wǎng)頁(yè)\t4
本章小結(jié)\t\t6
實(shí)訓(xùn)1\t6
第 2章
HTML5基礎(chǔ)\t8
2．1 案例：簡(jiǎn)單學(xué)院網(wǎng)站\t8
2．2 知識(shí)準(zhǔn)備\t9
2．2．1 HTML5文檔的基本結(jié)構(gòu)\t9
2．2．2 HTML標(biāo)記及其屬性\t10
2．2．3 HTML文本標(biāo)記\t11
2．2．4 HTML列表標(biāo)記\t16
2．2．5 HTML超鏈接標(biāo)記\t20
2．2．6 HTML圖像標(biāo)記\t23
2．3 案例實(shí)現(xiàn)\t25
2．3．1 創(chuàng)建站點(diǎn)\t25
2．3．2 創(chuàng)建首頁(yè)\t27
2．3．3 創(chuàng)建學(xué)院簡(jiǎn)介頁(yè)面\t28
2．3．4 創(chuàng)建學(xué)院新聞頁(yè)面\t28
2．3．5 創(chuàng)建專業(yè)介紹頁(yè)面\t29
本章小結(jié)\t\t30
實(shí)訓(xùn)2\t30
第3章
HTML5新增頁(yè)面元素\t32
3．1 案例：旅游部落網(wǎng)頁(yè)\t32
3．2 知識(shí)準(zhǔn)備\t33
3．2．1 HTML5結(jié)構(gòu)元素\t33
3．2．2 HTML5分組元素\t37
3．2．3 HTML5頁(yè)面交互元素\t38
3．2．4 HTML5文本語(yǔ)義元素\t40
3．3 案例實(shí)現(xiàn)\t42
3．3．1 創(chuàng)建站點(diǎn)\t42
3．3．2 頁(yè)面分析\t43
本章小結(jié)\t\t45
實(shí)訓(xùn)3\t45
第4章
CSS3基礎(chǔ)\t47
4．1 案例：學(xué)院新聞詳情頁(yè)面\t47
4．2 知識(shí)準(zhǔn)備\t48
4．2．1 初識(shí)CSS\t48
4．2．2 CSS發(fā)展歷史\t48
4．2．3 引入CSS樣式\t48
4．2．4 CSS基礎(chǔ)選擇器\t52
4．2．5 CSS常用文本屬性\t57
4．2．6 CSS的高級(jí)特性\t62
4．3 案例實(shí)現(xiàn)\t63
4．3．1 創(chuàng)建新聞詳情頁(yè)面\t63
4．3．2 定義CSS樣式\t64
本章小結(jié)\t\t65
實(shí)訓(xùn)4\t65
第5章
CSS3高級(jí)選擇器\t66
5．1 案例：景點(diǎn)介紹頁(yè)面\t66
5．2 知識(shí)準(zhǔn)備\t66
5．2．1 屬性選擇器\t67
5．2．2 關(guān)系選擇器\t68
5．2．3 結(jié)構(gòu)化偽類選擇器\t69
5．2．4 偽元素選擇器\t74
5．3 案例實(shí)現(xiàn)\t75
本章小結(jié)\t\t78
實(shí)訓(xùn)5\t78
第6章
CSS3盒子模型\t79
6．1 案例：學(xué)院簡(jiǎn)介頁(yè)面\t79
6．2 知識(shí)準(zhǔn)備\t80
6．2．1 盒子模型的概念\t80
6．2．2 盒子模型的相關(guān)屬性\t81
6．2．3 CSS設(shè)置背景\t90
6．2．4 元素的類型與轉(zhuǎn)換\t98
6．2．5 塊元素間的外邊距\t100
6．3 案例實(shí)現(xiàn)\t101
6．3．1 制作頁(yè)面結(jié)構(gòu)\t101
6．3．2 添加CSS樣式\t103
本章小結(jié)\t\t103
實(shí)訓(xùn)6\t104
第7章
列表與超鏈接\t105
7．1 案例：通知公告塊與學(xué)院網(wǎng)站
導(dǎo)航條\t105
7．2 知識(shí)準(zhǔn)備\t106
7．2．1 列表樣式設(shè)置\t106
7．2．2 超鏈接樣式設(shè)置\t108
7．3 案例實(shí)現(xiàn)\t109
7．3．1 制作通知公告塊\t109
7．3．2 制作學(xué)院網(wǎng)站導(dǎo)航條\t112
本章小結(jié)\t\t113
實(shí)訓(xùn)7\t114
第8章
表格與表單\t115
8．1 表格案例：學(xué)生信息表\t115
8．2 表格相關(guān)知識(shí)\t116
8．2．1 表格標(biāo)記\t116
8．2．2 合并單元格\t117
8．2．3 使用CSS設(shè)置表格樣式\t118
8．3 表格案例實(shí)現(xiàn)\t120
8．3．1 學(xué)生信息表的頁(yè)面結(jié)構(gòu)\t120
8．3．2 添加CSS樣式\t122
8．4 表單案例：用戶注冊(cè)表單\t122
8．5 表單相關(guān)知識(shí)\t123
8．5．1 認(rèn)識(shí)表單\t123
8．5．2 表單標(biāo)記\t123
8．5．3 表單控件\t124
8．5．4 使用CSS設(shè)置表單樣式\t126
8．6 表單案例實(shí)現(xiàn)\t129
8．6．1 用戶注冊(cè)表單的頁(yè)面結(jié)構(gòu)\t129
8．6．2 添加CSS樣式\t131
本章小結(jié)\t\t132
實(shí)訓(xùn)8\t132
第9章
HTML5+CSS3布局
網(wǎng)頁(yè)\t134
9．1 案例：學(xué)院網(wǎng)站主頁(yè)布局\t134
9．2 知識(shí)準(zhǔn)備\t135
9．2．1 元素的浮動(dòng)\t135
9．2．2 元素的定位\t140
9．2．3 元素的overflow屬性\t145
9．2．4 HTML5+CSS3布局\t147
9．3 案例實(shí)現(xiàn)\t153
9．3．1 制作頁(yè)面結(jié)構(gòu)\t153
9．3．2 添加CSS樣式\t154
本章小結(jié)\t\t157
實(shí)訓(xùn)9\t157
第 10章
CSS3動(dòng)畫(huà)\t159
10．1 過(guò)渡屬性\t159
10．2 變形屬性\t159
10．3 動(dòng)畫(huà)屬性\t160
10．4 案例\t162
10．4．1 圖片遮罩效果\t162
10．4．2 圖片翻轉(zhuǎn)效果\t163
10．4．3 照片墻效果\t164
10．4．4 魔方效果\t166
本章小結(jié)\t\t168
實(shí)訓(xùn)10\t168
第 11章
完整案例：學(xué)院網(wǎng)站設(shè)計(jì)與
制作\t170
11．1 信息學(xué)院網(wǎng)站描述\t170
11．2 網(wǎng)站規(guī)劃\t171
11．3 效果圖設(shè)計(jì)\t172
11．3．1 效果圖設(shè)計(jì)原則\t172
11．3．2 效果圖設(shè)計(jì)步驟\t173
11．3．3 效果圖切片導(dǎo)出網(wǎng)頁(yè)\t178
11．4 網(wǎng)站主頁(yè)設(shè)計(jì)\t178
11．5 新聞列表頁(yè)設(shè)計(jì)\t194
11．6 制作新聞詳情頁(yè)面\t200
11．7 制作視頻宣傳頁(yè)面\t202
11．8 添加網(wǎng)站中的JavaScript
或jQuery腳本\t203
本章小結(jié)\t\t205
第 12章
完整案例：化妝品公司網(wǎng)站設(shè)計(jì)與制作\t206
12．1 化妝品公司網(wǎng)站描述\t206
12．2 網(wǎng)站規(guī)劃\t208
12．2．1 網(wǎng)站需求分析\t208
12．2．2 網(wǎng)站的風(fēng)格定位\t208
12．2．3 規(guī)劃草圖\t208
12．2．4 素材準(zhǔn)備\t209
12．3 網(wǎng)站主頁(yè)設(shè)計(jì)\t209
12．4 網(wǎng)站其他頁(yè)設(shè)計(jì)\t223
本章小結(jié)\t\t223
參考文獻(xiàn)\t224