《HTML5CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》

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

2、史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)布局效果及變形和動(dòng)畫(huà)效果，學(xué)會(huì)制作各種企業(yè)、門(mén)戶、電商類網(wǎng)站。二、課程設(shè)計(jì)理念與思路課程設(shè)計(jì)理念：高職教育的集中實(shí)踐教學(xué)環(huán)節(jié)需明確必要的理論知識(shí)的生化與知識(shí)層面的拓展，不能局限于單純的技能訓(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è)計(jì)思路：基于工作過(guò)程開(kāi)發(fā)課程內(nèi)容，以行動(dòng)為導(dǎo)向進(jìn)行教學(xué)內(nèi)容設(shè)計(jì)，以學(xué)生為主體，以案例（項(xiàng)目）實(shí)訓(xùn)為手段，設(shè)計(jì)除理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系。教學(xué)整體設(shè)計(jì)“以職業(yè)

3、技能培養(yǎng)為目標(biāo)，以案例（項(xiàng)目）任務(wù)實(shí)現(xiàn)為載體、理論學(xué)習(xí)與時(shí)間操作相結(jié)合”。三、教學(xué)條件要求博學(xué)谷讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效開(kāi)發(fā)工具：DreamweaverCS61/4四、課程的主要內(nèi)容及基本要求第一章初識(shí)HTML5學(xué)習(xí)單元初識(shí)HTML51.2.3.4.學(xué)時(shí)10學(xué)時(shí)了解HTML5發(fā)展歷程理解HTML5瀏覽器支持情況熟悉HTML5基本語(yǔ)法,掌握HTML5語(yǔ)法新特性。掌握HTML5相關(guān)標(biāo)記及屬性，能夠制作簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面。了解掌握重點(diǎn)難點(diǎn)學(xué)習(xí)目標(biāo)知識(shí)點(diǎn)HTML5發(fā)展歷史HTML5的優(yōu)勢(shì)HTML5瀏覽器支持情況創(chuàng)建第一個(gè)HTML5頁(yè)面HTML5文檔基本格式HTML5語(yǔ)法HTML標(biāo)記標(biāo)記的屬性學(xué)習(xí)

4、內(nèi)容HTML5文檔頭部相關(guān)標(biāo)記標(biāo)題和段落標(biāo)記文本格式化標(biāo)記特殊字符標(biāo)記常用圖像格式圖像標(biāo)記絕對(duì)路徑和相對(duì)路徑創(chuàng)建超鏈接錨點(diǎn)鏈接第二章HTML5頁(yè)面元素及屬性學(xué)習(xí)單元HTML5頁(yè)面元素及屬性1.2.3.4.5.學(xué)時(shí)6學(xué)時(shí)掌握結(jié)構(gòu)元素的使用，可以使頁(yè)面分區(qū)更明確。理解分組元素的使用，能夠建立簡(jiǎn)單的標(biāo)題組。掌握頁(yè)面交互元素的使用，能夠?qū)崿F(xiàn)簡(jiǎn)單的交互效果。理解文本層次語(yǔ)義元素，能夠在頁(yè)面中突出所標(biāo)記的文本內(nèi)容。掌握全局屬性的應(yīng)用，能夠使頁(yè)面元素實(shí)現(xiàn)相應(yīng)的操作。了解掌握重點(diǎn)難點(diǎn)學(xué)習(xí)目標(biāo)知識(shí)點(diǎn)學(xué)習(xí)內(nèi)容ul元素ol元素dl元素博學(xué)谷讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效列表的嵌套應(yīng)用header元素nav元素a

5、rticle元素section元素footer元素figure和figcaption元素hgroup元素details和summary元素progress元素meter元素time元素mark元素cite元素draggable屬性hidden屬性spellcheck屬性contenteditable屬性第三章CSS3入門(mén)學(xué)習(xí)單元CSS3入門(mén)1.2.3.4.學(xué)時(shí)8學(xué)時(shí)了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)記樣式。熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。了解掌握重點(diǎn)難點(diǎn)學(xué)習(xí)目標(biāo)

6、知識(shí)點(diǎn)2/4CSS3概述CSS3發(fā)展歷史CSS3瀏覽器支持情況CSS樣式規(guī)則學(xué)習(xí)內(nèi)容引入CSS樣式表CSS基礎(chǔ)選擇器字體樣式屬性文本外觀屬性CSS層疊性和繼承性CSS優(yōu)先級(jí)第四章CSS3選擇器學(xué)習(xí)單元學(xué)習(xí)目標(biāo)CSS3選擇器學(xué)時(shí)8學(xué)時(shí)1.掌握CSS3中新增加的屬性選擇器，能夠運(yùn)用屬性選擇器為頁(yè)面中的元素博學(xué)谷讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效添加樣式。理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)兄弟選擇器（+、）:root選擇器:not選擇器:only-child選擇器學(xué)習(xí)內(nèi)容:first-child和:last-child選擇器:nth-child(n)和:nth-last-child(

7、n)選擇器:nth-of-type(n)和:nth-last-of-type(n)選擇器:empty選擇器:target選擇器:before選擇器:after選擇器鏈接偽類第五章CSS盒子模型學(xué)習(xí)單元CSS盒子模型1.2.3.4.學(xué)時(shí)8學(xué)時(shí)掌握盒子的相關(guān)屬性，能夠制作常見(jiàn)的盒子模型效果。掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。理解漸變屬性的原理，能夠設(shè)置漸變背景。熟悉CSS控制列表樣式的方式，能夠運(yùn)用背景圖像定義列表項(xiàng)目符號(hào)。了解掌握重點(diǎn)難點(diǎn)學(xué)習(xí)目標(biāo)知識(shí)點(diǎn)認(rèn)識(shí)盒子模型標(biāo)記盒子的寬與高學(xué)習(xí)內(nèi)容邊框?qū)傩赃吘鄬傩詁ox-shadow屬性box-sizing屬性設(shè)置背景顏色博學(xué)谷讓IT教學(xué)更簡(jiǎn)

8、單，讓IT學(xué)習(xí)更有效設(shè)置背景圖像背景與圖片不透明度的設(shè)置設(shè)置背景圖像平鋪設(shè)置背景圖像的位置設(shè)置背景圖像固定設(shè)置背景圖像的大小設(shè)置背景的顯示區(qū)域設(shè)置背景圖像的裁剪區(qū)域設(shè)置多重背景圖像背景復(fù)合屬性線性漸變徑向漸變重復(fù)漸變第六章浮動(dòng)與定位學(xué)習(xí)單元學(xué)習(xí)目標(biāo)浮動(dòng)與定位學(xué)時(shí)8學(xué)時(shí)1.理解元素的浮動(dòng)，能夠?yàn)樵卦O(shè)置浮動(dòng)樣式。2.熟悉清除浮動(dòng)的方法，可以使用不同方法清除浮動(dòng)。3.掌握元素的定位，能夠?yàn)樵卦O(shè)置常見(jiàn)的定位模式。知識(shí)點(diǎn)元素的浮動(dòng)屬性float清除浮動(dòng)overflow屬性元素的定位屬性靜態(tài)定位static學(xué)習(xí)內(nèi)容相對(duì)定位relative絕對(duì)定位absolute固定定位fixedz-index層疊等級(jí)屬性3/4元素的類型標(biāo)記