“網(wǎng)頁制作”課程教學(xué)改革與探索

盧欣欣，王大羽

（周口師范學(xué)院 計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，河南 周口466001）

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，個(gè)人和企業(yè)紛紛建立自己的網(wǎng)站，網(wǎng)絡(luò)宣傳與營銷變得如火如荼，這也帶動(dòng)了社會(huì)對(duì)網(wǎng)頁設(shè)計(jì)師和Web前端工程師的需求不斷增加.為了增強(qiáng)學(xué)生的就業(yè)競(jìng)爭(zhēng)力，使所學(xué)知識(shí)更好地與社會(huì)需求接軌，周口師范學(xué)院在計(jì)算機(jī)和相關(guān)專業(yè)開設(shè)了“網(wǎng)頁制作”課程.“網(wǎng)頁制作”是一門涵蓋面廣、綜合性強(qiáng)的課程，且隨著Web 2.0，Jquery，HTML 5等新概念的提出，為“網(wǎng)頁制作”課程的教學(xué)提出了更高的要求.如何使學(xué)生在有限的時(shí)間內(nèi)掌握網(wǎng)頁制作的精髓，具備網(wǎng)頁設(shè)計(jì)與開發(fā)的綜合應(yīng)用能力，成為任課教師面臨的問題.筆者結(jié)合近幾年的教學(xué)經(jīng)驗(yàn)，認(rèn)為應(yīng)該從以下幾個(gè)方面入手.

1 明確課程特點(diǎn)，把握培養(yǎng)目標(biāo)

“網(wǎng)頁制作”涉及到網(wǎng)絡(luò)基礎(chǔ)、平面設(shè)計(jì)、動(dòng)畫設(shè)計(jì)等知識(shí)，具有覆蓋面廣、實(shí)踐性強(qiáng)的特點(diǎn).同時(shí)結(jié)合該?！皯?yīng)用型人才”的辦學(xué)定位，本課程應(yīng)以培養(yǎng)學(xué)生的動(dòng)手操作能力為目標(biāo)，使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作、網(wǎng)站規(guī)劃與網(wǎng)站管理的實(shí)踐技能，具備良好的網(wǎng)頁制作與網(wǎng)站管理的職業(yè)素養(yǎng).具體來講，在專業(yè)能力培養(yǎng)方面，應(yīng)使學(xué)生掌握如何使用Dreamweaver進(jìn)行網(wǎng)站的規(guī)劃、管理與發(fā)布，能夠熟練運(yùn)用文字、鏈接、表格、圖像、多媒體、表單等設(shè)計(jì)制作網(wǎng)頁；在社會(huì)能力方面，應(yīng)注重培養(yǎng)學(xué)生與客戶溝通、與團(tuán)隊(duì)成員協(xié)作的能力；在學(xué)習(xí)方法上，應(yīng)注重培養(yǎng)學(xué)生查找資料、獲取信息的能力，以及動(dòng)手解決各種各樣的實(shí)際問題的能力.這就要求教師在教學(xué)過程中要將理論教學(xué)與實(shí)踐教學(xué)有機(jī)地結(jié)合起來，改變傳統(tǒng)教學(xué)模式中重理論知識(shí)傳授、輕實(shí)踐能力和綜合能力培養(yǎng)的方式［1］.

2 更新教學(xué)內(nèi)容，豐富教學(xué)資源

2.1 重視HTML教學(xué)

超文本標(biāo)記語言（Hypertext Markup Language簡稱HTML）是網(wǎng)頁的“靈魂”，無論是靜態(tài)網(wǎng)頁還是動(dòng)態(tài)網(wǎng)頁，其本質(zhì)都是HTML標(biāo)記.隨著FrontPage，Dreamweaver等“所見即所得”網(wǎng)頁制作工具軟件的推出，越來越多的人習(xí)慣于借助這些軟件來制作網(wǎng)頁.部分學(xué)生認(rèn)為，手工書寫HTML速度太慢且易出錯(cuò)，已經(jīng)沒有必要學(xué)習(xí)HTML.但有的時(shí)候直接修改源代碼會(huì)更簡單快捷、方便有效，且如果沒有掌握HTML的基礎(chǔ)知識(shí)，學(xué)生在后續(xù)學(xué)習(xí)“動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)”、“Web程序設(shè)計(jì)”等課程時(shí)會(huì)感覺難度很大，無從下手.因此在教學(xué)過程中應(yīng)該重視HTML的教學(xué)，要求學(xué)生能看懂HTML.在引導(dǎo)學(xué)生學(xué)習(xí)這部分內(nèi)容時(shí)，一是充分利用Dreamweaver的“拆分”視圖，“設(shè)計(jì)”與“代碼”相結(jié)合，在對(duì)照中學(xué)習(xí)代碼；二是使用瀏覽器中的“查看源代碼”功能，分析別人的網(wǎng)頁.

2.2 重視CSS教學(xué)

隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展和人們欣賞水平的提高，網(wǎng)頁單一的信息展示功能已經(jīng)不能滿足人們的需求，使用表格進(jìn)行網(wǎng)頁布局的方法已經(jīng)逐漸淡出人們的視野，如何改善用戶體驗(yàn)成為網(wǎng)頁制作面臨的又一問題.而使用層疊樣式表（Cascading Style Sheets簡稱CSS）不但能將網(wǎng)頁內(nèi)容與樣式徹底分離，還能輕松控制頁面布局、精確定位，可以制作出頁面更美觀、體積更小、下載速度更快的網(wǎng)頁.其次，由于樣式可以復(fù)用，因此方便后期維護(hù)和更新大量的網(wǎng)頁，同時(shí)CSS能夠很好地兼容各種不同的瀏覽器，能夠保證網(wǎng)頁在不同的瀏覽器中都能正確顯示.在以往的教學(xué)中，教學(xué)內(nèi)容比較陳舊，著重強(qiáng)調(diào)使用布局表格和布局單元格完成頁面布局.對(duì)于比較復(fù)雜的頁面只能采用嵌套表格來完成頁面布局，極易出現(xiàn)表格錯(cuò)位現(xiàn)象，影響頁面美觀.在今后的教學(xué)中，筆者認(rèn)為網(wǎng)頁樣式設(shè)置和頁面布局部分的教學(xué)重心應(yīng)該向CSS偏移，重點(diǎn)講解如何采用CSS中的“盒子模型”進(jìn)行頁面布局，且不應(yīng)該僅僅局限于使用Dreamweaver中的可視化窗口進(jìn)行CSS樣式設(shè)置，應(yīng)有意識(shí)地引導(dǎo)學(xué)生看和寫CSS代碼.只有掌握了其本質(zhì)，才能靈活運(yùn)用，以不變應(yīng)萬變.

2.3 建設(shè)網(wǎng)絡(luò)課程

“網(wǎng)頁制作”課程由于其覆蓋面廣的特殊性，教師很難在有限的教學(xué)課時(shí)內(nèi)做到面面俱到.因此，應(yīng)該充分發(fā)揮互聯(lián)網(wǎng)的優(yōu)勢(shì)，利用網(wǎng)絡(luò)資源構(gòu)建“第二課堂”，拓寬學(xué)生視野，搭建師生網(wǎng)上交流平臺(tái)［2］.筆者從2011年擔(dān)任“網(wǎng)頁制作”課程教學(xué)任務(wù)開始，就建設(shè)了網(wǎng)頁制作網(wǎng)絡(luò)教學(xué)平臺(tái).平臺(tái)主要包括課程實(shí)驗(yàn)、教學(xué)課件、視頻課堂、課外拓展、網(wǎng)頁特效、課程論壇、教學(xué)反饋等功能模塊.網(wǎng)絡(luò)教學(xué)平臺(tái)突破了時(shí)間和空間的限制，為學(xué)生提供了一個(gè)隨時(shí)隨地都可以自主學(xué)習(xí)的資源中心.平臺(tái)運(yùn)行至今，學(xué)生反映效果良好，實(shí)現(xiàn)了與課堂教學(xué)的優(yōu)勢(shì)互補(bǔ).

3 改進(jìn)教學(xué)方法，“教、學(xué)、練、做”四位一體

3.1 案例引導(dǎo)教學(xué)法

在理論教學(xué)中，精心設(shè)計(jì)教學(xué)案例，將每次授課的重點(diǎn)、難點(diǎn)融入教學(xué)項(xiàng)目當(dāng)中.在講授新課之前利用多媒體直觀展示教學(xué)案例，以此吸引學(xué)生的注意力和學(xué)習(xí)興趣，進(jìn)而引導(dǎo)學(xué)生分析案例中涉及到的知識(shí)點(diǎn)，最后結(jié)合教學(xué)案例精講本次課的知識(shí)點(diǎn)并演示教學(xué)案例的制作過程.

3.2 任務(wù)驅(qū)動(dòng)教學(xué)法

在實(shí)驗(yàn)教學(xué)當(dāng)中，采用“以任務(wù)為主線，以教師為主導(dǎo)，以學(xué)生為主體”的任務(wù)驅(qū)動(dòng)教學(xué)法［3］.以若干個(gè)問題為中心，培養(yǎng)學(xué)生發(fā)現(xiàn)問題、分析問題、解決問題的綜合能力.通過這種由表及里、逐層深入的教學(xué)方法，讓學(xué)生循序漸進(jìn)地掌握所學(xué)知識(shí).教師可以將實(shí)驗(yàn)教學(xué)分成模仿操作和開放性設(shè)計(jì)兩個(gè)階段，通過讓學(xué)生模仿教師上課所用教學(xué)案例達(dá)到掌握本次教學(xué)重點(diǎn)、難點(diǎn)的目的，通過開放性設(shè)計(jì)可以培養(yǎng)學(xué)生解決問題、分析問題以及綜合應(yīng)用的能力.通過理論教學(xué)中的案例引導(dǎo)和實(shí)驗(yàn)教學(xué)中的任務(wù)驅(qū)動(dòng)，可以將“教、學(xué)、練、做”融為一體［4］，提高教學(xué)效果.

4 搭建展示平臺(tái)，激發(fā)學(xué)習(xí)興趣

搭建專門的Web服務(wù)器，給每個(gè)學(xué)生分配一個(gè)FTP空間，每次實(shí)驗(yàn)作業(yè)都要求上傳到指定的FTP空間中，上傳之后學(xué)生可以使用網(wǎng)絡(luò)地址直接瀏覽網(wǎng)頁效果，模擬網(wǎng)站發(fā)布的整個(gè)過程.一是讓學(xué)生熟悉FTP的管理方式，了解網(wǎng)站發(fā)布的過程；二是為學(xué)生提供一個(gè)展示的平臺(tái)，方便同學(xué)之間互相交流與學(xué)習(xí)，同時(shí)也會(huì)讓同學(xué)們具有成就感，激發(fā)學(xué)生的學(xué)習(xí)興趣，增加學(xué)生學(xué)習(xí)的主動(dòng)性.

5 依據(jù)課程特點(diǎn)，改進(jìn)評(píng)價(jià)方法

合理、有效的考核方式能夠促進(jìn)學(xué)生學(xué)習(xí).考慮到“網(wǎng)頁制作”課程實(shí)踐性較強(qiáng)的特點(diǎn)，傳統(tǒng)單一的采用閉卷考試的方式很難真正反映學(xué)生的學(xué)習(xí)效果.本課程可以采用“以模仿性實(shí)驗(yàn)為基礎(chǔ)，以開放性課程設(shè)計(jì)為重點(diǎn)，兼顧學(xué)生學(xué)習(xí)紀(jì)律”的全方位、多角度的考核評(píng)價(jià)模式［5］.將考核分為課程實(shí)驗(yàn)、課程設(shè)計(jì)、學(xué)生紀(jì)律三部分，各部分均采用百分制，最后學(xué)生的總成績＝課程實(shí)驗(yàn)成績×35%＋課程設(shè)計(jì)成績×45%＋學(xué)生紀(jì)律成績×20%.其中，課程實(shí)驗(yàn)成績?yōu)樵撜n程實(shí)驗(yàn)作業(yè)分?jǐn)?shù)的總和，每次實(shí)驗(yàn)作業(yè)的滿分可根據(jù)實(shí)驗(yàn)次數(shù)平均分配，也可以由任課教師根據(jù)每次實(shí)驗(yàn)作業(yè)的難易程度自由分配，教師根據(jù)學(xué)生上交的實(shí)驗(yàn)作業(yè)的質(zhì)量進(jìn)行打分.同時(shí)由于實(shí)驗(yàn)作業(yè)多是模仿性的實(shí)驗(yàn)，無法體現(xiàn)“網(wǎng)頁制作”課程的“設(shè)計(jì)性”，也不利于培養(yǎng)學(xué)生的創(chuàng)新意識(shí).因此在學(xué)期結(jié)束時(shí)增加課程設(shè)計(jì)環(huán)節(jié)，在這個(gè)環(huán)節(jié)不限制網(wǎng)站主題、不限制布局方式，學(xué)生可以自由搜集素材，自主設(shè)計(jì).這不僅是對(duì)本門課程的一個(gè)復(fù)習(xí)過程，也鍛煉了學(xué)生的綜合應(yīng)用能力.對(duì)于學(xué)生上交的作品，教師可以采取學(xué)生自評(píng)、學(xué)生間互評(píng)、教師評(píng)價(jià)的方式給學(xué)生的作品打分［6］，并對(duì)優(yōu)秀作品予以在網(wǎng)上展示，以激發(fā)學(xué)生學(xué)習(xí)的積極性.學(xué)生紀(jì)律成績主要包括學(xué)生出勤、課堂紀(jì)律和學(xué)習(xí)態(tài)度.

6 結(jié)語

該模式自實(shí)施以來取得了良好的教學(xué)效果，學(xué)生的技能水平和綜合能力有所提高，在國家級(jí)、省級(jí)多項(xiàng)網(wǎng)頁制作類比賽中取得了優(yōu)秀成績.綜上所述，在“網(wǎng)頁制作”課程的教學(xué)過程中，任課教師應(yīng)該積極探索，勇于改革創(chuàng)新，不斷更新教學(xué)理念，改進(jìn)教學(xué)方法，注重培養(yǎng)學(xué)生的綜合素質(zhì)和技能，加強(qiáng)培養(yǎng)學(xué)生的實(shí)踐能力、創(chuàng)新意識(shí)和協(xié)作精神，實(shí)現(xiàn)學(xué)生培養(yǎng)與社會(huì)需求的無縫對(duì)接.

［1］丁新慧，李巍.高校網(wǎng)站建設(shè)課程教學(xué)改革初探［J］.周口師范學(xué)院學(xué)報(bào)，2011，28（5）：97-100.

［2］戚爽.Dreamweaver網(wǎng)頁制作課程的教學(xué)研究［J］.長春理工大學(xué)學(xué)報(bào)，2010（2）：169-170.

［3］羅靜.網(wǎng)頁設(shè)計(jì)課程教學(xué)改革的思考［J］.計(jì)算機(jī)光盤軟件與應(yīng)用，2012（11）：241-242.

［4］楊尚森，李福華.網(wǎng)頁制作課程立體化教學(xué)體系建設(shè)的研究［J］.洛陽理工學(xué)院學(xué)報(bào)：自然科學(xué)版，2010，20（1）：93-96.

［5］杜衛(wèi)軍.課程改革背景下網(wǎng)頁設(shè)計(jì)課程教學(xué)的探索與實(shí)踐［J］.新課程研究，2011（1）：42-44.

［6］馬占欣.網(wǎng)頁設(shè)計(jì)與制作［M］.北京：中國水利水電出版社，2007：1-187.