前言：尋找寫作靈感？中文期刊網用心挑選的提升教學質量以網頁設計和制作課程，希望能為您的閱讀和創作帶來靈感，歡迎大家閱讀并分享。
［摘要］ 傳統的網頁設計與制作課程教學存在許多弊端，已不能滿足培養學生全新技能的要求。探討通過依托世界技能大賽標準改革教材、開發教學資源，使用項目教學、微課教學、目標導向等方法與手段提升教學質量。
一、網頁設計與制作傳統課程教學存在的問題
（一）教學內容脫離實際
目前許多學校所使用的《網頁設計與制作》教材出版的時間是四五年前的，甚至是十多年前的，教學內容太陳舊，已經跟不上時代的需要。教學目標的實現需要以教材為本，要培養學生與時俱進，教材需要更新，但是許多學校為了一時的便利，往往采用舊版材，課程內容選擇隨意，教學內容的選擇沒有考慮時代的發展、科技的進步，影響了學生培養的質量。
（二）教學手段和教學方法單一
傳統課程教學的教學手段和教學方法單一，教師主要通過講授法、練習法完成教學任務。學生參與教學活動的興趣不高，導致課堂氣氛沉悶，教學脫離實踐，學生很難理解理論知識，產生畏學的思想，久而久之失去學習興趣。
（三）課堂教學時空受限
傳統的課堂最大特點是三個“固定”、三個“中心”和“三件套”。三個“固定”是指教室、時間和師生固定，三個“中心”是指以教室為中心、以教師為中心、以課本為中心，“三件套”指教師使用教材、黑板、粉筆來教學。這個特點存在的“弊端”是輔導時空限制，學生學習效果差，教師有心無力，“抓”不住學生。
二、依托世界技能大賽標準改革教材
2012 年以來我院多次組織師生參加世界技能大賽相關工作，2018 年我院承辦了世界技能大賽網站設計與開發賽項廣西選拔賽，并派教師參與網站設計與開發項目全國選拔賽的裁判工作。通過認真總結和反思，認識到世界技能大賽項目標準代表了世界技能人才的培養標準和方向，世界技能大賽是職業教育改革的導向標，作為職業院校教師，要打破傳統教學理念，對接世賽標準，提高教師的專業技術技能水平，將世賽標準融入人才培養方案和專業課程教學改革中去，促進學生技術技能水平的提升。
（一）對世界技能大賽標準及行業企業需求進行調研
2020 年 1 月，我系選派專業教師到上海信息技術學校開展調研。上海信息技術學校是世界技能大賽“網站設計與開發”項目全國集訓基地。通過調研教師了解到“網站設計與開發”賽項涉及的專業知識、技術技能、綜合能力培養等方面內容。同年 3 月，專業組教師到與網站開發相關的企業調研，通過與行業企業專家深入交流學習了解至當前企業做網頁所需的技術及常做的一些項目。通過對世賽標準及行業企業調研，根據本專業及師資的情況，專業組成員開發《網頁設計與制作教程》教材由北京理工大學出版社出版。該教材使用項目教學法將“網站設計與開發”賽項的響應式單頁設計、響應式頁面重構兩個部分所涉及的部分知識點及行業、企業的一些項目融合起來。學生通過學習掌握最新前沿知識及技能的同時融入企業實戰項目，實現以“工作任務為導向”課程體系，為今后的實習及就業打下良好的基礎。
（二）根據課程目標確定教學內容與教學項目
課程堅持以工作過程為導向，以能力為目標，以學生為主體，以實際工作崗位的項目為載體。它分為 12個學習項目，每個項目均由項目描述、項目目標、項目分析、知識引入、項目實施、項目總結、項目拓展 7 個環節組成，每個環節環環相扣。項目編排的原則是由易到難、循序漸進，遵循學生的認知規律，每個項目中含有若干個子任務，每個子任務是項目中新的知識點，學生輕松獲取知識及技能，便于教學的實施。
（三）教材的特色
1.科學性。教材打破傳統的以知識為結構的課程體系，力求建立基于真實工作過程的全新教學理念。體現“做中學，學中做”的理念，基于行動導向的教學觀，以項目為引領，以任務為驅動的教學方式。
2.靈活性。教材每個項目的知識點，由多個子任務組成，教師可以根據實際課時數講解子任務，每個項目及大部分子任務都配有二維碼，師生通過手機掃描即可看到相關視頻，學生可以在課前、課后自主完成學習。
3.先進性。教材使用的開發平臺是 Visual StudioCode 編輯器，Visual Studio Code（簡稱 VS Code / VSC）是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言。在傳統的 CSS+DIV 網頁布局基礎上，添加 HTML 5的頁眉、頁腳、導航、文章內容等與結構相關的結構元素標簽。增加了響應式頁面的制作內容，響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。目前世賽技能大賽網站設計與開發項目對響應式頁面作為一項重要考核內容。
4.教材落實立德樹人。項目中融入中華優秀傳統文化如教材融入春節、清明節等我國傳統的節日，同時還引入了一些歌頌道德品質的詩如《陋室銘》，加強愛國主義、集體主義、社會主義教育；教材引入“端午節由來與傳說”將屈原愛國精神融入課堂。書中的項目 11 來源于企業真實的工作任務，項目 12 源于世界技能競賽“網站設計與開發”的網頁重構模塊。同時本教材可以作為考取 1+X Web 前端開發（初級、中級）證書的參考教材，真正實現“崗課賽證”融通人才培養模式。
（四）教學資源的開發與建設
經過一年多的努力，專業組成員完成了 76 個子任務12 個教學項目教學視頻的開發，完成 76 個子任務微課件的制作，完成 12 個項目的 12 份教學課件制作，同時完成了 12 個項目活頁工單的開發，通過學習通平臺將這些教學資源發布到平臺上，方便教師及學生的學習，能有效提高學生的學習興趣及教學質量。
三、教學方法與手段的創新
本課程的教學主要采用項目教學法，項目教學法是一種以學生為中心的教學方法，是指在一個真實或接近真實場景的學習任務中，學生相對獨立地完成確定項目目標、項目分析、項目實施、項目總結、展示和評價、項目拓展的整個過程，整個項目教學通過課前、課中、課后來完成。課前教師將項目及子任務內容中的重點操作技巧制作成微課，借助網絡平臺成為共用資源，上傳到網站，讓學生課前上網觀看自主學習，進行簡單的預習和思考，這一滿足學生熱衷網絡的特點，激發了學生的學習興趣，突破了傳統的教學模式，使課堂更加高效。課中將微課導入課程，微課其豐富多彩的視頻畫面容易吸引學生的注意力，使課程內容被迅速導入課堂。在簡單、趣味的藝術形式表現形式下，學生能夠輕松學習課堂教學的重點和難點，網頁設計與制作課程項目內容較為繁瑣，項目的代碼長，如果按照以往的教學模式，往往會使學生學了后面，忘了前面。因此，在一些項目操作中，在內容較多時，教師將每一個重點、難點分割，并制作成微課，使學習較差的學生重復播放相應的微課，通過重復學習掌握學習難點，掌握完整的教學內容，并且有助于系統掌握知識。課后使用微課進行復習，對所學知識進行鞏固。網頁設計與制作課程子任務多，項目的內容難度大，學生難以將所有子任務中的重點內容系統地聯系在一起，在課后教師布置項目拓展，學生在沒有教師的指導下無法獨立完成，更無法提高制作效果，因此制作積極性受挫。借助視頻化微課，鞏固學習知識，將知識進行重構，提高主動探究、深入學習的能力。本課程使用學習通網絡平臺將難以學習的程序代碼，通過信息技術呈現給學生，學生可以在平臺上觀看教材中所有項目及大部分子任務的視頻教學，增強學生運用網絡資源自主學習的能力，滿足學生的學習之需。同時網絡資源包含教學課件、項目教學視頻、子任務教學視頻、活頁工單等，大大提高了課程的學習效率。
四、課堂教學的改革與實踐
（一）強化目標意識，以目標為導向
教學過程中讓學生明白本項目的完成目標，學生根據自我已經掌握的知識、能力的薄弱環節及項目的目標來確定自己最終的目標。這種以目標為導向的教學方式能使學生學習具有更強的針對性及目標性。
（二）注重師生互動，活躍課堂
師生良好的互動會讓整個課堂活起來，為此，我們在網頁設計與制作中采用頭腦風暴法、角色扮演法、演示法、練習法以及項目驅動法等方法開展教學。利用圖片、實物、聲音、圖像和互聯網絡等元素制作多媒體課件，提高學生的學習興趣和學習效果。在教學中教師要突出學生在教學活動中的主體地位，讓他們自己發現問題、探索問題、討論問題和解決問題。教師在課堂教學中充當“主導”的角色，引導學生參與其中。
（三）使用情境教學，創設真實情境
在項目教學中，首先要強調的就是情境創設，是指在教學過程中，教師有目的地引入或創設具有一定情緒色彩的、以形象為主體的生動具體的場景，以引起學生一定的態度體驗，從而幫助學生理解教材，并使學生的心理機能得到發展。比如在講解正航科技企業網制作時，讓學生使用角色扮演法以企業員工的身份對企業網的制作提出要求。這種方式充分調動了學生學習的積極性，訓練了學生的思維能力，收到了很好的教學效果。
（四）分層協作，追求“合作學習”
課堂中除了倡導學生通過“目標導向”和“情境教學”之外，重點讓學生“合作學習”，按學生操作能力強弱把他們分組，鼓勵操作能力強的學生能更好地進行知識拓展，并讓這些學生幫助操作稍弱的學生，從而讓學生全面完成對知識的掌握。
（五）注重教學技巧，提高學習效果
網頁設計與制作這門課程的特點是“標簽”和“屬性”很多，且它們由英文組成，對于中職學生來說死記硬背學起來困難，這就要求學生一定要多動手，多敲代碼，通過運行代碼理解屬性及其不同值所表現出來的效果，才能做到融會貫通。本門課程教學所用的是 VisualStudio Code 編輯器，教師在教學中教會學生使用一些快捷輸入法，如輸入“！”按“回車鍵”即可出現 HTML 5的基本結構，P*5 即完成五對<p></p>標簽的輸入等，這些快捷輸入方法能加快學生編寫代碼的速度。
（六）使用項目拓展，實現知識遷移
每學完一個項目的時候，給學生布置一項本章的內容項目拓展。項目拓展中一般包括本章中的多個知識點和重點操作內容，有利于學生對新知識的接受和遷移，促使學生對其進行思考并進行實踐操作，有利于學生形成自主思考、實踐和創新的過程，在教學中收到較好的效果。
（七）幫助學生構建自主性學習
為促進學生的自主性學習，根據學生不同的心理特點和層次，設置各種課堂教學活動，滿足學生的學習需要，激發他們的學習興趣，調動他們的學習積極性，把“要我學”變成“我要學”。在構建自主學習的過程中，教師首先幫助學生制訂學習目標，使用能調控自己的學習行為和策略，了解每一學習階段的學習特點和規律，掌握有效的學習方法，從而學會自主學習。
（八）加強思政教育，實現立德樹人
在網頁設計與制作這門課程的項目教學過程中，融入了一些中華民族的傳統節目，如“端午節由來與傳說”作為圖文排版的項目，通過本項目的學習學生能使用 HTML 5+CSS 3 對網頁圖文進行排版，同時加強了愛國主義教育。 在項目教學過程中引入《陋室銘》詩歌，要求學生使用<hr>標簽對每行詩添加水平線，教師把安于陋室，高潔傲岸的節操和安貧樂道的生活樂趣，不慕名利、不與權貴同流合污的品德和精神追求教誨到每位學生，實現了立德樹人。
五、課程的實施效果
本門課程實施于 2020 級計算機網絡 1、2、3 班，通過一個學期的實施，學生完成的作品有了很大的變化，課程實施前學生只能完成單頁的 PC 端網頁，課程實施后學生能完成靜態網站的開發，能完成單頁響應 PC、手機、i Pad 端的網頁效果，我們看到學生的技能水平有了很大的提高，同時該門課程通過多種教學方法與手段培養了學生的綜合素質，讓學生形成了發現問題、探索問題、解決問題的能力，大大提高了學生對網頁設計與制作的興趣。2021 年 12 月初，本系舉行了 2022 年廣西職業院校技能大賽的 Web 設計與開發項目的選拔賽，共30 多名學生踴躍報名參與該項目的選拔，也有些學生開始研究世界技能大賽網站設計與開發項目的題目，力爭在下一屆區內選拔賽中取得好的成績。課程實施過程中還引入了世賽的評價標準，確保學生完成作品的質量。如“所有網頁文字內容在頁面中可以索引”“代碼擁有良好的結構”“網頁至少有兩個以上互動效果”等。“路漫漫其修遠兮，吾將上下而求索。”在對接世界技能大賽標準，提升教學質量對教學改革的探索，還有一段很長的路，我們需不斷加強理論和技能的學習，將世界技能大賽的標準融入更多的課堂，為培養更多的技能型人才而努力。
參考文獻：
［1］劉艷麗.高職計算機文化基礎課程教學方法的改革與實踐［J］.職業，2015（3）.
［2］曹頻.以項目教學構建中職語文教學新模式的實踐研究［J］.職業，2014（11）.
［3］許可芳.借助“微課”創建高效中職課堂的探索：以動畫制作課程教學為例［J］.職業，2015（3）.
作者：曾娜 單位：廣西工業技師學院