網頁設計與布局課程教學研究

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了網頁設計與布局課程教學研究范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要：文章以高職計算網絡技術專業網頁設計與布局項目化課程為例，將中國傳統文化（書法文化）網站建設為項目載體融入該課程教學中，以職業活動為主線，通過項目展示、項目分析、項目實施、項目拓展、項目評估、項目實戰等過程，實現了對知識的直接遷移，使學生獲得與工作過程相關的職業能力，同時弘揚了中國傳統文化，對提高教學質量進行了有益的探索。

關鍵詞：中國傳統文化；網頁設計與布局；工作過程；項目化課程

一、引言

近年來，項目課程在高職教育中得到廣泛運用和推廣[1]，在實施過程中，項目課程以職業崗位工作過程為導向，以培養學生職業能力為核心。根據高職計算機網絡技術專業人才培養方案，Web應用開發方向，其中Web前端工程師是核心崗位之一，要求學生必須掌握基本的Web前端開發技術、網站性能優化，學會運用各種工具進行輔助開發，并且熟悉網站后臺開發和應用的能力。網頁設計與布局項目化課程（HTML+CSS+DIV）是計算機網絡技術專業核心基礎課程。教職成[2015]6號文件中，提出要把中華優秀傳統文化教育系統融入課程和教材體系，書法文化課是全院第二課堂一門拓展性課程，將書法文化網以工作過程融入網頁設計與布局項目化課程中，激發了學生的學習動力，同時弘揚和傳承了中華傳統文化[2]。本項目化課程，集專業知識與文化建設一體化的平臺，提升了學生的傳統文化素養，促進了學生高效的學習網頁設計與布局項目化課程。

二、項目化教學課程內容設計思路

該項目課程是依據“計算機網絡技術專業工作任務與職業能力分析表”中的Web前端工程師工作領域設置的。網頁設計與布局項目課程，采用了循環式模式[1]，課程內容從簡單到復雜的多個項目進行組織，每個項目都包括該課程全部任務所構成的完整工作過程，且其與企業工作過程基本一致。其中“書法文化網站”建設是其中的一個項目，該項目教學內容選擇主要根據Web前端工程師的工作任務及其所具備的職業能力的培養要求，注重對學生職業能力的訓練，理論知識的選取緊緊圍繞“書法文化網”建設中制訂的工作任務完成的需要來進行，同時還考慮高等職業教育對理論知識學習的需要，并融合Web前端工程師資格證書對知識、技能和態度的要求以及學生在工作過程中所對應的工作崗位，本項目設計以構思設計（內容分析）、原型設計、頁面設計、頁面制作、動畫制作、技術擴展、測試為線索來架構。教學過程中，通過仿真模擬的網站開發案例和校內實訓基地、網站開發工作室作為輔助，以真正做到教、學、練結合。“書法文化網站”項目是以山西信息職業技術學院“書法聯誼協會”工作流程進行建站，界面設計要以傳承中華書法文化藝術為主旨，渲染校園文化藝術氣氛，提高廣大會員的書法技能，以達到修身養性的目的。本項目屬于課程網站建設范疇，經過對項目的分析，需開發靜態頁面站點，項目主要采用HTML+CSS+DIV技術布局本站點，后期采用CSS技術擴展來維護站點，決定本項目分解為7個分項項目來完成，通過書法文化網站建設學習如何設計與布局頁面，基于項目化教學內容設計如表1所示。

三、基于項目化課程教學具體實施

“書法文化網站”建設是一個在教師指導下由學生獨立完成的項目。根據學生實際及教學任務，項目實施過程分為六個環節，分別是項目展示、項目分析、項目實施、項目拓展、項目評估、項目實戰。項目實施以小組為單位，全班分成若干小組，每個小組設置一個項目部，1名組長，負責分工、協調、組織討論，每個項目部設置多個角色，每個角色對應指定的工作崗位，每個小組3-6人，每人1臺配備電腦（可自備），以保證實際的工作需求。在實際運行過程中，通過合作互助學習，讓接受能力較強的學生對接受能力較弱的學生進行幫扶，充分發揮學生學習主動性，鍛煉學生團結互助品質，同時每組組員工作崗位迭代循環角色互換，讓每一個學生體驗到真正工作過程的環節，促進發展，實現知識遷移。

1.項目展示，激發動機。提供真實的企業網站，將頁面的顏色、布局、內容結構、功能直觀展示給學生。比如協會簡介、新聞動態、書壇人物、書法研究、鑒賞收藏、協會風采、作品展示、書法論壇、會員注冊模塊，明確本項目的具體工作任務，同時引導學生思考，使其盡快進入工作狀態，為項目化教學的實施做好準備。本環節讓學生對網站進行賞析，對網頁的布局、色彩搭配形成初步印象，提高學習興趣，激發學習動機，讓學生明確本項目是解決“做什么”的問題。

2.項目分析，任務細分。師生共同通過項目分析了解網頁設計以及網頁布局的組成，制定工作任務，下發任務單，包括具體的任務描述，任務目標，具體實施步驟，要求項目設計過程記錄清楚，設計中出現的問題，如何解決要有詳細的記錄，以及提供項目中所需教學資源，明確頁面中版塊設計。除此之外，在設計網頁時，更要關注頁面的內容是否滿足用戶需求。本環節以教師引導，學生思考為主，通過細分工作任務，收集整理頁面中模塊素材，為項目實施做好充分準備。

3.項目實施，輔導操練。在項目實施過程中，學生可以自帶設備（BYOD）進入理實一體化主動學習教室。學生明確工作任務的操作流程及其實現方法，教師提供指導，引導學生獨立完成，同時學生觀察、思考，以小組為單位進行項目實施。以教學內容中安排的7個分項項目進行對整個項目的實施，以“書法文化網站”建設為線索，在每個分項項目的具體工作任務的實施過程中，以“學生為主體、教師為主導->教師指導、示范、鼓勵->學生理解、操練、反思和鞏固->學生主動完成工作任務”迭代循環的教學過程，最終完成了整個項目的設計。實施中對課堂提問、學生出勤情況、工作任務單與拓展任務單日志完整情況等作詳細的記錄作為學生的考評依據。本環節是學生具體實施項目的過程，師生共同完整的完成了整個項目，教師放手操練，請優秀學生協助未完成的學生一起進步，增強學生的自信心與學生主動性，培養學生團隊合作精神。

4.項目拓展，變式操練。每一個工作任務的完成，學生對新獲得的知識技能有一定的感性認識，教師以網頁的形式呈現新問題的具體工作，同時下發拓展任務單，進行變式訓練，學生反思、鞏固、進行自主拓展，課后自主探索，尋求解決問題的方法。本環節讓學生們把新獲得的知識技能遷移到日常生活中，學以致用，達到融會貫通之效。解決“為什么”的問題。

5.項目評估，總結歸納。通過學生自評、學生互評、教師評價、學生完成工作任務程度、項目答辯、成果（網頁）的審核等方式，對學生完成每個工作任務根據課程標準中制定的評分標準進行多方位的考核[4]。每個工作任務，師生共同歸納出本工作任務實現所需要的知識點，學會辨析知識應用的正誤，提煉出工作任務中求解過程中的關鍵操作和解決問題的技巧。同時，教師對典型作品與學生共同分析，肯定成績，同時指出存在的問題以及改進的方法。本環節通過自評、互評，師生共同總結，培養學生分析能力和自我反思能力，解決了“做得怎么樣”的問題。

6.項目實戰，實踐探究。為了讓學生對所學的知識進行拓展和應用，在學生課后的拓展項目中，學生靈活應用所獲得的新知，通過團隊合作以學院“攝影社團”網站、“剪紙社團”網站、“清風棋社”網站進行了拓展項目實戰，素材資源由自己去收集、整理、加工，最后以小組為單位進行項目比賽，不僅培養了學生的綜合知識應用能力，而且培養了團隊意識，自我學習能力，促進學生的職業能力發展。本環節主要解決“知識技能拓展應用”的問題。四、結束語通過采用基于學生生活實際的真實產品建站流程進行了本項目化課程的教學應用，同時融入了中國的傳統文化元素，提升了學生網頁設計創新思維，促進了學生綜合職業能力發展，滿足了崗位能力需求。在以后教學實踐中，嘗試多專業合作，社會設計項目等引入課堂，使學生在校期間獲得實際技能，適應社會人才需求。

參考文獻：

[1]李雄杰.職業教育理實一體化課程研究[M].北京:北京師范大學出版社,2011:1-70.

[2]沙聰穎.中國傳統文化融入高職校園文化建設實踐探索———以大連職業技術學院為例[J].遼寧高職學報,2013(11):14-16.

[3]勞飛.基于項目化教學的“網頁設計與制作”課程改革與實踐[J].教育與職業.2014(29):139-140.

[4]楊向東,黃小瑞.教育改革時代的學業測量與評價[M].上海:華東師范大學出版社,2013.10:109-116.

[5]溫謙,周建國,練源.網頁設計與布局項目化教程(HTML+CSS+DIV)[M].北京:人民郵電出版社,2014:146-201.

作者：李艷霞 楊威 李翠紅 單位：山西師范大學教育技術與傳媒學院 山西信息職業技術學院