摘 要：Web前端開發(fā)課程是高職院校計(jì)算機(jī)相關(guān)專業(yè)重要的課程，其教學(xué)目的就是使學(xué)生通過學(xué)習(xí)Web開發(fā)技術(shù)，具備獨(dú)立開發(fā)Web前端產(chǎn)品的能力。本文簡(jiǎn)單介紹了Web前端和學(xué)習(xí)Web前端具備的基本技能;分析了工業(yè)和信息化部教育與考試中心下發(fā)的關(guān)于Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)的主要內(nèi)容;深度剖析了Web前端開發(fā)的核心課程，為高職院校計(jì)算機(jī)教師有效開展Web前端開發(fā)課程的教學(xué)提供了指導(dǎo)。

關(guān)鍵詞：Web前端;高職;課程體系

Web前端開發(fā)是從網(wǎng)頁(yè)制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物，那時(shí)的網(wǎng)站主要內(nèi)容是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，網(wǎng)頁(yè)上各種生動(dòng)交互式的軟件為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。高職院校的人才培養(yǎng)目標(biāo)是培養(yǎng)技能型人才，高職院校Web前端開發(fā)課程也應(yīng)該與時(shí)俱進(jìn)，跟上飛速發(fā)展的信息時(shí)代。

1 Web前端

Web前端也被稱為“客戶端”，是用戶可以看到和體驗(yàn)到的網(wǎng)站視覺方面，即用戶所看到的一切Web瀏覽器展示的內(nèi)容，涉及用戶可以看到，觸摸和體驗(yàn)的一切。Web前端包括Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁(yè)更加美觀，交互效果顯著，功能也更加強(qiáng)大。

2 如何進(jìn)行Web前端的學(xué)習(xí)

學(xué)習(xí)Web前端需要三個(gè)必備的基礎(chǔ)技能：HTML、CSS、JavaScript。這三個(gè)是前端開發(fā)中最基本也是最必須的三個(gè)技能。前端的開發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。除了這三種核心的技術(shù)必須學(xué)會(huì)以外，還有其他的知識(shí)也需要我們掌握，例如jQuery、Ajax、各種常用的框架、以及后端技術(shù)。

3 高職院校Web前端開發(fā)課程體系建設(shè)

工業(yè)和信息化部教育與考試中心下發(fā)了關(guān)于Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)，在該標(biāo)準(zhǔn)中明確提出了Web前端開發(fā)職業(yè)技能的培養(yǎng)目標(biāo)，就業(yè)方向，銜接專業(yè)，考核方式，主要課程等等，為高職院校Web前端開發(fā)課程的教學(xué)指明了方向。

3.1 Web系統(tǒng)開發(fā)過程

Web前端系統(tǒng)開發(fā)過程：先是項(xiàng)目的提出;然后進(jìn)行需求分析;后面進(jìn)入設(shè)計(jì)階段，有UI設(shè)計(jì)和系統(tǒng)設(shè)計(jì);設(shè)計(jì)結(jié)束后分別進(jìn)行前端和后臺(tái)的開發(fā);以上工作結(jié)束后完成系統(tǒng)測(cè)試和項(xiàng)目的發(fā)布與維護(hù)。

3.2 Web系統(tǒng)開發(fā)相關(guān)崗位

Web系統(tǒng)開發(fā)的相關(guān)崗位：產(chǎn)品經(jīng)理或項(xiàng)目經(jīng)理下屬分別有IU/UE、前端開發(fā)和服務(wù)端開發(fā)。

3.3 考試中心下發(fā)的核心課程

MySQL 數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用、PHP 技術(shù)與應(yīng)用、Web 前后端數(shù)據(jù)交互技術(shù)、響應(yīng)式開發(fā)技術(shù)、網(wǎng)站項(xiàng)目實(shí)戰(zhàn)等課程。

3.3.1 MySQL 數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用

MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，是最流行的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)之一，在 Web 應(yīng)用方面，MySQL是最好的 RDBMS （Relational Database Management System，關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)） 應(yīng)用軟件。MySQL擁有體積小、速度快、性能高、使用簡(jiǎn)單等優(yōu)點(diǎn)，同時(shí)其開放源代碼也使得其具有使用門檻低的特點(diǎn)。

3.3.2 PHP 技術(shù)與應(yīng)用

PHP（Hypertext Preprocessor）是全球最流行的Web程序開發(fā)語(yǔ)言，沒有之一，而是唯一。語(yǔ)法簡(jiǎn)單，易于學(xué)習(xí)、功能強(qiáng)大、靈活易用。集眾家之所長(zhǎng)融合了現(xiàn)代編程語(yǔ)言（如 C、Java 和 Perl）的一些最佳特性以及PHP自創(chuàng)新的語(yǔ)法。PHP、Apache和MySQL的組合已成為Web服務(wù)器的一種配置標(biāo)準(zhǔn)。PHP當(dāng)仁不讓的成為Web腳本技術(shù)的先驅(qū)，引領(lǐng)Web技術(shù)的潮流。

PHP是一種HTML內(nèi)嵌式的語(yǔ)言，和微軟的ASP頗有幾分相似，都是一種在服務(wù)器端執(zhí)行的嵌入HTML文檔的腳本語(yǔ)言，被很多的大型門戶網(wǎng)站所使用，例如：騰訊、新浪、百度等等。用PHP做出的動(dòng)態(tài)頁(yè)面與其他的編程語(yǔ)言相比有更快的執(zhí)行速度。PHP支持幾乎所有流行的數(shù)據(jù)庫(kù)以及操作系統(tǒng)，完全不必考慮跨平臺(tái)問題。

3.3.3 Web 前后端數(shù)據(jù)交互技術(shù)

了解Web的概述。掌握HTTP協(xié)議，主要掌握 HTTP協(xié)議概述、通信過程、狀態(tài)值匯總等。掌握并能靈活應(yīng)用Ajax技術(shù)，通過理解 Ajax簡(jiǎn)介、工作原理等，掌握 JSON解析和XML解析，應(yīng)用DOM的操作。了解Iframe和 Socket通信，了解Socket概念、工作原理、服務(wù)端與客戶端、通信協(xié)議、通信機(jī)制、通信過程。掌握Cookie工作原理、作用、創(chuàng)建、使用、銷毀等操作。

3.3.4 響應(yīng)式開發(fā)技術(shù)

了解Bootstrap概述;掌握并能靈活應(yīng)用 Bootstrap柵格布局，掌握Bootstrap 柵格基本布局、水平布局、垂直布局、柵格排序、偏移等操作。能應(yīng)用Bootstrap樣式中的媒體對(duì)象、文本、列表、表格、圖片、表單、輔助樣式（背景色、文本顏色）。掌握Bootstrap組件，應(yīng)用Bootstrap按鈕、表格、下拉菜單、按鈕組、輸入框組、導(dǎo)航、標(biāo)簽、徽章、縮略圖、警告框、進(jìn)度條、版式、字體圖標(biāo)等。掌握SASS的概述、安裝配置、基礎(chǔ)語(yǔ)法等。

3.3.5 網(wǎng)站項(xiàng)目實(shí)戰(zhàn)

完成實(shí)戰(zhàn)項(xiàng)目的設(shè)計(jì)與開發(fā)?？梢圆捎镁€上線下相結(jié)合的實(shí)訓(xùn)方式，與項(xiàng)目實(shí)例相結(jié)合的教學(xué)方法，以面向門戶網(wǎng)站、交易類網(wǎng)站、企事業(yè)網(wǎng)站、娛樂性質(zhì)網(wǎng)站的規(guī)劃與建設(shè)、開發(fā)與維護(hù)、關(guān)系型數(shù)據(jù)庫(kù)開發(fā)與管理等為實(shí)訓(xùn)項(xiàng)目?jī)?nèi)容，配備一定量的企業(yè)實(shí)際項(xiàng)目。

從目前高職院校教學(xué)的發(fā)展現(xiàn)狀來看，經(jīng)過多年的教學(xué)實(shí)踐，顯然已經(jīng)取得了前所未有的重大突破。要實(shí)現(xiàn)面向未來的長(zhǎng)遠(yuǎn)發(fā)展，還需要所有同仁開拓進(jìn)取，完善不足。

本論文為天津市高等職業(yè)技術(shù)教育研究會(huì)（2019）年度課題“1+X證書制度下職業(yè)教育改革實(shí)施路徑研究——以Web前端為例”（課題批準(zhǔn)號(hào)：2020-4010）的研究成果。

作者簡(jiǎn)介：任志娟（1971-），女，天津人，教師，副教授，主要從事數(shù)據(jù)庫(kù)、程序設(shè)計(jì)等方面的教學(xué)和研究。