HBuilder在《商務網頁設計與制作》課程的實訓教學中的運用

葉星　喬毅

摘要：《商務網頁設計與制作實訓》是電子商務專業重要的實踐性教學環節。在實訓教師的指導，運用HBuilder軟件對學生進行網頁制作綜合訓練，以項目開發的標準來訓練學生，運用HBuilder完整的語法提示和代碼輸入法、代碼塊、框架集等功能，提高學生的商務網頁設計能力以及開發效率。

關鍵詞：HBuilder;一鍵;效率;商務網頁設計與制作;電子商務

一、Hbuilder軟件介紹：

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE，是一款開源軟件。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。速度快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。

二、實訓目的：

我國高職高專院校主要以培養應用型人才為主，學生在校期間除了要學習必要的理論知識以外，還應達到一定的實用型的技能水平，因此各專業的實訓教學環節顯得尤為重要。《商務網頁設計與制作實訓》是我院電子商務專業重要的實踐性教學環節。它是根據專業教學計劃的要求，在教師的指導下對學生進行網頁制作專業技能的訓練，培養學生綜合運用理論知識分析和解決實際問題的能力，是對《商務網頁設計與制作》課程理論與實踐教學效果的檢驗，也是對學生綜合分析能力與獨立工作能力的培養過程。通過運用HBuilder代替其他傳統網頁設計軟件，例如：Dreamweaver、Front page等，將所見即所得的設計方式轉變為軟件開發的方向，使學生更加熟悉網頁結構以及掌握計算機網頁設計開發的基本技巧，培養學生運用計算機進行商務網頁設計的基本思路和應用開發能力，提高學生的計算機文化素質，成為高水平應用型人才。

三、學情分析：

要想把《商務網頁設計與制作實訓》這門課程開設好，首先應聯系我院電子商務專業學生的實際情況來設計實訓過程。我系大部分學生屬于單招生，單招學生的普遍特點為基礎理論知識相對較弱，學生的自主學習能力和學習動力不足，但這部分學生的思維非常的活躍、想象力豐富、動手能力強，恰好要想運用HBuilder來進行網頁開發需要一定動手能力，再加上本實訓課程中涉及的色彩搭配、結構布局、細節處理、創意設計等幾個方面的契合度與學生的匹配程度很高。該門課程的學習難度適中，但對學生的發散性思維以及動手能力要求較高，學生需要通過不斷的設計、修改、完善，最終完成較好的預期作品。該門課程理論學習階段進度末期，學生已基本具備獨立完成項目的能力和素質，但缺乏的是職場模擬環境下的實戰和項目引導。本實訓以布置任務為驅動，學生自己選擇設計項目的模式和環境為導向，能夠滿足學生為以后的電子商務相關崗位的就業而學習一技之長的需求。

四、實訓過程：

（一）案例賞析

在實訓開始之前，由實訓教師演示運用Hbuider的“一鍵導入站點的”功能，如圖3所示，將提前收集并挑選的一些精美的、具有典型的電商行業特色的成品網頁向學生展示，而后向學生介紹并分析這些網頁的色調搭配思路以及在色調搭配選擇時的忌諱、網頁的整體設計理念、結構布局、創意特點等，讓學生像欣賞一件藝術品一樣，來欣賞優秀的網頁案例，同時也要讓學生體會到，一件優秀的網頁設計作品，是需要傾注很多時間和心血在里面，才能夠完成的。

本階段的實訓目的，是為了通過案例分析，來引導學生去思考商務網頁的美工、布局、樣式都是怎樣來完成的，自己能否通過努力來完成一件這樣的作品;同時也能從優秀作品案例分析中激發出學生對自己作品設計的靈感和創意，從而更加有效的調動學生的積極性。

（二）學生立項

優秀作品賞析后，學生通過上一階段的思考，對自己即將創建的項目進行初期設計。學生將自己的設計思路和創意寫在記事本上，上傳給實訓教師進行點評和指導，實訓教師根據學生的設計思路，其中包括網站的行業定位、人群定位、LOGO設計創意、網頁整體色調搭配、板塊及布局等進行立項前的精準指導。而后學生巧妙地運用Hbuider的一鍵創建Web項目功能，建立自己的站點。

本階段的實訓目的，既是為了實訓教師全面的了解學生的理論知識融入到實訓中時，是什么水平，同時也是為學生在接下來的實戰開發中的思路奠定良好基礎，好的開端即是成功的一半。

（三）教師指導，精準幫扶學生解決難題

在實訓的過程中，實際上是學生不斷強化理論知識的基礎上，提高自己的實際操作能力，那么本階段的重點便在于學生自己上機操作為主，而教師在一旁輔導答疑為輔，在實訓過程中學生總是會遇到很多問題，這些問題涉及到很多方面，例如學生代碼結構凌亂問題可通過HBuilder獨有的一鍵排版功能將代碼結構排列整齊，ctrl+shift+f快捷鍵會實現這個功能，提高學生規整代碼的效率。

從項目的策劃、色調的搭配、素材的搜集再到項目頁面的整體設計布局、創意的加入等等，學生都要自己獨立去完成，在學生開發的過程中，每完成一個重要板塊就要求有相應的注釋說明，這就像寫筆記一樣，有了注釋說明，在以后的開發中才能迅速找到該區域進行修改，而HBuilder中的“快速注釋”功能可以完美適應這一需求，該功能可以自動識別注釋在不同語法當中的用法，只需要在代碼結尾按住“ctrl+/”即可代碼轉換為注釋。

當學生遇到這一類似的問題時，實訓教師進行一對一的指導，輔助學生完成自己的創意。在這種不斷遇到問題、教師指導后解決問題的過程中，學生既鞏固了自己的理論知識，又提高了自己的實際操作能力和水平。在實訓結束后甚至有不少學生會感慨到實訓一周的結果，比學習一個學期的課程學到的知識還要多。因此實訓環節，不但是學生制作網頁的過程，更是學生自我學習，自我提高，自我評價的過程。

同時，實訓的環境也尤為重要，實訓的過程幾乎都是在計算機機房中完成，在計算機機房中，學生實現一人一機操作，每臺計算機均與互聯網相連，使得學生在查找資料、編寫文案、素材收集等方面都方便快捷;學生之間在實訓中的相互交流和學習也非常方便。這也為學生適應今后在實戰崗位上的獨立性打下了基礎。

（四）運用HBuilder完成兼容性和BUG修復，培養學生工匠精神

在學生“完成”作品后，其實并非真正意義上的完成了作品，這只是“半成品”，在這些作品中往往存在很多兼容性問題以及語法上的錯誤，我們將這種錯誤稱之為“BUG”。拿“兼容性”問題來舉例：學生在網頁的實際設計開發中往往會忽略“目標客戶類型”這一至關重要的問題，若目標客戶類型為企事業單位，這一類客戶對瀏覽器的要求并不高，往往是追求瀏覽器的穩定性，那么低版本IE瀏覽器在這一類型客戶群體中占了很大比例，若采用H5、CSS3等語言來設計開發網頁，會出現“兼容性”問題，導致頁面亂碼、布局錯位、頁面崩潰等問題。此時應當加入特定語句來適應瀏覽器，兼顧低版本瀏覽器和高版本瀏覽器，從而解決“兼容性”問題。而HBuilder完美兼容vue.js、Angular.js、Bootstrap、Jquery等主流前端框架，運用這些前端框架來實現目前流行的響應式布局，完美兼容PC端、平板、移動端達到三端互通，目前作者運用HBuilder開發的成品網頁已經在學校招生辦穩定運行。

同時，兼容性的修改和BUG的修復是一項非常枯燥的工作，需要學生結合火狐瀏覽器firebug調試工具查錯，不厭其煩地不斷調試頁面，修改語句，調整布局。而正是這一不斷精益求精、自我完善的過程，使學生的職業專注力得到升華，慢慢的培養了學生的“工匠精神”。

（五）實訓報告和點評

在實訓周期最后一天，學生將作品上傳至教師運用HBuilder架設的Web服務器中，并按照要求編寫實訓報告，每一位學生都有一定的時間來對自己的作品進行講解，其中包括LOGO設計理念、色調搭配思路、結構布局上的技巧、獨特的創意以及兼容性和BUG修復上的心得等等，教師根據學生的項目介紹以及實訓報告質量，來對學生的最終作品進行簡單的點評，對學生在實際開發過程中遇到的問題進行答疑，使學生再一次鞏固了理論知識，同時又間接提高了操作水平。最后，教師再以客戶的角色來驗收項目，進行總體評價。這樣一個過程讓學生在開發實際項目中提高職業能力，培養了他們的工程意識。

五、結束語

在互聯網全面普及的城市中，電子商務持續健康發展，2019年1月1日開始實施的《電子商務法》為電子商務相關從業人員提供法律保障的同時，也對相關從業人員的專業水平有了更高的要求和行業規范。

《商務網頁設計與制作實訓》這一教學環節，把理論知識結合到實踐訓練當中，正是培養我國應用型人才所需要的方式。以學生為本，精益求精，培養學生的“工匠精神”，為電子商務專業以及相似專業的學生在今后的職場中奠定基礎，運用HBuilder等優秀的開源軟件對學生進行教學，更加符合今后學生從事電商行業的行業規范，大大提高了工作效率，也為教師探究今后的教學方法改進上提供了思路。

參考文獻

[1]劉敏智.淺談《網頁設計與制作》課程的實訓教學[J].消費電子商訊，2012（10）：138-138.

[2]馮雪蓮.基于工作過程的《網頁設計與制作》課程改革探析[J].中國電子商務，2012（23）：156-156.

[3]趙小華.淺析《網頁設計與制作》課程的教學方法[J].科技風，2019（4）：77-77.

作者簡介：葉星 1986 12男 漢族 成都 本科 助理工程師 四川工程職業技術學院 電子商務。