多媒体网页设计ch1

1、 第第1章章 网页设计概论网页设计概论本章主要内容本章主要内容网页设计基础知识网页设计基础知识网页设计相关的多媒体技术网页设计相关的多媒体技术HTML基础基础1.1 网页设计基础知识网页设计基础知识1.1.1 Internet与与Web1.1.2 网页、网站与主页网页、网站与主页1.1.3 网站分类与赏析网站分类与赏析1.1.4 网页色彩与布局网页色彩与布局Internet 与与 WWWInternet又称国际互联网，是一个把分布于世界各又称国际互联网，是一个把分布于世界各地不同结构的计算机网络通过各种传输介质互相地不同结构的计算机网络通过各种传输介质互相连接起来的网络。连接起来的网络。Int

2、ernet上的信息资源极为丰富，分为信息资源和上的信息资源极为丰富，分为信息资源和服务资源两类。它的主要功能包括：网上信息查服务资源两类。它的主要功能包括：网上信息查询、网上交流、电子邮件、文件传输和远程登录。询、网上交流、电子邮件、文件传输和远程登录。WWW 与浏览器与浏览器World Wide Web简称简称WWW或或Web 基础：超文本标记语言（基础：超文本标记语言（Hypertext Markup Language ,HTML）与超文本传输协议（）与超文本传输协议（Hypertext Transfer Protocol，HTTP） 服务：提供服务：提供Internet信息查询服务的浏览

3、系统。信息查询服务的浏览系统。 Web采用客户机采用客户机/服务器工作模式服务器工作模式 所有的客户端和所有的客户端和Web服务器统一使用服务器统一使用TCP/IP协议，统一协议，统一分配分配IP地址，使得客户端和服务器的逻辑连接变成简地址，使得客户端和服务器的逻辑连接变成简单的点对点连接。单的点对点连接。 在在WWW工作过程中，用户所使用的本地计算机是运行工作过程中，用户所使用的本地计算机是运行Web客户程序的客户机，通过客户程序的客户机，通过Internet访问分布在世界访问分布在世界各地的各地的Web服务器。用户浏览服务器。用户浏览Web上的信息需要使用上的信息需要使用Web浏览器。浏览

4、器。WWW 与浏览器与浏览器网页、网站与主页（网页、网站与主页（1） 网页（网页（Web Page），也称为），也称为Web页，是用户通页，是用户通过浏览器在过浏览器在Internet中看到的页面。中看到的页面。网页：由网页：由HTML语言（超文本标记语言）编写的语言（超文本标记语言）编写的集文本、图片、声音和动画等信息元素为一体集文本、图片、声音和动画等信息元素为一体的页面文件。的页面文件。网页、网站与主页（网页、网站与主页（2） 网页（网页（Web Page），也称为），也称为Web页，是用户通页，是用户通过浏览器在过浏览器在Internet中看到的页面。中看到的页面。网页：由网页：由HT

5、ML语言（超文本标记语言）编写的语言（超文本标记语言）编写的集文本、图片、声音和动画等信息元素为一体集文本、图片、声音和动画等信息元素为一体的页面文件。的页面文件。Web网页采用超文本格式。它包含有网页采用超文本格式。它包含有文本、图像、文本、图像、声音、视频声音、视频；还含有指向其他；还含有指向其他Web页或页面本身页或页面本身某特定位置的某特定位置的超链接超链接；网页的元素还包括；网页的元素还包括动画、动画、表单、程序表单、程序 网页、网站与主页（网页、网站与主页（3） 从文件角度讲，网页通常是一种由从文件角度讲，网页通常是一种由HTML语言语言编写的文本文件，网页文件又称编写的文本文件，

6、网页文件又称HTML文件，文件，其扩展名为其扩展名为.html或或htm。在浏览器中选择【查看】在浏览器中选择【查看】【源文件】命令，即【源文件】命令，即可打开一个网页文件并看到网页的源代码。可打开一个网页文件并看到网页的源代码。 网页、网站与主页（网页、网站与主页（4） 编辑网页的操作步骤如下：编辑网页的操作步骤如下：选择【开始】选择【开始】【程序】【程序】【附件】【附件】【记事本】【记事本】命令，启动命令，启动“记事本记事本”程序。程序。在记事本中输入在记事本中输入HTML代码代码保存文件。保存文件。双击文件图标，即可打开该文件，看到所示的页面。双击文件图标，即可打开该文件，看到所示的页面

7、。网站（网站（WebsiteWebsite）又称为站点或）又称为站点或WebWeb站点。站点。网站是指根据一定的规则，使用网站是指根据一定的规则，使用HTMLHTML等工具制作等工具制作的用于展示特定内容的相关网页的集合的用于展示特定内容的相关网页的集合网页、网站与主页（网页、网站与主页（5） 主页是进入网站的门户，是整个网站的第一页。主页是进入网站的门户，是整个网站的第一页。一般命名为一般命名为index.htmlindex.html文件。文件。主页上通常会有整个网站的导航目录，所以主页主页上通常会有整个网站的导航目录，所以主页也是一个网站的入口或者说主目录。也是一个网站的入口或者说主目录。

8、网站分类与赏析网站分类与赏析 1门户类网站门户类网站网址：网址：2企业信息类网站企业信息类网站网址：网址：3教育类网站教育类网站网址：网址：4产品信息类产品信息类网址：网址：网页色彩与布局网页色彩与布局 网页色彩的应用网页色彩的应用 “中国瓷器中国瓷器”网站网站http:/“北美工艺品展北美工艺品展”http:/“多媒体设计多媒体设计”网站网站http:/网页布局的基本概念网页布局的基本概念 页面尺寸：网页的尺寸和显示器大小及分辨率页面尺寸：网页的尺寸和显示器大小及分辨率有关。有关。分辨率为分辨率为1024768，页面的显示尺寸为，页面的显示

9、尺寸为1007600像素；像素；分辨率为分辨率为800600，页面的显示尺寸为，页面的显示尺寸为780428像像素；素；分辨率为分辨率为640480，页面的显示尺寸为，页面的显示尺寸为620311像像素。素。网页布局网页布局 页面布局类型页面布局类型国字型国字型 也称为也称为“同同”字型或字型或“口口”字型，字型，http:/。拐角型拐角型 去掉去掉“国国”字型布局的最右边的部。字型布局的最右边的部。http:/。“三三”字型字型 又称为上中下型，是一种简洁明又称为上中下型，是一种简洁明快的艺术性网页布局。快的艺术性网页布局。http:/ :/ 也称为也称为“POP”型。型。http:/ 多媒

10、体素材基础多媒体素材基础1.2.1 颜色的基本概念颜色的基本概念1.2.2 图像的色彩模式图像的色彩模式1.2.3 图像的基本属性图像的基本属性1.2.4 图像文件的格式图像文件的格式1.2.5 计算机动画概述计算机动画概述1.2.1 颜色的基本概念颜色的基本概念1颜色的三要素颜色的三要素亮度亮度 指颜色的明暗程度，是光作用于人眼时所引起指颜色的明暗程度，是光作用于人眼时所引起的明亮程度的感觉，它与被观察物体表面的光线反的明亮程度的感觉，它与被观察物体表面的光线反光系数有关。光系数有关。色相（或色调）是指颜色的相貌，是人眼看到的一色相（或色调）是指颜色的相貌，是人眼看到的一种或多种波长的光时所

11、产生的彩色感觉，它反映颜种或多种波长的光时所产生的彩色感觉，它反映颜色的种类和基本特性。色的种类和基本特性。饱和度也常称为纯度或彩度。是色彩的鲜艳度或深饱和度也常称为纯度或彩度。是色彩的鲜艳度或深浅程度，是由颜色掺入白色光的程度决定的。浅程度，是由颜色掺入白色光的程度决定的。 1.2.1 颜色的基本概念颜色的基本概念2三基色原理三基色原理三基色，它们相互独立，其中任意色均不能由其他三基色，它们相互独立，其中任意色均不能由其他两色混合产生。自然界常见的各种彩色光，都可由两色混合产生。自然界常见的各种彩色光，都可由三种颜色相互独立的光组成。三种颜色相互独立的光组成。有两种基色系统，一种是加色系统，

12、其三基色是红有两种基色系统，一种是加色系统，其三基色是红（RedRed）、）、 绿（绿（GreenGreen）、蓝（）、蓝（BlueBlue），另一种是减色系统，其），另一种是减色系统，其三基色是青色（三基色是青色（CyanCyan）、品红（）、品红（MagentaMagenta）和黄色）和黄色（YellowYellow）。）。 不同比例的三基色光相加得到的彩色称为加色混合。不同比例的三基色光相加得到的彩色称为加色混合。 其规律如下：其规律如下：红色红色+绿色绿色=黄色黄色红色红色+蓝色蓝色=品红品红绿色绿色+蓝色青色蓝色青色红色红色+绿色绿色+蓝色白色蓝色白色1.2.2 图像的色彩模式图像的

13、色彩模式色彩模式是指在计算机上打印或显示图像时表色彩模式是指在计算机上打印或显示图像时表示颜色的数字方法示颜色的数字方法 1灰度模式灰度模式该模式只有灰度色（图像的亮度），没有彩色。该模式只有灰度色（图像的亮度），没有彩色。在灰度色图像中，每个像素都以在灰度色图像中，每个像素都以8位或位或16位表位表示，取值范围在示，取值范围在0（黑色）（黑色）255（白色）之间。（白色）之间。1.2.2 图像的色彩模式图像的色彩模式2RGB模式模式RGB模式是工业界的一种颜色标准，通过对红、绿、模式是工业界的一种颜色标准，通过对红、绿、蓝三个颜色通道的变化以及它们之间的相互叠加来蓝三个颜色通道的变化以及它们

14、之间的相互叠加来得到各式各样的颜色。这个标准几乎包括了人类视得到各式各样的颜色。这个标准几乎包括了人类视力所能感知的所有颜色，是目前应用最广的颜色模力所能感知的所有颜色，是目前应用最广的颜色模式之一。式之一。网页制作中使用最广泛的是网页制作中使用最广泛的是RGB色彩模式的十六进色彩模式的十六进制显示模式。即用制显示模式。即用3个个00FF的十六进制数来表示组的十六进制数来表示组成颜色的红、绿、蓝色的数值。例如：成颜色的红、绿、蓝色的数值。例如：000000表示表示黑色，黑色，FFFFFF表示白色，表示白色，FF0000表示红色，表示红色，0000FF表示蓝色，总共有表示蓝色，总共有224种颜色

15、。种颜色。1.2.2 图像的色彩模式图像的色彩模式3CMY模式模式计算机屏幕显示彩色图像时采用的是计算机屏幕显示彩色图像时采用的是RGB模式，而在打模式，而在打印时印时 一般需要转换为一般需要转换为CMY模式。模式。CMY模式是使用青色（模式是使用青色（Cyan）、品红（）、品红（Magenta）、黄色）、黄色（yellow）3 种基本颜色按一定比例合成色彩的方法。种基本颜色按一定比例合成色彩的方法。CMY采用相减采用相减混色模型。混色模型。注意：注意：等量的等量的CMY混合后并不能产生完备的黑色或灰色。因此，混合后并不能产生完备的黑色或灰色。因此，在印刷时常加一种真正的黑色（在印刷时常加一种

16、真正的黑色（Black），这样），这样CMY模式模式又称为又称为CMYK模式。模式。CMYK色彩不如色彩不如RGB色丰富饱满，在色丰富饱满，在Photoshop中会导致运中会导致运 行速度比采用行速度比采用RGB色慢或部分功能无法使用。色慢或部分功能无法使用。1.2.2 图像的色彩模式图像的色彩模式4HSB模式模式 HSB模式是基于人类感觉颜色的方式建立起来的，对模式是基于人类感觉颜色的方式建立起来的，对于人的眼睛来说，能分辨出来的是颜色的色相、饱和于人的眼睛来说，能分辨出来的是颜色的色相、饱和度和亮度，而不是度和亮度，而不是RGB模式中各基色所占的比例。模式中各基色所占的比例。HSB颜色就是

17、根据人类对颜色分辨的直观方法，将自然界颜色就是根据人类对颜色分辨的直观方法，将自然界的颜色看作由色相（的颜色看作由色相（Hue）、饱和度（）、饱和度（Saturation）、亮）、亮度（度（Brightness）组成。）组成。5Lab模式模式 Lab颜色模式通过颜色模式通过A、B两个色调参数和一个光强度来两个色调参数和一个光强度来控制色彩，控制色彩，A、B两个色调可以通过两个色调可以通过-128+128之间的数之间的数值变化来调整色相，其中值变化来调整色相，其中A色调为由绿到红的光谱变化，色调为由绿到红的光谱变化，B色调为由蓝到黄的光谱变化，光强度可以在色调为由蓝到黄的光谱变化，光强度可以在0

18、100数数值范围内调节。值范围内调节。1.2.2 图像的色彩模式图像的色彩模式6安全色安全色 图像在网络发布时，色彩的显示可能会受到浏览器图像在网络发布时，色彩的显示可能会受到浏览器端的操作系统和浏览器的影响，同一种颜色也会在不端的操作系统和浏览器的影响，同一种颜色也会在不同的浏览器中显示出不同的亮度或者色相。我们把在同的浏览器中显示出不同的亮度或者色相。我们把在不同操作系统和浏览器中显示效果一致的不同操作系统和浏览器中显示效果一致的216中颜色称中颜色称为网络安全色。为网络安全色。 辨别一种颜色是否是网络安全色的方法是看其颜色辨别一种颜色是否是网络安全色的方法是看其颜色值，任何由值，任何由0

19、0、33、66、99、CC或者或者FF组合而成的颜组合而成的颜色都是色都是Web安全色。例如：安全色。例如：003366、0066FF等。通常在等。通常在Photoshop中颜色拾取框中可以直接选取的颜色都是中颜色拾取框中可以直接选取的颜色都是Web安全色。安全色。1.2.3 图像的基本属性图像的基本属性1图形与图像图形与图像数字图像的种类有两种：图形和图像数字图像的种类有两种：图形和图像 图形又称矢量图形、几何图形或矢量图，是经图形又称矢量图形、几何图形或矢量图，是经过计算机运算而形成的抽象化结果，由具有方过计算机运算而形成的抽象化结果，由具有方向和长度的矢量线段构成。计算机在显示图形向和长

20、度的矢量线段构成。计算机在显示图形时从文件中读取指令并转化为屏幕上显示的图时从文件中读取指令并转化为屏幕上显示的图形效果。形效果。1.2.3 图像的基本属性图像的基本属性1图形与图像图形与图像图像又称点阵图像或位图图像，是指在空间和图像又称点阵图像或位图图像，是指在空间和亮度上已离散化的图像。一幅图划分为亮度上已离散化的图像。一幅图划分为M行行N列，行与列的交叉处为一个像素，每个像素点列，行与列的交叉处为一个像素，每个像素点用若干个二进制位表示该像素的颜色和亮度，用若干个二进制位表示该像素的颜色和亮度，因此，在计算机中对应于该像素点的值是它的因此，在计算机中对应于该像素点的值是它的亮度或颜色等

21、级，像素的颜色等级越多则图像亮度或颜色等级，像素的颜色等级越多则图像越逼真越逼真 位图图像及其放大位图图像及其放大后的效果后的效果 1.2.3 图像的基本属性图像的基本属性2图像分辨率图像分辨率分辨率是用于度量图像单位长度数据量的参数，分辨率是用于度量图像单位长度数据量的参数，其高低直接影响图像的质量。分辨率通常表示其高低直接影响图像的质量。分辨率通常表示为为ppi（pixel per inch，像素，像素/英寸）和英寸）和dpi（dot per inch，点，点/每英寸）。计算机显示领域用每英寸）。计算机显示领域用ppi度量分辨率，而度量分辨率，而dpi用于打印、印刷领域等。用于打印、印刷领

22、域等。 1.2.3 图像的基本属性图像的基本属性显示分辨率显示分辨率显示分辨率是指数字化的图像经过计算机显示系统，如显示卡、显示器描述时，屏幕呈现出横向和纵向像素的个数。单位是ppi，其值是横向像素纵向像素。常见的标准显示分辨率有800600像素、1024768像素、12801024像素等。扫描分辨率扫描分辨率扫描分辨率是指每英寸扫描到的点，单位是dpi。它表示一台扫描仪输入图像的细腻程度，数值越大扫描的图像转化位数字图像越逼真，扫描仪的质量越高。打印分辨率打印分辨率打印分辨率是打印机输出图像时采用的分辨率，单位是dpi。同一台打印机可以使用不同的打印分辨率，打印分辨率越高，图像输出质量越好。

23、1.2.4 图像文件的格式图像文件的格式1BMP格式格式BMP（Bitmap）是）是Microsoft公司为其公司为其Windows系列操系列操作系统设置的标准图像文件格式。作系统设置的标准图像文件格式。BMP文件格式具文件格式具有以下特点：每个文件存放一幅图像，可以多种颜有以下特点：每个文件存放一幅图像，可以多种颜色深度保存图像色深度保存图像(如如16色、色、256色、色、24位真彩色模式位真彩色模式)。BMP文件可以使用行程长度编码（文件可以使用行程长度编码（RLC）进行无损）进行无损压缩，也可不压缩。不压缩的压缩，也可不压缩。不压缩的BMP文件是一种通用文件是一种通用的图像文件格式，几乎

24、所有的图像文件格式，几乎所有Windows应用软件都能应用软件都能支持，但文件较大。支持，但文件较大。1.2.4 图像文件的格式图像文件的格式2GIF格式格式GIF（Graphics Interchange Format）格式文件为网络）格式文件为网络传输和传输和BBS用户使用图像文件提供方便。目前，大用户使用图像文件提供方便。目前，大多数图像软件都支持多数图像软件都支持GIF文件格式，它特别适合于动文件格式，它特别适合于动画制作、网页制作以及演示文稿制作等领域。画制作、网页制作以及演示文稿制作等领域。GIF文文件格式具有以下特点：采用无损压缩的方式，产生件格式具有以下特点：采用无损压缩的方式

25、，产生的文件很小，下载速度快，但最多只支持的文件很小，下载速度快，但最多只支持256种颜色。种颜色。1.2.4 图像文件的格式图像文件的格式3JPEG格式格式JPEG（Joint Photographic Experts Group）格式文件）格式文件用有损压缩方式去除冗余的图像和彩色数据，在获用有损压缩方式去除冗余的图像和彩色数据，在获得极高压缩率的同时能展现十分丰富和生动的图像，得极高压缩率的同时能展现十分丰富和生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的换句话说，就是可以用最少的磁盘空间得到较好的图像质量。因此，图像质量。因此，JPEG文件格式适用于在文件格式适用于在Inte

26、rnet上上传输图像。传输图像。4TIF格式格式由由Aldus和和Microsoft公司联合开发的，最初用于扫描公司联合开发的，最初用于扫描和桌面出版业，是一种工业标准格式。它被许多图和桌面出版业，是一种工业标准格式。它被许多图形图像软件所支持。文件有压缩和非压缩两种形式，形图像软件所支持。文件有压缩和非压缩两种形式，非压缩的非压缩的TIF文件可独立于软件和硬件环境。文件可独立于软件和硬件环境。1.2.4 图像文件的格式图像文件的格式5PNG格式的图像文件格式的图像文件PNG（Portable Network Graphic）图像是网络传输中的）图像是网络传输中的一种无损压缩图像文件格式，可以

27、保存灰度模式、索一种无损压缩图像文件格式，可以保存灰度模式、索引颜色模式、图层、帧等图像信息，在大多数情况下，引颜色模式、图层、帧等图像信息，在大多数情况下，它的压缩比大于它的压缩比大于GIF格式图像，利用格式图像，利用Alphs通道可以调节通道可以调节图像的透明度，可提供图像的透明度，可提供16位灰度图像和位灰度图像和48位真彩色图位真彩色图像。像。6PSD格式的图像文件格式的图像文件PSD图像是著名的图像处理软件图像是著名的图像处理软件Photoshop中使用的一中使用的一种标准图像格式文件，可以不同图层分别存储，从而种标准图像格式文件，可以不同图层分别存储，从而能够保存图像处理的每一个细

28、节部分，便于图像的编能够保存图像处理的每一个细节部分，便于图像的编辑和再处理。辑和再处理。 1.2.5 计算机动画概述计算机动画概述分类分类根据动画的性质和运动方式，计算机动画可分为，根据动画的性质和运动方式，计算机动画可分为，逐帧动画（又称帧动画）、实时动画（又称算法动逐帧动画（又称帧动画）、实时动画（又称算法动画）和矢量动画。按照动画的表现形式分类，可以画）和矢量动画。按照动画的表现形式分类，可以分为二维动画、三维动画和变形动画分为二维动画、三维动画和变形动画3大类。大类。逐帧动画是指构成动画的基本单位是帧，许多帧组逐帧动画是指构成动画的基本单位是帧，许多帧组成一幅动画。逐帧动画借鉴传统动

29、画的概念，每帧成一幅动画。逐帧动画借鉴传统动画的概念，每帧的内容不同，当连续播放时，通过一帧一帧显示动的内容不同，当连续播放时，通过一帧一帧显示动画的图像序列形成动画视觉效果。逐帧动画具有非画的图像序列形成动画视觉效果。逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画主要用在传统动画片的制作、网页的制作、逐帧动画主要用在传统动画片的制作、网页的制作、以及电影特技的制作方面。以及电影特技的制作方面。1.2.6 音频与视频基础音频与视频基础常见的音频文件格式常见的音频文件格式 声音文件又称为音频文件，用来记录自然声和声音文件又称为音频文

30、件，用来记录自然声和计算机等电子设备产生的声音。计算机等电子设备产生的声音。声音文件分为两大类：一类是采用声音文件分为两大类：一类是采用WAV格式的格式的波形的音频文件；另一类是采用波形的音频文件；另一类是采用MIDI格式的乐格式的乐器数字化接口文件。对于器数字化接口文件。对于WAV格式文件，通过格式文件，通过数字采样获得声音素材；而对于数字采样获得声音素材；而对于MIDI格式文件，格式文件，则通过则通过MIDI乐器的演奏获得声音素材。乐器的演奏获得声音素材。1.2.6 音频与视频基础音频与视频基础视频文件的格式视频文件的格式 视频文件可以分为两大类，其一是影像文件，例如常见的视频文件可以分为

31、两大类，其一是影像文件，例如常见的VCD。影。影像文件一般可达几像文件一般可达几MB至几十至几十MB甚至更大。甚至更大。 其二是流式视频文件，它是随着国际互联网的发展而诞生的，例如其二是流式视频文件，它是随着国际互联网的发展而诞生的，例如在线实况转播，就是建立在流式视频技术之上的。在线实况转播，就是建立在流式视频技术之上的。1.2.6 音频与视频基础音频与视频基础AVI文件是由文件是由Microsoft公司开发的一种数字音频与视频文件公司开发的一种数字音频与视频文件格式，被大多数操作系统直接支持。它将视频和音频混合格式，被大多数操作系统直接支持。它将视频和音频混合交错地存储在一起，调用方便、图

32、像质量好。但交错地存储在一起，调用方便、图像质量好。但AVI文件没文件没有限定压缩标准，不同压缩标准生成的有限定压缩标准，不同压缩标准生成的AVI文件，必须使用文件，必须使用相应的解压算法才能将其播放出来，而且文件体积过于庞相应的解压算法才能将其播放出来，而且文件体积过于庞大。大。MOV文件是文件是Apple公司开发的一种音频、视频文件格式。公司开发的一种音频、视频文件格式。MOV格式支持格式支持25位彩色，支持领先的集成压缩技术，提供了位彩色，支持领先的集成压缩技术，提供了150多种视频效果，并配有提供了多种视频效果，并配有提供了200多种多种MIDI兼容音响和设兼容音响和设备的声音装置，包

33、含了基于备的声音装置，包含了基于Internet应用的关键特性，具有应用的关键特性，具有跨平台、存储空间要求小的技术特点。跨平台、存储空间要求小的技术特点。另外还有另外还有MPEG、DAT、RM、ASF、WMV等格式的文件。等格式的文件。1.3 HTML基础基础1.3.1 HTML文档基本结构文档基本结构1.3.2 HTML的基本结构标记的基本结构标记1.3.3 文字与段落排版标记文字与段落排版标记1.3.4 多媒体标记多媒体标记1.3.5 超链接标记超链接标记1.3.7 框架标记框架标记1.3.1 HTML文档基本结构文档基本结构1HTML简介简介HTML是是Hypertext Markup

34、 Language（超文本标记语言）（超文本标记语言）的缩写，它是构成的缩写，它是构成Web页面的符号标记语言。通过页面的符号标记语言。通过HTML将所需要表达的信息按某种规则写成将所需要表达的信息按某种规则写成HTML文件，文件，并将这些并将这些HTML文件翻译成可以识别的信息，就是所见文件翻译成可以识别的信息，就是所见到的网页。到的网页。2一个简单的一个简单的HTML实例实例【案例案例1.1】用用HTML制作一个简单的网页。制作一个简单的网页。 在在“记事本记事本”中输入文本。中输入文本。 在在“记事本记事本”中，选择中，选择“文件文件”“保存保存”命令，将该文命令，将该文件保存为件保存为

35、“1-1.htm”（HTML文件的扩展名是文件的扩展名是.htm或或.html。 双击双击“1-1.htm”，即可显示网页。，即可显示网页。示例示例 第一个简单网页第一个简单网页 我的摄影网页我的摄影网页 首页首页|业界资讯业界资讯|摄影器材摄影器材|摄影技术摄影技术|作品欣赏作品欣赏 摄影爱好者的家园摄影爱好者的家园 摄影专题摄影专题 摄影杂谈摄影杂谈 摄影攻略摄影攻略 摄影专题摄影专题 风光摄影风光摄影 体育摄影体育摄影 休闲摄影休闲摄影 【案例【案例1.1】源代码】源代码 1.3.1 HTML文档基本结构文档基本结构一个最基本的网页一般由三个组成部分构成：一个最基本的网页一般由三个组成部

36、分构成：1.3.1 HTML文档基本结构文档基本结构3.标记和属性标记和属性（1）HTML标记标记 HTML文档中用于描述功能的标识符称为标记，标记的作用是指定浏览器文档中用于描述功能的标识符称为标记，标记的作用是指定浏览器如何显示被标记的相关内容。标记符由一些字母组成。如何显示被标记的相关内容。标记符由一些字母组成。 格式为：格式为：受标记影响的内容受标记影响的内容说明：说明：任何标记都用任何标记都用 “”括起来，如括起来，如，以表示这是，以表示这是HTML代代码而非普通文本。注意，码而非普通文本。注意，“”与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他字符。字符。HTML的多

37、数标记都是成对出现的，分别称为开始和结束标记，结束标记的多数标记都是成对出现的，分别称为开始和结束标记，结束标记需在标记名前加上符号需在标记名前加上符号“/”，也有不用，也有不用结束的，称为单标记，如结束的，称为单标记，如、。任何标记的大小写都是等价的，建议用小写形式。任何标记的大小写都是等价的，建议用小写形式。（4）标记可以嵌套使用，嵌套时注意不要发生交叉嵌套。下面的嵌套是）标记可以嵌套使用，嵌套时注意不要发生交叉嵌套。下面的嵌套是正确的：正确的：摄影动态摄影动态1.3.1 HTML文档基本结构文档基本结构（2）标记的属性）标记的属性 格式为：格式为： 受标记影响的受标记影响的内容内容例如，

38、段落标记例如，段落标记p的一种使用形式：的一种使用形式：说明：说明：属性只可加于开始标记中，并非所有的标记都有属性，如换属性只可加于开始标记中，并非所有的标记都有属性，如换行标记就没有属性。行标记就没有属性。根据需要可以使用某标记的所有属性，也可以只使用其中的根据需要可以使用某标记的所有属性，也可以只使用其中的几个属性。在使用时属性之间没有顺序要求。几个属性。在使用时属性之间没有顺序要求。属性和标记一样，不区分大小写，但建议使用小写字母表示。属性和标记一样，不区分大小写，但建议使用小写字母表示。任何标记的属性都有默认值，当使用默认值时属性描述可省任何标记的属性都有默认值，当使用默认值时属性描述

39、可省略。略。 1.3.1 HTML文档基本结构文档基本结构【案例【案例1.2】标记属性示例】标记属性示例 标记属性示例标记属性示例 Hello!网页设计学习从网页设计学习从HTML开始！开始！ HTML语言是建立网页的规范语言是建立网页的规范 1.3.2 HTML的基本结构标记的基本结构标记1文档标记文档标记格式：格式：html文档的内容文档的内容是开始标记，处于文档的最前面，表示文档的是开始标记，处于文档的最前面，表示文档的开始，即浏览器从开始，即浏览器从开始解释，直到遇到开始解释，直到遇到结结束。其他所有的束。其他所有的HTML标记都位于这两个标记之间。标记都位于这两个标记之间。标记不是必

40、需的，但最好不要省略这两标记不是必需的，但最好不要省略这两个标记，以保持个标记，以保持Web文档结构的完整性。文档结构的完整性。1.3.2 HTML的基本结构标记的基本结构标记2文档头部标记文档头部标记格式：格式：头部的内容头部的内容 头部标记头部标记用来设定有关页面的一些信用来设定有关页面的一些信息，其内容可以是标题名、文本文件地址、创作信息息，其内容可以是标题名、文本文件地址、创作信息等。例如，用等。例如，用标记来设置网页的标题，标记来设置网页的标题，用用标记来定义样式表。标记来定义样式表。1.3.2 HTML的基本结构标记的基本结构标记2文档头部标记文档头部标记格式：格式：头部的内容头部

41、的内容 头部标记头部标记用来设定有关页面的一些信息，其内容用来设定有关页面的一些信息，其内容可以是标题名、文本文件地址、创作信息等。例如，用可以是标题名、文本文件地址、创作信息等。例如，用标记来设置网页的标题，用标记来设置网页的标题，用标记来标记来定义样式表。定义样式表。3文档标题标记文档标题标记格式：格式：标题名标题名/ 标题概括了网页的内容，能使浏览者迅速了解网页的主题。浏标题概括了网页的内容，能使浏览者迅速了解网页的主题。浏览网页时标题名显示在浏览器的标题栏中。览网页时标题名显示在浏览器的标题栏中。1.3.2 HTML的基本结构标记的基本结构标记4文档主体标记文档主体标记 标记定义网页上

42、显示的主要内容与标记定义网页上显示的主要内容与显示格式，网页正文中的所有内容，包括文字、表格、显示格式，网页正文中的所有内容，包括文字、表格、图像、声音和动画等都包含在本标记中。图像、声音和动画等都包含在本标记中。 Body常用的标记有排版标记、图像标记、超链接标常用的标记有排版标记、图像标记、超链接标记、表格标记等，这些标记在后面陆续介绍，这里只记、表格标记等，这些标记在后面陆续介绍，这里只介绍介绍body的常用属性。的常用属性。1.3.2 HTML的基本结构标记的基本结构标记其中：其中：（1）bgcolor属性属性 设置网页的背景色，格式为：设置网页的背景色，格式为： bgcoloer=R

43、GB颜色编码颜色编码（或者（或者bgcoloer=颜色标识符颜色标识符）“RGB颜色编码颜色编码”是一组六位的十六进制数值，第是一组六位的十六进制数值，第1、2位代表红色值（位代表红色值（R），第），第3、4位代表绿色值（位代表绿色值（G），第），第5、6位代表蓝色值（位代表蓝色值（B）。如，红色为）。如，红色为ff0000，绿色为，绿色为00ff00，蓝色为，蓝色为0000ff。“颜色标识符颜色标识符”在在HTML的预定义颜色中取值。常用的的预定义颜色中取值。常用的颜色标识符有：颜色标识符有：red（红）、（红）、green（绿）、（绿）、blue（蓝）、（蓝）、black（黑）、（黑）、w

44、hite（白）等。（白）等。1.3.2 HTML的基本结构标记的基本结构标记5注释标记注释标记格式为：格式为：，或者，或者 其中的其中的“注释内容注释内容”被浏览器解释为注释，而不在浏被浏览器解释为注释，而不在浏览器窗口中显示。览器窗口中显示。例如：例如：1.3.3 文字与段落排版标记文字与段落排版标记1文字控制标记文字控制标记（1）控制文本的字体、字号、颜色）控制文本的字体、字号、颜色 文字控制标记文字控制标记用于控制文字的显示形式，用于控制文字的显示形式，常用的属性有常用的属性有face、size、color，格式为：，格式为： 文文本内容本内容 其中，其中，face用于设置文字的字体，只

45、有当前系统中能够用于设置文字的字体，只有当前系统中能够使用的字体（中英文），设置才有效。使用的字体（中英文），设置才有效。size用于设置文用于设置文字的字号大小，取值范围是字的字号大小，取值范围是17，数值越大字越大，默，数值越大字越大，默认值是认值是3号字。号字。color用于设置文字的颜色，默认颜色是用于设置文字的颜色，默认颜色是黑色。黑色。1.3.3 文字与段落排版标记文字与段落排版标记1【案例【案例1.3】font常用属性应用示例。常用属性应用示例。 font常用属性示例常用属性示例 只设置文字的颜色为红色只设置文字的颜色为红色 设置文字为设置文字为5号蓝色号蓝色 仿宋字仿宋字 1.

46、3.3 文字与段落排版标记文字与段落排版标记（2）控制字体特殊效果的标记）控制字体特殊效果的标记 常用字体特效控制标记常用字体特效控制标记标记名称标记作用标记格式b文字加粗文字i文字斜体文字u文字加下画线文字strike文字加删除线文字sup文字为上标文字Sub文字为下标文字1.3.3 文字与段落排版标记文字与段落排版标记2段落排版标记段落排版标记 段落排版标记主要是对网页的页面版式进行控制的标记，段落排版标记主要是对网页的页面版式进行控制的标记，主要包括标题标记、段落标记、换行标记等。主要包括标题标记、段落标记、换行标记等。（1）标题标记）标题标记 标题标记用于设置文本的各种题目，标题号越小

47、，字号标题标记用于设置文本的各种题目，标题号越小，字号也大。也大。 格式：格式： 标题文字标题文字其中，其中，hn用来指定标题文字的大小，分别为用来指定标题文字的大小，分别为h1、h2、h6。 align属性用来设置标题在页面中的对齐方式，取值为属性用来设置标题在页面中的对齐方式，取值为left（左对齐）、（左对齐）、right(右对齐右对齐)和和center（居中）。（居中）。1.3.3 文字与段落排版标记文字与段落排版标记【案例【案例1.4】标题标记应用示例】标题标记应用示例 标题标记应用示例标题标记应用示例 1级标题的显示效果级标题的显示效果 2级标题的显示效果级标题的显示效果 3级标题

48、的显示效果级标题的显示效果 4级标题的显示效果级标题的显示效果(左对齐）左对齐） 5级标题的显示效果（居中）级标题的显示效果（居中） 6级标题的显示效果（右对齐）级标题的显示效果（右对齐） 1.3.3 文字与段落排版标记文字与段落排版标记（2）换行和段落标记）换行和段落标记 在在HTML文档中，无法使用多个回车、空格、文档中，无法使用多个回车、空格、Tab键来调整文档段键来调整文档段落的格式，只能用换行、段落标记来强制实现。落的格式，只能用换行、段落标记来强制实现。 换行标记换行标记br是一个单标记，其作用是产生换行。是一个单标记，其作用是产生换行。格式：格式：仅产生一个新行，并不产生新段落。

49、若在一个段落中使用该标仅产生一个新行，并不产生新段落。若在一个段落中使用该标记，产生的新行仍然具有原段落的属性。记，产生的新行仍然具有原段落的属性。 段落标记段落标记用于定义一个段落，并对段落的属性进行说明。它用于定义一个段落，并对段落的属性进行说明。它位于各段落起始位置部位，使用该标记后，每块文本段落之间位于各段落起始位置部位，使用该标记后，每块文本段落之间都会空出一行。都会空出一行。 P标记有多个属性，最常用的是标记有多个属性，最常用的是align属性，用于定义段落的对齐属性，用于定义段落的对齐方式，格式为：方式，格式为： 文本文本，其中，对齐方式为：，其中，对齐方式为：left、righ

50、t、center。1.3.3 文字与段落排版标记文字与段落排版标记【案例【案例1.5】换行、段落标记应用示例。】换行、段落标记应用示例。 换行、段落标记应用示例换行、段落标记应用示例 诺贝尔奖简介。诺贝尔奖简介。 诺贝尔奖的由来诺贝尔奖的由来 诺贝尔奖的奖项诺贝尔奖的奖项物理、化学、生理或医学、文物理、化学、生理或医学、文 学、学、 和平、经济和平、经济诺贝尔奖的故事诺贝尔奖的故事 提醒：由浏览结果可见，文件中的提醒：由浏览结果可见，文件中的标记产生了换行效果，但产生的新行标记产生了换行效果，但产生的新行“物物理、化学、生理或医学、文学、和平、经济理、化学、生理或医学、文学、和平、经济”与与“

51、诺贝尔奖的奖项诺贝尔奖的奖项”属同一属同一段落，仍居中显示。段落，仍居中显示。1.3.3 文字与段落排版标记文字与段落排版标记3其他标记其他标记（1）水平线标记）水平线标记 水平线标记可以在网页中插入一条水平线，将不同功水平线标记可以在网页中插入一条水平线，将不同功能的文字分隔开来。能的文字分隔开来。 其中，其中， align属性设置水平线的位置，属性设置水平线的位置， size属性设置水平线宽度，以像素为单位，默认为属性设置水平线宽度，以像素为单位，默认为2。 width属性设置水平线的长度，可以是像素或相对于属性设置水平线的长度，可以是像素或相对于当前窗口的百分比，默认值为当前窗口的百分比

52、，默认值为100%。 Color属性设置水平线的颜色。属性设置水平线的颜色。1.3.3 文字与段落排版标记文字与段落排版标记（2）有序列表标记）有序列表标记 有序列表是在各列表前面显示数字或字母的所排列表，可以使有序列表是在各列表前面显示数字或字母的所排列表，可以使用有序列表标记用有序列表标记ol和列表项标记和列表项标记li来创建。格式为：来创建。格式为： 表项表项1 表项表项2 说明：说明：Start属性设置数字或字母的起始值，可以取整数值。属性设置数字或字母的起始值，可以取整数值。type属属性设置序列的样式，有序列表标识符可以设置为：性设置序列的样式，有序列表标识符可以设置为：A大写英大

53、写英文字母；文字母；a小写英文字母；小写英文字母；1阿拉伯数字；阿拉伯数字；I大写罗马字母；大写罗马字母；i小写罗马字母。小写罗马字母。1.3.3 文字与段落排版标记文字与段落排版标记【案例【案例1.6】有序列表标记应用示例。】有序列表标记应用示例。 有序列表应用示例有序列表应用示例 璀璨的诺贝尔奖璀璨的诺贝尔奖 诺贝尔奖项诺贝尔奖项 诺贝尔物理学奖诺贝尔物理学奖 诺贝尔化学奖诺贝尔化学奖 诺贝尔生理或医学奖诺贝尔生理或医学奖 诺贝尔文学奖诺贝尔文学奖 诺贝尔和平奖诺贝尔和平奖 诺贝尔经济学奖诺贝尔经济学奖 华裔诺贝尔物理学奖华裔诺贝尔物理学奖 杨振宁杨振宁 李政道李政道 丁肇中丁肇中 朱棣文

54、朱棣文 崔琦崔琦 高锟高锟 1.3.3 文字与段落排版标记文字与段落排版标记（3）无序列表标记）无序列表标记 无序列表是在各列表前面显示特殊符号的所排列表，无序列表是在各列表前面显示特殊符号的所排列表，可以使用无序列表标记可以使用无序列表标记ul和列表项标记和列表项标记li来创建。格来创建。格式为：式为： 表项表项1 表项表项2说明：说明：type属性设置每个表项左端的符号类型，取值属性设置每个表项左端的符号类型，取值有有disc（实心圆点）、（实心圆点）、circle（空心圆点）、（空心圆点）、square（方块）。（方块）。1.3.3 文字与段落排版标记文字与段落排版标记4文字与段落排版综

55、合实例文字与段落排版综合实例【案例【案例1.7】制作一个介绍诺贝尔奖的页面，如图所示。】制作一个介绍诺贝尔奖的页面，如图所示。 1.3.4 多媒体标记多媒体标记1图像标记图像标记图像标记图像标记用于在网页中插入图像。用于在网页中插入图像。格式为：格式为： 1.3.4 多媒体标记多媒体标记标记中的属性及其说明标记中的属性及其说明 属性名属性用途功能srcSrc=”url”设置插入图像的urlalignalign=”top”图像两侧的文字与图像顶部对齐align=”center”图像两侧的文字与图像中部对齐align=”bottom”图像两侧的文字与图像底部对齐align=”left”图像位置左对

56、齐align=”right”图像位置右对齐altalt=”图像替代文字”在浏览器还没有装入图像时，在图像位置显示的文字borderborder=”图像边框宽度”设置图像边框宽度（像素）widthwidth=” 图像宽度”设置图像宽度（像素）hspacehspace=水平空白像素值设置图片与文本之间水平方向的空白（像素）vspacevspace=垂直空白像素值设置图片与文本之间垂直方向的空白（像素）1.3.4 多媒体标记多媒体标记2背景音乐标记背景音乐标记用于插入背景音乐，格式为：用于插入背景音乐，格式为：其中：其中： url指定插入音乐文件的指定插入音乐文件的url。 autostart指定是

57、否自动播放音乐，取指定是否自动播放音乐，取true时自动播放。时自动播放。loop指定是否循环播放，取值为指定是否循环播放，取值为n（整数）时，连续（整数）时，连续播放播放n次，否则循环播放，次，否则循环播放， 如：如：1.3.4 多媒体标记多媒体标记3音频和视频标记音频和视频标记 在在HTML文档中可以使用文档中可以使用标记插入音频和视频标记插入音频和视频文件。格式为：文件。格式为： 例如：例如：4Flash标记标记 在在HTML文档中可以使用文档中可以使用标记插入标记插入Flash。格式为：格式为： 1.3.4 多媒体标记多媒体标记【案例【案例1.8】图文混排及多媒体标记综合实例，如图】图

58、文混排及多媒体标记综合实例，如图1.3124所示。所示。 在【案例在【案例1.7】的基础上进行修改，添加背景音乐和图】的基础上进行修改，添加背景音乐和图像，具体修改如下：像，具体修改如下：在在中增加播放音乐文件的功能：中增加播放音乐文件的功能：在在的一级标题的一级标题后面插入右对齐的图像：后面插入右对齐的图像： 在水平线在水平线 标记后面插入左对齐的图像：标记后面插入左对齐的图像： 案例案例 超链接标记超链接标记 超链接超链接 是由源端点到目标端点的一种跳转。是由源端点到目标端点的一种跳转。 源端点可以是文字或图像等。源端点可以是文字或图像等。 目标端点可以是多种对象（如其他网

59、页或站点、图片、目标端点可以是多种对象（如其他网页或站点、图片、E-mail地址、页内段落等）。地址、页内段落等）。 根据目标端点的不同，网页中的超链接可以分为：根据目标端点的不同，网页中的超链接可以分为： 文件链接、图像链接、文件链接、图像链接、E-mail链接等。链接等。1.3.5 超链接标记超链接标记 1超链接路径超链接路径超链接的路径设置非常重要，如果路径不正确，可超链接的路径设置非常重要，如果路径不正确，可能会出现无法跳转的情况。路径一般分为绝对路径能会出现无法跳转的情况。路径一般分为绝对路径和相对路径。和相对路径。绝对路径是指绝对路径是指Internet上资源的完整地址，形式为上资

60、源的完整地址，形式为“协议协议:/计算机域名计算机域名/文档名文档名”。当链接到其他网站中。当链接到其他网站中的文件时必须用绝对路径。例如：的文件时必须用绝对路径。例如：href=http:/ 超链接标记超链接标记 2建立文件链接建立文件链接在在HTML中，使用中，使用标记建立文件链接，格式为：标记建立文件链接，格式为：链接标链接标识识说明：说明： 参数参数href是必选项，用于指定要链接到的目标文件是必选项，用于指定要链接到的目标文件名称。名称。 title属性是可选项，用来设置指向超链接时所显示属性是可选项，用来设置指向超链接时所显示的标题文字。的标题文字。1.3.5 超链接标记超链接标记