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

技能知識篇
項目一 初識HTML5
任務(wù)1．1 Web時代的遷移
任務(wù)1．2 HTML基礎(chǔ)標(biāo)記與屬性
任務(wù)1．2．1 HTML簡單頁面創(chuàng)建
任務(wù)1．2．2 HTML標(biāo)記設(shè)置超鏈接
任務(wù)1．2．3 HTML標(biāo)記設(shè)置圖像和動畫
任務(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基本語法
任務(wù)1．3．4 創(chuàng)建一個簡單的HTML5頁面
項目小結(jié)
項目實訓(xùn)
項目拓展
項目二 網(wǎng)站搭建與管理
任務(wù)2．1 站點規(guī)劃
任務(wù)2．2 新建Web項目站點
任務(wù)2．2．1 開發(fā)工具——HBuilder X的安裝
任務(wù)2．2．2 創(chuàng)建Web項目站點
任務(wù)2．2．3 調(diào)試工具——Chrome開發(fā)者工具
任務(wù)2．3 導(dǎo)入項目站點
任務(wù)2．4 網(wǎng)頁設(shè)計開發(fā)環(huán)境
任務(wù)2．4．1 網(wǎng)頁開發(fā)工具
任務(wù)2．4．2 圖形圖像處理工具
任務(wù)2．5 運用HBuilder X創(chuàng)建簡單Web網(wǎng)站
項目小結(jié)
項目實訓(xùn)
項目三 構(gòu)建HTML5網(wǎng)頁文件
任務(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 語義元素
任務(wù)3．1．6 全局屬性
任務(wù)3．1．7 階段案例
任務(wù)3．2 HTML5多媒體技術(shù)
任務(wù)3．2．1 音頻技術(shù)
任務(wù)3．2．2 視頻技術(shù)
項目小結(jié)
項目實訓(xùn)
項目四 CSS3新樣式修飾網(wǎng)頁
任務(wù)4．1 初識CSS3
任務(wù)4．2 CSS基礎(chǔ)知識
任務(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 實現(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的過渡、變形與動畫
任務(wù)4．5．1 CSS3的過渡
任務(wù)4．5．2 CSS3的變形
任務(wù)4．5．3 CSS3的動畫
任務(wù)4．5．4 階段案例
項目小結(jié)
項目實訓(xùn)
項目五 盒子模型
任務(wù)5．1 認識盒子模型
任務(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 階段案例
項目小結(jié)
項目實訓(xùn)
項目六 元素的浮動與定位
任務(wù)6．1 浮動
任務(wù)6．1．1 浮動的屬性
任務(wù)6．1．2 浮動的清除
任務(wù)6．1．3 overflow屬性
任務(wù)6．2 定位布局
任務(wù)6．2．1 定位布局的屬性
任務(wù)6．2．2 層疊等級屬性
任務(wù)6．3 類型轉(zhuǎn)換
任務(wù)6．3．1 類型分類
任務(wù)6．3．2 標(biāo)記
任務(wù)6．3．3 元素之間轉(zhuǎn)換
任務(wù)6．4 階段案例
項目小結(jié)
項目實訓(xùn)
項目七 網(wǎng)頁布局技術(shù)
任務(wù)7．1 框架布局
任務(wù)7．2 階段案例
任務(wù)7．3 CSS3+DlV技術(shù)布局
任務(wù)7．3．1 單列布局
任務(wù)7．3．2 多列布局
任務(wù)7．4 階段案例
項目小結(jié)
項目實訓(xùn)
項目八 網(wǎng)頁表單的應(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 階段案例
項目小結(jié)
項目實訓(xùn)
項目九 跨平臺響應(yīng)式技術(shù)
任務(wù)9．1 響應(yīng)式媒體查詢
任務(wù)9．1．1 媒體類型查詢
任務(wù)9．1．2 媒體特性查詢
任務(wù)9．2 Bootstrap框架
任務(wù)9．2．1 Bootstrap框架簡介
任務(wù)9．2．2 Bootstrap柵格系統(tǒng)
任務(wù)9．2．3 使用柵格系統(tǒng)進行響應(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 階段案例
項目小結(jié)
項目實訓(xùn)
綜合項目實戰(zhàn)篇
項目十 HTML5+CSS3+Bootstrap綜合項目實戰(zhàn)
任務(wù)10．1 網(wǎng)站建設(shè)規(guī)劃
任務(wù)10．2 頁面效果分析
任務(wù)10．3 制作前期準(zhǔn)備
項目小結(jié)
參考文獻