新时期高职高专网页美工技术课程的项目化研究

吴海静 曹维祥

摘 要： 随着信息技术的普及，网页已经渗透到人类社会的各行各业，网页美工技术已成为最基本的网络应用技术，要掌握这门技术，首先要掌握一种网页美工技术工具——PHOTOSHOP。本文对网页美工技术课程案例进行研究，考虑到高职高专的应用型，更兼具理论性，从课程中选取三个具有代表性的课程案例加以分析说明。在课程案例中，弱化作业性，强调理论知识，突出项目化；让学生在网页加工制作中学习，在学习中制作。

关键词： 高职高专 网页美工技术课程 项目化研究

当下某些高职高专教育中主要倡导的是更具职业定向的学科和方法，往往忽略原有学科的大部分课程的“古典部分”。自我国经济飞速发展以来，由经济发展衍生的学科专业有许多，例如先后有高尔夫专业、新媒体艺术专业、电子商务专业等，在这些新兴的学科专业当中，实用性和工业性占据了主导位置，这些专业的设置无疑为社会、为国家培养了一批批人才，对学生职业选择的影响深远。

本文根据当下高职高专的知识与技能的方面要求，以课例的形式，从教学目标、能力要求、知识储备和项目训练等方面进行探索，意在培养更具专业性和职业性的学生；通过三个具有代表性的课程案例，让学生自主探究学习，在掌握信息技术能力的基础上，创造工作环境，进行设计，体验职业。

一、海报设计与制作

当下时代的风格和种类，越是清晰易懂、越是简单明快的形状越能吸引消费者的眼光。现代人高速的生活方式，以及某些公司、某些品牌和机构的广告目的，使得抽象又富有表达意义的海报设计油然而生。因此，在海报设计中，最重要的是明确又清晰的“视觉力”的结构。这种富有“视觉力”的结构，就是通过结合广告把图像、文字、版面、图形等元素集合在一起；这里展示的“视觉力”结构的海报设计，是在计算机上进行加工与创造，实现表达广告目的和意图。

（一）教学目标

知识与技能方面，使学生掌握海报设计与制作的方法和步骤，会正确理解海报设计的概念与设计要素等知识。

过程与方法上，我充分利用信息化平台和数字资源，使学生通过自主学习、小组合作探究的方式，提高学习能力。

通过学习，激发学生主动参与实践的兴趣，培养认真仔细的工作态度，践行精益求精的工匠精神。

本节课的教学重点确定为用Photoshop软件中的图层、图像、文字等制作海报的方法和步骤，教学难点为海报设计各个板块的整合与海报设计整体效果的美感。

（二）能力要求

会使用Photoshop cs6网页设计工具制作一张海报；能够熟练进行文字、图像、图层、通道操作，并按要求设置进行电脑操作；熟练掌握海报设计的操作方法，能够根据要求进行简单的海报设计；

（三）知识储备

按照用途分类，海报按大致可以分为商业海报、文化海报、电影海报和公益海报。对各种分类的海报知识进行介绍。

在了解各类型的海报知识之后，学生还需要对平面设计的基本原则进行了解和掌握：

1.重复原则：是指视觉元素在整个作品中重复出现。一类是设计中的某一元素（字体、颜色、图案）进行元素的重复；一类是字体元素的改变，包括字体样式、字体大小或字体行间距的改变，使得海报效果发生变化。

2.对比原则：对比是让各元素之间区别开来，这样可以防止重复原则带来的单调。有重复一定有对比，如果重复是基调，那么对比就是焦点。常见的对比方法有字体的大小对比，线条的粗细对比，色彩的冷暖对比等。

3.关联原则：位置的接近意味着内容的关联，海报设计的内容要遵循关联原则。相关的项目组织在一起不会显得元素四散，杂乱无章。在制作一张海报当中，标题要对应相关文本，图片要响应对应内容，大小层次，关联原则保证了内容传达的有效性。

4.对齐原则：海报中的任何元素都不能随意放置，否则会失去“灵魂”。海报中的设计内容要存在视觉联系。对齐原则是位置相距较远的内容，需要运用辅助元素将不同的内容联系在一起。

（四）项目训练

为某个学院五四大型文艺晚会制作宣传海报1张，尺寸：50X70CM。

二、淘宝网商品详情页制作

淘宝网商品详情页是当代大学生日常生活中最常接触的利用Photoshop软件制作的网页，以此作为实训课例，引导学生学习，有很好的教育意义。学生在浏览淘宝网的商品详情页时，通过对不同的商品详情页进行对比分析；针对不同商品网页的风格进行研究；通过研究发现版式设计通过文字图形的空间组合表达的和谐与美。

（一）教学目标

1.使学生掌握淘宝详情页制作的方法和步骤，会正确理解淘宝详情页的概念与排版设计要素等知识。

2.充分利用信息化平台和数字资源，使学生通过自主学习、小组合作探究的方式，提高学习能力。通过学习，激发学生主动参与实践的兴趣，培养认真仔细的工作态度，从而形成精益求精的工匠精神。

3.学会用Photoshop软件中的图层、图像、文字等制作海报的方法和步骤，淘宝详情页设计的各个部分统一和谐与整体效果有美感。

（二）能力要求

会使用Photoshop cs6网页设计工具设计完成一个产品的淘宝详情页；熟悉进行文字、图像、图层、通道操作，并按要求设置进行电脑操作；熟练掌握淘宝详情页设计的操作方法，根据要求进行简单的网页排版设计。

（三）知识储备

淘宝详情因为重要的商业作用，其作用是为了吸引眼球，以此带来流量转化。吸引眼球的过程中要极力避免视觉疲劳。以下是需要注意的几点：

1.文字不宜閃烁。文字的闪烁具有醒目的作用。在详情中的运用，稍有不慎会给用户一种眼花缭乱的感觉，反而会影响用户访问该网站的其他内容，造成适得其反的影响。

2.文本页面不宜过长。文本的运用可以起到很好的解释说明作用，可以有效介绍产品，突出吸引力，过长的文本会加深视觉疲劳。人们为了阅读这些长文本，不得不使用卷滚条，浪费了用户在网上冲浪的时间。

3.风格忌杂乱。详情页中所有设计元素，包括图像、文字不可风格多样。此外，详情页中的设计风格还要符合网页风格，应坚持对齐原则，让网页中的各类要素风格呼应、协调。这样读者看起来舒服、顺畅，才愿意在该网页停留。

（四）项目训练

为某一产品制作手机版淘宝详情页，并要求尺寸为620px*960px。

三、某个淘宝网店铺的网页制作

电子商务网站领域是以营利为目的的，通过设计对商品或企业进行优化的方式投资回报，淘宝网采用的是这种设计方法。我们给学生展示一些设计精美的淘宝网站，这些淘宝网站需要传达出一些信息，例如“打破常规”“不走寻常路”，不遵循传统标准模式；或是打开网页，看起来并不符合主流审美，而是一些“小众”形式感强的网页，但这些网页极其注重各个元素的组合，如颜色搭配整体协调、图形与图像相匹配、文字处理清晰、精简等，当然可以引导学生观察在使用网站时鼠标在某处悬停状态的效果。我们在讲授时着重于使用PHOTOSHOP软件进行操作。学习那些成熟的、优秀的网页，提高高职高专学生的设计能力，所谓“熟读唐诗三百首，不会作诗也会吟”。我们进行淘宝网页页面设计的目的是让消费者在网站上购物享受此过程，达到欣赏其商品风格的美好视觉体验。

（一）教学目标

1.学会使用PHOTOSHOP软件。

2.了解影响页面整体风格的设计元素，包括经典设计元素和流行元素。这些元素包括：纹理、“徽章”、三维、背景图案、混合字体、几何图形、相似形等。掌握这些元素的使用方法。

3.了解页面布局的几种结构形式，例如“国字”型布局、T型布局、POP全景式布局等；学会针对产品进行设计运用符合其风格的页面布局形式，网页页面布局简洁，板块布局尺寸合适，整体和谐。

4.能清楚地向浏览者传递页面信息，文字清晰具有提示性，浏览者使用起来便捷。网页能够向用户传递某种信息，例如展示出产品、服务、理念或文化。

（二）能力要求

会使用Photoshop cs6网页设计工具制作一个淘宝网页；能够熟悉进行文字、图像、图层、通道操作，并按要求设置进行电脑操作；熟练掌握海报设计的操作方法，根据要求进行简单的海报设计；

（三）知识储备

1.页面内容要新颖。网页内容的选择要不落俗套，重点突出一个“新”字，在设计网站内容时不能照抄别人的内容，要结合自身实际情况创作。在设计网页时，选材尽量做到“少”而“精”，又必须突出“新”。

2.网页内容要易读。网站设计最重要的是设计的网页要易读，首先要做好规划文字与背景颜色的搭配方案。注意文字的字体、大小、色彩及对页面的影响，要符合读者的阅读习惯。

3.善用表格布局。使人一眼就能看出网站重点突出，结构分明。

（四）项目训练

为某一淘宝网店进行网站布局设计，并要求尺寸为1020px*1710px。

在学生进行项目训练时，需要提前构思，按照顺序依次进行，如：首先确定主题，明确主题的基础上进行构思创意，对于产品的海报、详情页或淘宝网页进行整体风格和特色定位，并组织结构。在设计总体方案时要主题鲜明突出，要点明确，使用的配色和图片需要围绕预定的主题；着重表现网页的个性和情趣，突出网站的特点。其次是形式内容方面，灵活运用对比与调和、对称与平衡、节奏与韵律及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

工业进程的加剧让信息化时代科技发展迅速，网页美工技术广泛应用于网络页面设计之中，成为网络页面设计中不可或缺的一部分。现在的网络页面设计当中不仅仅注重单一功能性，更注重网页的美工设计对整个网页界面的主题表达、界面风格及新颖性特点。本文中整合平面设计类知识融入软件学习中，希望通过学科交汇贯通的形式让学生学习更专业化，技能方法更加成熟，更能适应社会的发展。

参考文献：

[1][美]艾斯纳，著.李雁冰，译.学校课程设计与评价[M].北京：教育科学出版社，2008.4.

[2][美]鲁道夫·阿恩海姆.视觉思维：审美视觉心理学[M].成都：四川人民出版社，1998.3.

[3][美]麥克尼尔，著.石华耀，译.网页设计创意书[M].北京：人民邮电出版社，2014.2.

[4]彭澎，郭芹.Photoshop图形图像处理实用教程[M].北京：机械工业出版社，2017.8.