設(shè)計比賽促進WEB前端教學(xué)實踐與審美提升

徐震

摘?要：在迅猛發(fā)展的互聯(lián)網(wǎng)領(lǐng)域中，Web 技術(shù)被廣泛應(yīng)用。通過培養(yǎng)出Web 前端工程師來滿足社會對應(yīng)崗位的就業(yè)和技術(shù)發(fā)展的實際需求?；赪eb前端課程的多樣化、知識結(jié)構(gòu)全面性及涉及內(nèi)容廣泛性的基本特征合理設(shè)定出教學(xué)方案，積極融入到教學(xué)實踐中。為活躍學(xué)習(xí)氛圍，開展Web 相關(guān)類型的設(shè)計比賽來檢驗、優(yōu)化實踐能力，綜合提升審美觀。

關(guān)鍵詞：設(shè)計比賽?WEB前端教學(xué)?審美提升

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

一、以HTML語法速記和常用標(biāo)簽的用法作為比賽內(nèi)容來促進Web前端教學(xué)

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

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

二、以CSS選擇符合模塊元素內(nèi)容的應(yīng)用作為比賽內(nèi)容來綜合提升視覺審美能力

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

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

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

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

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

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

四、采用啟發(fā)式教學(xué)方式以人機交互設(shè)計案例分析來進行分組研討實踐

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

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

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

結(jié)語

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

參考文獻

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

[2]徐輝，高榮.“jQueryWeb前端開發(fā)應(yīng)用技術(shù)”課程教學(xué)實踐探索[J].福建電腦，2017，33（11）：61-62.

[3]郭曉梅.基于web開發(fā)的課程教學(xué)實踐研究[J].科技經(jīng)濟導(dǎo)刊，2017，（24）：154.