淺析高職院校Web前端開發課程體系建設

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

關鍵詞：Web前端;高職;課程體系

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

1 Web前端

Web前端也被稱為“客戶端”，是用戶可以看到和體驗到的網站視覺方面，即用戶所看到的一切Web瀏覽器展示的內容，涉及用戶可以看到，觸摸和體驗的一切。Web前端包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能也更加強大。

2 如何進行Web前端的學習

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

3 高職院校Web前端開發課程體系建設

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

3.1 Web系統開發過程

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

3.2 Web系統開發相關崗位

Web系統開發的相關崗位：產品經理或項目經理下屬分別有IU/UE、前端開發和服務端開發。

3.3 考試中心下發的核心課程

MySQL 數據庫基礎與應用、PHP 技術與應用、Web 前后端數據交互技術、響應式開發技術、網站項目實戰等課程。

3.3.1 MySQL 數據庫基礎與應用

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

3.3.2 PHP 技術與應用

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

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

3.3.3 Web 前后端數據交互技術

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

3.3.4 響應式開發技術

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

3.3.5 網站項目實戰

完成實戰項目的設計與開發。可以采用線上線下相結合的實訓方式，與項目實例相結合的教學方法，以面向門戶網站、交易類網站、企事業網站、娛樂性質網站的規劃與建設、開發與維護、關系型數據庫開發與管理等為實訓項目內容，配備一定量的企業實際項目。

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

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

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