第1章 网络与Web基础知识础.ppt

1、网站规划与网页设计,电子工业出版社同名教材 配套电子教案 2006.4,1.1 Internet概述 1.2 浏览器-服务器模式 1.3 Web标准,第1章 网络与Web基础知识,Internet即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。它缩短了人们之间的距离。通过Internet，用户可以与接入Internet的任何一台计算机进行交流，如发邮件、聊天、通话等。在这一节中，主要介绍Internet的工作原理、Internet发展简史及其提供的主要服务等基础知识，让

2、用户对Internet有个大致的了解。,1.1 Internet概述,1.1.1 Internet的工作原理 所谓计算机网络，就是将各自独立的计算机主机（结点）通过通信线路连接而成的信息技术系统。Internet是一种全球范围的基于分组交换原理和TCP/IP的计算机网络。它将信息进行分组（分割为许多小数据包）后以数据包为单位进行传输。Internet在进行信息传输时要完成的任务主要有两项：一是正确分割源文件，以及在目的地将同一源文件的数据包准确地重组起来；二是将数据包准确地送往目的地。 1.1.2 Internet发展简史 Internet起源于20世纪60年代。1968年，基于分组交换原理的

3、计算机网络ARPANET。1983年，TCP/IP协议的建立，使计算机通信有了统一的标准。这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。,1.1 Internet概述,1.1.3 Internet提供的主要服务 1电子邮件 2文件的下载和上传 3信息查询 4文件传输 5网上聊天 6BBS电子公告栏 7网上游戏 8个人主页空间 9电子商务,1.1 Internet概述,1.1.4 TCP/IP简介 当计算机通过Internet相互进行通信时，它们使用的协议是TCP/IP（传输控制协议/网际协议）。,1.1 Internet概述,图1-1 TCP/IP各层与OSI模型的对应关系,

4、1TCP/IP的分层 TCP/IP的各层分别为主机至网络层、互连网层、传输层和应用层。如图1-1所示，在TCP/IP中，主机至网络层相当于OSI模型中的物理层和链路层；与互连网层等价的部分为网络层；另外一个兼容的协议层为传输层，TCP和UDP都运行在这一层；TCP/IP应用层协议与OSI模型的高层是相互对应的,1.1.4 TCP/IP简介 2TCP/IP协议 TCP/IP是一种分层协议，这一点与OSI模型中的协议层有些类似，但是并不完全相同。TCP/IP大约包含近100个非专有的协议，通过这些协议，可以高效、可靠地实现计算机系统之间的互联。TCP/IP协议簇中的核心协议主要有：传输控制协议（T

5、CP）、用户数据报协议（UDP）、网际协议（IP）。 对主要协议起补充作用的协议有5个，它们是通过TCP/IP提供的5个应用服务：文件传输协议（FTP）、远程登录协议（TELNET）、简单邮件传输协议（SMTP）、域名服务（DNS）、简单网络管理协议（SNMP）和远程网络监测（RMON）。,1.1 Internet概述,1.1.5 IP地址和域名 1IP地址 IP地址共占用32位，一般以4个十进制数字表示，每个数字之间用小圆点（.）隔开，例如，“05”，这种记录方法称为“点数”记号法。通常用IP地址标识一个网络和与网络连接的一台主机。IP地址采用一种两级结构，一部分表示

6、主机所属的网络，另一部分表示主机本身，主机必须位于特定的网络中，IP地址的基本组成为：“网络标识号主机标识号”。 为充分利用IP地址资源，考虑不同规模网络的需要，IP协议将32位地址空间划分为不同的地址级别，并定义了5类地址，AE类。其中，A、B、C三类由InterNIC在全球范围内统一分配；D、E类为特殊地址，一般不使用。,1.1 Internet概述,1.1.5 IP地址和域名 2域名 TCP/IP包中包含着一个域名服务（Domain Name Service，DNS）。DNS通过一个名为“解析”的过程将域名转换为IP地址，或者将IP地址转换为域名。名字比用点分隔的十进制数IP地址更好记些

7、。既然计算机仍然使用IP地址，那么就必须有一种方法在二者之间进行转换。DNS使用查找表格的方法来将二者的值关联起来。 Internet主机域名由三部分组成：最高层的域（TLD）（如国家或组织类型）、可选的子域名（如大学或企业名称）和主机名（如主机计算机的名称）。,1.1 Internet概述,1.1.5 IP地址和域名 2域名 表1-1中说明了部分组织的Internet TLD域命名约定，表1-2中列出了部分国家的TLD域命名约定。,1.1 Internet概述,表1-1,表1-2,1.1.6 万维网WWW 1WWW和浏览器的基本概念 WWW是World Wide Web的缩写，又称3W或We

8、b，中文译名为“万维网”。它作为Internet上的新一代用户界面，摒弃了以往纯文本方式的信息交互手段，采用超文本（Hypertext）方式工作。利用该技术可以为企业提供全球范围的多媒体信息服务，使企业获取信息的手段有了根本性的改善，与之密切相关的是浏览器（Browser）。 浏览器实际上就是用于网上浏览的应用程序，其主要作用是显示网页和解释脚本。对一般设计者而言，不需要知道有关浏览器实现的技术细节，只要知道如何熟练掌握和使用它即可。用户只需要操作鼠标，就可以得到来自世界各地的文档、图片或视频等信息。,1.1 Internet概述,1.1.6 万维网WWW 1WWW和浏览器的基本概念 浏览器种

9、类很多，目前常用的有Internet Explorer（简称IE）和Netscape两种。如图1-2所示的是IE浏览器的工作界面。,1.1 Internet概述,图1-2 IE浏览器的工作界面,1.1.6 万维网WWW 2统一资源定位器（URL） URL（Universal Resource Locator）是“统一资源定位器”的英文缩写。每个站点及站点上的每个网页都有一个惟一的地址，这个地址被称为统一资源定位地址。向浏览器输入URL地址，可以访问其指向的网页，指定网页中的超文本时也要用到URL地址。 URL的基本结构为： 通信协议：/服务器名称:通信端口编号/文件夹1/文件夹2/文件名,1.

10、1 Internet概述,1.1.6 万维网WWW 3超文本 超文本（HyperText）技术是把一些信息根据需要链接起来的一种信息管理技术，用户可以通过一个文本的链接指针打开另一个相关的文本。只要单击页面中的超链接（通常是带下划线的条目或图片），便可跳转到新的页面或另一位置，获得相关的信息。 通常所说的网站或网页，就是由一个或多个超文本组成的，而进入网站首先看到的那一页称为首页或主页（HomePage）。通常由主页上的超链接引导用户跳转到其他位置。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。,1.1 Intern

11、et概述,1.1.6 万维网WWW 4超文本置标语言HTML 网页是WWW的基本文档，它是用HTML（HyperText Markup Language，超文本置标语言）编写的。如图1-4所示的是显示在Windows“记事本”程序中的，用HTML编写的网页源代码。如图1-5所示的是经过浏览器“翻译”之后显示的对应该源代码的网页画面。,1.1 Internet概述,图1-4 HTML编写的网页源代码,图1-5 浏览器“翻译”之后显示的对应该源代码的网页画面,1.1.6 万维网WWW 5HTTP HTTP（HyperText Transfer Protocol，超文本传输协议）是在Internet

12、上传送超文本的协议，它是运行在TCP/IP集之上的应用协议。它可以使浏览器更加高效，使网络传输量减小。任何服务器除了包括供用户访问的HTML文件以外，还有一个HTTP驻留程序，用于响应用户的请求。在打开一个网页时，浏览器是HTTP客户，向服务器发送请求。当浏览器中输入一个HTTP的URL地址或单击一个超链接时，浏览器就向服务器发送一个HTTP请求，此请求被送往由IP地址指定的URL。服务器驻留程序接收到请求，在进行必要的操作后回送所要求的HTML源文件，最后在客户端浏览器将HTML源文件“翻译”成Web页面。简单地说，HTTP就是专门为WWW设计的协议。,1.1 Internet概述,1.1.

13、6 万维网WWW 6主页 主页通常作为一个站点中的目录或索引，就像一份报纸的头版一样，把最热门、最重要的消息写在上面，然后再注明“详见第X版”，让读者能快速找到自己感兴趣的新闻。 7常用搜索引擎 搜索引擎本身是一个网络站点，它能够在WWW上主动搜索其他Web站点中的信息并记录下各个网页的Internet地址（也称URL地址），并按要求进行排列，存放在可供查询的大型数据库中。这样，用户可以通过访问搜索引擎网络站点对所需信息进行查询。查询结果是一系列指向包含用户所需信息的网页的网络地址，通过单击超链接，就可以查看需要的信息了。在Internet上，提供信息查询服务的搜索引擎很多，它们一般分为两类：

14、中文搜索引擎和英文搜索引擎。,1.1 Internet概述,随着Internet和Intranet的迅速发展，网络已经成为人们获取和交换信息的最有效的途径。同时，应用程序的设计已经由传统的C/S（Client/Server，客户-服务器）模式逐渐向B/S（Browser/Server，浏览器-服务器）模式过渡。 C/S模式是大家熟知的软件系统体系模式，通过将任务合理分配到Client端和Server端，降低了系统的通信开销，可以充分利用两端硬件环境的优势。 B/S模式是随着Internet技术的兴起，对C/S模式的一种变化或者改进的模式。在这种模式下，用户界面完全通过WWW浏览器实现，一部分事

15、务逻辑在前端实现，但是主要事务逻辑在服务器端实现。B/S模式利用不断成熟和普及的浏览器技术实现原来需要复杂专用软件才能实现的强大功能，并节约了开发成本，是一种全新的软件系统构造技术。,1.2 浏览器-服务器模式,B/S模式的工作原理如图1-8所示。,1.2 浏览器-服务器模式,图1-8 B/S模式的工作原理,1.3 Web标准,大多数网页设计人员都有这样的体验，每次主流浏览器版本的升级，都会使用户建立的网站变得过时，此时就需要升级或者重新建网站。同样，每当新的网络技术和交互设备出现时，设计人员也需要制作一个新版本来支持这种新技术或新设备，类似的问题举不胜举，例如，网站代码臃肿，浪费了大量的网络

16、带宽；针对某种浏览器的DHTML特效屏蔽了部分潜在的客户，使之无法浏览网站等。这是一种恶性循环，是一种巨大的浪费。 在W3C（W3C.org）的组织下，Web标准开始被建立（以2000年10月6日发布XML 1.0为标志），并在网站标准组织（WebS）的督促下推广执行。,1.3 Web标准,1.3.1 Web标准的概念 1. 结构标准语言 (1) XML XML（Extensible Markup Language，可扩展标识语言）目前推荐遵循的是W3C于2000年10月6日发布的XML1.0。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需

17、要，后来逐渐用于网络数据的转换和描述。 (2) XHTML XHTML（Extensible HyperText Markup Language，可扩展超文本标识语言）是HTML向XML过渡的一个桥梁。是一个引导人们逐步走向规范、走向XML的过渡方案。XHTML虽然有“X”但它并不能扩展，只是在HTML的基础上严格遵循XML规范。,1.3 Web标准,2. 表现标准语言 当讨论Web标准时，总是提及结构和表现分离的重要性。结构是文档中的主体部分，由语义化、结构化的标记组成。表现是赋予内容的一种样式，在大多数情况下，表现就是文档看起来的样子。尽可能地把结构和表现相分离，这样当表现变化时，不用去更

18、改结构。 CSS（Cascading Style Sheets，层叠样式表）目前推荐遵循的是W3C于1998年5月12日推荐的CSS2（/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。,3. 行为标准 (1) DOM 根据W3C DOM规范（/DOM/），DOM（Document Object Model，文档对象模型）是一种与浏览器、平台、语言的接口，使得用户可以访问页面其他的标准组件

19、。简单理解，DOM解决了Netscaped的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。 (2) ECMAScript ECMAScript是ECMA（European Computer Manufacturers Association，欧洲计算机制造协会）制定的标准脚本语言。目前推荐遵循的是ECMAScript 262。,1.3 Web标准,1.3.2 建立Web标准的目的 简单地说，建立Web标准的目的是： 提供最大利益给最多的网站用户； 确保任何网站文档都能够长期有效； 简化代码，降低建设成