3 Web多媒体项目开发.ppt

1、1,第3章 基于Web的多媒体项目开发,河南大学计算机与信息工程学院 赵建辉 ,2,本章主要内容,超文本标记语言HTML 使用FrontPage开发多媒体网页 虚拟现实造型语言VRML 使用可视化工具开发三维多媒体网页 无线标记语言,3,3.1 超文本标记语言HTML,HTML概述 HTML文件基本结构 超链接标记 多媒体标记 表单标记 HTML文件的保存,4,3.1.1 HTML概述,网页编著有HTML代码编写和使用“所见即所得”网页编著工具两种方法。 超文本标记语言(HyperText Markup Language, HTML)是一种用来创作Web页面的描述语言。 HTML网页文件通过标

2、记(Tag)，将影像、声音、图像、文字等链接显示出来。,5,3.1.1 HTML概述,HTML标记由“”三部分组成，如 HTML标记可以嵌套，标记名称中的字母不分大小写，标记还可以包含“属性”，用于提供相应的附加信息，如颜色、字体、对齐方式等等。 HTML 文件以.htm 或.html为扩展名保存后，由浏览器打开显示。,6,3.1.2 HTML文件基本结构,每个HTML文档都是由标记 开始，以标记 结束 整个HTML文件分成两个部分组成：文档头（head）和正文（body）。,7,3.1.2 HTML文件基本结构,基本结构 . 正文内容 ,8,3.1.3 超链接标记,链接是指将文档中的文本或者

3、图像与另一个文档、文档的一部分或者另一幅图像链接在一起 超链接标记是，其基本格式是： . ,9,3.1.3 超链接标记,URL(Uniform Resource Locator)是识别因特网上任何一个文件地址或资源地址的标准表示法，称为统一资源地址 URL地址中采用相对路径链接比使用绝对路径链接的运行效率更高 绝对路径：请求服务的类型、网络上的主机名、服务器上的文件名 相对路径：文件名 【例3-1】超链接的实现。,10,3.1.4 多媒体标记,在网页中嵌入的多媒体元素包括文本、图像、声音和视频。 内联图像 内联图像指与Web网页中的文本一起下载和显示的图像，表现为文本和图像显示在同一网页上。

4、格式： ,11,3.1.4 多媒体标记,外联图像 如果内联图像文件太大，可以用文字或者小的内联图像来代表大图像 然后把它们与大图像文件链接在一起，当用鼠标单击这个链接后，大图像显示在另一个窗口中，这种图像就称为外联图像 格式： 【例3-2】内联图像与外联图像,12,3.1.4 多媒体标记,图像作为网页的背景 格式： 在文档中链接声音或视频文件 使用与外联图像类似的语句 差别是文件扩展名不同 【例3-3】链接声音文件或视频文件,13,3.1.4 多媒体标记,在文档中嵌入声音或视频文件： 【例3-4】嵌入声音文件 在文档中嵌入背景声音 ,14,3.1.5 表单标记,表单是信息交流的窗口 用户填写表

5、单，单击“提交” 按钮提交表单 表单处理程序从表单中收集信息，将数据提交给服务器 服务器启动表单控制器进行数据处理，并将结果生成新的网页，显示在用户屏幕上。,15,3.1.5 表单标记,标准格式： 用户单击提交按钮后，可以通过ASP实现与服务器端的交互功能。 【例】表单,16,3.1.6 HTML文件的保存,习惯上将一个网站的首页文件保存为index.htm 或index.html 考虑到许多服务器不支持中文文件名，文件在命名时应尽量采取有意义的英文名称。 对于有大量文件的网站，为了便于文件的管理，需要规划文件的目录结构。 目录结构的好坏对浏览者来说没有什么太大的影响，但是对于站点本身的上传维

6、护、站点内容未来的扩充和移植有着重要的影响。,17,3.1.6 HTML文件的保存,规划目录结构常遵循的几个原则 不要将所有文件都存放在根目录下 按站点内容栏目分别建立子目录 在每个子目录下建立image子目录，专门存放相应栏目中的图像等文件 不要使用过长的目录、不要使用中文目录、尽量使用意义明确的目录。,18,3.2 FrontPage开发多媒体网页,FrontPage2003简介 在FrronttPagee2003中创建网站 在FrronttPagee2003中创建网页 使用框架进行网页布局 使用表格进行网页布局 使用布局表格与单元格进行网页布局 超链接的添加 多媒体元素的添加 交互功能的

7、实现,19,3.3 虚拟现实造型语言VRML,VRML概述 VRML发展历程 VRML工作原理 VRML文件的编写与浏览 VRML文件结构 使用VRML语言实现静态三维页面的制作 三维页面中加入多媒体元素 三维页面中交互功能的实现,20,3.3.1 VRML概述,虚拟现实造型语言(Virtual Reality Modeling Language, VRML) 一种用来描述WWW页面上三维交互环境的文件格式 语法简单、易懂，编辑操作方便；可以嵌入Java、JavaScript等语言；可以利用各种传感器实现人机交互；文件容量小，适宜网络传输，可以方便地创建立体网页和网站。,21,3.3.2 VR

8、ML发展历程,1994.10 VRML1.0草案 1996.8 VRML2.0 1997.12 VRML正式成为国际标准-VRML97 1998 VRML协会改为Web3D协会 2001.8 X3D标准 2005.10 X3D标准正式成为国际标准,22,3.3.3 VRML工作原理,同HTML相比 基本原理一样：使用一系列指令告诉浏览器如何显示一个文档，都是万维网页面的描述语言 不同的是，以VRML为核心的万维网浏览器浏览的是三维世界 基本工作原理 可概括为：文本描述、远程传输、本地计算生成,23,3.3.4 VRML文件的编写与浏览,编写 最简单的方法：使用记事本，设计效率不高 VrmlPa

9、d：提高效率，进行管理 Cosmo Worlds：可视化 三维动画制作工具：另存为VRML（*.wrl）文件类型 浏览 Cosmo Player、Blaxxun Contact等插件,24,3.3.5 VRML文件结构,主要包括：文件头、节点、事件、路由和脚本，唯一必须的是文件头 文件头部分告诉浏览器，该VRML文件符合的规范标准以及使用的字符集等信息，其基本格式为：#VRML V2.0 utf8。 其他：注释(#)、节点、域和域值,25,3.3.6 实现静态三维页面的制作,【例3-19】初步体验三维效果：Group节点 【例3-20】更改外观：Appearance 节点 【例3-21】移动位

10、置：变换节点 【例3-22】添加文本：Text节点 【例3-23】添加背景：Background 节点,26,3.3.7 三维页面中加入多媒体元素,【例3-24】添加背景音乐：Sound节点 【例3-25】添加背景图片：Background 节点frontUrl域 【例3-26】贴图纹理：ImageTexture节点 【例3-27】播放视频： MovieTexture节点,27,3.3.7 三维页面中加入多媒体元素,通过时间传感器节点和插补器节点，实现场景中造型形状、颜色变化以及造型之间的位置运动等动画效果 【例3-28】位置插补器动画 【例3-29】颜色插补器动画,28,3.3.8 三维页面

11、中交互功能的实现,一般交互通过Anchor节点实现 复杂的交互功能通过传感器节点或Script节点实现 【例3-30】实现超链接 【例3-31】将wrl文件嵌入html文件 【例3-32】二维页面与三维页面的交互：使用框架实现交互,29,3.3.8 三维页面中交互功能的实现,感应器主要用于检测浏览者在虚拟场景中的动作，通过事件的传递，实现用户和虚拟环境的交互 【例3-33】接触感应器节点 【例3-34】平面移动感应器节点 【例3-35】接近感应器节点 【例3-36】碰撞感应器节点,30,3.4 使用可视化工具开发三维多媒体网页,使用Cosmo Worlds设计VRML文件 使用3DS MAX导

12、出VRML文件 VRML文件优化,31,3.5 无线标记语言WML,WML概述 WML无线网页文件的编写 WML的任务和事件 WML的表单,32,3.5.1 WML概述,无线标记语言(Wireless Markup Language, WML) 是WAP （Wireless ApplicationProtocol 无线应用协议）规范的一部分 类似于编写网页的HTML语言，WML是用来设定手机上文字和图像的显示方式的一种标记语言 用于编写无线网站的页面文件,33,3.5.1 WML概述,WML文件结构 WML的页面通常叫做deck deck由一组互相链接的card 组成 card内可以包含文本、

13、标记、链接、输入控制、任务、图像等等 card之间可以互相链接 WML页面文件的扩展名是wml 手机模拟器 M3GateV1.2等,34,3.5.2 WML无线网页文件的编写,【例3-37】显示文本与排版 【例3-38】建立表格 【例3-39】添加图像,35,3.5.3 WML中的任务和事件,任务和事件 在WML中浏览和更新变量的动作被称为任务 实现任务的元素称为任务元素 与任务相关的是事件，事件将一系列任务放在一起通过事件触发器来执行任务。 任务通过对事件的响应改变程序的运行顺序，任务包括、和 任务必须绑定到某事件上才能做一些有用的事情 完成对任务绑定的元素：、 和 。,36,3.5.3 WML中的任务和事件,【例3-40】、 的使用