网页设计基本概念

• Internet与WWW；
• 网页制作涉及的一些重要概念；
• 网页制作的编程语言与编辑工具；
• 设计Web站点的一般步骤。
2013年7月12日星期五
网页设计基本概念
2
1.2 Internet与WWW
20世纪60年代末，美国人开展计算机网络 互联研究，拉开了计算机网络研究的序幕。 20世纪80年代以来，随着计算机技术的发 展和完善，全世界越来越多的计算机采用各种 通信媒体连接起来，组成了一个超级的“网 络”，这就是人们所称的“Internet” 。
一、 Web服务器 在WWW中，Web是由成千上万台彼此可 以通信的计算机组成的全球网络。其中， 提供信息的每一台计算机均称为Web服务器， 又称为主机。人们利用统一资源定位地址 （URL）的标准格式，提供万维网中Web服 务器的网址。如果使用超文本传输协议 （HTTP）来提供万维网信息资源空间站点 地址的话，则该地址的格式为“http： //…”。
2013年7月12日星期五
网页设计基本概念
32
1.4 网页的内容 请思考一下网页包含什么样的内容？
2013年7月12日星期五
网页设计基本概念
33
1.5静态网页和动态网页
静态网页是指不应用程序而直接或间
接制作成html的网页，这种网页的内容是
2013年7月12日星期五
网页设计基本概念
3
Internet是世界上最大的互联网络。实际
上它是把全世界各个地方已有的各种网络，例 如计算机网、数据通信网以及公用电话交换网 等互联起来，组成一个跨越国界范围的庞大的 互联网，因此，也称为“网络的网络”，参见 图1-1。
2013年7月12日星期五
网页设计基本概念
2013年7月12日星期五
网页设计基本概念
19
图 中 国 互 联 网 络 信 息 中 心 的 主 页 面 用 域 名 登 录
1-3 ( )
2013年7月12日星期五
网页设计基本概念
20
其中，“cnnic.net”是“中国互联网络
信息中心”的域名。在该域名前面加上 “WWW”仅表明该站点是Web服务器，并非用 它来帮助确定其位置。所以，当我们寻找 “中国互联网络信息中心”在万维网中的 站点地址时，输入 “http://www.cnnic.net”与输入 “http://cnnic.net”是等价的。
2013年7月12日星期五 网页设计基本概念 28
三、 Web网页
用浏览器从网上看到的信息统称为网页。
一般来说，人们利用浏览器与Internet上某
一个Web服务器连接成功以后，在浏览器
上首先显示的文档就是该Web服务器的起
始页，称为“主页”，其他的页面就是网
页。
2013年7月12日星期五
网页设计基本概念
将查出的结果通过Internet全部传送到客户 机的计算机内存中。客户机再将服务器送 来的结果转化为一定的显示格式，通过友 好的图形界面（例如，Windows）展示给 用户。这一过程用户是感觉不出来的。 WWW是一种图形化的Internet服务，它的 资源极其丰富。
2013年7月12日星期五 网页设计基本概念 16
1.3 网页制作涉及的一些重要概念
制作网页的目的，一般说来是为了
将其发布到网(局域网或者Internet)上，
这就涉及到建立Web站点，并将站点发布
到某一个WWW的Web服务器上。另外，网
页制作好以后，需要用浏览器进行浏览。
在浏览网页时，第一个页面通常称为主
页。
2013年7月12日星期五 网页设计基本概念 17
球网”、“万维网” ，全国科学技术名词
审定委员会推荐使用的译名为“万维网”。 1984年提出了一种WWW所依存的超文 本(hypertext)数据结构，1989年发展成为 一种新型的信息传播与处理技术，1991年 CERN向世界公布了WWW技术。
2013年7月12日星期五
网页设计基本概念
9
WWW是一种分布式多媒体超文本系统。所
网页设计基本概念
27
目前，Web浏览器的主要开发公司是 微软(Microsoft)和网景(Netscape)。他们 开发的两种主流浏览器Microsoft Internet Explorer(简称IE)和Netscape Navigator/Communicator，在可视化方面 的差别甚微，但对一些特殊技术的支持却 有很大差异，例如，对Java和ActiveX等。 另外，虽然上述两种浏览器都支持HTML， 但Netscape Navigator/Communicator对 HTML代码的解释要比IE严格得多。
2013年7月12日星期五
网页设计基本概念
26
当我们的计算机与上述主机联系成功以
后，该主机便会负责查找到我们所要的文
件，并将其传回到我们的计算机上。另外，
还会将在“index.htm”文件中所包含的一
些相关的图像也传回来，而Web浏览器就
将传回来的所有信息显示在计算机屏幕上。
2013年7月12日星期五
网页设计基本概念
2013年7月12日星期五
14
由于HTML是一种统一的标准语言，所
以，不管服务器程序如何不同，或者服务
器所在站点的计算机操作系统存在多大差
别，用HTML文件提供的信息最终总能为客
户机程序所理解和显示。
2013年7月12日星期五
网页设计基本概念
15
在实际运行中，当服务器接到客户机
的信息查询请求之后，便完成相应的操作，
网页设计基本概念
7
二、 Internet的特点
1. TCP/IP协议是Internet的核心
2. Internet实现了与公用电话交换网的互联
3. Internet是一个用户自己的网络
2013年7月12日星期五
网页设计基本概念
8
三、 对WWW的理解
WWW(World Wide Web)可以译为“环
2013年7月12日星期五 网页设计基本概念 22
图1-4中国互联网络信息中心的主页面(用IP地址登录)
2013年7月12日星期五 网页设计基本概念 23
URL(Universal Resource Locator,全球资源定位
法)，URL所代表的正是Web服务器的网址。
http://www.happywin.com:8001/Windows/project.html 通 讯 协 议 服 务 器 名 称 通 讯 端 口 文 件 夹 文 件
2013年7月12日星期五
网页设计基本概念
24
表1-2 URL所链接的服务 协议 http:// ftp://
URL所连接的服务 Web服务
实例
http://www.ratvu.com ftp://ftp.nctuccca.edu/ mailto:wjy@ratvu.com
文件传输服务
mailto:
2013年7月12日星期五 网页设计基本概念 6
3. 从提供信息资源的角度来看
Internet是一个集各个部门、各个领域内 各种信息资源为一体的超级资源网。 4. 从网络管理的角度来看 Internet是一个不受政府或某个组织管理 和控制的，包括成千上万相互协作的组织和网 络的集合体。
2013年7月12日星期五
第1讲 网页设计基本概念
引言 Internet与WWW 网页制作涉及的一些重要概念
网页的内容
网页的类型 网页制作的编程语言与编辑工具 设计Web站点的一般步骤
2013年7月12日星期五
网页设计基本概念
1
1.1 引言
无论是在Internet上创建Web站点和发布主页， 还是在Intranet上张贴文本和图形文件，都需要 涉及设计Web站点和制作网页。 本讲将首先介绍如下一些基本问题：
谓“超文本”是指它的信息组织形式不是简单 地按顺序排列，而是由指针连接的复杂的网状 交叉索引方式。 WWW的出现对Internet的发展起了巨大的
推动作用，作出了重大的贡献。WWW本身是多
种技术组合的产物，它可以不依赖于Internet
的存在而运行。而WWW与Internet相结合，更
使Internet如虎添翼，为Internet的进一步普 及铺平了道路。
2013年7月12日星期五 网页设计基本概念 21
域名实质上是主机名字的一种标识，它 与IP地址是一一对应的。例如，域名 “cnnic.net”的IP地址是 “159.226.1.19”。IP地址具有32位二进 制数字。为了便于用户记忆，人们发明了 利用域名代替IP地址的直接使用。因此， 输入用IP地址表示的站点地址“http:// 159.226.1.19”，与输入用域名表示的站点 地址“http://www.cnnic.net”，其效果是 相同的，如图1-4所示。
4
图1-1 Internet的用户视图及内部具体结构
2013年7月12日星期五 网页设计基本概念 5
一、对Internet的理解 1. 从网络互联的角度来看 Internet利用成千上万个具有特殊功能的 专用计算机（称为路由器或网关），通过各种 通信线路，把分散在各地的网络在物理上连接 起来。 2. 从网络通信的角度来看 Internet是一个用TCP/IP（Transmission Control Protocol/Internet Protocol）协议 把各个国家、各个部门、各种机构的内部网络 连接起来的超级数据通信网。
2013年7月12日星期五
网页设计基本概念
25
二、 Web浏览器
在WWW中，Web浏览器是使其得以正
常进行工作的关键组成部分之一。Web浏
览器也是人们通过个人计算机浏览Internet
时必需的工具软件。它在读取Web服务器
上的HTML文件的同时，必须与组成万维网 的成千上万台Web服务器中的一台进行通 信联系。
2013年7月12日星期五 网页设计基本概念 18
例如，“中国互联网络信息中心”在
万维网中的站点地址是
“http://www.cnnic.net”。如果用户在
Microsoft Internet Explorer或者
Netscape Navigator浏览器“地址”处输
入该地址，便可以浏览到该站点主页的信 息，参见图1-3。
2013年7月12日星期五
网页设计基本概念
11
它将用户的要求转换成一个或多个标准的信
息查询请求，通过Internet发送给远方提供
信息的服务器；而服务器则执行一个服务
器程序。Web的客户机程序与服务器程序
之间通过超文本传输协议（hypertext
transfer protocol,HTTP)进行通信，如图
29
图1-5 “中国互联网络发展状况统计”的页面
2013年7月12日星期五 网页设计基本概念 30
Web服务器的最主要特征之一就是它
具有使一个HTML文件链接到另一个HTML
文件的能力，这种能力称为“超链接”。
另外，Web服务器具有的这种超链接能力， 还可以使位于世界不同地方的任何两台 Web服务器中的信息连接起来。 什么是超链接——一种与其它文件的链接， 当用户点击后，所链接的信息就能显示出 来。
1-2所示。
2013年7月12日百度文库期五
网页设计基本概念
12
图1-2 WWW的客户机/服务器模式
2013年7月12日星期五 网页设计基本概念 13
HTTP提供的功能包括实现Web客户机 与服务器的连接，发出带文件名的访问请求， 接收文件以及关闭连接等。
为了使客户机程序能找到位于整个 Internet范围内的某种信息资源，WWW系 统使用统一的URL。客户机程序就是凭借输 入的URL找到相应的服务器并与之建立联系 和获得信息的。服务器提供的信息一般是用 超文本标记语言（hypertext markup language,HTML)写成的信息文件。
2013年7月12日星期五 网页设计基本概念 31
一般来说，Web页面的元素有文本、
列表、图像、超链接、书签、音频、视频、
表格、表单和框架等。其中，表格、表单
和框架属于复合元素，它们本身可以包含
多种基本元素。这些五彩缤纷和千姿百态
的Web 网页是如何制作出来的？制作好网 页以后又如何将它发布到Internet上？这些 正是本课所要阐述的主题。
2013年7月12日星期五 网页设计基本概念 10
四、 WWW的运行机制
WWW的运行机制是使用客户机/服务
器模式。当用户查询信息时，便执行一个
客户机程序，并输入一个统一资源定位地 址(uniform resource location，URL)， 客户机程序也被称为“浏览器”（browser） 程序。随后，浏览器程序将成为一个客户， 该程序将负责对用户的直接服务。