网页制作三剑客技术上的融合

张栋梁

摘要：網络信息化的快速发展，要求相关专业的学生了解网络、网站的一些基础知识。网页制作课程不仅是计算机专业的一门必修课程，在其他相关的专业也设置了本课程，其主要目标是使学生了解网站的构造与相关的基础知识。网页的制作不仅仅是单个软件可以完成的，需要多种不同用处的软件共同配合才能达到理想的效果，才能在美化与优化效果上与时俱进，吸引与留住有此需求的客户。本文结合电子商务专业特点，通过案例分析阐述网页制作过程中“网页制作三剑客”之间的结合。

关键词：网页制作;案例分析;网页制作三剑客;结合

中图分类号：G434        文献标识码：A

文章编号：1009-3044（2019）23-0173-02

开放科学（资源服务）标识码（OSID）：

“网页制作”课程实践性很强，通过案例分析，项目化任务教学法，促使学生不断地在项目实践中掌握网页的基础标签、属性、结构，进而达到熟练掌握基础知识的程度。同时通过模仿成熟网页，借鉴优质网页的设计理念、思维，从而形成个人的设计理念与思维方式。网页设计课程介绍中较为流行“网页制作三剑客”，即Dreamweaver、Firework、Flash。主要讲解如何应用“网页制作三剑客”设计和创建网站，美化与优化网页，使其可以在日新月异，不计其数的网站海洋里，吸引到需求的客户。网页制作不仅仅是单个软件可以完成的，需要多种不同的软件共同配合才能达到理想的效果。就目前市场情景，小型企业占比数据庞大，为减少成本企业分工没有细致化，这就要求企业里的程序员需要具备多面手，即会编程，也会美工，还会排版、摄影等，因此多种不同软件相互之间的结合使用是程序员必备的要求。对网页制作者来说，网页三剑客的相互结合更是必然要求。

1 设计网页（网站）效果图-软件Firework

图像处理软件有很多，其中最为常用的是Photoshop，简称Ps。Photoshop目前是最为流行、功能最为强大的图像处理软件，可以作为提供网页素材的辅助工具，图像处理工具。然而网页整体的设计仍然需要使用firework软件，Firework软件最为显著的功能是矢量图的绘制及切片的使用。

Firework软件的第一个主要功能是设计网页效果图。将firework软件作为一个平台，一个整合平台，里面包括网页的所需资源，即网页图片，视频，文本，导航等，最终在此平台将这些处理过的素材整合成客户需要的样式，即客户要求的网站效果图。将设计好的效果图发给客户，争取客户的意见，根据客户的二次要求进行再次修改，经过多次的沟通与完善最终完成效果设计图。

Firework软件的第二个主要功能是切片。首先通过切片工具可以查看图像信息，以此数据创建网页结构。其次通过切片工具将所需图片切割导出，形成一个个独立的小素材图像，为网页制作中提供所需素材。以下是本文章提供的实例网站的效果设计图：

2 制作网页-软件Dreamweaver

目前国内制作网站的小公司较多，公司的规模决定了分工的细致化，对小公司来说网站制作流程的分工还没有达到细致化，网页制作涉及编程、设计，摄影，排版，动画等操作知识。要求程序员对图像处理，动画制作软件的基本操作要熟悉，这就要求多种软件之间的相互结合使用的频率会增加。网页制作主要使用软件Dreamweaver，辅助软件firework，flash，三种软件完美配合，即网页制作三剑客的结合使用对网页制作者来说是必然的、得心应手的。

Firework软件设计的效果图，Dreamweaver平台作为参考进行编辑，网页制作流程中firework是前提，是参考点。Dreamweaver平台在编辑网页过程中首先注重网页结构，本文章中提供的实例网站的结构概括为上中下模式。在编辑网页过程中，结构与样式表的编辑是一一同步进行的，边编辑边进行调试，结合其他软件处理好的素材，整个网页就这么完美地呈现出来。

3 设计网页动画视频（广告Banner）-软件Flash

Flash软件的突出功能矢量图绘制二维的小容量动画视频，对于网站上的广告是完美选择。通过Firework与Dreamweaver的操作学习，学生可以掌握如何规划设计并建立网页，制作出精美的网站。网站外挂或者内嵌动画广告是目前网站流行形式，这就要求掌握flash软件的操作，解决市场上网站动画需求。当前网站上动画广告一般为手绘动画或图片切换模式动画，或者二者结合效果，这些动画效果只需掌握flash软件的一些基础知识与操作即可实现。基于flash软件的一些重要优点：生成的动画是矢量图动画，清晰，容量小，方便网络传输，对网速的影响比较低，此软件备受网页制作者喜欢。

4 结语

网页制作初学者在选择平台时，网页三剑客是首选。然而专业计算机的学生，与电子商务专业的学生，在学习网页制作的课程上，讲授的难易程度是教师考虑的首要问题。Firework软件、flash软件对学生们来说是比较容易接受的，通过实例讲解，学生跟做，下发任务，学生独立完成，项目任务驱动法在这两种软件上最能立竿见影。Dreamweaver软件是静态网页制作的主要平台，涉及代码编写，然而目前软件提供了很多的界面输入，尽量减少了直接输入代码的难度与枯燥，对初学者来说这种方式更合适，对非计算机专业的学生来说，窗口界面的输入减小了对代码编辑难度。通过大量作品的操练使学生逐渐熟悉、掌握代码，最终可以套用、借用优秀网页实现个人的作品。网页制作的熟练过程是一个需要学习与模仿，借鉴，项目锻炼的过程，利用 “网页制作三剑客”的强大的功能足可以制作出精美的网站。同时在授课中，结合学生的自身情况，对三剑客进行顺序上的精细安排，案例上的细心筛选，最终达到优质教学目标的实现。

参考文献：

[1]传智播客高教产品研发部.网页设计与制作（HTML+CSS） [M].中国铁道出版社，2014（8）.

[2]田华，郝凤枝，王朋娇.基于 BOPPPS 模式的有效的教学设计—— 以《多媒体网页设计》课程为例[J].教育现代化，2017，4（36）：224-227.

[3]李松勤.探讨多媒体专业《网页设计与制作技术》课程的教学改革 [J].科技经济市场，2014（11）：233.

[4]赵春燕.电子商务网站设计与制作  [M].北京大学出版社，2011（4）.

[5]李建忠，牟风瑞，安刚.电子商务网站建设与维护[M].清华大学出版社，2013（10）.

[6]传智播客高教产品研发部.HTML+CSS+JavaScript 网页制作案例教程[M].中国工信出版集团，人民邮电出版社，2015（9）.

[7]赵芸.高校《网页三剑客》教学设计[J].计算机与网络，2009（7）：66～68.

【通联编辑：王力】