江龙

【摘要】通过在中职《静态网页》课程教学中的创新实践，指出当前在静态网页设计教学中存在的不足，点明使用图形图像处理软件来规划网页整体效果图在网页设计中的重要性，并对整个网站建设的流程作简明扼要的描述，坚持网页设计过程始终以培养学生岗位能力为目标。

【关键词】网页 教学 创新

【中图分类号】G71 【文献标识码】A 【文章编号】2095-3089（2017）32-0232-01

众所周知，创新精神和创新能力是当今计算机教师所不能缺乏的基本素质。而我们正处在信息化迅猛发展的时代，如不能及时针对人才需求现状对课程教学作相应的改革创新，必将被时代所淘汰。鉴于此，笔者始终贯彻教学创新这一指导原则开展教育教学。

当前在《静态网页》课程的教学中，大部分的同行还是以基本相同的步骤来完成：首先是前期的策划，然后是定义站点结构，最后使用网页编辑器编辑页面元素形成静态页面。这种教学模式最大一个弊端就是没有从岗位能力出发，忽略了在网页设计中最关键的一个技术环节，也就是规划草图即使用图形图像处理软件来规划页面的整体效果图，从而导致学生学完课程后，真正让他们动手去完成一个完整的静态站点，却无从下手，即使完成，也只是粗糙的半成品。为解决这一问题，笔者大胆的在本课程教学中进行了创新。

创新一：改变单纯的课堂教学模式，构建贴近实际工作岗位的教学环境。

做法是：在教完理论知识的前提下，基于晋江这块民营企业发达的地区，笔者把学生分成若干学习小组，带领他们大胆地走进各类中小企业，主动承担开发企业网站的任务。这样不仅让学生提前体验网页设计岗位工作场景，培养岗位认知，激发岗位热情，也为将来走入职场打下坚实的基础，积累了社会经验。

创新二：改变传统的教学程序，形成以培养学生岗位能力为目标的教学体系。

（一）首先夯实基础，避免后续教学成为空中楼阁。

鉴于Photoshop强大的图形图像处理功能，把这门课开设在网页课之前，并且在网页设计教学中充分利用Photoshop强大的图形图像处理功能。

（二）其次，确定网站主题，进行整体风格的定位设计。指导学生进行任务和用户分析，收集相关站点的素材和资料，了解所建设的网站类型，确定一个大致的风格走向，比如：服装类、食品类等等。不同站点各自的风格肯定是不尽相同的，只有做到“胸中有丘壑”，才能“网页起波澜”。想要营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调，那么必须花一定的时间先去做一些调查和学习是必要的。通过实践，让学生了解所接触的企业网页设计的风格走向，同时也让学生有了拓展的空间并增长了社会阅历。

（三）再者，重点培养学生规划草图。首先，作出草图，勾画出客户想要呈现的东西，千万不能盲目，更不能想当然。针对学生美工功底深浅不一的情况，笔者实行分层次教学，引导学生多上网查看各种风格类型的网站，然后动手勾画网站的草图，看多了，练多了，创作的灵感也就逐渐提升了。有了草图之后，其次规划一张页面的结构图，结构图是一张比草图更为简洁，主要用文字来体现网站的内容。有了这些，整体效果图就有章可循了。针对前面的两点作了充分的准备后，就可着手网页设计工作了。鉴于Photoshop强大的图形图像处理功能，笔者建议同行在教学中还是使用这门软件，并把这门课开设在网页课之前。这样学生一来有图形图像作为基础，二来教师在教学过程中容易把握。

（四）最后，引導学生充分利用Photoshop强大的图形图像处理功能。 目前设计网页运用较为广泛的还是Photoshop软件， Photoshop利用自身在图像处理上的优势，还实现多方面的网络应用。利用图形图像可视化操作程度比较高的特点，进行网页的视觉设计、排版布局，并创建为页面的HTML文件。Photoshop能够完成网站中各种类型的Web图像设计和制作，还包括图像为适于网络发布进行的各项图像优化功作。

创新三：改变教学策略，实现教学目标和岗位能力相统一教学结果。

以往在网页设计教学中，我们过多考虑的是软件的使用，在教学过程中对岗位能力目标要求不大注意，学生学完后往往只是会用软件，但没办法设计一个符合市场要求的网页。所以笔者在教学中改变教学策略，对在用Photoshop规划效果图时应注意的以下几点给予更多训练。

（一）配色。 所谓配色也就是确定网页的主体色以及相关色彩。一些知名的国际国内网站，看是简单，但独到之处也正是配色。如Dior国际网站的香水产品宣传页面，使用金色作为网页的主色调，显得高贵、典雅，烘托出了产品的高格调和高品味。如果该网页使用了蓝色为主色调，虽然也显示出了页面的和谐，但无法表现出产品的内涵，因此让人感觉有些离题，冲淡了网页的主体。既然知道了配色的主导作用，那么我们在教学中就要不断渗透这一关键点，建议在网页课之前开设一些美术基础课。在教学中，引导学生多浏览国内外经典的网站，看到精美作品，即时利用抓图工具保存，去模仿设计师的配色方案。持之以恒，对于配色感到畏难的学生也自然能够吸取他人之长为己用。

（二）设计整体效果图。 对于效果图即网站最终成品的大致轮廓，它设计的好坏也直接决定了网站的形象，因此，这一步应做作为教学的主体内容。开始教学时，千万别只顾教学生网页编辑器的知识，而脱离开效果图的设计，因此在教学的前几周，每周都确定一个主题网页效果图（可把Dreamweaver知识渗透，每周一小部分）。具体的教学思路是这样的：（1）设计前期以模仿优秀站点为主，中期指定素材设计，后期自由创作；（2）遵循从上到下，从左到右的制作原则，有些个性化的网站例外。以设计好的草图和结构图作为依据，进行合理地布局；（3）对于Photoshop工具的熟练应用尤为重要，只要能灵活的运用好该软件的各种工具，就能自如地设计出优美的版面。网页中的很多图形元素往往就是应用适当的配色加上选框具和填充效果就能实现的。当然在确实要制作一些不规则的图形时，钢笔工具的强大功能就得到完美的体现。笔者常让学生用钢笔工具制作一些较为复杂的图形，从而加强了学生制图能力；（4）针对网页的重要的元素，比如Logo、banner，以及某些网页宣传图片，有时要达到一些特殊效果，在Photoshop中就必须使用一些高级技术才能使其更加完善。类似像利用通道技术、蒙版技术，应用滤镜等来处理；（5）效果图制作成功后，利用Photoshop提供的切片工具，合理地切图，最终保存生成HTML网页。

总而言之，要想真正创作出一个完美的网站，不仅要有精湛的技术，还需要有各方面的知识作为补充，如文化修养，美术底蕴，统筹策划等等。上文谈的利用图形图像处理软件来设计规划效果图是重中之重。在教学中应以此为中心，教会学生去学习和接受新的技术和新的设计理念，不断地探索技术与艺术的平衡与结合，时刻以岗位能力的培养为目标，为学生搭建创作的岗位平台，这才是引导学生走向网页设计成功之门的捷径。

参考文献：

[1]刘效春.静态网页设计中存在的问题与解决措施探究[J]. 中国新通信. 2015（23）

[2]刘永超.静态网页设计简要分析[J].计算机光盘软件与应用. 2013（18）

[3]姚绍岩.静态网页制作技术与动态网页制作技术的比较分析[J].信息与电脑（理论版）.2015（04）