逆向?qū)W習(xí)編碼的Web前端開發(fā)教學(xué)研究

黃雯婕

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

關(guān)鍵字：Web前端開發(fā) CSS 設(shè)計(jì)界面操作 編碼

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

面對(duì)這樣的改變，我們的計(jì)算機(jī)教學(xué)也一步步進(jìn)行著各種探索，目前較多的兩種教學(xué)模式，其中之一是傳統(tǒng)的學(xué)科教學(xué)模式，也就是從理論到實(shí)踐，強(qiáng)調(diào)系統(tǒng)性和完整性;而另一種則是以應(yīng)用作為教學(xué)目的，也就是我們目前中職計(jì)算機(jī)教學(xué)中常用的一種教學(xué)模式，從學(xué)生的實(shí)際操作能力入手，先會(huì)做再升華，由掌握技能倒推理論進(jìn)行學(xué)習(xí)。

中職學(xué)生文化理論基礎(chǔ)較薄弱，但是動(dòng)手能力相對(duì)較強(qiáng)。并且由于過去在文化課中常常經(jīng)歷的挫敗，他們對(duì)學(xué)習(xí)的興趣往往很難調(diào)動(dòng)起來，特別是類似于編碼的課程，如果一開始就運(yùn)用傳統(tǒng)的學(xué)科模式，從理論入手，長(zhǎng)篇大論的代碼會(huì)直接讓學(xué)生產(chǎn)生厭惡的情緒，從而導(dǎo)致教學(xué)的失敗。

在Web開發(fā)領(lǐng)域里，實(shí)現(xiàn)同一個(gè)效果有許多不同的方法，而CSS+ DIV作為其中的重要組成部分，是實(shí)現(xiàn)諸多在表格中無法實(shí)現(xiàn)的特效的基礎(chǔ)，也是中職Web前端開發(fā)課程的重要學(xué)習(xí)內(nèi)容。

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

例如在“設(shè)置網(wǎng)站主體橫向?qū)Ш綐邮健边@個(gè)內(nèi)容中，我們使用Dreamweaver CS6完成，要求：主體導(dǎo)航有背景圖片，并且導(dǎo)航部分的鏈接處于激活狀態(tài)時(shí)，文本顏色改變，同時(shí)出現(xiàn)提示圖標(biāo)。

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

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

從而實(shí)現(xiàn)頁面效果。但是由于中職學(xué)生英文差，對(duì)代碼學(xué)習(xí)天然排斥，很多學(xué)生會(huì)因此完成不了學(xué)習(xí)任務(wù)。因此在教學(xué)中，我們嘗試改換思路，倡導(dǎo)所學(xué)即所用，也就是只講解在這個(gè)DIV中應(yīng)用到的屬性，并且我們的大部分操作直接用界面操作替代代碼錄入，直接在css規(guī)則界面設(shè)置以上屬性，完成框架搭建。

接下來使用列表輸入文字。在這一步，學(xué)生需要學(xué)習(xí)標(biāo)簽ul及l(fā)i的使用。摒棄掉過去先講解標(biāo)簽含義及定義格式的方法，直接在Dreamweaver設(shè)計(jì)視圖中使用工具欄中預(yù)置的列表按鈕，并在編輯區(qū)錄入導(dǎo)航文字完成。完全沒有涉及到代碼內(nèi)容。當(dāng)學(xué)生在設(shè)計(jì)視圖中完成頁面內(nèi)容編輯后，我們?cè)俅蜷_代碼視圖去學(xué)習(xí)ul及l(fā)i標(biāo)簽。掌握：

這種學(xué)習(xí)模式下學(xué)生不需要HTML的基礎(chǔ)也能夠完成并看懂代碼及視圖操作，也能夠掌握標(biāo)簽ul及l(fā)i的應(yīng)用。

第三步是對(duì)ul及l(fā)i進(jìn)行屬性設(shè)置，我們都可以直接在CSS格則定義對(duì)話框中完成，避開代碼操作。

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

li 浮動(dòng)：左對(duì)齊

第四步是設(shè)置導(dǎo)航鏈接，并對(duì)鏈接進(jìn)行設(shè)置。設(shè)置導(dǎo)航鏈接可以直接在Dreamweaver設(shè)計(jì)界面完成，選中文字，在屬性欄好鏈接，接下來就是使用CSS規(guī)則對(duì)文字樣式進(jìn)行美化了。

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

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

為了更直觀地查看效果，我們現(xiàn)在可以將導(dǎo)航背景設(shè)置到div#nav中了，在#nav將已經(jīng)準(zhǔn)備好的背景圖片添加到背景屬性“background-image”中，得到初始效果圖。

至此導(dǎo)航制作就完成了，在Dreamweaver設(shè)計(jì)界面中操作及在CSS規(guī)則面板中進(jìn)行屬性設(shè)置代替了大部分的代碼輸入，大大減輕了學(xué)習(xí)難度。當(dāng)學(xué)生熟練掌握界面及對(duì)話框設(shè)置之后，再代入部分代碼進(jìn)行學(xué)習(xí)，這樣逆向進(jìn)行的學(xué)習(xí)模式，在我們的實(shí)際教學(xué)中證明更適合中職學(xué)生的學(xué)情。更好地實(shí)現(xiàn)教學(xué)效果，達(dá)到教學(xué)目標(biāo)。

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

參考文獻(xiàn)

[1]北京阿伯泰克北大青鳥信息技術(shù)有限公司編著?！吨谱髌髽I(yè)網(wǎng)站》.科學(xué)技術(shù)文獻(xiàn)出版社出版。