任務(wù)1　創(chuàng)建第一個HTML5網(wǎng)頁　1 1.1　任務(wù)描述　2 1.2　知識準(zhǔn)備　2 1.2.1　認(rèn)識Web前端開發(fā)　2 1.2.2　Web相關(guān)概念　2 1.2.3　HTML5概述　5 1.2.4　常用的瀏覽器　5 1.2.5　網(wǎng)頁編輯軟件　6 1.3　任務(wù)實現(xiàn)　6 任務(wù)小結(jié)　8 習(xí)題1　9 實訓(xùn)1　10 擴展閱讀　10 任務(wù)2　搭建簡單學(xué)院網(wǎng)站　12 2.1　任務(wù)描述　13 2.2　知識準(zhǔn)備　13 2.2.1　HTML5文檔的基本結(jié)構(gòu)　14 2.2.2　HTML標(biāo)記及其屬性　15 2.2.3　HTML文本標(biāo)記　16 2.2.4　HTML列表標(biāo)記　22 2.2.5　HTML超鏈接標(biāo)記　26 2.2.6　HTML圖像標(biāo)記　29 2.3　任務(wù)實現(xiàn)　32 2.3.1　創(chuàng)建網(wǎng)站目錄　32 2.3.2　創(chuàng)建網(wǎng)站首頁　32 2.3.3　創(chuàng)建學(xué)院簡介頁面　33 2.3.4　創(chuàng)建學(xué)院新聞頁面　33 2.3.5　創(chuàng)建新聞詳情頁面　34 任務(wù)小結(jié)　35 習(xí)題2　36 實訓(xùn)2　37 擴展閱讀　38 任務(wù)3　美化簡單學(xué)院網(wǎng)站　40 3.1　任務(wù)描述　41 3.2　知識準(zhǔn)備　41 3.2.1　什么是CSS　41 3.2.2　引入CSS樣式　42 3.2.3　CSS常用選擇器　46 3.2.4　CSS常用文本屬性　52 3.2.5　CSS的高級特性　55 3.3　任務(wù)實現(xiàn)　58 3.3.1　美化網(wǎng)站首頁　58 3.3.2　美化學(xué)院簡介頁面　59 3.3.3　美化學(xué)院新聞頁面　60 3.3.4　美化新聞詳情頁面　61 任務(wù)小結(jié)　62 習(xí)題3　63 實訓(xùn)3　64 擴展閱讀　65 任務(wù)4　制作學(xué)院介紹頁面　66 4.1　任務(wù)描述　67 4.2　知識準(zhǔn)備　67 4.2.1　盒子模型的概念　67 4.2.2　盒子模型的相關(guān)屬性　69 4.2.3　背景屬性　74 4.2.4　不透明度屬性　80 4.3　任務(wù)實現(xiàn)　81 4.3.1　搭建學(xué)院介紹頁面結(jié)構(gòu)　81 4.3.2　定義學(xué)院介紹頁面CSS樣式　82 任務(wù)小結(jié)　82 習(xí)題4　83 實訓(xùn)4　85 擴展閱讀　85 任務(wù)5　制作學(xué)院網(wǎng)站導(dǎo)航條　87 5.1　任務(wù)描述　88 5.2　知識準(zhǔn)備　88 5.2.1　無序列表樣式設(shè)置　88 5.2.2　超鏈接樣式設(shè)置　89 5.2.3　元素的類型與轉(zhuǎn)換　91 5.3　任務(wù)實現(xiàn)　94 5.3.1　搭建學(xué)院網(wǎng)站導(dǎo)航條結(jié)構(gòu)　94 5.3.2　定義學(xué)院網(wǎng)站導(dǎo)航條CSS樣式　95 任務(wù)小結(jié)　96 習(xí)題5　96 實訓(xùn)5　97 擴展閱讀　98 任務(wù)6　制作學(xué)院新聞塊　99 6.1　任務(wù)描述　100 6.2　知識準(zhǔn)備　100 6.2.1　元素的浮動　100 6.2.2　塊元素間的外邊距　104 6.3　任務(wù)實現(xiàn)　109 6.3.1　搭建學(xué)院新聞塊頁面結(jié)構(gòu)　109 6.3.2　定義學(xué)院新聞塊CSS樣式　110 任務(wù)小結(jié)　111 習(xí)題6　112 實訓(xùn)6　112 擴展閱讀　113 任務(wù)7　制作學(xué)生信息表　115 7.1　任務(wù)描述　116 7.2　知識準(zhǔn)備　116 7.2.1　表格標(biāo)記　116 7.2.2　合并單元格　118 7.2.3　使用CSS定義表格樣式　119 7.3　任務(wù)實現(xiàn)　121 7.3.1　搭建學(xué)生信息表結(jié)構(gòu)　121 7.3.2　定義學(xué)生信息表CSS樣式　123 任務(wù)小結(jié)　124 習(xí)題7　125 實訓(xùn)7　125 擴展閱讀　126 任務(wù)8　制作學(xué)生問卷調(diào)查表單　127 8.1　任務(wù)描述　128 8.2　知識準(zhǔn)備　128 8.2.1　認(rèn)識表單　128 8.2.2　表單標(biāo)記　129 8.2.3　表單控件　129 8.2.4　使用CSS定義表單樣式　133 8.3　任務(wù)實現(xiàn)　135 8.3.1　搭建學(xué)生問卷調(diào)查表單頁面結(jié)構(gòu)　135 8.3.2　使用CSS定義學(xué)生問卷調(diào)查表單頁面樣式　137 任務(wù)小結(jié)　138 習(xí)題8　138 實訓(xùn)8　140 擴展閱讀　140 任務(wù)9　制作學(xué)院風(fēng)景墻頁面　141 9.1　任務(wù)描述　142 9.2　知識準(zhǔn)備　142 9.2.1　過渡屬性　142 9.2.2　變形屬性　148 9.3　任務(wù)實現(xiàn)　151 9.3.1　搭建學(xué)院風(fēng)景墻頁面結(jié)構(gòu)　151 9.3.2　定義學(xué)院風(fēng)景墻頁面CSS樣式　152 任務(wù)小結(jié)　153 習(xí)題9　154 實訓(xùn)9　155 擴展閱讀　156 任務(wù)10　布局學(xué)院網(wǎng)站主頁　157 10.1　任務(wù)描述　158 10.2　知識準(zhǔn)備　158 10.2.1　單列布局　158 10.2.2　二列布局　160 10.2.3　三列布局　162 10.2.4　通欄布局　164 10.3　任務(wù)實現(xiàn)　164 10.3.1　搭建布局塊結(jié)構(gòu)　164 10.3.2　定義布局塊CSS樣式　165 任務(wù)小結(jié)　168 習(xí)題10　169 實訓(xùn)10　169 擴展閱讀　170 任務(wù)11　完整項目：制作學(xué)院網(wǎng)站　171 11.1　任務(wù)描述　172 11.2　網(wǎng)站規(guī)劃　172 11.3　效果圖設(shè)計　173 11.3.1　效果圖設(shè)計原則　173 11.3.2　效果圖設(shè)計步驟　173 11.3.3　效果圖切片導(dǎo)出素材　178 11.4　制作網(wǎng)站主頁　178 11.5　制作新聞列表頁　194 11.6　制作新聞詳情頁　199 11.7　制作視頻宣傳頁　200 任務(wù)小結(jié)　202 實訓(xùn)11　202 擴展閱讀　203 參考文獻　204