HTML5+CSS3網站設計基礎教程教學大綱

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

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

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

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

5、gcaption幾素Vhgroup兒素Vdetails和summary幾素Vprogress幾素Vmeter幾素V7time兒素Vmark兒素Vcite幾素Vdraggable屬性Vhidden屬性Vspellcheck屬性Vcontenteditable屬性V7第三章CSS3入門學習單元CSS3入門學時8學時學習目標1. 了解CSS3的開展歷史以及主流瀏覽器的支持情況.2. 掌握CSS根底選擇器,能夠運用CSS選擇器定義標記樣式.3. 熟悉CSS文本樣式屬性,能夠運用相應的屬性定義文本樣式.4. 理解CSS優(yōu)先級,能夠區(qū)分復合選擇器權重的大小.學習內容知識點了解掌握重點難點CSS3概述VCS

6、S3開展歷史VCSS3瀏覽器支持情況V7CSS樣式規(guī)那么V弓1人CSS樣式表VCSS根底選擇器V字體樣式屬性VV文本外觀屬性V7VCSS層疊性和繼承性VCSS優(yōu)先級V7V7第四章CSS3選擇器學習單元CSS3選擇器學時8學時學習目標1.掌握CSS3中新增加的屬性選擇器,能夠運用屬性選擇器為頁面中的兀素添加樣式.2. 理解關系選擇器的用法,能夠準確判斷元素與元素間的關系.3. 掌握常用的結構化偽類選擇器,能夠為相同名稱的兀素定義不問樣式.4. 掌握偽兀素選擇器的使用,能夠在頁面中插入所需要的文字或圖片內容.5. 掌握CSS偽類,會使用CSS偽類實現(xià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盒子模型學習單元CSS盒子模型學時8學時學習目標1. 掌握盒子的相關屬性,能夠制作常見

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

9、學習單元浮動與定位學時8學時學習目標1. 理解兀素的浮動,能夠為兀素設置浮動樣式.2. 熟悉去除浮動的方法,可以使用不同方法去除浮動.3. 掌握元素的定位,能夠為元素設置常見的定位模式.學習內容知識點了解掌握重點難點兀素的浮動屬性floatVV去除浮動Voverflow屬性V兀素的定位屬性V靜態(tài)定位static相對定位relativeVV絕對定位absoluteVV7固定定位fixedVz-index層疊等級屬性V兀素的類型V<span>標記V7兀素的轉換V7第七章表單的應用學習單元表單的應用學時8學時學習目標1. 了解表單功能,能夠快速創(chuàng)立表單.2. 掌握表單相關兀素,能夠準確定

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

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

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

13、第十章實戰(zhàn)開發(fā)一制作電商網站首頁面學習單元實戰(zhàn)開發(fā)一制作電商網站首頁面學時6學時學習目標1. 掌握站點的建立,能夠建立標準的站點.2. 完成首頁面的制作,并能夠實現(xiàn)簡單的CSS3動畫效果.學習內容知識點了解掌握重點難點建立站點V站點初始化設置V效果圖分析V貝囿布局V7定義公共樣式V制作頭部、導航及視頻內容VV制作內容局部新品VV制作內容局部試裝VV制作內容局部評測制作腳部信息注冊及版權信息局部VV7V7五、學時分配章目講課上機合計第一章初識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ā)一制作電商網站首頁面3學時3學時6學時合計47學時29學時76學時六、考核模式與成績評定方法本課程為測試課程,期末測試采用百分制的閉卷測試模式.學生的測試成績由平時成績30%和期末測試70%組成,其中,平時成績包括出勤5%、作業(yè)5%、上機成績20%.七、選用教材和主要參考書本大綱是根據(jù)教材?HTML5+CSS