1、鎮(zhèn)江高等職業(yè)技術(shù)學(xué)校江蘇聯(lián)合職業(yè)技術(shù)學(xué)院鎮(zhèn)江分院Web前端開發(fā)中級(jí)課程標(biāo)準(zhǔn)課程代碼： 建議課時(shí)數(shù)： 160 學(xué)分：10適用專業(yè)：軟件技術(shù)先修課程：高級(jí)語(yǔ)言程序設(shè)計(jì)、網(wǎng)頁(yè)制作、Web前端開發(fā)初級(jí)后續(xù)課程：.NET移動(dòng)程序設(shè)計(jì)制 定 人：查曉穎一、前言1.課程的性質(zhì)該課程是江蘇省五年制高職軟件技術(shù)專業(yè)的一門專業(yè)方向課課程，是軟件技術(shù)專業(yè)的一門職業(yè)技能性課程，具有重要的地位。隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，網(wǎng)站在靜態(tài)頁(yè)面的基礎(chǔ)上添加了各類桌面軟件，網(wǎng)頁(yè)不再只是承載單一的文字和圖片，而是被要求具備炫酷的頁(yè)面交互、跨終端的適配兼容功能，使用富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，從而讓用戶有更好的使用體驗(yàn)，這些都基于

2、前端技術(shù)來實(shí)現(xiàn)。本課程是以實(shí)現(xiàn)軟件技術(shù)專業(yè)學(xué)生的就業(yè)崗位群能力為目標(biāo)，通過Web前后端數(shù)據(jù)交互技術(shù)、響應(yīng)式開發(fā)技術(shù)的學(xué)習(xí)，使學(xué)生具備網(wǎng)站響應(yīng)式開發(fā)能力、數(shù)據(jù)交互能力。本課程在高級(jí)語(yǔ)言程序設(shè)計(jì)、網(wǎng)頁(yè)制作、Web前端開發(fā)初級(jí)等課程之后開設(shè)，后續(xù)課程為.NET移動(dòng)程序設(shè)計(jì)等。2.設(shè)計(jì)思路圍繞互聯(lián)網(wǎng)+、新興技術(shù)行業(yè)帶來的Web前端開發(fā)、移動(dòng)端開發(fā)技術(shù)技能人才需求，以企業(yè)用人為導(dǎo)向，以崗位技術(shù)和綜合素質(zhì)為核心，培養(yǎng)具有良好職業(yè)道德的人文素養(yǎng)，掌握Web前后端數(shù)據(jù)交互、響應(yīng)式開發(fā)等知識(shí)，具備動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)、開發(fā)、調(diào)試、維護(hù)等能力。課程內(nèi)容突出對(duì)學(xué)生職業(yè)能力的訓(xùn)練，理論知識(shí)的選取緊緊圍繞工作任務(wù)完成的需要來進(jìn)

3、行，同時(shí)又充分考慮了高等職業(yè)教育對(duì)理論知識(shí)學(xué)習(xí)的需要，并融合了相關(guān)職業(yè)資格證書對(duì)知識(shí)、技能和態(tài)度的要求。項(xiàng)目設(shè)計(jì)以網(wǎng)站建設(shè)過程為線索來進(jìn)行。教學(xué)過程中，以項(xiàng)目為主線，通過問題、項(xiàng)目導(dǎo)入（實(shí)踐）學(xué)生思考、分析、回答、教師評(píng)議、總結(jié)（理論）擴(kuò)展應(yīng)用（實(shí)踐）的方式進(jìn)行，使授課內(nèi)容與工作實(shí)際緊密結(jié)合。教學(xué)效果評(píng)價(jià)采取過程評(píng)價(jià)與結(jié)果評(píng)價(jià)相結(jié)合的方式，通過理論與實(shí)踐相結(jié)合，重點(diǎn)評(píng)價(jià)學(xué)生的職業(yè)能力。建議開設(shè)160課時(shí)，理論課時(shí)為80，實(shí)訓(xùn)課時(shí)為80，理論與實(shí)踐并行。二、課程目標(biāo)根據(jù)本專業(yè)的培養(yǎng)目標(biāo)和人才規(guī)格，按照知識(shí)、能力、素質(zhì)三個(gè)維度的分析方法，概括出本課程的目標(biāo)。1.知識(shí)目標(biāo)：（1）理解響應(yīng)式及響應(yīng)式的

4、原理；（2）掌握Bootstrap的柵格系統(tǒng)；（3）掌握Bootstrap布局、組件、基本樣式、插件的使用方法；（4）掌握基本的API設(shè)計(jì)方法；（5）掌握Ajax技術(shù)，實(shí)現(xiàn)異步刷新，異步獲取數(shù)據(jù)的使用方法；（6）掌握Laravel框架構(gòu)建動(dòng)態(tài)網(wǎng)站的使用方法；（7）熟悉網(wǎng)站管理的相關(guān)知識(shí)；（8）掌握運(yùn)用CMS系統(tǒng)進(jìn)行網(wǎng)站建設(shè)的相關(guān)知識(shí)和技能。2.能力目標(biāo)：（1）能使用Bootstrap柵格系統(tǒng)、基本樣式、組件、LESS和SASS、插件、Bootstrap定制及優(yōu)化、Bootstrap內(nèi)核解碼開發(fā)響應(yīng)式頁(yè)面；（2）能根據(jù)HTTP協(xié)議方法定義操作；（3）能使用API進(jìn)行數(shù)據(jù)篩選、支持大型二進(jìn)制資源的

5、部分響應(yīng)與后端進(jìn)行交互；（4）能熟練使用Ajax中的XML、JSON數(shù)據(jù)格式與網(wǎng)站后端進(jìn)行數(shù)據(jù)交互；（5）能熟練使用Laravel的路由、控制器、Blade模板、前端組件構(gòu)建動(dòng)態(tài)網(wǎng)站；（6）能獨(dú)立安裝、部署、開發(fā)、維護(hù)和管理網(wǎng)站。（7）設(shè)計(jì)過程中充分考慮瀏覽器兼容等問題，并做適當(dāng)處理。3.素質(zhì)目標(biāo)：（1）培養(yǎng)學(xué)生“愛崗、敬業(yè)、細(xì)致、求精”的職業(yè)道德與情感；（2）培養(yǎng)學(xué)生良好的動(dòng)手實(shí)踐習(xí)慣；（3）注重培養(yǎng)學(xué)生與社會(huì)接軌；（4）培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)男惺嘛L(fēng)格；（5）培養(yǎng)學(xué)生具有踏實(shí)工作作風(fēng)，良好的觀察和思考能力以及團(tuán)隊(duì)合作能力。三、課程內(nèi)容和要求根據(jù)專業(yè)課程目標(biāo)和涵蓋的工作任務(wù)要求，確定課程內(nèi)容和要求，說

6、明學(xué)生應(yīng)獲得的素質(zhì)、知識(shí)與能力。序號(hào)學(xué)習(xí)任務(wù)主要內(nèi)容及要求能力目標(biāo)參考學(xué)時(shí)工作任務(wù)主要知識(shí)點(diǎn)及技能要求1Web前后端數(shù)據(jù)交互技術(shù)模塊Web數(shù)據(jù)交互技術(shù)概述Web的概念Web數(shù)據(jù)交互技術(shù)掌握Web數(shù)據(jù)交互的概念及其主要技術(shù)30HTTP概述HTTP簡(jiǎn)介HTTP的通信過程HTTP狀態(tài)碼匯總掌握HTTP的通信過程掌握HTTP常見狀態(tài)碼的意義AJAX與iframeAJAX異步通信Iframe異步通信應(yīng)用實(shí)例掌握用AJAX和iframe分別實(shí)現(xiàn)異步通信頁(yè)面性能優(yōu)化技術(shù)Cookie的創(chuàng)建、使用和銷毀頁(yè)面性能優(yōu)化掌握Cookie的創(chuàng)建、使用和銷毀Socket通信Socket通信簡(jiǎn)介使用Socket實(shí)現(xiàn)聊天室功

7、能掌握Socket通信機(jī)制和通信過程2響應(yīng)式開發(fā)技術(shù)模塊Bootstrap概述Bootstrap簡(jiǎn)介Bootstrap的特性Bootstrap的應(yīng)用瀏覽Bootstrap的開發(fā)工具Bootstrap的安裝和配置掌握Bootstrap的下載安裝和環(huán)境搭建80Bootstrap的基本架構(gòu)響應(yīng)式開發(fā)技術(shù)Bootstrap的柵格布局掌握Bootstrap柵格布局，會(huì)利用柵格進(jìn)行網(wǎng)頁(yè)的布局Bootstrap的樣式Bootstrap的作用媒體對(duì)象文本、列表、表格、圖片、表單、輔助樣式掌握Bootstrap的樣式Bootstrap的組件按鈕、下拉菜單、按鈕組、輸入框組、導(dǎo)航、標(biāo)簽、徽章、縮略圖、警告框、進(jìn)度

8、條、算式、字體圖標(biāo)掌握Bootstrap各種組件的使用方法Sass概述Sass的概念Sass的安裝Sass的配置Sass的基礎(chǔ)語(yǔ)法掌握Sass的安裝和配置，學(xué)會(huì)使用Gulp編譯SassBootstrap響應(yīng)式開發(fā)案例Bootstrap項(xiàng)目的搭建頁(yè)面初始化后臺(tái)模板布局項(xiàng)目首頁(yè)用戶中心和提醒事項(xiàng)數(shù)據(jù)查詢和數(shù)據(jù)面板動(dòng)畫效果實(shí)現(xiàn)Bootstrap各種前端顯示效果3網(wǎng)站項(xiàng)目實(shí)戰(zhàn)模塊CMS開發(fā)CMS概述CMS的內(nèi)容搭建Laravel框架搭建網(wǎng)站開發(fā)框架Laravel50CMS基礎(chǔ)頁(yè)面CMS基礎(chǔ)頁(yè)面概述后臺(tái)登錄頁(yè)后臺(tái)首頁(yè)訪問權(quán)限控制實(shí)現(xiàn)后臺(tái)登錄模型管理實(shí)戰(zhàn)模型管理概述模型創(chuàng)建模型列表模型修改模型刪除掌握實(shí)現(xiàn)

9、模型創(chuàng)建、模型列表、模型修改和模型刪除功能的步驟欄目管理實(shí)戰(zhàn)欄目管理概述欄目添加欄目列表查看欄目修改欄目刪除掌握實(shí)現(xiàn)欄目添加、欄目列表查看、欄目修改和欄目刪除功能的步驟內(nèi)容管理實(shí)戰(zhàn)內(nèi)容管理概述內(nèi)容添加內(nèi)容保存內(nèi)容呈現(xiàn)內(nèi)容修改內(nèi)容刪除掌握實(shí)現(xiàn)內(nèi)容添加、內(nèi)容保存、內(nèi)容呈現(xiàn)、內(nèi)容修改和內(nèi)容刪除功能的步驟廣告管理實(shí)戰(zhàn)廣告管理概述廣告位管理廣告內(nèi)容管理掌握廣告位管理與廣告內(nèi)容管理CMS前臺(tái)頁(yè)面呈現(xiàn)實(shí)戰(zhàn)CMS前臺(tái)頁(yè)面概述注冊(cè)服務(wù)和門面前臺(tái)首頁(yè)和導(dǎo)航文章頁(yè)面產(chǎn)品頁(yè)面其他頁(yè)面掌握CMS前臺(tái)頁(yè)面功能實(shí)現(xiàn)的步驟數(shù)據(jù)庫(kù)備份與恢復(fù)實(shí)戰(zhàn)數(shù)據(jù)庫(kù)備份與恢復(fù)概述數(shù)據(jù)庫(kù)備份數(shù)據(jù)庫(kù)恢復(fù)掌握CMS后臺(tái)數(shù)據(jù)的備份與恢復(fù)靜態(tài)資源管理實(shí)

10、戰(zhàn)靜態(tài)資源管理概述靜態(tài)資源列表展示靜態(tài)資源上傳靜態(tài)資源刪除實(shí)現(xiàn)靜態(tài)資源列表展示、靜態(tài)資源上傳和靜態(tài)資源刪除功能的步驟四、實(shí)施建議1.教學(xué)建議（1）該課程采用“項(xiàng)目驅(qū)動(dòng)，案例教學(xué)，一體化課堂”的教學(xué)模式開展教學(xué)。整個(gè)課程由若干個(gè)真實(shí)的軟件項(xiàng)目驅(qū)動(dòng)，每個(gè)教學(xué)單元完成項(xiàng)目中典型的工作任務(wù)。160個(gè)課時(shí)內(nèi)完成教師與學(xué)生互動(dòng)的講練結(jié)合教學(xué)過程，完成基于B/S模式的動(dòng)態(tài)網(wǎng)站的開發(fā)。（2）課程的理論實(shí)踐一體化教學(xué)全過程全部安排在設(shè)施先進(jìn)的多媒體機(jī)房進(jìn)行，教學(xué)中以學(xué)生為中心，教師全程負(fù)責(zé)講授知識(shí)、答疑解惑、指導(dǎo)項(xiàng)目設(shè)計(jì)，充分調(diào)動(dòng)師生雙方的積極性，達(dá)成教學(xué)目標(biāo)。（3）在教學(xué)過程中，充分運(yùn)用現(xiàn)代教育技術(shù)，多采用電

11、子多媒體課件和其他電子資源進(jìn)行授課。代替?zhèn)鹘y(tǒng)的課堂形式的講解，突破時(shí)空限制，幫助學(xué)生更好的理解本課程的內(nèi)容。（4）將實(shí)訓(xùn)場(chǎng)所設(shè)計(jì)成既能滿足實(shí)踐教學(xué)要求，又可在現(xiàn)場(chǎng)進(jìn)行理論教學(xué)的布局。在組織教學(xué)的過程中，通過導(dǎo)向任務(wù)、講解操作要領(lǐng)、操作示范演練、訓(xùn)練與逐個(gè)指導(dǎo)等環(huán)節(jié)，把培養(yǎng)學(xué)生知識(shí)與技能單元能力的過程設(shè)計(jì)為邊講邊練的過程，做到理論教學(xué)與實(shí)踐教學(xué)一體化，教學(xué)內(nèi)容與實(shí)踐內(nèi)容一體化，實(shí)訓(xùn)活動(dòng)與工學(xué)結(jié)合一體化。（5）在教學(xué)過程中，注重建立“知識(shí)、能力、素質(zhì)、創(chuàng)新”的課程教學(xué)思想，把握學(xué)生的知識(shí)背景與接收能力，內(nèi)容覆蓋符合職業(yè)層次要求，深度適宜，注意理論知識(shí)闡述分析“必須、適度、夠用”，實(shí)際運(yùn)用“舉一反三

12、”的原則，將知識(shí)與技能培養(yǎng)并重。2.教學(xué)評(píng)價(jià)（1）采用階段評(píng)價(jià)，目標(biāo)評(píng)價(jià)，項(xiàng)目評(píng)價(jià)，理論與實(shí)踐一體化評(píng)價(jià)模式。（2）關(guān)注評(píng)價(jià)的多元性，結(jié)合課堂提問、學(xué)生作業(yè)、自選項(xiàng)目完成情況及考試情況，綜合評(píng)價(jià)學(xué)生成績(jī)。（3）應(yīng)注重學(xué)生動(dòng)手能力和實(shí)踐中分析問題、解決問題能力的考核，對(duì)在學(xué)習(xí)和應(yīng)用上有創(chuàng)新的學(xué)生應(yīng)予特別鼓勵(lì)，全面綜合評(píng)價(jià)學(xué)生能力。（4）評(píng)價(jià)比例：平時(shí)表現(xiàn)30%（考勤、作業(yè)、學(xué)習(xí)態(tài)度等）+ 階段考核30%（期中考試、自選項(xiàng)目）+ 期終考核40%（理論考試）。3.教學(xué)基本條件工位數(shù)硬件基本要求硬件推薦要求軟件要求36CPU：i3 4代及以上內(nèi)存：2G及以上硬盤：512G及以上CPU：i5 3代及以上

13、內(nèi)存：4G及以上硬盤：1TB及以上Windows 7以上操作系統(tǒng)；DreamWave CS6或以后版本；MySQL數(shù)據(jù)庫(kù)平臺(tái)及開發(fā)環(huán)境；PHP 7.0以上版本4.教材選用與編寫（1）必須依據(jù)本課程標(biāo)準(zhǔn)編寫教材，教材應(yīng)充分體現(xiàn)任務(wù)引領(lǐng)、實(shí)踐導(dǎo)向課程的設(shè)計(jì)思想。（2）教材應(yīng)通過工作過程、典型案例和項(xiàng)目任務(wù)，來闡述Web前端開發(fā)的理論及技術(shù)運(yùn)用，在基礎(chǔ)知識(shí)構(gòu)建和基本技能培養(yǎng)兩方面結(jié)合緊密，雙重并舉。（3）教材應(yīng)圖文并茂，提高學(xué)生的學(xué)習(xí)興趣，通過課堂演示加深學(xué)生對(duì)本課程的認(rèn)識(shí)，教材表達(dá)必須精煉、準(zhǔn)確、科學(xué)。（4）教材內(nèi)容應(yīng)體現(xiàn)先進(jìn)性、通用性、實(shí)用性，要將本專業(yè)新技法、新工藝、新思路及時(shí)地納入教材，使教材更貼近本專業(yè)的發(fā)展和實(shí)際需要。（5）教材中的活動(dòng)設(shè)計(jì)的內(nèi)容要具體，并具有可操作性。（6）推薦教材：Web前端開發(fā)中級(jí)，工業(yè)和信息化部教育與考試中心主編，1+X證書制度試點(diǎn)培訓(xùn)用書