《網(wǎng)頁(yè)設(shè)計(jì)（HTML5+CSS3）》核心課程標(biāo)準(zhǔn)

《網(wǎng)頁(yè)設(shè)計(jì)（HTML5+CSS3）》核心課程標(biāo)準(zhǔn)課程編碼課程類別專業(yè)核心課計(jì)劃學(xué)時(shí)128課程類型B類適用專業(yè)軟件技術(shù)課程性質(zhì)必修開課學(xué)期第一學(xué)期學(xué)分6先行課程開課單位信息工程系平行課程計(jì)算機(jī)應(yīng)用基礎(chǔ)考核類型考試后繼課程JavaScript程序設(shè)計(jì)與jQuery框架一、課程性質(zhì)與定位本課程是軟件技術(shù)專業(yè)的核心課程，也是后續(xù)JavaScript程序設(shè)計(jì)與jQuery框架的基礎(chǔ)課程，在Web前端開發(fā)中占有重要地位。通過本課程的課堂教學(xué)和實(shí)踐教學(xué)，使學(xué)生能夠掌握網(wǎng)頁(yè)設(shè)計(jì)的兩大基礎(chǔ)，HTML和CSS，具備常見門戶網(wǎng)站、電商網(wǎng)站的設(shè)計(jì)與制作能力，培養(yǎng)學(xué)生科學(xué)的思維方法，靈活運(yùn)用知識(shí)的能力和自主學(xué)習(xí)的能力，為后續(xù)網(wǎng)站開發(fā)課程的學(xué)習(xí)、網(wǎng)頁(yè)制作員工作的勝任打下堅(jiān)實(shí)的基礎(chǔ)。二、課程設(shè)計(jì)理念本課程強(qiáng)調(diào)對(duì)學(xué)生職業(yè)素養(yǎng)和Web前端編程能力的培養(yǎng)，按照理實(shí)一體、課內(nèi)外互補(bǔ)、課堂教學(xué)與培優(yōu)工程相結(jié)合的課程設(shè)計(jì)指導(dǎo)思想，以任務(wù)或項(xiàng)目為載體組織教學(xué)內(nèi)容，采取講練結(jié)合、微課教學(xué)、視頻輔導(dǎo)、單元測(cè)試、賽練融合等多種教學(xué)形式和手段，突出學(xué)生的主體地位，在校內(nèi)實(shí)訓(xùn)室完成所有教學(xué)環(huán)節(jié)，實(shí)現(xiàn)“教、學(xué)、做”的有機(jī)融合；通過班級(jí)講授、團(tuán)隊(duì)學(xué)習(xí)、個(gè)體輔導(dǎo)、展示交流、技能大賽等手段，實(shí)現(xiàn)從模仿到應(yīng)用到創(chuàng)新的高職學(xué)生遞進(jìn)式培養(yǎng)。三、課程目標(biāo)（一）總體目標(biāo)本課程涉及網(wǎng)頁(yè)基礎(chǔ)、HTML5標(biāo)記、CSS3樣式、網(wǎng)頁(yè)布局等內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生能夠了解HTML5基本標(biāo)簽和CSS3常用樣式，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程，掌握常見的網(wǎng)頁(yè)布局效果，掌握一定的Web前端開發(fā)知識(shí)，學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站。同時(shí)通過教學(xué)過程中的實(shí)際開發(fā)過程的規(guī)范要求強(qiáng)化學(xué)生的職業(yè)道德意識(shí)和職業(yè)素質(zhì)養(yǎng)成意識(shí)，為學(xué)生后續(xù)課程學(xué)習(xí)夯實(shí)基礎(chǔ)。（二）具體目標(biāo)1.能力目標(biāo)了解Web前端程序員等相關(guān)職業(yè)崗位的工作職責(zé)；具有一定的網(wǎng)頁(yè)設(shè)計(jì)與制作能力；具備良好的編程習(xí)慣和準(zhǔn)確的語(yǔ)言表達(dá)能力；具有一定的科學(xué)思維方式和分析判斷解決問題的能力；具有社會(huì)適應(yīng)能力、溝通能力與自我學(xué)習(xí)能力；具有良好的職業(yè)道德與敬業(yè)精神，具有團(tuán)隊(duì)合作意識(shí)。2.知識(shí)目標(biāo)認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站，了解相關(guān)概念；熟悉VisualStudioCode和Hbuilder的使用；熟練掌握HTML5基本標(biāo)簽；掌握常用H5表單控件并能熟練運(yùn)用；理解CSS3樣式規(guī)則及選擇器，能合理使用CSS美化頁(yè)面；理解CSS盒子模型、浮動(dòng)和定位布局，并能應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中；掌握HTML和CSS多媒體應(yīng)用；掌握CSS3的變形、動(dòng)畫和轉(zhuǎn)換；能達(dá)到“1+X”Web前端開發(fā)初級(jí)標(biāo)準(zhǔn)。四、課程教學(xué)內(nèi)容及學(xué)時(shí)分配序號(hào)項(xiàng)目名稱學(xué)習(xí)目標(biāo)學(xué)習(xí)內(nèi)容學(xué)時(shí)1認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站了解Web標(biāo)準(zhǔn)，了解網(wǎng)頁(yè)和網(wǎng)站，明確HTML、CSS及JavaScript在其中的作用；熟悉常見的瀏覽器；熟悉DreamWeaver工具的基本操作，能使用DreamWeaver創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)。1.認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站2.網(wǎng)站制作流程3.網(wǎng)頁(yè)設(shè)計(jì)規(guī)范4.HTML簡(jiǎn)介5.CSS簡(jiǎn)介6.JavaScript簡(jiǎn)介7.常用瀏覽器介紹8.Hbuilder工具的使用9.使用Hbuilder創(chuàng)建第一個(gè)頁(yè)面42從零開始構(gòu)建HTML頁(yè)面了解HTML5發(fā)展歷程，熟悉瀏覽器支持情況；理解HTML5基本語(yǔ)法，掌握新特性；掌握HTML文檔基本格式，能夠書寫規(guī)范的HTML網(wǎng)頁(yè)；掌握文本控制表標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記，能夠制作簡(jiǎn)單網(wǎng)頁(yè)。1.認(rèn)識(shí)HTML和HTML52.認(rèn)識(shí)標(biāo)記3.HTML文檔基本格式單4.標(biāo)記屬性5.HTML5文檔頭部相關(guān)標(biāo)記6.標(biāo)題和段落標(biāo)記7.文本樣式標(biāo)記8.文本格式化標(biāo)記9.特殊字符標(biāo)記10.常用圖片格式11.圖像標(biāo)記12.相對(duì)路徑與絕對(duì)路徑13.認(rèn)識(shí)HTML5新標(biāo)記123運(yùn)用CSS技術(shù)設(shè)置網(wǎng)頁(yè)樣式掌握CSS樣式規(guī)則，能夠書寫規(guī)范的CSS樣式代碼；掌握CSS文本樣式屬性，能夠控制頁(yè)面中的文本樣式；掌握CSS選擇器寫法，可以快捷選擇頁(yè)面中的元素；理解CSS層疊性、繼承性與優(yōu)先級(jí)，學(xué)會(huì)高效控制網(wǎng)頁(yè)元素；了解CSS3新增選擇器。1.CSS樣式規(guī)則2.引入CSS樣式表3.CSS基礎(chǔ)選擇器4.字體樣式屬性5.文本外觀屬性6.CSS復(fù)合選擇器7.CSS層疊性與繼承性8.CSS優(yōu)先級(jí)9.CSS3新增選擇器164運(yùn)用CSS盒子模型劃分網(wǎng)頁(yè)模塊了解盒子模型的概念；掌握盒子模型相關(guān)屬性，能夠使用它們熟練地控制網(wǎng)頁(yè)元素；理解塊元素與行內(nèi)元素的區(qū)別，能夠?qū)λ鼈冞M(jìn)行轉(zhuǎn)換。1.認(rèn)識(shí)盒子模型2.div標(biāo)記3.盒子寬高4.邊框?qū)傩?.內(nèi)邊距屬性6.外邊距屬性7.陰影8.背景屬性9.元素的類型10.span標(biāo)記11.元素的轉(zhuǎn)換165添加列表和超鏈接掌握無序、有序及定義列表的使用，可以制作常見的網(wǎng)頁(yè)列表模塊；掌握超鏈接標(biāo)記的使用，能夠使用超鏈接定義網(wǎng)頁(yè)元素；掌握CSS偽類，會(huì)使用CSS偽類實(shí)現(xiàn)超鏈接特效。1.無序列表2.有序列表3.定義列表4.定義列表實(shí)現(xiàn)圖文混排5.list-style復(fù)合屬性6.超鏈接標(biāo)記<a>7.鏈接偽類8.錨點(diǎn)鏈接86添加表格和表單掌握表格標(biāo)記的應(yīng)用，能創(chuàng)建表格并添加樣式；理解表單的構(gòu)成，可以快速創(chuàng)建表單；掌握表單相關(guān)標(biāo)記，能夠創(chuàng)建具有相應(yīng)功能的表單控件；掌握表單樣式的控制，能夠美化表單界面。1.創(chuàng)建表格2.表格標(biāo)記3.CSS美化表格4.表單構(gòu)成5.創(chuàng)建表單6.表單屬性7.input控件8.textarea控件9.select控件10.datalist控件11.CSS控制表單樣式167運(yùn)用浮動(dòng)與定位布局網(wǎng)頁(yè)掌握標(biāo)記的浮動(dòng)屬性，能夠?yàn)闃?biāo)記設(shè)置和清除浮動(dòng)；掌握標(biāo)記的定位屬性，能夠理解不同類型定位之間的差別；掌握div+css布局技巧，能夠利用該技巧為網(wǎng)頁(yè)布局。1.布局概述2.元素的浮動(dòng)屬性float3.清除浮動(dòng)4.標(biāo)記定位屬性5.overflow屬性6.Z-index標(biāo)記層疊7.單列布局8.兩列布局9.三列布局10.網(wǎng)頁(yè)模塊命名規(guī)范168網(wǎng)頁(yè)多媒體掌握HTML5中視頻的相關(guān)屬性，能夠添加視頻；掌握音頻相關(guān)屬性，能夠添加音頻；理解過渡屬性，能夠常見過渡效果；掌握CSS3變形屬性，能夠制作2D、3D轉(zhuǎn)換效果；掌握CSS3動(dòng)畫，能夠熟練制作常見動(dòng)畫效果。1.<video>嵌入視頻2.<audio>嵌入音頻3.音視頻兼容性4.控制視頻寬高5.過渡屬性6.變形7.動(dòng)畫屬性89實(shí)戰(zhàn)開發(fā)鞏固貫通HTML、CSS基本知識(shí)的運(yùn)用電商或門戶網(wǎng)站首頁(yè)1610證書模擬試題能獨(dú)立完成“Web前端開發(fā)”初級(jí)證書對(duì)應(yīng)理論和實(shí)操題1.理論試題2.實(shí)操試題16五、教學(xué)組織與教學(xué)方法（一）采用“任務(wù)驅(qū)動(dòng)”教學(xué)模式，所有課程內(nèi)容的安排均圍繞學(xué)習(xí)任務(wù)的完成來展開。（二）主要采用的教學(xué)方法有以下幾種：1.任務(wù)教學(xué)法。解決真實(shí)或虛擬企業(yè)項(xiàng)目開發(fā)中的實(shí)際問題，用任務(wù)牽引，采用項(xiàng)目組的形式，按照軟件公司運(yùn)作形式和項(xiàng)目開發(fā)流程，以學(xué)生為中心，全面完成任務(wù)分析、信息收集、計(jì)劃制定、做出決策、實(shí)施計(jì)劃、反饋控制、評(píng)估結(jié)果、拓展思考等教學(xué)全過程，達(dá)到通過學(xué)生自己的實(shí)踐或行動(dòng)來培養(yǎng)和提高職業(yè)能力的教學(xué)目標(biāo)。2.分組教學(xué)法。根據(jù)學(xué)生實(shí)際情況，采用男生帶女生、普高生帶職高生、基礎(chǔ)好帶基礎(chǔ)差的學(xué)生進(jìn)行分組，小組間共同完成任務(wù)，培養(yǎng)學(xué)生的協(xié)作、團(tuán)隊(duì)意識(shí)。3.激勵(lì)教學(xué)法。在教學(xué)過程中，通過各種激勵(lì)手段，有意識(shí)地引導(dǎo)學(xué)生各種創(chuàng)新式思維，促進(jìn)學(xué)生之間智力活動(dòng)的相互感染，從而開拓進(jìn)取，提高學(xué)習(xí)效率。如各個(gè)學(xué)習(xí)任務(wù)的制定，由易到難，學(xué)生經(jīng)過努力完成開發(fā)后，會(huì)有逐步遞增的成就感；以賽促學(xué)，以賽促教，賽證融通，以績(jī)效考核形式管理學(xué)生學(xué)習(xí)過程和效果，增強(qiáng)其團(tuán)隊(duì)意識(shí)和榮譽(yù)感，培養(yǎng)以創(chuàng)新視角和思維解決問題的意識(shí)和習(xí)慣，效果顯著。4.資源多樣法。通過慕課、在線開發(fā)課、微課、培訓(xùn)機(jī)構(gòu)優(yōu)秀資源、學(xué)習(xí)網(wǎng)站等為學(xué)生提供各種各樣的學(xué)習(xí)資源，線上教學(xué)與線下教學(xué)相結(jié)合，充分利用各種碎片化時(shí)間，提高學(xué)生學(xué)習(xí)效率、學(xué)習(xí)積極性和主動(dòng)性，鍛煉其自主學(xué)習(xí)能力。五、考核與評(píng)價(jià)考核主要由平時(shí)成績(jī)、理論考試以及實(shí)訓(xùn)成績(jī)組成。也可以證代考，取得證書視為課程成績(jī)95分以上。（一）平時(shí)成績(jī)平時(shí)成績(jī)強(qiáng)調(diào)平時(shí)的出勤、課堂紀(jì)律、課堂表現(xiàn)和作業(yè)，教師通過簽到、打卡、隨機(jī)抽查、課后統(tǒng)計(jì)反饋等手段的實(shí)施監(jiān)控學(xué)生的學(xué)習(xí)效果以及學(xué)習(xí)態(tài)度等。平時(shí)成績(jī)占全部考試的50%。（二）理論考試?yán)碚摽荚嚥捎脗鹘y(tǒng)的筆試方式，為了更好的達(dá)到考核的目的，我們采用第三方出題的形式來組織理論考試。理論考試占全部考試的30%。（三）實(shí)訓(xùn)成績(jī)主要以綜合案例或項(xiàng)目為主，采用機(jī)試+評(píng)價(jià)方式進(jìn)行，由教師對(duì)學(xué)生項(xiàng)目的完成程度、質(zhì)量，并綜合其完成過程中的表現(xiàn)，隨堂給出成績(jī)。實(shí)訓(xùn)成績(jī)占全部考試的20%。六、教學(xué)建議（一）教學(xué)條件課程應(yīng)配有網(wǎng)絡(luò)教學(xué)資源和實(shí)訓(xùn)室，不僅教師可以利用這些資源進(jìn)行教學(xué)，學(xué)生也可以通過課程資源進(jìn)行自主學(xué)習(xí)。課程網(wǎng)絡(luò)教學(xué)資源應(yīng)包括：課程標(biāo)準(zhǔn)、電子課件、電子教材、學(xué)習(xí)指南、在線測(cè)試、視頻動(dòng)畫庫(kù)、圖片庫(kù)、案例庫(kù)等內(nèi)容。豐富課程教學(xué)內(nèi)容、教學(xué)方法和教學(xué)手段，方便學(xué)生開展自主學(xué)習(xí)。利用電子教案、教學(xué)課件、視頻及網(wǎng)絡(luò)教學(xué)軟件等進(jìn)行輔助教學(xué)，在線答疑等師生互動(dòng)方式，能夠提高教學(xué)效果；利用習(xí)題庫(kù)、相關(guān)考試題庫(kù)可進(jìn)行教學(xué)知識(shí)和技能的自我測(cè)評(píng)。（二）師資要求為實(shí)現(xiàn)課程教學(xué)目標(biāo)，教師應(yīng)該熟悉Web前端工程師執(zhí)業(yè)標(biāo)準(zhǔn)，具有較豐富的Web前端開發(fā)經(jīng)驗(yàn)，熟練掌握HTML、CSS、JavaScript及相關(guān)框架等技術(shù)，能夠應(yīng)用這些技術(shù)設(shè)計(jì)和制作一個(gè)完整的網(wǎng)頁(yè)，同時(shí)，還要求主講教師具備較豐富的教學(xué)經(jīng)驗(yàn)及課堂組織能力。具備較強(qiáng)的語(yǔ)言表達(dá)能力及教學(xué)組織能力。擔(dān)任本課程實(shí)踐教學(xué)指導(dǎo)教師應(yīng)具有一定的軟件企業(yè)前端開發(fā)經(jīng)驗(yàn)，具有一定的教學(xué)經(jīng)驗(yàn)并且需要有較強(qiáng)的責(zé)任心。（三）教學(xué)方法本課程是專業(yè)主干課程，實(shí)踐性較強(qiáng)，在教學(xué)方法上，采用課堂理實(shí)一體化教學(xué)，課后自學(xué)，課堂討論等教學(xué)形式。1.課堂理實(shí)一體化本課程屬偏實(shí)踐性課程，理論知識(shí)較易接受，在講述的過程中教師應(yīng)盡量聯(lián)系實(shí)際，不要陷入知識(shí)的重復(fù)贅述之中，讓學(xué)生盡量多地動(dòng)手實(shí)踐，在動(dòng)手過程中加強(qiáng)記憶，逐步提高網(wǎng)頁(yè)制作能力。2.課后自學(xué)為了培養(yǎng)學(xué)生的自學(xué)動(dòng)手能力，每章都安排一些拓展案例，課上教師只給出自學(xué)提綱，不作詳細(xì)講解，課后學(xué)生自學(xué)完成。3.課堂討論課堂討論的目的是活躍學(xué)習(xí)氣氛，開拓思路。教師應(yīng)認(rèn)真組織，安排重點(diǎn)發(fā)言，充分調(diào)動(dòng)每一名同學(xué)的學(xué)習(xí)積極性，做好總結(jié)。4.習(xí)題課習(xí)題課以案例、項(xiàng)目練習(xí)為主，可適當(dāng)安排分組完成，及時(shí)檢查反饋。5.學(xué)習(xí)筆記教學(xué)中要求學(xué)生記錄學(xué)習(xí)筆記，在記錄過程中加強(qiáng)對(duì)標(biāo)記、屬性的記憶，筆記每單元檢查一次，可輔以提問補(bǔ)充。（四）教學(xué)評(píng)價(jià)建議及標(biāo)準(zhǔn)本課程的評(píng)價(jià)要堅(jiān)持過程性評(píng)價(jià)和總結(jié)性評(píng)價(jià)相結(jié)合，教師評(píng)價(jià)和學(xué)生評(píng)價(jià)和學(xué)生自評(píng)、互評(píng)相結(jié)合。在評(píng)價(jià)過程中，要重點(diǎn)考核學(xué)生的網(wǎng)頁(yè)實(shí)際制作能力，重點(diǎn)關(guān)注學(xué)生學(xué)習(xí)態(tài)度、學(xué)習(xí)習(xí)慣、學(xué)習(xí)方法、職業(yè)能力的養(yǎng)成。教師可以根據(jù)需要靈活選擇考核方式。由于本課程的實(shí)踐性較強(qiáng)，考核要重在平時(shí)課堂表現(xiàn)及作業(yè)完成情況，課程成績(jī)由平時(shí)成績(jī)和期末成績(jī)構(gòu)成，平時(shí)成績(jī)不低于50%，期末成績(jī)不高于50%。（五）課程資源開發(fā)與利用建議1.學(xué)習(xí)包和教材，都是素材性的課程資源，但教材是知識(shí)的載體，而學(xué)習(xí)包是引導(dǎo)學(xué)生學(xué)習(xí)的載體。因此，要開發(fā)學(xué)習(xí)包，突出以學(xué)生為中心的學(xué)習(xí)過程，將本課程的教學(xué)內(nèi)容與地區(qū)經(jīng)濟(jì)的發(fā)展密切結(jié)合，并體現(xiàn)學(xué)生職業(yè)生涯發(fā)展的需要。2.教學(xué)中學(xué)生的問題、困惑、見解、情感和體驗(yàn)等都是動(dòng)態(tài)生成的課程資源，老師應(yīng)重視這些教學(xué)過程中動(dòng)態(tài)生成的課程資源，并主動(dòng)性和創(chuàng)造性地運(yùn)用，使以項(xiàng)目為主的教學(xué)充滿生機(jī)與活力。3.本課程的實(shí)施必須依賴于一定的實(shí)訓(xùn)條件，如計(jì)算機(jī)機(jī)房，網(wǎng)絡(luò)教學(xué)軟件、VisalStudioCode、Hbuilder等必備的軟件平臺(tái)。4.本課程的實(shí)施，不僅應(yīng)充分開發(fā)校內(nèi)的課程資源，還應(yīng)利用校外的課程資源，如相關(guān)企業(yè)的崗位實(shí)習(xí)和實(shí)踐，盡量做到校企結(jié)合、工學(xué)結(jié)合。5.網(wǎng)絡(luò)教學(xué)資源。充分開發(fā)和利用網(wǎng)絡(luò)教學(xué)資源，為學(xué)生提供多樣化的學(xué)習(xí)資源和形式，了解最新的技術(shù)策略和實(shí)施方法，培養(yǎng)學(xué)生自