設計比賽促進WEB前端教學實踐與審美提升

徐震

摘?要：在迅猛發展的互聯網領域中，Web 技術被廣泛應用。通過培養出Web 前端工程師來滿足社會對應崗位的就業和技術發展的實際需求。基于Web前端課程的多樣化、知識結構全面性及涉及內容廣泛性的基本特征合理設定出教學方案，積極融入到教學實踐中。為活躍學習氛圍，開展Web 相關類型的設計比賽來檢驗、優化實踐能力，綜合提升審美觀。

關鍵詞：設計比賽?WEB前端教學?審美提升

Web前端一直處于計算機應用開發領域中的重要地位，尤其是在應用產品開發環節中起到不可替代的作用。對于教學過程中的Web前端學習及實踐的同時，還需要對HTML、HTML5&CSS3技術、JavaScript高級程序設計、Web交互技術發展趨勢、瀏覽器渲染技術、Ajax以及網頁網站開發等內容的不斷探索。對計算機應用開發工具和開發框架的熟練掌握并及時了解相關的更新動態信息。熟悉數據通信協議和瀏覽器的工作原理，實現對互聯網交互應用的設計能力，呈現給用戶完整的網站界面。伴隨著互聯網應用的不斷發展和進步，網頁中需要呈現的內容也多種多樣，包含了豐富的媒體鏈接，不再是圖片和文字的單一性組合。在網頁制作的過程中需要合理融入視覺審美、操作慣性、讀取引導等思維來增強用戶的體驗感，植入交互形式的軟件化網頁呈現，其基礎全部是來源于對Web前端技術的應用。采用web前端知識體系及教學的實踐內容，來展開設定專項的設計比賽。從而促進Web前端教學，達到綜合審美能力的有效提升。

一、以HTML語法速記和常用標簽的用法作為比賽內容來促進Web前端教學

超文本標記使用語言和原始文本或其他文本網頁界面標記位置語言和文本基本結構。 HTML（HTML網頁標記文本的語言）是，萬維網頁面的標準語言。兩種基本的標準語言可直接用于制作過程中的文本結構，HTML是其內容的關鍵和重要載體。純文本鏈接的整個結構作為標記語言結構，是Internet上最重要的系統語言和主要文本。HTML的其他功能是學習他的Web瀏覽器如何顯示文檔內容的所有內容，它還可以通過多種方式將各種文檔超鏈接到各種資源。對HTML基本的深入了解，學習和使用其他工具來編輯內容，并執行創建各種文檔內容的過程來重新編輯和審查修改Web界面的呈現狀態。

引導學生正確理解HTML文檔與瀏覽器兩者之間呼應的關系，熟悉HTML常用標簽在應用中的具體用法。HTML5引入了一些新的基本語法結構和多個元素，例如突出顯示，音頻播放和畫布標簽。 Canvas是與多媒體播放相關的元素，可以代替Flash來處理相關的最終數據或其他組合的圖形或動畫作品，并以交互的形式幫助用戶一起發現。 HTML5中發布了一些新的多功能工具幫助瀏覽器實現Akobo客戶會議的功能。表單仍然是Web的核心及可以實現的技術方式之一。 HTML5添加了許多表單樣式表，這些樣式表也可以輕松完成并多次驗證。除了前端腳本之外還可以使用語言和文本，引入了所有文檔結構標簽，例如頁眉，節，本文，路線導航，頁腳等。過展開以HTML語法速記和常用標簽的用法來展開比賽，提升學生的學習和參與的積極性，教授展開速記的具體方法來有效的促進Web前端教學。

二、以CSS選擇符合模塊元素內容的應用作為比賽內容來綜合提升視覺審美能力

CSS是一種綜合性表現，網頁主界面的外觀呈現的表達力，是網頁的外部衣服。比如修改標題和內容，在內容中添加斜體及其顏色，或者在文章標題內容中添加大背景靜態圖片和下邊框的設計方法。可以用來更改所有其他內容的外觀和形狀的功能都是為了實現全面展示呈現。CSS還是一個級聯樣式表，它的基本功能是控制詳細信息頁面中每個元素的具體表達，如不同樣式、大背景環境、布局、其他主要區域的大小和形狀以及底部的外部邊框。持續的學習、掌握選擇符的使用和合理的融合應用。在使用過程中，選擇器可以逐漸改變和擴展對新擴展應該有全面了解。它總是記得一些比較常見的自我屬性，如傳統的書法筆跡、閱讀其他文本、大背景的底邊、邊距等相關內容。CSS3它是設計網頁的基本結構，實現了使網頁表現與內容分離的樣式和功能設計，它可以劃分頁面展示和其他內容。正確引導學生體會到內容和樣式的分離設計原則。

它使用標準的等值線框建模兩種方法，并在選擇列表中選擇系統模塊，例如超鏈接的三個主要模型，語言和文本的核心模塊和其他文本基本功能以及當前時代的背景和框架基礎。閱讀效果良好的文本，在多列表中重新布局以及其他模塊功能。CSS3的完全取消選擇器也很有用，例如用于子字符串5速手動傳輸的主要屬性的取消選擇器，整體結構化為類。短期和長期目標偽類以及各種當前狀態與UI相關的元素為環境偽類，并且因為其他的fordbbrothers和brother的其他元素可以用作會議選擇器。可以大大減少各種標簽中的類別ID，從而使與設計相關的人員更容易維護的實驗樣品表，并且使用科學的知識產生各種相應數據的最佳結果。在web前端的自由獨立開發中，在小盒子中建模的幾種方法也是最重要的。盒模型結構的結構形式的獨特屬性，學生需要許多常見的信息編碼方法來反復練習，以增強我們的短期記憶，浮動能力的適應能力，這對于新界面的整體布局非常重要。在特定的擴展含義中，有許多新的基本功能，比如一個很好的設計有獨特的圓角，部分設計有其他的圖形邊框，很好的壓縮力有助于有呈現良好的變形效果。所以采用CSS選擇符合模塊元素內容的應用作為比賽內容，可以提升學生的創意構思的能力，綜合提升視覺審美能力。

三、以JavaScript的案例編寫評比內容來提升編程能力從而促進Web前端教學

JavaScript是一種高度表現力的腳本和執行的語言基本結構，具有對腳本的解釋性語言。它可以與計算機引擎Firefox的強大引擎進行補充，以進行解釋和執行。與大多數其他對象相比，ECMAScript間接表達語言和文本，讀取形容詞，詞匯和語法。JavaScript是許多新的客戶端腳本代碼詞和語言，也是網頁對象的原始文本。它可以在沒有web服務器部分支持的情況下繼續運行。它也主要在新客戶機上運行，包括計算機。通過繼續學習幫助學生充分理解語法知識、返回值的定義、事件發生的原因和使用時的基本標準、關鍵對象比較以及產品中內置的關鍵焦點對象等。函數調用定義一種或兩種類型的表達式。所有相關參數表和持續值的基本表，即現有用戶與網站頁面的交互界面得到改善時，瀏覽器活動中發生的各種各樣的事件。主動響應相關事件的后續產品處理方法稱為事件發生的直接選擇和直接處理，稱為相關方面事件的再處理。

通過實際的數據整理和案例研究，繼續學習計算機語言的編程思想和概念來累計計算機編程的實踐經驗，記住大部分JavaScript語法知識的具體規則和主要形式。JavaScript對象比較是一組基本屬性，不包括最終數據的基本條件和其他屬性。它是一種對不包括在后處理中的數據進行綜合分析的方法，需要支持對象的部分，包括內置的鍵對象、Firefox特定對象以及特定對象和自標準定義以外的對象。另一方面，實現使JavaScript能夠修改HTML頁面所有者和與其他種類對應的各種元素上的所有內容和顯示信息。

DOM焦點對象為HTML定義了特定的標準對象。包括首次訪問時的所有其他內容、所有文檔和處理方法，它是一種基本的標準模塊化方法。它們還可以定義自己的靜態圖像等。幫助學生記憶JavaScript的基本語法結構。在學生編寫實際案例的過程中，學習到JavaScript語言，強化了編程思路，提升了編程的實際操作經驗。深刻了解并接觸到JavaScript對象的相關聯知識點，熟練包含數據的屬性和對屬性中包含的數據進行操作的方法。在設計比賽評比中，以優秀的學生作品來全面的講解、展示如何使用JavaScript對象的基本屬性、調用函數定義和具體的使用方法以及如何自定義它們等具體內容來提升學生的編程思維和實際操作能力從而促進Web前端教學。

四、采用啟發式教學方式以人機交互設計案例分析來進行分組研討實踐

在Web前端教學的過程中結合科學理論和理論實踐，從設計人機交互界面開始入門，靈活的運用理論知識。合理分析用戶需求，尋找并發現相關的設計在哪些地方存在不足，在體驗過程中感受到的不合理之處進行標記。對設計缺陷提出自己的相關理解并思考可優化的解決方式。體驗互聯網上后端課程的內容，對各種奇特的科學知識進行了正確、合理和引導。

在愉快、輕松的教學過程中，設立出應用場景、建立應用程序來進行進一步深入的分析出更多的用戶需求。實行分組組合的形式，教師幫助組織討論解決方案。引導學生全面的學習了解設計工具開發界面原型、人機交互設計的具體工作內容、在實踐過程中掌握對應的規則來規范化進行操作。在這期間教師應積極鼓勵學生完成作品的同時讓要開放、大膽的設想，培養學生主動思考學習習慣，引導學生的主觀能動性，整理出感興趣的人機交互設計典型案例，在感受人機交互設計的實踐中體會到自主創造的學習樂趣。

以互動展示的教學策略可以大大提高Web前端教學課程的質量，為了激發學習的熱情可以建立一個綜合的作品平臺網站，向學生展示優秀的前沿作品，便于借鑒和學習。作品展示和課外興趣設計作品也可以通過平臺來進行的相關評定，由教師公開點評并參與。組織教師定期來講解設計比賽中獲獎的優秀作品。此外，平臺中還應該具備一些贊美和跟進功能，對所有人公共開放。同時需要保障平臺的穩定性和安全性，避免遭受到惡意攻擊與破壞行為。

結語

大多數Web前端教學在各大高校中普及，針對學生的不同學習群體來定制出相關的課程來進行web前端的教學。而采用web前端知識體系及教學的實踐內容，來展開設定專項的設計比賽的輔助教學方式的高校并不多見。如持續舉辦設計類的相關賽事，可以有效促進Web前端教學，幫助學生提升審美。

參考文獻

[1]劉蕾，劉冰月.Web前端課程的知識體系和教學實踐[J].軟件工程，2018，21（06）：50-52.

[2]徐輝，高榮.“jQueryWeb前端開發應用技術”課程教學實踐探索[J].福建電腦，2017，33（11）：61-62.

[3]郭曉梅.基于web開發的課程教學實踐研究[J].科技經濟導刊，2017，（24）：154.