网页设计语言教程 （ HTML /CSS）
教师,
Email,
QQ,
开设本课程的背景
?互联网的广泛运用
?每个单位、部门都需要建立,
维护自己的网站
?这门课是网站开发的基础
设问
?大家平时都上网，你知道是怎么工作
的吗？
?你知道如何制作这样的网页吗？
?要制作这样的网页，需要掌握哪些技
术？
本课程讲述的主要内容
?HTML：超文本标记语言
?CSS：层叠式样式表
?多听
?多看
?多实践
学习本课程的基本方法
第一章 HTML简介
学习目标
?网页的基本概念
?HTML基础
?了解网页制作的常用工具
Part 1
网页的基本概念
Internet
?通俗地讲,Internet 就是许多功能不
同的计算机通过线路连接起来组成的
一个世界范围的网络。
Internet提供的主要服务
?Internet 提供的服务,
– WWW服务（网上冲浪）
– 电子邮件服务（ Email）
– 网上传呼（ OICQ）
– 文件传输（ FTP）
– 网络游戏
WWW
?WWW是 World Wide Web的缩写，
也可简写为 Web，中文叫做万维网。
?万维网能够处理文字、图像、声音、
视频等多媒体信息，是一个 多媒体信
息系统 。
HTML
? HTML(Hypertext Markup Language),它
是一种规范，它通过标记符（ tag）来标
记要在网页中显示的各个部分。
? HTML用于描述超文本的显示方式，从控制文字
的颜色、大小，到标识资料的种类为图形文件或
者声音等。
? 根据 HTML语法所写出来的文件称为
HTML文件。 HTML文件在保存时，需保
存为纯文本文件，并用,html或,htm作为扩
展名。
HTTP
? HyperText Transfer Protocol—— 超文本传输协议
?浏览 Web就是以 HTTP在 Internet上
传送以 HTML（ Hypertext Markup
Language） —— 超文本标记语言编
写的网页内容。从而进行信息交流。
Web 服务器 与浏览器
? Web 服务器：将网页资源有机地组织到一起，
供用户通过浏览器下载、浏览。 WWW是由遍
布在 Internet 上的称为 Web 服务器的计算机组
成。
? WWW的结构主要分为两个部分，一为服务器端
（ Server），也称为网页的提供者；二为客户
端（ Client），也就是网页的接收者。这种模式
称为客户机 /服务器（ Client/Server）模式。
? B/S架构：与传统的 C/S架构区别开来
Web 服务器 与浏览器
网页、主页与网站
? 网页（ Web pages）
网页是网站的组成部分。它是网站的一个元素，每个网页
对应着磁盘上的一个文件，由 Web浏览器下载并格式化。
? 网站：在逻辑上可视为一个整体的一系列页
面的有机集合称为网站（ Web Site或 Site）。
? 主页：作为一个组织或个人在 WWW（或其
他 Web）上开始点的页面称为主页
（ Homepage）。
统一资源定位器（ URL）
? URL的全文为 Uniform Resource
Locator，译为统一资源定位器
? 用于指定要取得的 Internet上资源的 位置
与方式
超链接（ Hyper Link）
? 超链接是特殊的文字标记，它指向了万维
网中的其他资源，如另外一个网页、一个
声音文件，或者是网页的另一个段落等，
而且这些资源均可以存放在任何一个服务
器上。
? 在浏览网页时，如果你用鼠标单击超链接，
那么就会跳转到超链接所指向的资源
Web服务器及其工作原理
?IIS,Internet information server
?Tomcat,
?…,.等
浏览网页的工作过程
?用户通过浏览器发出请求
?WEB服务器接到请求后选择相应的
网页发给用户的浏览器
?浏览器接收到网页文件（ HTML
文件）后，根据 HTML标记符解
释和显示各种内容。
网页技术概况
以目前的网页技术来说，大致可分为三个方面来加以说明
? 静态网页（ HTML,CSS）：仅展示信息
– 静态网页是用 HTML编写，扩展名为,htm或,html。
– 静态网页只能单纯地在网页中展示文字与图片，它是所有网页
的基础技术。
? 网页美工（ Flash,Fireworks）
? 动态网页（ JavaScript/VBScript,ASP） ）：可
实现互交功能
Part 2
HTML基础
HTML标签概述
? HTML并不是一种程序，它是一种控制网页中
资料显示的标记语言
? 元素,当用一组 HTML标签将一段文字包含在中
间时，这段文字与包含文字的 HTML标签被称之
为一个元素。
? 一个 HTML文件由一系列的元素组成。元素是 HTML文
件的重要组成部分，如 title（文档标题）,img（图像）、
table（表格）等等。
HTML标签概述
?在 HTML 中，所有的标记符都用尖
括号括起来。例如,<html>,<a>。
?HTML 标记符是不区分大小写的。
<html>,<Html>和 <HTML>没有区
别。
HTML标签概述
? 绝大多数标记符都是成对出现的，包括开
始标记符和结束标记符。
? 某些标记符，例如 <BR>，只要求单一标
记符号。
? 开始标记符与结束标记符的区别在于：结
束标记符多一个斜杠, /”（不是反斜杠
,\”！）
HTML标签的属性
?属性是用来描述对象特征的特性。
例如，一个人的身高、体重就是人
这个对象的属性。
?在 HTML中，所有的属性都放置在开
始标记符的尖括号里，多个属性之
间用空格分开，通常也不区分大小
写。
HTML标签的属性
?例如，可以用字体标记符和字号属
性指定文字的大小。 <FONT
SIZE=1>本行字将以较小字体显示。
</FONT>
演示 —— 属性的作用
Web页的基本结构
? 在 HTML语法中，一个元素可以包含另一元素，
因此，整个 HTML文件就像是一个大元素，包含
了许多小元素。
? 在 HTML文件中，最外层的元素是 <html>标签，
它包含两个主要的子元素，这两个子元素是由
<head>标签与 <body>标签建立
? <head>标签所建立的元素的内容为文件标题
? <body>标签所建立的元素内容为文件主体。
HTML文档结构
下面我们开始编写一个 HTML文档。
<html>
<head>
<title>第一个 HTML示例 </title>
</head>
<body>
HTML的基本结构。
</body>
</html>
在浏览器上的显示结果
从上述代码中我们可以看出 HTML文档的基本结构如下图所示,
HTML标签
?<HTML>和 </HTML> 是 Web页的第一个
和最后一个标记符
?其他所有内容都位于这两个标记符之
间
?这两个标记告诉浏览器或其他阅读该
页的程序，此文件为一个 Web页。
HEAD标签
?首部标记 <HEAD>和 </HEAD>位于
Web 页的开头
?其中不包括 Web 页的任何实际内容，
而是提供一些与 Web 页有关的特定
信息。
HEAD标签
?首部标记也可包含其它元素。例如，
样式表（ CSS）定义位于 <STYLE>
和 </STYLE>之间；脚本定义位于
<SCRIPT></SCRIPT>之间 ;
<title></title>等。
TITLE标签
?<TITLE>和 </TITLE>，用于定义网页
的标题。
?当网页在浏览器中显示时，网页标题
将在浏览器窗口的标题栏中显示。
演示 —— TITLE的作用
BODY标签
?<BODY>和 </BODY>包含 Web 页的
内容。文字、图形、链接以及其他
HTML元素都位于该标记符内。
?正文标记符中的文字，如果没有其他
标记符修饰，则将以无格式的形式显
示。
小结
? 综上所述，一个不包含任何内容的基本
Web 页文件如下所示,
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Part 3
网页制作工具
网页编辑工具
?HTML 编辑器
– Windos里的记事板
– Linux的 vi
– CuteHTML
网页编辑工具
?Macromedia Dreamweaver
?Microsoft FrontPage
素材处理与创作工具
?图像浏览与处理
– ACDSee
– Photoshop
– Fireworks
?矢量图创作工具
– FreeHand
– CorelDraw
– Illustrator
素材处理与创作工具
?特效制作工具
– Anfy
– Cool 3D
– GIF Animator
?多媒体制作工具
– Flash
– Authorware
That’s all for this chapter!
教师,
Email,
QQ,
开设本课程的背景
?互联网的广泛运用
?每个单位、部门都需要建立,
维护自己的网站
?这门课是网站开发的基础
设问
?大家平时都上网，你知道是怎么工作
的吗？
?你知道如何制作这样的网页吗？
?要制作这样的网页，需要掌握哪些技
术？
本课程讲述的主要内容
?HTML：超文本标记语言
?CSS：层叠式样式表
?多听
?多看
?多实践
学习本课程的基本方法
第一章 HTML简介
学习目标
?网页的基本概念
?HTML基础
?了解网页制作的常用工具
Part 1
网页的基本概念
Internet
?通俗地讲,Internet 就是许多功能不
同的计算机通过线路连接起来组成的
一个世界范围的网络。
Internet提供的主要服务
?Internet 提供的服务,
– WWW服务（网上冲浪）
– 电子邮件服务（ Email）
– 网上传呼（ OICQ）
– 文件传输（ FTP）
– 网络游戏
WWW
?WWW是 World Wide Web的缩写，
也可简写为 Web，中文叫做万维网。
?万维网能够处理文字、图像、声音、
视频等多媒体信息，是一个 多媒体信
息系统 。
HTML
? HTML(Hypertext Markup Language),它
是一种规范，它通过标记符（ tag）来标
记要在网页中显示的各个部分。
? HTML用于描述超文本的显示方式，从控制文字
的颜色、大小，到标识资料的种类为图形文件或
者声音等。
? 根据 HTML语法所写出来的文件称为
HTML文件。 HTML文件在保存时，需保
存为纯文本文件，并用,html或,htm作为扩
展名。
HTTP
? HyperText Transfer Protocol—— 超文本传输协议
?浏览 Web就是以 HTTP在 Internet上
传送以 HTML（ Hypertext Markup
Language） —— 超文本标记语言编
写的网页内容。从而进行信息交流。
Web 服务器 与浏览器
? Web 服务器：将网页资源有机地组织到一起，
供用户通过浏览器下载、浏览。 WWW是由遍
布在 Internet 上的称为 Web 服务器的计算机组
成。
? WWW的结构主要分为两个部分，一为服务器端
（ Server），也称为网页的提供者；二为客户
端（ Client），也就是网页的接收者。这种模式
称为客户机 /服务器（ Client/Server）模式。
? B/S架构：与传统的 C/S架构区别开来
Web 服务器 与浏览器
网页、主页与网站
? 网页（ Web pages）
网页是网站的组成部分。它是网站的一个元素，每个网页
对应着磁盘上的一个文件，由 Web浏览器下载并格式化。
? 网站：在逻辑上可视为一个整体的一系列页
面的有机集合称为网站（ Web Site或 Site）。
? 主页：作为一个组织或个人在 WWW（或其
他 Web）上开始点的页面称为主页
（ Homepage）。
统一资源定位器（ URL）
? URL的全文为 Uniform Resource
Locator，译为统一资源定位器
? 用于指定要取得的 Internet上资源的 位置
与方式
超链接（ Hyper Link）
? 超链接是特殊的文字标记，它指向了万维
网中的其他资源，如另外一个网页、一个
声音文件，或者是网页的另一个段落等，
而且这些资源均可以存放在任何一个服务
器上。
? 在浏览网页时，如果你用鼠标单击超链接，
那么就会跳转到超链接所指向的资源
Web服务器及其工作原理
?IIS,Internet information server
?Tomcat,
?…,.等
浏览网页的工作过程
?用户通过浏览器发出请求
?WEB服务器接到请求后选择相应的
网页发给用户的浏览器
?浏览器接收到网页文件（ HTML
文件）后，根据 HTML标记符解
释和显示各种内容。
网页技术概况
以目前的网页技术来说，大致可分为三个方面来加以说明
? 静态网页（ HTML,CSS）：仅展示信息
– 静态网页是用 HTML编写，扩展名为,htm或,html。
– 静态网页只能单纯地在网页中展示文字与图片，它是所有网页
的基础技术。
? 网页美工（ Flash,Fireworks）
? 动态网页（ JavaScript/VBScript,ASP） ）：可
实现互交功能
Part 2
HTML基础
HTML标签概述
? HTML并不是一种程序，它是一种控制网页中
资料显示的标记语言
? 元素,当用一组 HTML标签将一段文字包含在中
间时，这段文字与包含文字的 HTML标签被称之
为一个元素。
? 一个 HTML文件由一系列的元素组成。元素是 HTML文
件的重要组成部分，如 title（文档标题）,img（图像）、
table（表格）等等。
HTML标签概述
?在 HTML 中，所有的标记符都用尖
括号括起来。例如,<html>,<a>。
?HTML 标记符是不区分大小写的。
<html>,<Html>和 <HTML>没有区
别。
HTML标签概述
? 绝大多数标记符都是成对出现的，包括开
始标记符和结束标记符。
? 某些标记符，例如 <BR>，只要求单一标
记符号。
? 开始标记符与结束标记符的区别在于：结
束标记符多一个斜杠, /”（不是反斜杠
,\”！）
HTML标签的属性
?属性是用来描述对象特征的特性。
例如，一个人的身高、体重就是人
这个对象的属性。
?在 HTML中，所有的属性都放置在开
始标记符的尖括号里，多个属性之
间用空格分开，通常也不区分大小
写。
HTML标签的属性
?例如，可以用字体标记符和字号属
性指定文字的大小。 <FONT
SIZE=1>本行字将以较小字体显示。
</FONT>
演示 —— 属性的作用
Web页的基本结构
? 在 HTML语法中，一个元素可以包含另一元素，
因此，整个 HTML文件就像是一个大元素，包含
了许多小元素。
? 在 HTML文件中，最外层的元素是 <html>标签，
它包含两个主要的子元素，这两个子元素是由
<head>标签与 <body>标签建立
? <head>标签所建立的元素的内容为文件标题
? <body>标签所建立的元素内容为文件主体。
HTML文档结构
下面我们开始编写一个 HTML文档。
<html>
<head>
<title>第一个 HTML示例 </title>
</head>
<body>
HTML的基本结构。
</body>
</html>
在浏览器上的显示结果
从上述代码中我们可以看出 HTML文档的基本结构如下图所示,
HTML标签
?<HTML>和 </HTML> 是 Web页的第一个
和最后一个标记符
?其他所有内容都位于这两个标记符之
间
?这两个标记告诉浏览器或其他阅读该
页的程序，此文件为一个 Web页。
HEAD标签
?首部标记 <HEAD>和 </HEAD>位于
Web 页的开头
?其中不包括 Web 页的任何实际内容，
而是提供一些与 Web 页有关的特定
信息。
HEAD标签
?首部标记也可包含其它元素。例如，
样式表（ CSS）定义位于 <STYLE>
和 </STYLE>之间；脚本定义位于
<SCRIPT></SCRIPT>之间 ;
<title></title>等。
TITLE标签
?<TITLE>和 </TITLE>，用于定义网页
的标题。
?当网页在浏览器中显示时，网页标题
将在浏览器窗口的标题栏中显示。
演示 —— TITLE的作用
BODY标签
?<BODY>和 </BODY>包含 Web 页的
内容。文字、图形、链接以及其他
HTML元素都位于该标记符内。
?正文标记符中的文字，如果没有其他
标记符修饰，则将以无格式的形式显
示。
小结
? 综上所述，一个不包含任何内容的基本
Web 页文件如下所示,
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Part 3
网页制作工具
网页编辑工具
?HTML 编辑器
– Windos里的记事板
– Linux的 vi
– CuteHTML
网页编辑工具
?Macromedia Dreamweaver
?Microsoft FrontPage
素材处理与创作工具
?图像浏览与处理
– ACDSee
– Photoshop
– Fireworks
?矢量图创作工具
– FreeHand
– CorelDraw
– Illustrator
素材处理与创作工具
?特效制作工具
– Anfy
– Cool 3D
– GIF Animator
?多媒体制作工具
– Flash
– Authorware
That’s all for this chapter!
