職業(yè)技術(shù)學(xué)?！俄憫?yīng)式網(wǎng)站開發(fā)bootstrap》課程標(biāo)準(zhǔn)

課程標(biāo)準(zhǔn)課程名稱：響應(yīng)式網(wǎng)站開發(fā)專業(yè)大類：電子信息大類響應(yīng)式網(wǎng)站開發(fā)課程代碼：0311117課程名稱：響應(yīng)式網(wǎng)站開發(fā)課程性質(zhì)：必修課程類別：職業(yè)技術(shù)基礎(chǔ)課程適用專業(yè)：計(jì)算機(jī)應(yīng)用技術(shù)、軟件技術(shù)、移動互聯(lián)應(yīng)用技術(shù)開設(shè)學(xué)期：第一學(xué)期授課學(xué)時：48（理實(shí)一體）+16學(xué)時項(xiàng)目強(qiáng)化一、課程定位《響應(yīng)式網(wǎng)站開發(fā)》是計(jì)算機(jī)應(yīng)用技術(shù)、軟件技術(shù)、移動互聯(lián)應(yīng)用技術(shù)專業(yè)的一門職業(yè)技術(shù)基礎(chǔ)課程，由淺入深地講解了前端框架bootstrap的語法及使用技巧，涵蓋了bootstrap的眾多功能模塊，如柵格系統(tǒng)，Borders、Display、Spacing、Text、Images、Shadows工具類，Navbar、Breadcrumb、Listgroup、Accordion、Alert、Carousel等眾多組件、及表格類、表單類等，通過理論、圖解、實(shí)戰(zhàn)的方式闡釋Bootstrap的特性功能。通過學(xué)習(xí)本門課程，學(xué)生能更好地掌握Bootstrap的特性，并且將新技術(shù)運(yùn)用到實(shí)際的開發(fā)當(dāng)中，提高自己開發(fā)Web程序的水平。二、課程設(shè)計(jì)以就業(yè)為導(dǎo)向，以能力為本位，不局限于單純的技能訓(xùn)練，在培養(yǎng)學(xué)生職業(yè)崗位能力的基礎(chǔ)上，圍繞高素質(zhì)復(fù)合型技術(shù)技能型人才專業(yè)培養(yǎng)目標(biāo)，培養(yǎng)學(xué)生的終身學(xué)習(xí)的能力和職業(yè)生涯發(fā)展所需的綜合素養(yǎng)。課程建設(shè)優(yōu)化傳統(tǒng)HTML網(wǎng)頁設(shè)計(jì)類課程教學(xué)內(nèi)容，設(shè)計(jì)教學(xué)情境，開發(fā)課程案例，建設(shè)課程教學(xué)資源，實(shí)施基于混合式教學(xué)的“教學(xué)做”一體化教學(xué)方式，采用過程式考核方式，提高課程教學(xué)質(zhì)量。課程教學(xué)按照：“提出工程實(shí)際案例、分析案例所需知識、知識準(zhǔn)備、師生共同完成案例、布置任務(wù)、學(xué)生自主完成任務(wù)、小組交流、教師點(diǎn)評”的步驟進(jìn)行。將課程基本知識點(diǎn)融于案例中，圍繞著案例來開展課堂教學(xué)活動，引導(dǎo)學(xué)生參與分析、討論，讓學(xué)生在具體的問題情境中，積極思考，主動探索。課程教學(xué)內(nèi)容符合職業(yè)技能培養(yǎng)要求，注重實(shí)踐環(huán)節(jié)，實(shí)踐性教學(xué)內(nèi)容占課程內(nèi)容的60﹪以上，課程既具有針對性、又具有技術(shù)性和綜合性，有效地培養(yǎng)了學(xué)生復(fù)雜靜態(tài)頁面的設(shè)計(jì)與開發(fā)能力。三、課程目標(biāo)（一）課程總目標(biāo)通過基于工作過程的教學(xué)實(shí)施，使學(xué)生能夠根據(jù)工作任務(wù)和要求，按網(wǎng)站設(shè)計(jì)的基本流程、需求規(guī)范，運(yùn)用相關(guān)工具，獨(dú)立自主完成基于Bootstrap技術(shù)的靜態(tài)復(fù)雜頁面的設(shè)計(jì)與制作。同時對接行業(yè)標(biāo)準(zhǔn)和崗位要求強(qiáng)化學(xué)生的職業(yè)道德意識和職業(yè)素質(zhì)養(yǎng)成意識；通過小組合作學(xué)習(xí)，培養(yǎng)學(xué)生團(tuán)隊(duì)合作、協(xié)議溝通能力；為后續(xù)Web前端開發(fā)打下堅(jiān)實(shí)的基礎(chǔ)。（二）課程具體目標(biāo)1.知識目標(biāo)（1）掌握Bootstrap的環(huán)境搭建；（2）掌握Bootstrap柵格系統(tǒng)的使用；（3）掌握Bootstrap的常用工具類；（4）掌握Bootstrap的常用組件；（5）掌握Bootstrap表格類的使用；（6）掌握Bootstrap表單類的使用。2.能力目標(biāo)（1）能夠設(shè)計(jì)、制作響應(yīng)式布局的靜態(tài)頁面；（2）能綜合使用Bootstrap美化頁面元素；（3）能綜合使用Bootstrap常用組件豐富頁面表現(xiàn)效果。3.素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生良好的語言表達(dá)能力；（2）培養(yǎng)學(xué)生自主學(xué)習(xí)習(xí)慣和團(tuán)隊(duì)合作能力，身心參與、手腦并用的勞動意識；（3）培養(yǎng)學(xué)生嚴(yán)謹(jǐn)細(xì)致的學(xué)習(xí)態(tài)度和追求完美的工匠精神；（4）樹立堅(jiān)定的理想信念，厚植愛國主義情懷；四、課程內(nèi)容及學(xué)習(xí)情境根據(jù)Web前端開發(fā)工程師職業(yè)崗位的要求，遴選課程內(nèi)容，課程內(nèi)容打破學(xué)科體系，進(jìn)行解構(gòu)和重構(gòu)。以真實(shí)的項(xiàng)目和任務(wù)為載體，基于Web前端開發(fā)的設(shè)計(jì)、開發(fā)與維護(hù)崗位的工作流程設(shè)置四個情境：1.Bootstrap柵格系統(tǒng)，2.Bootstrap常用內(nèi)容、工具、表單類，3.Bootstrap常用組件，4.項(xiàng)目強(qiáng)化。課程的主要內(nèi)容和要求見表1。表1課程內(nèi)容和學(xué)習(xí)情境表序號學(xué)習(xí)情境學(xué)習(xí)載體主要學(xué)習(xí)內(nèi)容學(xué)習(xí)目標(biāo)學(xué)時1學(xué)習(xí)情境1Bootstrap柵格系統(tǒng)“同學(xué)會”通用框架、往昔歲月頁面任務(wù)1：使用Bootstrap的容器項(xiàng)目任務(wù)：完成網(wǎng)站通用框架的搭建1.掌握container；2.掌握container-fluid；4任務(wù)2：使用網(wǎng)格實(shí)現(xiàn)響應(yīng)式布局項(xiàng)目任務(wù)：完成往昔歲月頁面1.掌握網(wǎng)格（Grid）基本使用；2.掌握定義列寬度；3.掌握Offsets和Gutters的使用；4.掌握同一列在瀏覽器不同分辨率下寬度的切換；42學(xué)習(xí)情境2Bootstrap常用內(nèi)容、工具、表單類“同學(xué)會”通用框架、首頁、邀請函、日程表、在線留言頁面任務(wù)3：使用工具類項(xiàng)目任務(wù)：完成網(wǎng)站通用框架的搭建1.掌握Borders工具類；2.掌握Display工具類；4任務(wù)4：使用工具類項(xiàng)目任務(wù)：完成邀請函頁面1.掌握Sapcing工具類；2.掌握Text工具類；4任務(wù)5：使用工具類項(xiàng)目任務(wù)：完成首頁合照陰影效果1.掌握Shadows工具類；2任務(wù)6：使用內(nèi)容類項(xiàng)目任務(wù)：完成首頁合照圖片效果1.掌握Images內(nèi)容類；2任務(wù)7：使用內(nèi)容類項(xiàng)目任務(wù)：完成日程表頁面1.掌握Tables內(nèi)容類的默認(rèn)樣式；2.掌握表格的邊框、條紋、懸停效果；3.掌握設(shè)置表格及表頭的顏色；4任務(wù)8：使用表單類項(xiàng)目任務(wù)：完成在線留言頁面表單1.掌握Formcontrol表單類；2.掌握Inputgroup表單類；43學(xué)習(xí)情境3Bootstrap常用組件“同學(xué)會”通用框架、首頁、邀請函、在線留言頁面任務(wù)9：使用組件類項(xiàng)目任務(wù)：完成首頁導(dǎo)航欄和面包屑導(dǎo)航1.掌握Navbar組件類；2.面包屑導(dǎo)航（Breadcrumb）組件類；4任務(wù)10：使用組件類項(xiàng)目任務(wù)：完成邀請函頁面1.掌握Listgroup組件類；2.掌握Accordion組件類；4任務(wù)11：使用組件類項(xiàng)目任務(wù)：重構(gòu)導(dǎo)航欄1.掌握Buttons組件類；2任務(wù)12：使用組件類項(xiàng)目任務(wù)：完成在線留言頁面的留言列表1.掌握徽章（Badge）組件類；2.掌握警告框（Alert）組件類；2任務(wù)13：使用組件類項(xiàng)目任務(wù)：完成校園風(fēng)光頁面、重構(gòu)banner1.掌握輪播（Carousel）組件類84學(xué)習(xí)情境4項(xiàng)目強(qiáng)化“同學(xué)會”網(wǎng)站任務(wù)1：制作往昔歲月頁面1.套用網(wǎng)站通用部分2.完成頁面的響應(yīng)式布局4任務(wù)2：制作邀請函頁面1.套用網(wǎng)站通用部分2.完成溫馨提示模塊3.完成組織小組模塊4任務(wù)3：制作日程表頁面1.套用網(wǎng)站通用部分2.完成表格基礎(chǔ)樣式3.完成表格和表頭的顏色4任務(wù)4：制作在線留言頁面1.套用網(wǎng)站通用部分2.完成表單模塊3.完成留言列表模塊4五、教學(xué)設(shè)計(jì)學(xué)習(xí)情境一：Bootstrap柵格系統(tǒng)項(xiàng)目名稱：“同學(xué)會”網(wǎng)站學(xué)時：8教學(xué)目標(biāo)掌握container容器掌握container-fluid容器掌握網(wǎng)格（Grid）基本使用掌握定義列寬度掌握Offsets和Gutters的使用掌握同一列在瀏覽器不同分辨率下寬度的切換教學(xué)重點(diǎn)掌握container容器掌握網(wǎng)格（Grid）基本使用掌握定義列寬度掌握同一列在瀏覽器不同分辨率下寬度的切換學(xué)習(xí)難點(diǎn)掌握定義列寬度掌握同一列在瀏覽器不同分辨率下寬度的切換子任務(wù)主要教學(xué)內(nèi)容任務(wù)1：使用Bootstrap的容器1.使用container容器，完成網(wǎng)站通用框架的搭建項(xiàng)目任務(wù)：完成網(wǎng)站通用框架搭建任務(wù)2：使用網(wǎng)格實(shí)現(xiàn)響應(yīng)式布局1.使用Grid相關(guān)樣式類，實(shí)現(xiàn)頁面布局；2.使用.col-x，定義各列寬度3.使用Offsets和Gutters，設(shè)置偏移和各列之間的間隔4.使用斷點(diǎn)，實(shí)現(xiàn)同一列在瀏覽器不同分辨率下寬度的切換項(xiàng)目任務(wù)：完成往昔歲月頁和活動詳情面教學(xué)方法建議任務(wù)驅(qū)動方式組織教學(xué)內(nèi)容，采用理實(shí)一體化教學(xué)方式，學(xué)生按照任務(wù)進(jìn)行實(shí)操并進(jìn)行自我評價以及小組互評，老師按照每個小組的完成情況對小組進(jìn)行評分并總結(jié)。備注學(xué)習(xí)情境二：Bootstrap常用內(nèi)容、工具、表單類項(xiàng)目名稱：“同學(xué)會”網(wǎng)站學(xué)時：20教學(xué)目標(biāo)1.掌握Borders工具類；2.掌握Display工具類；3.掌握Sapcing工具類；4.掌握Text工具類；5.掌握Shadows工具類；6.掌握Images內(nèi)容類；7.掌握Tables內(nèi)容類的默認(rèn)樣式；8.掌握表格的邊框、條紋、懸停效果；9.掌握設(shè)置表格及表頭的顏色；11.掌握Formcontrol表單類；12.掌握Inputgroup表單類；教學(xué)重點(diǎn)1.掌握Display工具類；2.掌握Sapcing工具類；3.掌握Images內(nèi)容類；4.掌握Tables內(nèi)容類的默認(rèn)樣式；5.掌握表格的邊框、條紋、懸停效果；6.掌握Formcontrol表單類；學(xué)習(xí)難點(diǎn)1.掌握表格的邊框、條紋、懸停效果；2.掌握Formcontrol表單類；子任務(wù)主要教學(xué)內(nèi)容任務(wù)3：使用工具類1.為通用部分添加邊框效果2.為通用部分設(shè)置顯示切換項(xiàng)目任務(wù)：完成網(wǎng)站通用框架的搭建任務(wù)4：使用工具類1.使用Sapcing工具類設(shè)置元素間的內(nèi)外間距；2.使用Text工具類給文字部分添加適當(dāng)?shù)男Ч?；?xiàng)目任務(wù)：完成邀請函頁面任務(wù)5：使用工具類1.使用Shadows工具類給圖片添加陰影效果項(xiàng)目任務(wù)：完成首頁合照陰影效果任務(wù)6：使用內(nèi)容類1.使用.img-fluid類為圖片添加響應(yīng)式支持2.使用img-thumbnail類為圖片添加縮略圖效果項(xiàng)目任務(wù)：完成首頁合照圖片效果任務(wù)7：使用內(nèi)容類1.為表格添加基礎(chǔ)樣式2.使用.table-bordered,.table-striped,.table-hover類，為表格添加邊框、條紋、和懸停效果3.添加表格和表頭的顏色項(xiàng)目任務(wù)：完成日程表頁面任務(wù)8：使用表單類1.使用.form-control為輸入框架添加效果2.使用.input-group組合按鈕和輸入框項(xiàng)目任務(wù)：完成在線留言頁面表單教學(xué)方法建議任務(wù)驅(qū)動方式組織教學(xué)內(nèi)容，采用理實(shí)一體化教學(xué)方式，學(xué)生按照任務(wù)進(jìn)行實(shí)操并進(jìn)行自我評價以及小組互評，老師按照每個小組的完成情況對小組進(jìn)行評分并總結(jié)。備注學(xué)習(xí)情境三：Bootstrap常用組件項(xiàng)目名稱：“同學(xué)會”網(wǎng)站學(xué)時：20教學(xué)目標(biāo)1.掌握Navbar組件類；2.面包屑導(dǎo)航（Breadcrumb）組件類；3.掌握Listgroup組件類；4.掌握Accordion組件類；5.掌握Buttons組件類；6.掌握徽章（Badge）組件類；7.掌握警告框（Alert）組件類；8.掌握輪播（Carousel）組件類教學(xué)重點(diǎn)1.掌握Navbar組件類；2.掌握Accordion組件類；3.掌握Buttons組件類；4.掌握警告框（Alert）組件類；5.掌握輪播（Carousel）組件類學(xué)習(xí)難點(diǎn)1.掌握Accordion組件類；2.掌握輪播（Carousel）組件類子任務(wù)主要教學(xué)內(nèi)容任務(wù)9：使用組件類1.使用Navbar組件制作導(dǎo)航欄；2.使用Breadcrumb組件制作面包屑導(dǎo)航；項(xiàng)目任務(wù)：完成首頁導(dǎo)航欄和面包屑導(dǎo)航任務(wù)10：使用組件類1.使用Accordion組件制作溫馨提示和組織小組模塊；項(xiàng)目任務(wù)：完成邀請函頁面任務(wù)11：使用組件類1.使用Buttons組件制作導(dǎo)航按鈕；項(xiàng)目任務(wù)：重構(gòu)導(dǎo)航欄任務(wù)12：使用組件類1.使用徽章（Badge）組件制作留言點(diǎn)贊數(shù)量；2.使用警告框（Alert）組件制作留言列表；項(xiàng)目任務(wù)：完成在線留言頁面的留言列表任務(wù)13：使用組件類1.使用輪播（Carousel）組件制作校園風(fēng)光圖片輪播顯示；2.使用輪播（Carousel）組件制作banner廣告圖片輪播顯示；項(xiàng)目任務(wù)：完成校園風(fēng)光頁面、重構(gòu)banner教學(xué)方法建議任務(wù)驅(qū)動方式組織教學(xué)內(nèi)容，采用理實(shí)一體化教學(xué)方式，學(xué)生按照任務(wù)進(jìn)行實(shí)操并進(jìn)行自我評價以及小組互評，老師按照每個小組的完成情況對小組進(jìn)行評分并總結(jié)。備注學(xué)習(xí)情境四：項(xiàng)目強(qiáng)化項(xiàng)目名稱：“同學(xué)會”網(wǎng)站學(xué)時：16教學(xué)目標(biāo)1.掌握Bootstrap環(huán)境的搭建2.掌握Bootstrap的柵格系統(tǒng)3.掌握Bootstrap常用內(nèi)容和工具類4.掌握Bootstrap常用組件教學(xué)重點(diǎn)1.掌握Bootstrap環(huán)境的搭建2.掌握Bootstrap的柵格系統(tǒng)3.掌握Bootstrap常用內(nèi)容和工具類學(xué)習(xí)難點(diǎn)1.掌握Bootstrap的柵格系統(tǒng)子任務(wù)主要教學(xué)內(nèi)容任務(wù)1：制作往昔歲月頁面1.套用網(wǎng)站通用部分2.完成頁面的響應(yīng)式布局任務(wù)2：制作邀請函頁面1.套用網(wǎng)站通用部分2.完成溫馨提示模塊3.完成組織小組模塊任務(wù)3：制作日程表頁面1.套用網(wǎng)站通用部分2.完成表格基礎(chǔ)樣式3.完成表格和表頭的顏色任務(wù)4：制作在線留言頁面1.套用網(wǎng)站通用部分2.完成表單模塊3.完成留言列表模塊教學(xué)方法建議以理論講解、演示為主，學(xué)生按照教學(xué)內(nèi)容進(jìn)行實(shí)操并進(jìn)行自我評價以及小組互評，老師按照每個小組的完成情況對小組進(jìn)行評分并總結(jié)，采用任務(wù)驅(qū)動教學(xué)。備注六、實(shí)施建議（一）教材選用與編寫根據(jù)專業(yè)人才培養(yǎng)方案和課程教學(xué)目標(biāo)選用理論實(shí)踐一體化或項(xiàng)目課程教材。推薦教材1.HTML5+BootstrapHTML5與Bootstrap網(wǎng)頁設(shè)計(jì)，黑馬程序員，人民郵電出版社，2019參考書：1.Bootstrap前端開發(fā)（全案例微課版）北京:清華大學(xué)出版社,20212.Bootstrap網(wǎng)站開發(fā)實(shí)戰(zhàn)北京:電子工業(yè)出版社,20213.Bootstrap5.X從入門到項(xiàng)目實(shí)戰(zhàn)北京:清華大學(xué)出版社,20234.網(wǎng)站5.網(wǎng)站（二）課程資源的開發(fā)與利用1.開發(fā)課件、微課等教學(xué)資源；2.選用符合教學(xué)要求的錄像、課件、視頻、資料文獻(xiàn)等資源輔助教學(xué)；3.依托學(xué)校職教云教學(xué)平臺進(jìn)行課程資源建設(shè)。（三）教學(xué)基本條件1．專業(yè)教師的要求（1）具有前端新知識、新技能的學(xué)習(xí)能力和創(chuàng)新創(chuàng)業(yè)能力；（2）具備前端架構(gòu)設(shè)計(jì)能力；（3）具備移動端開發(fā)能力；（4）具備前端組件化能力；（5）具備網(wǎng)站性能優(yōu)化能力（6）具有較強(qiáng)的工作過程系統(tǒng)課程教學(xué)設(shè)計(jì)能力；（7）具有較強(qiáng)的行動導(dǎo)向教學(xué)組織與實(shí)施能力。2．學(xué)習(xí)場地、設(shè)施的要求為保證項(xiàng)目、任務(wù)的實(shí)施與完成，本課程必須在實(shí)踐理論一體化教室完成教學(xué)過程。（四）教學(xué)建議1.本課程以實(shí)際的典型應(yīng)用為基礎(chǔ)構(gòu)建學(xué)習(xí)載體，建議在每個學(xué)習(xí)情境的教學(xué)實(shí)施中，完全采用項(xiàng)目引導(dǎo)、任務(wù)驅(qū)動的行動導(dǎo)向教學(xué)，并以小組協(xié)作方式完成各項(xiàng)工作任務(wù)。2.以Web項(xiàng)目的設(shè)計(jì)、實(shí)現(xiàn)作為驅(qū)動主線，實(shí)現(xiàn)理論實(shí)踐一體化教學(xué)。學(xué)生通過感性認(rèn)識，理性思維，動手操作，完成Web項(xiàng)目的分析、設(shè)計(jì)、編碼、調(diào)試和運(yùn)行，在做中學(xué)，在學(xué)中做，最終達(dá)到真正聽得懂，學(xué)得會，做得好，切實(shí)提高動手能力和分析問題、解決問題的綜合素質(zhì)。3.在教學(xué)過程中，要創(chuàng)設(shè)工作情景，同時應(yīng)加大實(shí)踐實(shí)操的容量，要緊密結(jié)合職業(yè)技能等級證書的考證，加強(qiáng)考證的實(shí)操項(xiàng)目的訓(xùn)練，在實(shí)踐實(shí)操過程中，使學(xué)生掌握HTML靜態(tài)頁面設(shè)計(jì)與制作應(yīng)有的技能，提高學(xué)生的崗位適應(yīng)能力。4.在教學(xué)過程中，要盡量應(yīng)用多媒體、動畫視頻、演示等教學(xué)資源輔助教學(xué)，幫助學(xué)生理解相關(guān)概念。5.在教學(xué)過程中，在教學(xué)過程中，關(guān)注軟件產(chǎn)業(yè)發(fā)展新業(yè)態(tài)、新模式，對接新技術(shù)、新工藝、新規(guī)范發(fā)展趨勢，貼近生產(chǎn)現(xiàn)場。為學(xué)生提供職業(yè)生涯發(fā)展的空間，努力培養(yǎng)學(xué)生參與社會實(shí)踐的創(chuàng)新精神和職業(yè)能力。6.教學(xué)過程中教師應(yīng)積極引導(dǎo)學(xué)生提升職業(yè)素養(yǎng)，培養(yǎng)職業(yè)道德。七、教學(xué)評價（一）成績構(gòu)成本課程主要以過程考核為主，考核涵蓋學(xué)習(xí)情境全過程，既評價學(xué)生專業(yè)能力，也評價學(xué)生交流溝通、團(tuán)隊(duì)協(xié)作、自主學(xué)習(xí)、問題的分析與處理等非專業(yè)能力，以促進(jìn)學(xué)生綜合職業(yè)能力的養(yǎng)成。課程總評成績=項(xiàng)目成績（70%）+作業(yè)成績（10%）+考勤（10%）+課堂活動成績（10%）（二）項(xiàng)目成績評價指標(biāo)項(xiàng)目總分100分，項(xiàng)目考核由指導(dǎo)教師對每個小組進(jìn)行綜合考核，考核內(nèi)容分為三個部分：第一部分是項(xiàng)目的設(shè)計(jì)和制作，占評價成績的70%，第二部分是項(xiàng)目總結(jié)報(bào)告，占評價成績的10%，第三部分是團(tuán)隊(duì)合作和語言表達(dá)