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

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

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

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

4、關標 記V標題和段落標記V文本格式化標記V特殊字符標記V常用圖像格式V圖像標記<img/>V絕對路徑和相對路徑V創(chuàng)建超鏈接V錨點鏈接VV第二章 HTML5頁面元素及屬性學習單元HTML5頁面兀素及屬性1學時6學時學習目標1. 掌握結構兀素的使用，可以使頁面2. 理解分組元素的使用，能夠建立簡3. 掌握頁面交互兀素的使用，能夠實4. 理解文本層次語義兀素，能夠在頁5. 掌握全局屬性的應用，能夠使頁面i分區(qū)更明確。單的標題組。 :現簡單的交互!、面中突出所標: 兀素實現相應效果。記的文本內容。 的操作。學習內容知識點了解掌握重點難點ul兀素Vol兀素Vdl兀素V列表的嵌套應用VVhea

5、der兀素Vnav兀素Varticle 兀素Vsection 兀素Vfooter兀素Vfigure 禾n figcaption 兀素Vhgroup兀素Vdetails 禾R summary 兀素Vp rogress 兀素Vmeter兀素Vtime兀素Vmark兀素Vcite兀素Vdraggable 屬性Vhidden屬性Vspellcheck 屬性Vcontenteditable 屬性V第三章 CSS3入門學習單元CSS3入門1學時8學時學習目標1. 了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。2. 掌握CSS基礎選擇器，能夠運用 CSS選擇器定義標記樣式。3. 熟悉CSS文本樣式屬性，能

6、夠運用相應的屬性定義文本樣式。4. 理解CSS優(yōu)先級，能夠區(qū)分復合選擇器權重的大小。學習內容知識點了解掌握重點難點CSS3概述VCSS3發(fā)展歷史VCSS3瀏覽器支持情況VCSS樣式規(guī)則V弓1入CSS樣式表VCSS基礎選擇器V字體樣式屬性VV文本外觀屬性VVCSS層疊性和繼承性VCSS優(yōu)先級VV第四章 CSS3選擇器學習單元 學習目標CSS3選擇器1.I 8學時I學時掌握CSS3中新增加的屬性選擇器，能夠運用屬性選擇器為頁面中的2.3.4.元素添加樣式。理解關系選擇器的用法，能夠準確判斷元素與元素間的關系。掌握常用的結構化偽類選擇器，能夠為相同名稱的元素定義不同樣式。容。掌握偽元素選擇器的使用，

7、 能夠在頁面中插入所需要的文字或圖片內學習內容知識點了解掌握重點難點EattA=value屬性選擇器VEatt$=value屬性選擇器VEatt*=value屬性選擇器V子代選擇器（）V兄弟選擇器（+、）V:root選擇器V:not選擇器V:only-child 選擇器V:first-child 和:last-child 選 擇器V:n th-child( n) 和:nth-last-child(n)選擇器VV:n th-of-t ype(n) 和:nth-last-of-type(n)選擇 器V:empty選擇器V:target選擇器V:before選擇器VV:after選擇器VV鏈接偽類V

8、第五章 CSS盒子模型學習單元CSS盒子模型1學時8學時學習目標1. 掌握盒子的相關屬性，能夠制作常見的盒子模型效果。2. 掌握背景屬性的設置方法，能夠設置背景顏色和圖像。3. 理解漸變屬性的原理，能夠設置漸變背景。4. 熟悉CSS控制列表樣式的方式，能夠運用背景圖像定義列表項目符 號。學習內容知識點了解掌握重點難點認識盒子模型V<div>標記V盒子的寬與高V邊框屬性V邊距屬性V掌握CSS偽類，會使用CSS偽類實現超鏈接特效。5.box-shadow 屬性VVbox-sizing 屬性V設置背景顏色V設置背景圖像V背景與圖片不透明度的設 置V設置背景圖像平鋪V設置背景圖像的位置V設

9、置背景圖像固定V設置背景圖像的大小V設置背景的顯示區(qū)域V設置背景圖像的裁剪區(qū)域V設置多重背景圖像V背景復合屬性V線性漸變V徑向漸變V重復漸變第六章浮動與定位學習單元浮動與定位1學時8學時學習目標1. 理解兀素的浮動，能夠為兀素設置浮動樣式。2. 熟悉清除浮動的方法，可以使用不同方法清除浮動。3. 掌握元素的定位，能夠為元素設置常見的定位模式。學習內容知識點了解掌握重點難點兀素的浮動屬性floatVV清除浮動Voverflow 屬性V兀素的定位屬性V靜態(tài)定位static相對定位 relativeVV絕對定位 absoluteVV固定定位fixedVz-index層疊等級屬性V兀素的類型V<

10、span>標記V兀素的轉換V第七章表單的應用學習單元表單的應用學習目標1.2.I學時了解表單功能，能夠快速創(chuàng)建表單。 掌握表單相關元素，能夠準確定義不同的表單控件。8學時3.掌握表單樣式的控制，能夠美化表單界面。知識點了解掌握重點難點表單的構成V創(chuàng)建表單V表單屬性VInput兀素的type屬性VV學習內容Input兀素的其他屬性Vtextarea 兀素Vselect兀素Vdatalist 兀素Vkeygen兀素Vout put兀素VCSS控制表單樣式VV第八章多媒體技術學習單元多媒體技術1學時6學時學習目標1. 熟悉HTML5多媒體特性。2. 了解HTML5支持的音頻和視頻格式。3. 掌

11、握HTML5中視頻的相關屬性，能夠在HTML5頁面中添加視頻文件。4. 掌握HTML5中音頻的相關屬性，能夠在HTML5頁面中添加音頻文件。5. 了解HTML5中視頻、音頻的一些常見操作，并能夠應用到網頁制作 中。學習內容知識點1了解掌握重點難點HTML5多媒體的特性V視頻和音頻編解碼器V多媒體的格式V支持視頻和音頻的瀏覽器V在HTML5 中嵌入視頻VV在HTML5中嵌入音頻VV音視頻中的source兀素V調用網頁多媒體文件VCSS控制視頻的寬高V視頻和音頻的方法和事件VHTML5音視頻發(fā)展趨勢V第九章 CSS3高級應用學習單元CSS3高級應用I學時8學時1.2.學習目標理解過渡屬性，能夠控制

12、過渡時間、動畫快慢等常見過渡效果。 掌握CSS3中的變形屬性，能夠制作 2D轉換、3D轉換效果。3.掌握CSS3中的動畫，能夠熟練制作網頁中常見的動畫效果。知識點了解掌握重點難點transition-property 屬性Vtransition-duration 屬性Vtran siti on-ti min g-fu ncti on 屬性Vtransition-delay 屬性Vtransition 屬性V認識 transformV2D轉換VV3D轉換VVkeyframesVanimation-name 屬性Vanimation-duration 屬性Vani mati on-tim in g

13、-fu nction 屬性Vanimation-delay 屬性Vani mati on-iterati on-count屬性Vani mati on-direct ion 屬性Vanimation 屬性V學習內容第十章 實戰(zhàn)開發(fā)一制作電商網站首頁面學習單元實戰(zhàn)開發(fā)一制作電商網站首頁面1學時6學時學習目標1. 掌握站點的建立，能夠建立規(guī)范的站點。2. 完成首頁面的制作，并能夠實現簡單的CSS3動畫效果。學習內容知識點1了解掌握重點難點建立站點V站點初始化設置V效果圖分析V頁面布局V定義公共樣式V制作頭部、導航及視頻內 容VV制作內容部分（新品）VV制作內容部分（試裝）VV制作內容部分（評測）V

14、V制作腳部（信息注冊）及 版權信息部分V五、學時分配章目講課上機合計第一章初識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% 。七、選用教材和主要參考書本大綱是根據