【參考】《HTML5 CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》-教學(xué)大綱

1、?HTML5+CSS3網(wǎng)站設(shè)計(jì)根底教程?課程教學(xué)大綱課程英文名稱課程編號：201601210011學(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è)：信息技術(shù)及其計(jì)算機(jī)相關(guān)專業(yè)開課部門：計(jì)算機(jī)系一、課程的性質(zhì)與目的?HTML5+CSS3網(wǎng)站設(shè)計(jì)根底教程?是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)根底課，涉及網(wǎng)頁根底、HTML標(biāo)記、CSS款式、網(wǎng)頁布局、變形與動(dòng)畫等內(nèi)容，通過本課程的學(xué)習(xí)，學(xué)生可以理解網(wǎng)頁web開展歷史及其將來方向，熟悉網(wǎng)頁設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見的網(wǎng)頁布局效果及變

2、形和動(dòng)畫效果，學(xué)會制作各種企業(yè)、門戶、電商類網(wǎng)站。二、課程設(shè)計(jì)理念與思路課程設(shè)計(jì)理念：高職教育的集中理論教學(xué)環(huán)節(jié)需明確必要的理論知識的生化與知識層面的拓展，不能局限于單純的技能訓(xùn)練。單純的技能訓(xùn)練不是進(jìn)步高等職業(yè)教育的理想課程。以才能的培養(yǎng)為重點(diǎn)，以就業(yè)為導(dǎo)向，培養(yǎng)學(xué)生具備職業(yè)崗位所需的職業(yè)才能，職業(yè)生涯開展所需的才能和終身學(xué)習(xí)的才能，實(shí)現(xiàn)一站式教學(xué)理念。課程設(shè)計(jì)思路：基于工作過程開發(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)為目的，以案例工程任務(wù)實(shí)現(xiàn)為載體、理論學(xué)習(xí)與時(shí)間操作相結(jié)合。三

3、、教學(xué)條件要求開發(fā)工具：Dreamweaver CS6四、課程的主要內(nèi)容及根本要求第一章 初識HTML5學(xué)習(xí)單元初識HTML5學(xué)時(shí)10學(xué)時(shí)學(xué)習(xí)目的1. 理解HTML5開展歷程2. 理解HTML5閱讀器支持情況3. 熟悉HTML5根本語法,掌握HTML5語法新特性。4. 掌握HTML5相關(guān)標(biāo)記及屬性，可以制作簡單的網(wǎng)頁頁面。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)HTML5開展歷史HTML5的優(yōu)勢HTML5閱讀器支持情況創(chuàng)立第一個(gè)HTML5頁面HTML5文檔根本格式HTML5語法HTML標(biāo)記標(biāo)記的屬性HTML5文檔頭部相關(guān)標(biāo)記標(biāo)題和段落標(biāo)記文本格式化標(biāo)記特殊字符標(biāo)記常用圖像格式圖像標(biāo)記絕對途徑和相對途徑創(chuàng)

4、立超鏈接錨點(diǎn)鏈接第二章 HTML5頁面元素及屬性學(xué)習(xí)單元HTML5頁面元素及屬性學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目的1. 掌握構(gòu)造元素的使用，可以使頁面分區(qū)更明確。2. 理解分組元素的使用，可以建立簡單的標(biāo)題組。3. 掌握頁面交互元素的使用，可以實(shí)現(xiàn)簡單的交互效果。4. 理解文本層次語義元素，可以在頁面中突出所標(biāo)記的文本內(nèi)容。5. 掌握全局屬性的應(yīng)用，可以使頁面元素實(shí)現(xiàn)相應(yīng)的操作。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)ul元素ol元素dl元素列表的嵌套應(yīng)用header元素nav元素article元素section元素footer元素figure和figcaption元素hgroup元素details和summary元素

5、progress元素meter元素time元素mark元素cite元素draggable屬性hidden屬性spellcheck屬性contenteditable屬性第三章 CSS3入門學(xué)習(xí)單元CSS3入門學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 理解CSS3的開展歷史以及主流閱讀器的支持情況。2. 掌握CSS根底選擇器，可以運(yùn)用CSS選擇器定義標(biāo)記款式。3. 熟悉CSS文本款式屬性，可以運(yùn)用相應(yīng)的屬性定義文本款式。4. 理解CSS優(yōu)先級，可以區(qū)分復(fù)合選擇器權(quán)重的大小。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)CSS3概述CSS3開展歷史CSS3閱讀器支持情況CSS款式規(guī)那么引入CSS款式表CSS根底選擇器字體款式屬性文本

6、外觀屬性CSS層疊性和繼承性CSS優(yōu)先級第四章 CSS3選擇器學(xué)習(xí)單元CSS3選擇器學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 掌握CSS3中新增加的屬性選擇器，可以運(yùn)用屬性選擇器為頁面中的元素添加款式。2. 理解關(guān)系選擇器的用法，可以準(zhǔn)確判斷元素與元素間的關(guān)系。3. 掌握常用的構(gòu)造化偽類選擇器，可以為一樣名稱的元素定義不同款式。4. 掌握偽元素選擇器的使用，可以在頁面中插入所需要的文字或圖片內(nèi)容。5. 掌握CSS偽類，會使用CSS偽類實(shí)現(xiàn)超鏈接特效。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)Eatt=value 屬性選擇器Eatt$=value屬性選擇器Eatt*=value屬性選擇器子代選擇器兄弟選擇器+、:root選擇

7、器:not選擇器:only-child選擇器:first-child和:last-child選擇器:nth-child(n)和:nth-last-child(n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器:empty選擇器:target選擇器:before選擇器:after選擇器鏈接偽類第五章 CSS盒子模型學(xué)習(xí)單元CSS盒子模型學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 掌握盒子的相關(guān)屬性，可以制作常見的盒子模型效果。2. 掌握背景屬性的設(shè)置方法，可以設(shè)置背景顏色和圖像。3. 理解漸變屬性的原理，可以設(shè)置漸變背景。4. 熟悉CSS控制列表款式的方式，可以運(yùn)用背景圖像定義

8、列表工程符號。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)認(rèn)識盒子模型標(biāo)記盒子的寬與高邊框?qū)傩赃吘鄬傩詁ox-shadow屬性box-sizing 屬性設(shè)置背景顏色設(shè)置背景圖像背景與圖片不透明度的設(shè)置設(shè)置背景圖像平鋪設(shè)置背景圖像的位置設(shè)置背景圖像固定設(shè)置背景圖像的大小設(shè)置背景的顯示區(qū)域設(shè)置背景圖像的裁剪區(qū)域設(shè)置多重背景圖像背景復(fù)合屬性線性漸變徑向漸變重復(fù)漸變第六章 浮動(dòng)與定位學(xué)習(xí)單元浮動(dòng)與定位學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 理解元素的浮動(dòng)，可以為元素設(shè)置浮動(dòng)款式。2. 熟悉去除浮動(dòng)的方法，可以使用不同方法去除浮動(dòng)。3. 掌握元素的定位，可以為元素設(shè)置常見的定位形式。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)元素的浮動(dòng)屬性flo

9、at去除浮動(dòng)overflow屬性元素的定位屬性靜態(tài)定位static相對定位relative絕對定位absolute固定定位fixedz-index層疊等級屬性元素的類型標(biāo)記元素的轉(zhuǎn)換第七章 表單的應(yīng)用學(xué)習(xí)單元表單的應(yīng)用學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 理解表單功能，可以快速創(chuàng)立表單。2. 掌握表單相關(guān)元素，可以準(zhǔn)確定義不同的表單控件。3. 掌握表單款式的控制，可以美化表單界面。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)表單的構(gòu)成創(chuàng)立表單表單屬性Input元素的type屬性Input元素的其他屬性textarea元素select元素datalist元素keygen元素output元素CSS控制表單款式第八章 多媒體技

10、術(shù)學(xué)習(xí)單元多媒體技術(shù)學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目的1. 熟悉HTML5多媒體特性。2. 理解HTML5支持的音頻和視頻格式。3. 掌握HTML5中視頻的相關(guān)屬性，可以在HTML5頁面中添加視頻文件。4. 掌握HTML5中音頻的相關(guān)屬性，可以在HTML5頁面中添加音頻文件。5. 理解HTML5中視頻、音頻的一些常見操作，并可以應(yīng)用到網(wǎng)頁制作中。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)HTML5多媒體的特性視頻和音頻編解碼器多媒體的格式支持視頻和音頻的閱讀器在HTML5中嵌入視頻在HTML5中嵌入音頻音視頻中的source元素調(diào)用網(wǎng)頁多媒體文件CSS控制視頻的寬高視頻和音頻的方法和事件HTML5音視頻開展趨勢第九章 C

11、SS3高級應(yīng)用學(xué)習(xí)單元CSS3高級應(yīng)用學(xué)時(shí)8學(xué)時(shí)學(xué)習(xí)目的1. 理解過渡屬性，可以控制過渡時(shí)間、動(dòng)畫快慢等常見過渡效果。2. 掌握CSS3中的變形屬性，可以制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。3. 掌握CSS3中的動(dòng)畫，可以純熟制作網(wǎng)頁中常見的動(dòng)畫效果。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition屬性認(rèn)識transform2D轉(zhuǎn)換3D轉(zhuǎn)換keyframesanimation-name屬性animation-duration屬

12、性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性animation-direction屬性animation屬性第十章 實(shí)戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面學(xué)習(xí)單元實(shí)戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面學(xué)時(shí)6學(xué)時(shí)學(xué)習(xí)目的1. 掌握站點(diǎn)的建立，可以建立標(biāo)準(zhǔn)的站點(diǎn)。2. 完成首頁面的制作，并可以實(shí)現(xiàn)簡單的CSS3動(dòng)畫效果。學(xué)習(xí)內(nèi)容知識點(diǎn)理解掌握重點(diǎn)難點(diǎn)建立站點(diǎn)站點(diǎn)初始化設(shè)置效果圖分析頁面布局定義公共款式制作頭部、導(dǎo)航及視頻內(nèi)容制作內(nèi)容部分新品制作內(nèi)容部分試裝制作內(nèi)容部分評測制作腳部信息注冊及版權(quán)信息部分五、學(xué)時(shí)分配章目講課上

13、機(jī)合計(jì)第一章 初識HTML56學(xué)時(shí)4學(xué)時(shí)10學(xué)時(shí)第二章 HTML5頁面元素及屬性4學(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高級應(yīng)用5學(xué)時(shí)3學(xué)時(shí)8學(xué)時(shí)第十章 實(shí)戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面3學(xué)時(shí)3學(xué)時(shí)6學(xué)時(shí)合計(jì)47學(xué)時(shí)29學(xué)時(shí)76學(xué)時(shí)六、考核形式與成績評定方法本課程為考試課程，期末考試采用百分制的閉卷考試形式。學(xué)生的考試成績由平時(shí)成績30%和期末考試70%組成，其中，平時(shí)成績包括出勤5%、作業(yè)5%、上機(jī)成績20%。七、選用教材和主要參考書本大綱是根據(jù)教材?HTML5+CSS3網(wǎng)站設(shè)計(jì)根底教程?所設(shè)計(jì)的。參考