******-***-JW003某某職業(yè)學(xué)院《HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)標(biāo)準(zhǔn)PAGEPAGE5《HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)大綱課程編號(hào)：030329FA適用專業(yè)：軟件、網(wǎng)絡(luò)、應(yīng)用技術(shù)課程類型：專業(yè)課（專業(yè)基礎(chǔ)）課程性質(zhì)：必修課課程學(xué)時(shí)：64課程學(xué)分：4一、課程定位《HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作》課程是軟件技術(shù)、計(jì)算機(jī)維護(hù)技術(shù)、計(jì)算機(jī)應(yīng)用技術(shù)等專業(yè)的專業(yè)基礎(chǔ)課程。本課程主要培養(yǎng)學(xué)生的靜態(tài)頁面設(shè)計(jì)能力，該課程綜合HTML語言、CSS樣式兩項(xiàng)技術(shù)，通過“教、學(xué)、做”理論與實(shí)踐一體化教學(xué)，使學(xué)生掌握Web客戶端靜態(tài)頁面編寫的基本方法，并逐步形成正確的客戶端靜態(tài)頁面設(shè)計(jì)思想，能夠熟練地使用HTML語言、CSS樣式設(shè)計(jì)進(jìn)行頁面設(shè)計(jì)，為Web開發(fā)后續(xù)課程打下基礎(chǔ)。本課程的先導(dǎo)課程有計(jì)算機(jī)技術(shù)基礎(chǔ)、程序設(shè)計(jì)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、操作系統(tǒng)等，后續(xù)課程有JavaScript、響應(yīng)式網(wǎng)站開發(fā)、Vue項(xiàng)目開發(fā)、綜合項(xiàng)目化實(shí)訓(xùn)等。二、課程目標(biāo)1.知識(shí)目標(biāo)（1）熟悉HTML語言的作用和開發(fā)環(huán)境，能夠編寫HTML代碼；（2）掌握網(wǎng)頁效果圖的設(shè)計(jì)與制作的方法；（3）掌握常用的HTML標(biāo)簽，能夠?qū)崿F(xiàn)基本的圖文信息顯示；（4）掌握各類HTML表單元素標(biāo)簽，能夠進(jìn)行表單設(shè)計(jì)；（5）掌握各類HTML多媒體元素標(biāo)簽，能夠進(jìn)行多媒體頁面設(shè)計(jì)；（6）掌握CSS樣式的基本使用方法，應(yīng)用文本、背景與列表樣式美化頁面；（7）掌握CSS網(wǎng)頁布局的方法，能夠運(yùn)用盒模型、浮動(dòng)布局、定位布局、彈性布局、網(wǎng)格布局結(jié)合HMTL5標(biāo)簽進(jìn)行頁面布局；（8）掌握運(yùn)行表單進(jìn)行網(wǎng)頁頁面設(shè)計(jì)；（9）掌握CSS3轉(zhuǎn)換、transitions過渡、animation動(dòng)畫進(jìn)行頁面設(shè)計(jì)；2.能力目標(biāo)（1）能獨(dú)立進(jìn)行資料收集與整理、具備用戶需求的理解能力；（2）能根據(jù)項(xiàng)目需求，設(shè)計(jì)網(wǎng)頁的效果圖設(shè)計(jì)與制作；（2）能根據(jù)項(xiàng)目需求，具備項(xiàng)目頁面的設(shè)計(jì)與實(shí)現(xiàn)能力；（3）能根據(jù)靜態(tài)頁面設(shè)計(jì)原則與CSS3技術(shù)規(guī)范，實(shí)現(xiàn)頁面美化與布局；（4）具有綜合應(yīng)用HTML5語言、CSS3樣式進(jìn)行頁面的設(shè)計(jì)、編碼、調(diào)試、維護(hù)能力。3.素質(zhì)目標(biāo)（1）熱愛祖國，關(guān)心社會(huì)，具有中國特色社會(huì)主義堅(jiān)定理想信念，主動(dòng)踐行中華民族偉大復(fù)興的中國夢。（2）具備社會(huì)責(zé)任感和法律意識(shí)，積極參與公益服務(wù)與勞動(dòng)，掌握必要的法律知識(shí)。（3）具備繼承中華民族優(yōu)秀傳統(tǒng)文化的擔(dān)當(dāng)意識(shí)，主動(dòng)踐行社會(huì)主義核心價(jià)值觀，形成文化自信。（4）養(yǎng)成善于思考、深入研究的良好自主學(xué)習(xí)的習(xí)慣；（5）通過項(xiàng)目與案例教學(xué)，培養(yǎng)學(xué)習(xí)者的分析問題、解決問題的能力；（6）具有吃苦耐勞、團(tuán)隊(duì)協(xié)作精神，溝通交流和書面表達(dá)能力；（7）通過課外拓展訓(xùn)練，培養(yǎng)學(xué)習(xí)者的創(chuàng)新意識(shí)；（8）具有愛崗敬業(yè)、遵守職業(yè)道德規(guī)范、誠實(shí)、守信的高尚品質(zhì)。三、課程設(shè)計(jì)1.設(shè)計(jì)理念以培養(yǎng)網(wǎng)站開發(fā)相關(guān)職業(yè)崗位的職業(yè)能力和職業(yè)素養(yǎng)為核心，以項(xiàng)目為載體，以典型工作過程要素為教學(xué)內(nèi)容的基礎(chǔ)，以啟發(fā)學(xué)生自信心、主動(dòng)性、自學(xué)能力為著力點(diǎn)，校企共育，實(shí)現(xiàn)培養(yǎng)學(xué)生技術(shù)能力和職業(yè)素養(yǎng)的教學(xué)目標(biāo)，如圖1所示。圖1課程設(shè)計(jì)理念第一、以教學(xué)仿真項(xiàng)目和企業(yè)實(shí)際項(xiàng)目為載體重構(gòu)和序化教學(xué)內(nèi)容。而不是按照傳統(tǒng)的原理、實(shí)驗(yàn)、實(shí)訓(xùn)的內(nèi)容進(jìn)行教學(xué)；第二、校企融合，工學(xué)結(jié)合，在課程教學(xué)過程中引入企業(yè)元素。校企共同開發(fā)課程，將企業(yè)工作流程、行業(yè)標(biāo)準(zhǔn)和主流技術(shù)引入教學(xué)；第三、將網(wǎng)站開發(fā)相關(guān)職業(yè)崗位的典型工作過程作為組織教學(xué)內(nèi)容的基礎(chǔ)。通過行動(dòng)領(lǐng)域分析、學(xué)習(xí)領(lǐng)域分析和教學(xué)情境設(shè)計(jì)，構(gòu)建教學(xué)內(nèi)容中的單元和任務(wù)；第四、以啟發(fā)學(xué)生自信心、主動(dòng)性、自學(xué)能力為著力點(diǎn)。實(shí)現(xiàn)“學(xué)生主體、教師主導(dǎo)”的教育理念。2.設(shè)計(jì)思路以職業(yè)能力分析、職業(yè)崗位典型工作過程分析和學(xué)生分析等為基礎(chǔ)，在首先確定專業(yè)課程體系的前提下，確定本課程的課程目標(biāo)、教學(xué)內(nèi)容、學(xué)習(xí)情境、教學(xué)資源、教學(xué)方法、考核形式等核心要素，并充分體現(xiàn)課程的職業(yè)性、實(shí)踐性和開放性，如圖2所示。課程的職業(yè)性、實(shí)踐性和開放性的具體體現(xiàn)見表1。圖2課程設(shè)計(jì)路線圖表2課程的實(shí)踐性、開放性和職業(yè)性課程設(shè)計(jì)特征體現(xiàn)方式實(shí)踐性教學(xué)內(nèi)容基于模擬教學(xué)項(xiàng)目和真實(shí)項(xiàng)目的教學(xué)；學(xué)生課外實(shí)踐活動(dòng)。教學(xué)方法理論實(shí)踐一體化；項(xiàng)目化教學(xué)；學(xué)生課后實(shí)踐活動(dòng)組織和實(shí)施；教學(xué)評價(jià)學(xué)生考核方式：實(shí)踐環(huán)節(jié)和項(xiàng)目實(shí)戰(zhàn)占比例大；以學(xué)生的項(xiàng)目實(shí)戰(zhàn)能力的整體水平作為評價(jià)教師教學(xué)效果的主要依據(jù)；職業(yè)性美工要求將企業(yè)對于網(wǎng)站的美工要求引入課程教學(xué)；團(tuán)隊(duì)精神和溝通能力基于分組的課程學(xué)習(xí)和課后學(xué)習(xí)、實(shí)踐活動(dòng)；經(jīng)常要求學(xué)生匯報(bào)和展示項(xiàng)目成果。計(jì)劃管理大量的課外任務(wù)時(shí)效性要求；學(xué)生參與項(xiàng)目開發(fā)任務(wù)分配時(shí)效性要求；項(xiàng)目開發(fā)流程要求學(xué)生按照企業(yè)運(yùn)行方式實(shí)施項(xiàng)目開發(fā)；理解客戶需求學(xué)生在開發(fā)真實(shí)項(xiàng)目時(shí)直接面對客戶項(xiàng)目文檔編寫要求學(xué)生編寫項(xiàng)目設(shè)計(jì)文檔開放性教學(xué)方式學(xué)生學(xué)習(xí)和實(shí)踐場所、時(shí)間的開放性師資隊(duì)伍專職教師和企業(yè)兼職教師共同組成教學(xué)團(tuán)隊(duì)教學(xué)內(nèi)容真實(shí)項(xiàng)目和模擬項(xiàng)目相結(jié)合；教學(xué)資源各種數(shù)字化教學(xué)資源、案例庫支持學(xué)生網(wǎng)上學(xué)習(xí)；四、課程內(nèi)容與學(xué)時(shí)分配序號(hào)項(xiàng)目名稱知識(shí)與案例模塊學(xué)時(shí)分配理論實(shí)踐合計(jì)1認(rèn)識(shí)網(wǎng)頁的設(shè)計(jì)與策劃1.網(wǎng)頁設(shè)計(jì)的概念與術(shù)語；142.網(wǎng)頁、網(wǎng)站相關(guān)概念0.53.HTML5的發(fā)展歷史與優(yōu)勢0.54.HTML5的編碼方式15.體驗(yàn)HTML5的頁面特征1思政：符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：學(xué)習(xí)強(qiáng)國、青年大學(xué)習(xí)等）2設(shè)計(jì)與制作網(wǎng)頁效果圖1.Photoshop應(yīng)用基礎(chǔ)22102.通道的概念與使用技巧113.蒙版的概念與使用技巧114.網(wǎng)站效果圖的設(shè)計(jì)與制作11思政：符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：學(xué)習(xí)強(qiáng)國、青年大學(xué)習(xí)等）3實(shí)現(xiàn)HTML圖文混排1.HTML5基礎(chǔ)0.50.562.文字與段落標(biāo)簽0.50.53.圖像與超級鏈接標(biāo)簽0.50.54.表格與列表0.50.55.綜合應(yīng)用任務(wù)11思政：選擇紅色主題與傳統(tǒng)文化符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：傳統(tǒng)文化、黨的故事、勞模精神等）4運(yùn)用HTML5的新標(biāo)簽1.HTML5結(jié)構(gòu)性標(biāo)簽0.50.562.分組標(biāo)簽0.50.53.頁面交互、行內(nèi)語義性標(biāo)簽0.50.54.HTML5的全局屬性0.50.55.綜合應(yīng)用任務(wù)11思政：遴選熱愛祖國，關(guān)心社會(huì)，具有中國特色社會(huì)主義堅(jiān)定理想信念的站點(diǎn)案例（例如：抗疫精神、抗疫英雄等）5構(gòu)建網(wǎng)站層疊樣式表1.初識(shí)CSS3與CSS的使用1182.CSS常用選擇器113.CSS3選擇器與CSS的繼承與層疊114.綜合應(yīng)用任務(wù)11思政：選擇符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：勞模故事、女排精神等）6使用CSS美化頁面效果1.文本樣式設(shè)置1182.背景屬性設(shè)置113.CSS3中新增的漸變屬性0.50.54.列表樣式設(shè)置0.50.55.綜合應(yīng)用任務(wù)11思政：具備社會(huì)責(zé)任感和法律意識(shí)，積極參與公益服務(wù)與勞動(dòng)，掌握必要的法律知識(shí)（例如：網(wǎng)絡(luò)安全法、信息安全法等）7使用CSS實(shí)現(xiàn)布局網(wǎng)頁1.盒子模型與基本屬性11162.CSS3新增盒子屬性113.元素的浮動(dòng)與定位114.運(yùn)用盒子模型布局網(wǎng)頁115.彈性布局網(wǎng)頁116.網(wǎng)格布局網(wǎng)頁117.綜合應(yīng)用任務(wù)22思政：繼承中華民族優(yōu)秀傳統(tǒng)文化的擔(dān)當(dāng)意識(shí)，主動(dòng)踐行社會(huì)主義核心價(jià)值觀，形成文化自信（例如：學(xué)習(xí)強(qiáng)國、青年大學(xué)習(xí)等網(wǎng)站布局）。8使用HMTL實(shí)現(xiàn)網(wǎng)頁表單1.表單的基本概念1162.HTML5中新增的屬性與元素113.綜合應(yīng)用任務(wù)11思政：選擇符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：自由、平等、公正、法治類的頁面等）9利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果1.transform轉(zhuǎn)換1182.transitions過渡113.animation動(dòng)畫114.綜合應(yīng)用任務(wù)11思政：選擇符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：愛國、敬業(yè)、誠信、友善類的頁面等）課外項(xiàng)目訓(xùn)練合計(jì)363672本專業(yè)可采用實(shí)施理論實(shí)踐一體化教學(xué)，學(xué)時(shí)分配僅為教師教學(xué)參考依據(jù)。課時(shí)分配可根據(jù)需要進(jìn)行微笑調(diào)整，*為課外學(xué)生自學(xué)模塊，根據(jù)專業(yè)不同可進(jìn)行#模塊與*的調(diào)整。五、教學(xué)設(shè)計(jì)單元1：認(rèn)識(shí)網(wǎng)頁的設(shè)計(jì)與策劃項(xiàng)目名稱：網(wǎng)頁設(shè)計(jì)與策劃學(xué)時(shí)：4教學(xué)目標(biāo)1.了解網(wǎng)頁設(shè)計(jì)的概念與術(shù)語；2.掌握網(wǎng)頁、網(wǎng)站相關(guān)概念；3.掌握網(wǎng)頁設(shè)計(jì)的流程；4.了解HTML5的發(fā)展歷史與優(yōu)勢；5.掌握HTML5的編碼方式。教學(xué)重點(diǎn)1.激發(fā)學(xué)習(xí)興趣；2.網(wǎng)頁、網(wǎng)站相關(guān)概念，網(wǎng)頁設(shè)計(jì)的流程；3.HTML5的編碼方式。學(xué)習(xí)難點(diǎn)1.熟悉HBulider或Dreamweaver程序開發(fā)環(huán)境和程序開發(fā)的全過程；2.HBulider或Dreamweaver的調(diào)試方法。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1認(rèn)識(shí)網(wǎng)頁與網(wǎng)站網(wǎng)頁與網(wǎng)站的相關(guān)概念、網(wǎng)頁設(shè)計(jì)相關(guān)的程序設(shè)計(jì)語言、網(wǎng)頁設(shè)計(jì)的流程、HTML5的發(fā)展歷史、使用HTML5的五大原因、瀏覽器以及瀏覽器內(nèi)核、HTML5文件的編寫工具任務(wù)2體驗(yàn)HTML5的頁面特征特征使用HTML5編寫簡單的Web頁面、體驗(yàn)HTML5的頁面特征特征教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、討論法（什么是優(yōu)秀的網(wǎng)頁、如何搜索優(yōu)秀的網(wǎng)頁）、案例演示法（項(xiàng)目制作演示、優(yōu)秀網(wǎng)站搜索、IIS的安裝與配置）思政融入符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：學(xué)習(xí)強(qiáng)國、青年大學(xué)習(xí)等）備注單元2：設(shè)計(jì)與制作網(wǎng)頁效果圖項(xiàng)目名稱：設(shè)計(jì)與制作網(wǎng)頁效果圖學(xué)時(shí)：10教學(xué)目標(biāo)1.掌握Photoshop基礎(chǔ)應(yīng)用；2.掌握圖層的相關(guān)應(yīng)用與樣式；3.掌握圖層混合模式的應(yīng)用；4.掌握圖像與超級鏈接標(biāo)簽；5.掌握通道的概念與使用技巧；6.掌握蒙版的概念與使用技巧。教學(xué)重點(diǎn)1.Photoshop基礎(chǔ)應(yīng)用；2.Photoshop圖層、通道與蒙版的使用；3.網(wǎng)站效果圖的設(shè)計(jì)方法。學(xué)習(xí)難點(diǎn)1.通道的概念與使用技巧；2.通道的概念與使用技巧。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1Photoshop基礎(chǔ)應(yīng)用Photoshop基礎(chǔ)本工具的使用、圖層的使用任務(wù)2Photoshop高級應(yīng)用通道的概念與使用技巧、通道的概念與使用技巧任務(wù)3綜合應(yīng)用任務(wù)企業(yè)網(wǎng)站效果圖的設(shè)計(jì)與制作教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入選擇紅色主題與傳統(tǒng)文化符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：傳統(tǒng)文化、黨的故事、勞模精神等）備注單元3：實(shí)現(xiàn)HTML圖文混排項(xiàng)目名稱：實(shí)現(xiàn)HTML圖文混排學(xué)時(shí)：6教學(xué)目標(biāo)1.掌握HTML5的基本語法；2.掌握HTML5的基本標(biāo)簽；3.掌握文字與段落標(biāo)簽；4.掌握圖像與超級鏈接標(biāo)簽；5.掌握表格與列表。教學(xué)重點(diǎn)1.HTML5的基本結(jié)構(gòu)與標(biāo)簽；2.文字與段落標(biāo)簽、圖像與超級鏈接標(biāo)簽、表格與列表標(biāo)簽的使用。學(xué)習(xí)難點(diǎn)1.文字與段落標(biāo)簽、圖像與超級鏈接標(biāo)簽、表格與列表標(biāo)簽的使用場合；2.圖像與超級鏈接標(biāo)簽、表格與列表標(biāo)簽的參數(shù)設(shè)置。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1文字與段落標(biāo)簽的使用HTML5基本語法、HTML5標(biāo)簽及屬性、HTML5文檔頭部<head>標(biāo)簽、標(biāo)題與段落標(biāo)簽、文本的格式化標(biāo)簽、特殊字符標(biāo)簽任務(wù)2圖像與超級鏈接標(biāo)簽、表格與列表的使用圖像標(biāo)簽<img/>、超級鏈接標(biāo)簽<a>、錨點(diǎn)鏈接、影像地圖、表格標(biāo)簽、列表標(biāo)簽任務(wù)3綜合應(yīng)用任務(wù)基礎(chǔ)標(biāo)簽的綜合使用教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入選擇紅色主題與傳統(tǒng)文化符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：傳統(tǒng)文化、黨的故事、勞模精神等）備注單元4：使用HTML5新元素頁面布局項(xiàng)目名稱：使用HTML5新元素頁面布局學(xué)時(shí)：6教學(xué)目標(biāo)1.了解HTML5新標(biāo)簽；2.掌握結(jié)構(gòu)性標(biāo)簽；3.掌握級塊標(biāo)簽；4.掌握頁面交互標(biāo)簽；5.掌握行內(nèi)語義性標(biāo)簽；6.掌握HTML5的全局屬性。教學(xué)重點(diǎn)1.HTML5的結(jié)構(gòu)性標(biāo)簽；2.頁面交互標(biāo)簽、行內(nèi)語義性標(biāo)簽、行內(nèi)語義性標(biāo)簽；3.HTML5的全局屬性。學(xué)習(xí)難點(diǎn)1.結(jié)構(gòu)性標(biāo)簽的使用場合；2.HTML5的全局屬性的使用。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1HTML5結(jié)構(gòu)性標(biāo)簽與分組標(biāo)簽的使用認(rèn)知結(jié)構(gòu)性標(biāo)簽、section、aritcle、nav、aside、header、footer、figure標(biāo)簽和figcaption標(biāo)簽、hgroup標(biāo)簽、dialog標(biāo)簽任務(wù)2頁面交互標(biāo)簽、行內(nèi)語義性標(biāo)簽的使用details標(biāo)簽和summary標(biāo)簽、menu標(biāo)簽與commond標(biāo)簽、progress標(biāo)簽、meter標(biāo)簽、time標(biāo)簽、video標(biāo)簽和audio標(biāo)簽、contenteditable屬性、hidden屬性、spellcheck屬性、draggable屬性任務(wù)3綜合應(yīng)用任務(wù)HTML5的新標(biāo)簽的綜合使用教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入遴選熱愛祖國，關(guān)心社會(huì)，具有中國特色社會(huì)主義堅(jiān)定理想信念的站點(diǎn)案例（例如：抗疫精神、抗英雄等）備注單元5：使用層疊樣式表項(xiàng)目名稱：使用層疊樣式表學(xué)時(shí)：8教學(xué)目標(biāo)1.了解CSS3簡介；2.掌握CSS樣式設(shè)置規(guī)則；3.掌握CSS樣式的調(diào)用方法；4.掌握CSS基礎(chǔ)選擇器的使用方法；5.掌握CSS3新增選擇器的使用方法；6.掌握CSS的繼承與層疊性的應(yīng)用。教學(xué)重點(diǎn)1.CSS樣式設(shè)置規(guī)則與調(diào)用方法；2.CSS基礎(chǔ)選擇器的使用方法；3.CSS3新增選擇器的使用方法；學(xué)習(xí)難點(diǎn)1.CSS基礎(chǔ)選擇器的使用方法；2.CSS3新增選擇器的使用方法。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1CSS的使用初識(shí)CSS3、CSS樣式設(shè)置規(guī)則、CSS樣式的調(diào)用、CSS基礎(chǔ)選擇器任務(wù)2CSS3選擇器的使用屬性選擇器、關(guān)系選擇器、鏈接偽類選擇器、基本的結(jié)構(gòu)性偽類選擇器任務(wù)3CSS3選擇器與繼承與層疊子元素偽類偽類選擇器、偽元素選擇器、UI元素狀態(tài)偽類選擇器、CSS的繼承性、CSS的層疊性任務(wù)4綜合應(yīng)用任務(wù)CSS的選擇器的綜合使用教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入選擇符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：勞模故事、女排精神等）備注單元6：使用CSS美化頁面效果項(xiàng)目名稱：使用CSS美化頁面效果學(xué)時(shí)：8教學(xué)目標(biāo)1.掌握CSS字體屬性的編寫；2.掌握CSS文本屬性的編寫；3.掌握CSS基本的背景的編寫；4.掌握CSS3中新增的背景屬性的編寫；5.掌握CSS3中新增的漸變屬性的編寫；6.掌握CSS中列表樣式的設(shè)置。教學(xué)重點(diǎn)1.CSS字體屬性；2.CSS文本屬性；3.CSS背景屬性；4.CSS中列表樣式。學(xué)習(xí)難點(diǎn)1.CSS3新增的背景屬性的使用方法；2.CSS3新增的漸變屬性的使用方法。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1文本樣式設(shè)置設(shè)置CSS的字體屬性、font字體設(shè)置、基本文本屬性設(shè)置、文本添加陰影效果、對象內(nèi)溢出文本任務(wù)2背景屬性設(shè)置基本的背景設(shè)置、背景的復(fù)合屬性、CSS3新增背景圖像打大小屬性、CSS3新增背景圖像的坐標(biāo)屬性、CSS3新增背景圖像的裁剪區(qū)域?qū)傩浴SS3新增多背景圖像的設(shè)置任務(wù)3CSS3中新增的漸變屬性與列表屬性的設(shè)置CSS3新增線性漸變屬性、CSS3新增徑向漸變屬性、CSS3新增重復(fù)漸變、定義列表的基本樣式任務(wù)4綜合應(yīng)用任務(wù)文本、背景與列表樣式的綜合使用教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入具備社會(huì)責(zé)任感和法律意識(shí)，積極參與公益服務(wù)與勞動(dòng)，掌握必要的法律知識(shí)（例如：網(wǎng)絡(luò)安全法、信息安全法等）備注單元7：使用CSS實(shí)現(xiàn)布局網(wǎng)頁項(xiàng)目名稱：使用CSS實(shí)現(xiàn)布局網(wǎng)頁學(xué)時(shí)：10教學(xué)目標(biāo)1.掌握盒子模型的原理；2.掌握盒子模型的層次與的寬高計(jì)算；3.掌握盒子的border、margin、padding的使用；4.掌握盒子的CSS3新增屬性；5.掌握元素的類型與轉(zhuǎn)換；6.掌握浮動(dòng)屬性、清除屬性、溢出處理；7.掌握元素的定位方式。教學(xué)重點(diǎn)1.盒子模型的原理；2.盒子border、margin、padding的使用；3.盒子的CSS3新增屬性；4.元素的類型與轉(zhuǎn)換；5.浮動(dòng)屬性、清除屬性、溢出處理；6.元素的定位方式。學(xué)習(xí)難點(diǎn)1.盒子的CSS3新增屬性；2.元素的類型與轉(zhuǎn)換；3.浮動(dòng)屬性、清除屬性、溢出處理；4.元素的定位方式。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1盒子模型與基礎(chǔ)屬性初識(shí)盒子模型、初識(shí)盒子模型、邊框border屬性、邊距屬性任務(wù)2盒子模型的高級屬性CSS3新增圓角邊框、CSS3新增圖片邊框、CSS3新增陰影效果、CSS3新增box-sizing屬性任務(wù)3元素的浮動(dòng)與定位元素的類型、元素的類型轉(zhuǎn)換、浮動(dòng)屬性float、元素的定位、overflow溢出屬性任務(wù)4盒模型網(wǎng)頁布局應(yīng)用運(yùn)用盒模型網(wǎng)頁布局任務(wù)5彈性布局網(wǎng)頁應(yīng)用Flex彈性網(wǎng)頁布局任務(wù)6綜合應(yīng)用任務(wù)運(yùn)用盒模型網(wǎng)頁布局教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入思政：繼承中華民族優(yōu)秀傳統(tǒng)文化的擔(dān)當(dāng)意識(shí)，主動(dòng)踐行社會(huì)主義核心價(jià)值觀，形成文化自信（例如：學(xué)習(xí)強(qiáng)國、青年大學(xué)習(xí)等網(wǎng)站布局）。備注單元8：使用HMTL實(shí)現(xiàn)網(wǎng)頁表單項(xiàng)目名稱：使用HMTL實(shí)現(xiàn)網(wǎng)頁表單學(xué)時(shí)：6教學(xué)目標(biāo)1.了解表單基本概念；2.掌握表單的組成；3.掌握新增表單input元素的使用方法；4.掌握HTML5表單元素屬性的使用方法；5.掌握新增的表單元素。教學(xué)重點(diǎn)1.表單基本概念；2.表單的組成；3.新增表單input元素的使用方法；4.HTML5表單元素屬性的使用方法；5.掌握新增的表單元素。6.元素的定位方式。學(xué)習(xí)難點(diǎn)1.HTML5表單元素屬性的使用方法；2.掌握新增的表單元素。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1盒子模型與基礎(chǔ)屬性表單簡介、表單標(biāo)簽、表單域、表單按鈕、HTML5新增的input輸入類型任務(wù)2盒子模型的高級屬性form新增autocomplete屬性、form新增autocomplete屬性、autofocus屬性、multiple屬性、placeholder屬性、required屬性、新增datalist元素、新增keygen元素任務(wù)3綜合應(yīng)用任務(wù)綜合運(yùn)用表單元素設(shè)計(jì)表單教學(xué)方法建議教授法（基礎(chǔ)知識(shí)）、案例演示法（項(xiàng)目制作演示）、項(xiàng)目教學(xué)法（項(xiàng)目制作）思政融入思政：選擇符合社會(huì)主義核心價(jià)值觀的站點(diǎn)案例（例如：自由、平等、公正、法治類的頁面等）備注單元9：利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果項(xiàng)目名稱：運(yùn)用特殊效果學(xué)時(shí)：8教學(xué)目標(biāo)1.掌握CSS3多列布局的方法；2.掌握CSS3常用的transform轉(zhuǎn)換方法；3.掌握CSS3中transitions過渡的使用方法；4.掌握animation動(dòng)畫的使用方法。教學(xué)重點(diǎn)1.CSS3多列布局的方法；2.CSS3常用的transform轉(zhuǎn)換方法；3.CSS3中transitions過渡的使用方法；4.animation動(dòng)畫的使用方法。學(xué)習(xí)難點(diǎn)1.CSS3中transitions過渡的使用方法；2.animation動(dòng)畫的使用方法。子任務(wù)主要教學(xué)內(nèi)容任務(wù)1CSS3轉(zhuǎn)換transform簡介、移動(dòng)方法translate()、縮放方法scale()、縮放方法scale()、斜切方法skew()、斜切方法skew()、斜切方法skew()、3D變形常用的函數(shù)、3D變形及transform任務(wù)2tr