項目三綜合應(yīng)用任務(wù)一

首頁制作及全站鏈接調(diào)試主講：莫德智htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實(shí)施考核評價課后拓展htmlh5imgjavascriptwebcolorhr任務(wù)情境首頁是一個網(wǎng)站的門面，我們可以通過首頁了解網(wǎng)站所要展示的內(nèi)容以及訪問每個鏈接。本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的首頁來對前面學(xué)習(xí)的所有內(nèi)容進(jìn)行總結(jié)回顧以及綜合應(yīng)用。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成首頁制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠使用HTML常用的標(biāo)簽構(gòu)建簡單的HTML頁面能夠通過定義樣式屬性美化頁面，實(shí)現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果能夠運(yùn)用JavaScript交互界面任務(wù)描述

首頁的頁面結(jié)構(gòu)：頁面頂部包含歡迎語、日期時間、標(biāo)題logo、頁面導(dǎo)航欄、登陸、注冊以及輪播圖，頁面主體部份包含美食模塊、服飾模塊、節(jié)日模塊、古跡模塊、咨詢模塊以及固定側(cè)邊欄，頁面尾部。任務(wù)實(shí)施圖1

結(jié)構(gòu)布局劃分圖布局結(jié)構(gòu)分析頁面切圖鏈接各分頁并進(jìn)行全站調(diào)試HTML布局+css美化制作JavaScript特效任務(wù)實(shí)施圖2頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖鏈接各分頁并進(jìn)行全站調(diào)試HTML布局+css美化制作JavaScript特效創(chuàng)建站點(diǎn)、鏈接樣式、搭建頁面主體結(jié)構(gòu)完成頁頭（header）內(nèi)容完成美食模塊完成服飾模塊步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟完成節(jié)日模塊步驟五完成古跡模塊步驟六完成側(cè)邊欄模塊步驟七布局結(jié)構(gòu)分析頁面切圖鏈接各分頁并進(jìn)行全站調(diào)試HTML布局+css美化任務(wù)實(shí)施制作JavaScript特效完成頁尾（footer）內(nèi)容步驟九完成側(cè)邊模塊步驟八選項卡特效時間特效固定頭部特效側(cè)邊展開特效步驟一步驟二步驟三步驟四制作JavaScript特效操作步驟輪播圖特效步驟五布局結(jié)構(gòu)分析頁面切圖鏈接各分頁并進(jìn)行全站調(diào)試HTML布局+css美化任務(wù)實(shí)施制作JavaScript特效鏈接各分頁并進(jìn)行全站調(diào)試操作步驟布局結(jié)構(gòu)分析頁面切圖鏈接各分頁并進(jìn)行全站調(diào)試HTML布局+css美化任務(wù)實(shí)施制作JavaScript特效考核評價班級：姓名：學(xué)號任務(wù)名稱：古首頁頁面制作評價項目評價標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設(shè)計并制作南寧市第六職業(yè)技術(shù)學(xué)校校園網(wǎng)---首頁