逆向學習編碼的Web前端開發教學研究

黃雯婕

摘要：Web前端開發職業技能證書中對職業學校學生的編碼能力提出了很高的要求。CSS作為Web前端開發學習中的基礎內容包含在Web 頁面制作基礎和HTML5 開發基礎與應用兩部分內容里，是后續學習的重要基礎，探索以興趣為導向的教學策略，由易至難，循序漸進地進行編碼學習。從先進行界面操作實現頁面效果，以特效及功能吸引學生入手，再由界面操作反推代碼，進而介紹代碼功能，通過不斷地練習，實現學生掌握相應編碼的目標。

關鍵字：Web前端開發 CSS 設計界面操作 編碼

2019年教育部部署啟動了職業教育“1+X證書制度”，在職業學校中推動了學歷證書+職業技能等級證書制度的試點工作，其中Web前端開發職業技能證書中對職業學校學生的編碼能力提出了很高的要求。Web前端從業標準明確指明了需要具備靜態網頁開發、動態網頁開發、數據庫應用、網頁美化和性能調優、網站架構設計、軟件工程、軟件測試和維護等技術和技能，而面向中職學生考核的初級證書，也要求學生具備Web前端開發基礎知識及靜態網頁開發的設計、調試、維護等能力，具有利用HTML、CSS、JavaScript、網頁開發框架等專業知識、方法和工具將產品UI設計稿實現成網站的技能。能從事Web前端軟件編碼、軟件測試、軟件技術服務等工作。考核標準涵蓋了Web 頁面制作基礎、HTML5 開發基礎與應用、輕量級前端框架、JavaScript 程序設計等。也就意味著對中職計算機教學提出了更高的要求，必須要走出舒適圈，探索與要求相對應的更高效的教育教學方法，培養出具有較強的邏輯思維能力，擁有良好的編寫代碼習慣，溝通能力強，具有運用色彩搭配、點線面布局來設計較好用戶體驗網站頁面的能力的學生。

面對這樣的改變，我們的計算機教學也一步步進行著各種探索，目前較多的兩種教學模式，其中之一是傳統的學科教學模式，也就是從理論到實踐，強調系統性和完整性;而另一種則是以應用作為教學目的，也就是我們目前中職計算機教學中常用的一種教學模式，從學生的實際操作能力入手，先會做再升華，由掌握技能倒推理論進行學習。

中職學生文化理論基礎較薄弱，但是動手能力相對較強。并且由于過去在文化課中常常經歷的挫敗，他們對學習的興趣往往很難調動起來，特別是類似于編碼的課程，如果一開始就運用傳統的學科模式，從理論入手，長篇大論的代碼會直接讓學生產生厭惡的情緒，從而導致教學的失敗。

在Web開發領域里，實現同一個效果有許多不同的方法，而CSS+ DIV作為其中的重要組成部分，是實現諸多在表格中無法實現的特效的基礎，也是中職Web前端開發課程的重要學習內容。

過去我們的教學方法是從CSS的基本理論入手，講解選擇器及各類標簽的屬性，在講解網頁制作過程中往往也以輸入代碼為主，由于學生本身英文基礎的問題，會對標簽、屬性的名稱記憶產生強烈的不安，從而影響學習效果。在經過實踐后我們發現這樣的上課模式教學效果并不理想，探究我們的課程學習目標，要求的是學生能夠使用CSS及DIV進行布局、美化網頁，進而添加各種特效，那么在運用過程中，我們使用界面操作的方式替代一部分代碼輸入，在完成效果之后再來學習悉標簽及屬性的英文名稱，這樣不僅降低了學生的記憶及學習難度，也極大地提高了學生的學習興趣。在大量的練習之后會自然而然會熟悉相應需要記憶的標簽名稱和屬性。而這樣的一種界面操作為主，代碼輸入為輔的學習方法，在我們的CSS+DIV課程中獲得了較好的效果。

例如在“設置網站主體橫向導航樣式”這個內容中，我們使用Dreamweaver CS6完成，要求：主體導航有背景圖片，并且導航部分的鏈接處于激活狀態時，文本顏色改變，同時出現提示圖標。

在制作過程中，首先插入DIV：nav，并新建CSS規則對它進行屬性定義。按照傳統的模式，在實操之前，必須先掌握所有CSS規則中的屬性及其屬性值的含義并記憶相關屬性名稱，然后在CSS頁面中輸入代碼：

#nav{width：778px;height：50px;border：1px solid #000000;}

從而實現頁面效果。但是由于中職學生英文差，對代碼學習天然排斥，很多學生會因此完成不了學習任務。因此在教學中，我們嘗試改換思路，倡導所學即所用，也就是只講解在這個DIV中應用到的屬性，并且我們的大部分操作直接用界面操作替代代碼錄入，直接在css規則界面設置以上屬性，完成框架搭建。

接下來使用列表輸入文字。在這一步，學生需要學習標簽ul及li的使用。摒棄掉過去先講解標簽含義及定義格式的方法，直接在Dreamweaver設計視圖中使用工具欄中預置的列表按鈕，并在編輯區錄入導航文字完成。完全沒有涉及到代碼內容。當學生在設計視圖中完成頁面內容編輯后，我們再打開代碼視圖去學習ul及li標簽。掌握：

這種學習模式下學生不需要HTML的基礎也能夠完成并看懂代碼及視圖操作，也能夠掌握標簽ul及li的應用。

第三步是對ul及li進行屬性設置，我們都可以直接在CSS格則定義對話框中完成，避開代碼操作。

ul 列表類型：無;邊界：0像素;填充：0像素

li 浮動：左對齊

第四步是設置導航鏈接，并對鏈接進行設置。設置導航鏈接可以直接在Dreamweaver設計界面完成，選中文字，在屬性欄好鏈接，接下來就是使用CSS規則對文字樣式進行美化了。

a 文本大小：12像素;文本粗細：加粗;文本顏色：白色;行高：50像素;

文本對齊：居中;顯示：塊;高：50像素;寬：100像素。

為了更直觀地查看效果，我們現在可以將導航背景設置到div#nav中了，在#nav將已經準備好的背景圖片添加到背景屬性“background-image”中，得到初始效果圖。

至此導航制作就完成了，在Dreamweaver設計界面中操作及在CSS規則面板中進行屬性設置代替了大部分的代碼輸入，大大減輕了學習難度。當學生熟練掌握界面及對話框設置之后，再代入部分代碼進行學習，這樣逆向進行的學習模式，在我們的實際教學中證明更適合中職學生的學情。更好地實現教學效果，達到教學目標。

中職學生的自主學習和自我管理能力相對較弱，而本身文化基礎和邏輯思維的弱勢在編碼內容的學習中更加凸顯，CSS作為教育部1+X項目Web前端開發職業技能證書考核學習中的基礎內容，包含在Web 頁面制作基礎和HTML5 開發基礎與應用兩部分內容里，是后續學習的重要基礎，也具有較大的難度。首先體現在屬性多，區分具有很大的難度;其次各屬性之間會互相影響，還存在各種優先級別的問題，難以在短時間內完全掌握;第三，作為英文詞匯的存在，對中職學生本身就具有非常大的難度和天然的反感。在這樣的情況下使用傳統的教學方法存在很大的弊端，必然很難實現教學目標，更甚者導致學生棄學該門課程。因此針對這個情況我們采用的以興趣為導向的教學策略。由易至難，循序漸進地開展教學，從先進行界面操作實現頁面效果，以特效及功能吸引學生入手，消除學生的心理隔閡，激發學習的興趣，接受CSS的學習內容，再由界面操作反推代碼，進而介紹代碼功能，通過不斷地練習，實現學生掌握相應編碼的目標。

參考文獻

[1]北京阿伯泰克北大青鳥信息技術有限公司編著。《制作企業網站》.科學技術文獻出版社出版。