网页设计制作的一般流程

< 在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件，就能搞好网页设计了。

其实网页设计是一个感性思考与理性分析相结合的复杂过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西，并非在软件应用上，而是在我们对网页设计理解以及设计制作水平上，在于我们自身美感以及对页面把握上。

首先，我们要弄清楚网页设计的任务。

一、设计的任务

设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。

第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。然而就现状上来看，这类网站有粗制滥造嫌疑。

第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点，那就是客户的要求，它也属于设计的任务。

明确了设计的任务之后，接下来就是要想如何完成整个任务了。

二、设计的实现

设计的实现可以分为两个部分。第一部分为站点规划及草图绘制，这一部分可以在纸上完成。第二部分为网页制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统报刊杂志来编辑，这里面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件。当然，它应该能满足设计者的要求。笔者常用的软件是Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready，这些都是很不错的软件。

接下来我们要做的就是通过软件的使用，将设计蓝图变为现实，最终集成一般是在Dreamweaver里完成的。虽然在草图上，我们定出了页面大体轮廓，但是灵感一般都是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作过程中，我们会碰到许多问题，其中最敏感的莫过于页面颜色了。

三、色彩的运用

色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。

我们知道，颜色是光折射产生的，红、黄、蓝是三原色，其它色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际意义，和不同颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。

但颜色的使用并没有一定法则，如果一定要用某个法则去套，效果只会适得其反。经验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。

四、造型的组合

在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。

通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。　　我们已经了解了网站的诉求风格，随之，您要了解的是建立网站的目的：建立一个行之有效的营销性的网站决不能马马虎虎，草率行事，随便准备点资料，找一些象征性的图片，一揽子塞给专业公司，过个不长时间网站就OK了，这是绝对的错误！也许您得知同行企业已纷纷建网，并取得了一定的收效；也许您是被网络公司业务员再三的劝告，才准备投资建立网站，提醒您注意，必须在一开始就明确：您能够利用网站做什么？通过网站，您能够为访问者或顾客提供什么，或者说你给消费者带来了什么利益？然后在问问自己能够从中获得什么利益？

　　这里，提醒您注意的一点是，文字资料最好找专人负责整理，最好是熟悉市场营销并有一定文字组织能力的人，他们能够站在企业、市场和消费者的多角度考虑文字的组织方式。我的工作体会是企业在提供资料时常常是基于企业宣传手册、彩页、各种报告、技术资料，我想说的是，这些资料往往技术性太强或一味地站在企业角度：我有多么悠久的历史、技术先进、荣誉称号，但缺乏站在客户角度考虑问题。当然，这些都是很好的资料，但建议您最好找专人整理一下。

　　下面将网站具有共性的功能展示给大家，您可以根据需要，选择适合自己的方式组织资料。

　　1、发布信息
　　组建企业营销网站，可以把企业信息和产品信息推到网上，以获取更多的贸易机会和市场竞争力，这是企业走近电子商务的第一步。您在筹集资料及以后的维护中要注意，这是一个增加企业营销渠道的方式。 您可以利用Internet最省钱、最有效地向外界提供企业的相关信息，以服务顾客。通过Internet，及时提供企业的最新消息，如新产品开发、股票价格、经营情形等。您还可以将Internet作为销售辅助工具，随时随地给处于第一线的销售人员提供各种即时性的企业信息，以支援销售活动并与销售人员随时保持沟通联系，降低市场失误，避免市场损失。
　　另外，在收集企业信息时要确定您的目标访问者，要清楚别人访问您的站点的理由，也就是要考虑这些目标访问者的需求问题，只有有针对性地提供网站信息内容，才能更好地吸引访问者。如果访问者关心售后服务甚于产品价格时，网站上就应该更多强调售后服务的内容。

　　2、树立企业形象，展示或提高企业的竞争力
　　Internet最初始层面的作用就是展示企业形象，就象利用各种传统媒体发布的企业形象宣传广告，所不同的是费用低廉、有效时间长、速度快、更新便捷，仔细考虑您的竞争优势在哪里，如企业是否获得过什么奖励、产品的突出优点、客户服务的优势等等，认真对待这项工作，多准备一些相关的资料，并且要了解为什么访问者会到您的站点来而不是去您的竞争者的站点，此时，应该对竞争者的站点进行比较细致的分析，看看他们都提供了一些什么样的内容，针对的访问对象和我们有什么不同等等，通过这样的分析，就能更加清楚自己的优点和不足，从而做到扬长避短。实际上，对竞争者站点的分析应该贯穿整个企业站点的建设过程之中，通过全面的分析从而吸取他们的优点，避免他们的短处。因此，仅考虑“我的品牌与竞争者的差异”已不再足够，还必须问一问自己：“我的网站与竞争者有那些差异？”努力收集本企业的相关资料，将之投放到互联网，于无形中塑造企业形象，提高企业知名度，一定能为您赢得更多的客户和潜在客户。

　　3、加强客户服务
　　客户服务的重要性已经为众多企业认识到，目前市场竞争的激烈性导致产品的差异迅速缩小，既而售前、售后服务的个性化日益突出，各大企业都在着力加强这方面的宣传力度，网站是一个交互性极强、反应迅速的媒体，通过网站搜集消费者的信息及反馈，有助于加强客户服务的质量，从而为企业赢得更多的客户，创造更多的效益。如果您的企业侧重服务，或许，您应该根据自己企业的特点为自己的服务定义一种网络营销风格，并在网站建设中努力营造这种风格，而且，如果您确实能够做到保障客户的利益，好好整理一下这方面的资料，将各种措施展示出来，它会给顾客在互联网这个虚拟的空间留下一个好印象。

　　4、展示产品或技术优势
　　在目前竞争激烈的市场中，除非一个大型公司具有技术垄断或产品生产优势，一般的中、小型公司可能很难挖掘这方面的优势，不要紧，互联网最大的特点就是她的开放性和跨地域性，开放性决定了互联网信息的共享，这一特点为中小企业赢得了与大企业相抗衡的可能性：通过互联网的信息资源共享，中小企业可以获得对现代企业至关重要而又以常规方式无力收集的市场信息；跨地域性使企业营销突破了传统市场的地域限制，企业的发展方向和市场规模，因此，“互联网使中小企业得以与大企业在同一起跑线上竞技”。

　　5、推销新产品
　　Internet是与顾客沟通的重要工具，同时也是推销新产品的重要渠道。通过Internet可以从各方面介绍被推销的新产品。测试新产品市场反应，并得到即时的反馈。在商业活动中一张照片可以胜过千言万语，可以通过提供企业照片、声音及图片档案等多媒体信息来服务顾客。

　　6、提高工作提高效率
　　互联网最大的优势就是可以一天24小时为您和您的客户服务，我们在工作工作过程中，经常会遇到客户提出的各种问题，而其中，有很多是重复的，因此，您可以将客户最常关心的问题在网站上汇总，并给出答案，也就是我们常说的ＦＡＱ，而不必再为重复答复这些问题而苦恼， 从而使您的工作更具效率。

　　7、增进与客户的沟通
　　客户对公司产品的意见，对公司的建议，您可以即时得到并迅速反应，然后通过网站再反馈给客户。

（一）申请主页空间，现在很多网站都提供免费的个人主页空间，我们可以较方便的申请到空间，而且能马上开通主页空间如网易，CHINAREN.COM等等。免费主页申请空间

（二）制作网页的步骤：
1.整体设计网站的风格，首先你应确定你的网站的主题风格，决定做哪方面的网站比如你的特长方面的东西....
2.设计主页的风格,网站的主页应该说是一个网站的灵魂，主页的好坏影响到人们对网站的主观感觉，首先确定主页的风格,用何种色调，分几部分都应该清楚，或用FLASH制作---显得很具梦幻色彩,或以简洁的用标志着手,或用图片和文字的适当组合而成,但不管怎样,一般使人看到了主页就会明白你的主题是什么....
3.网页制作的基本工具:
(1.)最基本的软件:FRONTPAGE 98,这个制作工具我是刚开始学的时候用的,觉得入门较简单易学,但缺点也很多,如排版时只能用表格来控制,不仅麻烦而且不易控制行距和文字距离.DREAMWEAR2.0 ,3.0一个比较好的"所见即所得"的动态网页制作软件,使得制作网页非常直观,而且简洁且具有动感,它的"层"的功能也是一个很有用东西.
(2.)重要的图形处理软件: ADOBE PHOTOSHOP这是一个专门处理图片和文字的软件,是平面设计领域里的老大，深深的扎根于MAC和PC上。但是以前她对网页图形特别是GIF图形的支持不完善，而Macromedia又适时推出了FireWorks一时间抢了PhotoShop的风头，于是Adobe发表了hotoShop5.5其中附带专为处理网页图形的ImageReady2.0，在相同条件下PhotoShop的历史功能更让人难以割舍。
(3.)动画制作软件:FLASH和Ulead Gif Animator.flash,dreamweare,firework被称为MACROMEDIA公司 的三把利剑，FLASH是交互式矢量图和Web动画的标准。
网页设计者使用Flash能创建漂亮的、可改变尺寸的、以及极其紧密的导航界面、技术说明以及其他奇特的效果。
Ulead GIF Animator 友立公司出版的动画GIF制作软件，内建的Plugin有许多现成的特效可以立即套用，可将AVI文件转成动画GIF文件，而且还能将动画GIF图片最佳化，能将你放在网页上的动画GIF图档减肥，以便让人能够更快速的浏览网页。
Macromedia Fireworks 真正的网页作图软件。
Fireworks与Dreamweaver结合很紧密，只要将Dreamweaver的默认图像编辑器设为Fireworks，那么在Fireworks里修改的文件将立即在Dreamweaver里更新。另一个功能是可以在同一文本框里改变单个字的颜色。
当然，Fireworks可以引用所有的Photoshop的滤镜，并且可以直接将PSD格式图片导 入。它是用来画图用的，它相当于结合了Photoshop (点阵图处理)以及CorelDRAW (绘制向量图)的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标点一下，不必再靠什么KPT之类的外挂滤镜。而且Fireworks很完整的支持网页16进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应(Image Map )、背景透明，要图又小又漂亮，在Fireworks中做起来都非常方便，修改图形也是很容易的。不需要再同时打开Photoshop和CorelDRAW...等等各类软件，切换来切换去的了。 SyntaxHighlighter.highlight();