1.1 网站和网页的基本概念

网页是网站信息发布和表现的一种主要形式，上网浏览实际上就是通过浏览器观看网站中的网页。要设计网站、制作网页，需要深入了解网页和网站的特点，熟悉网页的构成元素，掌握网站和网页的基本概念。

1.网页和网站

网页是一个存放在某处某台与Internet相连的计算机中的文件（也称为文档），网页经过网址（URL）来识别和存取，在浏览器中输入网址后，经过一段复杂而又快速的程序处理，网页文件会被传送到自己的计算机中，然后再通过浏览器来解释网页代码，便可以在屏幕上显示出网页的内容。文字和图片是构成网页的基本元素，部分网页中还包含有动画、音乐、程序等元素。

当移动鼠标指针到网页上的某个位置时，指针会变成一只小手（如图1-1所示），表明该位置是一个链接（也称为超链接、超级链接）。链接是网页设计的精华，通过链接，可以方便地访问到互联网上的许多相关页面，而不用输入难记的URL地址。链接在本质上属于一个网页的一部分，它是一种允许和其他网页或站点之间进行链接的元素，各个网页链接在一起后，才能真正构成一个网站。

网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而IE等浏览器则对这些标记进行解释并生成页面，形成人们平时看到的画面。要查看网页源文件的具体内容，可以在网页的空白处单击鼠标右键，从出现的快捷菜单中选择【查看源文件】选项，系统将打开“原始源”窗口，并在其中显示出网页的源代码文件内容，如图1-2所示。

网页（也称为Web页）一般是以htm或html为后缀的文件，俗称HTML（超文本标记语言）文件。不同的后缀，分别代表不同类型的网页文件，除htm或html文件外，还有以.shtml、.asp、.aspx、.vml、.jsp、.php、.perl、.cgi等为后缀的网页文件。

网页按在网站中的位置不同，网页分为主页和内页两类。主页又称首页，一般进入网站后看到的第一个页面就是主页，该页面通常在整个网站中起导航作用；而内页是指与主页相链接的与本网站相关的其他页面，即网站的内部页面。

网站是由成很多相互关联的网页所组成的一个整体。现实生活中的绝大多数信息，都能在网上查找到。网站的类型很多，常见的主要有综合类网站、新闻类网站、娱乐类网站、行业类网站、求职类网站、电子商务网站、专业资讯类网站、医疗类网站、文学艺术类网站等类型。网站由域名和网站空间构成，它是Internet上用于发布信息的地方。比如百度、腾讯、网易、MSN中文网 、新浪、搜狐、雅虎等都是著名的门户网站。

网站一般由多个网页文件组成，是若干网页文件的集合。如图1-3所示为一个网站的部分文件和文件夹。

2.网页的构成元素

网页是由各种信息元素组成的。常见的元素有文本、图像、动画、视频、Logo、Banner、按钮、链接和版权信息等。

1）文本

文本是网页中的主要内容，也是一个网页传递具体信息的主要载体。网页文本如图1-4所示。设计网页时，应综合考虑文本的大小、颜色、段落、层次等属性。

2）图像

图像可以生动直观地提供各种信息。在网页中合理使用图像，既能产生一定的视觉冲击力，也能简化页面内容，传递那些用文字难以表达的信息，如图1-5所示。

3）链接

链接是指页面对象之间的链接关系，将鼠标指针移动到设置有链接的对象（如文字、图片、标题、动画等）时，鼠标指针就会变成“”形，只需单击鼠标就能打开链接所指向的网页。链接既可以链接网站内部的页面和对象，也可以与其他网站链接。如图1-6所示为一个网页中的图片链接。

4）视频

随着宽带网的普及，网页中视频元素的应用也越来越广泛。如图1-7所示为网页中的一个视频元素。

5）音频

在网页中适当嵌入音频，可以充分显示网页的多媒体特性。特别是随着宽带网的普及，使得网络广播变为现实。如图1-8所示为直接在网页中播放MP3的一个页面。

6）按钮

按钮本质上也是一种链接，通过按钮的形式可以直观地提示浏览者可以进行的操作，图1-9中的“立即关注”链接就是一个用于提交搜索请求的按钮。

7）动画

动画是使网页产生动感的重要元素，用于网页的动画文件一般采用GIF动画格式或Flash动画格式，如图1-10所示。

8）导航栏

导航栏是浏览网页时有效的指向标志，它相当于一个网站的目录。导航栏通过链接与站点中的网页或其他网站进行链接，从而快速切换到另一个栏目。导航栏如图1-11所示。导航栏既可使用文本导航的形式，也可以使用图片导航的形式。

9）Logo

Logo是站点简洁的图形化标志，该标志可提供网站名称、英文网址、网站标志、网站理念等信息。如图1-12所示为几个网站的Logo。

10）Banner

Banner一般用于宣传网页内容，也称为广告条，其位置一般在Logo的右侧。Banner多为动画元素（GIF动画或Flash动画），其形状、色彩的感觉与整个页面的版式和色调相适应。如图1-13所示为1个Banner的效果图。

11）版权信息

版权信息一般位于网页的最下方，用于申明网站的版权和归属权，如图1-14所示为“腾讯网”的版权信息标志。

3.网站和网页的相关术语

网页既是构成网站的基本元素，也是承载各种网站应用的平台。在学习网页设计和构建网站之前，必须了解一些基本的专业术语。

1）WWW

WWW（也称为Web、“万维网”或“环球网”）是一种基于超文本技术的交互式信息浏览检索工具。通过WWW可以在Internet上浏览、传送、编辑超文本格式的文件，并为用户提供一个很容易被掌握、方便浏览的图形化界面，是Internet上应用普遍、功能丰富且使用方法简单的一种信息服务。

2）IP地址

为了区别不同的站点，需要为每个站点分配一个唯一的地址，这个地址称为IP地址。IP地址是分配给主机的一个32位的二进制地址，由4个十进制字段组成，中间用小圆点隔开，如212.110.0.22。

IP地址由一个被称为Interknit的专门组织来进行分配，Interknit组织在各个地区都设有地区网络信息中心，其所做的工作就是为加入Internet的用户分配一个唯一的网络标识地址，以便Internet上的其他用户访问。在Internet中，一个主机可以拥有一个或多个IP地址，但不能将同一个IP地址分配给多个主机，否则会出现通信错误。IP地址被划分为5类，划分规则如下。

● A类：第1个字段的值在0～127之间，通常用于大型网络。

● B类：第1个字段的值在128～191之间，通常用于中型网络或网络管理器。

● C类：第1个字段的值在192～223之间，通常用于小型网络。

● D类：第1个字段的值在224～239之间，通常用于多点广播。

● E类：第1个字段的值在240～255之间，通常用于扩充备用。

3）URL地址

URL（统一资源定位器）也就是通常所说的网址，主要用来标记Internet中某一也是唯一的资源，以便在Internet中定位到某台计算机的指定文件。

URL从外观上看与域名相似，但在域名的前面又加上了资源类型，并且是将Internet提供的服务统一编址的系统。URL相当于Internet上的地址簿，通过URL，可以查找到任何主机中的文件、数据库、图像、新闻组等。URL一般由以下3个部分构成。

● 服务器标识符：通过选择服务器标识符，能够确定将要访问的服务器的类型，如“http：//”表示WWW服务器，“ftp：//”表示FTP服务器，“gopher：//”表示Gopher服务器等。

● 信息资源地址：信息资源地址是由两部分构成的。一是机器名称，如www.chinanews. com.cn用来指示资源所存在的机器；二是通信端口号，是连接时所使用的通信端口号。端口是Internet用来辨别特定信息服务用的一种软件标识，其设置范围是0～65535之间的整数，一般情况下使用的是标准端口号，可以不用写出。在需要特殊服务时会用到非标准端口号，这时就要写出，如http://www.chinanews.com.cn:80。常见的Internet提供服务的端口号，如HTTP的标准端口号为80，TELNET的标准端口号为23，FTP的标准端口号为21，等等。

● 路径：用于指明服务器中某个具体资源的位置，即资源在所在机器上的完整文件名，如http://www.adobe.com/cn/support/dreamweaver/等。

4）域名

IP地址不便于记忆，为此人们提出了一种新方法来代替这种数字，即“域名”。域名相当于主机的门牌号码，比如www.sina.com.cn中的cn代表中国，com代表商业网，sina代表新浪，www代表全球网，整个域名合起来就代表“新浪”网站。

任何网站的域名都是全世界唯一的，域名由固定的网络域名管理组织在全球进行统一管理。访问一个网站时，可以输入这个站点用数字表示的IP地址，也可以输入它的域名地址。输入一个域名地址时，域名服务器就会搜索其对应的IP地址，然后访问到该地址所表示的站点。为了保证域名系统的通用性，Internet中规定了一组正式、通用的标准域，其顶级域名中又包括组织域和地理域两种。

● 组织域：组织域指明了该网址所属的类型，其标识符及含义见表1-1。

● 地理域：地理域指明了该域名对应的国家，一般采用两个字符的国家或地区代码来标识地理域，主要国家和地区的域代码见表1-2。

5）表单

表单在网页中负责进行数据采集，比如在一些交互网页中申请E-mail信箱、填写调查表、留言簿等，就需要用到表单，如图1-15所示为网页中的一个注册表单的示例。

6）HTML

静态网页在本质上一般是由HTML代码构成的。HTML是由一系列HTML标记符号组成的描述性文本，这些标记符号用于说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述的是浏览器所需的信息，而主体则包含所要说明的具体内容。

在Dreamweaver等可视化网页设计工具问世之前，网页设计全靠手工编写代码来完成。例如，要制作出如图1-16所示的只有一句话的简单网页，可以在记事本中编写如图1-17所示的代码。

如果使用Dreamweaver等可视化网页设计工具，只需在“文档”窗口中直接输入文字即可，如图1-18所示。可见，使用可视化网页设计工具在制作网页时相当直观、方便，并且容易上手，就像在Word中进行文本编辑一样。

7）虚拟主机

网页制作完后，需要将构成网页的文件上传到能被访问者浏览的计算机上，以便供全世界的人分享。Internet中存放网页文件的空间，称为虚拟主机。虚拟主机主要通过特殊的软硬件技术，把一台计算机主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名和IP地址（或共享的IP地址），具有完整的Internet服务器功能。在同一台硬件、同一个操作系统上，运行着为多个用户打开的不同的服务器程序，互不干扰；而各个用户拥有自己的一部分系统资源（IP地址、文件存储空间、内存、CPU时间等）。虚拟主机之间完全独立，在外界看来，每一台虚拟主机和一台独立主机的表现完全一样。

目前，国内有很多网络公司提供虚拟主机出租服务，很多网站提供的免费空间也是虚拟主机的一种形式。

8）HTTP协议

HTTP（超文本传输协议）是一种Internet上最常见的协议，用于传输超用文本标记语言编写的文件，即网页。通过这个协议，可以浏览网络上的各种信息，在浏览器上看到丰富多彩的文字与图片。

9）FTP协议

FTP能在两个联网的计算机之间传输文件，它是Internet传递文件最主要的方法。使用匿名FTP，可以免费获取Internet丰富的资源。除此之外，FTP还提供登录、目录查询、文件操作及其他控制功能。

10）静态网页和动态网页

网页可分为静态网页和动态网页两种。所谓静态网页是指与其他系统分离，不能实时上传数据的网页；而动态网页则是指与其他系统衔接，能实时上传更新数据的网页。

静态网页的URL中不含“？”和输入参数，主要包括*.htm、*.html、*.shtml、*.txt、*.xml等格式的网页。动态网页的URL中一般含有“？”或输入参数，常见的有asp、php、perl、cgi等格式的网页。

11）发布

发布就是将制作好的网页上传到Internet上的过程。只有发布后的网页才能在Internet上浏览。网页上传常用工具有CuteFTP、LeapFTP、UploadNow等，利用这些工具可以方便直观地上传、下载文件，从而快速实现网页更新。例如，使用LeapFTP软件，输入上传网站的FTP服务器地址、用户名及密码后，就可连接上主机，左边窗口表示本地文件，右边窗口表示远程文件，只要用鼠标在两个窗口中拖动文件，就可实现文件上传与下载。