職業(yè)技術(shù)學(xué)院《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程標(biāo)準(zhǔn)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程標(biāo)準(zhǔn)一、課程基本信息課程名稱網(wǎng)頁(yè)設(shè)計(jì)與制作課程編碼xxyd23015建議學(xué)時(shí)154學(xué)時(shí)其中實(shí)踐學(xué)時(shí)80學(xué)時(shí)學(xué)時(shí)/學(xué)分154學(xué)時(shí)/8學(xué)分課程類型□公共課專業(yè)基礎(chǔ)課專業(yè)核心課編制人課程性質(zhì)理論課理實(shí)一體□整周實(shí)訓(xùn)審定人制定日期202X年12月15日修訂日期先修課程信息技術(shù)后續(xù)課程響應(yīng)式Web程序開(kāi)發(fā)、移動(dòng)端跨平臺(tái)技術(shù)課程描述本課程是移動(dòng)應(yīng)用開(kāi)發(fā)專業(yè)必修的一門專業(yè)核心課程，是在信息技術(shù)基礎(chǔ)上開(kāi)設(shè)的一門理論+實(shí)踐的課程，對(duì)接專業(yè)人才培養(yǎng)目標(biāo)，面向Web前端工作崗位，培養(yǎng)學(xué)生具備一定的Web前端開(kāi)發(fā)的職業(yè)素質(zhì)，具備Web前端開(kāi)發(fā)、創(chuàng)新能力，為后續(xù)響應(yīng)式Web程序開(kāi)發(fā)、移動(dòng)端跨平臺(tái)技術(shù)課程學(xué)習(xí)奠定基礎(chǔ)的課程。課程目標(biāo)1.知識(shí)目標(biāo)A1.

了解本課程內(nèi)容在Web開(kāi)發(fā)領(lǐng)域的定位與作用；A2.

了解HTML、CSS及JavaScript技術(shù)的發(fā)展脈絡(luò)、趨勢(shì)及應(yīng)用前景；A3.

熟悉HTML中的基本元素、文字與段落元素、圖像元素、列表元素、表格元素、超鏈接元素、多媒體元素、框架元素及表單元素的語(yǔ)法、屬性和參數(shù)等基礎(chǔ)知識(shí)；A4.

掌握CSS中元素的語(yǔ)法、屬性和參數(shù)等基礎(chǔ)知識(shí)；A5.

了解網(wǎng)頁(yè)布局的幾種方法，掌握使用CSS進(jìn)行網(wǎng)頁(yè)布局、樣式設(shè)計(jì)的基礎(chǔ)知識(shí)；A6.

掌握J(rèn)avaScript中的基本語(yǔ)法知識(shí)及DOM和BOM操作能力；2.能力目標(biāo)B1.

具備使用HTML制作包含基本內(nèi)容的網(wǎng)頁(yè)的能力；B2.

具備使用HTML及CSS等技術(shù)來(lái)設(shè)計(jì)網(wǎng)頁(yè)布局的能力；B3.

具備使用JavaScript技術(shù)來(lái)提高網(wǎng)頁(yè)交互性、體驗(yàn)性的能力；B4.

具備綜合使用HTML、CSS與JavaScript的相關(guān)知識(shí)，來(lái)豐富、渲染網(wǎng)頁(yè)的能力；B5.

具備根據(jù)具體應(yīng)用需求，創(chuàng)新性地設(shè)計(jì)網(wǎng)頁(yè)的能力。素質(zhì)養(yǎng)成目標(biāo)C1.

培養(yǎng)學(xué)生養(yǎng)成嚴(yán)謹(jǐn)認(rèn)真的科學(xué)態(tài)度，耐心細(xì)致的工作作風(fēng)；C2.

培養(yǎng)學(xué)生具備良好的交流溝通素養(yǎng)和創(chuàng)新精神;C3.

培養(yǎng)學(xué)生具備良好的職業(yè)道德和職業(yè)素養(yǎng)；C4.

培養(yǎng)學(xué)生具備在學(xué)習(xí)和工作中具備良好的職業(yè)規(guī)范。教學(xué)方式講授□討論或座談問(wèn)題導(dǎo)向?qū)W習(xí)分組合作學(xué)習(xí)□專題學(xué)習(xí)實(shí)作學(xué)習(xí)□發(fā)表學(xué)習(xí)□實(shí)習(xí)□參觀訪問(wèn)□其他（模擬演練）學(xué)習(xí)評(píng)價(jià)評(píng)價(jià)項(xiàng)目評(píng)價(jià)方式（對(duì)應(yīng)教學(xué)目標(biāo)）分值比例評(píng)價(jià)標(biāo)準(zhǔn)過(guò)程性評(píng)價(jià)平時(shí)評(píng)價(jià)出勤、平時(shí)表現(xiàn)20%出勤率：10%，平時(shí)作業(yè)及表現(xiàn)：10%單元評(píng)價(jià)單元知識(shí)點(diǎn)10%單元知識(shí)點(diǎn)掌握情況10%期中評(píng)價(jià)期中測(cè)驗(yàn)10%期中測(cè)驗(yàn)成績(jī)10%實(shí)踐評(píng)價(jià)實(shí)操能力10%實(shí)際操作動(dòng)手能力10%終結(jié)性評(píng)價(jià)（期末）期末考試50%期末考試成績(jī)50%指定教材《》（作者，出版社，出版年份，ISBN號(hào))二、課程教學(xué)內(nèi)容與進(jìn)度學(xué)時(shí)章節(jié)（情境）名稱與內(nèi)容A知識(shí)目標(biāo)代碼B能力目標(biāo)代碼C素質(zhì)目標(biāo)代碼對(duì)應(yīng)專業(yè)人才培養(yǎng)方案畢業(yè)能力要求指標(biāo)點(diǎn)2第1章HTML、CSS、JavaScript綜述A1、A2B1C1D1、D2、D32

第2章HTML基礎(chǔ)介紹2.1HTML文檔的結(jié)構(gòu)2.2HTML基本語(yǔ)法2.3HTML文件的命名2.4

編寫HTML文件的注意事項(xiàng)A3B1C1、C2、C3,、C4D1、D2、D32

第3章HTML文件的整體結(jié)構(gòu)3.1

文件頭部?jī)?nèi)容3.2

主體內(nèi)容＜body＞A3B1C1、C2、C3,、C4D1、D2、D32實(shí)驗(yàn)1

制作簡(jiǎn)單的HTML頁(yè)面A3B1C1、C2、C3,、C4D1、D2、D32

第4章文字與段落4.1

編輯內(nèi)容4.2

文字效果4.3

文字修飾4.4

段落＜p＞4.5

小實(shí)例——文字網(wǎng)頁(yè)A3B1C1、C2、C3,、C4D1、D2、D32

第5章建立和使用列表5.1

列表類型5.2

嵌套列表5.3

小實(shí)例——列表在網(wǎng)頁(yè)中的使用A3B1C1、C2、C3,、C4D1、D2、D32

第6章超鏈接6.1

超鏈接概述6.2

超鏈接的路徑6.3

超鏈接的建立6.4

設(shè)置圖像映射6.5

小實(shí)例——超鏈接的使用A3B1C1、C2、C3,、C4D1、D2、D34

第7章表格的應(yīng)用7.1

表格概述7.2

插入表格＜table＞7.3

設(shè)置表格標(biāo)記屬性7.4

設(shè)置表格行與單元格7.5

表格嵌套7.6

小實(shí)例——表格在網(wǎng)頁(yè)中的應(yīng)用A3B1C1、C2、C3,、C4D1、D2、D32

實(shí)驗(yàn)2

練習(xí)使用表格和和列表要求使用表格、列表對(duì)數(shù)據(jù)進(jìn)行格式化的顯示A3B1C1、C2、C3,、C4D1、D2、D34

第8章層的應(yīng)用8.1

圖層的創(chuàng)建——＜div＞8.2

創(chuàng)建嵌套圖層8.3

層的屬性設(shè)置8.4

小實(shí)例——圖層的實(shí)際應(yīng)用A3B1C1、C2、C3,、C4D1、D2、D34

第9章框架的應(yīng)用9.1

框架概述9.2

框架的基本結(jié)構(gòu)9.3

設(shè)置框架9.4

設(shè)置框架集＜frameset＞9.5

浮動(dòng)框架＜iframe＞9.6

在框架上建立鏈接9.7

小實(shí)例——框架的實(shí)際應(yīng)用A3B1C1、C2、C3,、C4D1、D2、D32

實(shí)驗(yàn)3

練習(xí)使用框架練習(xí)使用框架，來(lái)規(guī)劃、設(shè)計(jì)頁(yè)面內(nèi)容，包括使用<frameset>及<iframe>框架技術(shù)A3B1C1、C2、C3,、C4D1、D2、D34

第10章表單的應(yīng)用10.1

表單概述10.2

表單標(biāo)記＜form＞10.3

信息輸入＜input＞10.4

小實(shí)例——表單的實(shí)際應(yīng)用A3B1C1、C2、C3,、C4D1、D2、D34

實(shí)驗(yàn)4

練習(xí)使用表單練習(xí)使用表單，包括其action及method屬性，并練習(xí)使用表單中的元素，包括文本框、列表框、文本域、單選框、復(fù)選框和按鈕等內(nèi)容A3B1C1、C2、C3,、C4D1、D2、D32

第11章

CSS樣式表基礎(chǔ)11.1CSS的概述11.2CSS的使用11.3

插入CSS樣式表11.4

編寫CSS文件A4B2C1、C2、C3,、C4D1、D2、D34

第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è)置字體屬性——font12.7

小實(shí)例——綜合設(shè)置字體A4B2C1、C2、C3,、C4D1、D2、D32

實(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è)置A4B2C1、C2、C3,、C4D1、D2、D34

第13章文本的精細(xì)排版13.1

調(diào)整字符間距——letter-spacing13.2

調(diào)整單詞間距——word-spacing13.3

添加文字修飾——text-decoration13.4

設(shè)置文本排列方式——text-align13.5

設(shè)置段落縮進(jìn)——text-indent13.6

調(diào)整行高——line-height13.7

轉(zhuǎn)換英文大小寫——text-transform13.8

小實(shí)例——綜合應(yīng)用文本屬性A4B2C1、C2、C3,、C4D1、D2、D34

實(shí)驗(yàn)6

使用CSS來(lái)對(duì)文本進(jìn)行精細(xì)排版要求編寫CSS文件，在HTML文件里進(jìn)行調(diào)用，控制DIV顯示效果，練習(xí)調(diào)整字符間距、單詞間距、文字修飾、文本排列方式、段落縮進(jìn)、行高英文大小寫等內(nèi)容A4B2C1、C2、C3,、C4D1、D2、D34

第14章圖片和多媒體文件的使用14.1

圖片14.2

滾動(dòng)文字14.3

插入多媒體文件——＜embed＞14.4

添加背景音樂(lè)——＜bgsound＞14.5

小實(shí)例——綜合設(shè)置圖片和多媒體A4B2C1、C2、C3,、C4D1、D2、D34

第15章

CSS樣式的高級(jí)應(yīng)用15.1

列表15.2

定位15.3CSS層15.4

鼠標(biāo)指針——cursor15.5

小實(shí)例——綜合設(shè)置層樣式A4B2C1、C2、C3,、C4D1、D2、D34

實(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ì)A4B2、B4C1、C2、C3,、C4D1、D2、D34

第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è)置顏色和背景A4B2、B4C1、C2、C3,、C4D1、D2、D34

第17章邊框和邊距17.1

設(shè)計(jì)邊框樣式——border-style17.2

調(diào)整邊框?qū)挾取猙order-width17.3

設(shè)置邊框顏色——border-color17.4

設(shè)置邊框?qū)傩浴猙order17.5

邊距——margin-top/margin-bottom/margin-left/margin-right/margin17.6

填充——padding-top/padding-bottom/padding-left/padding-right/padding17.7

小實(shí)例——綜合設(shè)置邊框和邊距A4B2、B4C1、C2、C3,、C4D1、D2、D34

第18章

JavaScript基礎(chǔ)18.1JavaScript語(yǔ)言概況18.2

第一個(gè)JavaScript程序A6B3、B4C1、C2、C3,、C4D1、D2、D34

第19章

JavaScript基本語(yǔ)法19.1

基本數(shù)據(jù)類型19.2

運(yùn)算符19.3

程序結(jié)構(gòu)19.4

函數(shù)19.5

小實(shí)例——修改密碼A6B3、B4C1、C2、C3,、C4D1、D2、D34

第20章

JavaScript事件分析20.1

事件概述20.2

主要事件分析20.3

其他常用事件A5、A6B3、B4C1、C2、C3,、C4D1、D2、D34

第21章

JavaScript對(duì)象的應(yīng)用21.1

對(duì)象概述21.2

瀏覽器內(nèi)部對(duì)象21.3

內(nèi)置對(duì)象和方法A5、A6B3、B4C1、C2、C3,、C4D1、D2、D34

實(shí)驗(yàn)8

編寫JavaScript程序進(jìn)行頁(yè)面驗(yàn)證要求編寫一個(gè)JS程序文件，在另一個(gè)文件中對(duì)屬性進(jìn)行賦值，對(duì)方法進(jìn)行引用，能夠進(jìn)行頁(yè)面驗(yàn)證等功能A5、A6B3、B4C1、C2、C3,、C4D1、D2、D34

第22章

DOM操作22.1DOM簡(jiǎn)介22.2

獲取元素A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.3

事件A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.4

修改元素內(nèi)容22.5

修改元素屬性A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：分時(shí)問(wèn)候A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.6

修改表單屬性A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：密碼框明文A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.7

修改樣式屬性A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：二維碼隱藏A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：排他思想A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：表單全選A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.8

獲取自定義屬性22.9

設(shè)置移除自定義屬性A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：tab切換A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.10

父子節(jié)點(diǎn)A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：下拉菜單A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.11

兄弟節(jié)點(diǎn)22.12

創(chuàng)建和添加元素A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D34案例：留言板A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.13

事件冒泡A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.14事件委托A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3422.15

鼠標(biāo)事件A5、A6B3、B4、B5C1、C2、C3,、C4D1、D2、D3注：本課程標(biāo)準(zhǔn)進(jìn)度表部分可根據(jù)教學(xué)需要進(jìn)行±10%調(diào)整。三、課程實(shí)施與保障1.課程思政通過(guò)系列教學(xué)活動(dòng)設(shè)計(jì)，將課程思政有效融入教學(xué)活動(dòng)中，活動(dòng)結(jié)束教師點(diǎn)評(píng)知識(shí)應(yīng)用同時(shí)，對(duì)學(xué)生在完成任務(wù)中的出現(xiàn)的錯(cuò)誤進(jìn)行解析，指出學(xué)生需要提升或完善的能力和素質(zhì)目標(biāo)。例如分析學(xué)生測(cè)試結(jié)果，逐步提升學(xué)生的閱讀理解力與觀察力、分析判斷能力；通過(guò)討論、頭腦風(fēng)暴等活動(dòng)逐步鍛煉學(xué)生的邏輯思維能力、語(yǔ)言表達(dá)能力；通過(guò)實(shí)踐教學(xué)環(huán)節(jié)強(qiáng)化學(xué)生的團(tuán)隊(duì)協(xié)作能力、安全操作意識(shí)、求真務(wù)實(shí)的工匠精神；通過(guò)Web網(wǎng)頁(yè)的實(shí)際制作應(yīng)用，提升學(xué)生解決實(shí)際問(wèn)題的能力。2.教學(xué)模式采用線上線下混合式教學(xué)模式，教學(xué)過(guò)程中以應(yīng)用案例教學(xué)為主。案例教學(xué)為學(xué)生提供了一種模仿、借鑒和引伸的范例，師生互動(dòng)性強(qiáng)，充分體現(xiàn)以學(xué)生為中心的教育理念。強(qiáng)調(diào)從提出問(wèn)題入手，激發(fā)學(xué)生學(xué)習(xí)的興趣，讓學(xué)生有針對(duì)性地去探索并運(yùn)用理論知識(shí)，以提高分析和解決問(wèn)題的能力。3.教學(xué)基本條件（1）教學(xué)團(tuán)隊(duì)基本要求專職教師在10人，其中專職教師7人，來(lái)自企業(yè)的兼職教師3人。均具備雙師素質(zhì)資格，具有一定的實(shí)踐經(jīng)驗(yàn)，教學(xué)效果良好，職稱和年齡結(jié)構(gòu)合理。（2）教學(xué)硬件環(huán)境基本要求實(shí)施課程教學(xué)，校內(nèi)應(yīng)具備以下實(shí)訓(xùn)條件：多媒體專業(yè)教室、教學(xué)做一體化實(shí)訓(xùn)室和相關(guān)實(shí)訓(xùn)設(shè)備。

表實(shí)訓(xùn)室配置與要求序號(hào)實(shí)訓(xùn)室名稱功能（實(shí)訓(xùn)項(xiàng)目）面積、設(shè)備名稱及臺(tái)數(shù)要求容量1移動(dòng)應(yīng)用開(kāi)發(fā)實(shí)訓(xùn)室一軟件項(xiàng)目實(shí)訓(xùn)HP電腦（40套）+柜式空調(diào)（2臺(tái)）+投影儀（1套）+講臺(tái)（1套）+音響（1套）402移動(dòng)應(yīng)用開(kāi)發(fā)實(shí)訓(xùn)室二軟件項(xiàng)目實(shí)訓(xùn)HP電腦（40套）+柜式空調(diào)（2臺(tái)）+投影儀（1套）+