网页设计
主讲：陈红美
2004至 2005学年第一学期
介绍网页基础知识
一、介绍的网页的基础知识
1、什么是 WWW？ >>>
2、什么是网页？ >>>
3、什么是超级文本？ >>>
4、什么是 HTML？ >>>
5、什么是浏览器？ >>>
6、什么是网站？ >>>
二、介绍 HTML语言基础知识
一、介绍的网页的基础知识
WWW是 World Wide Web的英文
缩写，翻译成中文的意思：“全
球网络信息查询系统”，或直译
成“万维网”，或“全球网”，
它是一种以 网页（ webpage） 为
基本单位构筑的框架结构。其目
的是为了把遍布在 Internet上数以
万计的 网页 链接起来，形成一个
庞大的资源信息网。
什么是 WWW？
WWW将 Internet上的所有资源（包括文
字、图片、声音、视频等）采用统一资
源定位方式（ URL,Uniform Resource
Locator用来指示某一项资源（或信息）
的所在位置，在 WWW应用中常使用
URL作为地址标识。在浏览器地址栏中
输入的便是网页的 URL。 ）连接起来，
而在客户端，访问者只需用浏览器，输
入网页的 URL，便可轻松地访问 Internet
上的所有资源。
构成 WWW的基本元素是网页
（ webpage）
返回
什么是网页？
不同的角度定义,1、从网页组成的角度
来说，网页是由文字、图片、动画、声
音、超级链接等组成的用浏览器显示的
页面。
2、从语言的角度定义网页，网页是指一
个用 HTML语言编写的文件。它通常以
HTM或 HTML作为文件的扩展名。
综合,网页是 WWW上的基本文档，它是
用 HTML（超文本标识语言）描述的文
档，它包括文本、图象、表格等内容
（这些称为网页的元素）。这些内容必
需用浏览器来显示。
网页文档的说明：
1、网页是含有 HTML 标记的基本文
档。
2、该网页文档的格式是,.htm”或
,.html”。
3、网页文档是文本文档，可以用任
何可以对文本进行编辑的软件进
行编辑。
返回
超级文本（ Hyper Text）
超级文本是一种带有 HTML标注的
文本。（实际上指的就是网页。所
以有的同学在其它的教科书中可以
看见对 WWW的描述：它是基于超
级文本的信息查询工具。）
提示：超级文本是一种更复杂、更
高级的文本显示方式，通过对有关
词汇进行索引 链接,使得这些带链
接的词汇指向文本中其它的有关段
落、或其它文本。这是超级文本的
重要特性 ------链接 。
返回
浏览器
浏览器是指安装在客户端，用来
查看 WWW中的超级文本的一种
工具。
说明：每一个 WWW的用户都要在
自己的计算机上安装浏览器，才
能“阅读”网页中的信息，这也
是使用 WWW的最基本的条件。
浏览器的分类：
浏览器有许多种，按照其运行的平台
分类有 3种,基于 UNIX平台的、基
于 WINDOWS平台的、基于 APPLE
工作站平台的浏览器。
目前使用最广泛的浏览器是基于
WINDOWS平台的，有两种：
Microsoft Internet Explorer,简称 IE，
是微软公司开发的浏览器；另一种
是 Netscape Navigator,是 Netscape公
司开发的浏览器。
返回
什么是 HTML？
HTML是 Hyper Text Markup
Language的英文缩写，翻译为“超文
本标识语言”。它是一种用来制作超
文本文档的简单标记语言，是 WWW
上描述网页内容和外观的标准。
HTML是一种标识语言，由一些编码
和标注组成，对网页的行为作出说明，
允许 Web浏览器解释它们，以便于理
解。
HTML如何表示呢？
返回
HTML包含了一对打开和关闭的标记，
在当中并有属性和值。标记描述了每
个网页上的元素，例如文本段落、表
格、或者图像等。
例如 HTML代码：
<H1 align=“left”>欢迎 !</H1>
<H1>…… < /H1 > 标记是描述文本显
示大小。（其中 < /H1 >表示标记结束）
其中 align=“left”是设置文本显示的对齐
方式，它是这个标记的属性和值。
网站（站点）
定义,简单地说就是一些链接在一起
的网页的集合称之为网站。
说明：网站是 WWW（万维网）中最
基本的组成部分，也就是说在万维网
中有许许多多的网站组成，这些网站
可能是政府的、可能是企业的、也可
能是个人的，而牵涉的面也是非常广
泛，只要是需要，各行各业都可以建
立自己的网站，这项工作已经成为了
社会的需要。
综上所述，构成 WWW的基本元素是 网页，
许许多多的网页链接在一起就组成了一
个 WWW网站（站点），而每个站点的
首页通常被称为主页（ homepage），
一般命名为 index.htm。主页是一个网站
的标志，它的好坏决定了这个网站的访
问情况，因此主页的制作成了热门话题，
要创建网站，除了必要的硬件，另一个
重要任务就是制作 网页。
制作网页的工具非常多，如微软的 Word,
FrontPage、,Micromedia公司的
Dreamweaver等，它们的界面都非常友
好，“所见即所得”技术在这些软件中
得到充分应用，从而使人们制作网页更
加方便容易。不管使用何种网页制作工
具，它们的最终目的都是为了更好地生
成一个标准的 HTML文档，为了更好地
制作网页以及后续课程的学习，对
HTML语言作一定的了解是非常重要的。
所以在学习 Dreamweaver之前，我们先
来学习
一些简单的 HTML知识。
二、介绍 HTML语言基础知识
前面我们已经学习了 HTML的基本概念及它的
表示：它是以标签（ tag）来标识，而标签本
身则由, <”和,>”号标识，标签内的内容称
为元素，元素代表了标签的意义。
例如 HTML代码：
<H1 align=“left”>欢迎 !</H1>
<H1>…… < /H1 > 标记是描述文本显示大小。
（其中 < /H1 >表示标记结束）
其中 align=“left”是设置文本显示的对齐方式，它
是这个标记的属性和值。
关于编写 HTML文档的说明
? HTML标记包含在 <>中，以区别于在页面上
显示的文本。
? 大多数 HTML标记都成对出现，只有极少数单
独出现，例如,<BR>标记。
? HTML标记不区分大小写。
? HTML文档的扩展名为 htm，也可以为 html。
? HTML文档是一个纯文本的文档，可以使用任
何文本编辑器来编辑它，例如记事本。
? 因为浏览器的差异，一些扩充的 HTML标记在
不同的浏览器上可能显示的结果并不相同。
HTML文档结构标记
我们先来看一个标准的 HTML文档结构：
<html>
<head>
<title>标题内容 </title>
</head>
<body>
主要内容在这里！
</body>
</html>
将以上代码在浏览器上发布，会是什么结果？
在记事本中演示。
HTML文档结构标记
1,HTML标记
标记的格式：
<html>
……
</html>
标记说明,HTML标记用于表示一
个页面的开始和结束（ <html>表示
开始,</html>表示结束）。
HTML文档结构标记
2,HEAD标记
标记的格式：
<head>
……
</head>
标记说明,HEAD标记是页面的第二层
标记，用于包含页面的标题信息。
提示,HEAD标记必须在 BODY标记开始
之前结束，即 </head>必须放在 <body>
之前） 。
HTML文档结构标记
3,TITLE标记
标记的格式：
<title>
页面的标题
</title>
标记说明,TITLE标记提供了页面
的标题名称，这对标记之间的文本
作为页面的标题。
提示：这对标记是放在 HEAD标记
符之间的。
HTML文档结构标记
4,BODY标记
标记的格式：
<body>
页面的内容
</body>
标记说明,BODY标记标志着页面
内容的开始和结束，页面中所用其它
的 HTML标记都在这对标记符之间。
BODY标记参数,background(指定背
景图像 ) Bgcolor(指定背景颜色 ),text
（指文本的颜色）等 。
HTML文档结构标记
5、注释标记
标记的格式：
<!--…… -->
标记说明,<!--…… -->标记是注释标
记，在这个标记之内的文本都不会
在用户的浏览器窗口中显示出来
（ 但是，如果是程序代码，即使放
在注释标记内，也会被执行 ）。
返回
本节重点
? 掌握如下的网页基础知识：
1、什么是 WWW？
2、什么是超级文本？
3、什么是网页？
4、什么是 HTML？
5、什么是浏览器？
6,什么是网站？
? 熟悉 HTML文档结构标记的基本操作。
作业
? 作业本完成：
1、什么是 WWW？
2、什么是网页？
3、什么是超级文本？
4、什么是 HTML？
5、什么是浏览器？
6,什么是网站？
? 上机操作完成：用 HTML文档结构标记语言制
作一个最简单的网页（要求：为网页设置标
题、设置不同的背景颜色、设置背景图片、
设置不同的文本颜色）。
主讲：陈红美
2004至 2005学年第一学期
介绍网页基础知识
一、介绍的网页的基础知识
1、什么是 WWW？ >>>
2、什么是网页？ >>>
3、什么是超级文本？ >>>
4、什么是 HTML？ >>>
5、什么是浏览器？ >>>
6、什么是网站？ >>>
二、介绍 HTML语言基础知识
一、介绍的网页的基础知识
WWW是 World Wide Web的英文
缩写，翻译成中文的意思：“全
球网络信息查询系统”，或直译
成“万维网”，或“全球网”，
它是一种以 网页（ webpage） 为
基本单位构筑的框架结构。其目
的是为了把遍布在 Internet上数以
万计的 网页 链接起来，形成一个
庞大的资源信息网。
什么是 WWW？
WWW将 Internet上的所有资源（包括文
字、图片、声音、视频等）采用统一资
源定位方式（ URL,Uniform Resource
Locator用来指示某一项资源（或信息）
的所在位置，在 WWW应用中常使用
URL作为地址标识。在浏览器地址栏中
输入的便是网页的 URL。 ）连接起来，
而在客户端，访问者只需用浏览器，输
入网页的 URL，便可轻松地访问 Internet
上的所有资源。
构成 WWW的基本元素是网页
（ webpage）
返回
什么是网页？
不同的角度定义,1、从网页组成的角度
来说，网页是由文字、图片、动画、声
音、超级链接等组成的用浏览器显示的
页面。
2、从语言的角度定义网页，网页是指一
个用 HTML语言编写的文件。它通常以
HTM或 HTML作为文件的扩展名。
综合,网页是 WWW上的基本文档，它是
用 HTML（超文本标识语言）描述的文
档，它包括文本、图象、表格等内容
（这些称为网页的元素）。这些内容必
需用浏览器来显示。
网页文档的说明：
1、网页是含有 HTML 标记的基本文
档。
2、该网页文档的格式是,.htm”或
,.html”。
3、网页文档是文本文档，可以用任
何可以对文本进行编辑的软件进
行编辑。
返回
超级文本（ Hyper Text）
超级文本是一种带有 HTML标注的
文本。（实际上指的就是网页。所
以有的同学在其它的教科书中可以
看见对 WWW的描述：它是基于超
级文本的信息查询工具。）
提示：超级文本是一种更复杂、更
高级的文本显示方式，通过对有关
词汇进行索引 链接,使得这些带链
接的词汇指向文本中其它的有关段
落、或其它文本。这是超级文本的
重要特性 ------链接 。
返回
浏览器
浏览器是指安装在客户端，用来
查看 WWW中的超级文本的一种
工具。
说明：每一个 WWW的用户都要在
自己的计算机上安装浏览器，才
能“阅读”网页中的信息，这也
是使用 WWW的最基本的条件。
浏览器的分类：
浏览器有许多种，按照其运行的平台
分类有 3种,基于 UNIX平台的、基
于 WINDOWS平台的、基于 APPLE
工作站平台的浏览器。
目前使用最广泛的浏览器是基于
WINDOWS平台的，有两种：
Microsoft Internet Explorer,简称 IE，
是微软公司开发的浏览器；另一种
是 Netscape Navigator,是 Netscape公
司开发的浏览器。
返回
什么是 HTML？
HTML是 Hyper Text Markup
Language的英文缩写，翻译为“超文
本标识语言”。它是一种用来制作超
文本文档的简单标记语言，是 WWW
上描述网页内容和外观的标准。
HTML是一种标识语言，由一些编码
和标注组成，对网页的行为作出说明，
允许 Web浏览器解释它们，以便于理
解。
HTML如何表示呢？
返回
HTML包含了一对打开和关闭的标记，
在当中并有属性和值。标记描述了每
个网页上的元素，例如文本段落、表
格、或者图像等。
例如 HTML代码：
<H1 align=“left”>欢迎 !</H1>
<H1>…… < /H1 > 标记是描述文本显
示大小。（其中 < /H1 >表示标记结束）
其中 align=“left”是设置文本显示的对齐
方式，它是这个标记的属性和值。
网站（站点）
定义,简单地说就是一些链接在一起
的网页的集合称之为网站。
说明：网站是 WWW（万维网）中最
基本的组成部分，也就是说在万维网
中有许许多多的网站组成，这些网站
可能是政府的、可能是企业的、也可
能是个人的，而牵涉的面也是非常广
泛，只要是需要，各行各业都可以建
立自己的网站，这项工作已经成为了
社会的需要。
综上所述，构成 WWW的基本元素是 网页，
许许多多的网页链接在一起就组成了一
个 WWW网站（站点），而每个站点的
首页通常被称为主页（ homepage），
一般命名为 index.htm。主页是一个网站
的标志，它的好坏决定了这个网站的访
问情况，因此主页的制作成了热门话题，
要创建网站，除了必要的硬件，另一个
重要任务就是制作 网页。
制作网页的工具非常多，如微软的 Word,
FrontPage、,Micromedia公司的
Dreamweaver等，它们的界面都非常友
好，“所见即所得”技术在这些软件中
得到充分应用，从而使人们制作网页更
加方便容易。不管使用何种网页制作工
具，它们的最终目的都是为了更好地生
成一个标准的 HTML文档，为了更好地
制作网页以及后续课程的学习，对
HTML语言作一定的了解是非常重要的。
所以在学习 Dreamweaver之前，我们先
来学习
一些简单的 HTML知识。
二、介绍 HTML语言基础知识
前面我们已经学习了 HTML的基本概念及它的
表示：它是以标签（ tag）来标识，而标签本
身则由, <”和,>”号标识，标签内的内容称
为元素，元素代表了标签的意义。
例如 HTML代码：
<H1 align=“left”>欢迎 !</H1>
<H1>…… < /H1 > 标记是描述文本显示大小。
（其中 < /H1 >表示标记结束）
其中 align=“left”是设置文本显示的对齐方式，它
是这个标记的属性和值。
关于编写 HTML文档的说明
? HTML标记包含在 <>中，以区别于在页面上
显示的文本。
? 大多数 HTML标记都成对出现，只有极少数单
独出现，例如,<BR>标记。
? HTML标记不区分大小写。
? HTML文档的扩展名为 htm，也可以为 html。
? HTML文档是一个纯文本的文档，可以使用任
何文本编辑器来编辑它，例如记事本。
? 因为浏览器的差异，一些扩充的 HTML标记在
不同的浏览器上可能显示的结果并不相同。
HTML文档结构标记
我们先来看一个标准的 HTML文档结构：
<html>
<head>
<title>标题内容 </title>
</head>
<body>
主要内容在这里！
</body>
</html>
将以上代码在浏览器上发布，会是什么结果？
在记事本中演示。
HTML文档结构标记
1,HTML标记
标记的格式：
<html>
……
</html>
标记说明,HTML标记用于表示一
个页面的开始和结束（ <html>表示
开始,</html>表示结束）。
HTML文档结构标记
2,HEAD标记
标记的格式：
<head>
……
</head>
标记说明,HEAD标记是页面的第二层
标记，用于包含页面的标题信息。
提示,HEAD标记必须在 BODY标记开始
之前结束，即 </head>必须放在 <body>
之前） 。
HTML文档结构标记
3,TITLE标记
标记的格式：
<title>
页面的标题
</title>
标记说明,TITLE标记提供了页面
的标题名称，这对标记之间的文本
作为页面的标题。
提示：这对标记是放在 HEAD标记
符之间的。
HTML文档结构标记
4,BODY标记
标记的格式：
<body>
页面的内容
</body>
标记说明,BODY标记标志着页面
内容的开始和结束，页面中所用其它
的 HTML标记都在这对标记符之间。
BODY标记参数,background(指定背
景图像 ) Bgcolor(指定背景颜色 ),text
（指文本的颜色）等 。
HTML文档结构标记
5、注释标记
标记的格式：
<!--…… -->
标记说明,<!--…… -->标记是注释标
记，在这个标记之内的文本都不会
在用户的浏览器窗口中显示出来
（ 但是，如果是程序代码，即使放
在注释标记内，也会被执行 ）。
返回
本节重点
? 掌握如下的网页基础知识：
1、什么是 WWW？
2、什么是超级文本？
3、什么是网页？
4、什么是 HTML？
5、什么是浏览器？
6,什么是网站？
? 熟悉 HTML文档结构标记的基本操作。
作业
? 作业本完成：
1、什么是 WWW？
2、什么是网页？
3、什么是超级文本？
4、什么是 HTML？
5、什么是浏览器？
6,什么是网站？
? 上机操作完成：用 HTML文档结构标记语言制
作一个最简单的网页（要求：为网页设置标
题、设置不同的背景颜色、设置背景图片、
设置不同的文本颜色）。
