HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程教學(xué)大綱

1、?HTML5+CSS3站設(shè)計(jì)根底教程?課程教學(xué)大綱課程英文名稱課程編號(hào)：202101210011學(xué)分：5學(xué)分學(xué)時(shí)：76學(xué)時(shí)其中：講課學(xué)時(shí)：47學(xué)時(shí)上機(jī)學(xué)時(shí)：26學(xué)時(shí)先修課程：計(jì)算機(jī)根底、計(jì)算機(jī)網(wǎng)絡(luò)、計(jì)算機(jī)應(yīng)用后續(xù)課程：UI設(shè)計(jì)、JavaScript網(wǎng)頁(yè)特效適用專業(yè)：信息技術(shù)及其計(jì)算機(jī)相關(guān)專業(yè)開課部門：計(jì)算機(jī)系一、課程的性質(zhì)與目標(biāo)?HTML5+CSS3網(wǎng)站設(shè)計(jì)根底教程?是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)根底課,涉及網(wǎng)頁(yè)根底、HTML標(biāo)記、CSS樣式、網(wǎng)頁(yè)布局、變形與動(dòng)畫等內(nèi)容,通過(guò)本課程的學(xué)習(xí),學(xué)生能夠了解網(wǎng)頁(yè)web開展歷史及其未來(lái)方向,熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)布局效果及變形和動(dòng)畫效果

2、,學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站.二、課程設(shè)計(jì)理念與思路課程設(shè)計(jì)理念：高職教育的集中實(shí)踐教學(xué)環(huán)節(jié)需明確必要的理論知識(shí)的生化與知識(shí)層面的拓展,不能局限于單純的技能練習(xí).單純的技能練習(xí)不是提升高等職業(yè)教育的理想課程.以水平的培養(yǎng)為重點(diǎn),以就業(yè)為導(dǎo)向,培養(yǎng)學(xué)生具備職業(yè)崗位所需的職業(yè)水平,職業(yè)生涯發(fā)展所需的水平和終身學(xué)習(xí)的水平,實(shí)現(xiàn)一站式教學(xué)理念.課程設(shè)計(jì)思路：基于工作過(guò)程開發(fā)課程內(nèi)容,以行動(dòng)為導(dǎo)向進(jìn)行教學(xué)內(nèi)容設(shè)計(jì),以學(xué)生為主體,以案例工程實(shí)訓(xùn)為手段,設(shè)計(jì)除理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系.教學(xué)整體設(shè)計(jì)“以職業(yè)技能培養(yǎng)為目標(biāo),以案例工程任務(wù)實(shí)現(xiàn)為載體、理論學(xué)習(xí)與時(shí)間操作相結(jié)合.三、教學(xué)條件要

3、求開發(fā)工具：DreamweaverCS6四、課程的主要內(nèi)容及根本要求第一章初識(shí)HTML5學(xué)習(xí)單元初識(shí)HTML5學(xué)時(shí)10學(xué)時(shí)學(xué)習(xí)目標(biāo)1, 了解HTML5開展歷程2, 理解HTML5瀏覽器支持情況3, 熟悉HTML5根本語(yǔ)法,掌握HTML5語(yǔ)法新特性.4, 掌握HTML5相關(guān)標(biāo)記及屬性,能夠制作簡(jiǎn)單的網(wǎng)貝貝囿.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)HTML5開展歷史VHTML5的優(yōu)勢(shì)VHTML5瀏覽器支持情況V創(chuàng)立第一個(gè)HTML5貝囿VHTML5文檔根本格式VHTML5語(yǔ)法VHTML標(biāo)記V標(biāo)記的屬性VHTML5文檔頭部相關(guān)標(biāo)記V標(biāo)題和段落標(biāo)記V文本格式化標(biāo)記V特殊字符標(biāo)記V常用圖像格式V7圖像標(biāo)記<

4、img/>V絕對(duì)路徑和相對(duì)路徑V7創(chuàng)立超鏈接V錨點(diǎn)鏈接V7第二章HTML5頁(yè)面元素及屬性學(xué)習(xí)單元HTML5頁(yè)面兀素及屬性學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目標(biāo)1, 掌握結(jié)構(gòu)兀素的使用,可以使頁(yè)面分區(qū)更明確.2, 理解分組元素的使用,能夠建立簡(jiǎn)單的標(biāo)題組.3, 掌握頁(yè)面交互兀素的使用,能夠?qū)崿F(xiàn)簡(jiǎn)單的交互效果.4, 理解文本層次語(yǔ)義兀素,能夠在頁(yè)面中突出所標(biāo)記的文本內(nèi)容.5,掌握全局屬性日勺應(yīng)月能夠使貝面R素實(shí)現(xiàn)相應(yīng)時(shí)操作.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)ul兒系Vol兒條Vdl兀系V7列表的嵌套應(yīng)用V7V7header幾素Vnav兒素Varticle幾素Vsection兒素Vfooter幾素Vfigure和fi

5、gcaption幾素Vhgroup兒素Vdetails和summary幾素Vprogress幾素Vmeter幾素V7time兒素Vmark兒素Vcite幾素Vdraggable屬性Vhidden屬性Vspellcheck屬性Vcontenteditable屬性V7第三章CSS3入門學(xué)習(xí)單元CSS3入門學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 了解CSS3的開展歷史以及主流瀏覽器的支持情況.2. 掌握CSS根底選擇器,能夠運(yùn)用CSS選擇器定義標(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)CSS3概述VCS

6、S3開展歷史VCSS3瀏覽器支持情況V7CSS樣式規(guī)那么V弓1人CSS樣式表VCSS根底選擇器V字體樣式屬性VV文本外觀屬性V7VCSS層疊性和繼承性VCSS優(yōu)先級(jí)V7V7第四章CSS3選擇器學(xué)習(xí)單元CSS3選擇器學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1.掌握CSS3中新增加的屬性選擇器,能夠運(yùn)用屬性選擇器為頁(yè)面中的兀素添加樣式.2. 理解關(guān)系選擇器的用法,能夠準(zhǔn)確判斷元素與元素間的關(guān)系.3. 掌握常用的結(jié)構(gòu)化偽類選擇器,能夠?yàn)橄嗤Q的兀素定義不問(wèn)樣式.4. 掌握偽兀素選擇器的使用,能夠在頁(yè)面中插入所需要的文字或圖片內(nèi)容.5. 掌握CSS偽類,會(huì)使用CSS偽類實(shí)現(xiàn)超鏈接特效.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)Eat

7、tA=value屬性選擇器VEatt$=value屬性選擇器VEatt*=value屬性選擇器V子代選擇器V兄弟選擇器+、V:root選擇器V:not選擇器V:only-child選擇器V:first-child和:last-child選擇器V:nth-child(n)和:nth-last-child(n)選擇器VV:nth-of-type(n)和:nth-last-of-type(n)選擇器V:empty選擇器V:target選擇器V:before選擇器VV:after選擇器V7V7鏈接偽類V7第五章CSS盒子模型學(xué)習(xí)單元CSS盒子模型學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 掌握盒子的相關(guān)屬性,能夠制作常見(jiàn)

8、的盒子模型效果.2. 掌握背景屬性的設(shè)置方法,能夠設(shè)置背景顏色和圖像.3. 理解漸變屬性的原理,能夠設(shè)置漸變背景.4. 熟悉CSS限制列表樣式的方式,能夠運(yùn)用背景圖像定義列表工程符號(hào).學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)熟悉盒子模型<div>標(biāo)記V盒子的寬與局V邊框?qū)傩訴邊距屬性V7box-shadow屬性VV7box-sizing屬性V設(shè)置背景顏色V設(shè)置背景圖像V背景與圖片不透明度的設(shè)置V設(shè)置背景圖像平鋪V設(shè)置背景圖像的位置V7設(shè)置背景圖像固定V設(shè)置背景圖像的大小V設(shè)置背景的顯示區(qū)域V設(shè)置背景圖像的裁剪區(qū)域V設(shè)置多重背景圖像V背景復(fù)合屬性V線性漸變V徑向漸變V7重復(fù)漸變第六章浮動(dòng)與定位

9、學(xué)習(xí)單元浮動(dòng)與定位學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 理解兀素的浮動(dòng),能夠?yàn)樨Ｋ卦O(shè)置浮動(dòng)樣式.2. 熟悉去除浮動(dòng)的方法,可以使用不同方法去除浮動(dòng).3. 掌握元素的定位,能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)兀素的浮動(dòng)屬性floatVV去除浮動(dòng)Voverflow屬性V兀素的定位屬性V靜態(tài)定位static相對(duì)定位relativeVV絕對(duì)定位absoluteVV7固定定位fixedVz-index層疊等級(jí)屬性V兀素的類型V<span>標(biāo)記V7兀素的轉(zhuǎn)換V7第七章表單的應(yīng)用學(xué)習(xí)單元表單的應(yīng)用學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 了解表單功能,能夠快速創(chuàng)立表單.2. 掌握表單相關(guān)兀素,能夠準(zhǔn)確定

10、義不問(wèn)的表單控件.3.掌握表單樣式的限制,能夠美化表單界面.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)表單的構(gòu)成V創(chuàng)立表單V表單屬性VInput兀素的type屬性VVInput兀素的其他屬性Vtextarea兒素Vselect幾素Vdatalist幾素Vkeygen兒素V7output兒素V7CSS限制表單樣式V7V7第八章多媒體技術(shù)學(xué)習(xí)單元多媒體技術(shù)學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 熟悉HTML5多媒體特性.2. 了解HTML5支持的音頻和視頻格式.3. 掌握HTML5中視頻的相關(guān)屬性,能夠在HTML5頁(yè)面中添加視頻文件.4. 掌握HTML5中音頻的相關(guān)屬性,能夠在HTML5頁(yè)面中添加音頻文件.5. 了解HTML

11、5中視頻、音頻的一些常見(jiàn)操作,并能夠應(yīng)用到網(wǎng)頁(yè)制作中.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)HTML5多媒體的特性V視頻和音頻編解碼器V多媒體的格式V支持視頻和音頻的瀏覽器V在HTML5中嵌入視頻VV在HTML5中嵌入音頻V7V首視頻中的source兀素V調(diào)用網(wǎng)頁(yè)多媒體文件VCSS限制視頻的覽圖視頻和音頻的方法和事件VV7HTML5音視頻開展趨勢(shì)V7第九章CSS3高級(jí)應(yīng)用學(xué)習(xí)單元CSS3高級(jí)應(yīng)用學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 理解過(guò)渡屬性,能夠限制過(guò)渡時(shí)間、動(dòng)畫快慢等常見(jiàn)過(guò)渡效果.2. 掌握CSS3中的變形屬性,能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果.3.掌握CSS3中的動(dòng)回,能夠熟練制作網(wǎng)貝中常見(jiàn)的動(dòng)回效果.學(xué)習(xí)內(nèi)

12、容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)transition-property屬性Vtransition-duration屬性Vtransition-timing-function屬性Vtransition-delay屬性Vtransition屬性V熟悉transformV2D轉(zhuǎn)換VV3D轉(zhuǎn)換VV7keyframesVanimation-name屬性Vanimation-duration屬性Vanimation-timing-function屬性Vanimation-delay屬性Vanimation-iteration-count屬性Vanimation-direction屬性V7animation屬性V7

13、第十章實(shí)戰(zhàn)開發(fā)一制作電商網(wǎng)站首頁(yè)面學(xué)習(xí)單元實(shí)戰(zhàn)開發(fā)一制作電商網(wǎng)站首頁(yè)面學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目標(biāo)1. 掌握站點(diǎn)的建立,能夠建立標(biāo)準(zhǔn)的站點(diǎn).2. 完成首頁(yè)面的制作,并能夠?qū)崿F(xiàn)簡(jiǎn)單的CSS3動(dòng)畫效果.學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)建立站點(diǎn)V站點(diǎn)初始化設(shè)置V效果圖分析V貝囿布局V7定義公共樣式V制作頭部、導(dǎo)航及視頻內(nèi)容VV制作內(nèi)容局部新品VV制作內(nèi)容局部試裝VV制作內(nèi)容局部評(píng)測(cè)制作腳部信息注冊(cè)及版權(quán)信息局部VV7V7五、學(xué)時(shí)分配章目講課上機(jī)合計(jì)第一章初識(shí)HTML56學(xué)時(shí)4學(xué)時(shí)10學(xué)時(shí)第二章HTML5蟲臉?biāo)丶皩傩?學(xué)時(shí)2學(xué)時(shí)6學(xué)時(shí)第三章CSS3入門5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第四章CSS3選擇器5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第五章CSS盒子模型5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第六章浮動(dòng)與定位5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第七章表單的應(yīng)用5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第八章多媒體技術(shù)4學(xué)時(shí)2學(xué)時(shí)6學(xué)時(shí)第九章CSS3高級(jí)應(yīng)用5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第十章實(shí)戰(zhàn)開發(fā)一制作電商網(wǎng)站首頁(yè)面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)合計(jì)47學(xué)時(shí)29學(xué)時(shí)76學(xué)時(shí)六、考核模式與成績(jī)?cè)u(píng)定方法本課程為測(cè)試課程,期末測(cè)試采用百分制的閉卷測(cè)試模式.學(xué)生的測(cè)試成績(jī)由平時(shí)成績(jī)30%和期末測(cè)試70%組成,其中,平時(shí)成績(jī)包括出勤5%、作業(yè)5%、上機(jī)成績(jī)20%.七、選用教材和主要參考書本大綱是根據(jù)教材?HTML5+CSS