《Web前端開發(fā)技術(shù)》課程教學(xué)設(shè)計(jì)方案

《Web模塊名稱 涉及學(xué)問點(diǎn)Web網(wǎng)站相關(guān)的根本概念;常用的Web前端開發(fā)工具、

任務(wù)設(shè)計(jì) 各任務(wù)所用資源名稱11《Web1Web第一模塊：HTML根底及文本使用

掃瞄器工具。HTML文檔的根本構(gòu)造。標(biāo)記類型、標(biāo)記語(yǔ)法。網(wǎng)頁(yè)添加注釋。元信息meta標(biāo)記的作用。文本格式化標(biāo)記類型與各種樣式。使用段落與排版標(biāo)記。列表的類型。無序列表、有序列表標(biāo)記語(yǔ)法及屬性語(yǔ)法。使用嵌套列表設(shè)計(jì)小型網(wǎng)站首頁(yè)。超鏈接的根本標(biāo)記語(yǔ)法和

11、2、3、4、5視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F01、F02資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R011：6、12F03F04、F05

2《Web2HTML3《Web3HTML《Web前端開發(fā)技術(shù)》第4講文本的使用〔上；《Web前端開發(fā)技術(shù)》第5講文本的使用〔下；2文本輔導(dǎo)：F01HTML.docx文本輔導(dǎo)：F02HTML.docx3R01HTML.docx11《Web62《Web122超鏈接與框架 屬性語(yǔ)法。使用超鏈接實(shí)現(xiàn)電子郵件鏈接。使用浮動(dòng)框架實(shí)現(xiàn)內(nèi)嵌頁(yè)面的顯示。

任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R02

文本輔導(dǎo)：F03HTML.docx文本輔導(dǎo)：F04列表與超鏈接的樣式.docx3R02超鏈接的應(yīng)用.docx第三模塊：表格與表單第四模塊：圖像與多媒體文件

設(shè)計(jì)表格全部標(biāo)記和屬性。表格行標(biāo)記的屬性及設(shè)置方法。表格單元格的跨行與跨列屬性的設(shè)置方法。表格的嵌套方法。表格中嵌入各種頁(yè)面元素。表單構(gòu)造語(yǔ)法及屬性語(yǔ)法。表單控件(元素)標(biāo)記語(yǔ)法及屬性語(yǔ)法。表單域和域標(biāo)題標(biāo)記語(yǔ)法。img標(biāo)記語(yǔ)法及屬性。marquee標(biāo)記語(yǔ)法及屬性。嵌入多媒體文件標(biāo)記語(yǔ)法及屬性。

1：7、8、9、10頻；F06F07、F08任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R03、R041：11任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F09、F10資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R05、R06動(dòng)手實(shí)踐。

1《Web7講生疏表格標(biāo)記；《Web前端開發(fā)技術(shù)》第8講表單使用〔上；《Web前端開發(fā)技術(shù)》第9講表單使用〔中；《Web前端開發(fā)技術(shù)》第10講表單使用〔下；2文本輔導(dǎo)：F06HTML_表格實(shí)例.docx文本輔導(dǎo)：F07表單下拉菜單和下拉列表效果.doc文本輔導(dǎo)：F08HTML5.doc3參考資料：R03常用表單控件設(shè)計(jì)用戶注冊(cè)界面.docx參考資料:R04用表單控件及屬性設(shè)計(jì)信息登記表.doc1《Web112文本輔導(dǎo)：F09圖片陰影與圖片背景設(shè)置.docx文本輔導(dǎo)：F10HTML5.doc31R05圖像的漸變效果設(shè)置.doc2.參考資料：R06HTML5.doc第五模塊：HTML5及其增元素屬性

HTML5特性與頁(yè)面構(gòu)造。HTML5增元素和增屬性。

1：1314152：學(xué)習(xí)文本輔導(dǎo)中F11、F08資料；

1《Web13HTML5《Web14HTML53《Web15HTML5HTML5增表單元素及增屬性的設(shè)置方法。

任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R07動(dòng)手實(shí)踐。

2文本輔導(dǎo)：F11HTML5.docx文本輔導(dǎo)：F08HTML5.doc3參考資料：R07HTML5.docx1：16、17、18、19、CSS根本概念、CSS類型。20、214種CSS樣式定義的方法。2：F12F13、

1《Web16CSS《WEB17CSS《WEB18DIV與SPAN;《WEB19CSS《WEB20CSS第六模塊：CSS CSS中字體、排版、顏色、根底及樣式屬性 背景、列表等屬性設(shè)置。

F14

《WEB212DIV和SPAN標(biāo)記語(yǔ)法及標(biāo)任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料1.文本輔導(dǎo)：F12CSS.docx記語(yǔ)法。

R08

文本輔導(dǎo)：F13選擇器及偽類鏈接的綜合使用.doc文本輔導(dǎo)：F14CSS.doc3參考資料：R08CSS.docx第七模塊：CSS盒子模型與排版

CSS樣式設(shè)置中常用的單位。CSS盒子模型。邊框、邊界、填充及內(nèi)容等屬性及設(shè)置方法。DIV標(biāo)記的CSS各類屬性。

1：22、23、24、25、43F15F16、

1《WEB22CSS〔上〕;《WEB23CSS〔下〕;《WEB24CSS《WEB25CSS3《WEB432F15.doc文本輔導(dǎo)：F16盒子邊框的樣式設(shè)置.docx文本輔導(dǎo)：F17盒子浮動(dòng)float.doc常見的頁(yè)面布局類型。 F17、F18、F19、F20、F21、F22資布局 DIV構(gòu)造及CSS規(guī)章。 料；CSS3任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料特性。設(shè)置與應(yīng)用CSS3R09、R10、R11使用DIV+CSS進(jìn)展頁(yè)面布局。

文本輔導(dǎo)：F18盒子相對(duì)定位與相對(duì)定位設(shè)置.doc文本輔導(dǎo)：F19運(yùn)用浮動(dòng)與定位組織頁(yè)面.doc文本輔導(dǎo)：F20塊元素與行內(nèi)元素的使用.doc文本輔導(dǎo)：F21CSS3.docx文本輔導(dǎo)：F22CSS3.doc3參考資料：R09運(yùn)用盒子模型屬性實(shí)現(xiàn)彈出框頁(yè)效果.docx參考資料：R10運(yùn)用元素的浮動(dòng)和定位實(shí)現(xiàn)焦點(diǎn)圖效果.docx參考資料：R11CSS32D3D.docx第八模塊：JavaScript編程根底

JavaScript程序的概念與作用。JavaScript標(biāo)識(shí)符和變量的概念及其使用方法。JavaScript常用運(yùn)算符和表達(dá)式概念。JavaScript環(huán)三種程序把握構(gòu)造語(yǔ)法。

1：26、27、28、29、30、31、32F23F24、F25、F26、F27任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R12、R13、R14

11《WEB26JavaScript2《WEB27JavaScript3《WEB28講JS4《WEB29講JS〔上〕;5《WEB30JS〔下〕;6《WEB31javascript〔上〕;《WEB前端開發(fā)技術(shù)》第32講javascript函數(shù)〔下JavaScript函數(shù)的定義方法與使用。

2文本輔導(dǎo)：F23Javascript.docx2.文本輔導(dǎo)：F24String對(duì)象與Array.docx3.文本輔導(dǎo)：F25if.docx文本輔導(dǎo)：F26JavaScript的for.docx文本輔導(dǎo)：F27函數(shù)定義和調(diào)用.docx3參考資料：R12深入學(xué)習(xí)循環(huán)語(yǔ)句.docx參考資料：R13函數(shù)應(yīng)用.docx參考資料：R14JavaScript.docx第九模塊：JavaScript大事分析BOM

JavaScript大事類型與大事的概念。大事句柄與大事處理代碼相關(guān)聯(lián)的方式。利用表單的提交及重置事件對(duì)表單的數(shù)據(jù)進(jìn)展校驗(yàn)。鼠標(biāo)大事中的鼠標(biāo)單擊及鼠標(biāo)移動(dòng)大事。常用的鍵盤及窗口大事。JavaScript內(nèi)置對(duì)象的常用屬性及方法。文檔對(duì)象模型的節(jié)點(diǎn)樹的構(gòu)建及節(jié)點(diǎn)類型的劃分。JavaScriptArrayStringDateNumber、Math等對(duì)象的常用屬性和

34、35、44視頻；任務(wù)2：學(xué)習(xí)文本輔導(dǎo)中F28、F29資料；任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料R151：36、37、38、39、40、41、42F16F17、F18

11《WEB33講JS2《WEB343《WEB354《WEB442文本輔導(dǎo)：F28鍵盤大事.docx文本輔導(dǎo)：F29鼠標(biāo)大事的種類.docx3參考資料：R15JS.docx11《WEB36講JavaScript〔上〕;2《WEB37講JavaScript〔中〕;3《WEB38講JavaScript〔下〕;4《WEB前端開發(fā)技術(shù)》第39講DOM節(jié)點(diǎn)操作〔上；方法。 任務(wù)3：實(shí)踐訓(xùn)練，完成參考資料BOM構(gòu)造圖掃瞄器對(duì)象模型的各對(duì)象 中R16、R17應(yīng)用。的層次關(guān)系。window對(duì)象的定時(shí)器及對(duì)話框方法。navigator、screen、history、location等對(duì)象的屬性和