HTML+CSS網(wǎng)站設(shè)計基礎(chǔ)教程教學(xué)大綱

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

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

3、操作相結(jié)合”。三、教學(xué)條件要求開發(fā)工具：Dreamweaver CS6四、課程的主要內(nèi)容及基本要求第一章初識HTML5學(xué)習(xí)單元初識HTML5學(xué)時10學(xué)時學(xué)習(xí)目標(biāo)1, 了解HTML5發(fā)展歷程2,理解HTML5瀏覽器支持情況3,熟悉HTML5基本語法，掌握HTML5語法新特性。4,掌握HTML5相關(guān)標(biāo)記及屬性，能夠制作簡單日勺網(wǎng)貝貝聞。學(xué)習(xí)內(nèi)容知識點(diǎn)了解重點(diǎn)難點(diǎn)HTML5發(fā)展歷史VHTML5的優(yōu)勢VHTML5瀏覽器支持情況V創(chuàng)建第一個HTML5頁面VHTML5文檔基本格式VHTML5語法VHTML標(biāo)記V標(biāo)記的屬性VHTML5文檔頭部相關(guān)標(biāo)記V標(biāo)題和段落標(biāo)記V義本格式化標(biāo)記V特殊字符標(biāo)記V常用圖像格

4、式V圖像標(biāo)記<img/>V絕對路徑和相對路徑V創(chuàng)建超鏈接V錨點(diǎn)鏈接V第二章 HTML5頁面元素及屬性學(xué)習(xí)單元HTML5貝面兀素及屬性學(xué)時6學(xué)時學(xué)習(xí)目標(biāo)1 .掌握結(jié)構(gòu)兀素的使用，可以使頁面分區(qū)更明確。2 .理解分組元素的使用，能夠建立簡單的標(biāo)題組。3 .掌握貝間交互兀素的使用，能夠?qū)崿F(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兀系Vol兀素Vdl兀素V列表的嵌套應(yīng)用VVheader兀素Vnav兀素Varticle 兀素Vsection 兀素Vfooter兀素Vfi

5、gure和 figcaption 兀素Vhgroup兀素Vdetails和 summary兀素Vprogress 兀素？Vmeter兀素Vtime兀素Vmark兀素Vcite兀素Vdraggableil 性Vhidden屬性Vspellcheck屬性Vcontenteditable屬性V第三章 CSS3入門學(xué)習(xí)單元CSS3入門學(xué)時8學(xué)時學(xué)習(xí)目標(biāo)1, 了解CSS3勺發(fā)展歷史以及主流瀏覽器的支持情況。2,掌握CSS®礎(chǔ)選擇器，能夠運(yùn)用 CSS選擇器定義標(biāo)記樣式。3,熟悉CS成本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。4,理解CSStt先級，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。學(xué)習(xí)內(nèi)容知識點(diǎn)了

6、解重點(diǎn)難點(diǎn)CSS3既述VCSS3發(fā)展歷史VCSS3SU覽器支持情況VcsS羊式規(guī)則V引入csS羊式表VCSS基礎(chǔ)選擇器V字體樣式屬性VV義本外觀屬性VVCSS層疊性和繼承性VCSStt先級VV第四章 CSS斑擇器學(xué)習(xí)單元CSS建擇器學(xué)時8學(xué)時學(xué)習(xí)目標(biāo)1 .掌握CSS3中新增加的屬性選擇器，能夠運(yùn)用屬性選擇器為頁面 中的元素添加樣式。2 .理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)系。3 .掌握常用的結(jié)構(gòu)化偽類選擇器，能夠?yàn)橄嗤Q的元素定義不同 樣式。4 .掌握偽兀素選擇器的使用，能夠在頁面中插入所需要的文字或圖 片內(nèi)容。5 .掌握CSSft類，會使用CSS偽類實(shí)現(xiàn)超鏈接特效。學(xué)習(xí)內(nèi)容

7、知識點(diǎn)了解重點(diǎn)難點(diǎn)EattA=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)V和:nth-last-of-type(n選擇器:empty選擇器V:target選擇器V:before選擇器VV:after選擇器VV鏈接偽類V第五章 CSS盒子模型學(xué)習(xí)單元CSS盒子模型學(xué)時8學(xué)時學(xué)習(xí)目標(biāo)1.掌握盒

8、子的相關(guān)屬性，能夠制作常見的盒子模型效果。2,掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。3.理解漸變屬性的原理，能夠設(shè)置漸變背景。4,熟悉CSSS制列表樣式的方式，能夠運(yùn)用背景圖像定義列表項目 符號。學(xué)習(xí)內(nèi)容知識點(diǎn)了解重點(diǎn)難點(diǎn)認(rèn)識盒子模型V<div>標(biāo)記V益子的范與局V邊框?qū)傩訴邊距屬性Vbox-shadow 屬性VVbox-sizing 屬性V設(shè)置背景顏色V設(shè)置背景圖像V背景與圖片不透明度的設(shè)置V設(shè)置背景圖像平鋪V設(shè)置背景圖像的位置V設(shè)置背景圖像固定V設(shè)置背景圖像的大小V設(shè)置背景的顯示區(qū)域V設(shè)置背景圖像的裁剪區(qū)域V設(shè)置多重背景圖像V背景復(fù)合屬性V線性漸變V徑向漸變V重復(fù)漸變

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

10、素，能夠準(zhǔn)確定義不同的表單控件。3.掌握表單樣式的控制，能夠美化表單界面。學(xué)習(xí)內(nèi)容知識點(diǎn)了解重點(diǎn)難點(diǎn)表單的構(gòu)成V創(chuàng)建表單V表單屬性VInput兀素的type屬性VVInput兀素的其他屬性Vtextarea兀素VselectTEltVdatalist 兀素VkeygenjEltVoutput兀素Vcsss制表單樣式VV第八章多媒體技術(shù)？學(xué)習(xí)單元多媒體技術(shù)？學(xué)時6學(xué)時學(xué)習(xí)目標(biāo)1,熟悉HTML5多媒體特性。2, 了解HTML5支持的音頻和視頻格式。3,掌握HTML5中視頻的相關(guān)屬性，能夠在 HTML5頁面中添加視 頻文件。4,掌握HTML5中音頻日勺相關(guān)屬性，能夠在 HTML5貝聞中添加音 頻文件

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

12、動回效果。學(xué)習(xí)內(nèi)容知識點(diǎn)了解重點(diǎn)難點(diǎn)trans幣on-property 屬性Vtrans幣on-duration 屬性Vtransition-timing-function屬性Vtransition-delay屬性Vtransition 屬性V認(rèn)識 transformV2D轉(zhuǎn)換VV3D轉(zhuǎn)換VVkeyframesVanimation-name屬性Vanimation-duration 屬性Vanimation-timing-function屬性Vanimation-delayH 性Vanimation-iteration-count屬性Vanimation-direction 屬性Vanimat

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