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

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

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

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

一、引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結束語

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

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

參? 考? 文? 獻

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

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

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

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

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

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

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

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

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

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

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