第1章 网页制作基础

要制作出精美的网页，不仅要熟练使用网页设计软件，还要掌握网页的一些基本概念、网页设计基本原则，以及网站开发的流程。本章主要介绍网页制作的基础知识，包括网页的基本概念、网页设计的基本原则、网页制作常用工具，以及网站建设的基本流程等内容。

↘ 本章学习目标

· 了解网页的基本概念

· 理解网页设计的基本原则

· 掌握网页制作的常用工具

· 了解网站建设的基本流程

↘ 本章学习流程

1.1 网页的基本概念

要学习网页制作，首先要了解网页中的一些基本概念，例如什么是互联网、网页、HTML、URL、ASP、数据库等。本节将首先介绍网页中的一些基本概念，为后面设计制作复杂的网页打下良好的基础。

1.1.1 互联网

国际互联网即lnternet，lnternet的基础建立于20世纪70年代发展起来的计算机网络群之上。如今lnternet飞速发展，已经成为人们生活中的一部分。lnternet是一个很庞大的网络，是将以往相互独立的、散落在各个地方的单独的计算机或是相对独立的计算机局域网，借助已经发展得有相当规模的电信网络，通过一定的通信协议而实现的高层次互联。在这个互联网络中，一些超级服务器通过高速主干网络相连，而一些较小规模的网络则通过众多的分支与这些巨型服务器连接。这些连接包括物理连接和软件连接。所谓物理连接就是各主机之间利用常规电话线、高速数据线、卫星、微波或光纤等各种通信手段连接。软件连接是指全球网络中的电脑使用同一种语言进行交流。

lnternet不仅是一个计算机网络，更是一个庞大的、实用的、可共享的信息源。世界各地上亿的人可以用lnternet通信和共享信息资源：可以送出或接收电子邮件通信；可以与别人建立联系并互相索取信息；可以在网上发布公告，宣传信息；可以参加各种专题小组讨论；可以免费享用大量的信息资源和软件资源，等等。

1.1.2 网页

网页是lnternet“展示信息的一种形式”。一般网页上都会有文本和图片信息，复杂一些的网页上还会有声音、视频、动画等多媒体内容。进入网站首先看到的是这个网站的主页，主页集成了指向二级页面及其他网站的链接，浏览者进入主页后可以浏览最新的消息，找到感兴趣的主题，通过单击超链接跳转到其他网页，如图1-1所示。

1.1.3 HTML

HTML的英文全称是Hyper Text Markup Language（超文本标记语言）。它是一种标识性语言，包括一系列标记，通过这些标记将网络上的文档统一格式，使分散的lnternet资源连接为一个逻辑整体。如图1-2所示为一个网页的HTML代码。

超文本是一种组织信息的方式，它通过超级链接的方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能在其他文件中，或者是其他远程的计算机上。这种组织信息的方式将分布在不同位置的信息资源用随机方式进行连接，为浏览者查找、检索信息提供方便。

1.1.4 URL

URL英文全称是Uniform Resource Locator，即统一资源定位符，它是一种通用的地址格式，指出了文件在lnternet中的位置。

一个完整的URL地址由协议名、服务器地址、在服务器中的路径和文件名4部分组成。如http://games.sina.com.cn/z/css/indexpage.shtml，其中“http://”指定协议名，“games.sina.com.cn”是服务器的地址，“z/css”是文件在服务器中的路径，“indexpage. shtml”是文件名。URL中的路径一定要是绝对路径，如图1-3所示为URL绝对路径网页。

1.1.5 ASP

ASP（Activer Server Page）即动态网页，是包含脚本程序的网页。ASP是服务器端脚本编写环境，可以创建和运行动态、交互的Web服务器应用程序。使用ASP可以组合HTML页、脚本命令和ActiveX组件，以创建交互的Web页和基于Web的功能强大的应用程序。

ASP文件必须经过服务器解析后才能够浏览。只有将ASP文件上传到支持ASP运行的服务器，才能够被用户访问浏览。可以将安装Windows操作系统的计算机设置为服务器，ASP运用所需要的环境为Windows中的llS或PWS。利用llS发布以后的动态ASP网页如图1-4所示。

1.1.6 数据库

数据库是计算机中用于存储、处理大量数据的软件，是关于某个特定主题信息的集合。数据库表面看上去像是电子表格，在其中可以按照行或列来表示信息。一般来说，表的每一行称为一个“记录”，而表的每一列称为一个“字段”，字段和记录是数据库中最基本的术语。记录描述了表中某一个实体的所有内容，而字段则描述表中所有实体的某一种类型的内容，数据库表中的记录和字段如图1-5所示。

1.2 网页设计的基本原则

建立网站的目的是为浏览者提供所需的信息，这样客户才会愿意光顾，网站才有其真实意义，但有太多网站显然忘了这个目的，复杂的创意技巧跃居主角，内容信息反而沦为末端。因此，笔者提出网页设计的几条基本原则。

● 明确内容

在建立一个网站之前，首先应该考虑网站的内容，包括网站的功能是什么、用户需要什么，整个设计都应该围绕这两方面来进行。内容可以包括文字、图片、影像和声音等。

● 抓住用户

如果用户不能够迅速地进入您的网站，或操作不便捷，网站设计就是失败的。不要让用户因为网站操作不方便而对网站失去兴趣。

● 首页很重要

首页设计是网站成功与否的关键，反映网站给人的整体感觉，能否吸引浏览者留在站点上，全凭首页设计的效果。首页中最好有很清楚的、人性化的类别选项，让访问者可以很快找到需要的主题。

● 分类

网站内容的分类也很重要，可以按主题分类、按性质分类、按组织结构分类，或按人们的思考方式分类等。但无论哪一种分类方法，都要让访问者很容易找到目标。而且分类方法最好尽量保持一致，若要混用多种分类方法，要掌握不让浏览者搞混的原则。

● 互动性

互联网的另一特色就是互动性。好的网站首页必须与用户有良好的互动性，包括在整个设计呈现、使用界面引导上等，都应该掌握互动的原则，让用户感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的技巧和软硬件支持。

● 图像应用技巧

图像是网站的特色之一，它具有醒目、吸引人以及传达信息的功能，好的图像应用可以给网页增色，但不恰当的图像应用则会带来反效果。使用图像时一定要考虑图像下载时间的问题。在图像使用上，尽量采用一般浏览器均支持的压缩图像格式，如果需要放置大型图像文件，最好将图像文件与网页分开，在页面中先显示一个具有链接功能的缩小图像或一行说明文字，然后加上该图像文件大小的说明，如此不仅可以加快页面的传输速度，而且可以让浏览者判断是否继续打开放大后的图像，如图1-6所示。

● 避免滥用技术

技术是令人着迷的东西，许多网页设计者喜欢使用各种网页设计制作技术。好的技术运用会让网页栩栩如生，给浏览者一种全新的感觉，但不当地使用技术则适得其反，反而会使浏览者失去对网页的兴趣。

● 及时更新维护

浏览者希望看到新鲜的东西，没有人对过时的信息感兴趣，所以网站信息一定要注意及时性，随时保持新鲜感很重要。

1.3 网页制作常用工具

自从Macromedia公司推出网页三剑客之后，网页三剑客就成为制作网页的必备工具。Adobe收购Macromedia公司后推出了全新的Dreamweaver CS3，Flash CS3，Fireworks CS3，它们已经成为网页制作的梦幻工具组合。

1.3.1 网页编辑排版软件Dreamweaver CS3

Dreamweaver是一个所见即所得的网页编辑工具，能够使网页和数据库相关联，支持最新的HTML和CSS，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver CS3有一个崭新、简洁、高效的工作界面，性能也得到了改进。它不仅是专业人员制作网站的首选工具，并且普及到了广大网页制作爱好者中。Dreamweaver CS3的工作界面如图1-7所示。

1.3.2 网页动画制作软件Flash CS3

随着网络技术的发展，网页上出现了越来越多的Flash动画。Flash是一种矢量图像编辑与动画制作工具，它是专业的动画制作软件，目前最新版本是Flash CS3。

Flash动画已经成为当今网站必不可少的部分，美观的动画能够为网页增色不少，从而吸引更多的浏览者。美观的Flash动画不仅需要对制作工具非常熟悉，更重要的是设计者独特的创意。Flash CS3的工作界面如图1-8所示。

1.3.3 网页图像制作软件Fireworks CS3

Fireworks是创建、编辑和优化网页图像的多功能应用程序。随着版本的不断升级、功能不断加强，它受到越来越多的图像网页制作者的青睐。目前最新版本Fireworks CS3更是以它方便快捷的操作模式，以及位图编辑、矢量图形处理和Gif动画制作功能上的多方面优秀整合，赢得诸多好评。

Fireworks CS3是专业的网页作图软件。利用Fireworks CS3的新增功能，可以更方便地在网站上添加图像和交互元素，对于有经验的网页设计人员、HTML开发人员及网页新手来说，Fireworks CS3都可以最大限度地提高工作效率。Fireworks CS3的工作界面如图1-9所示。

1.4 网站建设基本流程

在开始建设网站之前应该有一个整体的规划和目标，规划好网页的大致构架后就可以着手设计了。当整个网站制作、测试完成后，就可以发布到网络上。下面介绍一下网站建设的基本流程。

1.4.1 网站需求分析

规划一个网站时，可以用树状结构先把每个页面的内容大纲列出来。尤其当要制作一个很大的网站的时候，特别需要把架构规划好，还要考虑到以后的扩充性，免得做好后再更改整个网站的结构。

1．确定网站主题

网站主题就是网站所要包含的主要内容，网站必须有明确的主题。要明确网页使用的语言和页面所体现的站点主题，调动一切手段充分表现网站的个性和特点，这样才能给浏览者留下深刻的印象。

2．收集素材

明确了网站的主题之后，就要围绕主题搜集素材了。要想让自己的网站有声有色，能够吸引客户，就要收集精美素材，包括图片、文字、音频、视频和动画等。这些素材的准备很重要，搜索的素材越充分，以后制作网站就越容易。素材的准备既可以从网上搜集，也可以自己制作。将收集的素材进行整理，以便制作网站制作时使用。

3．规划站点

一个网站设计成功与否，很大程序上取决于设计者的规划水平。网站规划包含的内容很多，如网站的结构、颜色搭配、版面布局、文字图片的运用等。只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，制作出的网页才能够有特点、有吸引力。

1.4.2 设计制作页面

网页设计制作是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好进行修改。

在制作大型网站时可以灵活运用模板和库，这样可以大大提高制作效率。如果很多网页使用相同的版面设计，就应为这个版面设计一个模板，然后以此模板为基础创建网页。以后如果想要改变所有网页的版面设计，只需要简单地改变模板即可，如图1-10所示为一个套用模板的网站页面。

1.4.3 网站的发布

1．域名的申请

要想拥有属于自己的网站，首先要拥有域名。域名在互联网上代表网站的名字，只有靠这个名字，浏览者才能在互联网上访问到您的网站。在整个互联网上，没有重复的域名。域名的形式是以若干个英文字母和数字组成，由“.”分隔成几部分，如sina.com就是域名。

域名是lnternet上的名字，是具有商标性质的无形资产，域名对于企业来讲显得格外重要。

2．开通网站空间

网站空间有以下两种常见的主机类型。

● 主机托管：将购置的网络服务器托管于网络服务机构，每年支付一定数额的费用。要架设一台最基本的服务器，购置成本需要数万元，配套软件更要花一笔相当高的费用，另外还需要聘请技术人员负责网站建设及维护。如果是中小企业和个人网站，没有必要采用这种方式。

● 虚拟主机：使用虚拟主机，不仅节省了购买相关软硬件设施的费用，公司也无须招聘或培训更多的专业人员，因而其成本也较主机托管低很多。不过，虚拟主机只适合于小型、结构简单的网站，对于大型网站来说还应该采用主机托管的形式，否则在网站管理上会十分麻烦。

3．网站的上传

网站的上传有多种方式，可以使用Dreamweaver中的“文件”面板来上传站点。Dreamweaver在传输期间会创建站点文件活动的日志，还会记录所有FTP文件传输活动。此外，也可以使用专业的网站上传软件进行站点的上传，如CutFTP，FlashFXP等软件。

1.4.4 网站推广

互联网的应用和繁荣为我们提供了广阔的电子商务市场和商机，但是互联网上大大小小的网站数以百万计，如何让更多的人都能够迅速访问到您的网站是一个十分重要的问题。企业网站建好以后，如果不进行推广，那么企业的产品与服务在网上仍然不为人所知，起不到建立站点的目的，所以企业在建立网站后就应该着手利用各种手段推广自己的网站。网站的宣传推广方式有很多种，下面介绍一些常用的方法。

1．注册到搜索引擎

经权威机构调查，全世界85%以上的互联网用户采用搜索引擎来查找信息，而通过其他形式访问网站的，只占15%不到。这就意味着当今互联网上最为经济、实用和高效的网站推广形式就是加入搜索引擎。目前比较有名的搜索引擎主要有：百度（http://www.baidu.com）、谷歌（http://www.google.cn）、雅虎（http://www.yahoo.com.cn）等。

2．交换广告链接

交换广告链接是宣传网站较为有效的一种方法。登录到广告交换网，填写一些主要的信息，如广告图像、网站网址等，之后它会要求将一段HTML代码加入到网站中，这样网站的广告链接就可以出现在其他网站上了。当然，您的网站上也出现别的网站的广告链接。

另外也可以跟一些合作伙伴或者朋友的公司交换友情链接。当然，这些网站最好是点击率比较高的。友情链接包括文字链接和图像链接。文字链接一般是公司或网站的名称，图像链接包括Logo和Banner链接等，如图1-11所示。

3．直接跟客户宣传

一个稍具规模的公司一般都有业务部、市场部或者客户服务部。可以通过业务员跟客户打交道的时候直接将公司网站的网址告诉给客户，或者直接给客户发E-mail等形式。

4．不断维护更新网站

网站的维护包括网站的更新和改版。更新主要是网站文本内容和一些小图像的增加、删除或修改，总体版面的风格保持不变。网站的改版是对网站总体风格进行调整，包括版面、配色等各个方面。改版后的网站让客户感觉焕然一新。

5．网络广告

网络广告最常见的方式是图像和Flash动画广告，如各门户网站页面上的横幅广告。