搜索
在这里把从创意到制作的整个流程写下来与大家分享。本案例共分五个部分：1、制作前的准备2、效果图的设计3、网站页面的生成4、网页特效的制作5、Flash动画的制作页面效果图初稿效果如图1.1所示：图1.1效果图的初稿通过对效果图初稿的修改和整理，最终确定下来的完成效果如图1.2所示：图1.2最终确定稿件在本教程中，首先会以效果图初稿的制作来进行介绍，然后再来对最终确定的稿件的修改部分进行介绍。1.1制作前的准备制作网页效果图之前，首先需要进行相应的准备，而不是打开软件上来就进行制作。俗话说，巧妇难为无米之炊，只有做到心中有数，才能够设计出最符合要求的页面效果。在这里，我把前期的准备分为以下几个阶段：1.网站的策划阶段2.网页的版式布局阶段3.网页的配色阶段1.2网站的策划阶段说到网站的策划，主要包含哪些工作呢？根据我个人的经验，应该包含以下几点内容：1.所要设计网站的类型。2.网页的构成。3.页面的安全尺度。4.所要设计网站的内容。5.页面功能设计。6.素材的收集和整理。前期策划可以说是最花费时间和精力的部分，但是前期准备的越充分，设计的时候就越灵活。1.2.1网站的类型说到网站的类型首先就要从网站的分类来进行介绍。现在Web技术仍然处于一个高速发展期，要给网站一个比较准确的定义，必须要有很好的前瞻性。在这里给出网站分类的两个标志性的使用特征：1、使用者通过浏览器就可以获得网站所提供的信息与服务。2、使用者在浏览器中只输入一个地址，不管这个地址是域名还是IP地址还是其他，就可以使用完网站所提供的服务。根据网站所提供的服务，我们可以把网站分为：资讯类网站、交易类网站、互动游戏类网站、有偿服务类网站、功能型网站、综合类网站、办公类网站。因为提供的服务不同，所以要求包含的功能也就不同。这样的分类角度，应该能够为网站的定位带来帮助。网站的分类归属不清，会带来网站定位的模糊，这样设计得到的效果难免会差强人意。1.2.1.1资讯类网站这类网站以提供信息为主要目的，其网站投资者的主要目的是在互联网上建立一个宣传册，不要求实现业务或工作逻辑。这类网站所包含的功能比较简单，通常包含的功能有检索、论坛、留言，也有一些提供简单的浏览权限控制，如好多企业网站中就有只对代理商开放的栏目或频道。这类网站技术构架简单，开发工作量主要与三个因素相关：1、承载的信息类型。如是否承载多媒体信息，是否承载结构化信息等。2、信息发布的方式和流程。3、信息量的数量级。目前大部分的政府和企业网站都属于这类网站。如图1.3所示为首都之窗网站首页。图1.3首都之窗网站首页1.2.1.2交易类网站就是人们通常所理解的电子商务网站。之所以不直接叫电子商务网站，是因为现在根据电子商务的正式定义，其外延要比这个大的多。这类网站是以实现交易为目的，以订单为中心的。有三个的内容是这类网站必须实现的：1、商品如何展示；2、订单如何生成；3、订单如何执行。这类网站的成功与否，其关键在于业务模型的优劣。这类网站中最著名的当数亚马逊，国内的当当、卓越也是其中的佼佼者。企业为配合自己的营销计划搭建的电子商务平台，也属于这类网站，如海尔的网上商城。但象联想在自己的官方网上直接加入定购功能，这样的网站不属于这类型的网站，因为实现交易不是它的主要目的。按照本文的分类方法应该属于综合型网站。如图1.4所示为淘宝网首页。图1.4淘宝网首页1.2.1.3互动游戏类网站这是近年来国内逐渐风靡起来的一种网站。其代表有网站有传奇、仙剑情缘、联众等。这类网站的投入是根据所承载游戏的复杂程度来定。现在的发展趋势是向超巨型方向发展，一些这类型的网站已经形成了独立的网络世界，让总多玩家乐不思业。好多网站的投入是非常惊人的。如图1.5所示为魔兽世界官方网站首页。图1.5魔兽世界官方网站首页1.2.1.4有偿资讯类网站这类网站中的佼佼者如101网校等。他们与资讯类网站相似，也是以提供资讯为主。所不同的是它们提供的资讯是要求有直接回报的，就因为这一点，这来网站都有一个业务模型。通常的做法是要求访问者或按次，或按时间，或按量付费。大多数收费的电影网站属于这类网站。如图1.6所示为新东方在线网站首页。图1.6新东方在线网站首页1.2.1.5功能型网站这是最近两年发展起来的一种网站，最著名的代表是google。其特点是将一个具有广泛需求的功能扩展开来，开发一套强大的支撑体系，将该功能的实现推向极值。这类网站看似简单的页面实现，却往往需要相当惊人的投入。人云一招鲜，吃遍天，要想把一个看似人人都会的功能做到大多数人难以企及，实非易事。国内的百渡、天极网、空中网、清华BBS等都属于这类型的网站。3721尽管也提供上网助手等功能，但它主要还是以提供中文域名解析著名的，所以也应该算作这类网站。如图1.7所示为Google网站首页。图1.7Google网站首页1.2.1.6综合类网站如yahoo、sina、sohu等。之所以不称它们为门户网站，是因为经过这两三年的发展，门户的作用在它们那里已经失去了重要地位。在网民那里，其门户的作用已基本被google、baidu等专业的收索引擎所取代。这类网站的共同特点是提供两个以上典型的服务，象新浪搜狐究竟提供多少种典型服务一般访问者很难说清楚。这类网站可以把它看成一个网站服务的大卖场，不同的服务由不同的服务商去提供。这类网站的首页在设计时都尽可能把所能提供的服务都包含进来，一般看起来非常拥挤。由于这类型如日中天的影响力，所以好多其他类型网站的首页设计者，都产生了一种错觉，好像不把首页塞满就不能算作首页。直到google的兴起才有所改变。如图1.8所示为Sohu网站首页。图1.8Sohu网站首页1.2.1.7办公类网站这是b/s结构继续向前发展造成b/s进c/s退的必然结果。现有的绝大大部分OA系统都是c/s结构的，用b/s结构构建的OA系统称之为WebOA。WebOA构建的网站也就自然地命名为办公类网站了。目前很多单位的内联网网站还应该算作资讯类网站，如果它们加上一个多级的权限控制功能，向服务于一种办公管理方式的方向发展，就会变成这种办公类网站。如图1.9所示为清华同方内部网站首页。图1.9清华同方内部网站首页根据上面的分类形式，[中国.巩义]属于哪种类型的网站呢？首先[中国.巩义]属于政府机构网站（.gov），其次，政府机构网站的功能主要以信息发布为主，同时提供各种便民的服务，而且这些服务不是以盈利性为目的的。所以，[中国.巩义]应该属于资讯类网站。同时还应该考虑到政府机构网站的特点。【提示】说到这里，大家首先应该有一个明确的概念了，[中国.巩义]网站设计应该围绕资讯类网站和政府机构类网站的特点来进行设计。所以才参考一些相关网站的时候可以以这两类网站为主。1.2.2网页的构成不同性质和类别的网站，页面的内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、导航、主体内容、广告栏等。如图1.10所示。图1.10网页的构成1.2.2.1网页标题网站中的每一个页面都有一个标题，用来提示页面中的主要内容。这一信息将出现在浏览器的标题栏中，而不是在网页的实际内容区域中。它的主要作用是引导访问者清楚地浏览网站中的内容，不至于迷失方向。给网页添加标题，可以在HTML语言中的和标记之间添加下列代码来实现：你的标题内容最终显示效果如图1.11所示。图1.11网页的标题1.2.2.2网站的标识LOGO翻开字典，我们可以找到这样的解释：“logo:n.标识语”。在电脑领域而言，LOGO是标志、徽标的意思。LOGO是与其它网站链接以及让其它网站链接的标志和门户。INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入你的网站，必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其重要。如图1.12所示，新浪的LOGO底色是白，文字“sina”和新浪网是黑色，其中“i”字母上的点用了表象性手法处理成一只眼睛，而这又使整个字母i象一个小火炬，这样，即向人们传达了“世界在你眼中”的理念，激发人们对网络世界的好奇，又使人们容易记住新浪网的域名。图1.12新浪网LOGOLOGO是网站形象的重要体现。试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？就一个网站来说，LOGO即是网站的名片。而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的“点睛”之处。如图1.13所示，Yahoo的LOGO（中文站）很简单：英中文站名，红字白底。英文Yahoo字母间的排列和组合很讲究动态效果，加上Yahoo这个词的音感强，使人一见就仿佛要生惊讶——而不禁自问：DoyouYahoo?图1.13Yahoo网站LOGOLOGO能使受众便于选择。一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。想一想，你的受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。网站作为一个对外交流的重要手段，起到对自身形象宣传的重要作用。如图1.14所示。搜狐的LOGO比较特别，主要有两部分组成，一是文字，中英文名称，字体选择较古典；一是狐狸的尾巴，比较灵活可爱的样子。搜狐网站随各个页面的色调不同而放置不同色彩的LOGO，但LOGO的基本内容不变。当然，你不会不知道搜狐的理念：出门找地图，上网找搜狐。但愿那只机灵的狐狸能帮你走出网络丛林。图1.14搜狐网站LOGO[中国.巩义]的LOGO是以国徽结合文字的形式来体现的，如图1.15所示。因为是政府网站，所以使用了国徽的图案，同时在选择[中国.巩义]的字体的时候尽量是以大气，接近于书法的风格为标准，这样更具有中国特色。图1.15[中国.巩义]的LOGO为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：1.88*31像素这是互联网上最普遍的LOGO规格。2.120*60像素这种规格用于一般大小的LOGO。3.120*90像素这种规格用于大型LOGO。1.2.2.3网页页眉网页页眉指的是页眉顶端的部分，如图1.16所示。有的网页划分比较明显，有的页面没有明确区分或者没有页眉。页眉的风格一般和整体页面风格一致，富有个性特色的页眉有着和网站LOGO一样的标识作用。页眉的位置注意力较高，大多数网站创建者在此设置网站的宗旨、宣传口号、广告语等，有的设计成广告位。图1.16网页的页眉1.2.2.4网页页脚网页页脚是页面的底部，如图1.17所示。通常用来标注站点所属公司（社团）的名称、地址、网站版权信息、邮件地址等。使浏览者能够从中了解到该站点所有者的一些基本情况。图1.17网页的页脚1.2.2.5网页导航网站导航（navigation）是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容。一个网站导航位置在每个页面中的位置都是一样的。网站导航表现为网站的栏目菜单设置、辅助菜单、其他在线帮助等形式。网站导航设置是在网站栏目结构的基础上，进一步为用户浏览网站提供的提示系统，由于各个网站设计并没有统一的标准，不仅菜单设置各不相同，打开网页的方式也有区别，有些是在同一窗口打开新网页，有些在新打开一个浏览器窗口，因此仅有网站栏目菜单有时会让用户在浏览网页过程中迷失方向，如无法回到首页或者上一级页面等，还需要辅助性的导航来帮助用户方便地使用网站信息。如图1.18所示。图1.18网页中的导航1.2.2.6网页的主体内容主体内容是页面设计的主体元素。它一般是二级链接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是图像和文字相结合。它的布局通常按内容的