新時代高職院校計算機應用技術專業Web前端開發課程的實踐研究

摘要：開發Web前端是一項非常特殊的任務。本文以計算機特定的“Web前端開發技術”課程為例，介紹該課程的性質，分析課程的內容，課程的難點，并確定了課程形式的知識點。介紹了設計和制作的視頻及其應用，為提高此類課程的質量和有效性提供了參考。

關鍵詞：Web前端開發課程 ?高職院校課程 ?教學實踐

引言

Web技術是Internet應用技術中最重要的基礎技術之一，它對應于越來越多的領域和規模，并且需求趨于多樣化和復雜化，互聯網行業需要大量從事網站設計，系統開發，運營和維護的前端Web開發人才。在Web1.0時代，網站的主要內容是靜態的，使用該網站的用戶的行為也基于沖浪。所以，基于Dreamweaver和FrontPage的可視化開發工具可以指導網頁的設計和開發。這些課程注重界面設計。它還淡化了編碼問題，并創建了大多數靜態網頁，這些網頁是通過HTML和CSS等技術呈現給用戶的。

一、課程性質

本文涵蓋的Web前端開發技術課程是一門有關信息管理和信息系統的專業骨干課程，是一門實用性強的實用課程。該課程的內容包括：前端開發技術的開發過程和關鍵技術，常見的前端開發工具的功能和使用，頁面操作和調試方法，前端頁面內容和樣式的基本方法和技術，前端結束腳本語言的原理和應用程序，使用主流的前端開放源代碼框架，全面設計前端頁面。

二、課程建設

（一）教學內容

安排教學內容時，根據Web前端開發所需的知識，主要基于HTML，CSS和JavaScript組織指令內容，并添加AJAX和PHP內容。同時，隨著HTML技術的發展，HTML5的知識將得到及時的改善，將兩個關鍵內容提取到內容系統中：（1）將CSS+DIV技術集成到本書的每一章中，增強CSS+DIV技術的融合，并解決實際工程中的應用問題。（2）合并JavaScript，DOM，BOM技術，著重培養學生設計動態交互式網頁的能力。（3）通過添加PHP服務器端編程，學生首先了解Web后端的開發，進一步加深對Web前端的理解，并在使用Web方法之前學習與后端的異步數據通信。

（二）教學方法

結合任務型教學法和案例教學方法，激發學生的學習興趣，并注意學生自我學習能力的發展。在教學方法中，自學方法是主流，教師的教學是相輔的。首先，分解網站的總體設計工作，并為每個知識點設計一個小案例。教師將首先討論重要的知識點和實例，并積極為學生提供免費的學習資源平臺，并教授信息獲取途徑，以便學生掌握技術應用的最重要點。然后讓學生自己完成每個級別的任務，然后由老師解釋并糾正實踐中的一般問題。將任務驅動和案例教學相結合，以激發學生的學習興趣并增強他們的自學技能。

（三）評估方法

關于評估方法，以前集中于知識點評估的評估標準已經改變為側重于實踐技能。過去，授課的考試形式是老師寫問題，然后學生回答，但是這種形式的考試僅限于書本知識，不能掌握學生的真正能力。《Web技術及應用》是理論和實踐的結合，不僅要求學生理解基本概念，而且還要求應用特定的知識，動手制作和協調技能。所以除了一般的理論知識檢查鏈接之外，還添加了項目開發的實踐評估方式。

學生將獲得所學知識，在此基礎上完成給定的項目內容和相關文檔，項目分數必須至少為課程總分數的20%。同時，根據這些項目，建議并鼓勵學生參加學校和社會組織的各種比賽，獲獎項目將獲得額外積分。

三、設計與實施

Web前端開發技術課程很復雜，涵蓋了三個核心：HTML5，CSS3和JavaScript，以及圍繞這三個核心開發的許多技術框架和解決方案。所以課程小組開發了一系列微型課程，以解決課程中的關鍵點和挑戰，成為對傳統課堂教學的精髓。下面以課程組教師創建的“Web前端設計表單”視頻的設計和實現過程為例。在該教學視頻中，介紹了主頁上的表單知識，通過教授和實踐該知識點，學生將了解表格的申請表，表格的基本結構以及學習創建表格的方法和技巧。使用案例、分解和動畫方法解決問題，解釋知識點，并通過課后練習進行動手實踐練習所學知識點。課程內容的設計包括以下四個部分：

（1）提出問題

聯系現實情況，在現實世界的網站上顯示常見表應用方案的示例，在Web前端開發技術課程中指導您了解表的知識點，并提出此視頻問題：如何在網站中建立電子表格，網站實施了嗎？

（2）明確主題

通過栩栩如生的動畫形式，我們將在三維圖像中呈現Web表單的基本結構，并指出視頻的主題。

（3）解釋基本原理

與實際情況相結合來看，使用廣泛的動畫逐步解釋創建表內容和創建表樣式的過程，從而滲透解釋基本原理。該程序編寫的一個小視頻實時顯示了操作過程，可以幫助學生將理論整合到實踐中并加深了抽象程序。在視頻中顯示在瀏覽器中解釋了代碼之后的副作用，以便學生可以更生動直觀地理解程序的結果。

（4）總結和實踐

視頻的結尾總結了所學的知識，并幫助學生復習了視頻內容。在視頻的末尾進行相關的動手練習，以幫助學生應用和練習介紹的知識點。輔助材料中還包括示例和練習的參考材料，以方便學生進行比較。

四、培養并提高能力

Web前端開發是一個易于但難以學精的項目，內容覆蓋了廣泛的知識，包括特定的技術和抽象的概念。通過教學生編寫高質量的代碼并鼓勵團隊合作來發展和提高學生的技能。

（1）編寫高質量代碼

編寫代碼是Web前端開發人員的基本任務，并且代碼的質量反映了開發人員的能力。這里的核心是代碼質量，前端開發的三種主要語言：HTML，CSS和JavaScript具有不同的特性和不同的代碼質量要求。根據三種編碼語言的特點，鼓勵學生編寫高質量的編碼技能和能力。

（2）團隊合作

在當今競爭激烈的世界中，團隊合作非常重要。大學教育需要在各個方面培養大學生的團隊合作精神和能力，提升大學生的團隊合作意識，并培養高素質的包容性人才。可以使用網絡技術來開發出色的網頁效果，但是要隱藏精美的頁面代碼背后的內容變得越來越困難。除技術原因外，團隊合作也是一個關鍵因素。通過分散項目任務，學生可以完成協作并培養學生的團隊合作感和學生技能。

五、應用與效果

在開發技術的Web前端課程的教學過程中，每節課后都會通過網絡教學平臺發布相關視頻和其他材料，以便學生在課后觀看和學習它們。

六、增加實踐課程課時

高職院校越來越傾向于培養應用型人才，所以，學生需要更多的實踐能力。老師不僅需要開展學習精彩的課程，而且還需要在學校里進行Web應用程序開發技術課程的更多動手教育。學生通常對基于計算機的操作感興趣，教師應在實踐課程中教授理論知識，這對于學生從操作角度理解理論知識更有用，它比僅僅學習理論知識更清晰，更容易記住。

七、結束語

在本文中，我們以Web前端制作技術知識的形式介紹Web前端開發技術課程的內容和功能，并解釋視頻的設計，制作和應用。在課程的整個過程中，相關的視頻和輔助材料都會在網絡教學平臺上發布，方便學生在課后自主學習中使用。下一個任務是結合在線教室平臺來豐富課程的視頻庫，并層疊和集成分段視頻，以便學生可以在教室外獨立學習和復習。綜合評估方法更方便學生調動學習熱情，有效開展網絡學習和自主研究活動。

參考文獻

[1]蔚繼承，燕飛，王美麗，陳勇.面向能力培養的《Web技術及應用》課程教學改革[J].教育教學論壇，2016，No.287，64-65.

[2]劉強，張阿敏，朱文球，等.計算機公共基礎課程教學資源建設研究[J].計算機教育，2012，（17）：50-53.

基金項目

此文是2019年度吉林省職業教育與成人教育教學改革研究課題《新時代高職院校計算機應用技術專業Web前端開發課程的實踐研究》（課題編號：2019ZCY219）的支撐性研究成果。

作者簡介

辛紅，女，1983年出生，松原職業技術學院講師，研究方向是高職計算機應用及軟件工程。