【前端Web開(kāi)發(fā)基礎(chǔ)】課程標(biāo)準(zhǔn)

1、前端Web開(kāi)發(fā)基礎(chǔ)課程標(biāo)準(zhǔn)表1課程基本信息課程類(lèi)別專(zhuān)業(yè)課總學(xué)時(shí)64（理論：32實(shí)驗(yàn)：32）學(xué)分3開(kāi)設(shè)學(xué)期第九學(xué)期適用專(zhuān)業(yè)"3+4”分段培養(yǎng)計(jì)算機(jī)應(yīng)用技術(shù)（中職）與軟件工程（本科）專(zhuān)業(yè)授課方式理論+實(shí)驗(yàn)執(zhí)筆人審核人制定時(shí)間2015.01（一）課程性質(zhì)與任務(wù)課程性質(zhì)：Web開(kāi)發(fā)基礎(chǔ)是軟件工程專(zhuān)業(yè)培養(yǎng)課程體系中的一門(mén)專(zhuān)業(yè)必修課程，其包含了軟件行業(yè)Web開(kāi)發(fā)領(lǐng)域的關(guān)鍵技術(shù)基礎(chǔ)知識(shí)（HTML,CSS及JavaScript等）。該課程的設(shè)置充分考慮了其在Web開(kāi)發(fā)領(lǐng)域的關(guān)鍵性作用、目前市場(chǎng)廣泛的應(yīng)用需求和良好的就業(yè)前景，注重學(xué)生對(duì)理論基礎(chǔ)知識(shí)、專(zhuān)業(yè)技能的理解、掌握。課程任務(wù)：通過(guò)本課程的學(xué)習(xí)，使

2、學(xué)生理解HTML、CSS及JavaScript等基本的理論知識(shí)；掌握應(yīng)用上述理論知識(shí)，制作基本網(wǎng)頁(yè)、設(shè)計(jì)網(wǎng)頁(yè)布局、實(shí)現(xiàn)多樣化及良好客戶(hù)體驗(yàn)的頁(yè)面效果等應(yīng)用技能；培養(yǎng)學(xué)生的創(chuàng)新意識(shí)，設(shè)計(jì)特色網(wǎng)頁(yè)。（二）課程教學(xué)目標(biāo)通過(guò)本課程的學(xué)習(xí)，使學(xué)生掌握Web開(kāi)發(fā)技術(shù)的基本理論知識(shí)，具備一定的應(yīng)用開(kāi)發(fā)技能，培養(yǎng)學(xué)生工程意識(shí)、創(chuàng)新能力和素質(zhì)。1. 知識(shí)目標(biāo)（1）了解本課程內(nèi)容在Web開(kāi)發(fā)領(lǐng)域的定位與作用；（2）了解HTML、CSS及JavaScript技術(shù)的發(fā)展脈絡(luò)、趨勢(shì)及應(yīng)用前景；（3）掌握HTML中的基本元素、文字與段落元素、圖像元素、列表元素、表格元素、超鏈接元素、多媒體元素、框架元素及表單元素的語(yǔ)法、

3、屬性和參數(shù)等基礎(chǔ)知識(shí)；（4）掌握CSS中元素的語(yǔ)法、屬性和參數(shù)等基礎(chǔ)知識(shí)；（5）了解網(wǎng)頁(yè)布局的幾種方法，掌握使用CSS進(jìn)行網(wǎng)頁(yè)布局、樣式設(shè)計(jì)的基礎(chǔ)知識(shí)；（6）掌握J(rèn)avaScript中的基本語(yǔ)法知識(shí)；（7）掌握J(rèn)avaScript進(jìn)行提交內(nèi)容校驗(yàn)、生成網(wǎng)頁(yè)特效等方法。2. 能力目標(biāo)（1）具備使用HTML制作包含基本內(nèi)容的網(wǎng)頁(yè)的能力；（2）具備使用HTML及CSS等技術(shù)來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局的能力；（3）具備使用JavaScript技術(shù)來(lái)提高網(wǎng)頁(yè)交互性、體驗(yàn)性的能力；（4）具備綜合使用HTML、CSS與JavaScript的相關(guān)知識(shí)，來(lái)豐富、渲染網(wǎng)頁(yè)的能力；（5）具備根據(jù)具體應(yīng)用需求，創(chuàng)新性地設(shè)計(jì)網(wǎng)頁(yè)的

4、能力。3. 素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生具備克服困難解決問(wèn)題的意志；（2）培養(yǎng)學(xué)生養(yǎng)成嚴(yán)謹(jǐn)認(rèn)真的科學(xué)態(tài)度，耐心細(xì)致的工作作風(fēng)；（3）培養(yǎng)學(xué)生具備良好的交流溝通素養(yǎng)和創(chuàng)新精神。（三）參考學(xué)時(shí)64（理論：32實(shí)驗(yàn)：32）（四）課程學(xué)分4學(xué)分（五）課程內(nèi)容和要求（理論48學(xué)時(shí)，實(shí)驗(yàn)16學(xué)時(shí)）本課程的主要內(nèi)容有：HTML,主要包括網(wǎng)頁(yè)基本組成元素，網(wǎng)頁(yè)框架、超文本鏈接、表單、表格、層等。CSS,產(chǎn)要包括修改網(wǎng)頁(yè)元素，主要包括修改文字顏色及背景、調(diào)整字符間距、單詞間距、添加文字修飾、設(shè)置文本排列方式、設(shè)置段落縮進(jìn)、調(diào)整行高、轉(zhuǎn)換英文大小寫(xiě)、設(shè)置顏色、設(shè)置背景顏色、插入背景圖片、設(shè)置背景圖片位置、設(shè)計(jì)邊框樣式、

5、調(diào)整邊框?qū)挾?、設(shè)置邊框顏色、設(shè)置邊框?qū)傩缘?。JavaScript,包括JavaScript基本語(yǔ)法、基本數(shù)據(jù)類(lèi)型、運(yùn)算符、函數(shù)、JavaScript事件分析、圖片和多媒體文件的使用、JavaScript對(duì)象的應(yīng)用、瀏覽器內(nèi)部對(duì)象、內(nèi)置對(duì)象和方法等。本課程要求學(xué)生了解web編程技術(shù)的產(chǎn)生和發(fā)展過(guò)程，會(huì)使用HTML編寫(xiě)網(wǎng)頁(yè)，會(huì)用CSS對(duì)網(wǎng)頁(yè)樣式進(jìn)行設(shè)計(jì)，會(huì)使用JavaScript實(shí)現(xiàn)一些客戶(hù)端的數(shù)據(jù)驗(yàn)證及網(wǎng)頁(yè)特效，達(dá)到一般企業(yè)用人標(biāo)準(zhǔn)。表2課程內(nèi)容與學(xué)時(shí)安排表序號(hào)教學(xué)項(xiàng)目教學(xué)內(nèi)容與教學(xué)要束活動(dòng)設(shè)計(jì)建議參考課時(shí)（理論+實(shí)驗(yàn)）1第1章HTML、CSS、JavaScript綜述1.1 這就是HTML、C

6、SS、JavaScript的代碼1.2 HTML、CSS、JavaScript各自的角色1.3如何學(xué)習(xí)HTML、CSS、JavaScript1.4小實(shí)例HTML、（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，查找資料，課堂講授中，穿插發(fā)言、討論的形式，來(lái)進(jìn)行授課2CSS、JavaScript的1.4綜合應(yīng)用2第2章HTML基礎(chǔ)介紹2.1 HTML文檔的結(jié)構(gòu)2.2 HTML基本語(yǔ)法2.3 HTML文件的命名2.4編寫(xiě)HTML文件的注意事項(xiàng)（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，編寫(xiě)一個(gè)HTML簡(jiǎn)單文件進(jìn)行示例講解23第3章HTML文件的整體結(jié)構(gòu)3.1文件頭部?jī)?nèi)容3.2

7、主體內(nèi)容匕0。（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出關(guān)于body的程序示例進(jìn)行講解24實(shí)驗(yàn)1制作簡(jiǎn)單的HTML頁(yè)面使用網(wǎng)頁(yè)基本組成元素，編寫(xiě)一個(gè)簡(jiǎn)單的HTML頁(yè)面，運(yùn)行查看效果（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的相關(guān)HTML元素的語(yǔ)法、屬性及參數(shù)知識(shí)25第4章文字與1段落4.1編輯內(nèi)容4.2文字效果4.3文字修飾4.4段落p4.5小實(shí)例文字網(wǎng)頁(yè)（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出關(guān)于文字與段落元素的的程序示例進(jìn)行講解26第5章建立和使用列表5.1列表類(lèi)型5.2嵌套列表5.3小實(shí)例列表在網(wǎng)頁(yè)中的使用（1）采用理

8、論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出關(guān)于列表的程序示例進(jìn)行講解27第6章超鏈接6.1超鏈接概述（1）采用理論課講授26.2超鏈接的路徑6.3超鏈接的建立6.4設(shè)置圖像映射6.5小實(shí)例超鏈接的使用形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外卜，給出超鏈接的程序示例進(jìn)行講解8第7章表格的應(yīng)用7.1表格概述7.2插入表格七0匕心7.3設(shè)置表格標(biāo)記屬性7.4設(shè)置表格行與單元格7.5表格嵌套7.6小實(shí)例表格在網(wǎng)頁(yè)中的應(yīng)用（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出表格相關(guān)的程序示例進(jìn)行講解49實(shí)驗(yàn)2練習(xí)使用表格和和列表要求使用表格、列表對(duì)數(shù)據(jù)進(jìn)行格式化的

9、顯示（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的表格、列表等元素的語(yǔ)法、屬性及參數(shù)知識(shí)210第8章層的應(yīng)用8.1圖層的創(chuàng)建div8.2創(chuàng)建嵌套圖層8.3層的屬性設(shè)置8.4小實(shí)例圖層的實(shí)際應(yīng)用（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出圖層相關(guān)的程序示例進(jìn)行講解311第9章框架的應(yīng)用9.1框架概述9.2框架的基本結(jié)構(gòu)9.3設(shè)置框架9.4設(shè)置框架集frameset9.5浮動(dòng)框架）什0109.6在框架上建立鏈接9.7小實(shí)例框架的實(shí)際應(yīng)用（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出框架相關(guān)的程序示例進(jìn)行講解312實(shí)驗(yàn)3練習(xí)使用框架練習(xí)使

10、用框架，來(lái)規(guī)劃、設(shè)計(jì)頁(yè)面內(nèi)容，包括使用（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提2<frameset>及<iframe>框架技術(shù)前復(fù)習(xí)所學(xué)習(xí)的框架元素的語(yǔ)法、屬性及參數(shù)知識(shí)13第10章表單的應(yīng)用10.1表單概述10.2表單標(biāo)記form10.3信息輸入input10.4小實(shí)例表單的實(shí)際應(yīng)用（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出表單相關(guān)的程序示例進(jìn)行講解214實(shí)驗(yàn)4練習(xí)使用表單練習(xí)使用表單，包括其action及method屬性，并練習(xí)使用表單中的元素，包括文本框、列表框、文本域、單選框、復(fù)選框和按鈕等內(nèi)容（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生

11、提前復(fù)習(xí)所學(xué)習(xí)的表單及表單內(nèi)相關(guān)元素的語(yǔ)法、屬性及參數(shù)知識(shí)215第11章CSS樣式表基礎(chǔ)11.1 CSS的概述11.2 CSS的使用11.3插入CSS樣式表11.4編寫(xiě)CSS文件（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出使用CSS、編寫(xiě)簡(jiǎn)單CSS的程序示例進(jìn)行講解216第12章字體的設(shè)置12.1 設(shè)置字體font-family12.2 設(shè)置字號(hào)font-size12.3設(shè)置字體樣式font-style12.4設(shè)置字體加粗font-weight12.5設(shè)置字體變體font-variant12.6組合設(shè)置字體屬性一font（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)

12、，除講授基本知識(shí)外，給出通過(guò)CSS設(shè)置字體相關(guān)的程序示例進(jìn)行講解212.7小實(shí)例綜合設(shè)置字體17實(shí)驗(yàn)5練習(xí)使用CSS對(duì)字體進(jìn)行設(shè)置練習(xí)使用CSS,在HTML文件里進(jìn)行調(diào)用，對(duì)字體進(jìn)行設(shè)置，包括了對(duì)字體、字號(hào)、字體樣式、加粗、字體變體、字體屬性等的設(shè)置（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的表單及表單內(nèi)相關(guān)元素的語(yǔ)法、屬性及參數(shù)知識(shí)218第13章文本的精細(xì)排版13.1調(diào)整字符間距l(xiāng)etter-spacing13.2調(diào)整單詞間距word-spacing13.3添加文字修飾text-decoration13.4設(shè)置文本排列方式text-align13.5設(shè)置段落縮進(jìn)text-inden

13、t13.6調(diào)整行高line-height13.7轉(zhuǎn)換英文大小寫(xiě)text-transform13.8小實(shí)例綜合應(yīng)用文本屬性（1）采用理論課講授形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出CSS對(duì)文本進(jìn)行精密排版相關(guān)的程序示例進(jìn)行講解219實(shí)驗(yàn)6使用CSS來(lái)對(duì)文本進(jìn)行精細(xì)排版要求編寫(xiě)CSS文件，在HTML文件里進(jìn)行調(diào)用，控制DIV顯示效果，練習(xí)調(diào)整字符間距、單詞間距、文字修飾、文本排列方式、段落縮進(jìn)、行高英文大小寫(xiě)等內(nèi)容（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的CSS語(yǔ)法知識(shí)220第14章圖片和多媒體文件的使用14.1圖片14.2滾動(dòng)文字14.3插入多媒體文件（1）采用理論課講授

14、形式（2）布置學(xué)生提前預(yù)2embed14.4添加背景音樂(lè)<bgsound14.5小實(shí)例綜合設(shè)置圖片和多媒體習(xí)，除講授基本知識(shí)外，給出圖片和多媒體文件相關(guān)的程序示例進(jìn)行講解21第15章CSS樣式的高級(jí)應(yīng)用15.1列表15.2定位15.3CSS層15.4鼠標(biāo)指針ursor15.5小實(shí)例綜合設(shè)置層樣式(1)采用理論課講授形式(2)布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出CSS樣式相關(guān)高級(jí)應(yīng)用的程序示例進(jìn)行講解222實(shí)驗(yàn)7熟練使用CSS+DIV等元素進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)理解網(wǎng)頁(yè)布局的幾種方法，重點(diǎn)使用CSS+DIV進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)(1) 采用實(shí)驗(yàn)課形式(2) 建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的使用CSS+

15、DIV的網(wǎng)頁(yè)布局知識(shí)223第16章顏色和背景16.1設(shè)置顏色color16.2設(shè)置背景顏色background-color16.3插入背景圖片background-image16.4插入背景附件background-attachment16.5設(shè)置重復(fù)背景圖片一background-repeat16.6設(shè)置背景圖片位置一background-position16.7小實(shí)例綜合設(shè)置顏色和背景(1) 采用理論課講授形式(2) 布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出CSS設(shè)置顏色和背景相關(guān)的程序示例進(jìn)行講解224第17章邊框和邊距17.1設(shè)計(jì)邊框樣式border-style17.2調(diào)整邊框?qū)挾萣o

16、rder-width(1) 采用理論課講授形式(2) 布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)217.3設(shè)置邊框顏色border-color17.4設(shè)置邊框?qū)傩詁order17.5 邊距margintop/marginbottom/marginleft/marginright/margin17.6 填充一一paddingtop/paddingbottom/paddingleft/paddingright/padding17.7小實(shí)例綜合設(shè)置邊框和邊距外，給出CSS設(shè)置邊框和邊距相關(guān)的程序示例進(jìn)行講解25第18章JavaScript基力礎(chǔ)18.1 JavaScript語(yǔ)言概況18.2 第一個(gè)JavaSc

17、ript程序(1)采用理論課講授形式(2)布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，設(shè)計(jì)一個(gè)簡(jiǎn)單的JavaScript程序進(jìn)行講解226第19章JavaScript基本語(yǔ)法19.1基本數(shù)據(jù)類(lèi)型19.2運(yùn)算符19.3程序結(jié)構(gòu)19.4函19.5小實(shí)例修改密碼(1)采用理論課講授形式(2)布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)外，給出相關(guān)的程序示例進(jìn)行講解327第20章JavaScript事件分析20.1事件概述20.2主要事件分析20.3其他常用事件(1)采用理論課講授形式(2)布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出事件相關(guān)的程序示例進(jìn)行講解328第21章21.1對(duì)象概述(1)采用理論課講授2JavaSc

18、ript對(duì)象的應(yīng)用21.2瀏覽器內(nèi)部對(duì)象21.3內(nèi)置對(duì)象和方法形式（2）布置學(xué)生提前預(yù)習(xí)，除講授基本知識(shí)夕卜，給出JavaScript對(duì)象相關(guān)的程序示例進(jìn)行講解29實(shí)驗(yàn)8編寫(xiě)JavaScript程序進(jìn)行頁(yè)面驗(yàn)證要求編寫(xiě)一個(gè)JS程序文件，在另一個(gè)文件中對(duì)屬性進(jìn)行賦值，對(duì)方法進(jìn)行引）用，能夠進(jìn)行頁(yè)面驗(yàn)證等功能（1）采用實(shí)驗(yàn)課形式（2）建議布置學(xué)生提前復(fù)習(xí)所學(xué)習(xí)的JavaScript語(yǔ)法知識(shí)2（六）教學(xué)建議1. 教學(xué)方法本門(mén)課程教學(xué)中應(yīng)注意激發(fā)和保持學(xué)生的學(xué)習(xí)興趣，采用靈活的教學(xué)方法和先進(jìn)的教學(xué)手段，加強(qiáng)理論與實(shí)際的聯(lián)系，加強(qiáng)課前、課后的答疑輔導(dǎo)，組織學(xué)生自我經(jīng)驗(yàn)敘述、討論、問(wèn)題教學(xué)、閱讀指導(dǎo)等。（1）借