第1篇 网页设计与网站建设入门篇
第1章 网页设计与网站建设基础
本章导读
网页对大多数网民来说并不陌生，但常见的网站类型、网站建设的基本流程、常用的网页制作工具等并不是每个网民都知道。为了能够使网页制作初学者对网页设计和网站建设有一个总体认识，从而为后面设计更复杂的网站打下良好的基础。
内容要点
◎ 熟悉常见的网站类型
◎ 熟悉常用网页设计软件和技术
◎ 掌握网站建设的一般流程
学习流程
1.1 常见的网站类型
网站就是把一个个网页系统地链接起来的集合，如新浪、搜狐、网易等。网站按其内容的不同可分为个人网站、企业类网站、机构类网站、娱乐休闲类网站、行业信息类网站、门户网站和购物类网站等，下面分别进行介绍。
1.1.1 个人网站
个人网站是以个人名义开发创建的具有较强个性化的网站。一般是个人为了兴趣爱好或展示个人等目的而创建的，具有较强的个性化特色，带有很明显的个人色彩，无论从内容、风格、样式上都形色各异、包罗万象。
这类网站一般不具有商业性质，通常规模不大，在互联网中随处可见，也有不少优秀的站点，图1-1所示为个人网站。
1.1.2 企业类网站
所谓企业网站，就是企业在互联网上进行网络建设和形象宣传的平台。企业网站就相当于一个企业的网络名片。企业网站不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，甚至可以通过网络直接帮助企业实现产品的销售。企业网站的作用为展现公司形象，加强客户服务，完善网络业务，图1-2所示为企业类网站。
企业网站的作用类似于企业在报纸和电视上所做的宣传公司本身及品牌的广告。不同之处在于企业网站容量更大，企业几乎可以把任何想让客户及公众知道的内容放入网站。
图1-1 个人网站
图1-2 企业类网站
1.1.3 机构类网站
所谓机构类网站通常指政府机关、非营利性机构或相关社团组织建立的网站，网站的内容多以机构或社团的形象宣传和政府服务为主，网站的设计通常风格一致、功能明确，受众面也较为明确，内容上相对较为专一，图1-3所示为机构类网站。
政府机构类网站作为政府提供为民服务的窗口，是有别于娱乐类网站的，作为机构网站，应该大方、庄重、美观，切忌花哨和笨重，格调明朗。在页面设计时要采用友好的网站界面，合理、清晰的网站导航，完善的帮助系统，完整的信息和完善的在线服务等，方便网站用户。
图1-3 机构类网站
1.1.4 娱乐休闲类网站
随着互联网的飞速发展，不仅涌现出了很多个人网站和商业网站，同时也产生了很多的娱乐休闲类网站，如电影网站、音乐网站、游戏网站、交友网站、社区论坛、手机短信网站等。这些网站为广大网民提供了娱乐休闲的场所。
它们提供丰富多彩的娱乐内容。这类网站的特点也非常显著，通常色彩鲜艳明快，内容综合，多配以大量图片，设计风格或轻松活泼，或时尚另类，图1-4所示为在线视频网站。
娱乐网站的设计要以内容为着手点，在网站设计规划前，首先要对信息内容进行必要的分析，探讨网站的定位和采用的设计方式，并且通过色彩、图像和细节设计等多个方面共同营造符合网站信息内容的文化气质。
图1-4 在线视频网站
1.1.5 行业信息类网站
随着互联网的发展、网民人数的增多及网上不同兴趣群体的形成，门户网站已经明显不能满足不同上网群体的需要。一批能够满足某一特定领域上网人群及其特定需要的网站应运而生。由于这些网站的内容服务更为专一和深入，因此人们将其称为行业信息类网站，也称为垂直网站。行业信息类网站只专注于某一特定领域，并通过提供特定的服务内容，有效地把对某一特定领域感兴趣的用户与其他网民区分开，并长期持久地吸引这些用户，从而为其发展提供理想的平台，图1-5所示是行业信息类网站搜房网。
图1-5 行业信息类网站搜房网
1.1.6 购物类网站
随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚。丰富多彩的网上资源、价格实惠的打折商品、服务优良送货上门的购物方式，已成为人们休闲、购物两不误的首选方式。网上购物也为商家有效地利用资金提供了帮助，而且通过互联网来宣传自己的产品覆盖面较广，因此现实生活中涌现出了越来越多的购物网站。
在线购物网站在技术上要求非常严格，其工作流程主要包括商品展示、商品浏览、添加购物车、结账等，图1-6所示为购物类网站。
图1-6 购物类网站
1.1.7 门户类网站
门户类网站将无数信息整合、分类，为上网者打开方便之门，绝大多数网民通过门户类网站来寻找自己感兴趣的信息资源，巨大的访问量给这类网站带来了无限的商机。门户类网站涉及的领域非常广，是一种综合性网站，如搜狐、网易、新浪等。此外这类网站还具有非常强大的服务功能，如搜索、论坛、聊天室、电子邮箱、虚拟社区、短信等。门户类网站的外观通常整洁大方，用户所需的信息在上面基本都能找到。
目前国内较有影响力的门户类网站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu. com）和网易（www.163.com）等，图1-7所示为新浪首页。
图1-7 新浪首页
1.2常用网页设计软件和技术
不论是制作大型网站还是一般的企业网站，无非都是做出一个又一个的网页，再把它们链接起来。制作网页可以直接使用HTML，也可以使用工具软件。由于使用语言工作量很大，制作一个页面往往要写成百上千行代码，非常麻烦，而且出错率高，错误也不易检测和排除。所以，对于大多数人来说，使用工具软件制作网页是最常用的。
用于设计网页的工具软件很多，如Adobe公司的Dreamweaver、Flash、Fireworks，以及微软公司的FrontPage等，都是很受欢迎的网页制作工具，拥有庞大的用户群。
1.2.1 网页编辑排版软件
常用的网页编辑排版软件有Dreamweaver和FrontPage。Dreamweaver是大众化的专业网页编辑排版软件，它的排版能力较强，功能全面，操作灵活，专业性强，因而受到广大网站专业设计人员的青睐。FrontPage作为Microsoft公司的办公软件之一，与Office的其他软件具有高度的兼容性，且有规范、简洁的操作界面，但网页制作方面的功能不如Dreamweaver强大。使用Dreamweaver CS5编辑网页如图1-8所示。
图1-8 使用Dreamweaver CS5编辑网页
1.2.2 网页动画制作软件
随着网络技术的发展，网页上出现了越来越多的Flash动画。一个优秀的网站是离不开动画的，无论是Banner、按钮、网站宣传动画，还是整个网站的首页等，都需要使用动画制作软件。Flash动画已经成为当今网站必不可少的部分，美观的动画能够为网页增色不少，从而吸引更多的浏览者。使用Flash CS5制作的动画如图1-9所示。
图1-9 Flash CS5制作的动画
1.2.3 网页图像设计软件
常用的图像设计软件有Photoshop和Fireworks。Photoshop是Adobe公司推出的图像处理软件。它具有界面友好、易学、易用等优点，目前已被广泛应用于印刷、广告设计、封面制作、网页图像制作和照片编辑等领域。在网页制作过程中，首先要使用Photoshop设计网页的整体效果图、处理网页中的图像、背景图处理、网页图标和按钮的设计等。使用Photoshop CS5设计的网页图像效果如图1-10所示。
图1-10 Photoshop CS5设计的网页图像
Fireworks CS5是一款用来设计网页图形的应用程序，它所含的创新性解决方案解决了图形设计人员和网站管理人员面临的主要问题。Fireworks中的工具种类齐全，使用这些工具，可以在单个文件中创建和编辑位图和矢量图像，设计网页效果、修剪和优化图形以减小其文件大小。Fireworks CS5的工作界面如图1-11所示。
图1-11 Fireworks CS5的工作界面
1.2.4 网页标记语言HTML
HTML（Hyper Text Markup Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。所谓超文本，就是它可以加入图片、声音、动画、影视等内容。
HTML的任何标记都由“<”和“>”围起来，如<HTML><I>。在起始标记的标记名前加上符号“/”便是其终止标记，如</I>，夹在起始标记和终止标记之间的内容受标记的控制，如<I>一路顺风</I>，夹在标记I之间的“一路顺风”将受标记I的控制。
超文本文档分为头和主体两部分，在文档头中，对这个文档进行了一些必要的定义，文档主体中才是要显示的各种文档信息，代码如下：
<HTML>
<HEAD>
网页头部信息
</HEAD>
<BODY>
网页主体正文部分
</BODY>
</HTML>
● HTML标记
<HTML>标记用于HTML文档的最前面，用来标识HTML文档的开始。而</HTML>标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标记必须一起使用。
● Head标记
<Head>和</Head>构成HTML文档的开头部分，在此标记对之间可以使用<Title></Title>、<Script></Script>等标记对，它们都是用来描述HTML文档相关信息的标记对，<Head></Head>标记对之间的内容不会在浏览器中显示，两个标记必须一块使用。
● Body标记
<Body></Body>是HTML文档的主体部分，在此标记对之间可包含<p> </p>、<h1> </h1>、<br> </br>等众多的标记，它们所定义的文本、图像等将在浏览器中显示，两个标记必须一起使用。
● Title标记
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“标题”，要将网页的标题显示到浏览器的顶部其实很简单，只要在<Title></Title>标记对之间加入要显示的文本即可。
1.2.5 网页脚本语言
使用VBScript、JavaScript等简单易懂的脚本语言，结合HTML代码，即可快速完成网站的应用程序。
脚本语言（如JavaScript，VBScript等）介于HTML和C、C++、Java、C#等编程语言之间。脚本是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称为宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。
脚本与VB、C语言的区别主要是：
● 脚本语法比较简单，容易掌握。
● 脚本与应用程序密切相关，所以包括相对应用程序自身的功能。
● 脚本一般不具备通用性，所能处理的问题范围有限。
● 脚本多为解释执行。
图1-12所示为使用脚本语言制作的特效漂浮广告网页。
图1-12 使用脚本语言制作的漂浮广告网页
1.2.6 动态网页编程语言ASP
所谓动态网页是指网页文件中包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的扩展名一般根据不同的程序设计语言而有所不同，如常见的以.asp、.jsp、.php、.perl、.cgi等形式为扩展名。
ASP（Active Server Pages）是微软公司开发的服务器端脚本环境，内含IIS3.0及以上版本，通过ASP可以结合HTML网页、ASP指令和ActiveX控件，建立动态、交互且高效的Web服务器应用程序。有了ASP就不必担心客户的浏览器是否能够运行所有编写代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户端浏览器，这样就减轻了客户端浏览器的负担，大大提高了交互为速度。
图1-13 所示为使用ASP开发的动态网页，在“用户名”和“密码”文本框中输入正确的内容，然后单击“登录”按钮，即可进入后台管理页面。
图1-13 使用ASP开发的动态网页
1.3网站建设的一般流程
创建一个网站并不复杂，但要创建一个优秀的网站则并非易事。创建网站前了解一下网站建设的基本流程是十分必要的。因为网站建设流程可以明确网站的目标和方向，提高效率，使网站的结构更加清晰，起到事半功倍的效果。
1.3.1 网站的需求分析
不论是简单的个人主页，还是复杂的、几千个页面的大型网站，对网站的需求分析都要放到第一步，因为它直接关系到网站的功能是否完善、是否够层次、是否达到预期的目的等。
需求分析是指通过分析单位的战略目标和管理情况，确定网络建设的必要性、目标、功能和主要工作等。因为网站对外树立形象、发布重大信息、提供技术支持、客户服务甚至进行电子商务等，所以只有详细了解和分析需求才能设计出适合自己特点的网站，对于大型商业网站还要进行可行性研究。
网站的需求分析主要包括以下几点。
● 了解相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。
● 市场主要竞争者分析，分析竞争对手上网情况及其网站规划、功能作用。
● 确定网站建设的目的是为了宣传产品，进行电子商务，还是建立行业性网站。
● 确定哪些人应该参与网站开发项目的需求分析活动。
● 在需求分析的工程中，往往有很多不明确的用户需求，这时项目负责人需要调查用户的实际情况，明确用户需求。
● 通过市场调研活动，分析同类网站的功能，可以帮助项目负责人更加清楚地构想出自己开发的网站的大体架构和模样，在总结同类网站优势和缺点的同时，博采众长，开发出更加优秀的网站。
1.3.2 规划站点结构
网站规划是网站开发必不可少的重要一环，直接关系到整个网站的整体风格、布局结构等，规划内容包括颜色风格倾向、网站栏目设置、结构布局及功能实现等。如果是公司网站或商业网站还需要进行网站客户分析、目标定位、营销方案、网站品牌规划、软/硬件配置及数据库开发方案，如果是电子商务网站，还需要进行电子商务方案分析与确定。图1-14所示为规划的站点结构。
图1-14 规划的站点结构
目前大多数网站缺乏灵魂，主旨松散、混乱，原因就在于缺乏策划。在建立自己的企业站点时，网站策划贯穿于网站建设的全过程，是网站建设最重要的环节，也是最容易被企业忽视的环节。
规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当要制作一个很大的网站（有很多页面）时，必须把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改，这样十分累人，也十分费钱。
大纲列出来后，还必须考虑每个页面之间的链接关系，是星形、树形还是网形链接，这也是判别一个网站优劣的重要标志。
1.3.3 收集素材
网页制作之前要收集好相关的素材，对收集的素材进行分类管理。首先要创建一个新的总目录（文件夹），比如D:\我的网站，来放置建立网站的所有文件，然后在这个目录下建立两个子目录，即“文字资料”和“图片资料”。放入目录中的文件名最好全部用英文小写，因为有些主机不支持大写和中文，以后增加的内容可再创建子目录。
1.文本内容素材的收集
具体的文本内容，可以让访问者清楚地知道作者的Web页中想要说明的东西。我们可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料”子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。
2.艺术内容素材的收集
只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像、音像等，将使网页充满动感与生机，也将吸引更多的访问者。这些素材主要来自于以下4个方面。
● 从Internet上获取。可以充分利用网上的共享资源，如使用百度、Sohu等引擎收集图片素材。图1-15所示为从百度搜索素材。
图1-15 从百度搜索素材
● 从CD-ROM中获取。在市面上，有许多关于图片素材库的光盘，也有许多教学软件，可以选取其中的图片资料。
● 利用现成图片或自己拍摄。既可以从各种图书出版物（如科普读物、教科书、杂志封面、摄影集、摄影杂志等）获取图片，也可以使用自己拍摄和积累的照片资料。将杂志的封面彩图用彩色扫描仪扫描下来，经过加工后，整合制作到网页中。
● 自己动手制作一些特殊效果的图片，特别是动态图像，自己动手制作往往效果更好。可采用3ds Max或Flash进行制作。
鉴于网上只能支持几种图片格式，所以可先将以上途径收集的图片用Photoshop等图像处理工具转换成JPG、GIF形式，再保存到“图片资料”子目录下。另外，图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观与网络的速度两者之间取得良好的平衡为宜。
提示
搜集素材是网站建设关键性一步，要学会搜集素材的方法与方式，并且能分类保存、整理需要的素材，切不可引用一些不健康或是过于花哨的动画图片素材。
1.3.4 设计网页图像
在确定好网站的风格和搜集完资料后就需要设计网页图像了，网页图像设计包括Logo、标准色彩、标准字、导航条和首页布局等。可以使用Photoshop或Fireworks软件来具体设计网站的图像。有经验的网页设计者，通常会在使用网页制作工具制作网页前，设计好网页的整体布局，这样在具体设计过程中将会胸有成竹，大大节省工作时间。图1-16所示为设计的网页按钮图像。
图1-16 设计的网页按钮图像
1.3.5 制作网页
网页制作是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要灵活运用模板和库，这样可以大大提高制作效率。如果很多网页都使用相同的版面设计，就应为这个版面设计一个模板，然后就可以以此模板为基础创建网页了。以后如果想要改变这些网页的版面设计，只需简单地改变模板即可。图1-17所示为利用Dreamweaver CS5制作的网页。
1.3.6 开发动态网站模块
页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、留言板、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、招聘系统、统计系统、留言系统、论坛及聊天室等。图1-18所示为开发的动态购物模块。
图1-17 利用Dreamweaver CS5制作的网页
图1-18 动态购物模块
1.3.7 申请域名和服务器空间
要想拥有属于自己的网站，首先要拥有域名。域名在互联网上代表名字，只有靠这个名字，别人才可以在互联网上与你接触和沟通。域名是Internet上的服务器或网络系统的名字，在全世界没有重复的域名。域名是以若干个英文字母和数字组成，由“.”分隔成几部分，如sina.com就是域名。
Internet域名如同商标，是互联网上的标志之一。Internet上的域名是非常有限的，因为每个域名都只有一个。
注册域名之后，下一步就是为网站申请空间，其实就是经常说的主机。这个主机必须是一台功能相当的服务器级的电脑，并且要用专线或其他的形式24小时与互联网相连。
这台网络服务器除存放公司的网页为浏览者提供浏览服务之外，同时充当“电子邮局”的角色，负责收发公司的电子邮件。还可以在服务器上添加各种各样的网络服务功能，前提是有足够的技术支持。
有以下两种常见的主机类型。
● 主机托管：将购置的网络服务器托管于网络服务机构，每年支付一定数额的费用。要架设一台最基本的服务器，在购置成本上，可能已需要数万元，而在配套软件的购置上，更要花上一笔相当高的费用。另外还需要聘请技术人员负责网站建设及维护。如果是中小企业网站，不必采用这种方式。
● 虚拟主机：使用虚拟主机，不仅节省了购买相关软、硬件设施的费用，公司也无须招聘或培训更多的专业人员，因而其成本也较主机托管低得多。不过，虚拟主机只适合于小型、结构较简单的网站，对于大型网站来说还应该采用主机托管的形式，否则在网站管理上会十分麻烦。
1.3.8 网站的测试
在网站发布之前，通常都会检查网页在不同版本浏览器下的显示情况。尤其是制作大型的或访问量高的网站，这个步骤十分必要。由于各种版本的浏览器支持的HTML语言的版本不同，所以要让网页能够在大多数浏览器中顺利显示，就不得不做尽可能仔细的检查，必要时还得舍弃一些较新的效果。
1.3.9 网站的推广
网站推广的目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。网站推广需要借助一定的网络工具和资源，常用的网站推广工具和资源包括搜索引擎、分类目录、电子邮件、网站链接、在线黄页和分类广告、电子书、免费软件、网络广告媒体、传统推广渠道等。所有的网站推广方法实际上都是对某种网站推广手段和工具的合理利用，因此制定和实施有效的网站推广方法的基础是对各种网站推广工具和资源的充分认识和合理应用。
1.搜索引擎注册
大多数网民采用搜索的方法是在各大搜索引擎站点进行搜索查找。网络上的搜索引擎成千上万，可以使用AddWeb或“登陆奇兵”之类专门软件快速把网站注册到各种搜索引擎，还可以自己手工登录几个知名的搜索引擎，如Yahoo、MSN、一搜、搜狐、网易、中华网和中搜等，只要将本地站点登录到各大搜索引擎站点就能达到站点推广的目的。目前，比较著名和通用的搜索引擎站点分别是www.google.com和www.baidu.com。
2.在网站上做广告
网络广告是常用的网络营销策略之一，在网络品牌、产品促销、网站推广等方面均有明显作用。网络广告的常见形式包括Banner广告、关键字广告、分类广告、赞助式广告和E-mail广告等。网络广告最常见的表现方式是图形广告，如各门户站点主页上部的横幅广告。
3.利用友情链接推广
和众多网站建立友情链接，无疑是网站推广最有效、最经济的办法，除了互相从对方获得流量外，它还可以使网站很快被大量搜索引擎收录，能够更好地促进网站的推广。
4.利用论坛帖子推广
Internet上各种各样的论坛都有，如果有时间，可以找一些与公司产品相关并且访问人数比较多的论坛，注册登录并在论坛中输入公司的一些基本信息，如网址、产品等。
此外还有直接跟客户宣传、群发邮件、网络广告、报纸和户外广告等几种推广方式。