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