第1章网页制作基本知识
刚开始学习网页制作的人，往往不知道从何入手。针对这种情况，本章简单介绍一下网页相关的基础知识和网站建设的基本流程，以使大家对网页有个感性的认识，并从宏观的角度了解一下网站建设。
1.1认识网站与网页
如果读者曾经有过上网的经历，对网站和网页应该不会感到陌生。网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。
另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页），它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其它页面。
下面，我们从网页制作的角度来了解网页的本质和网页的功能组成，以及IP地址、域名、网址、静态网页和动态网页等概念。
1.1.1 网页的本质
图1-1上图显示了腾讯网的主页，由该画面可以看出，网页主要由文字、图像和动画等元素组成。事实上，我们看到的网页包括了一组文件，它们分别是网页文件（扩展名为：.html、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。在浏览器中选择“文件”→“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件，如图1-1中、下图所示。
图1-1 网页及其组成
1.1.2 网页的功能组成
从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将它们分为站标、导航栏、广告条、标题栏和按钮等，如图1-2所示。
图1-2 网页的功能组成
1. 站标
站标也叫Logo ，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo 通常采用企业的Logo 。
Logo 一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合，如图1-3所示。
图1-3 网站Logo 在网页设计中，通常把Logo 放在页面的左上角，大小没有严格要求：不过，考虑到网页显示空间的限制，要求Logo 的尺寸不能太大。此外，Logo 普遍没有过多的色彩和细腻的描绘。
2. 导航条
导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。
设计导航条时，应注意以下几点。
● 如果网站内容不多，可根据网站风格尝试灵活摆放导航条，也可以使用图片或Flash 动画等制作导航条，如图1-4所示。
● 如果网站栏目很多，可以将导航条分为多排放置在Logo 的下方或右侧。为便于观看，可为各排设置不同的底色，如图1-5所示。
图1-4 灵活摆放的导航条
图1-5 多排导航条
3.广告条
广告条又称Banner，其功能是宣传网站或替其它企业做广告。Banner的尺寸可以根据版面需要来安排。
在Banner的制作过程中有以下几点需要注意。
●Banner可以是静态的，也可以是动态的。现在使用动态的居多，动态画面容易引起
浏览者的注意。
●Banner的体积不易过大，尽量使用GIF格式图片与动画或Flash动画，因为这两种
格式的文件体积小，载入时间短。
●Banner中的文字不要太多，只要达到一定的提醒效果就可以，通常是一两句企业的
广告语。
●Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画。要避免出现颜色的
渐变和光晕效果，因为GIF格式仅支持256种颜色，颜色的连续变换会看出明显的断层甚至光斑，影响效果。
4.标题栏
此处的标题栏不是指整个网页的标题栏，而是网页内部各板块的标题栏，是各板块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。
标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定，如图1-6所示。
图1-6 标题栏
5.按钮
在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转或数据的传输等，图1-7是比较常见的几个网页按钮。
图1-7 按钮
1.1.3 IP地址、域名与网址
1. IP地址
虽然互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP 地址有4个小于256的数字组成，数字之间用点间隔。例如“61.135.150.126”就是一个IP 地址。
2. 域名
由于IP地址在使用过程中难于记忆和书写，人们又发明了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们
只需要在浏览器地址栏中输入搜狐网站的域名https://www.doczj.com/doc/4911589489.html,，然后按回车键就可以访问搜狐网站了。
知识库：在创建好网站后需要申请域名和虚拟空间，并将网站上传到虚拟空间（后面将讲述虚拟空间概念），别人才能通过互联网访问你的网站。
3. 网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。
一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。例如，对于图1-8所示的网址“http://page,https://www.doczj.com/doc/4911589489.html,/cp/cp1.html”，“http”是超文本传输协议，“https://www.doczj.com/doc/4911589489.html,”是域名，“cp”是文件在服务器中的路径，“cp1.html”是文件名。
https://www.doczj.com/doc/4911589489.html,/cp/cp1.html
通信协议名称
图1-8 网址示例
知识库：当我们在浏览器地址栏中输入域名，并按下回车键后，本地计算机首先通过浏览器将要浏览的网页地址发送给存放网页的服务器，服务器在收到请求后，即将网页文件及其用到的图像文件、动画文件和其他文件发送给客户机。客户机上的浏览器则通过解释执行网页文件中的命令，将网页完整地显示在浏览器中，整个过程如图1-9所示。
浏览网页的客户机存放网页的服务器
图1-9 显示网页的过程
客户机通过输入网址或其
它操作向服务器提出请求
浏览器通过
解释网页文
件中的命令
来显示网页
1.1.4 静态网页与动态网页
网页根据制作技术的不同分为静态网页和动态网页。完全采用HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与服务器实时交互的网页称为动态网页。下面从不同角度阐述静态网页与动态网页的区别。
●要制作静态网页，用户只需要掌握常用的网页制作软件（如Dreamweaver）就可以
了；而要创建动态网页，除了需要掌握常用的网页制作软件外，还必须掌握诸如
ASP、PHP等动态网页制作技术，以及Microsoft SQL Server或Oracle等数据库管
理系统。
●每一个静态网页都有一个固定的URL，且网页文件名以.htm、.html、.shtml等为后
缀；而动态网页没有固定的URL，且后缀名与网页使用的制作技术对应，通常
为.asp、.jsp、.php等。
●静态网页文件一经发布到服务器上，无论是否有用户访问，每个网页都是客观存
在的，也就是说，静态网页是实实在在保存在服务器上的独立的文件；而动态网
页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个
完整的网页（需要从数据库中调用数据）。
●静态网页的内容相对稳定，因此容易被搜索引擎检索到；动态网页则反之，所以
现在人们一般都将动态网页内容转化为静态网页发布。
●静态网页在网站制作和维护方面工作量较大；而动态网页由于有数据库的支持，
在制作和维护方面要简单容易得多。因此当网站信息量很大，需要经常更新时，
通常采用动态网页制作技术。
●静态网页的交互性较差，在功能方面有较大的限制；而动态网页可以实现交互功
能，如各种论坛、留言板和聊天室等都属于动态网页。
温馨提示：这里需要指出的是，在静态网页上出现的各种动态效果，如.GIF格式的动画、FLASH动画、滚动文字等，这些动态效果只是视觉上的，与动态网页是不同的概念。
1.2网页设计软件和制作技术
制作网站主要用到两类软件，一类是网站管理与网页制作软件，另一类是与网页设计相关的辅助软件。如果要深入学习网页制作的话，还需要掌握HTML语言和脚本语言等。
1.2.1 网站管理与网页制作软件
目前用于网站管理和网页制作的软件主要是Dreamweaver，其功能全面、操作灵活、专业性强。另外，它还可以作为动态网站的开发环境。本书将以该软件为工作环境，并结合诸多实例带领大家共同走进网页制作的大门。
在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等辅助软件，这些软件的主要功能与特点如下。
●Fireworks：Macromedia公司推出的专门针对网页图形图像设计的工具软件。主要
用于制作网页图像、网站标志、GIF动画、图像按钮和导航条等。
●Flash：Macromedia公司推出的动画制作软件。主要用于制作矢量动画，如广告条、
网站片头动画、动画短片和MTV等。此外，利用该软件还可以制作交互性很强的
游戏、网页和课件等。
●Photoshop：Adobe公司出品的一个优秀而强大的图形图像处理软件，起初它的应
用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页
设计的需要（除了多媒体）。
知识库：比较常见的图像处理与动画软件还有：CorelDRAW（优秀的矢量绘图软件）、Illustrator(功能强大的矢量绘图软件)、FreeHand(优秀的矢量绘图软件，也可用来制作网页图像)、GIF Animator（GIF动画制作软件）、Cool3D（特效字动画制作软件）及SwishMax（小巧却十分强大的动画制作工具，支持导出swf格式）等。
1.2.2 HTML语言简介
HTML是Hypertext Markup Language的首字母缩写，中文称作“超文本标记语言”。
1.为什么要学习HTML
HTML语言是网页制作的基础，目前Internet上的绝大多数网页都遵循HTML语言规范，或是由HTML语言发展而来。
以前，人们是靠手写HTML代码来制作网页的，随着网页可视化编辑软件（如Dreamweaver）的出现，我们可以借助软件中的工具、菜单、面板等对网页进行可视化编辑。一般情况下，系统会自动将这些内容转换成HTML代码。这也是Dreamweaver中“设计”视图和“代码”视图的来历（图1-10显示了一个网页的设计视图和代码视图）。
图1-10 网页设计视图和代码视图
虽然在Dreamweaver中用户已不需要直接手工编辑HTML代码。但是，适度地掌握HTML语言也是非常有益的，其原因如下：
●有利于提高网页制作效率和优化网页代码：如果我们对HTML语言很熟悉，就可
以直接手工编写HTML代码，从而提高网页制作效率。此外，如果掌握HTML语
言，可以手工删除网页中多余的或不完整的代码，从而优化网页。
●有利于网页排错：如果在制作网页时出现了什么问题，可以通过检查网页的HTML
代码来进行排除。
●有利于快速提高自己的网页制作水平：我们在浏览网上的各种网页时都可以看到
其HTML源代码。因此，如果掌握了HTML语言，就能通过分析一些优秀网页的
HTML源代码来快速学习一些网页制作手段和技巧。
2.HTML语言的组成
HTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开始并由标签结束，所有的HTML代码都应写在标签与标签之间，如图1-11所示。
图1-11 HTML文档组成
起始标签
与结束标签之间的内容是HTML文档的头部，其中主要包括：由“meta”对象声明的页面类型（“text/html”）和编写方式（“gb2312”），由起始标签