书名：网站规划与网页设计（第3版）pdf/doc/txt格式电子书下载

推荐语：

作者：张兵义,张兵义,张连堂,张鸣等编

出版社：电子工业出版社

出版时间：2013-03-01

书籍编号：30467277

ISBN：9787121198359

正文语种：中文

字数：118486

版次：3

所属分类：教材教辅-大学

版权信息

书名：网站规划与网页设计（第3版）

作者：张兵义

ISBN：9787121198359

版权所有 · 侵权必究

前言

为适应现代技术的飞速发展，培养出技术能力强、能快速适应网站开发行业需求的高级技能型人才，帮助众多喜爱网站开发的人员提高网站的设计及编码水平，作者结合自己多年从事教学工作和Web应用开发的实践经验，按照教学规律精心编写了本书。本书采用任务驱动的案例教学方式，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，自始至终贯穿于本书之中。在实例的设计、制作过程中，把本章节的知识点融于实例之中，使读者能够快速掌握概念和操作方法。为了方便读者阅读和上机操作，每个案例均按“案例展示”、“学习目标”、“知识要点”、“制作过程”和“案例说明”5个部分来进行讲解。

Web标准的最大优点是采用HTML+CSS+JavaScript将网页内容、外观样式及动态效果彻底分离，从而可以大大减少页面代码，更便于分工设计、代码重用。本书作为第3版，主要围绕Web标准的三大关键技术（HTML、CSS和JavaScript）来介绍网页编程的必备知识及相关应用。其中，HTML负责网页结构，CSS负责网页样式及表现，JavaScript负责网页行为和功能。本书采用全新流行的Web标准，以HTML技术为基础，由浅入深，系统、全面地介绍了HTML、CSS、JavaScript的基本知识，以及使用Dreamweaver CS5可视化方式制作网页的技术，内容翔实完整。

本书作为网站规划与网页制作的入门教材，涵盖了网站规划与网页制作的各个部分，主要包括：网络与Web基础知识、网站规划设计、网页设计、HTML基础、HTML高级应用、网页样式表CSS、JavaScript脚本语言、网页编辑工具Dreamweaver CS5、设计Web页面布局、多媒体对象与网页特效和网上购物商城网站综合案例。考虑到网页制作较强的实践性，本书配备大量的页面例题和丰富的运行效果图，能够有效地帮助读者理解所学习的理论知识，系统全面地掌握网页制作技术。本书在每章之后附有大量的实践操作习题，并在教学课件中给出习题答案，供读者在课外巩固所学的内容。

本书条理清晰、内容完整、实例丰富、图文并茂、系统性强，不仅可以作为高等学校计算机及相关专业课程的教材，也可以作为网站建设、相关软件开发人员和计算机爱好者的参考书。

本书主要由张兵义、张连堂、张鸣主编，参加编写的作者有张兵义（编写第1、2、3章），冯全民（编写第4章），张国栋（编写第5章），张连堂（编写第6章），张鸣（编写第7章），张红霞（编写第8章），陈莉红（编写第9章），刘大学、刘克纯、刘大莲、刘庆波、褚美花、骆秋容、徐云林（编写第10章），戚春兰、刘庆峰、缪丽丽、万兆君、陈文明、孙明建、万兆明（编写第11章），本书由刘瑞新教授审阅。参加编写的大部分人员都是具有多年计算机教学与培训经验的教师。限于作者水平，书中难免有不足之处，恳请读者提出宝贵意见和建议。

作者

第1章 网络与Web基础知识

网站规划与网页设计是一门综合课程。对于网页设计开发者，在动手制作网页之前，应该先了解网络与Internet的基础知识，应用程序设计的两种不同结构模式，如何申请域名和站点空间，以及其他相关知识。本章主要介绍创建网站、学习网页设计需要掌握的基本知识。

1.1 Internet概述

1.1.1 Internet简介

Internet即国际计算机互联网，起源于20世纪60年代。当时，美国和前苏联两个超级大国一直在进行冷战，两国储备的核武器足以摧毁整个地球。美国军方最关心的一件事是如何能在通信设备受到核武器袭击后保持联络。按照美国当时的情况，所有的命令和指示都是由通信总指挥部做出的，它一旦被炮火摧毁，整个美国军队之间的通信就会陷入瘫痪状态，后果不堪设想。“分组交换”的思想就是在那时提出的。在分组交换的通信网络中，没有总指挥部，每个结点的地位都是相同的，它们都能发送和接收信息。这样，如果某个结点被敌军摧毁的话，剩余的结点仍可以完成通信联络工作。1968年，基于分组交换原理的计算机网络——ARPANET建成了，这就是Internet的雏形。

之后，ARPANET的应用由军事领域延伸到教育领域，科学家们开始使用ARPANET交换信息，共享研究成果。1983年，TCP/IP协议的建立，使计算机通信有了统一的标准。这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。到了1984年，连在ARPANET上的主机数已超过1000台。1986年，美国国家科学基金会（National Science Foundation，NSF）建立了自己的计算机网络NSFNET，以满足科学研究的需要。NSFNET很快超过了ARPANET而成为最大的计算机网络。1987年，连在NSFNET上的主机数达到1000台，计算机网络开始在民用领域内大有作为。到了1989年，连在网络上的主机数达到10万台，1992年达到100万台。根据2012年国际电信联盟的统计，全球互联网用户总数已经达到20亿人。

Internet在中国也称“因特网”，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。它缩短了人们之间的距离。通过Internet，用户可以与接入Internet的任何一台计算机进行交流，如发邮件、聊天、通话等。

Internet基于TCP（传输控制协议）对数据进行分组和重组。TCP规定了分割数据和重组数据所要遵循的规则和要进行的操作。在分割数据时，TCP为数据包添加一些附加信息，让计算机知道哪些数据包来自于同一个源文件，以及这些数据包在文件中的顺序，从而能在目的地将这些数据包重新组合起来。数据在Internet上的传输往往是远距离的，因此传输过程是通过路由器一站一站地转接来实现的。路由器是一种特殊的计算机，它会检测数据包的目标地址（目标主机的地址），然后决定将该数据包送往何处。

Internet的飞速发展和广泛应用得益于其提供的大量服务，主要服务介绍如下。

1.电子邮件

电子邮件（E-mail）是利用计算机网络交换的电子媒体信件，是Internet上使用最多的信息服务。电子邮件利用计算机的存储、转发原理，通过计算机终端和通信网络进行信息的传送。它不仅能传送普通的文字信息，还可以传送图像、声音等多媒体信息。

2.文件的下载和上传

下载（Download）是指把网上的信息复制到用户使用的计算机中，而上传（Upload）则正好相反，是指上网者把自己计算机中的信息复制到服务器或主机中。相对来说，下载的操作比上传更为普遍。Internet上有许多共享的免费软件，允许用户无偿使用或复制。这样的免费软件种类繁多，从普通的文本文件到多媒体文件，从大型的工具软件到小型的应用软件和游戏软件，应有尽有。

3.信息查询

由于Internet上的信息越来越多，网站多得难以计数，因此人们需要使用浏览器的搜索功能或者专门的搜索引擎来帮助查找有用信息。

4.文件传输

FTP服务器中存储着大量共享文件和免费软件，国内用户无须争抢拥挤的国际通道，就可以由FTP服务器获得所需的文件。利用FTP，可以将Internet一台主机中的文件传输到另一台主机或自己的计算机中。

5.网上聊天

网上聊天是当前网络的一大热点。由于交谈的双方之间存在一种捉摸不清的距离，也许近在眼前，也许远在天边；更由于用户可以在网上畅所欲言，无所不谈，因此其魅力有时甚至远远大于面对面的交谈。

6.BBS电子公告栏

BBS是网上交流的场所，它就像一个公共广告宣传栏，用户可以在BBS服务器上阅读其他人的文章。在这里，用户还可以随意地发表自己的看法，或者对别人的观点提出评论。

7.网上游戏

游戏是一种休闲娱乐的方式，在工作之余玩玩游戏是一种很好的调节。在Internet上，由于联网游戏给人一种参与感和神秘感，因而越来越受到人们的欢迎，特别是青少年对它更是情有独钟。

8.个人主页空间

在浏览过Internet上五彩缤纷的网站之后，用户可能希望拥有自己的个人主页。现在，很多服务器都提供免费的个人主页空间，而且制作网页的软件也越来越多，功能越来越强大，制作个人主页已经成为一种时尚。

9.电子商务

Internet上的电子商务作为一种新兴的技术在全球范围内已经成为引人注目的焦点，它是一种新型的商业模式，不论在经营思路方面还是在商品营销方面，都与传统的商业模式有着巨大的差别，它的出现意味着一个全新的全球性网络经济的诞生。

1.1.2 TCP/IP简介

TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是Internet最基本的协议，简单地说，就是由底层的IP协议和TCP协议组成。自从TCP/IP在20世纪70年代早期被引入之后，该协议已经被广泛地使用在全世界的网络中。在PC、UNIX工作站、小型机、Macintosh计算机、大型机及用于连接客户机和主机的网络设备上都可以使用TCP/IP。通过TCP/IP，成千上万个公共网络和商业网络连接到Internet上，使得大量用户可以对之进行访问。

当计算机通过Internet相互进行通信时，它们使用的协议是TCP/IP。TCP/IP也是大多数中等和大型网络的协议选择。Novell NetWare、UNIX和Windows网络都可以实现TCP/IP，在不断增长的网络和使用客户-服务器模式或者基于Web的应用中更是如此。

1.TCP/IP的分层

TCP/IP的各层分别为主机至网络层、互联网层、传输层和应用层，如图1-1所示。在TCP/IP中，主机至网络层相当于OSI模型中的物理层和链路层；与互联网层等价的部分为网络层；另外一个兼容的协议层为传输层，TCP和UDP都运行在这一层；TCP/IP的应用层协议与OSI模型的高层是相互对应的。

图1-1 TCP/IP各层与OSI模型的对应关系

2.TCP/IP协议簇

TCP/IP是一种分层协议，这一点与OSI模型中的协议层有些类似，但是并不完全相同。TCP/IP协议簇大约包含近100个非专有的协议，通过这些协议，可以高效、可靠地实现计算机系统之间的互联。TCP/IP协议簇中的核心协议主要包括：传输控制协议（TCP）、用户数据报协议（UDP）、网际协议（IP）。对主要协议起补充作用的协议有6个，它们是通过TCP/IP提供的6个应用服务：文件传输协议（FTP）、远程登录协议（TELNET）、简单邮件传输协议（SMTP）、域名服务（DNS）、简单网络管理协议（SNMP）和远程网络监测（RMON）。

3.IP地址

在Internet上连接的所有计算机，从大型计算机到微型计算机都是以独立的身份出现的，称为主机。为了实现各主机间的通信，每台主机都必须有一个唯一的网络地址，就好像每个住宅都有唯一的门牌一样，才不至于在传输资料时出现混乱。Internet的网络地址是指连入Internet网络的计算机的地址编号。所以，在Internet网络中，网络地址唯一地标识一台计算机，这个地址叫做IP地址，即用Internet协议语言表示的地址。

为了便于记忆，将IP地址分为4组，每组8位，由小数点分开，用4个字节来表示，而且，用点分开的每个字节的数值范围是0～255，如218.198.49.73，这种书写方法叫做点数表示法。为充分利用IP地址资源，考虑到不同规模网络的需要，IP协议将32位地址空间划分为不同的地址级别，并定义了5类地址：A～E类。其中，A、B、C三类由InterNIC在全球范围内统一分配；D、E类为特殊地址，一般不使用。IP地址采用高位字节的高位来标识地址级别，A～E类地址的含义如下。

（1）A类

A类地址的前8位代表网络号，剩余的24位可由管理网络地址的管理用户来修改，这24位地址代表在“本地”主机上的地址。A类网络地址的最高位总是0，所以A类地址的网络号从1开始，到127结束。因为本地可管理的空间是由24位组成的，所以在A类地址中，本地地址的数量为16 777 216个。因此，每个得到A类地址的网络管理员都能够为1千6百多万台主机分配地址。

（2）B类

B类地址的前16位代表网络号，剩余的16位可由管理网络地址的用户来修改。这16位地址代表在“本地”主机上的地址。B类网络地址是由最高两位10来标识的，所以B类地址的网络号从128开始，到191结束。每个B类地址网络在本地所管理的16位地址空间大小为65 536。可管理的B类网络个数为16 384个。

（3）C类

C类地址的前24位代表网络号，剩余的8位可由管理网络地址的用户来修改。这8位地址代表在“本地”主机上的地址。C类网络地址是由最高三位110来标识的，所以C类地址的网络号从192开始，到223结束。每个C类地址网络在本地所管理的8位地址空间大小为256。可管理的C类网络个数为2097152个。

（4）D类

D类地址并不反映网络的大小，仅反映了通信是多点传送的。D类地址的范围为224.0.0.0～239.255.255.255。

（5）E类

第5类地址类型是E类地址，用于试验。

除了这些用于分类编址的IP地址外，还有一些特殊的IP地址，如255.255.255.255，这是发送到所有网络位置的广播包；而以127开始的包多用于网络测试。对于一个完整的网络，只需要提供网络ID号，其他字节均为0便可指定。例如，B类网络132.155.0.0，C类网络220.127.110.0。

4.域名

TCP/IP协议簇中包含着一个域名服务（Domain Name Service，DNS）。该服务用于命名组织到域层次结构中的计算机和网络服务。在Internet上，域名与IP地址之间是一一对应的，域名虽然便于人们记忆，但机器之间只能互相认识IP地址，它们之间的转换工作称为域名解析。域名解析需要由专门的域名解析服务器来完成，DNS就是进行域名解析的服务器。

DNS通过一个称为“解析”的过程将域名转换为IP地址，或者将IP地址转换为域名。显然，域名比用点分隔的十进制数IP地址更好记些。既然计算机仍然使用IP地址，那么就必须有一种方法在二者之间进行转换。DNS使用查找表格的方法来将二者的值关联起来。

计算机名称由两部分组成，这与网络ID和主机ID非常相似。一部分是个人或结点的名称，另一部分是组织的名称，两部分用＠（音at）字符分隔，如myname＠myorganization。名称的组织部分通常又被划分为一些子部分，由小圆点（.）分隔，以反映组织的名称、类型、所在的国家等。例如，uwyo.edu表示的是怀俄明（uwyo）大学，这是一家教育组织（edu）。名称的组织部分称为域名，表示所有与组织关联的个人名字都在计算机的同一个域中。

有时大型的组织又被分为多个域。例如，怀俄明大学可能被分为学生的域（student.uwyo.edu）和教职员工的域（fs.uwyo.edu）。

Internet主机域名由三部分组成：最高层的域（TLD）（如国家或组织类型）、可选的子域名（如大学或企业名称）和主机名（如主机计算机的名称）。

IP地址是由Internet编号授权委员会（Internet Assigned Numbers Authority，IANA）分配和协调的，而域名则是由顶级域名（Top Level Domainname，TLD）命名授权给各特定区域的。表1-1中说明了部分组织的Internet TLD域命名约定，表1-2中列出了部分国家的TLD域命名约定。

表1-1 部分组织的域名

表1-2 部分国家的域名

DNS通过客户端的域名解析器和一个或多个主机上的域名服务器来工作。中型和大型网络可能会在一个域中采用多个名称服务器来分布信息流量，然而，通常总会有一个主要的名称服务器（称为权威名称服务器，或根服务器）来维护名称和IP地址的主表。这个表通常规则地分布在辅名称服务器上，并在辅名称服务器上更新。

1.1.3 万维网WWW

1.WWW和浏览器的基本概念

WWW是World Wide Web的缩写，又称3W或Web，中文译名为“万维网”。它作为Internet上的新一代用户界面，摒弃了以往纯文本方式的信息交互手段，采用超文本（Hypertext）方式工作。利用该技术可以为企业提供全球范围的多媒体信息服务，使企业获取信息的手段有了根本性的改善，与之密切相关的是浏览器（Browser）。

浏览器实际上就是用于网上浏览的应用程序，其主要作用是显示网页和解释脚本。对一般设计者而言，不需要知道有关浏览器实现的技术细节，只要知道如何熟练掌握和使用它即可。用户只需要操作鼠标，就可以得到来自世界各地的文档、图片或视频等信息。浏览器种类很多，目前常用的有微软的Internet Explorer（简称IE）、Google的Chrome、Mozilla的Firefox、Opera、Apple的Safari、360安全浏览器及搜狗浏览器等，各浏览器的Logo依次排列如图1-2所示。

图1-2 常用浏览器的Logo

（1）IE浏览器

IE浏览器是目前市场上使用比率最高的浏览器。2011年3月15日，微软推出了IE 9的正式版，该版本支持HTML5、CSS3及大量的安全更新。需要说明的是，IE 9不再支持Windows XP。Windows XP自带的浏览器是IE 6，如图1-3所示是IE 6浏览器的工作界面。其中，IE的标准按钮及其作用说明见表1-3。

图1-3 IE浏览器的工作界面

表1-3 IE的标准按钮及其作用说明

（2）Chrome

Chrome是由Google公司开发的网页浏览器，与Apple公司的Safari相抗衡，浏览速度在众多浏览器中走在前列，属于高端浏览器。Chrome浏览器的代码是基于其他开放源代码软件所撰写的，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效的使用者界面。Chrome浏览器在2011年11月份市场份额正式超过Firefox浏览器，跃居第二。其目前最新版本是Chrome 23。

（3）Firefox

Mozilla Firefox（火狐）浏览器现在是市场占有率第三的浏览器，仅次于微软的IE和Google的Chrome。最新的Firefox 12新增了类型推断（Type Inference）功能，再次大幅提高了JavaScript引擎的渲染速度，使得很多富含图片、视频、游戏及3D图片的网站和网络应用能够更快地加载和运行。

（4）Opera

Opera是由Opera Software开发的网页浏览器，是浏览速度最快的浏览器。Opera适用于各种平台、操作系统和嵌入式网络设备，其目前最新版本是12。

（5）Safari

Safari浏览器是苹果计算机的最新操作系统Mac OS X中的浏览器，用来取代之前的Internet Explorer for Mac，目前该浏览器已支持Windows平台。Safari浏览器使用WebKit引擎。WebKit是自由软件，开放源代码。Safari浏览器目前的最新版本是Safari 5.2。

（6）360安全浏览器

360安全浏览器（360 Safety Browser）是360安全中心推出的一款基于IE内核的浏览器，是世界之窗开发者凤凰工作室和360安全中心合作的产品。360安全浏览器完全突破了传统的以查杀、拦截为核心的安全思路，在计算机系统内部构造了一个独立的虚拟空间——“360沙箱”，使所有网页程序都密闭在此空间内运行。360安全浏览器目前的最新版本是4.1。

不同的浏览器对网页会有不同的显示效果，在Internet Explore中非常漂亮的页面，用其他浏览器显示可能是一团糟。所以，即使现在Internet Explore占据的市场份额最高，也要考虑使用其他浏览器的用户，也许这些用户正是潜在的访客。因此，最好把每个网页都放在不同的浏览器里看看，有什么问题马上解决。

随着宽屏显示器的普及，Web设计师应该注意设计网页宽度的问题。1024分辨率以下的屏幕已经很少了，如果硬要照顾这个分辨率的话，一个800像素宽的页面在1440像素宽的屏幕上看起来会不太协调。1024×768像素、1280×1024像素、1440×900像素是使用最多的三种分辨率，一个网页如果能在这三种分辨率下都具有很好的显示效果是最好的。如果不行的话，应首先考虑1024×768像素，因为现在大多数用户都使用这种分辨率。

2.统一资源定位器（URL）

URL（Universal Resource Locator）是“统一资源定位器”的英文缩写。Internet上的每个网页都具有一个唯一的名称标识，通常称为URL地址。这种地址可以是本地磁盘，也可以是局域网上的某台计算机，更多的是Internet上的站点。简单地说，URL就是Web地址，俗称“网址”。URL的基本结构为：

通信协议：//服务器名称[：通信端口编号]/文件夹1[/文件夹2…]/文件名

各部分含义说明如下。

（1）通信协议

通信协议是指URL所链接的网络服务性质，如HTTP代表超文本传输协议，FTP代表文件传输协议等。

（2）服务器名称

服务器名称是指提供服务的主机的名称。冒号后面的数字是通信端口编号，可有可无，这个编号用来告诉HTTP服务器的TCP/IP软件该打开哪个通信端口。因为一台计算机常常会同时作为Web、FTP等服务器使用，为便于区别，每种服务器要对应一个通信端口。

（3）文件夹与文件名

文件夹是存放文件的地方，如果是多级文件目录，必须指定是第一级文件夹还是第二级、第三级文件夹，直到找到文件所在的位置。文件名是指包括文件名与扩展名在内的完整名称。

3.超文本

超文本（HyperText）技术是一种把信息根据需要链接起来的信息管理技术。用户可以通过一个文本的链接指针打开另一个相关的文本。只要单击页面中的超链接（通常是带下画线的条目或图片），便可跳转到新的页面或另一位置，获得相关的信息。这些页面对应的文件不再是普通的“文本文件”，文件中除包含文字信息外，还包括了一些具体的链接。这些包含链接的文件称为超文本文件。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页方便地转移到另一个相关的网页。超链接不但可以指向其他网页、多媒体文件、图像、音频、视频，甚至可以指向一个程序。超链接是内嵌在文本或图像中的。文本超链接在浏览器中通常带有下画线，而图像超链接是看不到的，只有当用户的鼠标指向它时，指针才会变成手指形状（文本超链接也是如此），如图1-4所示。

图1-4 超链接指针形状

4.超文本置标语言HTML

网页是WWW的基本文档，它是用HTML（HyperText Markup Language，超文本置标语言）编写的。HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。如图1-5所示的是显示在Windows“记事本”程序中的，用HTML编写的网页源代码。如图1-6所示的是经过浏览器“翻译”后显示的对应该源代码的网页画面。

5.HTTP

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议，用于传送WWW方式的数据。当用户想浏览一个网站时，只要在浏览器的地址栏里输入网站的地址就可以了，例如www.baidu.com，在浏览器的地址栏里面出现的却是http：//www.baidu.com。

HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求中包含请求的方法、URI、协议版本，以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，相应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息，以及可能的实体内容。

图1-5 用HTML编写的网页源代码

图1-6 浏览器“翻译”后显示的网页画面

6.常用搜索引擎

搜索引擎（Search Engine）是指根据一定的策略、运用特定的计算机程序搜集互联网上的信息，在对信息进行

....