《HTML5+CSS3網(wǎng)站設計基礎教程》_教學大綱

1、博學谷讓IT教學更簡單，讓IT學習更有效HTML5+CSS3網(wǎng)站設計基礎教程課程教學大綱（課程英文名稱）課程編號：201601210011學 分：5學分學 時：76學時 （其中：講課學時：47學時 上機學時：26學時）先修課程：計算機基礎、計算機網(wǎng)絡、計算機應用后續(xù)課程：UI設計、 JavaScript網(wǎng)頁特效適用專業(yè)：信息技術及其計算機相關專業(yè)開課部門：計算機系一、課程的性質(zhì)與目標HTML5+CSS3網(wǎng)站設計基礎教程是面向計算機相關專業(yè)的一門專業(yè)基礎課，涉及網(wǎng)頁基礎、HTML標記、CSS樣式、網(wǎng)頁布局、變形與動畫等內(nèi)容，通過本課程的學習，學生能夠了解網(wǎng)頁web發(fā)展歷史及其未來方向，熟悉網(wǎng)頁設

2、計流程、掌握網(wǎng)絡中常見的網(wǎng)頁布局效果及變形和動畫效果，學會制作各種企業(yè)、門戶、電商類網(wǎng)站。二、課程設計理念與思路課程設計理念：高職教育的集中實踐教學環(huán)節(jié)需明確必要的理論知識的生化與知識層面的拓展，不能局限于單純的技能訓練。單純的技能訓練不是提高高等職業(yè)教育的理想課程。以能力的培養(yǎng)為重點，以就業(yè)為導向，培養(yǎng)學生具備職業(yè)崗位所需的職業(yè)能力，職業(yè)生涯發(fā)展所需的能力和終身學習的能力，實現(xiàn)一站式教學理念。課程設計思路：基于工作過程開發(fā)課程內(nèi)容，以行動為導向進行教學內(nèi)容設計，以學生為主體，以案例（項目）實訓為手段，設計除理論學習與技能掌握相融合的課程內(nèi)容體系。教學整體設計“以職業(yè)技能培養(yǎng)為目標，以案例（項

3、目）任務實現(xiàn)為載體、理論學習與時間操作相結(jié)合”。三、教學條件要求開發(fā)工具：Dreamweaver CS6四、課程的主要內(nèi)容及基本要求第一章 初識HTML5學習單元初識HTML5學時10學時學習目標1. 了解HTML5發(fā)展歷程2. 理解HTML5瀏覽器支持情況3. 熟悉HTML5基本語法,掌握HTML5語法新特性。4. 掌握HTML5相關標記及屬性，能夠制作簡單的網(wǎng)頁頁面。學習內(nèi)容知識點了解掌握重點難點HTML5發(fā)展歷史HTML5的優(yōu)勢HTML5瀏覽器支持情況創(chuàng)建第一個HTML5頁面HTML5文檔基本格式HTML5語法HTML標記標記的屬性HTML5文檔頭部相關標記標題和段落標記文本格式化標記特

4、殊字符標記常用圖像格式圖像標記<img/>絕對路徑和相對路徑創(chuàng)建超鏈接錨點鏈接第二章 HTML5頁面元素及屬性學習單元HTML5頁面元素及屬性學時6學時學習目標1. 掌握結(jié)構(gòu)元素的使用，可以使頁面分區(qū)更明確。2. 理解分組元素的使用，能夠建立簡單的標題組。3. 掌握頁面交互元素的使用，能夠?qū)崿F(xiàn)簡單的交互效果。4. 理解文本層次語義元素，能夠在頁面中突出所標記的文本內(nèi)容。5. 掌握全局屬性的應用，能夠使頁面元素實現(xiàn)相應的操作。學習內(nèi)容知識點了解掌握重點難點ul元素ol元素dl元素列表的嵌套應用header元素nav元素article元素section元素footer元素figure和

5、figcaption元素hgroup元素details和summary元素progress元素 meter元素time元素mark元素cite元素draggable屬性hidden屬性spellcheck屬性contenteditable屬性第三章 CSS3入門學習單元CSS3入門學時8學時學習目標1. 了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。2. 掌握CSS基礎選擇器，能夠運用CSS選擇器定義標記樣式。3. 熟悉CSS文本樣式屬性，能夠運用相應的屬性定義文本樣式。4. 理解CSS優(yōu)先級，能夠區(qū)分復合選擇器權(quán)重的大小。學習內(nèi)容知識點了解掌握重點難點CSS3概述CSS3發(fā)展歷史

6、CSS3瀏覽器支持情況CSS樣式規(guī)則引入CSS樣式表CSS基礎選擇器字體樣式屬性文本外觀屬性CSS層疊性和繼承性CSS優(yōu)先級第四章 CSS3選擇器學習單元CSS3選擇器學時8學時學習目標1. 掌握CSS3中新增加的屬性選擇器，能夠運用屬性選擇器為頁面中的元素添加樣式。2. 理解關系選擇器的用法，能夠準確判斷元素與元素間的關系。3. 掌握常用的結(jié)構(gòu)化偽類選擇器，能夠為相同名稱的元素定義不同樣式。4. 掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容。5. 掌握CSS偽類，會使用CSS偽類實現(xiàn)超鏈接特效。學習內(nèi)容知識點了解掌握重點難點Eatt=value 屬性選擇器Eatt$=val

7、ue屬性選擇器Eatt*=value屬性選擇器子代選擇器（>）兄弟選擇器（+、）:root選擇器: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盒子模型學習單元CSS盒子模型學時8學時學習目標1. 掌握盒子的相關屬性，能夠制作常見的盒子模型效果。2. 掌握背景屬性的設置方法，能夠設置背景

8、顏色和圖像。3. 理解漸變屬性的原理，能夠設置漸變背景。4. 熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符號。學習內(nèi)容知識點了解掌握重點難點認識盒子模型<div>標記盒子的寬與高邊框?qū)傩赃吘鄬傩詁ox-shadow屬性box-sizing 屬性設置背景顏色設置背景圖像背景與圖片不透明度的設置設置背景圖像平鋪設置背景圖像的位置設置背景圖像固定設置背景圖像的大小設置背景的顯示區(qū)域設置背景圖像的裁剪區(qū)域設置多重背景圖像背景復合屬性線性漸變徑向漸變重復漸變第六章 浮動與定位學習單元浮動與定位學時8學時學習目標1. 理解元素的浮動，能夠為元素設置浮動樣式。2. 熟悉清除浮動的

9、方法，可以使用不同方法清除浮動。3. 掌握元素的定位，能夠為元素設置常見的定位模式。學習內(nèi)容知識點了解掌握重點難點元素的浮動屬性float清除浮動overflow屬性元素的定位屬性靜態(tài)定位static相對定位relative絕對定位absolute固定定位fixedz-index層疊等級屬性元素的類型<span>標記元素的轉(zhuǎn)換第七章 表單的應用學習單元表單的應用學時8學時學習目標1. 了解表單功能，能夠快速創(chuàng)建表單。2. 掌握表單相關元素，能夠準確定義不同的表單控件。3. 掌握表單樣式的控制，能夠美化表單界面。學習內(nèi)容知識點了解掌握重點難點表單的構(gòu)成創(chuàng)建表單表單屬性Input元素的

10、type屬性Input元素的其他屬性textarea元素select元素datalist元素keygen元素output元素CSS控制表單樣式第八章 多媒體技術 學習單元多媒體技術 學時6學時學習目標1. 熟悉HTML5多媒體特性。2. 了解HTML5支持的音頻和視頻格式。3. 掌握HTML5中視頻的相關屬性，能夠在HTML5頁面中添加視頻文件。4. 掌握HTML5中音頻的相關屬性，能夠在HTML5頁面中添加音頻文件。5. 了解HTML5中視頻、音頻的一些常見操作，并能夠應用到網(wǎng)頁制作中。學習內(nèi)容知識點了解掌握重點難點HTML5多媒體的特性視頻和音頻編解碼器多媒體的格式支持

11、視頻和音頻的瀏覽器在HTML5中嵌入視頻在HTML5中嵌入音頻音視頻中的source元素調(diào)用網(wǎng)頁多媒體文件CSS控制視頻的寬高視頻和音頻的方法和事件HTML5音視頻發(fā)展趨勢第九章 CSS3高級應用 學習單元CSS3高級應用 學時8學時學習目標1. 理解過渡屬性，能夠控制過渡時間、動畫快慢等常見過渡效果。2. 掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。3. 掌握CSS3中的動畫，能夠熟練制作網(wǎng)頁中常見的動畫效果。學習內(nèi)容知識點了解掌握重點難點transition-property屬性transition-duration屬性transition-timing-

12、function屬性transition-delay屬性transition屬性認識transform2D轉(zhuǎn)換3D轉(zhuǎn)換keyframesanimation-name屬性animation-duration屬性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性animation-direction屬性animation屬性第十章 實戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面學習單元實戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面學時6學時學習目標1. 掌握站點的建立，能夠建立規(guī)范的站點。2. 完成首頁面的制作，并能夠?qū)崿F(xiàn)簡單的CSS3動畫效果。

13、學習內(nèi)容知識點了解掌握重點難點建立站點站點初始化設置效果圖分析頁面布局定義公共樣式制作頭部、導航及視頻內(nèi)容制作內(nèi)容部分（新品）制作內(nèi)容部分（試裝）制作內(nèi)容部分（評測）制作腳部（信息注冊）及版權(quán)信息部分五、學時分配章目講課上機合計第一章 初識HTML56學時4學時10學時第二章 HTML5 頁面元素及屬性4學時2學時6學時第三章 CSS3入門5學時3學時8學時第四章 CSS3選擇器5學時3學時8學時第五章 CSS盒子模型5學時3學時8學時第六章 浮動與定位5學時3學時8學時第七章 表單的應用5學時3學時8學時第八章 多媒體技術4學時2學時6學時第九章 CSS3高級應用5學時3學時8學時第十章 實戰(zhàn)開發(fā)制作電商網(wǎng)站首頁面3學時3學時6學時合計47學時29學時76學時六、考核模式與成績評定辦法本課程為考試課程，期末考試采用百分制的閉卷考試模式。學生的考試成績由平時成績（30%）和期末考試（70%）組成，其中，平時成績包括出勤（5%）、作業(yè)（5%）、上機成績（20%）。七、選用教材和主要參考書本大綱是根據(jù)教材HTML5+CSS