视觉传达课程改革网页设计论文范文

【摘要】随着网络信息技术的发展，网页设计等计算机相关课程不仅成为艺术设计专业的必修课，还被放在相当重要的位置。文章以视觉传达设计专业的网页设计课程为切入点，分析旧式课程的缺憾及其应对措施，提出新形势下的课程设计及其讲授方案：充分考虑艺术设计专业学生的特点，全面应对学生需求，提升学生逻辑思维能力。

【关键词】视觉传达设计;网页设计;课程改革

2011年艺术学升格为新的门类，有效促进了设计学科的发展，其下8个二级学科除了艺术设计学专业之外，其余如视觉传达设计专业（下文简称为“视传”）等专业，均侧重以理论为基础的实践型人才培育。而近年来，随着网络和信息技术逐渐渗透到社会经济生活的方方面面，设计领域也受到巨大影响，毕竟当代设计就是工业化、信息化的产物[1]。上述实践型艺术设计专业纷纷开设如网页设计、交互设计等相关课程，既满足学生知识技能提升的渴望，也应对市场和职业化需求。因此，探讨此类课程的教学思路和内容设计，成为非常迫切而重要的任务。

一、现存问题及分析

本文以视传专业的网页设计课程作为切入点，但结论对于其他应用实践型艺术设计专业同样适用。很多文献都分析过艺术设计类专业中的网页设计课程的具体情况[2][3]，大体来说，此课程一方面涉及较多编程知识（HTML+CSS+JavaScript）；另一方面，则需要良好的逻辑思维能力（网页的逻辑结构等）。一般来说，视传专业的生源大多来自艺考生，他们较之其他普通高考生，在计算机方面的知识、技能和思维模式处于较为薄弱的境况，而入学之后也不接触数学或非普及性质的计算机类课程。作为少数特例之一，浙江大学曾在艺术设计类专业中将计算机编程类课程设置为必修课，但由于通过率实在过低而且学生多有怨言，因此从2016级开始取消。因此，目前的网页设计课程存在三个亟待解决的问题。第一，虽然已有学者意识到网页设计与平面设计的联系[4]，但很多开设在视觉传达设计专业的网页设计课程还是直接照搬计算机专业的课程教学模式、内容、方法，这直接导致课程极为技术化。视传学生即便不产生厌学逃避情绪，也难以跟上教程进度。所以学校必须专门根据视传学生的特点进行课程建设，才能让学生愿意学、可以学，并学有所成。第二，传统的网页设计课程往往将重点全部放在各种技术细节上，没有充分强调网页设计的逻辑思维模式，即网页标记语言的“形式与内容相分离”原则和网页的DOM结构特性等，视传学生无法从本质意义上获得对网页设计的总体认识和深入了解。因此，要明确提出并且通过各种方式重复强调上述思维模式，并安排大量练习以巩固认知。第三，传统的网页设计课程虽然并未忽略网页设计的审美，却将之放在次要位置。实际上，视传作为艺术设计领域中的一员，对审美强调尤甚，艺术设计领域的每一门课中，教师最重要的任务之一就是让学生认识到美，本课程也不应例外。

二、新的课程设计原则

综观课程始终，新的网页设计课程设计方案应遵循如下原则：第一，强调视觉设计的重要性，让视传学生从感性上存有喜爱和欣赏之情，认同这门技术性较强的课程与其专业的互通性和一致性，有自发的动力去完成课堂和课外作业。第二，以案例式教学为核心的团队合作，不采用“参考手册式教学”，即那种将知识点从头到尾罗列至尽的讲法，让学生反感和疲倦。应使用案例法引入知识技能点集群，并采取团队合作方式完成。[5][6]第三，强调思维模式的培养，但并非钻入技术琐碎细节的牛角尖之中。思维模式，尤其与数学逻辑思维相关的思维模式，是无法简单复制粘贴的。若能在教师的指引下于课堂上培养，则功莫大焉。第四，不断重复重要的技术知识点，即将重点、要点重复讲授、重复练习。在理工科的教学设计中，教师往往是避免这一点的，一是浪费时间精力，二来学生也不需要——他们举一反三的能力相对比较强。但这个原则对于视传学生非常重要，考虑到其薄弱的计算机基础，只有这样做才能落实教学内容。第五，将本课程与视传专业的其他专业课程相结合，使学生把握网页设计知识技能在其整个知识技能体系中的位置和相互关系，并借助其他专业课的所学所知，完成本课程的作业要求[7]。下面笔者以16次课、每次课3学时为例，简要阐述具体教学内容。第1次课：网页设计的现状与设计审美，通过精彩实例激发学生兴趣；书写第一个简单网页；网页设计的“内容与形式分离”，用海报设计为例探讨异同。第2次课：基本的HTML网页标签；完成一个简单案例，了解CSS的一般规则，并从视觉设计角度进行评价。第3次课：重复关于网页编程的基本要点；借助一个新闻列表网页案例，了解网页DOM结构的含义，分析DIV和SPAN这两个逻辑标签的用途。第4次课：初步认识CSS的盒子模型；完善新闻列表网页案例，获得两个不同的视觉效果；初步认识网页定位的概念。第5次课：重复网页设计思路和原则；了解BLOCK和INLINE元素的意义，用一种定位方式完成“工字形”网页案例。第6次课：用另外两种定位方式继续完成“工字形”网页案例，总结三种定位方式；学生完成“圣杯形”网页案例。第7次课：学习CSS选择器的第一部分内容；在分析过程中重复了解和掌握网页DOM。第8次课：学习CSS选择器的第二部分内容；学生自行设计视觉效果，提交新作品。第9次课：重复认识HTML的基本知识，学习网页表单；学生完成表单案例，初步体验JavaScript。第10次课：重复CSS知识点，对表单案例进行视觉美化；初步学习JavaScript的基本知识点。第11次课：重复HTML+CSS的基本要点，学生自行拟定一个小型网站（3至5个页面）的主题和视觉设计。第12次课：在上次课基础上，介绍第三方JavaScript库并予以应用。第13次课：重复HTML+CSS+JavaScript设计理念，介绍和应用第三方框架。第14次课：重点讲授和帮助学生规划、修改网页视觉设计稿，充分利用其他专业课相关技能，获得有一定专业水准的设计方案。第15次课：整合并重复课程前期知识要点，在第三方框架和第三方库的基础上进行中型网站建设，包括结构设计、视觉设计和代码设计。第16次课：针对所得网站，学生团队相互评价，教师评价，同时修改和完善；初步介绍网站的运行和维护，初步介绍迭代设计策略及其实施，准备迎接交互设计课程。

三、总结和讨论

比较可知，本文提出的网页设计课程改革方案，与大部分传统课程设计都有较大差别，与一些创新性较强的课程改革方案也不尽相同[8]。课程设计并不遵循已有惯例，将教学要点以阶梯上升式的重复节奏，安排在整个教学过程中，并处处体现出强调视觉设计和逻辑思维模式这两个原则，还将案例式教学渗透到每一环节。通过这一门常规课时数的课程，视传专业的学生便已能从零基础出发，充分了解网页设计与平面设计的异同，并在此基础上规划、设计和编写从简单到中等复杂程度的网页、网站，不仅完成了教学目标，而且能持有一种主动的、探索的心态去面对原本令人畏惧的计算机技术世界，结合个人所长继续学习。在此，本文在褒义上使用“眼高手低”来总结网页设计背后的教学思维：眼界必须高，要在一开始意识到宏观抽象层面的“网页”到底是什么、网页逻辑结构是什么、网页设计又是什么，给予学生开阔的视野；动手可以低，因为网页设计所涉及的编程知识，其实在本课程层面上并不需要严格地识记背诵，对于需要完成的案例也不需有太高要求，点到为止——毕竟往后还有机会再做深入，而且网上有海量的资料可供查询或直接使用，但倘若触发了学生对计算机技术的逃避和抵触心态，就得不偿失了。这个观点，其实同样适用于各门设置在艺术设计类专业中的计算机和网络技术相关课程。当然，其中的不足偏颇之处，还有待教师同行进一步切磋探讨。

参考文献：

[2]段芸.艺术设计专业《网页设计》课程实践研究[D].沈阳师范大学，2013.

[3]李霞.计算机网页设计课程教学模式的改革研究[J].信息与电脑（理论版），2018（1）.

[4]郑丹青.项目教学法在动态网页设计课程中的教学应用[J].中央民族大学学报（自然科学版），2014（2）.

[5]张家军.论案例教学的本质与特点[J].中国教育学刊，2004（1）.

[6]马松.基于案例教学在计算机网页设计教学中的应用[J].亚太教育，2015（25）.

[7]朱松岩.现代网页设计与印刷类平面设计比较研究[D].苏州大学，2006.

[8]薛辉，杨小锋.《网页制作》课程“精讲热练”教学模式的探索与设计[J].电脑知识与技术，2015（31）.

作者：刘国柱 单位：浙江大学人文学院讲师