《网页设计与制作》课程教学探究
2021-11-27郑晓利
郑晓利
（西安培华学院，陕西 西安 710125）
一、引言
近年来，随着计算机技术的发展，毋庸置疑互联网已然成为人们获取信息的重要来源，网页也成为信息传播的重要途径之一。因此在现在的高等教育中，《网页设计与制作》已经不再仅仅是计算机相关专业的专属课程，同时也是很多专业的必修课，比如说数字媒体技术专业、网络与新媒体专业、电子商务专业等。那么对于传媒类的学生来说，网络信息的搜集、处理及发布是基本技能，而网页设计与制作是信息发布的基础［1］。
网页与网站密不可分，网站属于互联网上用于展示特定内容的相关的网页的集合，而网页是网站当中的一页，那么一个网站当中的网页是通过超链接的方式被组织在一起的。
网页作为网站中用于承载信息的页面，它的设计与制作对于网站来说至关重要［2］。比如说网站的首页，它承载了一个网站中最重要的内容展示。首页作为网站的门面，是给予用户第一印象的核心页面，也是品牌形象呈现的窗口。网页设计与制作，顾名思义，我们可以分为两个步骤：先设计，再制作。那么前期需要对市场情况进行调研、对用户的需求进行分析等等。在综合分析的基础上，首先对网页进行设计，制作出网页的效果图，甚至可以演示交互的网站原型，然后根据用户的反馈，对效果图或者网站原型进行调整。然后以效果图或者网站原型为基准，制作出美观实用的网页。
《网页设计与制作》这门课程涉及网页制作过程中的3项关键的技术，包括HTML、CSS、JavaScript，所以它与计算机密切相关，涉及计算机编程，另外专业名词、语法较多，比较复杂，特别是对于非计算机专业的学生来说，可能平时接触这个方面会比较少一些，所以学习理解起来也会一定的困难［3］。由于课程的目的就是要制作出来实实在在的网页，所以这门课程具有很强的实践性，编程在所难免。很多学生一听到编程就很容易产生胆怯的心理，因此通过课程教学去引导尤为重要。
二、网页设计
随着web技术的发展，网站开发被分成很多个部分，不同的人员来负责某一个部分。比如说网站架构师，首先按照用户的需求将网站的整个架构设计出来，比如说网站要包括登录页面、首页，网站根据功能可以划分成很多版块，不同版块负责不同的功能，当然每个版块下面可能又包含一些网页。这个就是网站架构师的所负责的工作。那么有了网站的整体结构之后，由网页美工人员将每个页面设计出来一个效果图，那么这个效果图就类似于我们要装修，装修公司会给我们出一个装修的效果图是一样的道理。这个效果图要得到用户的确认。那么施工人员才能按照效果图的效果来进行施工。那么对于网页来说，当美工人员出了效果图之后，网页制作人员将效果图转换成代码，也就是通过编写代码的方式形成一个个的网页文件，而这些网页文件就是可以被浏览器解析和识别的网页文件，这样用户可以通过浏览器浏览到整个网页了。
从整个网站开发的流程来看，我们可以知道网页设计对于网站开发至关重要。比如说通过设计效果图，我们能够更快更好的展示网页最终的效果，以及分析网页结构布局是否合理，那么用户通过效果图也能够直观地看到与理想效果的偏差，从而反馈给开发者。通过效果图的最终确认就可以更好地把控网页最终要实现的目标。这样就可以大大减小网页制作的工作量。
有时候为了看到整个网站的雏形，我们还可以通过一些软件设计出整个网站系统的原型，通过产品原型，我们不仅能够直观地观察各个网页的效果，而且能够发现网页之间的超链接跳转及联系，实现交互式的效果。
（一）效果图设计
在网页制作之前，我们首先要分析网页要展示的内容以及实现的功能，明确网页的目标和需求，完成网页的构思，最好制作出网页效果图。制作效果图最常用的软件就是photoshop。
明确了目标之后，我们首先围绕目标收集素材，比如说文字、图像、动画、音视频等等。然后进行网页规划，比如说网页的结构、颜色搭配、页面排版布局等，从而对网站的整体风格做出定位，规划网页结构。最后我们就可以着手效果图的设计了，比如我们可以选择photoshop软件，基于实现目标与网页规划绘制出来一个网页的效果图。
对于效果图的设计，要求设计人员掌握一些色彩的基本知识以及网页色彩搭配的原理。比如网页色彩搭配中，要善用单色、对比色、邻近色和同类色；网页要有与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求；色彩要和网站的内容、文化氛围相符合，以便更好地突出网站的特色；网站配色的时候，尽量将颜色控制在三种以内，以免产生网页凌乱的感觉。另外网页的设计也要适应大众审美、紧跟现代设计潮流，比如当前比较流行的扁平化设计、全屏网页设计等。
（二）原型设计
网站与网页密不可分，如果我们要设计一个网站的话，那么我们不得不考虑各个网页之间的联系以及它的运作流程。实际上绝大多数的客户本身并不懂得设计知识，也不懂得编程知识，那么如果我们想要与用户实现快速高效的沟通，就必须设计出一个网站的雏形，这就是原型。
原型可以展示出网站框架或者说是模型，让他们明白外观和运作的机制，一个可交互的原型基本上能够像最终完成的产品那样运行。你可以对它进行操作，原型会给予相应的反馈，使用者可以随之明白它的运作方式。实际上原型会让开发更加容易，当网页设计师搞定一个行得通的原型之后，开发人员能够在此基础上拿出更加完善的代码实现方案。当设计和开发流程中有了原型之后，将会节省很多时间，降低成本。
下面介绍两款用于制作原型的软件，第一款软件是AxureRP，它能让你快速创建应用软件和基于Web的流程图、原型页面、交互页面等，是一款功能十分强大且容易上手的软件。第二款软件是墨刀，它的功能比较简洁、上手简单，制作快速、浏览文件比较方便，主要定位是App原型的快速设计。
三、网页制作
（一）明确主题
一般情况下，在课程设计中，我们都是选定一个主题来制作网页，那么围绕这个主题，学生就可以发挥自己的想象来设计效果图了。对于传媒专业的学生而言，他们已经有了一些软件的基础，比如说photoshop、AI等软件在其他的课程中有过介绍，所以在这个方面它们有一定的优势，通过适当的引导可以激发他们学习的兴趣。
在选择主题的时候，老师可以适当地融入思政元素。通过选择合适的主题来激发学生的学习兴趣，比如让学生设计并制作红色景点旅游的网页，学生在掌握专业知识的同时，还能够去深入了解、挖掘历史，感受中华文化与深厚的人文底蕴，汲取优秀的传统文化内涵，促进中华文化传承发展。再比如诗词鉴赏网页的主题，学生在完成项目的过程中，必然会去查找、学习古诗词，这样不仅可以提高他们的文学素养和表达能力，弘扬中华优秀传统文化，而且可以让学生更好掌握专业知识。因此根据课程性质和教学目标适当的融入诸如团队意识、创新精神、珍惜时间、社会主义核心价值观之类的思政元素，从而让学生在以后的学习工作中能够更好地传播、传递正能量。
（二）制作技巧
有了效果图或者原型之后，我们就可以开始真正的网页制作了，这个时候我们可以采用WBS任务分解的原则，通过分析效果图将网页划分为若干个模块，根据所学专业知识先将网页的整个框架搭建出来，也就是将网页划分成若干个区域。然后我们逐个区域从上到下、从左往右来制作。对于比较复杂的区域内容我们把它作为一个新的任务进一步向下分解，直至所有的网页内容可以对应到用所学知识来实现为止。
比如说通过分析网页效果图，网页大致被分为5个模块，那么我们就可以通过HTML中标签来表示文字，然后通过CSS我们可以控制图片和文字的位置。那么每个部分都可以通过这样的方式进行分解、编码完成。这样我们通过将一个大任务逐层细化，分解成一些简单的小任务，可以让学生完成起来更容易。
在制作的过程中，学生必须要有一定的知识储备。首先要求学生掌握一些常用的HTML标签，通过标签我们就可以将网页的内容书写出来，然后通过CSS控制网页布局以及样式的设定，最后通过JavaScript实现网页的交互。在制作的过程中，我们采用理论讲解、演示结合实践的方式，边学边做，将所学及时转化为成果。并且一定要引导学生每完成一部分的代码，都要用浏览器查看效果，这样不仅可以帮助我们及时发现问题去解决，而且可以提升学生的自信心。如果堆积很多问题，这个时候解决起来就没那么容易，学生看到自己做的网页效果较差往往让他们很有挫败感，甚至有可能失去兴趣、知难而退。
四、总结
《网页设计与制作》这门课程具有较强的实践性，能够将所学的知识转化为实实在在的成果，学生往往感觉很有成就感，能够大大激发他们学习的积极性［4］。我们通过理论讲解、案例、项目实践的方式让学生对网页设计与制作的过程及涉及的关键技术逐步深入，并在此基础上对案例进行升级、扩展，层层深入，师生互动，让每个学生都参与、都动手操作，将知识用于实践，并及时总结和引申来激发学生的探索和创新意识。从而让学生爱上学习，爱上网页设计与制作，变“要我学”为“我要学”！
