高職軟件技術專業網頁布局課程教學改革研究

翟蓮秋

摘 要：網頁布局是網站開發方向的主要基礎，文章結合我們教學改革實踐，首先對軟件技術專業學生進行了學情分析，然后分析與闡述了課程存在的問題，最后提出了具體的改進方案及措施。通過不斷的教學實踐和研究改革，有效提高學生的學習興趣，達到提升學生實踐能力和社會適應能力的職業培養要求。

關鍵詞：高職;軟件技術;網頁布局;教學改革

根據高職軟件技術專業人才培養方案，網站開發方向中Web前端工程師是核心崗位之一，要求學生必須掌握基本的Web前端開發技術、網站性能優化，學會運用各種工具進行輔助開發，并且熟悉網站后臺開發和應用的能力。網頁布局課程（HTML+CSS+DIV）是軟件技術專業必修課程。

按照Web前端開發技術工作崗位對知識和能力的要求，本課程以HTML5和CSS3前端開發技術為主線進行課程設計，作為WEB前端開發技術的入門基礎，課程設計最重要、最難的地方就是將一些非常復雜、難以理解的思想和問題簡單化，讓學生能夠輕松理解并快速掌握Web開發和設計的精髓。

一、學情分析

學生思維活躍，樂于溝通，喜歡模仿和動手實踐，但學習韌勁不足，缺乏堅持不懈的學習態度，團隊合作意識薄弱;

學生上課紀律整體很好，但課前課后的學習主動性差;

學生會做不會說，作品優秀、閃光點多，但學生不能完美介紹出作品的優勢;

學生經過課程學習已經掌握了HTML5網頁內容的編輯，掌握了使用CSS3進行頁面元素的布局與排版，并且能夠對網頁頁面進行總體的控制，不過多數學生對網頁設計的崗位認知還比較模糊。

二、軟件技術專業已開設的網頁布局課程存在的問題

（一）課程教學內容過多、課時過少

課程內容包括HMTL、CSS、JavaScript三部分，以HMTL為基礎，結合DIV布局和CSS樣式，實現網站前臺和后臺頁面的布局，JavaScript編程主要實現實時的、動態的、可交互性的網頁功能。隨著WEB標準的升級，HTML5和CSS3應運而生，為更好更快適應市場需求，在新的課程中將加入HTML5和CSS3部分的知識。但這也造成了知識點多，課時少、學生實踐練習少，對知識的掌握不徹底，對相關知識的整體認識不夠。另外，JavaScript編程與HTML、CSS在一學期講，融合得也不是很好。

（二）教學方法不夠合理

課程采用“任務驅動”教學方法，每個教學任務都是獨立的網頁頁面，學生對知識點的掌握較好，但只側重對單個頁面的認識，對網站的整體建設缺乏系統的了解。

（三）課程設置沒有考慮專業體系的連貫性

軟件專業網站開發方向的每門科程在設置學習任務或項目時過于狹隘，只考慮了單門課程知識點的學習和掌握，沒有考慮整個專業課程體系中知識的連貫性。學生對每門知識和技能的掌握較好，但走向工作崗位后，不能快速有效地將各門學科有機的結合。

（四）缺少現代化教學輔助手段

學生缺少主動學習意識，學習韌勁不足，常常容易自我放棄。而教師缺少課后對學生的督促和考察的手段。

三、課程教學改革方案

針對以上對學生及課程的分析，提出以下改革方案：

（1）在內容上進行調整，新的培養方案中將JavaScript從《網頁布局》中分離出來，將JavaScript與JQuery結合成《JavaScript+jQuery前端開發技術》，而原來的《網頁布局》主要側重網頁頁面的綜合布局，同時加大了實訓學時。隨著網絡技術的發展，JavaScript語言越來越受歡迎，是目前互聯網上最流行的腳本語言，JavaScript被廣泛應用于網頁特效和網頁表單驗證等方面，而JQuery是一套輕量級的JavaScript腳本庫，實現了JavaScript代碼和HTML代碼的分離，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發AJAX的操作。所以《JavaScript+jQuery前端開發技術》將復雜的東西封裝成方法，使學生學習JavaScript的難度降低。

（2）新的課程標準中課程以“項目+任務”規劃所有教學內容，通過項目將知識點串聯起來，學完一個項目的內容就能制作一個完整的網站，極大地激發了學生的學習興趣和學習熱情。將一個項目分解成多個子任務，完成子任務的實際操作過程就是知識的學習過程，讓學生掌握項目中的知識點和技能點。其教學流程為“①布置任務→②任務分析→③知識講解與操作示范→④任務實施→⑤任務展示點評→⑥歸納總結”六個環節，在內容的選擇、結構的安排上符合初學者的認識習慣。同時本課程項目豐富，涉及電影、攝影、網上花店、網絡學習、商品銷售等多個方向，有助于學生掌握不同網站的設計風格與制作技巧。

課程共分為5個項目，結合HTML5、CSS3、DIV等Web前端主流技術的基礎知識及應用，具體介紹如下：

項目1“國際電影節網站”介紹了Web基本概念、HTML5語法、HTML5標記、HTML5頁面元素及屬性，要求學生掌握HTML5文檔的基本結構，熟練運用HTML5頁面元素標記及屬性，為后續學習打下基礎。

項目2“網上花店”主要介紹CSS3樣式表引用、CSS3選擇器，要求學生能夠熟練使用CSS3樣式控制頁面中的元素的外觀，熟練使用CSS3選擇器選擇頁面元素。

項目3“攝影網站”主要介紹CSS5盒子模型相關屬性、背景屬性、浮動和定位屬性、表單屬性及CSS3控制表單樣式，要求學生熟練運用盒子模型相關屬性、浮動和定位屬性控制網頁中元素的布局，并熟練運用表單及控件的相關屬性來組織頁面元素。

項目4“DIV CSS初學者網站”主要介紹模板的生成與保存、可編輯區域的定義和修改、庫項目的創建和更新，要求學生熟練地修改網頁模板及其屬性，并同步更新該模板生成的網頁。

項目5“商品銷售網站”結合前面所學的知識，帶領學生開發一個具有首頁、產品瀏覽、在線留言頁面的網站，以促進學生更好地掌握網站開發和制作的流程。

（3）針對整個專業的課程連貫性，在新的培養方案中，軟件專業網站開發方向所有專業課程的最后的綜合項目均為“商品銷售網站”。在《網頁美工》中進行網站效果圖的制作，在《網頁布局》中依據效果圖進行前臺和后臺頁面的布局，在《Java Web程序設計》、《軟件框架技術》中進行數據庫的連接及后臺管理編程，在最后一學期末的實訓周再把這幾門課所有內容進行整合成一個完整的網站。

（4）建設課程開放平臺。結合學校專業建設與發展需要，決定建設網頁布局在線開放課程，制定課程的整體設計、課程標準、考核方案、教學計劃、教學課件、教學視頻、實訓任務、技能題庫、單元測驗等教學資源上傳到超星在線開放平臺，學生可在課前通過觀看教學課件、教學視頻進行預習自學，上課時通過教師的系統講解和示范操作，進行知識的查漏補缺和技能的訓練，課后自行下載實訓任務、技能題庫、單元測驗進行知識和技能的鞏固掌握。切實做到線上線下兩手抓、課前課后兩不誤。

四、結語

文章進行了軟件技術專業網頁布局課程的教學改革研究，首先對授課學生進行了學情分析，然后將已開設的網頁布局課程存在的問題進行了細致的分析與闡述，最后針對出現的問題提出了具體的改進方案及措施。在今后的教學過程中，還將不斷地進行發現問題、分析問題、改進問題，有效提高學生的學習興趣，達到提升學生實踐能力和社會適應能力的職業培養要求。

參考文獻

[1] 李艷霞，楊威，李翠紅.基于項目化教學的“網頁設計與布局”課程教學研究[J].中國教育信息化，2017（04）：16-18.

[2] 丁玲.以“說課”形式談《網頁設計與制作》項目教學設計[J].科技視界，2013（30）：256-257.

[3] 侯云霞.軟件工程與Rose建模在線開放課程建設方案[J].科教導刊：電子版，2017（30）：112.