HBuilder在《商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的實(shí)訓(xùn)教學(xué)中的運(yùn)用

葉星　喬毅

摘要：《商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)》是電子商務(wù)專(zhuān)業(yè)重要的實(shí)踐性教學(xué)環(huán)節(jié)。在實(shí)訓(xùn)教師的指導(dǎo)，運(yùn)用HBuilder軟件對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作綜合訓(xùn)練，以項(xiàng)目開(kāi)發(fā)的標(biāo)準(zhǔn)來(lái)訓(xùn)練學(xué)生，運(yùn)用HBuilder完整的語(yǔ)法提示和代碼輸入法、代碼塊、框架集等功能，提高學(xué)生的商務(wù)網(wǎng)頁(yè)設(shè)計(jì)能力以及開(kāi)發(fā)效率。

關(guān)鍵詞：HBuilder;一鍵;效率;商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作;電子商務(wù)

一、Hbuilder軟件介紹：

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

二、實(shí)訓(xùn)目的：

我國(guó)高職高專(zhuān)院校主要以培養(yǎng)應(yīng)用型人才為主，學(xué)生在校期間除了要學(xué)習(xí)必要的理論知識(shí)以外，還應(yīng)達(dá)到一定的實(shí)用型的技能水平，因此各專(zhuān)業(yè)的實(shí)訓(xùn)教學(xué)環(huán)節(jié)顯得尤為重要?！渡虅?wù)網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)》是我院電子商務(wù)專(zhuān)業(yè)重要的實(shí)踐性教學(xué)環(huán)節(jié)。它是根據(jù)專(zhuān)業(yè)教學(xué)計(jì)劃的要求，在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專(zhuān)業(yè)技能的訓(xùn)練，培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力，是對(duì)《商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作》課程理論與實(shí)踐教學(xué)效果的檢驗(yàn)，也是對(duì)學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過(guò)程。通過(guò)運(yùn)用HBuilder代替其他傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)軟件，例如：Dreamweaver、Front page等，將所見(jiàn)即所得的設(shè)計(jì)方式轉(zhuǎn)變?yōu)檐浖_(kāi)發(fā)的方向，使學(xué)生更加熟悉網(wǎng)頁(yè)結(jié)構(gòu)以及掌握計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)的基本技巧，培養(yǎng)學(xué)生運(yùn)用計(jì)算機(jī)進(jìn)行商務(wù)網(wǎng)頁(yè)設(shè)計(jì)的基本思路和應(yīng)用開(kāi)發(fā)能力，提高學(xué)生的計(jì)算機(jī)文化素質(zhì)，成為高水平應(yīng)用型人才。

三、學(xué)情分析：

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

四、實(shí)訓(xùn)過(guò)程：

（一）案例賞析

在實(shí)訓(xùn)開(kāi)始之前，由實(shí)訓(xùn)教師演示運(yùn)用Hbuider的“一鍵導(dǎo)入站點(diǎn)的”功能，如圖3所示，將提前收集并挑選的一些精美的、具有典型的電商行業(yè)特色的成品網(wǎng)頁(yè)向?qū)W生展示，而后向?qū)W生介紹并分析這些網(wǎng)頁(yè)的色調(diào)搭配思路以及在色調(diào)搭配選擇時(shí)的忌諱、網(wǎng)頁(yè)的整體設(shè)計(jì)理念、結(jié)構(gòu)布局、創(chuàng)意特點(diǎn)等，讓學(xué)生像欣賞一件藝術(shù)品一樣，來(lái)欣賞優(yōu)秀的網(wǎng)頁(yè)案例，同時(shí)也要讓學(xué)生體會(huì)到，一件優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品，是需要傾注很多時(shí)間和心血在里面，才能夠完成的。

本階段的實(shí)訓(xùn)目的，是為了通過(guò)案例分析，來(lái)引導(dǎo)學(xué)生去思考商務(wù)網(wǎng)頁(yè)的美工、布局、樣式都是怎樣來(lái)完成的，自己能否通過(guò)努力來(lái)完成一件這樣的作品;同時(shí)也能從優(yōu)秀作品案例分析中激發(fā)出學(xué)生對(duì)自己作品設(shè)計(jì)的靈感和創(chuàng)意，從而更加有效的調(diào)動(dòng)學(xué)生的積極性。

（二）學(xué)生立項(xiàng)

優(yōu)秀作品賞析后，學(xué)生通過(guò)上一階段的思考，對(duì)自己即將創(chuàng)建的項(xiàng)目進(jìn)行初期設(shè)計(jì)。學(xué)生將自己的設(shè)計(jì)思路和創(chuàng)意寫(xiě)在記事本上，上傳給實(shí)訓(xùn)教師進(jìn)行點(diǎn)評(píng)和指導(dǎo)，實(shí)訓(xùn)教師根據(jù)學(xué)生的設(shè)計(jì)思路，其中包括網(wǎng)站的行業(yè)定位、人群定位、LOGO設(shè)計(jì)創(chuàng)意、網(wǎng)頁(yè)整體色調(diào)搭配、板塊及布局等進(jìn)行立項(xiàng)前的精準(zhǔn)指導(dǎo)。而后學(xué)生巧妙地運(yùn)用Hbuider的一鍵創(chuàng)建Web項(xiàng)目功能，建立自己的站點(diǎn)。

本階段的實(shí)訓(xùn)目的，既是為了實(shí)訓(xùn)教師全面的了解學(xué)生的理論知識(shí)融入到實(shí)訓(xùn)中時(shí)，是什么水平，同時(shí)也是為學(xué)生在接下來(lái)的實(shí)戰(zhàn)開(kāi)發(fā)中的思路奠定良好基礎(chǔ)，好的開(kāi)端即是成功的一半。

（三）教師指導(dǎo)，精準(zhǔn)幫扶學(xué)生解決難題

在實(shí)訓(xùn)的過(guò)程中，實(shí)際上是學(xué)生不斷強(qiáng)化理論知識(shí)的基礎(chǔ)上，提高自己的實(shí)際操作能力，那么本階段的重點(diǎn)便在于學(xué)生自己上機(jī)操作為主，而教師在一旁輔導(dǎo)答疑為輔，在實(shí)訓(xùn)過(guò)程中學(xué)生總是會(huì)遇到很多問(wèn)題，這些問(wèn)題涉及到很多方面，例如學(xué)生代碼結(jié)構(gòu)凌亂問(wèn)題可通過(guò)HBuilder獨(dú)有的一鍵排版功能將代碼結(jié)構(gòu)排列整齊，ctrl+shift+f快捷鍵會(huì)實(shí)現(xiàn)這個(gè)功能，提高學(xué)生規(guī)整代碼的效率。

從項(xiàng)目的策劃、色調(diào)的搭配、素材的搜集再到項(xiàng)目頁(yè)面的整體設(shè)計(jì)布局、創(chuàng)意的加入等等，學(xué)生都要自己獨(dú)立去完成，在學(xué)生開(kāi)發(fā)的過(guò)程中，每完成一個(gè)重要板塊就要求有相應(yīng)的注釋說(shuō)明，這就像寫(xiě)筆記一樣，有了注釋說(shuō)明，在以后的開(kāi)發(fā)中才能迅速找到該區(qū)域進(jìn)行修改，而HBuilder中的“快速注釋”功能可以完美適應(yīng)這一需求，該功能可以自動(dòng)識(shí)別注釋在不同語(yǔ)法當(dāng)中的用法，只需要在代碼結(jié)尾按住“ctrl+/”即可代碼轉(zhuǎn)換為注釋。

當(dāng)學(xué)生遇到這一類(lèi)似的問(wèn)題時(shí)，實(shí)訓(xùn)教師進(jìn)行一對(duì)一的指導(dǎo)，輔助學(xué)生完成自己的創(chuàng)意。在這種不斷遇到問(wèn)題、教師指導(dǎo)后解決問(wèn)題的過(guò)程中，學(xué)生既鞏固了自己的理論知識(shí)，又提高了自己的實(shí)際操作能力和水平。在實(shí)訓(xùn)結(jié)束后甚至有不少學(xué)生會(huì)感慨到實(shí)訓(xùn)一周的結(jié)果，比學(xué)習(xí)一個(gè)學(xué)期的課程學(xué)到的知識(shí)還要多。因此實(shí)訓(xùn)環(huán)節(jié)，不但是學(xué)生制作網(wǎng)頁(yè)的過(guò)程，更是學(xué)生自我學(xué)習(xí)，自我提高，自我評(píng)價(jià)的過(guò)程。

同時(shí)，實(shí)訓(xùn)的環(huán)境也尤為重要，實(shí)訓(xùn)的過(guò)程幾乎都是在計(jì)算機(jī)機(jī)房中完成，在計(jì)算機(jī)機(jī)房中，學(xué)生實(shí)現(xiàn)一人一機(jī)操作，每臺(tái)計(jì)算機(jī)均與互聯(lián)網(wǎng)相連，使得學(xué)生在查找資料、編寫(xiě)文案、素材收集等方面都方便快捷;學(xué)生之間在實(shí)訓(xùn)中的相互交流和學(xué)習(xí)也非常方便。這也為學(xué)生適應(yīng)今后在實(shí)戰(zhàn)崗位上的獨(dú)立性打下了基礎(chǔ)。

（四）運(yùn)用HBuilder完成兼容性和BUG修復(fù)，培養(yǎng)學(xué)生工匠精神

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

同時(shí)，兼容性的修改和BUG的修復(fù)是一項(xiàng)非常枯燥的工作，需要學(xué)生結(jié)合火狐瀏覽器firebug調(diào)試工具查錯(cuò)，不厭其煩地不斷調(diào)試頁(yè)面，修改語(yǔ)句，調(diào)整布局。而正是這一不斷精益求精、自我完善的過(guò)程，使學(xué)生的職業(yè)專(zhuān)注力得到升華，慢慢的培養(yǎng)了學(xué)生的“工匠精神”。

（五）實(shí)訓(xùn)報(bào)告和點(diǎn)評(píng)

在實(shí)訓(xùn)周期最后一天，學(xué)生將作品上傳至教師運(yùn)用HBuilder架設(shè)的Web服務(wù)器中，并按照要求編寫(xiě)實(shí)訓(xùn)報(bào)告，每一位學(xué)生都有一定的時(shí)間來(lái)對(duì)自己的作品進(jìn)行講解，其中包括LOGO設(shè)計(jì)理念、色調(diào)搭配思路、結(jié)構(gòu)布局上的技巧、獨(dú)特的創(chuàng)意以及兼容性和BUG修復(fù)上的心得等等，教師根據(jù)學(xué)生的項(xiàng)目介紹以及實(shí)訓(xùn)報(bào)告質(zhì)量，來(lái)對(duì)學(xué)生的最終作品進(jìn)行簡(jiǎn)單的點(diǎn)評(píng)，對(duì)學(xué)生在實(shí)際開(kāi)發(fā)過(guò)程中遇到的問(wèn)題進(jìn)行答疑，使學(xué)生再一次鞏固了理論知識(shí)，同時(shí)又間接提高了操作水平。最后，教師再以客戶(hù)的角色來(lái)驗(yàn)收項(xiàng)目，進(jìn)行總體評(píng)價(jià)。這樣一個(gè)過(guò)程讓學(xué)生在開(kāi)發(fā)實(shí)際項(xiàng)目中提高職業(yè)能力，培養(yǎng)了他們的工程意識(shí)。

五、結(jié)束語(yǔ)

在互聯(lián)網(wǎng)全面普及的城市中，電子商務(wù)持續(xù)健康發(fā)展，2019年1月1日開(kāi)始實(shí)施的《電子商務(wù)法》為電子商務(wù)相關(guān)從業(yè)人員提供法律保障的同時(shí)，也對(duì)相關(guān)從業(yè)人員的專(zhuān)業(yè)水平有了更高的要求和行業(yè)規(guī)范。

《商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)》這一教學(xué)環(huán)節(jié)，把理論知識(shí)結(jié)合到實(shí)踐訓(xùn)練當(dāng)中，正是培養(yǎng)我國(guó)應(yīng)用型人才所需要的方式。以學(xué)生為本，精益求精，培養(yǎng)學(xué)生的“工匠精神”，為電子商務(wù)專(zhuān)業(yè)以及相似專(zhuān)業(yè)的學(xué)生在今后的職場(chǎng)中奠定基礎(chǔ)，運(yùn)用HBuilder等優(yōu)秀的開(kāi)源軟件對(duì)學(xué)生進(jìn)行教學(xué)，更加符合今后學(xué)生從事電商行業(yè)的行業(yè)規(guī)范，大大提高了工作效率，也為教師探究今后的教學(xué)方法改進(jìn)上提供了思路。

參考文獻(xiàn)

[1]劉敏智.淺談《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的實(shí)訓(xùn)教學(xué)[J].消費(fèi)電子商訊，2012（10）：138-138.

[2]馮雪蓮.基于工作過(guò)程的《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程改革探析[J].中國(guó)電子商務(wù)，2012（23）：156-156.

[3]趙小華.淺析《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的教學(xué)方法[J].科技風(fēng)，2019（4）：77-77.

作者簡(jiǎn)介：葉星 1986 12男 漢族 成都 本科 助理工程師 四川工程職業(yè)技術(shù)學(xué)院 電子商務(wù)。