叶星　乔毅

摘要：《商务网页设计与制作实训》是电子商务专业重要的实践性教学环节。在实训教师的指导，运用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男 汉族 成都 本科 助理工程师 四川工程职业技术学院 电子商务。