《Web前端開(kāi)發(fā)技術(shù)》課程標(biāo)準(zhǔn)一、課程定位《前端技術(shù)開(kāi)發(fā)》課程是所有計(jì)算機(jī)相關(guān)專業(yè)的專業(yè)基礎(chǔ)課程。本課程用于培養(yǎng)學(xué)生具有網(wǎng)頁(yè)設(shè)計(jì)制作，網(wǎng)站管理與維護(hù)等崗位需求的綜合職業(yè)素質(zhì)和職業(yè)技能，為學(xué)生學(xué)習(xí)《HTML5應(yīng)用開(kāi)發(fā)》、《PHP程序設(shè)計(jì)基礎(chǔ)》、《JavaWeb應(yīng)用開(kāi)發(fā)》等后續(xù)職業(yè)課程打下基礎(chǔ)。二、課程目標(biāo)依據(jù)崗位工作需要結(jié)合專業(yè)人才培養(yǎng)需要，科學(xué)合理確定課程培養(yǎng)目標(biāo)，明確學(xué)生的知識(shí)、能力和素質(zhì)要求的基本要求。著力培養(yǎng)學(xué)生的創(chuàng)新精神和實(shí)踐能力，增強(qiáng)學(xué)生的職業(yè)適應(yīng)能力和可持續(xù)發(fā)展能力。為落實(shí)立德樹人這一根本任務(wù)，課程教學(xué)要充分考慮課程思政和勞動(dòng)教育，建議將思政教育目標(biāo)和勞育目標(biāo)單列，或者融入素質(zhì)目標(biāo)。找準(zhǔn)切入點(diǎn)，包括愛(ài)國(guó)主義精神、團(tuán)隊(duì)精神、工匠精神等，把課程教學(xué)和思想政治教育很好地結(jié)合起來(lái)，在潛移默化中實(shí)現(xiàn)“三全育人”。本課程以對(duì)計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站管理與維護(hù)人才的能力需求為導(dǎo)向，針對(duì)高職學(xué)生的認(rèn)知特點(diǎn)，以企業(yè)典型產(chǎn)品項(xiàng)目或?qū)W生創(chuàng)新項(xiàng)目為載體。每個(gè)項(xiàng)目采用以學(xué)生為中心、基于工作過(guò)程的項(xiàng)目驅(qū)動(dòng)式教學(xué)方法，項(xiàng)目蘊(yùn)含的核心技能用若干生動(dòng)、直觀的案例進(jìn)行導(dǎo)入。形成從簡(jiǎn)單到復(fù)雜的系統(tǒng)化教學(xué)項(xiàng)目，突出學(xué)生的教學(xué)主體作用，重視職業(yè)能力的培養(yǎng)，充分體現(xiàn)課程教學(xué)的職業(yè)性、實(shí)踐性和開(kāi)放性。讓學(xué)生在循環(huán)進(jìn)行項(xiàng)目過(guò)程中培養(yǎng)網(wǎng)頁(yè)設(shè)計(jì)制作的綜合職業(yè)技能和職業(yè)素質(zhì)。課程具體目標(biāo)為：1.知識(shí)目標(biāo)（1）了解網(wǎng)頁(yè)與網(wǎng)站的概念，靜態(tài)網(wǎng)站與動(dòng)態(tài)網(wǎng)站的概念，網(wǎng)站的分類。（2）了解HTML語(yǔ)言的結(jié)構(gòu)、格式、標(biāo)記及相關(guān)屬性。（3）了解需求分析的概念與內(nèi)容，網(wǎng)站結(jié)構(gòu)知識(shí)，網(wǎng)站的開(kāi)發(fā)流程。（4）了解網(wǎng)頁(yè)設(shè)計(jì)的基本原則，網(wǎng)頁(yè)版面布局要求。（5）知道文件與文件夾的命名規(guī)則，Dreamweaver工具的工作界面，“文件”面板使用方法。（6）知道站點(diǎn)的創(chuàng)建方法，站點(diǎn)的管理方法。（7）認(rèn)識(shí)標(biāo)題、段落等創(chuàng)建文本的標(biāo)記。（8）認(rèn)識(shí)圖片、超鏈接等網(wǎng)頁(yè)常用標(biāo)記及屬性。（9）認(rèn)識(shí)表格結(jié)構(gòu)化標(biāo)記，表格樣式的屬性設(shè)置。（10）認(rèn)識(shí)表單及表單控件標(biāo)記及屬性。（11）認(rèn)識(shí)文檔流，塊級(jí)元素和行內(nèi)元素；（12）了解DIV標(biāo)記的用法；（13）認(rèn)識(shí)盒子模型中的4個(gè)要素；（14）知道CSS屬性display的設(shè)置；（15）學(xué)會(huì)float屬性的設(shè)置；（16）學(xué)會(huì)position屬性的設(shè)置；（17）知道HTML5音頻和視頻的用法；（18）了解常用列表標(biāo)記，學(xué)會(huì)使用列表CSS樣式設(shè)置；（19）JavaScript的基本語(yǔ)法；（20）JavaScriptDOM和HTMLDOM事件和對(duì)象。2.能力目標(biāo)（1）會(huì)手工編寫HTML代碼。（2）掌握規(guī)劃網(wǎng)站結(jié)構(gòu)，建立站點(diǎn)與管理站點(diǎn)的能力。（3）熟練掌握利用表格進(jìn)行頁(yè)面布局的能力。（4）掌握編輯文本與圖像的能力。（5）熟練掌握創(chuàng)建網(wǎng)頁(yè)超鏈接的能力。（6）熟練掌握使用表單進(jìn)行用戶交互的能力。（7）熟練掌握使用CSS+DIV進(jìn)行頁(yè)面布局的能力；（8）掌握插入動(dòng)畫、視頻等控件對(duì)象的能力；（9）掌握制作交互頁(yè)面和框架頁(yè)面的能力；（10）掌握使用JavaScript創(chuàng)建頁(yè)面特效的能力；（11）掌握網(wǎng)站測(cè)試與發(fā)布的能力；3.素質(zhì)目標(biāo)（1）具有一定策劃能力；（2）具有一定想象力；（3）具有色彩感悟能力；（4）具有結(jié)構(gòu)布局能力；（5）提高學(xué)生走向社會(huì)發(fā)展所需要綜合職業(yè)技能和職業(yè)素質(zhì)；（6）培養(yǎng)學(xué)生良好的職業(yè)認(rèn)同感與職業(yè)價(jià)值觀，提高團(tuán)隊(duì)協(xié)作意識(shí)；4.思政目標(biāo)/勞育目標(biāo)/美育目標(biāo)（1）培養(yǎng)學(xué)生具備自主學(xué)習(xí)能力和主動(dòng)學(xué)習(xí)意識(shí)；（2）培養(yǎng)耐心細(xì)致的職業(yè)素養(yǎng)；（3）培養(yǎng)精益求精的工匠精神；（4）培養(yǎng)學(xué)生具有健康的生活習(xí)慣、積極人生態(tài)度、正確的人生觀；（5）培養(yǎng)學(xué)生高度的社會(huì)責(zé)任感和國(guó)家認(rèn)同感；（6）培養(yǎng)學(xué)生具備堅(jiān)定的理想信念。三、課程內(nèi)容組織1.課程設(shè)計(jì)理念從網(wǎng)頁(yè)設(shè)計(jì)與制作的實(shí)際需要出發(fā)，全面、系統(tǒng)地介紹網(wǎng)頁(yè)設(shè)計(jì)與制作的相關(guān)知識(shí)，并配合大量典型案例，加強(qiáng)對(duì)學(xué)生實(shí)際操作與應(yīng)用能力的培養(yǎng)。以對(duì)計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站管理與維護(hù)人才的能力需求為導(dǎo)向，針對(duì)高職學(xué)生的認(rèn)知特點(diǎn)，以企業(yè)典型案例為載體。形成從簡(jiǎn)單案例到復(fù)雜案例的系統(tǒng)化教學(xué)，突出學(xué)生的教學(xué)主體作用，重視職業(yè)能力的培養(yǎng)，充分體現(xiàn)課程教學(xué)的職業(yè)性、實(shí)踐性和開(kāi)放性。讓學(xué)生在遞進(jìn)式案例教學(xué)過(guò)程中培養(yǎng)網(wǎng)頁(yè)設(shè)計(jì)制作的綜合職業(yè)技能和職業(yè)素質(zhì)。以職業(yè)素養(yǎng)為依托、以學(xué)生為主體、以技能培養(yǎng)為主線，用好課堂教學(xué)這個(gè)主渠道，把思想政治教育融入到各類課程的教學(xué)中，形成協(xié)同效應(yīng)，開(kāi)展面向新一代前端相關(guān)技術(shù)的教學(xué)、課程研發(fā)、人才培養(yǎng)和技術(shù)服務(wù)?？茖W(xué)的把思想政治教育融入課程教學(xué)的各環(huán)節(jié)、各方面，以“隱性思政”的功用，與專業(yè)課程一道，使思想政治教育的因子融入課程之中，賦予思想政治教育以鮮活的生命力，同時(shí)豐富專業(yè)課自身內(nèi)涵，挖掘其育人價(jià)值，拓展其教育教學(xué)功能。由此，課程思政的實(shí)施需基于系統(tǒng)思維，借助有效的科學(xué)設(shè)計(jì)，統(tǒng)籌各種資源，調(diào)動(dòng)多方面的積極性，真正推動(dòng)這一工程卓有成效地開(kāi)展。（1）遵循規(guī)律，實(shí)現(xiàn)思想政治教育與課程的有機(jī)融合。（2）找準(zhǔn)“契合點(diǎn)”，建立思想政治教育與課程之間的“生成性”關(guān)系。（3）重點(diǎn)突出，在“深”字上做足功夫。思想政治教育內(nèi)容不可能在課程的全部知識(shí)點(diǎn)中都能得到全面體現(xiàn)，應(yīng)該基于“契合點(diǎn)”突出思想政治教育的重點(diǎn)，以教育的“深入”、“深刻”為突破點(diǎn)。（4）科學(xué)規(guī)劃，凸顯循序漸進(jìn)特征。綜合考慮學(xué)段、學(xué)生身心發(fā)展特征、學(xué)科專業(yè)特征、課程進(jìn)度及延展性等因素，對(duì)設(shè)計(jì)的思想政治教育內(nèi)容信息合理設(shè)定，做到既緊貼課程，又科學(xué)有序。（5）注重系統(tǒng)設(shè)計(jì)，保證有效性。教學(xué)內(nèi)容與評(píng)價(jià)制度（標(biāo)準(zhǔn)）、教材開(kāi)發(fā)等方面周祥考慮，并保持同步性和一致性。（6）多維度培養(yǎng)。注重知識(shí)能力和情感態(tài)度價(jià)值觀的不同維度的培養(yǎng)，由淺入深、由知到行，由知識(shí)掌握到內(nèi)生情感態(tài)度價(jià)值觀。圖1課程設(shè)計(jì)理念2.課程實(shí)施思路本課程遵循“學(xué)生主體，教師主導(dǎo)”的教學(xué)理念，采用線上線下混合式教學(xué)模式，引入企業(yè)真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)與制作案例，激發(fā)學(xué)生的學(xué)習(xí)興趣。基于汽車維修企業(yè)崗位工作流程，設(shè)計(jì)了“課前啟化、課中內(nèi)化、課后轉(zhuǎn)化”三個(gè)階段和“知、引、析、探、仿、練、拓”七個(gè)環(huán)節(jié)的教學(xué)過(guò)程，并在授課中將Web前端開(kāi)發(fā)1+X證書制度和職業(yè)資格證書內(nèi)容加以滲透。同時(shí)將思想政治教育和崗位技能積累有機(jī)統(tǒng)一，推進(jìn)“三全育人”，打造“守初心、鑄匠魂、強(qiáng)技能”的高效課堂教學(xué)模式。圖2課程實(shí)施思路表1課程內(nèi)容組織表序號(hào)學(xué)習(xí)模塊學(xué)習(xí)單元知識(shí)技能點(diǎn)1項(xiàng)目一創(chuàng)建非遺項(xiàng)目站點(diǎn)—網(wǎng)頁(yè)開(kāi)發(fā)入門任務(wù)一：搭建站點(diǎn)開(kāi)發(fā)環(huán)境知識(shí)點(diǎn)：網(wǎng)頁(yè)與網(wǎng)站概述、瀏覽器的兼容性問(wèn)題、網(wǎng)頁(yè)的組成HTML、CSS、JS三者之間的關(guān)系、HTML5和CSS3的新特性技能點(diǎn)：使用HB創(chuàng)建站點(diǎn)任務(wù)二：創(chuàng)建非遺項(xiàng)目站點(diǎn)知識(shí)點(diǎn)：HTML文檔基本結(jié)構(gòu)、標(biāo)記和屬性的定義技能點(diǎn)：編寫第一個(gè)網(wǎng)頁(yè)2項(xiàng)目二制作非遺機(jī)構(gòu)介紹和詳情頁(yè)面—?jiǎng)?chuàng)建網(wǎng)頁(yè)元素任務(wù)一：創(chuàng)建文本元素—非遺專業(yè)機(jī)構(gòu)詳情頁(yè)面知識(shí)點(diǎn)：HTML文本元素介紹、文本修飾標(biāo)記介紹技能點(diǎn)：特殊字符的應(yīng)用、文本修飾標(biāo)記的使用任務(wù)二：創(chuàng)建超鏈接—情頁(yè)面增加相關(guān)閱讀內(nèi)容知識(shí)點(diǎn)：超鏈接元素技能點(diǎn)：超鏈接的應(yīng)用任務(wù)三：插入圖片—非遺機(jī)構(gòu)介紹頁(yè)面知識(shí)點(diǎn)：圖片標(biāo)記和屬性介紹、相對(duì)路徑與絕對(duì)路徑技能點(diǎn)：插入圖片、相對(duì)路徑的設(shè)置3項(xiàng)目三作非遺名錄頁(yè)面—表格應(yīng)用—表格應(yīng)用任務(wù)一：創(chuàng)建表格—非遺名錄清單表格知識(shí)點(diǎn)：表格結(jié)構(gòu)與常用標(biāo)記、表格寬度和高度、網(wǎng)頁(yè)上表示顏色的方式、表格邊距與填充、表格中的對(duì)齊方式、表格背景和邊框顏色屬性技能點(diǎn)：創(chuàng)建表格基本結(jié)構(gòu)、width屬性和height屬性的設(shè)置、cellpadding屬性和cellspacing屬性的設(shè)置、align屬性設(shè)置任務(wù)二表格結(jié)構(gòu)化標(biāo)記—非遺名錄清單表格知識(shí)點(diǎn)：表格結(jié)構(gòu)化標(biāo)記技能點(diǎn)：使用結(jié)構(gòu)化標(biāo)記優(yōu)化表格結(jié)構(gòu)任務(wù)三表格頁(yè)面布局—非遺名錄頁(yè)面知識(shí)點(diǎn)：表格跨行與跨列操作、表格嵌套技能點(diǎn)：合并單元格的應(yīng)用、表格布局4項(xiàng)目四遺登錄注冊(cè)頁(yè)面的制作—H5表單任務(wù)一制作非遺登錄頁(yè)面—?jiǎng)?chuàng)建表單知識(shí)點(diǎn)：表單的概念、文本框與密碼框、按鈕技能點(diǎn)：用戶登錄任務(wù)二添加表單控件—制作注冊(cè)頁(yè)面知識(shí)點(diǎn)：?jiǎn)芜x框與復(fù)選框控件、日期控件、下拉框控件、其它控件技能點(diǎn)：?jiǎn)芜x框與復(fù)選框的使用、下拉框的使用、用戶注冊(cè)任務(wù)三設(shè)置屬性—完成表單數(shù)據(jù)驗(yàn)證知識(shí)點(diǎn)：數(shù)據(jù)驗(yàn)證、正則表達(dá)式技能點(diǎn)：數(shù)據(jù)驗(yàn)證5項(xiàng)目五：制作非遺活動(dòng)詳情頁(yè)面—CSS基礎(chǔ)任務(wù)一：CSS字體樣式—美化非遺活動(dòng)詳情頁(yè)面頭部區(qū)域知識(shí)點(diǎn)：CSS樣式表的概念及基本語(yǔ)法、CSS基本選擇器、常見(jiàn)復(fù)合選擇器、CSS的四種引入方式、字體樣式屬性、文本對(duì)齊方式屬性技能點(diǎn)：三種基本選擇器的使用、三種復(fù)合選擇器的使用、如何選擇合適的CSS引入方式、CSS字體樣式設(shè)置、文本對(duì)齊設(shè)置任務(wù)二：文本精細(xì)排版—美化非遺活動(dòng)詳情頁(yè)面正文區(qū)域知識(shí)點(diǎn)：文本縮進(jìn)屬性、設(shè)置行高屬性、文本修飾屬性、字間距與詞間距屬性技能點(diǎn)：段落文本縮進(jìn)設(shè)置、調(diào)整文本行高、超鏈接樣式設(shè)置、字間距與詞間距設(shè)置任務(wù)三：實(shí)現(xiàn)非遺活動(dòng)詳情頁(yè)面知識(shí)點(diǎn)：創(chuàng)建列表、溢出屬性技能點(diǎn)：嵌套列表的應(yīng)用、列表樣式屬性的使用、文本溢出應(yīng)用6項(xiàng)目六：制作非遺項(xiàng)目申報(bào)指南頁(yè)面—CSS高級(jí)應(yīng)用任務(wù)一：創(chuàng)建列表—制作非遺項(xiàng)目申報(bào)指南區(qū)域知識(shí)點(diǎn)：設(shè)置透明的幾種方法技能點(diǎn)：設(shè)置透明的幾種方法任務(wù)二：邊框樣式設(shè)置—制作非遺項(xiàng)目文件下載區(qū)域知識(shí)點(diǎn)：邊框?qū)傩浴SS3新增邊框樣式屬性、CSS3屬性圖片邊框?qū)傩约寄茳c(diǎn)：邊框樣式設(shè)置、CSS3邊框應(yīng)用任務(wù)三：列表應(yīng)用—制作與美化水平導(dǎo)航欄知識(shí)點(diǎn)：設(shè)置寬度和高度屬性技能點(diǎn)：設(shè)置網(wǎng)頁(yè)元素的寬度和高度任務(wù)四：背景樣式設(shè)置—整合美化非遺項(xiàng)目申報(bào)指南頁(yè)面知識(shí)點(diǎn)：背景設(shè)置、CSS3背景屬性技能點(diǎn)：背景圖片設(shè)置、CSS3背景圖片設(shè)置7項(xiàng)目七：制作精彩非遺資訊頁(yè)面—網(wǎng)頁(yè)布局任務(wù)一：盒子模型—搭建資訊頁(yè)面整體布局知識(shí)點(diǎn)：文檔流與層的概念、元素顯示方式、盒子模型、填充與邊距技能點(diǎn)：塊級(jí)與行內(nèi)元素、display屬性的使用、網(wǎng)頁(yè)元素居中顯示任務(wù)二：元素浮動(dòng)—制作資訊推介區(qū)域知識(shí)點(diǎn)：元素浮動(dòng)、清除浮動(dòng)技能點(diǎn)：圖文左右排版、圖文上下排版、魔方任務(wù)三：元素定位—制作資訊頁(yè)面專題報(bào)道區(qū)域知識(shí)點(diǎn)：元素絕對(duì)定位、元素相對(duì)定位、z-index空間位置技能點(diǎn)：元素定位應(yīng)用8項(xiàng)目八：非遺首頁(yè)的制作—Javascript基礎(chǔ)任務(wù)一：輪播圖結(jié)構(gòu)知識(shí)點(diǎn)：變量和常量、分支和循環(huán)、函數(shù)和DOM技能點(diǎn)：元素定位應(yīng)用、輪播圖結(jié)構(gòu)任務(wù)二：定時(shí)切換知識(shí)點(diǎn)：定時(shí)器技能點(diǎn)：倒計(jì)時(shí)、讀取和修改元素屬性、定時(shí)切換任務(wù)三：手動(dòng)切換知識(shí)點(diǎn)：事件監(jiān)聽(tīng)技能點(diǎn)：手動(dòng)切換任務(wù)四：網(wǎng)站首頁(yè)整合技能點(diǎn)：首頁(yè)制作與整合四、教學(xué)方法建議(1)模塊式教學(xué)法：解構(gòu)項(xiàng)目工作，分解職業(yè)技能要素，重構(gòu)教學(xué)內(nèi)容模塊，以工作崗位的項(xiàng)目為主線實(shí)施教學(xué)，打破傳統(tǒng)的知識(shí)章節(jié)模式。(2)案例教學(xué)法：通過(guò)全工程過(guò)程案例，分析、講解，滲透本課程知識(shí)點(diǎn)和技能點(diǎn)，結(jié)合模塊式教學(xué)方法組織教學(xué)過(guò)程。(3)項(xiàng)目分組法：對(duì)于一個(gè)龐大、復(fù)雜的工程項(xiàng)目包含的知識(shí)和技能可能不是一門課程的內(nèi)容，同時(shí)在項(xiàng)目中有一門課的多項(xiàng)內(nèi)容，通過(guò)分組分解課程和內(nèi)容，不同的組輪流完成不同的部分。(4)歸納法：對(duì)各組所做的項(xiàng)目，進(jìn)行歸納總結(jié)，歸納知識(shí)點(diǎn)和技能點(diǎn)。五、教學(xué)實(shí)施條件1.學(xué)生學(xué)習(xí)基礎(chǔ)本課程是計(jì)算機(jī)相關(guān)專業(yè)的基礎(chǔ)課程，要求學(xué)生具備基本的信息技術(shù)素養(yǎng)，包括獨(dú)立的學(xué)習(xí)能力、基本的技術(shù)使用能力、信息處理和分析能力，能夠熟練地使用信息系統(tǒng)和技術(shù)工具。2.師資團(tuán)隊(duì)要求本課程的主講教師要求不僅具有比較深厚的前端開(kāi)發(fā)的理論基礎(chǔ)和項(xiàng)目經(jīng)驗(yàn)，而且能夠有針對(duì)性地開(kāi)展教育教學(xué)活動(dòng)，具有強(qiáng)烈的奉獻(xiàn)精神和為學(xué)生服務(wù)的意識(shí)，具有現(xiàn)代職業(yè)教育以職業(yè)活動(dòng)為導(dǎo)向、突出能力目標(biāo)的先進(jìn)理念。本課程的主將教師要求具有與實(shí)際企業(yè)項(xiàng)目保持技術(shù)同步的能力，能了解最新的行業(yè)發(fā)展，并且把實(shí)用的技術(shù)融合進(jìn)教學(xué)活動(dòng)中。本課程的教學(xué)團(tuán)隊(duì)要求經(jīng)常交流教學(xué)經(jīng)驗(yàn)，探討教學(xué)改革的有效方法。在教學(xué)團(tuán)隊(duì)建設(shè)中，要強(qiáng)化培訓(xùn)，尤其要加強(qiáng)對(duì)教師的職業(yè)教育教學(xué)能力培訓(xùn)。采取集中培訓(xùn)和個(gè)人鉆研相結(jié)合，提高教師素質(zhì)。不斷完善教師科研和教學(xué)相促進(jìn)的激勵(lì)機(jī)制，形成有利于教師隊(duì)伍良性發(fā)展的長(zhǎng)效機(jī)制。3.實(shí)踐教學(xué)條件要求設(shè)備、場(chǎng)地：一體化教室，相應(yīng)的軟件與教學(xué)資源，每臺(tái)學(xué)生機(jī)安裝Hbuilder開(kāi)發(fā)軟件、chrome瀏覽器、Windows7或Windows10操作系統(tǒng)。4.教學(xué)資源基本要求依據(jù)目前企業(yè)的真實(shí)需求進(jìn)行講解，充分體現(xiàn)項(xiàng)目（或案例）驅(qū)動(dòng)的課程設(shè)計(jì)思想。教材應(yīng)以理論聯(lián)系實(shí)際為標(biāo)準(zhǔn)，每個(gè)項(xiàng)目應(yīng)包含理論內(nèi)容與相關(guān)實(shí)驗(yàn)。每個(gè)項(xiàng)目（或案例）的編寫建議采用“任務(wù)布置－教學(xué)重點(diǎn)難點(diǎn)－知識(shí)技能－操作步驟－技能拓展－實(shí)訓(xùn)小結(jié)”的形式組織，所有的任務(wù)應(yīng)難易適中，具有較強(qiáng)的可操作性。教材表達(dá)必須精煉、準(zhǔn)確、科學(xué)；教材應(yīng)圖文并茂，描述主要的項(xiàng)目場(chǎng)景，提高學(xué)生的學(xué)習(xí)興趣。（1）教材選用與編寫依據(jù)目前企業(yè)的真實(shí)需求進(jìn)行講解，充分體現(xiàn)項(xiàng)目（或案例）驅(qū)動(dòng)的課程設(shè)計(jì)思想。教材應(yīng)以理論聯(lián)系實(shí)際為標(biāo)準(zhǔn)，每個(gè)項(xiàng)目應(yīng)包含理論內(nèi)容與相關(guān)實(shí)驗(yàn)。每個(gè)項(xiàng)目（或案例）的編寫建議采用“任務(wù)布置－教學(xué)重點(diǎn)難點(diǎn)－知識(shí)技能－操作步驟－技能拓展－實(shí)訓(xùn)小結(jié)”的形式組織，所有的任務(wù)應(yīng)難易適中，具有較強(qiáng)的可操作性。教材表達(dá)必須精煉、準(zhǔn)確、科學(xué)；教材應(yīng)圖文并茂，描述主要的項(xiàng)目場(chǎng)景，提高學(xué)生的學(xué)習(xí)興趣。本課程選用如下規(guī)劃教材。（2）課程資源的利用注重實(shí)驗(yàn)實(shí)訓(xùn)指導(dǎo)書和實(shí)驗(yàn)實(shí)訓(xùn)教材的開(kāi)發(fā)和應(yīng)用加強(qiáng)常用課程資源的開(kāi)發(fā)，建立多媒體課程資源的數(shù)據(jù)庫(kù)，努力實(shí)現(xiàn)跨學(xué)校多媒體資源的共享，以提高課程資源利用效率。積極開(kāi)發(fā)和利用網(wǎng)絡(luò)課程資源，充分利用諸如課程網(wǎng)站、電子書籍、電子期刊、數(shù)據(jù)庫(kù)、數(shù)字圖書館、教育網(wǎng)站和電子論壇等網(wǎng)上信息資源，使教學(xué)從單一媒體向多種媒體轉(zhuǎn)變；教學(xué)活動(dòng)從信息的單向傳遞向雙向交換轉(zhuǎn)變；學(xué)生單獨(dú)學(xué)習(xí)向合作學(xué)習(xí)轉(zhuǎn)變。同時(shí)應(yīng)積極創(chuàng)造條件搭建遠(yuǎn)程教學(xué)平臺(tái)，擴(kuò)大課程資源的交互空間。校企合作開(kāi)發(fā)實(shí)驗(yàn)實(shí)訓(xùn)課程資源，充分利用本行業(yè)典型的企業(yè)的資源，進(jìn)行產(chǎn)學(xué)合作，建立實(shí)習(xí)實(shí)訓(xùn)基地，進(jìn)行“工學(xué)”交替，滿足學(xué)生的實(shí)習(xí)實(shí)訓(xùn)要求，同時(shí)為學(xué)生的就業(yè)創(chuàng)造機(jī)會(huì)。六、考核方法1.考核總體要求注重結(jié)合當(dāng)前教學(xué)模式的轉(zhuǎn)變重新設(shè)置考核方式，注重過(guò)程性考核，注重線上學(xué)習(xí)評(píng)價(jià)，注重實(shí)踐教學(xué)評(píng)價(jià)。要具體、可操作性強(qiáng)。2.考核標(biāo)準(zhǔn)線上學(xué)習(xí)考核：占30%。主要是在線課程學(xué)習(xí)成績(jī)，包括在線課程參與度、在線課程隨堂測(cè)驗(yàn)、在線課程單元測(cè)試以及在線課程在線考試成績(jī)：線上學(xué)習(xí)考核=學(xué)生在線平臺(tái)參與度40%+在線學(xué)習(xí)得分60%，其中：在線學(xué)習(xí)得分=作業(yè)10%+隨堂檢測(cè)20%+考試30%。平時(shí)考核：20%。主要包括考勤、學(xué)生平時(shí)課堂表現(xiàn)、實(shí)驗(yàn)學(xué)習(xí)效果等方面。期末考核：50%。通過(guò)閉卷考試評(píng)定學(xué)生理論成績(jī)。七、其他說(shuō)明建議64學(xué)時(shí)，參考資料：1.w3school網(wǎng)站——HTML、CSS、JavaScript工具書2.Bootstrap——熱門的前端開(kāi)發(fā)框架《Web前端開(kāi)發(fā)技術(shù)》課程整體教學(xué)設(shè)計(jì)一、課程設(shè)計(jì)思路1.課程設(shè)計(jì)理念從網(wǎng)頁(yè)設(shè)計(jì)與制作的實(shí)際需要出發(fā)，全面、系統(tǒng)地介紹網(wǎng)頁(yè)設(shè)計(jì)與制作的相關(guān)知識(shí)，并配合大量典型案例，加強(qiáng)對(duì)學(xué)生實(shí)際操作與應(yīng)用能力的培養(yǎng)。以對(duì)計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站管理與維護(hù)人才的能力需求為導(dǎo)向，針對(duì)高職學(xué)生的認(rèn)知特點(diǎn)，以企業(yè)典型案例為載體。形成從簡(jiǎn)單案例到復(fù)雜案例的系統(tǒng)化教學(xué)，突出學(xué)生的教學(xué)主體作用，重視職業(yè)能力的培養(yǎng)，充分體現(xiàn)課程教學(xué)的職業(yè)性、實(shí)踐性和開(kāi)放性。讓學(xué)生在遞進(jìn)式案例教學(xué)過(guò)程中培養(yǎng)網(wǎng)頁(yè)設(shè)計(jì)制作的綜合職業(yè)技能和職業(yè)素質(zhì)。以職業(yè)素養(yǎng)為依托、以學(xué)生為主體、以技能培養(yǎng)為主線，用好課堂教學(xué)這個(gè)主渠道，把思想政治教育融入到各類課程的教學(xué)中，形成協(xié)同效應(yīng)，開(kāi)展面向新一代前端相關(guān)技術(shù)的教學(xué)、課程研發(fā)、人才培養(yǎng)和技術(shù)服務(wù)?？茖W(xué)的把思想政治教育融入課程教學(xué)的各環(huán)節(jié)、各方面，以“隱性思政”的功用，與專業(yè)課程一道，使思想政治教育的因子融入課程之中，賦予思想政治教育以鮮活的生命力，同時(shí)豐富專業(yè)課自身內(nèi)涵，挖掘其育人價(jià)值，拓展其教育教學(xué)功能。由此，課程思政的實(shí)施需基于系統(tǒng)思維，借助有效的科學(xué)設(shè)計(jì)，統(tǒng)籌各種資源，調(diào)動(dòng)多方面的積極性，真正推動(dòng)這一工程卓有成效地開(kāi)展。（1）遵循規(guī)律，實(shí)現(xiàn)思想政治教育與課程的有機(jī)融合。（2）找準(zhǔn)“契合點(diǎn)”，建立思想政治教育與課程之間的“生成性”關(guān)系。（3）重點(diǎn)突出，在“深”字上做足功夫。思想政治教育內(nèi)容不可能在課程的全部知識(shí)點(diǎn)中都能得到全面體現(xiàn)，應(yīng)該基于“契合點(diǎn)”突出思想政治教育的重點(diǎn)，以教育的“深入”、“深刻”為突破點(diǎn)。（4）科學(xué)規(guī)劃，凸顯循序漸進(jìn)特征。綜合考慮學(xué)段、學(xué)生身心發(fā)展特征、學(xué)科專業(yè)特征、課程進(jìn)度及延展性等因素，對(duì)設(shè)計(jì)的思想政治教育內(nèi)容信息合理設(shè)定，做到既緊貼課程，又科學(xué)有序。（5）注重系統(tǒng)設(shè)計(jì)，保證有效性。教學(xué)內(nèi)容與評(píng)價(jià)制度（標(biāo)準(zhǔn)）、教材開(kāi)發(fā)等方面周祥考慮，并保持同步性和一致性。（6）多維度培養(yǎng)。注重知識(shí)能力和情感態(tài)度價(jià)值觀的不同維度的培養(yǎng)，由淺入深、由知到行，由知識(shí)掌握到內(nèi)生情感態(tài)度價(jià)值觀。圖1課程設(shè)計(jì)理念二、課程整體設(shè)計(jì)表1：崗位工作任務(wù)—學(xué)習(xí)情境分析表工作崗位典型任務(wù)學(xué)習(xí)情境前端開(kāi)發(fā)工程師（初級(jí)/中級(jí)）1.實(shí)現(xiàn)靜態(tài)Web頁(yè)面的制作。2.使用HTML、CSS、JavaScript等前端技術(shù)棧進(jìn)行開(kāi)發(fā)。3.與UI設(shè)計(jì)師、后端工程師等團(tuán)隊(duì)成員緊密合作，確保項(xiàng)目的順利進(jìn)行。1.基礎(chǔ)知識(shí)學(xué)習(xí)HTML/CSS：學(xué)習(xí)HTML的結(jié)構(gòu)和語(yǔ)義，CSS的布局和樣式。JavaScript：掌握J(rèn)avaScript的基本語(yǔ)法、數(shù)據(jù)類型、函數(shù)、條件語(yǔ)句和循環(huán)等。工具：了解常用的前端開(kāi)發(fā)工具，如代碼編輯器（如Hbuilder）等。2.實(shí)踐項(xiàng)目靜態(tài)網(wǎng)頁(yè)制作：從簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)開(kāi)始，逐步增加難度，如制作一個(gè)個(gè)人網(wǎng)站或博客。交互式網(wǎng)頁(yè)：使用JavaScript實(shí)現(xiàn)簡(jiǎn)單的交互功能，如輪播圖、表單驗(yàn)證等。前端UI工程師1.前端頁(yè)面的UI設(shè)計(jì)和實(shí)現(xiàn)。2.與UI設(shè)計(jì)師緊密合作，將設(shè)計(jì)稿轉(zhuǎn)化為高質(zhì)量的前端頁(yè)面。3.關(guān)注用戶體驗(yàn)和交互效果，提升頁(yè)面的可用性和美觀性1.基礎(chǔ)知識(shí)學(xué)習(xí)HTML/CSS：掌握HTML的基本結(jié)構(gòu)、語(yǔ)義化標(biāo)簽和CSS的布局、樣式設(shè)計(jì)。JavaScript：了解JavaScript的基本語(yǔ)法、數(shù)據(jù)類型、函數(shù)以及DOM操作。設(shè)計(jì)基礎(chǔ)知識(shí)：學(xué)習(xí)UI設(shè)計(jì)的基本原則，如留白(whitespace)、對(duì)齊(alignment)、對(duì)比度(contrast)、比例(scale)、排版(typography)、顏色(color)和視覺(jué)層次(visualhierarchy)。實(shí)踐項(xiàng)目：靜態(tài)網(wǎng)頁(yè)制作：從簡(jiǎn)單的個(gè)人網(wǎng)站或博客開(kāi)始，注重頁(yè)面的布局和樣式設(shè)計(jì)。基本交互實(shí)現(xiàn)：使用JavaScript為網(wǎng)頁(yè)添加簡(jiǎn)單的交互效果，如按鈕點(diǎn)擊、表單驗(yàn)證等。表2：教學(xué)內(nèi)容組織設(shè)計(jì)表序號(hào)學(xué)習(xí)模塊學(xué)習(xí)單元教學(xué)目標(biāo)教學(xué)方式建議學(xué)時(shí)1項(xiàng)目一創(chuàng)建非遺項(xiàng)目站點(diǎn)—網(wǎng)頁(yè)開(kāi)發(fā)入門任務(wù)一：搭建站點(diǎn)開(kāi)發(fā)環(huán)境1.能夠認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站的區(qū)別2.能夠理解HTML、CSS、JS三者的作用和扮演的角色3.能夠認(rèn)識(shí)HTML5和CSS34.能夠創(chuàng)建站點(diǎn)5.熟練掌握網(wǎng)頁(yè)文檔基本結(jié)構(gòu)。6.熟練掌握HTML標(biāo)記和屬性7.能夠編寫網(wǎng)頁(yè)。線下：匯報(bào)討論、現(xiàn)場(chǎng)教學(xué)、案例分析、機(jī)房實(shí)踐線上：實(shí)訓(xùn)任務(wù)、作業(yè)測(cè)驗(yàn)、分組測(cè)驗(yàn)、論壇互動(dòng)24任務(wù)二：創(chuàng)建非遺項(xiàng)目站點(diǎn)22項(xiàng)目二制作非遺機(jī)構(gòu)介紹和詳情頁(yè)面—?jiǎng)?chuàng)建網(wǎng)頁(yè)元素任務(wù)一：創(chuàng)建文本元素—非遺專業(yè)機(jī)構(gòu)詳情頁(yè)面1. 掌握標(biāo)題的創(chuàng)建。2. 掌握段落元素的創(chuàng)建。3. 掌握超鏈接的創(chuàng)建以及屬性設(shè)置。4. 能夠正確插入圖片。5. 能夠?qū)W會(huì)相對(duì)路徑的設(shè)置。線下：匯報(bào)討論、現(xiàn)場(chǎng)教學(xué)、案例分析、機(jī)房實(shí)踐線上：實(shí)訓(xùn)任務(wù)、作業(yè)測(cè)驗(yàn)、分組測(cè)驗(yàn)、論壇互動(dòng)26任務(wù)二：創(chuàng)建超鏈接—情頁(yè)面增加相關(guān)閱讀內(nèi)容2任務(wù)三：插入圖片—非遺機(jī)構(gòu)介紹頁(yè)面23項(xiàng)目三制作非遺名錄頁(yè)面—表格應(yīng)用—表格應(yīng)用任務(wù)一：創(chuàng)建表格—非遺名錄清單表格1. 掌握表格的創(chuàng)建。2. 掌握表格屬性的設(shè)置。3. 掌握表格跨行跨列操作。4. 能夠使用表格嵌套進(jìn)行網(wǎng)頁(yè)布局。線下：匯報(bào)討論、現(xiàn)場(chǎng)教學(xué)、案例分析、機(jī)房實(shí)踐線上：實(shí)訓(xùn)任務(wù)、作業(yè)測(cè)驗(yàn)、分組測(cè)驗(yàn)、論壇互動(dòng)25任務(wù)二表格結(jié)構(gòu)化標(biāo)記—非遺名錄清單表格1任務(wù)三表格頁(yè)面布局—非遺名錄頁(yè)面24項(xiàng)目四遺登錄注冊(cè)頁(yè)面的制作—H5表單任務(wù)一制作非遺登錄頁(yè)面—?jiǎng)?chuàng)建表單1.理解表單的基本結(jié)構(gòu)。2.掌握表單控件的類型和屬性。3.掌握HTML5的內(nèi)置驗(yàn)證功能，以及使用正則表達(dá)式進(jìn)行更復(fù)雜的驗(yàn)證。4.掌握表單的提交方式。線下：匯報(bào)討論、現(xiàn)場(chǎng)教學(xué)、案例分析、機(jī)房實(shí)踐線上：實(shí)訓(xùn)任務(wù)、作業(yè)測(cè)驗(yàn)、分組測(cè)驗(yàn)、論壇互動(dòng)26任務(wù)二添加表單控件—制作注冊(cè)頁(yè)面2任務(wù)三設(shè)置屬性—完成表單數(shù)據(jù)驗(yàn)證25項(xiàng)目五：制作非遺活動(dòng)詳情頁(yè)面—CSS基礎(chǔ)任務(wù)一：CSS字體樣式—美化非遺活動(dòng)詳情頁(yè)面頭部區(qū)域1.掌握CSS基本語(yǔ)法，學(xué)會(huì)寫CSS語(yǔ)句。2.能夠在網(wǎng)頁(yè)中正確引入CSS代碼