《HTML5+CSS3網頁制作》課程教學方法的研究與探討

摘要：在信息技術飛速發展的背景下，互聯網已經成為人們溝通和獲取信息的主要途徑，網絡上也產生了各種各樣的網站。《HTML5+CSS3網頁制作》作為計算機專業基礎性教學課程，需要結合學生的實際需求對教學方法進行調整，使學生掌握更多的網頁制作方法。基于此，本文結合《HTML5+CSS3網頁制作》課程的教學現狀，對該課程的具體教學方法進行研究和探討，以提高學生的網頁制作水平。

關鍵詞：《HTML5+CSS3網頁制作》；課程教學；教學方法；實踐措施

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

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

一、引言

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

二、《HTML5+CSS3網頁制作》教學的主要問題

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

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

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

三、《HTML5+CSS3網頁制作》課程教學方法的實踐措施

（一）對教學內容重新進行規劃

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

（二）在課堂上應用案例教學法

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

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

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

（三）在課堂上應用分層教學法

電子商務專業和計算機專業都涉及了《HTML5+

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

（四）在課堂上應用項目教學法

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

（五）在課堂上應用任務驅動教學法

任務驅動教學法是在建構主義的基礎上為學生制定的一種任務驅動教學模式，整個教學過程都要以一個任務為中心內容，教師將教學重點全部融入任務當中，引導學生通過完成任務對教學重點進行深化。學生在完成任務的過程中，能充分發揮自身的主觀能動性，對培養自身的探索能力和開拓精神有著非常重要的作用。

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

（六）對課堂教學的考核方法和評價方法進行調整

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

四、結束語

總而言之，學生之所以學習《HTML5+CSS3網頁制作》課程，最主要的目的是能夠在網絡中占據屬于自己的領地，能夠將自己設計和制作的網頁上傳至互聯網，讓更多的人欣賞自己設計的作品對學生來說是一件無上榮耀的事情。但信息技術的發展速度飛快，網頁制作的工具也在不斷更新，為了培養出更加符合相關領域需求的綜合型網絡技術人才，《HTML5+CSS3網頁制作》課程教師必須要不斷對教學內容進行調整與創新，將多元化的教學方法應用到實踐當中，調動學生學習網頁制作的熱情，提高《HTML5+CSS3網頁制作》課程的教學效果，培養學生開發和設計網站的能力，幫助學生畢業之后能順利成為企業的網站工程師，并快速適應工作崗位。

作者單位：黃美世 廣西南寧市第六職業技術學校

參? 考? 文? 獻

[1]鄒洪俠，任瑩瑩.網站制作類課程教學內容整合探索[J].產業與科技論壇，2018，17（18）：168-169.

[2]謝冠懷. 立足基礎 企業標準 接軌世界——論世界技能大賽網站設計（Web Design）項目成果轉化暨《HTML5+CSS3網頁制作》一體化課程改革[C]/中國職協2016年度優秀科研成果獲獎論文集（學校一等獎），2016：1247-1255.

[3]萬開成.關于《網站制作》課程教學的新探索[J].考試周刊，2013（83）：116-117.

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

[5]羅靜.網頁設計課程教學改革的思考[J].計算機光盤軟件與應用，2012（11）：241-242.

[6]孫曉娟.淺談項目教學方法在《網站制作》教學中的實現[J].計算機光盤軟件與應用，2012（02）：241+238.

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

[8]李桂春，吳振華.基于創客教育理念下中職計算機網絡技術專業“網頁制作”課程的教學研究[J].科技與創新，2020（19）：80-81.

[9]陶俊.實踐活動在網頁制作教學中的應用研究[J].學周刊，2019（16）：25.

[10]種子儒.項目教學法在網頁制作教學中的應用[J].職業，2018（04）：72-73.

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