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

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

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

1 Web前端

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

2 如何進行Web前端的學習

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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