《Web前端開發(fā)技術(shù)》課程教學(xué)設(shè)計(jì)方案模塊名稱涉及知識(shí)點(diǎn)任務(wù)設(shè)計(jì)各任務(wù)所用資源名稱第一模塊：HTML基礎(chǔ)及文本使用Web網(wǎng)站相關(guān)的基本概念;常用的Web前端開發(fā)工具、瀏覽器工具。HTML文檔的基本結(jié)構(gòu)。標(biāo)記類型、標(biāo)記語(yǔ)法。網(wǎng)頁(yè)添加注釋。元信息meta標(biāo)記的作用。文本格式化標(biāo)記類型與各種樣式。使用段落與排版標(biāo)記。任務(wù)1：觀看第1、2、3、4、5講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F01、F02資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R01動(dòng)手實(shí)踐。任務(wù)1視頻資源：1《Web前端開發(fā)技術(shù)》第1講Web前端開發(fā)技術(shù)概述；2《Web前端開發(fā)技術(shù)》第2講HTML文檔結(jié)構(gòu)；3《《Web前端開發(fā)技術(shù)》第3講HTML基本語(yǔ)法；4《Web前端開發(fā)技術(shù)》第4講文本的使用（上）；5《《Web前端開發(fā)技術(shù)》第5講文本的使用（下）；任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F01HTML基本標(biāo)簽應(yīng)用.docx2.文本輔導(dǎo)：F02HTML文本樣式屬性設(shè)置.docx任務(wù)3參考資料：R01HTML圖文混排動(dòng)手實(shí)踐.docx第二模塊：列表、超鏈接與框架列表的類型。無序列表、有序列表標(biāo)記語(yǔ)法及屬性語(yǔ)法。使用嵌套列表設(shè)計(jì)小型網(wǎng)站首頁(yè)。超鏈接的基本標(biāo)記語(yǔ)法和屬性語(yǔ)法。使用超鏈接實(shí)現(xiàn)電子郵件鏈接。使用浮動(dòng)框架實(shí)現(xiàn)內(nèi)嵌頁(yè)面的顯示。任務(wù)1：觀看第6、12講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F03、F04、F05資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R02應(yīng)用案例。任務(wù)1視頻資源：1《Web前端開發(fā)技術(shù)》第6講列表的使用；2《Web前端開發(fā)技術(shù)》第12講超鏈接與框架的使用.；任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F03HTML列表標(biāo)簽的屬性和使用.docx2.文本輔導(dǎo)：F04列表與超鏈接的樣式.docx任務(wù)3參考資料：R02超鏈接的應(yīng)用.docx第三模塊：表格與表單設(shè)計(jì)表格所有標(biāo)記和屬性。表格行標(biāo)記的屬性及設(shè)置方法。表格單元格的跨行與跨列屬性的設(shè)置方法。表格的嵌套方法。表格中嵌入各種頁(yè)面元素。表單結(jié)構(gòu)語(yǔ)法及屬性語(yǔ)法。表單控件(元素)標(biāo)記語(yǔ)法及屬性語(yǔ)法。表單域和域標(biāo)題標(biāo)記語(yǔ)法。任務(wù)1：觀看第7、8、9、10講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F06、F07、F08資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R03、R04動(dòng)手實(shí)踐。任務(wù)1視頻資源：1《Web前端開發(fā)技術(shù)》第7講認(rèn)識(shí)表格標(biāo)記；2《Web前端開發(fā)技術(shù)》第8講表單使用（上）；3《Web前端開發(fā)技術(shù)》第9講表單使用（中）；4《Web前端開發(fā)技術(shù)》第10講表單使用（下）；任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F06HTML_表格實(shí)例.docx2.文本輔導(dǎo)：F07表單下拉菜單和下拉列表效果.doc3.文本輔導(dǎo)：F08HTML5表單中新增屬性使用.doc任務(wù)3參考資料：1.參考資料：R03常用表單控件設(shè)計(jì)用戶注冊(cè)界面.docx2.參考資料:R04用表單控件及屬性設(shè)計(jì)信息登記表.doc第四模塊：圖像與多媒體文件圖像img標(biāo)記語(yǔ)法及屬性。滾動(dòng)文字marquee標(biāo)記語(yǔ)法及屬性。嵌入多媒體文件標(biāo)記語(yǔ)法及屬性。任務(wù)1：觀看第11講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F09、F10資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R05、R06動(dòng)手實(shí)踐。任務(wù)1視頻資源：《Web前端開發(fā)技術(shù)》第11講圖像與多媒體的使用；任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F09圖片陰影與圖片背景設(shè)置.docx2.文本輔導(dǎo)：F10HTML5音視頻的嵌入設(shè)計(jì)案例.doc任務(wù)3參考資料：1參考資料：R05圖像的漸變效果設(shè)置.doc參考資料：R06HTML5音視頻的嵌入設(shè)計(jì)案例.doc第五模塊：HTML5及其新增元素屬性HTML5新特性與頁(yè)面結(jié)構(gòu)。HTML5新增元素和新增屬性。HTML5新增表單元素及新增屬性的設(shè)置方法。任務(wù)1：觀看第13、14、15講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F11、F08資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R07動(dòng)手實(shí)踐。任務(wù)1視頻資源：1《Web前端開發(fā)技術(shù)》第13講HTML5概述；2《Web前端開發(fā)技術(shù)》第14講HTML5的文檔結(jié)構(gòu)；3《Web前端開發(fā)技術(shù)》第15講HTML5新增表單輸入類型與屬性;任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F11HTML5的部分新增元素用法.docx2.文本輔導(dǎo)：F08HTML5表單中新增屬性使用.doc任務(wù)3參考資料：參考資料：R07HTML5標(biāo)簽綜合案例.docx第六模塊：CSS基礎(chǔ)及樣式屬性CSS基本概念、CSS類型。4種CSS樣式定義的方法。CSS中字體、排版、顏色、背景、列表等屬性設(shè)置。DIV和SPAN標(biāo)記語(yǔ)法及標(biāo)記語(yǔ)法。任務(wù)1：觀看第16、17、18、19、20、21講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F12、F13、F14資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R08高級(jí)應(yīng)用實(shí)現(xiàn)。任務(wù)1視頻資源：1《Web前端開發(fā)技術(shù)》第16講CSS基本語(yǔ)法規(guī)則2《WEB前端開發(fā)技術(shù)》第17講CSS定義與引用;3《WEB前端開發(fā)技術(shù)》第18講DIV與SPAN;4《WEB前端開發(fā)技術(shù)》第19講CSS字體樣式屬性;5《WEB前端開發(fā)技術(shù)》第20講CSS文本與列表樣式;6《WEB前端開發(fā)技術(shù)》第21講顏色和背景屬性;任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F12CSS樣式引用與選擇器使用.docx2.文本輔導(dǎo)：F13選擇器及偽類鏈接的綜合使用.doc3.文本輔導(dǎo)：F14CSS層疊性與選擇器優(yōu)先級(jí).doc任務(wù)3參考資料：參考資料：R08CSS文本樣式及高級(jí)特性實(shí)現(xiàn).docx第七模塊：CSS盒子模型與排版布局CSS樣式設(shè)置中常用的單位。CSS盒子模型。邊框、邊界、填充及內(nèi)容等屬性及設(shè)置方法。DIV標(biāo)記的CSS各類屬性。常見的頁(yè)面布局類型。DIV結(jié)構(gòu)及CSS規(guī)則。CSS3的轉(zhuǎn)換、過渡和動(dòng)畫等特性。設(shè)置與應(yīng)用CSS3文本效果。使用DIV+CSS進(jìn)行頁(yè)面布局。任務(wù)1：觀看第22、23、24、25、43講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F15、F16、F17、F18、F19、F20、F21、F22資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R09、R10、R11應(yīng)用案例。任務(wù)1視頻資源：1《WEB前端開發(fā)技術(shù)》第22講CSS盒子模型（上）;2《WEB前端開發(fā)技術(shù)》第23講CSS盒子模型（下）;3《WEB前端開發(fā)技術(shù)》第24講CSS排版與頁(yè)面布局;4《WEB前端開發(fā)技術(shù)》第25講CSS3高級(jí)應(yīng)用;5《WEB前端開發(fā)技術(shù)》第43講導(dǎo)航菜單設(shè)計(jì);任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F15運(yùn)用盒子模型相關(guān)屬性控制頁(yè)面中各個(gè)元素.doc2.文本輔導(dǎo)：F16盒子邊框的樣式設(shè)置.docx3.文本輔導(dǎo)：F17盒子浮動(dòng)float與清除浮動(dòng)影響.doc4.文本輔導(dǎo)：F18盒子相對(duì)定位與相對(duì)定位設(shè)置.doc5.文本輔導(dǎo)：F19運(yùn)用浮動(dòng)與定位組織頁(yè)面.doc6.文本輔導(dǎo)：F20塊元素與行內(nèi)元素的使用.doc7.文本輔導(dǎo)：F21CSS3屬性選擇器和結(jié)構(gòu)偽類選擇器應(yīng)用.docx8.文本輔導(dǎo)：F22CSS3綜合運(yùn)用設(shè)計(jì)推廣軟文.doc任務(wù)3參考資料：1.參考資料：R09運(yùn)用盒子模型屬性實(shí)現(xiàn)彈出框頁(yè)效果.docx2.參考資料：R10運(yùn)用元素的浮動(dòng)和定位實(shí)現(xiàn)焦點(diǎn)圖效果.docx3.參考資料：R11CSS3的2D與3D屬性方法.docx第八模塊：JavaScript編程基礎(chǔ)JavaScript程序的概念與作用。JavaScript標(biāo)識(shí)符和變量的概念及其使用方法。JavaScript常用運(yùn)算符和表達(dá)式概念。JavaScript中順序、分支、循環(huán)三種程序控制結(jié)構(gòu)語(yǔ)法。JavaScript函數(shù)的定義方法與使用。任務(wù)1：觀看第26、27、28、29、30、31、32講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F23、F24、F25、F26、F27資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R12、R13、R14應(yīng)用。任務(wù)1視頻資源：1《WEB前端開發(fā)技術(shù)》第26講JavaScript概念與作用;2《WEB前端開發(fā)技術(shù)》第27講JavaScript標(biāo)識(shí)符和變量;3《WEB前端開發(fā)技術(shù)》第28講JS常用運(yùn)算符和表達(dá)式;4《WEB前端開發(fā)技術(shù)》第29講JS程序控制結(jié)構(gòu)（上）;5《WEB前端開發(fā)技術(shù)》第30講JS程序控制結(jié)構(gòu)（下）;6《WEB前端開發(fā)技術(shù)》第31講javascript函數(shù)（上）;7《WEB前端開發(fā)技術(shù)》第32講javascript函數(shù)（下）；任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F23Javascript數(shù)據(jù)類型和變量.docx2.文本輔導(dǎo)：F24String對(duì)象與Array對(duì)象.docx3.文本輔導(dǎo)：F25if分支語(yǔ)句應(yīng)用.docx4.文本輔導(dǎo)：F26JavaScript的for循環(huán).docx5.文本輔導(dǎo)：F27函數(shù)定義和調(diào)用.docx任務(wù)3參考資料：參考資料：R12深入學(xué)習(xí)循環(huán)語(yǔ)句.docx參考資料：R13函數(shù)應(yīng)用.docx參考資料：R14JavaScript作用域.docx第九模塊：JavaScript事件分析JavaScript事件類型與事件的概念。事件句柄與事件處理代碼相關(guān)聯(lián)的方式。利用表單的提交及重置事件對(duì)表單的數(shù)據(jù)進(jìn)行校驗(yàn)。鼠標(biāo)事件中的鼠標(biāo)單擊及鼠標(biāo)移動(dòng)事件。常用的鍵盤及窗口事件。JavaScript內(nèi)置對(duì)象的常用屬性及方法。任務(wù)1：觀看第33、34、35、44講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F28、F29資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R15應(yīng)用實(shí)踐。任務(wù)1視頻資源：1《WEB前端開發(fā)技術(shù)》第33講JS事件類型及處理方法；2《WEB前端開發(fā)技術(shù)》第34講表單事件；3《WEB前端開發(fā)技術(shù)》第35講鼠標(biāo)鍵盤與窗口事件；4《WEB前端開發(fā)技術(shù)》第44講圖片切換案例任務(wù)2文本輔導(dǎo)：1.文本輔導(dǎo)：F28鍵盤事件.docx2.文本輔導(dǎo)：F29鼠標(biāo)事件的種類.docx任務(wù)3參考資料：參考資料：R15JS定時(shí)器和鼠標(biāo)事件實(shí)現(xiàn)焦點(diǎn)圖輪播效果.docx第十模塊：DOM和BOM文檔對(duì)象模型的節(jié)點(diǎn)樹的構(gòu)建及節(jié)點(diǎn)類型的劃分。JavaScript的對(duì)象類型，掌握Array、String、Date、Number、Math等對(duì)象的常用屬性和方法。BOM結(jié)構(gòu)圖瀏覽器對(duì)象模型的各對(duì)象的層次關(guān)系。window對(duì)象的定時(shí)器及對(duì)話框方法。navigator、screen、history、location等對(duì)象的屬性和方法。任務(wù)1：觀看第36、37、38、39、40、41、42講視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F16、F17、F18資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料中R16、R17應(yīng)用。任務(wù)1視頻資源：1《WEB前端開發(fā)技術(shù)》第36講JavaScript內(nèi)置對(duì)象（上）;2《WEB前端開發(fā)技術(shù)》第37講JavaScript內(nèi)置對(duì)象（中）;3《WEB前端開發(fā)技術(shù)》第38講JavaScript內(nèi)置對(duì)象（下）;4《WEB前端開發(fā)技術(shù)》第39講DOM節(jié)點(diǎn)操作（上）；5