1.1 网页制作基础知识

本节介绍网页设计基本概念，包括网页、网站、超链接等。学好这些知识是制作出规范、美观的网页的前提。

1.1.1 网页的定义和分类

上网时浏览的一个个页面就是网页，网页又称为Web页，其中的图像、文字、超链接等是构成网页的基本元素，图1-1所示为新浪网首页。网页可按其在网站中的位置分类，也可按其表现形式分类。

1.按位置分类

按网页在网站中的位置可将其分为主页和内页。主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面（首页）；内页是指与主页相链接的页面，也就是网站的内部页面。

一些网站的首页并非主页，其作用只是为了欢迎访问者或者引导访问者进入主页，所以首页并不一定就是主页。

2.按表现形式分类

按网页的表现形式可将其分为静态网页和动态网页，具体含义如下。

（1）静态网页

静态网页是指用HTML语言编写的网页，一般以.htm、.html、.shtml、.xml等作为扩展名。在HTML格式的页面中，可以出现各种动态效果，如GIF格式的动画、Flash动画、滚动字母等。其制作方法简单易学，但灵活性比较差。

静态网页有如下特点。

● 每个静态网页都有一个固定的URL，网页URL以.htm、.html、.shtml等形式为后缀。

● 网页内容一旦发布到网站服务器上，每个网页都是一个独立的文件。

● 静态网页的内容相对稳定，容易被搜索引擎检索到。

● 静态网页没有数据库的支持，因此在网站维护和制作方面工作量都比较大。当网站信息量很大时，完全以静态网页的方式来建立网站是比较困难的。

● 由于静态网页的交互性较差，在交互性和实时性方面受到限制。

（2）动态网页

这类网页使用ASP、PHP、JSP和CGI等程序生成，具有动态效果，其制作方法较静态网页复杂。常见的动态网页是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，动态网页可以是纯文字内容的，也可以包含各种动画内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

动态网页有如下特点。

● 动态网页一般以数据库技术为基础，这对于降低网站的维护工程量大有好处。

● 采用动态网页技术制作的网站可以实现更多的功能，如在线调查、互动交流等。

● 动态网页是不独立存在于服务器上的网页，只有在请求服务器时才会返回一个完整的网页。

● 动态网页中的“？”对搜索引擎检索存在一定的问题，采用动态网页的网站在进行搜索时，只有做一定的技术处理才能适应搜索引擎的要求。

静态网页和动态网页不是以网页中是否包含动态元素来区分的，而是针对客户端与服务器端是否发生交互行为而言的。不发生交互的是静态网页，发生交互的是动态网页。

1.1.2 网页设计的相关概念

在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、导航条、超链接、表单、URL、IP地址以及域名，需掌握其具体含义才能在网页制作过程中轻松操作。下面分别讲解这些专业名词。

● 站点：站点是一个管理网页文档的场所，简单地讲，一个个网页文档链接起来就构成了站点。站点可以小到一个网页，也可大到一个网站，图1-2所示为腾讯网的首页。

● 发布：发布就是把制作好的网页上传到网络中的过程。

● 浏览器：浏览器是一种把互联网上的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，可以快捷地连接Internet。目前使用人数最多的浏览器是Microsoft公司的IE浏览器，电脑中安装了操作系统都会捆绑安装IE浏览器，图1-1所示为IE浏览器打开的网页。另外，还有很多其他浏览器可供用户安装使用，如腾讯TT浏览器、火狐浏览器、360安全浏览器以及搜狗浏览器等。

● 导航条：导航条就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航条链接着各个页面，只要单击导航条中的超链接就能进入相应的页面。

● 超链接：超链接在网页中起着重要的作用，主要用于将不同页面链接起来，链接的范围可以是同一站点内的页面，也可以是其他网站的页面。超链接主要有文字链接和图像链接等。通常，将鼠标指针移动到网页对象上，如果该对象是一个超链接，鼠标指针会变为一个手形，单击超链接就能打开其指定的目标网页。

● 表单：表单是具有交互性的动态网页，常用于在注册网站会员和申请邮箱等活动时提交用户信息，图1-3所示为申请新浪邮箱的表单。

● URL：URL（Uniform Resource Locator，统一资源定位符）主要用于指明通信协议和地址的方式，如http://www.163.com就是一个完整的URL。“http://”形式的URL用于表示网页的Internet位置，而“ftp//”则是用于表示文件传输的一种URL形式。

● IP 地址：IP 地址就是为连接在 Internet 上的每一个主机分配的一个 32bit 地址，Internet上的每台主机的IP地址都是唯一的，就像生活中的门牌号，在网络中就命名为IP地址。IP地址分为A、B、C、D、E五类，常用的是B和C两类，如192.168.1.1为一个C类IP地址。

● 域名：域名就如同是网站的地址，Internet 中任何网站的域名都是全世界唯一的，所以域名也就是网站的网址，如 www.sina.com.cn 就是新浪网站的域名。域名由固定的网络域名管理组织在全球进行统一管理，用户需到各地的网络管理机构进行申请，申请成功后才能获取域名，然后将其与网站服务器的IP地址绑定，访问者通过域名就可以访问服务器中的网页，例如新华网的域名是news.xinhuanet.com。

1.1.3 网页的基本组成元素

网页是由多种元素组成的。文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。而其他的很多元素（如超链接等）都是基于这两种基本元素而创建的。

从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。以内容来划分，一般的网页界面包括网站Logo、Banner、导航栏、内容栏和版尾等部分。

1.Logo

Logo（意译为标识、标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现，其制作要点如下。

● Logo 的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo醒目，让浏览者能很快看到。

● Logo的内容通常包括特定的图形和文本，其具体内容应与开发网站的企业文化紧密结合，以体现网站的特色，图1-4所示为新浪网的Logo。

2.Banner

Banner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素及120像素×240像素等。其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小应在15KB左右，而88像素×31像素的Banner文件大小最好在5KB左右。除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网首页特卖活动横幅广告。

3.导航栏

导航栏是网页重要的设计内容，网页中的导航栏是帮助用户快速访问所需内容的辅助工具。根据网站的大小及内容多少，一个网页可以设置多个导航栏，还可以设置多级的导航栏以显示更多的导航内容。在导航栏的设计中，还可以采用由 Flash 或脚本等方式实现的动画元素来吸引用户访问，图1-6所示为新华网首页的导航栏。

导航栏内包含的是实现网站功能的按钮或链接，其项目的数量不宜过多。一般情况下，同级别的项目数量以3～7个为宜。超过这一数量后，应尽量放到下一级别处理。设计合理的导航栏可以有效地提高用户访问网站的效率。

导航栏按照放置的位置可分为横排和竖排两种；按照表现形式则有图像导航、文本导航和框架导航等。导航栏的制作需注意以下几点。

● 最好不用图片导航，如必须使用应控制图片大小。

● 内容丰富的网站可以使用框架导航，这样可以快速地在网站内的各栏目之间跳转，且只需下载一次导航页面。

● 在栏目不多的情况下，通常使用一排来排列，如一般的个人网站或企业网站；如果导航栏目太多，可分两排或多排进行排列。

4.内容栏

内容栏是网页内容的主体，通常由一个或多个子栏组成，包含网页提供的所有信息和服务项目。

● 内容栏的内容既可以是图像，也可以是文本，或图像和文本结合的各种内容。

● 在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户体验。

● 如网页的内容较少，则可以使用单独的内容栏，添加大量的图像使网页更加美观。

5.文本

文本体积小，在网络上传输速度快，用户可以快速地浏览和下载，是网页主要的信息载体。网页中文本的样式多变，风格不一，吸引人的网页通常都具有美观的文本样式。文本的样式可通过对网页文本的属性进行设置来调整，在后面的章节将详细讲解这方面的知识。

编辑文本时需注意以下几点。

● 文本的颜色需要能够明显地与背景区别开来，让浏览者能清楚地看到文本。

● 每行文字最好为20～30个汉字的长度，并注意段落的区分和缩进，以便于阅读。

● 同版面文本样式不宜过多，最好在3种以内。

6.图像

图像比文本更具有生动性和直观性，它可以传递一些文本不能传载的信息，如网站标识、背景等一般都是图像。

图像是网页中不可或缺的元素。使用图像时，除了考虑美观，还应考虑它对网页下载速度的影响。在选择图片时应注意以下几点。

● 图像应采用淡色系列的背景，能与主题分离的则用浅色标志或文字背景。

● 图像的主题要清晰可见，所表达的含义要简单明了。

● 图像中的文字要求清晰可辨，不可出现朦胧、辨识不清的情况。

7.按钮

按钮的大小没有具体的规定，需注意的是，按钮要和网页的整体效果协调，不要太抢眼。一般采用背景较淡、字体较深的方式，也可采用具有较强对比度的颜色。

8.Flash动画

Flash 动画越来越多地融入了使用适合自身风格的动画元素来展现形象或者展示信息的网页中。网络广告的形式不断翻新，越来越多的动画技术被应用在网络广告的推广领域。尤其是互动类纯Flash网站风靡网络，已成为影响设计师设计风格的一个重要因素，正因为如此，基于Flash的互动式网站也成为了创意思潮的一个风向标。从静止到动起来，从粗糙的动画到对设计师创意的诠释，从动画展示到动画与功能完美的结合，从枯燥的展示到互动和用户体验理念的融入，从单一的软件运用到视频等其他软件和技术与 Flash 的配合，从平面的动态效果到如今三维动画的流行，Flash已经在网页设计中发挥越来越重要的作用。

9.版尾

版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据以及为用户提供各种提示信息等。除此之外，在版尾部分还可以提供独立的导航条，为将页面滚动到底部的用户提供一个导航的替代方式，图1-7所示为新华网首页的版尾。

1.1.4 网页制作开发工具

1.记事本程序

HTML代码可以使用Windows操作系统自带的记事本（Notepad）进行编辑。使用时只需用鼠标依次单击“开始”→“程序”→“附件”命令即可找到记事本编辑器，如图1-8所示。

2.EditPlus编辑器

不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写HTML，如写字板、Word等，但保存的时候文件名后缀必须保存为.htm或.html。

一些专业的文本编辑器提供了更快捷的网页代码录入功能，如自动添加标记、高亮显示一些关键字、同时编辑多文件、全屏浏览功能等。EditPlus就是这样一款非常好用的HTML编辑器，除了支持颜色标记、HTML标记，同时支持C、C++、Java等其他语言。另外，它还有完整的CSS指令功能，编写网页代码可达到事半功倍的效果，图1-9所示为EditPlus的一个界面截图。

3.Dreamweaver网页编辑软件

对于初学网页设计的人来说，一开始就使用HTML代码制作网页会觉得比较困难，尤其是没有写过程序的人。现在有很多可视化的网页开发工具，强调的是所见即所得（What You See is What You Get），即使一个不懂HTML语法的人也可以用这些工具设计出很复杂的网页，这些开发工具有微软公司推出的 FrontPage、Adobe 公司推出的 Dreamweaver 等。本书的网页制作主要采用Dreamweaver CS6工具，本章的1.2节将专门介绍Dreamweaver CS6的特点、功能及基本操作。

4.图像处理软件

在网页中加上图像的点缀，可以使网页更丰富多彩。图像处理软件很多，在制作网页时常用的图像处理软件是Photoshop和Fireworks。

5.动画制作软件

Flash动画是网页中普遍使用的一种动画格式，它需要使用Flash软件进行制作。GIF动画也常常用在网页中，可以使用Fireworks或Adobe ImageReady进行制作。

6.网页配色软件

网页色彩的把握是网页制作中的一个重点和难点，使用一些专门的网页配色软件可以方便地创建网页色彩方案。这方面的软件有玩转颜色和网页本色等。另外，某些网站也提供网页配色的设计，如蓝色理想、sinid.com网站等。

1.1.5 如何学好网页制作

网页制作分为前台制作和后台制作，前台制作主要是生成静态的页面，而后台制作则需要编写程序以实现网页和数据库的交互。

如果进行前台制作，主要应掌握图像的制作、处理以及使用Dreamweaver进行静态网页制作的技能。在此基础上，进一步掌握制作Flash动画的能力，并了解一些HTML、JavaScript及CSS的知识。

如果进行后台制作，需要掌握 HTML、JavaScript、CSS、ASP、PHP、JSP、数据库及 Web服务器的配置等知识。

学习网页制作是一个循序渐进的过程，除了勤学多练外，还需要在美学方面有一定的悟性。以下是一些好的学习方法。

● 在学习网页制作时，应先从最简单的网页入手，由易到难。学习过程中应注重理论联系实际，这样可增强学习兴趣。

● 制作网页不能闭门造车，需对优秀的网页进行分析和借鉴，对某些可用的元素可直接调用，同时也要不断创新，大胆尝试各种制作方法。

● 在网页制作学习的初期阶段不必关心太多的网页设计语言，在有一定网页设计基础后，再学习一些编程语言（如HTML、JavaScript和CSS等）。