《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》課程標(biāo)準(zhǔn)

《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程》課程標(biāo)準(zhǔn)課程代碼：學(xué)時(shí)：64學(xué)分：4課程性質(zhì)：專(zhuān)業(yè)必修課適用專(zhuān)業(yè)：計(jì)應(yīng)專(zhuān)業(yè)課程歸屬：編寫(xiě)執(zhí)筆人及編寫(xiě)日期：2022年2月審定負(fù)責(zé)人及審定日期：系主任及審定日期：開(kāi)設(shè)時(shí)間：第2學(xué)期第一部分、課程定位一、課程性質(zhì)本課程是計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)一門(mén)專(zhuān)業(yè)必修課程二、課程性質(zhì)與目標(biāo)《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》是面向計(jì)算機(jī)相關(guān)專(zhuān)業(yè)的一門(mén)專(zhuān)業(yè)基礎(chǔ)課，涉及網(wǎng)頁(yè)基礎(chǔ)、HTML標(biāo)記、CSS樣式、網(wǎng)頁(yè)布局、變形與動(dòng)畫(huà)等內(nèi)容。通過(guò)本課程的學(xué)習(xí)，學(xué)生能夠了解網(wǎng)頁(yè)web發(fā)展歷史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)布局效果及變形和動(dòng)畫(huà)效果，學(xué)會(huì)制作各種企業(yè)、門(mén)戶(hù)、電商類(lèi)網(wǎng)站。三、前導(dǎo)、后續(xù)課程（1）前導(dǎo)課程計(jì)算機(jī)應(yīng)用基礎(chǔ)（2）后續(xù)課程JavaScript編程、Vue.js、微信小程序開(kāi)發(fā)第二部分、課程設(shè)計(jì)一、基本理念高職教育的集中實(shí)踐教學(xué)環(huán)節(jié)需明確必要的理論知識(shí)的深化與知識(shí)層面的拓展，不能局限于單純的技能訓(xùn)練。單純的技能訓(xùn)練不是提高高等職業(yè)教育的理想課程。以能力的培養(yǎng)為重點(diǎn)，以就業(yè)為導(dǎo)向，培養(yǎng)學(xué)生具備職業(yè)崗位所需的職業(yè)能力，職業(yè)生涯發(fā)展所需的能力和終身學(xué)習(xí)的能力，實(shí)現(xiàn)一站式教學(xué)理念。1二、課程設(shè)計(jì)思路（1）以職業(yè)崗位和后續(xù)課程需求確定課程目標(biāo)首先組建專(zhuān)業(yè)必修課、專(zhuān)業(yè)教師、企業(yè)專(zhuān)家三方人員組成的課程開(kāi)發(fā)團(tuán)隊(duì)，進(jìn)行課程服務(wù)專(zhuān)業(yè)的人才培養(yǎng)目標(biāo)分析，確定計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)的崗位面向；進(jìn)而確定本課程所織成的具體核心課程有哪些？同時(shí)結(jié)合行業(yè)對(duì)崗位任職的具體標(biāo)準(zhǔn)，確定課程的具體目標(biāo)。（2）依據(jù)職業(yè)標(biāo)準(zhǔn)，通過(guò)對(duì)所服務(wù)的后續(xù)課程和必修課程本身分析，以專(zhuān)業(yè)基礎(chǔ)課與學(xué)習(xí)領(lǐng)域課程聚合點(diǎn)構(gòu)建教學(xué)內(nèi)容通過(guò)對(duì)職業(yè)標(biāo)準(zhǔn)進(jìn)行剖析和本門(mén)課程所服務(wù)的后續(xù)課程本身進(jìn)行分析，得出后續(xù)專(zhuān)業(yè)課程負(fù)載點(diǎn)與專(zhuān)業(yè)基礎(chǔ)課程支撐點(diǎn)存在聚合，將這些聚合點(diǎn)作為教學(xué)內(nèi)容選擇、實(shí)訓(xùn)任務(wù)確定的依據(jù)。（3）根據(jù)教學(xué)內(nèi)容需求和學(xué)生學(xué)情的分析設(shè)計(jì)教學(xué)方法和手段根據(jù)教學(xué)內(nèi)容需求，以及根據(jù)學(xué)生形象思維強(qiáng)、邏輯思維相對(duì)弱的現(xiàn)狀，設(shè)計(jì)案例教學(xué)法、引導(dǎo)文教法等，應(yīng)用項(xiàng)目應(yīng)用設(shè)計(jì)等教學(xué)手段服務(wù)抽象的理論教學(xué)。（4）以?xún)?yōu)質(zhì)的教學(xué)資源和優(yōu)秀障。開(kāi)發(fā)與相關(guān)專(zhuān)業(yè)課程銜接的特色教材，開(kāi)發(fā)網(wǎng)頁(yè)制作的實(shí)訓(xùn)指導(dǎo)的教學(xué)團(tuán)隊(duì)，為課程實(shí)施和后續(xù)課程服務(wù)提供保書(shū)，需求同時(shí)熟悉專(zhuān)業(yè)必修課和相關(guān)專(zhuān)業(yè)課程的優(yōu)秀教學(xué)團(tuán)隊(duì)，為課程實(shí)施和后續(xù)課程服務(wù)提供有力保障。第三部分、課程目標(biāo)《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)》主要包括HTML5入門(mén)基本內(nèi)容、CSS樣式表、網(wǎng)站的總體設(shè)計(jì)等內(nèi)容，使學(xué)生能熟練運(yùn)用HTML中的文字、圖像、列表、鏈接、表格、表單、多媒體等元素設(shè)計(jì)出簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)；熟練操作應(yīng)用任一種支持HTML5的Web集成開(kāi)發(fā)環(huán)境，如：Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等，進(jìn)行網(wǎng)站布局的實(shí)現(xiàn)，能獨(dú)立設(shè)計(jì)小型WEB站點(diǎn)。一、知識(shí)目標(biāo)：1．了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)；2

2．掌握在網(wǎng)頁(yè)中插入文本、列表、圖像、超鏈接的方法；3．掌握表格的設(shè)計(jì)方法；4、掌握表單的設(shè)計(jì)方法5．掌握DIV+CSS布局技術(shù)；6．掌握CSS美化網(wǎng)頁(yè)的方法；二、職業(yè)技能目標(biāo)：1．能熟練運(yùn)用Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等中任意一款應(yīng)用軟件；2.熟練掌握在網(wǎng)頁(yè)中加入文字、列表、圖像、超鏈接等元素的方法3.學(xué)會(huì)制作表格4.學(xué)會(huì)制作表單5．學(xué)會(huì)用DIV+CSS布局網(wǎng)頁(yè)的方法；6.學(xué)會(huì)運(yùn)用CSS對(duì)網(wǎng)頁(yè)元素進(jìn)行格式設(shè)計(jì)；三、職業(yè)素養(yǎng)目標(biāo)：1．具有勤奮學(xué)習(xí)的態(tài)度，嚴(yán)謹(jǐn)求實(shí)、創(chuàng)新的工作作風(fēng)；2．具有良好的心理素質(zhì)和職業(yè)道德素養(yǎng)；3．具有高度責(zé)任心和良好的團(tuán)隊(duì)合作精神；4．具有科學(xué)思維方式和一定的唯物辯證法思想；5．具有較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)。四、職業(yè)技能證書(shū)考核要求：職業(yè)技能認(rèn)證：web前端開(kāi)發(fā)-1+X技能證書(shū)（初級(jí)）考核要求：自愿第四部分、課程內(nèi)容一、理論教學(xué)部分本課程主要講解HTML5入門(mén)基本內(nèi)容、CSS樣式以及網(wǎng)站的建設(shè)等知識(shí)。1.網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)2.網(wǎng)頁(yè)中使用文本、列表、圖像、超鏈接的方法3.表格的制作方法4.表單的制作方法3

5.DIV+CSS布局網(wǎng)頁(yè)的方法6.用CSS美化網(wǎng)頁(yè)的方法7.CSS3高級(jí)應(yīng)用8.響應(yīng)式Web設(shè)計(jì)中的媒體查詢(xún)、流式布局、彈性盒布局二、實(shí)踐教學(xué)內(nèi)容與要求：1．站點(diǎn)的創(chuàng)建要求學(xué)生掌握在Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等任意一款應(yīng)用軟件中建立站點(diǎn)的能力。2．HTML語(yǔ)言圖文混排的網(wǎng)頁(yè)設(shè)計(jì)要求學(xué)生能夠使用HTML語(yǔ)言及標(biāo)簽屬性進(jìn)行網(wǎng)頁(yè)的圖文混排網(wǎng)頁(yè)的設(shè)計(jì)。3．使用CSS樣式美化網(wǎng)頁(yè)格式使用CSS樣式對(duì)網(wǎng)頁(yè)進(jìn)行美化4．使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局能夠利用DIV+CSS布局，結(jié)合實(shí)例設(shè)計(jì)網(wǎng)頁(yè)。三、教材主要內(nèi)容及要求第一章HTML概述學(xué)習(xí)單元HTML概述1.了解HTML5發(fā)展歷程2.理解HTML5瀏覽器支持情況學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目標(biāo)3.熟悉HTML5基本語(yǔ)法,掌握HTML5語(yǔ)法新特性。4.掌握HTML5相關(guān)圖像、超鏈接標(biāo)記及屬性，能夠制作簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)HTML5發(fā)展歷史HTML5的優(yōu)勢(shì)√√HTML5瀏覽器支持情況√創(chuàng)建第一個(gè)HTML5頁(yè)面√HTML5文檔基本格式HTML5語(yǔ)法√√√學(xué)習(xí)內(nèi)容HTML標(biāo)記√√√標(biāo)記的屬性HTML5文檔頭部相關(guān)標(biāo)記標(biāo)題和段落標(biāo)記文本格式化標(biāo)記特殊字符標(biāo)記常用圖像格式√√√4圖像標(biāo)記<img/>絕對(duì)路徑和相對(duì)路徑創(chuàng)建超鏈接√√√√錨點(diǎn)鏈接√第二章HTML5標(biāo)簽及屬性學(xué)習(xí)單元HTML5標(biāo)簽及屬性學(xué)時(shí)6學(xué)時(shí)1.掌握結(jié)構(gòu)元素的使用，可以使頁(yè)面分區(qū)更明確。2.理解分組元素的使用，能夠建立簡(jiǎn)單的標(biāo)題組。學(xué)習(xí)目標(biāo)3.掌握頁(yè)面交互元素的使用，能夠?qū)崿F(xiàn)簡(jiǎn)單的交互效果。4.理解文本層次語(yǔ)義元素，能夠在頁(yè)面中突出所標(biāo)記5.掌握全局屬性的應(yīng)用，能夠使頁(yè)面元素實(shí)現(xiàn)相應(yīng)的操作。的文本內(nèi)容。知識(shí)點(diǎn)了解掌握重點(diǎn)√難點(diǎn)ul元素ol元素√dl元素√列表的嵌套應(yīng)用header元素nav元素√√√√√√√√√√√√article元素section元素footer元素figure和figcaption元素hgroup元素details和summary元素progress元素meter元素time元素學(xué)習(xí)內(nèi)容√√√√√√√mark元素cite元素draggable屬性hidden屬性spellcheck屬性contenteditable屬性第三章CSS3入門(mén)學(xué)習(xí)單元CSS3入門(mén)學(xué)時(shí)4學(xué)時(shí)1.了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。2.掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)記樣式。學(xué)習(xí)目標(biāo)3.熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。4.理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)5CSS3概述CSS3發(fā)展歷史√√√CSS3瀏覽器支持情況CSS樣式規(guī)則√引入CSS樣式表CSS基礎(chǔ)選擇器字體樣式屬性√√√√√√文本外觀屬性CSS層疊性和繼承性CSS優(yōu)先級(jí)√√√第四章CSS3選擇器學(xué)習(xí)單元CSS3選擇器學(xué)時(shí)6學(xué)時(shí)1.掌握CSS3中新增加的屬性選擇器，能夠運(yùn)用屬性選擇器為頁(yè)面中的元素添加樣式。2.理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)系。3.掌握常用的結(jié)構(gòu)化偽類(lèi)選擇器，能夠?yàn)橄嗤Q(chēng)的元素定義不同樣式。4.掌握偽元素選擇器的使用，能夠在頁(yè)面中插入所需要的文字或圖片內(nèi)容。5.掌握CSS偽類(lèi)，會(huì)使用CSS偽類(lèi)實(shí)現(xiàn)超鏈接特效。學(xué)習(xí)目標(biāo)知識(shí)點(diǎn)了解掌握√重點(diǎn)難點(diǎn)E[att^=value]屬性選擇器E[att$=value]屬性選擇器E[att*=value]屬性選擇器子代選擇器（>）兄弟選擇器（+、~）:root選擇器√√√√√:not選擇器√√:only-child選擇器:first-child和:last-child選√√學(xué)習(xí)內(nèi)容擇器:nth-child(n)√和:nth-last-child(n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器√:empty選擇器:target選擇器:before選擇器:after選擇器√√√√√√√鏈接偽類(lèi)第五章CSS盒子模型學(xué)習(xí)單元CSS盒子模型學(xué)時(shí)8學(xué)時(shí)61.掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果。2.掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。學(xué)習(xí)目標(biāo)3.理解漸變屬性的原理，能夠設(shè)置漸變背景。4.熟悉CSS控制列表樣式的方式，能夠運(yùn)用背景圖像定義列表項(xiàng)目符號(hào)。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)認(rèn)識(shí)盒子模型<div>標(biāo)記√√盒子的寬與高√邊框?qū)傩浴踢吘鄬傩浴蘠ox-shadow屬性box-sizing屬性設(shè)置背景顏色設(shè)置背景圖像背景與圖片不透明度的設(shè)√√√√√√√學(xué)習(xí)內(nèi)容置設(shè)置背景圖像平鋪設(shè)置背景圖像的位置設(shè)置背景圖像固定設(shè)置背景圖像的大小設(shè)置背景的顯示區(qū)域設(shè)置背景圖像的裁剪區(qū)域設(shè)置多重背景圖像背景復(fù)合屬性線(xiàn)性漸變√√√√√√√√√徑向漸變重復(fù)漸變√第六章元素的浮動(dòng)與定位學(xué)習(xí)單元元素的1.理解元素的學(xué)習(xí)目標(biāo)2.熟悉清除浮動(dòng)的方法，3.掌握元素的定浮動(dòng)與定位學(xué)時(shí)4學(xué)時(shí)浮動(dòng)，能夠?yàn)樵卦O(shè)置浮動(dòng)樣式?？梢允褂貌煌椒ㄇ宄?dòng)。位，能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)元素的浮動(dòng)屬性float√√√清除浮動(dòng)overflow屬性√√元素的定位屬性學(xué)習(xí)內(nèi)容靜態(tài)定位static√相對(duì)定位relative絕對(duì)定位absolute固定定位fixed√√√√√√z-index層疊等級(jí)屬性7元素的類(lèi)型<span>標(biāo)記√√元素的轉(zhuǎn)換√第七章表單的應(yīng)用學(xué)習(xí)單元表單的應(yīng)用1.了解表單功能，能夠快速創(chuàng)建表單。學(xué)習(xí)目標(biāo)2.掌握表單相關(guān)元素，能夠準(zhǔn)確定義不同的表單控件。學(xué)時(shí)6學(xué)時(shí)3.掌握表單樣式的控制，能夠美化表單界面。知識(shí)點(diǎn)了解√掌握重點(diǎn)難點(diǎn)表單的構(gòu)成創(chuàng)建表單√表單屬性√Input元素的type屬性√√Input元素的其他屬性√√√學(xué)習(xí)內(nèi)容textarea元素select元素datalist元素keygen元素output元素CSS控制表單樣式√√√√√第八章HTML5音視頻技術(shù)學(xué)習(xí)單元HTML5音視頻技術(shù)學(xué)時(shí)4學(xué)時(shí)1.熟悉HTML5多媒體特性。2.了解HTML5支持的學(xué)習(xí)目標(biāo)3.掌握HTML5中視頻的相關(guān)屬性，能夠在HTML5頁(yè)面中添加視頻文件。4.掌握HTML5中音頻的相關(guān)屬性，能夠在HTML5頁(yè)面中添加音頻文件。5.了解HTML5中視頻、音頻的音頻和視頻格式。一些常見(jiàn)操作，并能夠應(yīng)用到網(wǎng)頁(yè)制作中。知識(shí)點(diǎn)了解√掌握重點(diǎn)難點(diǎn)HTML5多媒體的特性視頻和音頻編解碼器多媒體的格式√√支持視頻和音頻的瀏覽器在HTML5中嵌入視頻在HTML5中嵌入音頻音視頻中的source元素調(diào)用網(wǎng)頁(yè)多媒體文件CSS控制視頻的寬高√√√√√學(xué)習(xí)內(nèi)容√√√視頻和音頻的方法和事件√HTML5音視頻發(fā)展趨勢(shì)√第九章CSS3高級(jí)應(yīng)用8學(xué)習(xí)單元CSS3高級(jí)應(yīng)用1.理解過(guò)渡屬性，能夠控制過(guò)渡時(shí)間、動(dòng)畫(huà)快慢等常見(jiàn)過(guò)渡效果。學(xué)習(xí)目標(biāo)2.掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。3.掌握CSS3中的動(dòng)畫(huà)，能夠熟練制作網(wǎng)頁(yè)中常見(jiàn)的動(dòng)畫(huà)效果。學(xué)時(shí)8學(xué)時(shí)知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)transition-property屬性transition-duration屬性transition-timing-function屬性√√√transition-delay屬性transition屬性認(rèn)識(shí)transform√√√2D轉(zhuǎn)換√√√√3D轉(zhuǎn)換學(xué)習(xí)內(nèi)容@keyframes√√√√animation-name屬性animation-duration屬性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性√√animation-direction屬性animation屬性√√第十章跨平臺(tái)移動(dòng)Web技術(shù)學(xué)習(xí)單元跨平臺(tái)移動(dòng)Web技術(shù)1.掌握站點(diǎn)的學(xué)時(shí)12學(xué)時(shí)建立，能夠建立規(guī)范的站點(diǎn)。學(xué)習(xí)目標(biāo)2.完成首頁(yè)面的制作，并能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫(huà)效果。知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)√響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介響應(yīng)式Web設(shè)計(jì)相關(guān)技術(shù)√CSS2媒體查詢(xún)√√CSS3媒體查詢(xún)的用法媒體查詢(xún)常用尺寸及代碼√√√學(xué)習(xí)內(nèi)容創(chuàng)建流式布局CSS3流式排版Flexbox簡(jiǎn)介基本概念√√√√伸縮容器的屬性√√√√伸縮項(xiàng)目的屬性四、學(xué)時(shí)分配9課時(shí)分配表課時(shí)分配序號(hào)課程內(nèi)容理論課習(xí)題課實(shí)訓(xùn)課其它共計(jì)1HTML概述332342324431332342324833662HTML5標(biāo)簽及屬性CSS3入門(mén)3454CSS3選擇器CSS盒子模型686元素的浮動(dòng)與定位7表單的應(yīng)用4689HTML5音視頻技術(shù)CSS3高級(jí)應(yīng)用4810跨平臺(tái)移動(dòng)Web技術(shù)1264合計(jì)第五部分、課程實(shí)施一、教學(xué)組織在教學(xué)過(guò)程中充分體現(xiàn)學(xué)生的主體性。具體體現(xiàn)在以下2個(gè)模塊的教學(xué)模式上：(1)基礎(chǔ)模塊：理論講授→小實(shí)例驅(qū)動(dòng)→學(xué)生自主實(shí)踐教師巡回指導(dǎo)→教師補(bǔ)授→綜合實(shí)例驅(qū)動(dòng)→學(xué)生自主練習(xí)教師巡回指導(dǎo)→展示部分學(xué)生作品師生共同欣賞、