艺术设计专业网页制作课程教—学—做一体化教学方法探讨

张彩虹

摘要：互联网的迅速发展与普及，为人们提供了更方便、快捷的信息交流平台。上网已经成为很多人工作、生活中必不可少的一部分，这主要是由于网页承载了其他任何一种媒介都无法比拟的丰富资源。网页中的标志、图形图像的处理自然变得非常重要。作为有艺术基础的学生，掌握网页制作的基本方法可以拓宽就业面。本文在艺术设计专业网页制作课程中使用教—学—做一体化方法所做阐述。

关键词：网页设计；教学做一体化；教学方法

一、网页制作课程的地位和作用

（一）网页制作课程在生活中的地位和作用

互联网是一个蕴藏着无穷资源的宝库，在资源共享和信息交互方面具有得天独厚的优势，网页正是传递这些资源和信息的重要载体。网页不但可以用于浏览文字、图片、多媒体信息，而且在娱乐、商务等领域都有重要应用（如电子邮件、聊天室、搜索引擎、网上购物、电子政务等）。

（二）网页制作课程在艺术设计专业中的地位和作用

随着时代的进步，设计行业也在飞速的发展中。UI的设计是设计这一大行业中一个比较热潮的行业，因为UI设计师是设计行业中薪酬比较高的（新手设计师），一般刚刚参家UI设计师工作的工资都可以拿到5000左右，一二线城市可能会更高，而且这是个需要大量人才的行业，所以就业前景也是非常好。仅仅这两点就已经对这些刚毕业的设计专业大学生有着很大的诱惑。

而且UI设计这一行业，是一个不会过时和出现泡沫现象的行业。随着时代的发展，手机越来越是我们生活中不可或缺的一部分了。当人们解决了它的一些基础运用（例如：打电话、发信息等）又开始注重它的一些观赏性了（例如：外观、手机软件的美观性等）。而UI设计师则是对手机里的各种软件进行美化的。

想要成为一个优秀的UI设计师，一些最为基础的软件是必须要会的，1.Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。2.Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，作为一款非常好的图片处理工具，Adobe Illustrator广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。而另外一个软件感觉与艺术设计专业关联不大，但是如果你想成为一个优秀的UI设计师，Dreamweaver网页制作软件也是必须要掌握的。

Dreamweaver软件同时也是一个优秀的UI设计师必须掌握的基本软件，因为一个好的设计理念、想法，只有设计师本人最为清楚，让别人去跟随你的想法去设计网页最终跟自己的想法会有一些出入。所以，一个好的UI设计师掌握网页制作软件是走向更高岗位的一个基础。

二、网页制作课程教学方法

网页制作课程的教学方法采用的是教—学—做一体化方法。网页制作课程使用的是Dreamweave cs6软件，网页制作课程在制作网站的过程中可以分别在两个视图下制作，一是在代码视图，用html语言来制作网页，另一种在设计视图制作网页，相比较而言对于艺术专业的学生，第二种更容易掌握，代码视图制作网页是要求学生要掌握一定的单词，在代码视图下制作网页的标记是英文单词要熟练掌握，对于艺术专业的学生来说无疑增加了难度。艺术专业学生的英语底子薄，所以在进行选择时使用的是在设计视图中制作网页。

在整个网页的设计中最主要的部分是网页布局和CSS样式设置。网页布局定位准确且使用的频率高的应归为div布局。 设计视图中的div布局定位相对于代码视图的布局定位，代码视图能准确、方便、快捷的定位到要布局的点。CSS 样式设置主要用来修改属性，CSS 样式在设置属性时，在代码视图和设计视图内都要用英文。虽然在进行学习时选用设计视图，可是对于网页制作中用到的英文，也要求能灵活应用，这就需要老师选择好的教学方法，学生选择好的学习方法。

（一）教师的“教”

教师的“教”，教师的教学方法是否得当，直接决定了学生学习的质量。一个好的教师要懂得用恰当的教学方法来教授学生学习。在艺术专业学生学习网页制作课程教学方法，与计算机专业学生学习网页制作课程教学方法，由于专业的差距、前驱课程学习的差距，导致两个专业不能用同一种教学方法。

艺术设计专业学生在学习网页设计课程时，应该充分发挥艺术设计专业绘画、颜色搭配、网页布局等方面的优势。在教学的过程中，先收集学生前期课程制作的标志和图片，利用他们绘制的标志和图片，制作教学所用案例。利用案例讲授每节课程教学重点、难点，这样可以提高学生的学习积极性，并且在教师教授完成本节课程后，给学生提供展示成就感的学生“教”的教学方法。

（二）学生的“学”

学生的“学”，在教师教授了知识点后，学生的主动学习和被动学习很重要，主动学习不经能听懂老师讲的知识点，还能够灵活应用。会举一反三，为了调动学生学习的积极性，对艺术设计专业的学生采用了有奖有罚的学习办法。奖就是在讲授完本节课的知识点后，有个别的学生带着一起复习，愿意带着复习的学生，可以根据知识点的多少、知识点的难易来设置奖励的分值。注意听的同学和提前预习的同学都会掌握。也就有自信可以挣到应得的分值。

对于不主动学习，也不学的学生采取罚的方法。在执行罚的过程中首先再给予学习的机会，如果能够在另外一个同学做出来之后，能够掌握本节课所学知识点，惩罚是可以取消的，但是对于现在的学生有很多从思想上就是不愿意学习的，这样在给过机会也还是没有把知识点掌握的。就只能采取惩罚了。惩罚也是根据知识点的多少、知识点的难易来确定惩罚的分值。惩罚不是最终目的，教师的最终目的是要调动学生学习的积极性。要把一部分学生被动的学习变成主动地学习。这样才能更好的把这门课学好。

（三）学生的“做”

学生“做”的环节主要是针对在经过了老师的教和学生的学习环节之后，学生起主导作用的练习过程。网页制作这门课程属于操作性比较强的课程，所需要的学生动手能力也比较强，这就需要学生认真的做练习，为了提高学生的练习速度和效率，采取了现场批改作业的形式，并把作业练习批改分成几个层次。程度好的相应的做的快，为了做照顾程度差的同学，让程度好的辅导程度差的，另外根据辅导同学的多少，给程度好的同学加分，也可以充分调动程度好的学生的积极性。

上机练习的内容是把要掌握的知识点通过案例的形式展示出来，这样对于学生在做的过程中不是单个的复习课程的知識点，而是有目的的综合课程章节。学生练习中综合案例，一方面可以加深对知识点的巩固，另一方面能体会到如何将所学知识点融会贯通。

三、教—学—做一体化教学方法的达到的效果

在“教”的环节中利用学生制作的标志和图片，可以教会学生进行课程的融合和提高学习的兴趣。网页制作这门课本身就要结合之前学过的Photoshop和flash等设计类课程，在学生“教”和“学”的环节，让学生由被动的学习变成主动的学习。学生的主动性调动起来学习的动力就有了。兴趣产生了，兴趣是学习的根本，即使艺术专业的学生学习网页设计这门课程也能够掌握。

经过了教师的“教”和“学”生的学环节后，最重要还是把所学的知识能灵活应用。不仅能应用到上课所讲的案例中，而是应用到以后的工作中。这就是教—学—做一体化的最后一个环节，学生通过所学知识可以做出自己的网页，从而可以做出属于自己的有意义的网站。

参考文献：

[1]王春红 王瑾瑜.Dreamweaver Cs6网页设计案例教程[M].机械工业出版社，2014.

[2]库波 汪晓青.HTML与CSS3网页设计.北京理工大学出版社[M]，2013.

[3]邢彩霞 高艳云. Dreamweaver Cs6网页设计与制作案例教程.中国工信出版社[M]，2016.