HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）-教學(xué)大綱

博學(xué)谷——讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作(第2版)》

課程教學(xué)大綱（課程英文名稱）課程編號(hào)：學(xué)分：5學(xué)分學(xué)時(shí)：84課時(shí)（其中：講課課時(shí)：60課時(shí)上機(jī)課時(shí)：24課時(shí)）先修課程：計(jì)算機(jī)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)、計(jì)算機(jī)應(yīng)用適用專業(yè)：信息技術(shù)及其計(jì)算機(jī)相關(guān)專業(yè)一、課程的性質(zhì)與目標(biāo)HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作是面向計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)基礎(chǔ)課，涉及網(wǎng)頁(yè)基礎(chǔ)、HTML標(biāo)簽、CSS樣式、網(wǎng)頁(yè)布局、變形與動(dòng)畫等內(nèi)容，通過(guò)本課程的學(xué)習(xí)，學(xué)生能夠了解網(wǎng)頁(yè)web發(fā)展歷史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見的網(wǎng)頁(yè)布局效果及變形和動(dòng)畫效果，學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站。通過(guò)本課程，能夠?yàn)閷W(xué)習(xí)后面的前端知識(shí)夯實(shí)基礎(chǔ)。二、課程設(shè)計(jì)思路和教學(xué)要求課程設(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ò)程開發(fā)課程內(nèi)容，以行動(dòng)為導(dǎo)向進(jìn)行教學(xué)內(nèi)容設(shè)計(jì)，以學(xué)生為主體，以案例為手段，設(shè)計(jì)出理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系。教學(xué)整體設(shè)計(jì)“以技能培養(yǎng)為目標(biāo)，以案例為載體、理論學(xué)習(xí)與實(shí)踐操作相結(jié)合”。開發(fā)工具：VisualStudioCode三、課程的主要內(nèi)容及基本要求第1章HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)概述學(xué)習(xí)單元HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)概述課時(shí)2課時(shí)學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)，能夠闡述網(wǎng)頁(yè)的作用，并使用瀏覽器查看網(wǎng)頁(yè)代碼了解網(wǎng)頁(yè)名詞，能夠闡述網(wǎng)頁(yè)相關(guān)名詞的含義熟悉Web標(biāo)準(zhǔn)，能夠歸納Web標(biāo)準(zhǔn)的構(gòu)成了解HTML，能夠闡述HTML的作用了解CSS，能夠闡述CSS的作用了解JavaScript，能夠闡述JavaScript的作用了解瀏覽器，能夠列舉當(dāng)前常見的瀏覽器，并介紹它們各自所使用的內(nèi)核掌握VisualStudioCode的用法，能夠使用該工具編寫網(wǎng)頁(yè)代碼學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)認(rèn)識(shí)網(wǎng)頁(yè)了解網(wǎng)頁(yè)名詞解釋了解Web標(biāo)準(zhǔn)熟悉HTML了解CSS了解JavaScript了解網(wǎng)頁(yè)的展示平臺(tái)——瀏覽器了解VisualStudioCode的安裝和設(shè)置掌握VisualStudioCode的使用掌握√階段案例——?jiǎng)?chuàng)建第一個(gè)網(wǎng)頁(yè)掌握第2章初識(shí)HTML5學(xué)習(xí)單元初識(shí)HTML5課時(shí)6課時(shí)學(xué)習(xí)目標(biāo)了解HTML5的優(yōu)勢(shì)，能夠?qū)ζ鋬?yōu)勢(shì)進(jìn)行歸納總結(jié)了解HTML5的基本結(jié)構(gòu)，能夠區(qū)分HTML5和XHTML的結(jié)構(gòu)差異了解標(biāo)簽的分類，能夠闡述單標(biāo)簽和雙標(biāo)簽的差異熟悉標(biāo)簽的關(guān)系，能夠設(shè)置具有嵌套和并列關(guān)系的標(biāo)簽掌握標(biāo)簽屬性的用法，能夠?yàn)闃?biāo)簽添加對(duì)應(yīng)的屬性熟悉HTML5頭部相關(guān)標(biāo)簽，能夠歸納頭部各類標(biāo)簽的作用掌握HTML文本控制標(biāo)簽的用法，能夠使用不同類型的標(biāo)簽定義文本掌握HTML圖像標(biāo)簽的用法，能夠在網(wǎng)頁(yè)中定義圖像學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)HTML5的優(yōu)勢(shì)了解HTML5的基本結(jié)構(gòu)了解標(biāo)簽的分類了解標(biāo)簽間的關(guān)系熟悉標(biāo)簽的屬性掌握√HTML5頭部相關(guān)標(biāo)簽熟悉頁(yè)面格式化標(biāo)簽掌握√文本格式化標(biāo)簽掌握√HTML實(shí)體掌握√常見圖像格式掌握√插入圖像掌握√階段案例——制作新聞頁(yè)面掌握第3章初識(shí)CSS3學(xué)習(xí)單元初識(shí)CSS3課時(shí)6課時(shí)學(xué)習(xí)目標(biāo)了解結(jié)構(gòu)與表現(xiàn)分離的含義，能夠闡述結(jié)構(gòu)與表現(xiàn)分離的作用了解CSS3的優(yōu)勢(shì)，能夠闡述CSS3的優(yōu)勢(shì)熟悉CSS3樣式規(guī)則，能夠按照CSS樣式規(guī)則正確編寫CSS樣式代碼掌握CSS樣式的引入方式，能夠在網(wǎng)頁(yè)中引入CSS樣式掌握CSS基礎(chǔ)選擇器的用法，能夠使用CSS基礎(chǔ)選擇器設(shè)置不同的網(wǎng)頁(yè)樣式掌握CSS文本樣式屬性的用法，能夠在網(wǎng)頁(yè)中設(shè)置字體樣式屬性和文本外觀屬性掌握CSS復(fù)合選擇器的用法，能夠使用CSS復(fù)合選擇器設(shè)置不同的網(wǎng)頁(yè)樣式熟悉CSS層疊性和繼承性，能夠運(yùn)用CSS的層疊性和繼承性優(yōu)化代碼結(jié)構(gòu)熟悉CSS優(yōu)先級(jí)規(guī)則，能夠區(qū)分復(fù)合選擇器權(quán)重的大小學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)結(jié)構(gòu)與表現(xiàn)分離了解CSS3的優(yōu)勢(shì)了解CSS樣式規(guī)則熟悉引入CSS樣式掌握√CSS基礎(chǔ)選擇器掌握√字體樣式屬性掌握√文本外觀屬性掌握√CSS復(fù)合選擇器掌握√√CSS層疊性和繼承性熟悉√CSS優(yōu)先級(jí)熟悉√階段案例——制作活動(dòng)通知頁(yè)面掌握第4章CSS3中其他類型的選擇器學(xué)習(xí)單元CSS3中其他類型的選擇器課時(shí)8課時(shí)學(xué)習(xí)目標(biāo)熟悉屬性選擇器的用法，能夠闡明不同屬性選擇器的特點(diǎn)掌握關(guān)系選擇器的用法，能夠使用關(guān)系選擇器選擇父標(biāo)簽中嵌套的子標(biāo)簽掌握結(jié)構(gòu)化偽類選擇器的用法，能夠使用不同功能的結(jié)構(gòu)化偽類選擇器精確選擇對(duì)應(yīng)的標(biāo)簽掌握偽元素選擇器的用法，能夠使用偽元素選擇器控制標(biāo)簽的樣式學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)E[attribute^=value]選擇器熟悉E[attribute$=value]選擇器熟悉E[attribute*=value]選擇器熟悉子代關(guān)系選擇器掌握√兄弟關(guān)系選擇器掌握√:root選擇器掌握:not選擇器掌握:only-child

選擇器掌握√:first-child選擇器和:last-child選擇器掌握√:nth-child(n)選擇器和:nth-last-child(n)選擇器掌握√:first-of-type選擇器和:last-of-type選擇器掌握√:nth-of-type(n)選擇器和:nth-last-of-type(n)選擇器掌握√:empty選擇器掌握:before選擇器掌握√:after選擇器掌握√階段案例——制作列車時(shí)刻表掌握第5章盒子模型學(xué)習(xí)單元盒子模型課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)了解盒子模型的概念，能夠闡述盒子模型的基本結(jié)構(gòu)了解盒子模型的相關(guān)屬性，能夠利用這些屬性設(shè)置盒子模型熟悉元素的類型，能夠說(shuō)明塊元素和行內(nèi)元素的區(qū)別和用途掌握<div>標(biāo)簽和<span>標(biāo)簽的用法，能夠使用這兩個(gè)標(biāo)簽搭建頁(yè)面模塊掌握元素類型的轉(zhuǎn)換方法，能夠轉(zhuǎn)換不同類型的元素了解塊元素垂直外邊距的合并規(guī)則，能夠根據(jù)這個(gè)規(guī)則合理設(shè)置頁(yè)面模塊學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)認(rèn)識(shí)盒子模型了解邊框?qū)傩哉莆铡虄?nèi)邊距屬性掌握√外邊距屬性掌握√背景屬性掌握√寬度屬性與高度屬性掌握透明度掌握?qǐng)A角邊框掌握√圖像邊框掌握陰影掌握√√漸變掌握√√多背景圖像掌握調(diào)整背景圖像的屬性掌握元素的類型了解<div>標(biāo)簽和<span>標(biāo)簽掌握√元素類型的轉(zhuǎn)換掌握√相鄰塊元素垂直外邊距的合并掌握√嵌套塊元素垂直外邊距的合并掌握√階段案例——制作音樂(lè)排行榜掌握第6章列表和超鏈接學(xué)習(xí)單元列表和超鏈接課時(shí)6課時(shí)學(xué)習(xí)目標(biāo)掌握無(wú)序列表、有序列表及定義列表的使用，可以制作常見的網(wǎng)頁(yè)模塊掌握使用CSS控制列表樣式的方法，能夠設(shè)置不同樣式的列表掌握超鏈接標(biāo)簽的使用，能夠使用超鏈接標(biāo)簽設(shè)置網(wǎng)頁(yè)元素掌握用鏈接偽類控制超鏈接的方法，能夠設(shè)置不同的鏈接顯示效果學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)無(wú)序列表掌握√有序列表掌握定義列表掌握列表的嵌套掌握l(shuí)ist-style-type屬性掌握l(shuí)ist-style-image屬性掌握√list-style-position屬性掌握√list-style屬性掌握√創(chuàng)建超鏈接掌握√錨點(diǎn)鏈接掌握√用鏈接偽類控制超鏈接掌握√階段案例——制作新聞列表掌握第7章表格和表單學(xué)習(xí)單元表格和表單課時(shí)8課時(shí)學(xué)習(xí)目標(biāo)熟悉表格的用法，能夠創(chuàng)建表格并設(shè)置表格樣式了解表單的構(gòu)成，能夠闡明表單各構(gòu)成部分的作用掌握創(chuàng)建表單的方法，能夠在網(wǎng)頁(yè)中創(chuàng)建表單了解表單控件，能夠使用不同類型的表單控件豐富表單功能了解HTML5表單新屬性，能夠?qū)⑦@些新屬性應(yīng)用到網(wǎng)頁(yè)制作中熟悉用CSS控制表單樣式的方法，能夠使用CSS設(shè)置表單樣式學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)創(chuàng)建表格熟悉表格標(biāo)簽的屬性掌握用CSS控制表格樣式-控制表格邊框掌握√用CSS控制表格樣式-控制單元格邊距掌握√用CSS控制表格樣式-控制單元格的寬度和高度掌握√表單的構(gòu)成了解創(chuàng)建表單掌握√<input>標(biāo)簽掌握√√<textarea>標(biāo)簽掌握√<select>標(biāo)簽掌握√新的<form>標(biāo)簽屬性掌握新的表單控件掌握√新的<input>標(biāo)簽屬性掌握√用CSS控制表單樣式掌握階段案例——制作表單注冊(cè)頁(yè)面掌握第8章DIV+CSS布局學(xué)習(xí)單元DIV+CSS布局課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)了解標(biāo)簽的浮動(dòng)屬性，能夠?yàn)闃?biāo)簽設(shè)置和清除浮動(dòng)屬性了解標(biāo)簽的定位屬性，能夠使用定位屬性設(shè)置標(biāo)簽的位置熟悉overflow屬性的用法，能夠設(shè)置溢出內(nèi)容的顯示方式熟悉z-index屬性的用法，能夠設(shè)置元素的堆疊順序熟悉常見的布局類型，能夠在網(wǎng)頁(yè)中應(yīng)用不同類型的布局了解全新的HTML5結(jié)構(gòu)標(biāo)簽，能夠闡述各結(jié)構(gòu)標(biāo)簽的作用了解網(wǎng)頁(yè)模塊的命名規(guī)范，能夠按照規(guī)范要求命名網(wǎng)頁(yè)模塊學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)布局概述了解浮動(dòng)屬性掌握√√定位屬性掌握√√overflow屬性掌握√z-index屬性掌握單列布局了解兩列布局了解三列布局了解全新的HTML5結(jié)構(gòu)標(biāo)簽掌握√網(wǎng)頁(yè)模塊命名規(guī)范了解階段案例——制作通欄banner掌握第9章多媒體嵌入學(xué)習(xí)單元多媒體嵌入課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)了解視頻、音頻嵌入技術(shù)了解常用的視頻和音頻文件格式，能夠歸納HTML5支持的視頻和音頻格式掌握在HTML5中嵌入視頻的方法，能夠在頁(yè)面中添加視頻文件掌握在HTML5中嵌入音頻的方法，能夠在頁(yè)面中添加音頻文件了解HTML5中視頻、音頻的兼容問(wèn)題，能夠制作對(duì)視頻、音頻兼容性較好的網(wǎng)頁(yè)熟悉調(diào)用網(wǎng)絡(luò)音頻、視頻文件的方法，能夠調(diào)用互聯(lián)網(wǎng)中的音頻、視頻文件熟悉使用CSS控制視頻寬度和高度的方法，能夠設(shè)置視頻在網(wǎng)頁(yè)中的寬度和高度學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)多媒體嵌入技術(shù)概述了解視頻和音頻文件的格式了解在HTML5中嵌入視頻掌握√在HTML5中嵌入音頻掌握√視頻、音頻文件的兼容性問(wèn)題掌握調(diào)用網(wǎng)絡(luò)視頻、音頻文件熟悉用CSS控制視頻的寬度和高度熟悉階段案例——制作音樂(lè)播放頁(yè)面掌握第10章過(guò)渡、變形和動(dòng)畫學(xué)習(xí)單元過(guò)渡、變形和動(dòng)畫課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)掌握過(guò)渡相關(guān)屬性的用法，能夠?yàn)榫W(wǎng)頁(yè)中的元素添加過(guò)渡效果掌握變形相關(guān)屬性的用法，能夠制作2D變形和3D變形效果掌握動(dòng)畫相關(guān)屬性的用法，能夠?yàn)榫W(wǎng)頁(yè)中的元素添加動(dòng)畫效果學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)transition-property屬性掌握transition-duration屬性掌握transition-timing-function屬性掌握transition-delay屬性掌握transition屬性掌握√√認(rèn)識(shí)transform掌握2D轉(zhuǎn)換掌握√3D轉(zhuǎn)換掌握√@keyframes規(guī)則掌握√animation-name屬性掌握animation-duration屬性掌握animation-timing-function屬性掌握animation-delay屬性掌握animation-iteration-count屬性掌握animation-direction屬性掌握animation屬性掌握√√階段案例—制作表情圖片掌握第11章繪圖和數(shù)據(jù)存儲(chǔ)原理學(xué)習(xí)單元繪圖和數(shù)據(jù)存儲(chǔ)原理課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript文件的引入方法，能夠在網(wǎng)頁(yè)中引入JavaScript文件熟悉變量的相關(guān)知識(shí)，能夠在JavaScript中定義變量掌握document對(duì)象的用法，能夠使用document對(duì)象獲取標(biāo)簽屬性了解畫布的概念，能夠闡述網(wǎng)頁(yè)中畫布的作用掌握畫布的使用方法，能夠在網(wǎng)頁(yè)中添加畫布掌握線的繪制方法，能夠在畫布中繪制線掌握線樣式的設(shè)置方法，能夠設(shè)置不同寬度、顏色和端點(diǎn)形狀的線。掌握線路徑的操作方法，能夠在畫布中進(jìn)行重置路徑和閉合路徑的操作掌握填充圖形的方法，能夠?yàn)閳D形填充顏色掌握繪制圓的方法，能夠在畫布中繪制圓學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)JavaScript的引入掌握變量熟悉document對(duì)象掌握√認(rèn)識(shí)畫布了解使用畫布掌握繪制線掌握√線的樣式掌握√線的路徑掌握√填充圖形掌握繪制圓掌握√原始存儲(chǔ)方式——Cookie了解√HTML5全新的存儲(chǔ)技術(shù)——WebStorage了解√階段案例——繪制火柴人掌握第12章實(shí)戰(zhàn)開發(fā)——制作企業(yè)網(wǎng)站頁(yè)面學(xué)習(xí)單元實(shí)戰(zhàn)開發(fā)——制作企業(yè)網(wǎng)站頁(yè)面課時(shí)5課時(shí)學(xué)習(xí)目標(biāo)熟悉網(wǎng)站設(shè)計(jì)規(guī)劃的基本流程，能夠整體規(guī)劃網(wǎng)站頁(yè)面了解創(chuàng)建項(xiàng)目根目錄的方法，能夠創(chuàng)建項(xiàng)目根目錄掌握網(wǎng)站靜態(tài)頁(yè)面的搭建技巧，完成項(xiàng)目首頁(yè)和子頁(yè)的制作學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)掌握程度重點(diǎn)難點(diǎn)網(wǎng)站設(shè)計(jì)規(guī)劃熟悉創(chuàng)建項(xiàng)目根目錄了解搭建首頁(yè)掌握√制作模板掌握√使用模板搭建網(wǎng)頁(yè)-搭建注冊(cè)頁(yè)掌握√√使用模板搭建網(wǎng)頁(yè)-搭建個(gè)人中心頁(yè)面掌握√√使用模板搭建