Web前端開(kāi)發(fā)項(xiàng)目案例教程：HTML5+CSS3+Bootstrap

技能知識(shí)篇
項(xiàng)目一 初識(shí)HTML5
任務(wù)1．1 Web時(shí)代的遷移
任務(wù)1．2 HTML基礎(chǔ)標(biāo)記與屬性
任務(wù)1．2．1 HTML簡(jiǎn)單頁(yè)面創(chuàng)建
任務(wù)1．2．2 HTML標(biāo)記設(shè)置超鏈接
任務(wù)1．2．3 HTML標(biāo)記設(shè)置圖像和動(dòng)畫(huà)
任務(wù)1．2．4 HTML標(biāo)記設(shè)置表格
任務(wù)1．2．5 HTML其他常用標(biāo)記
任務(wù)1．3 HTML5新特性
任務(wù)1．3．1 HTML5瀏覽器支持
任務(wù)1．3．2 HTML5文檔基本格式
任務(wù)1．3．3 HTML5基本語(yǔ)法
任務(wù)1．3．4 創(chuàng)建一個(gè)簡(jiǎn)單的HTML5頁(yè)面
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目拓展
項(xiàng)目二 網(wǎng)站搭建與管理
任務(wù)2．1 站點(diǎn)規(guī)劃
任務(wù)2．2 新建Web項(xiàng)目站點(diǎn)
任務(wù)2．2．1 開(kāi)發(fā)工具——HBuilder X的安裝
任務(wù)2．2．2 創(chuàng)建Web項(xiàng)目站點(diǎn)
任務(wù)2．2．3 調(diào)試工具——Chrome開(kāi)發(fā)者工具
任務(wù)2．3 導(dǎo)入項(xiàng)目站點(diǎn)
任務(wù)2．4 網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)環(huán)境
任務(wù)2．4．1 網(wǎng)頁(yè)開(kāi)發(fā)工具
任務(wù)2．4．2 圖形圖像處理工具
任務(wù)2．5 運(yùn)用HBuilder X創(chuàng)建簡(jiǎn)單Web網(wǎng)站
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目三 構(gòu)建HTML5網(wǎng)頁(yè)文件
任務(wù)3．1 HTML5新增元素與屬性
任務(wù)3．1．1 結(jié)構(gòu)元素
任務(wù)3．1．2 列表元素
任務(wù)3．1．3 分組元素
任務(wù)3．1．4 交互元素
任務(wù)3．1．5 語(yǔ)義元素
任務(wù)3．1．6 全局屬性
任務(wù)3．1．7 階段案例
任務(wù)3．2 HTML5多媒體技術(shù)
任務(wù)3．2．1 音頻技術(shù)
任務(wù)3．2．2 視頻技術(shù)
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目四 CSS3新樣式修飾網(wǎng)頁(yè)
任務(wù)4．1 初識(shí)CSS3
任務(wù)4．2 CSS基礎(chǔ)知識(shí)
任務(wù)4．2．1 CSS樣式介紹
任務(wù)4．2．2 css基礎(chǔ)選擇器
任務(wù)4．2．3 CSS修飾顏色與背景
任務(wù)4．2．4 CSS修飾字體
任務(wù)4．2．5 CSS修飾文本屬性
任務(wù)4．2．6 CSS修飾超鏈接
任務(wù)4．2．7 CSS修飾列表
任務(wù)4．2．8 cSS修飾表格
任務(wù)4．2．9 階段案例
任務(wù)4．3 CSs3新增選擇器
任務(wù)4．3．1 屬性選擇器
任務(wù)4．3．2 關(guān)系選擇器
任務(wù)4．3．3 階段案例
任務(wù)4．4 CSS3新增特性
任務(wù)4．4．1 實(shí)現(xiàn)圓角效果
任務(wù)4．4．2 文本效果
任務(wù)4．4．3 多列
任務(wù)4．4．4 定義字體
任務(wù)4．4．5 透明度
任務(wù)4．4．6 階段案例
任務(wù)4．5 CSS3的過(guò)渡、變形與動(dòng)畫(huà)
任務(wù)4．5．1 CSS3的過(guò)渡
任務(wù)4．5．2 CSS3的變形
任務(wù)4．5．3 CSS3的動(dòng)畫(huà)
任務(wù)4．5．4 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目五 盒子模型
任務(wù)5．1 認(rèn)識(shí)盒子模型
任務(wù)5．1．1 盒子模型的構(gòu)成
任務(wù)5．1．2 邊距屬性
任務(wù)5．1．3 box-shadow屬性
任務(wù)5．1．4 box-sizing屬性
任務(wù)5．1．5 階段案例
任務(wù)5．2 盒子邊框?qū)傩?br />任務(wù)5．2．1 邊框樣式
任務(wù)5．2．2 邊框?qū)挾?br />任務(wù)5．2．3 邊框顏色
任務(wù)5．2．4 綜合設(shè)置邊框
任務(wù)5．2．5 圓角邊框
任務(wù)5．2．6 階段案例
任務(wù)5．3 盒子背景屬性
任務(wù)5．3．1 設(shè)置背景顏色
任務(wù)．5．3．2 設(shè)置背景圖像
任務(wù)．5．3．3 背景與圖片不透明度的設(shè)置
任務(wù)5．3．4 設(shè)置背景圖像平鋪
任務(wù)5．3．5 設(shè)置背景圖像的位置
任務(wù)5．3．6 設(shè)置背景圖像固定
任務(wù)5．3．7 設(shè)置背景圖像的大小
任務(wù)5．3．8 階段案例
任務(wù)5．4 盒子漸變屬性
任務(wù)5．4．1 線性漸變
任務(wù)5．4．2 徑向漸變
任務(wù)5．4．3 重復(fù)漸變
任務(wù)5．4．4 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目六 元素的浮動(dòng)與定位
任務(wù)6．1 浮動(dòng)
任務(wù)6．1．1 浮動(dòng)的屬性
任務(wù)6．1．2 浮動(dòng)的清除
任務(wù)6．1．3 overflow屬性
任務(wù)6．2 定位布局
任務(wù)6．2．1 定位布局的屬性
任務(wù)6．2．2 層疊等級(jí)屬性
任務(wù)6．3 類(lèi)型轉(zhuǎn)換
任務(wù)6．3．1 類(lèi)型分類(lèi)
任務(wù)6．3．2 標(biāo)記
任務(wù)6．3．3 元素之間轉(zhuǎn)換
任務(wù)6．4 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目七 網(wǎng)頁(yè)布局技術(shù)
任務(wù)7．1 框架布局
任務(wù)7．2 階段案例
任務(wù)7．3 CSS3+DlV技術(shù)布局
任務(wù)7．3．1 單列布局
任務(wù)7．3．2 多列布局
任務(wù)7．4 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目八 網(wǎng)頁(yè)表單的應(yīng)用
任務(wù)8．1 表單
任務(wù)8．1．1 表單屬性
任務(wù)8．1．2 標(biāo)記
任務(wù)8．1．3 標(biāo)記的屬性
任務(wù)8．1．4 其他表單元素
任務(wù)8．2 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
項(xiàng)目九 跨平臺(tái)響應(yīng)式技術(shù)
任務(wù)9．1 響應(yīng)式媒體查詢
任務(wù)9．1．1 媒體類(lèi)型查詢
任務(wù)9．1．2 媒體特性查詢
任務(wù)9．2 Bootstrap框架
任務(wù)9．2．1 Bootstrap框架簡(jiǎn)介
任務(wù)9．2．2 Bootstrap柵格系統(tǒng)
任務(wù)9．2．3 使用柵格系統(tǒng)進(jìn)行響應(yīng)式布局
任務(wù)9．2．4 Bootstrap字體圖標(biāo)
任務(wù)9．2．5 Bootstrap響應(yīng)式表格
任務(wù)9．2．6 Bootstrap響應(yīng)式導(dǎo)航條
任務(wù)9．3 階段案例
項(xiàng)目小結(jié)
項(xiàng)目實(shí)訓(xùn)
綜合項(xiàng)目實(shí)戰(zhàn)篇
項(xiàng)目十 HTML5+CSS3+Bootstrap綜合項(xiàng)目實(shí)戰(zhàn)
任務(wù)10．1 網(wǎng)站建設(shè)規(guī)劃
任務(wù)10．2 頁(yè)面效果分析
任務(wù)10．3 制作前期準(zhǔn)備
項(xiàng)目小結(jié)
參考文獻(xiàn)