《Web前端開發(fā)技術(shù)》教案全套 李保安 模塊1-9　Web基礎(chǔ)知識(shí)-綜合實(shí)戰(zhàn)

PAGEPAGE2《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊1Web基礎(chǔ)知識(shí)任務(wù)1.1“尋找家鄉(xiāng)記憶”網(wǎng)站制作準(zhǔn)備1.1.1認(rèn)識(shí)網(wǎng)頁(yè)1.1.2網(wǎng)頁(yè)與網(wǎng)站1.1.3網(wǎng)頁(yè)的基本構(gòu)成元素1.1.4網(wǎng)站的建設(shè)流程1.1.5網(wǎng)頁(yè)的設(shè)計(jì)基礎(chǔ)課后練習(xí)課時(shí)1教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．了解網(wǎng)頁(yè)、網(wǎng)站，以及網(wǎng)頁(yè)的基本構(gòu)成元素。2．理解網(wǎng)頁(yè)的設(shè)計(jì)基本原則、色彩搭配及設(shè)計(jì)要點(diǎn)。3．了解HTML5。4．了解常用的幾種開發(fā)工具，掌握VSCode開發(fā)工具的安裝。5．掌握網(wǎng)站的建設(shè)流程。6．掌握站點(diǎn)的創(chuàng)建方法。7．掌握網(wǎng)頁(yè)文檔的創(chuàng)建與保存。8．掌握網(wǎng)站的運(yùn)行。能力目標(biāo)能夠安裝VSCode開發(fā)工具，能夠在VSCode中創(chuàng)建“尋找家鄉(xiāng)記憶”（Memoriesofhome）網(wǎng)站，能夠創(chuàng)建和保存網(wǎng)頁(yè)文檔，能夠運(yùn)行程序。重點(diǎn)難點(diǎn)及其處理重點(diǎn):（1）掌握網(wǎng)站的建設(shè)流程。（2）掌握站點(diǎn)的創(chuàng)建方法。（3）掌握網(wǎng)頁(yè)文檔的創(chuàng)建與保存。（4）掌握網(wǎng)站的運(yùn)行。難點(diǎn)：HTML5、常用的開發(fā)工具、開發(fā)工具的安裝處理方法：結(jié)合“尋找家鄉(xiāng)記憶”網(wǎng)站制作準(zhǔn)備，下載VSCode安裝包，安裝VisualStudioCode，創(chuàng)建站點(diǎn)，整理素材，創(chuàng)建和保存網(wǎng)頁(yè)文檔，最后運(yùn)行網(wǎng)站。教學(xué)方法（1）講授+上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生學(xué)習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊2備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊2HTML5語(yǔ)言基礎(chǔ)任務(wù)2.1制作“校史館參觀需知”網(wǎng)頁(yè)2.1.1HTML5文檔的格式2.1.2基本標(biāo)簽2.1.3序列標(biāo)簽任務(wù)2.2制作“家鄉(xiāng)美食及制作流程展示”網(wǎng)頁(yè)2.2.1圖像類型及圖像標(biāo)簽2.2.2路徑分類2.2.3鏈接標(biāo)簽2.2.4鏈接的分類課后練習(xí)課時(shí)2教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．了解HTML5文檔的格式。2．掌握HTML中常用的基本標(biāo)簽。3．掌握HTML中序列標(biāo)簽的語(yǔ)法。4．了解圖像類型，掌握?qǐng)D像標(biāo)簽的語(yǔ)法及屬性。5．掌握超鏈接標(biāo)簽的基本結(jié)構(gòu)和屬性。6．了解鏈接的分類。能力目標(biāo)能夠利用基本標(biāo)簽、序列標(biāo)簽、圖像標(biāo)簽和超鏈接標(biāo)簽制作網(wǎng)頁(yè)。重點(diǎn)難點(diǎn)及其處理重點(diǎn):（1）HTML中常用的基本標(biāo)簽。（2）HTML中序列標(biāo)簽。難點(diǎn)：（1）會(huì)使用鏈接標(biāo)簽。（2）會(huì)使用圖像標(biāo)簽。處理方法：結(jié)合“校史館參觀需知”網(wǎng)頁(yè)和“家鄉(xiāng)美食及制作流程展示”網(wǎng)頁(yè)的講授及演示操作介紹本模塊中的知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生學(xué)習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊3備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊3HTML5中新增的標(biāo)簽及屬性任務(wù)3.1制作“古都花城洛陽(yáng)代表性古跡”網(wǎng)頁(yè)3.1.1語(yǔ)義化標(biāo)簽3.1.2分組標(biāo)簽任務(wù)3.2制作“數(shù)字圖書館”網(wǎng)頁(yè)3.2.1頁(yè)面交互標(biāo)簽3.2.2全局屬性課后練習(xí)課時(shí)2教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．掌握HTML5中新增的語(yǔ)義化標(biāo)簽。2．掌握分組標(biāo)簽。3．掌握頁(yè)面交互標(biāo)簽中各個(gè)標(biāo)簽的屬性。4．掌握全局屬性中各個(gè)屬性的語(yǔ)法和屬性。能力目標(biāo)能夠利用語(yǔ)義化標(biāo)簽、分組標(biāo)簽、頁(yè)面交互標(biāo)簽和全局屬性制作網(wǎng)頁(yè)。重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）語(yǔ)義化標(biāo)簽。（2）頁(yè)面交互標(biāo)簽。（3）全局屬性。難點(diǎn)：利用語(yǔ)義化標(biāo)簽、分組標(biāo)簽、頁(yè)面交互標(biāo)簽和全局屬性制作網(wǎng)頁(yè)。處理方法：結(jié)合“古都花城洛陽(yáng)代表性古跡”網(wǎng)頁(yè)和“數(shù)字圖書館”網(wǎng)頁(yè)的講授及演示操作介紹本模塊中的知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊4。備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊4CSS基礎(chǔ)任務(wù)4.1制作“美文賞析”網(wǎng)頁(yè)4.1.1CSS簡(jiǎn)介4.1.2CSS的基本語(yǔ)法4.1.3CSS的基本屬性4.1.4CSS樣式分類任務(wù)4.2制作“大學(xué)生身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè)4.2.1id選擇器4.2.2標(biāo)簽選擇器和類選擇器4.2.3偽類選擇器4.2.4表格任務(wù)4.3制作“名人故事”網(wǎng)頁(yè)4.3.1復(fù)合選擇器4.3.2通配符選擇器課后練習(xí)課時(shí)3教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．了解CSS，掌握CSS的基本語(yǔ)法和基本屬性。2．掌握內(nèi)聯(lián)式、嵌入式和外鏈?zhǔn)降恼Z(yǔ)法。3．掌握CSS中的選擇器，如id選擇器、標(biāo)簽選擇器、類選擇器及偽類選擇器。4．掌握表格基本標(biāo)簽的使用。能力目標(biāo)能夠利用CSS中的各種選擇器美化網(wǎng)頁(yè)；能夠使用表格中的標(biāo)記在網(wǎng)頁(yè)中創(chuàng)建表格；能夠使HTML和CSS結(jié)合起來(lái)完成網(wǎng)頁(yè)“內(nèi)容+樣式”的設(shè)計(jì)。重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）內(nèi)聯(lián)式、嵌入式和外鏈?zhǔn)健＃?）CSS中的選擇器。（3）表格。難點(diǎn)：能夠使HTML和CSS來(lái)完成網(wǎng)頁(yè)制作處理方法：結(jié)合“美文賞析”網(wǎng)頁(yè)、“大學(xué)生身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè)和“名人故事”網(wǎng)頁(yè)的講授及演示操作介紹本模塊中的知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊5備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊5盒子模型及應(yīng)用任務(wù)5.1制作“學(xué)習(xí)日用百科”網(wǎng)頁(yè)5.1.1盒子模型的概念5.1.2邊框的設(shè)置5.1.3內(nèi)邊距和外邊距的設(shè)置任務(wù)5.2制作網(wǎng)頁(yè)導(dǎo)航條5.2.1元素的類型和轉(zhuǎn)換5.2.2Flex布局的用法5.2.3overflow屬性的用法5.2.4浮動(dòng)的應(yīng)用及清除任務(wù)5.3制作“地域特產(chǎn)推介”網(wǎng)頁(yè)5.3.1元素的定位和偏移5.3.2靜態(tài)定位和相對(duì)定位5.3.3絕對(duì)定位和固定定位5.3.4z-index層疊等級(jí)屬性任務(wù)5.4制作企業(yè)網(wǎng)站廣告欄5.4.1文字陰影和盒子陰影5.4.2漸變5.4.3Web字體圖標(biāo)的應(yīng)用任務(wù)5.5制作黃河景色展示網(wǎng)頁(yè)5.5.1過(guò)渡5.5.2變形5.5.3動(dòng)畫課后練習(xí)課時(shí)5教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．理解盒子模型的概念。2．掌握邊框、內(nèi)邊距、外邊距的設(shè)置。3．了解元素的類型和轉(zhuǎn)換。4．掌握Flex布局、overflow屬性、浮動(dòng)的用法。5．了解元素的定位和偏移，掌握靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位的使用。6．掌握文字陰影、盒子陰影及漸變的使用。7．掌握過(guò)渡、變形和動(dòng)畫的使用。能力目標(biāo)能夠利用邊框的設(shè)置、Flex布局的用法、元素的定位等對(duì)頁(yè)面進(jìn)行布局；能夠利用文字陰影、盒子陰影、漸變等給網(wǎng)頁(yè)增加效果；能夠利用過(guò)渡、變形和動(dòng)畫制作動(dòng)態(tài)網(wǎng)頁(yè)。重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）邊框、內(nèi)邊距、外邊距的設(shè)置。（2）Flex布局、overflow屬性、浮動(dòng)。（3）靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位。（4）文字陰影、盒子陰影及漸變（5）過(guò)渡、變形和動(dòng)畫難點(diǎn)：利用盒子模型進(jìn)行網(wǎng)頁(yè)制作。處理方法：結(jié)合“學(xué)習(xí)日用百科”網(wǎng)頁(yè)、網(wǎng)頁(yè)導(dǎo)航條、“地域特產(chǎn)推介”網(wǎng)頁(yè)、企業(yè)網(wǎng)站廣告欄和黃河景色展示網(wǎng)頁(yè)的講授及演示操作介紹知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊6。備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊6HTML5的表單及應(yīng)用任務(wù)6.1制作“讀者會(huì)員注冊(cè)”網(wǎng)頁(yè)6.1.1表單及創(chuàng)建方法6.1.2input元素及用法6.1.3其他表單元素6.1.4HTML5中新增的表單屬性課后練習(xí)課時(shí)1教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．了解表單及創(chuàng)建方法。2．掌握input元素的用法。3．掌握其他表單元素的用法。4．掌握HTML5中新增的表單屬性。能力目標(biāo)重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）input元素的用法；（2）HTML5中新增的表單屬性。難點(diǎn)：會(huì)在網(wǎng)頁(yè)中創(chuàng)建按鈕、單選按鈕、復(fù)選框、下拉列表、文本區(qū)域等元素處理方法：結(jié)合“讀者會(huì)員注冊(cè)”網(wǎng)頁(yè)的講授及演示操作介紹知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊7。備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊7網(wǎng)頁(yè)多媒體元素及應(yīng)用任務(wù)7.1制作音樂(lè)播放器網(wǎng)頁(yè)7.1.1嵌入音頻7.1.2嵌入視頻7.1.3<source>標(biāo)簽課后練習(xí)課時(shí)1教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．掌握嵌入音頻的語(yǔ)法。2．掌握嵌入視頻的語(yǔ)法。3．掌握<source>標(biāo)簽的語(yǔ)法。能力目標(biāo)能夠在網(wǎng)頁(yè)中嵌入音頻和視頻等多媒體文件。重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）嵌入音頻的語(yǔ)法。（2）嵌入視頻的語(yǔ)法。（3）<source>標(biāo)簽。難點(diǎn)：在網(wǎng)頁(yè)中嵌入音頻和視頻等多媒體文件處理方法：結(jié)合音樂(lè)播放器網(wǎng)頁(yè)的講授及演示操作介紹知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊8。備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊8JavaScript基礎(chǔ)任務(wù)8.1制作精選圖書模塊8.1.1JavaScript語(yǔ)言基礎(chǔ)8.1.2BOM對(duì)象和DOM對(duì)象8.1.3JavaScript函數(shù)8.1.4事件8.1.5JavaScript對(duì)象任務(wù)8.2制作美麗鄉(xiāng)村信息網(wǎng)網(wǎng)頁(yè)8.2.1jQuery簡(jiǎn)介8.2.2jQuery的下載與引入8.2.3jQuery選擇器8.2.4jQuery的DOM制作8.2.5jQuery事件課后練習(xí)課時(shí)2教學(xué)目標(biāo)及要求知識(shí)目標(biāo)1．了解JavaScript的特點(diǎn)和語(yǔ)法結(jié)構(gòu)。2．掌握BOM和DOM對(duì)象的使用。3．掌握J(rèn)avaScript中各種函數(shù)的語(yǔ)法。4．掌握J(rèn)avaScript中各種對(duì)象的語(yǔ)法。5．掌握jQuery選擇器的使用。6．掌握jQuery的DOM制作。能力目標(biāo)能夠利用JavaScript編寫程序，并能夠在HTML中引入JavaScript來(lái)制作網(wǎng)頁(yè)；能夠下載引入jQuery制作網(wǎng)頁(yè)。重點(diǎn)難點(diǎn)及其處理重點(diǎn)：（1）JavaScript中各種函數(shù);（2）JavaScript中各種對(duì)象。（3）jQuery選擇器。難點(diǎn)：會(huì)引入JavaScript和jQuery制作網(wǎng)頁(yè)。處理方法：結(jié)合精選圖書模塊和美麗鄉(xiāng)村信息網(wǎng)網(wǎng)頁(yè)的講授及演示操作介紹知識(shí)點(diǎn)，并進(jìn)行針對(duì)性的實(shí)訓(xùn)練習(xí)。教學(xué)方法（1）講授+學(xué)生上機(jī)練習(xí)（2）加強(qiáng)課堂指導(dǎo)，及時(shí)解決學(xué)生練習(xí)中出現(xiàn)的問(wèn)題。參考文獻(xiàn)及其要求課外作業(yè)預(yù)習(xí)：模塊9。備注

《Web前端開發(fā)技術(shù)》教學(xué)方案內(nèi)容(標(biāo)題)模塊9綜合實(shí)戰(zhàn)實(shí)戰(zhàn)1制作河南非遺推介展示網(wǎng)網(wǎng)頁(yè)效果圖制作過(guò)程代碼分析實(shí)戰(zhàn)2制作買多多購(gòu)物平臺(tái)網(wǎng)頁(yè)效果圖制作過(guò)程代碼分析課時(shí)4教學(xué)目標(biāo)及要求通過(guò)本模塊的實(shí)戰(zhàn)練習(xí)，學(xué)生將能夠有效地控制頁(yè)面的樣式，包括布局、顏色、字體、間距等視覺(jué)元素，以確保網(wǎng)頁(yè)的外觀符合設(shè)計(jì)要求。學(xué)生學(xué)會(huì)利用JavaSc