html高级主题课件

1、高等学校计算机应用人才培养系列教材9.1HTMLHTML网页设计网页设计高等学校计算机应用人才培养系列教材9.2第九章第九章 HTML高级主题高级主题高等学校计算机应用人才培养系列教材9.3本章结构本章结构u使用多媒体使用多媒体u使用使用JavaScript脚本脚本u区域组件布局区域组件布局uXML初步初步u本章小结本章小结u思考题思考题高等学校计算机应用人才培养系列教材9.4使用多媒体使用多媒体Web中的多媒体中的多媒体uHTML之所以在很短的时间内受到人们的广泛青睐，很重要的之所以在很短的时间内受到人们的广泛青睐，很重要的原因是它能够支持很多的多媒体对象格式，比如图像、声音、原因是它能够支

2、持很多的多媒体对象格式，比如图像、声音、动画和影视等，丰富了动画和影视等，丰富了Web页面的表现形式。页面的表现形式。u近年来，随着网络通信设备的进步，以及浏览器技术的发展，近年来，随着网络通信设备的进步，以及浏览器技术的发展，可以被可以被Web所支持的多媒体元素也在不断增多，如：活动的所支持的多媒体元素也在不断增多，如：活动的GIF、音频以及视频文件、音频以及视频文件、FLASH文件等，这些统统被称为文件等，这些统统被称为Web多媒体。多媒体。u多媒体可以丰富多媒体可以丰富Web页面显示，但是另一方面，由于多媒体对页面显示，但是另一方面，由于多媒体对象自身的特点，它们往往占据着较大的容量，需

3、要足够的时间象自身的特点，它们往往占据着较大的容量，需要足够的时间和存储空间来进行文件下载，使页面容易进入虚中断的状态。和存储空间来进行文件下载，使页面容易进入虚中断的状态。u在一般网页开发过程中，除非是对页面内容进行必要的扩充和在一般网页开发过程中，除非是对页面内容进行必要的扩充和补充，而又没有其它的方式可替代时，才使用多媒体补充，而又没有其它的方式可替代时，才使用多媒体高等学校计算机应用人才培养系列教材9.5使用多媒体使用多媒体添加活动的添加活动的GIFu活动活动GIF是由许多的是由许多的GIF图像叠加在一起而产生的图像叠加在一起而产生的u在在HTML文件中使用活动文件中使用活动GIF和使

4、用静态图像的方法是一和使用静态图像的方法是一样的，只需要使用样的，只需要使用标记。例如：标记。例如：高等学校计算机应用人才培养系列教材9.6使用多媒体使用多媒体添加音频添加音频uWeb网页上主要有两种音频使用方式网页上主要有两种音频使用方式n音频自动播放，例如，背景音乐。音频自动播放，例如，背景音乐。n点击后才会播放，例如，在线歌曲点播点击后才会播放，例如，在线歌曲点播u普遍使用的音频文件格式主要有四种：普遍使用的音频文件格式主要有四种：nMIDI、WAV、AU、AIFFu针对不同的浏览器，使用不同的标记。语法如下：针对不同的浏览器，使用不同的标记。语法如下：nIE浏览器：浏览器：nNetsc

5、ape浏览器：浏览器：高等学校计算机应用人才培养系列教材9.7使用多媒体使用多媒体添加视频添加视频u通常使用的视频文件格式是通常使用的视频文件格式是nAVI、MPEG、QuickTimeu针对不同的浏览器，使用不同的标记。语法如下：针对不同的浏览器，使用不同的标记。语法如下：nIE浏览器：浏览器：nNetscape浏览器浏览器高等学校计算机应用人才培养系列教材9.8使用多媒体使用多媒体添加添加flash动画动画uflash是美国是美国Macromedia公司于公司于1999年年6月推出的一种基于月推出的一种基于矢量图形的交互式多媒体技术，其动画丰富多采，富于变矢量图形的交互式多媒体技术，其动画

6、丰富多采，富于变化性并且相对于其他格式动画，文件占用空间小，在网页化性并且相对于其他格式动画，文件占用空间小，在网页无需全部下载完毕就可以显示并以流的形式播放。无需全部下载完毕就可以显示并以流的形式播放。u在在HTML中添加中添加flash动画，需要使用动画，需要使用标记，语法标记，语法如下：如下：高等学校计算机应用人才培养系列教材9.9使用多媒体使用多媒体标记标记u在在HTML 4规范中包含了可以嵌入任何对象元素的规范中包含了可以嵌入任何对象元素的标标记。可以适用于所有特殊内容，包括记。可以适用于所有特殊内容，包括Applet、插件、插件、ActiveX、图像，以及其它嵌入的内容。其语法格式

7、如下：图像，以及其它嵌入的内容。其语法格式如下： u支持的对象格式有：支持的对象格式有：高等学校计算机应用人才培养系列教材9.10使用使用JavaScript脚本脚本u JavaScript使用目的使用目的n实现在实现在Web页面中与页面中与Web浏览者交互，从而可以具备客户端的事浏览者交互，从而可以具备客户端的事件响应能力，完善用户体验。件响应能力，完善用户体验。nJavaScript是通过嵌入或调入到是通过嵌入或调入到HTML页面中实现的。页面中实现的。u在在HTML中包含中包含JavaScriptn可以在可以在HTML页面的任意位置添加页面的任意位置添加JavaScript代码。添加方法

8、有代码。添加方法有两种：两种：直接在直接在HTML中添加中添加JavaScript代码代码: JavaScript代码；代码；导入导入JavaScript文件文件高等学校计算机应用人才培养系列教材9.11使用使用JavaScript脚本脚本概览概览u基本数据结构基本数据结构n基本数据类型：数值型、字符串型、布尔型、和空值基本数据类型：数值型、字符串型、布尔型、和空值n数据类型可以是常量，也可以变量数据类型可以是常量，也可以变量n表达式：对变量和常量进行赋值、改变、计算等一系表达式：对变量和常量进行赋值、改变、计算等一系列操作列操作u程序构成程序构成n整个整个JavaScript脚本语言基本是由

9、控制语句、函数、对脚本语言基本是由控制语句、函数、对象、方法、属性构成，用于实现特定的功能。象、方法、属性构成，用于实现特定的功能。u对象使用对象使用nJavaScript可以创建自己的对象。通过对象，可以创建自己的对象。通过对象，JavaScript能完成许多复杂的工作。能完成许多复杂的工作。高等学校计算机应用人才培养系列教材9.12JavaScript脚本示例脚本示例弹出视窗弹出视窗高等学校计算机应用人才培养系列教材9.13区域组件布局区域组件布局u在网页开发过程中，通常使用表格进行网页布局，但在有在网页开发过程中，通常使用表格进行网页布局，但在有些情况下，表格的灵活性显得不足，这种情况下

10、，就需要些情况下，表格的灵活性显得不足，这种情况下，就需要使用区域组件来进行布局。使用区域组件来进行布局。u在实际的网页开发中，单纯使用这些区域标记用途并不大在实际的网页开发中，单纯使用这些区域标记用途并不大。直到介绍了。直到介绍了CSS样式表以后，才可以利用这些区域标记样式表以后，才可以利用这些区域标记的优势进行网页布局。的优势进行网页布局。u通过区域标记将文字、图形、表格等对象以特定的样式进通过区域标记将文字、图形、表格等对象以特定的样式进行组合布置，丰富了网页的布局。行组合布置，丰富了网页的布局。高等学校计算机应用人才培养系列教材9.14区域组件布局区域组件布局标记的使用标记的使用u在网

11、页内，如果要在不同区域采用不同样式，可以使用在网页内，如果要在不同区域采用不同样式，可以使用标记。其使用语法如下：标记。其使用语法如下： u或是：或是：高等学校计算机应用人才培养系列教材9.15区域组件布局区域组件布局标记的使用标记的使用u标记同样用于区域设置，一般用来设置小文本段落标记同样用于区域设置，一般用来设置小文本段落的样式。其使用语法如下：的样式。其使用语法如下： u或是或是:u标记一般用于小文本段落的样式设置，所以，网页标记一般用于小文本段落的样式设置，所以，网页设计者可以在已经定义好样式的文本段落中通过设计者可以在已经定义好样式的文本段落中通过标标记实现特殊化设置。记实现特殊化设

12、置。高等学校计算机应用人才培养系列教材9.16标记示例标记示例高等学校计算机应用人才培养系列教材9.17区域组件布局区域组件布局标记的使用标记的使用u标记作为区域组件的一种，和标记作为区域组件的一种，和、标记标记一样，也用于网页布局。一样，也用于网页布局。u它在使用它在使用HTML专业编辑软件专业编辑软件Dreamweaver设计网页时发设计网页时发挥着重要作用，也被称为层布局。挥着重要作用，也被称为层布局。u而事实上，由于而事实上，由于标记只能在标记只能在Netscape浏览器中被识浏览器中被识别，别，IE浏览器并不支持，所以并不建议使用浏览器并不支持，所以并不建议使用标记标记。从功能性角度

13、上讲，。从功能性角度上讲，标记相当于标记相当于标记。标记。高等学校计算机应用人才培养系列教材9.18区域组件布局区域组件布局三种区域组件的差异三种区域组件的差异u标记和标记和标记的差异标记的差异n标记是一个块级标记，可以包含段落、标题、表标记是一个块级标记，可以包含段落、标题、表格，章节等对象。格，章节等对象。n标记是个行内标记，即它只能用于标记同行对标记是个行内标记，即它只能用于标记同行对象象n标记不能自动换行，而标记不能自动换行，而标记能够产生换行标记能够产生换行u标记标记n基本功能用法类似基本功能用法类似n若用在若用在IE浏览器中，要先用浏览器中，要先用标记替换标记替换标记标记n从编辑网

14、页的习惯上看，通常是在从编辑网页的习惯上看，通常是在标记中根据需标记中根据需要再嵌入要再嵌入标记标记高等学校计算机应用人才培养系列教材9.19标记和标记和标记的区别示例标记的区别示例高等学校计算机应用人才培养系列教材9.20区域组件布局区域组件布局u区域标记位置设定区域标记位置设定n区域标记之所以成为表格标记之外一个很重要的布局区域标记之所以成为表格标记之外一个很重要的布局工具，很重要的一点就是区域标记可以自由定置自己工具，很重要的一点就是区域标记可以自由定置自己的位置，设计者可以将需要的文本迅速定义在理想的的位置，设计者可以将需要的文本迅速定义在理想的地方。要掌握区域标记，就必须学习位置设定

15、。地方。要掌握区域标记，就必须学习位置设定。u区域立体空间建立区域立体空间建立n区域布局之所以称为层布局，除了区域布局之所以称为层布局，除了top、left属性外，事属性外，事实上还有一个非常重要的属性：实上还有一个非常重要的属性：z-index属性。通过该属性。通过该属性，可以定义区域的上下层关系，实现了区域立体属性，可以定义区域的上下层关系，实现了区域立体空间的设定。空间的设定。高等学校计算机应用人才培养系列教材9.21XML初步初步uXML概述概述nXML是是The Extensible Markup Language（可扩展标（可扩展标记语言）的简写。记语言）的简写。XML最初设计的目

16、的是弥补最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。后来逐渐用于网络数据的转换和描述。nXML是一种能定义其他语言的语言，并且同样是一种是一种能定义其他语言的语言，并且同样是一种标记语言。然而，标记语言。然而，XML的标记比的标记比HTML强大很多。强大很多。HTML只是只是Web显示数据的通用方法，而显示数据的通用方法，而XML提供了提供了一个直接处理一个直接处理 Web 数据的通用方法。数据的通用方法。nXML的特点如下：便捷、应用广泛、兼容性好、简洁的特点如下：便捷、应用广泛、兼

17、容性好、简洁易懂、可读性强、易于创建易懂、可读性强、易于创建高等学校计算机应用人才培养系列教材9.22XML初步初步XML基础基础uXML语法语法nXML声明声明n根元素根元素n每一个起始标记必须有结束标记匹配每一个起始标记必须有结束标记匹配nXML标记对大小写是敏感的标记对大小写是敏感的n在在XML中不允许不正确的标记嵌套中不允许不正确的标记嵌套n属性的值必须使用引号属性的值必须使用引号标注标注n空格会被保空格会被保n注释和注释和HTML文档相同：文档相同：高等学校计算机应用人才培养系列教材9.23XML初步初步XML基础基础uXML标记：标记：XML标记的命名必须遵守以下规则：标记的命名必

18、须遵守以下规则：n标记的名字可以包含子母，数字和其他字符标记的名字可以包含子母，数字和其他字符n标记的名字不能以数字或者标点符号开头标记的名字不能以数字或者标点符号开头n标记的名字不能以标记的名字不能以XML（或者（或者xml，Xml，xMl等）开等）开头头n标记的名字不能包含空格标记的名字不能包含空格uXML标记的属性标记的属性nXML标记可以拥有自己的属性，标记的属性为标记提标记可以拥有自己的属性，标记的属性为标记提供了额外的信息。这些信息通常不是数据内容的一部供了额外的信息。这些信息通常不是数据内容的一部分，但对标记来说却很重要。分，但对标记来说却很重要。高等学校计算机应用人才培养系列教

19、材9.24在在HTML中使用中使用XMLXML文档文档 tree.xml在在HTML文件中将文件中将XML数据数据嵌入到表格嵌入到表格高等学校计算机应用人才培养系列教材9.25XML相关技术相关技术uDTD文件文件uXSL（Extensible Style Language）n可扩展样式语言可扩展样式语言XSLuXLink（XML Linkging Language）nXML的链接语言的链接语言高等学校计算机应用人才培养系列教材9.26XHTML：用：用XML改写改写HTMLuXHTML是是The Extensible HyperText Markup Language（可扩（可扩展超文本标记

20、语言）的缩写。展超文本标记语言）的缩写。uXHTML是一个基于是一个基于XML的标记语言，目的是的标记语言，目的是XML应用。结合应用。结合了部分了部分XML的强大功能及大多数的强大功能及大多数HTML的简单特性。的简单特性。u2000年底，国际年底，国际W3C组织组织(World Wide Web Consortium)组织组织公布发行了公布发行了XHTML 1.0版本。版本。uXHTML 1.0是一种在是一种在HTML 4.0基础上优化和改进的新语言，基础上优化和改进的新语言，可以看作是一种增强了的可以看作是一种增强了的HTML，它的可扩展性和灵活性将适，它的可扩展性和灵活性将适应未来网络应用更多的需求。应未来网络应用更多的需求。u建立建立XHTML的目的就是实现的目的就是实现HTML向向XML的过渡。目前国际的过渡。目前国际上在网站设计中推崇的上在网站设计中推崇的WEB标准就是基于标准就是基于XHTML的应用（即的应用（即通常所说的通常所说的C