《HTML5+CSS3網(wǎng)頁制作》課程教學(xué)方法的研究與探討

摘要：在信息技術(shù)飛速發(fā)展的背景下，互聯(lián)網(wǎng)已經(jīng)成為人們溝通和獲取信息的主要途徑，網(wǎng)絡(luò)上也產(chǎn)生了各種各樣的網(wǎng)站。《HTML5+CSS3網(wǎng)頁制作》作為計算機專業(yè)基礎(chǔ)性教學(xué)課程，需要結(jié)合學(xué)生的實際需求對教學(xué)方法進行調(diào)整，使學(xué)生掌握更多的網(wǎng)頁制作方法。基于此，本文結(jié)合《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)現(xiàn)狀，對該課程的具體教學(xué)方法進行研究和探討，以提高學(xué)生的網(wǎng)頁制作水平。

關(guān)鍵詞：《HTML5+CSS3網(wǎng)頁制作》；課程教學(xué)；教學(xué)方法；實踐措施

本文系2021年度廣西職業(yè)教育教學(xué)改革研究重點項目“新一代信息技術(shù)背景下“項目專遞、證賽提升、中高銜接”中職計算機WEB應(yīng)用開發(fā)課程群開發(fā)與實踐”（項目編號GXZZJG2021A060）階段性研究成果之一。

黃美世（1995.12-），女，壯族，廣西樂業(yè)，本科，助理講師，研究方向：計算機應(yīng)用與技術(shù)專業(yè)。

一、引言

計算機在生活中得到普及之后，網(wǎng)絡(luò)對人們的生活越來越重要。人們在使用互聯(lián)網(wǎng)的過程中，網(wǎng)頁是接觸最多的內(nèi)容。在日常生活中用到的網(wǎng)頁都是由多種技術(shù)結(jié)合在一起，如：文字、圖畫、視頻等，同時也涉及了編程代碼或者數(shù)據(jù)庫等交互式的網(wǎng)頁?！禜TML5+CSS3網(wǎng)頁制作》課程對學(xué)生的實踐能力要求較高，并且要求學(xué)生要將理論與實踐相結(jié)合，所以學(xué)生必須要在熟練掌握理論知識的基礎(chǔ)上，掌握網(wǎng)頁的設(shè)計原則，這樣才能掌握相應(yīng)的實踐技能。

二、《HTML5+CSS3網(wǎng)頁制作》教學(xué)的主要問題

首先，《HTML5+CSS3網(wǎng)頁制作》的涉及的知識范圍較廣，課程的內(nèi)容是一個整體的理論體系，除了包含基礎(chǔ)的網(wǎng)絡(luò)知識和平面設(shè)計知識以外，還涉及了動畫設(shè)計和編程方面的內(nèi)容。例如：學(xué)生在學(xué)習(xí)基礎(chǔ)性的網(wǎng)絡(luò)知識時，必須要了解互聯(lián)網(wǎng)的基礎(chǔ)知識和應(yīng)用方法，能夠熟練掌握利用FTP或者WEB將網(wǎng)頁的內(nèi)容上傳至服務(wù)器。學(xué)生在學(xué)習(xí)平面設(shè)計方面的內(nèi)容時，要掌握圖片的處理方法，學(xué)會如何對網(wǎng)頁圖片的色彩進行搭配以及采用何種文字樣式才能符合網(wǎng)頁的整體風(fēng)格。學(xué)生在學(xué)習(xí)動畫設(shè)計方面的知識時，除了要學(xué)習(xí)Flash動畫設(shè)計外，還要學(xué)會Gif 動態(tài)圖片的制作方法。學(xué)生在學(xué)習(xí)編程方面的知識時，至少要對其中一種編程語言掌握扎實。由此可見，基礎(chǔ)網(wǎng)頁制作知識是學(xué)生深入學(xué)習(xí)網(wǎng)頁制作的基石，同時也是提升《HTML5+CSS3網(wǎng)頁制作》教學(xué)質(zhì)量的重要依據(jù)。受到課時的限制，教師想要在規(guī)定的時間內(nèi)將課程所涉及的內(nèi)容全部講完很不現(xiàn)實，如果教師要想將所有的教學(xué)內(nèi)容全部利用課堂時間講完，即便學(xué)生有能力了解，也只是了解表面內(nèi)容，既不能將教學(xué)重點掌握扎實，又缺乏網(wǎng)頁制作的實際經(jīng)驗[1]。

其次，《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)方法非常單一。為了不影響正常的教學(xué)進度，教師一般都會向?qū)W生灌輸理論知識，導(dǎo)致學(xué)生只能通過死記硬背掌握最簡單的基礎(chǔ)制作方法，如果沒有教師的指導(dǎo)和幫助，很難自主完成網(wǎng)頁設(shè)計工作。再加上學(xué)生的基礎(chǔ)能力存在差異，有些學(xué)生只跟著教師的思路學(xué)習(xí)一遍就能掌握，有些學(xué)生卻需要反復(fù)練習(xí)才能記住，有部分教師并沒有根據(jù)學(xué)生的實際學(xué)情將教學(xué)內(nèi)容進行分層，導(dǎo)致基礎(chǔ)能力好的學(xué)生認為教學(xué)過于簡單，而基礎(chǔ)能力差的學(xué)生又跟不上教學(xué)進度，導(dǎo)致學(xué)生之間的差距越來越大。

最后，對于學(xué)生而言，網(wǎng)頁制作是非常有吸引力的教學(xué)內(nèi)容，很多學(xué)生表示出了對網(wǎng)頁制作的學(xué)習(xí)興趣，但是大部分的教材在分類的過程中基本上都是按照網(wǎng)頁制作軟件的功能，然后再結(jié)合各個章節(jié)的內(nèi)容引導(dǎo)學(xué)生進行單項訓(xùn)練。單項訓(xùn)練是非常枯燥的學(xué)習(xí)內(nèi)容，很多學(xué)生就是在這種枯燥的練習(xí)過程中慢慢降低了學(xué)習(xí)網(wǎng)頁制作的積極性。另外，《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)結(jié)果與市場需要之間存在差異，甚至出現(xiàn)脫節(jié)的情況，學(xué)生雖然掌握了理論知識，但是由于教師沒有給學(xué)生提供實踐機會，導(dǎo)致學(xué)生只會紙上談兵，對未來的就業(yè)造成了嚴重的影響[2]。

三、《HTML5+CSS3網(wǎng)頁制作》課程教學(xué)方法的實踐措施

（一）對教學(xué)內(nèi)容重新進行規(guī)劃

學(xué)生在學(xué)習(xí)《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)內(nèi)容之前，必須要了解“網(wǎng)頁”與“網(wǎng)站”之間的差距，了解HTML5語言的基本概念以及網(wǎng)頁在制作過程中所涉及的工具，懂得網(wǎng)頁和網(wǎng)站的基本制作方法后，還要明白并掌握教材中涉及的網(wǎng)絡(luò)制作方法和設(shè)計流程，這樣才能制作一個完整的網(wǎng)頁。學(xué)生要在教師的指導(dǎo)下將這些教學(xué)內(nèi)容進行系統(tǒng)性的編排，從而構(gòu)建完善的基礎(chǔ)知識體系。其次，《HTML5+CSS3網(wǎng)頁制作》課程中涉及的網(wǎng)頁布局制作是非常重要的基礎(chǔ)內(nèi)容，該部分內(nèi)容的學(xué)習(xí)難度大，大部分都是關(guān)鍵性的教學(xué)內(nèi)容，學(xué)生如果能夠?qū)⑦@些內(nèi)容掌握扎實，就能掌握網(wǎng)頁布局的制作技巧，也能快速掌握網(wǎng)站的制作方法[3]。最后，網(wǎng)頁美化制作方面的內(nèi)容也非常重要。這個部分的知識點涉及了PS和Flash動畫制作方面的內(nèi)容。PS軟件的主要作用是對各種網(wǎng)頁制作素材加工和處理，從而完成基礎(chǔ)性的網(wǎng)頁制作。而Flash軟件難度主要作用是能讓學(xué)生制作出具有動態(tài)效果的網(wǎng)站。教師在開展這部分內(nèi)容的教學(xué)活動時，可以讓學(xué)生提前欣賞一些制作好的網(wǎng)站模板，讓學(xué)生初步建立對網(wǎng)站制作程序和設(shè)計思路的了解，同時也能讓學(xué)生了解一些網(wǎng)站色彩的調(diào)整方法。網(wǎng)頁美化制作方面的教學(xué)重點就是為了讓學(xué)生熟練掌握PS和Flash動畫設(shè)計的基本操作方法，并將這種方法應(yīng)用在網(wǎng)頁制作中，如此學(xué)生的實踐能力也能得到提升。

（二）在課堂上應(yīng)用案例教學(xué)法

案例教學(xué)法是《HTML5+CSS3網(wǎng)頁制作》課程中非常重要的教學(xué)方法之一，這種教學(xué)方法主要是通過案例的形式將教學(xué)內(nèi)容進行深化，案例教學(xué)法在應(yīng)用的過程中，學(xué)生必須要對相關(guān)的教學(xué)內(nèi)容具備初步的認識和分析，能夠自主辨別網(wǎng)頁設(shè)計方法和設(shè)計流程是否正確，教師結(jié)合教學(xué)內(nèi)容為學(xué)生準備一些相應(yīng)的案例，促使學(xué)生能夠自主結(jié)合案例對教學(xué)內(nèi)容進行深入探索。

學(xué)生在探索的過程中，除了通過自主思考之外，也可以通過團隊合作的方法共同進行討論，既能培養(yǎng)學(xué)生的辨別能力和分析能力，還能培養(yǎng)學(xué)生合作意識和溝通能力。例如：在網(wǎng)頁與HTML教學(xué)中，教師可以為學(xué)生展示一個網(wǎng)頁案例，如圖1所示。代碼編寫由HTML編寫完成，其源代碼如圖2所示，以便于更好地幫助學(xué)生理解并掌握HTML的正確使用方法。

之后引導(dǎo)學(xué)生進行分組并在案例分析基礎(chǔ)上進行實踐操作，通過開展不同的案例教學(xué)，提高學(xué)生網(wǎng)頁制作學(xué)習(xí)中的針對性，幫助學(xué)生掌握更多不同的網(wǎng)頁制作思路。案例教學(xué)法在應(yīng)用的過程中，教師必須要為學(xué)生做好配合工作，引導(dǎo)學(xué)生積極投入到自主探索中。整個過程都要尊重學(xué)生的主體地位，教師的任務(wù)則是為學(xué)生提供指導(dǎo)作用。應(yīng)用案例教學(xué)法的主要目標是希望學(xué)生能夠通過案例積累相應(yīng)的網(wǎng)頁制作經(jīng)驗，教學(xué)內(nèi)容則是讓學(xué)生針對某個具體案例進行分析，深入挖掘問題并制定相應(yīng)的解決方法。對于學(xué)生而言，自主分析和解決問題只是案例教學(xué)法的其中一個環(huán)節(jié)，在這個過程中教師的作用就是為學(xué)生的分析工作提供相應(yīng)的服務(wù)[4]。

（三）在課堂上應(yīng)用分層教學(xué)法

電子商務(wù)專業(yè)和計算機專業(yè)都涉及了《HTML5+

CSS3網(wǎng)頁制作》課程，由于這兩個專業(yè)的側(cè)重點不同，專業(yè)課程的教學(xué)內(nèi)容也存在一定的差異，所以學(xué)生的基礎(chǔ)能力也存在較大差距。計算機專業(yè)的學(xué)生在學(xué)習(xí)《HTML5+CSS3網(wǎng)頁制作》課程之前，就已經(jīng)接觸過網(wǎng)絡(luò)知識和C語言課程方面的教學(xué)內(nèi)容，對編程方面的知識也有一定的積累。在學(xué)習(xí)《HTML5+CSS3網(wǎng)頁制作》課程的同時也會學(xué)習(xí)PS和Flash方面的知識，對于圖畫的處理技術(shù)和動態(tài)圖畫的制作方法了解得比較全面。但是電子商務(wù)專業(yè)的學(xué)生在學(xué)習(xí)《HTML5+CSS3網(wǎng)頁制作》課程的知識時，只接觸過一點關(guān)于計算機基礎(chǔ)知識和電商商務(wù)方面的網(wǎng)絡(luò)知識，這也就意味著電子商務(wù)專業(yè)的學(xué)生在基礎(chǔ)能力上與計算機專業(yè)學(xué)生存在較大的差距[5]。另外，即便是同一個專業(yè)的學(xué)生，可能因為接受能力存在差距，對《HTML5+CSS3網(wǎng)頁制作》課程知識點的掌握情況也會出現(xiàn)一定差距。因此，為了能夠使各個層次的學(xué)生都能在原有的基礎(chǔ)上有所提升，可以將分層教學(xué)法應(yīng)用在教學(xué)過程中。如：教師可以將教學(xué)難度分為高級、中級和初級這三個層次，按照學(xué)生的基礎(chǔ)能力將學(xué)生進行分層，對于不同層次的學(xué)生制定不同的學(xué)習(xí)目標，這樣不僅能夠讓學(xué)生掌握知識，還能增強學(xué)生的自信心。①對于基礎(chǔ)能力較差的學(xué)生而言，必須要熟練掌握網(wǎng)頁設(shè)計軟件的使用方法，能夠自主設(shè)計簡單的網(wǎng)頁，還能利用代碼為網(wǎng)頁增加特效，豐富網(wǎng)頁的功能，使網(wǎng)頁看起來更加美觀，學(xué)生還要利用系統(tǒng)中自帶的畫圖工具對圖片進行處理和加工。②對于基礎(chǔ)能力一般的學(xué)生而言，除了要掌握網(wǎng)頁設(shè)計軟件的使用方法、對圖片進行獨立處理以外，還要自主設(shè)計動畫網(wǎng)頁，能夠結(jié)合不同的要求設(shè)計出多種動態(tài)網(wǎng)站。對于基礎(chǔ)能力一般的學(xué)生而言，對他們是否具備編程能力并沒有特殊要求，但是必須要能夠掌握編程的代碼以及能將其應(yīng)用在網(wǎng)頁設(shè)計中。③對于基礎(chǔ)能力較強的學(xué)生而言，除了具備以上這些能力之外，還要具備網(wǎng)站的規(guī)劃能力和對網(wǎng)站進行管理，學(xué)生至少要掌握兩門編程語言，能夠自主設(shè)計制作具備數(shù)據(jù)庫的動態(tài)網(wǎng)頁核對網(wǎng)站。

（四）在課堂上應(yīng)用項目教學(xué)法

項目教學(xué)法主要是由教師和學(xué)生共同制定一個項目主題，完成項目的過程就是整個教學(xué)活動的過程。項目教學(xué)法在應(yīng)用的過程中，主要是圍繞著項目，在整個過程中要充分尊重學(xué)生的主體地位，教師的作用則是為學(xué)生進行指導(dǎo)。教師在開展《HTML5+CSS3網(wǎng)頁制作》課程教學(xué)時，要結(jié)合教學(xué)內(nèi)容為學(xué)生創(chuàng)建相應(yīng)的教學(xué)情境，引導(dǎo)學(xué)生結(jié)合自己的已知經(jīng)驗和專業(yè)知識，自主完成項目。在實踐過程中，教師可以將不同的教學(xué)內(nèi)容設(shè)計成多個項目，然后再按照項目內(nèi)容將學(xué)生進行分組，每個項目組的學(xué)生要保證實力相當(dāng)、能力互補，確保每個小組的學(xué)生通過合作完成項目的過程中能夠?qū)崿F(xiàn)相互幫助和相互學(xué)習(xí)，通過取長補短共同完成項目。小組的學(xué)生通過合力共同完成項目之后，不僅能夠增強學(xué)生的專業(yè)技能，鍛煉學(xué)生解決問題的實際能力，在培養(yǎng)學(xué)生價值觀和合作意識方面也起到了非常重要的作用。

（五）在課堂上應(yīng)用任務(wù)驅(qū)動教學(xué)法

任務(wù)驅(qū)動教學(xué)法是在建構(gòu)主義的基礎(chǔ)上為學(xué)生制定的一種任務(wù)驅(qū)動教學(xué)模式，整個教學(xué)過程都要以一個任務(wù)為中心內(nèi)容，教師將教學(xué)重點全部融入任務(wù)當(dāng)中，引導(dǎo)學(xué)生通過完成任務(wù)對教學(xué)重點進行深化。學(xué)生在完成任務(wù)的過程中，能充分發(fā)揮自身的主觀能動性，對培養(yǎng)自身的探索能力和開拓精神有著非常重要的作用。

例如，教師在開展《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)時，可以為學(xué)生制定一個設(shè)計網(wǎng)站的任務(wù)，網(wǎng)頁的設(shè)計要求包含了自動調(diào)整網(wǎng)頁的框架、對網(wǎng)頁元素做出精準定位、對網(wǎng)頁的布局進行規(guī)劃設(shè)計、自主處理各項信息、通過插入圖片的形式對網(wǎng)頁進行美化處理、增加鏈接等內(nèi)容。教師在設(shè)計該任務(wù)的過程中，將該項任務(wù)劃分成為多個具有潛在聯(lián)系的小任務(wù)，并引導(dǎo)學(xué)生按照步驟完成任務(wù)，從而實現(xiàn)教學(xué)目標[6]。

（六）對課堂教學(xué)的考核方法和評價方法進行調(diào)整

由于《HTML5+CSS3網(wǎng)頁制作》課程對學(xué)生的實踐能力有一定的要求，因此該課程的考核和評價都要圍繞著學(xué)生的網(wǎng)頁設(shè)計能力和創(chuàng)新意識。雖然期末考試成績能夠反映學(xué)生對基礎(chǔ)知識的掌握情況，但是這種評價方式并不全面，對學(xué)生的能力和表現(xiàn)評估也不夠準確。同時，學(xué)校在對學(xué)生進行評價時，也通常將考試成績作為主要參考依據(jù)，而將學(xué)生的出勤和整個學(xué)期的表現(xiàn)作為輔助參考。因此，教師需要對考核和評價方法進行調(diào)整。例如，可以通過對學(xué)生完成網(wǎng)站設(shè)計的過程進行評價。在這個過程中規(guī)定完成時間，要求學(xué)生自主搜集相關(guān)材料，網(wǎng)頁的布局是否合理、網(wǎng)頁內(nèi)容的豐富性都可作為評價依據(jù)。與其他課程不同，《HTML5+CSS3網(wǎng)頁制作》課程并不適用于傳統(tǒng)的評價方式，因為學(xué)期末的理論性考試只能反映學(xué)生部分情況。該課程的教學(xué)目標是提高學(xué)生的實踐能力和操作能力，所以必須根據(jù)學(xué)生所設(shè)計出來的作品來評估其對專業(yè)知識的掌握情況。因此，教師在對學(xué)生進行考核和評價的過程中，可以將學(xué)生按照個人或者小組的形式進行考核，考核的內(nèi)容是讓學(xué)生自主選擇一個網(wǎng)頁設(shè)計主題，通過網(wǎng)頁的頁面制作是否能夠吸引人，色彩搭配是否合理對學(xué)生的真實情況做出準確的判斷。因此，教師要積極對考核方法和評價方法進行調(diào)整，將這種新穎的考核模式應(yīng)用在評價中，不僅能夠培養(yǎng)學(xué)生的自主能力和合作意識，還能提高學(xué)生的審美能力和實踐能力。

四、結(jié)束語

總而言之，學(xué)生之所以學(xué)習(xí)《HTML5+CSS3網(wǎng)頁制作》課程，最主要的目的是能夠在網(wǎng)絡(luò)中占據(jù)屬于自己的領(lǐng)地，能夠?qū)⒆约涸O(shè)計和制作的網(wǎng)頁上傳至互聯(lián)網(wǎng)，讓更多的人欣賞自己設(shè)計的作品對學(xué)生來說是一件無上榮耀的事情。但信息技術(shù)的發(fā)展速度飛快，網(wǎng)頁制作的工具也在不斷更新，為了培養(yǎng)出更加符合相關(guān)領(lǐng)域需求的綜合型網(wǎng)絡(luò)技術(shù)人才，《HTML5+CSS3網(wǎng)頁制作》課程教師必須要不斷對教學(xué)內(nèi)容進行調(diào)整與創(chuàng)新，將多元化的教學(xué)方法應(yīng)用到實踐當(dāng)中，調(diào)動學(xué)生學(xué)習(xí)網(wǎng)頁制作的熱情，提高《HTML5+CSS3網(wǎng)頁制作》課程的教學(xué)效果，培養(yǎng)學(xué)生開發(fā)和設(shè)計網(wǎng)站的能力，幫助學(xué)生畢業(yè)之后能順利成為企業(yè)的網(wǎng)站工程師，并快速適應(yīng)工作崗位。

作者單位：黃美世 廣西南寧市第六職業(yè)技術(shù)學(xué)校

參? 考? 文? 獻

[1]鄒洪俠，任瑩瑩.網(wǎng)站制作類課程教學(xué)內(nèi)容整合探索[J].產(chǎn)業(yè)與科技論壇，2018，17（18）：168-169.

[2]謝冠懷. 立足基礎(chǔ) 企業(yè)標準 接軌世界——論世界技能大賽網(wǎng)站設(shè)計（Web Design）項目成果轉(zhuǎn)化暨《HTML5+CSS3網(wǎng)頁制作》一體化課程改革[C]/中國職協(xié)2016年度優(yōu)秀科研成果獲獎?wù)撐募▽W(xué)校一等獎），2016：1247-1255.

[3]萬開成.關(guān)于《網(wǎng)站制作》課程教學(xué)的新探索[J].考試周刊，2013（83）：116-117.

[4]曹曉麗，孫玉敏.《網(wǎng)頁設(shè)計與制作》課程教學(xué)設(shè)計[J].教育教學(xué)論壇，2012（S5）：206-207.

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

[6]孫曉娟.淺談項目教學(xué)方法在《網(wǎng)站制作》教學(xué)中的實現(xiàn)[J].計算機光盤軟件與應(yīng)用，2012（02）：241+238.

[7]李廣莉.基于移動平臺的網(wǎng)頁制作技術(shù)課程教學(xué)、研究與實踐[J].河北農(nóng)機，2021（04）：84-85.

[8]李桂春，吳振華.基于創(chuàng)客教育理念下中職計算機網(wǎng)絡(luò)技術(shù)專業(yè)“網(wǎng)頁制作”課程的教學(xué)研究[J].科技與創(chuàng)新，2020（19）：80-81.

[9]陶俊.實踐活動在網(wǎng)頁制作教學(xué)中的應(yīng)用研究[J].學(xué)周刊，2019（16）：25.

[10]種子儒.項目教學(xué)法在網(wǎng)頁制作教學(xué)中的應(yīng)用[J].職業(yè)，2018（04）：72-73.

[11]薛輝.基于理實一體化的《網(wǎng)頁制作》課程教學(xué)模式研究[J].電腦與電信，2017（04）：11-13.