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

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

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

引言

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

一、課程性質

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

二、課程建設

（一）教學內容

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

（二）教學方法

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

（三）評估方法

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

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

三、設計與實施

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

（1）提出問題

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

（2）明確主題

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

（3）解釋基本原理

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

（4）總結和實踐

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

四、培養(yǎng)并提高能力

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

（1）編寫高質量代碼

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

（2）團隊合作

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

五、應用與效果

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

六、增加實踐課程課時

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

七、結束語

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

參考文獻

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

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

基金項目

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

作者簡介

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