《webj技术和应用开发ppt课件》由会员分享，可在线阅读，更多相关《webj技术和应用开发ppt课件（91页珍藏版）》请在金锄头文库上搜索。
1、,WEB技术和应用开发,Section 3 数据表示与展现HTML 第3 章HTML提高,HTML提高,本讲内容1 图像2 Applet3 对象4 表单5 框架6 样式表7 脚本,1 HTML图像, 除了超链以外,HTML文档的另一个特征在于它对多媒体的支持,即可以在文档中包含图像、视频等媒体以及applet object等可执行对象，这些对象为用户提供了丰富的媒体信息，大大地加强了文档的表现力。在本节中，我们主要介绍图像以及图像映射，APPLET和OBJECT将在后面的章节中介绍 内嵌的图像等对象可以有超链和它相关联，既可以通过标准链接机制，又可以通过图像映射，当用户激活与图像相关联的超链时
2、，可以浏览新的文档或者运行服务器上的程序,1 HTML图像,1.1 图像元素 元素语法参见下页 元素语义：IMG元素在文档的当前位置嵌入一个图像图像的来源：由IMG元素的src属性指定，HTML文档中常见的图像格式包括GIF JPEG和PNG等IMG元素的alt属性给出了一串文本，该文本对图像的内容进行了描述，当用户代理不支持显示图像时，用户代理将在本该显示图像的地方显示alt的内容当IMG元素具有usemap属性时，说明该图像元素使用了客户端映射。usemap的属性值给出了映射的URI， 同样，当IMG元素设置了ismap属性时，说明该图像元素使用了服务器端映射 示例参见image,1 HT
3、ML图像,1 HTML图像,1.2客户端的图像映射图像映射使得作者可以在图像上指定若干个区域，并将特定的动作（例如，检索文档、执行程序等）与各个区域关联起来，当用户激活图像上的这些区域时，将执行相应的动作图像映射有两种类型：客户端图像映射、服务器端图像映射 客户端图像映射：当用户使用鼠标激活客户端图像映射时，激活点的像素坐标由客户端程序（例如，浏览器）来解释，客户端程序判断像素坐标位于哪个区域内，并执行与该区域相关的动作（例如沿超链跳转） 服务器端图像映射：当用户使用鼠标激活服务器端图像映射时，激活点的像素坐标被发送给服务器端的程序，服务器端的程序将解释坐标值，并执行相应的操作,1 HTML图
4、像, MAP元素元素语法参见下页元素语义 MAP元素定义了一个客户端图像映射，其标识符由name属性给出，该图像映射可供IMG等元素使用（将IMG元素的usemap属性设置为该MAP元素的name） MAP元素中可能有两种形式的内容：一种是若干个AREA元素，每个AREA元素都指定了图像上的一个几何区域，并将一个超链与该几何区域关联起来，另一种是若干个A元素，每个A元素也指定了图像上的一个几何区域，并将一个超链与该几何区域关联起来示例参见image,1 HTML图像,1 HTML图像, AREA元素元素语法参见上页元素语义：图像上任何一个几何区域的指定都通过AREA元素来实现 shape属性指
5、出了区域的形状，例如：矩形rect、 圆circle 、多边形poly coords属性的含义取决于shape属性的取值，当shape为矩形时，coords给出了矩形左上角和右下角的坐标（left-x, top-y, rightx,bottom-y ）；当shape为圆时coords给出了圆心坐标和半径（center-x, center-y, radius）； 当shape为多边形时，coords给出了各个顶点的坐标（x1, y1, x2, y2, ., xN, yN） Href属性示例参见image,1 HTML图像,1.3 服务器端的图像映射在使用客户端图像映射时，需要手工定义各个映射区域
6、，当客户端图像映射过于复杂时，可以使用服务器端图像映射此时IMG元素必须设置ismap属性，同时，IMG元素必须包含于一个A元素中，A元素将该图像与一个服务器端程序关联起来例如当用户点击图像上的某点时（例如100,50）， 该点的坐标被传送给服务器端的应用程序。即浏览器会使用URI来访问服务器http:/ Applet,HTML除了支持嵌入文本图像等媒体元素以外。还可以嵌入 可执行的程序（例如Java Applet）， 从而实现活动文档，浏览器等客 户端程序可以自动地从服务器下载HTML文档中内嵌的Applet ，在客 户端运行并显示在HTML文档中的某个区域2.1 APPLET元素 元素语法
7、参见下页 元素语义所有的Java-enabled的浏览器均支持APPLET元素，这使得网页的设计者可以在HTML文档中嵌入Java AppletJava所具备的跨平台等特性使得它成为互联网应用开发的重要技术之一，有关Java语言的使用有专门的课程介绍，不属于本课程的范围,2 Applet,2 Applet, 元素语义续APPLET元素的name属性给出了applet实例的名称，同一个网页中的不同的applet可以通过name来相互识别和通信APPLET元素的codebase属性和code共同决定了applet的URI，其中codebase属性给出了applet的基准URI ，该属性的缺省值为当
8、前文档的基准URI ，code属性则给出了java class的文件名称 示例参见Applet,2 Applet,2.2 APPLET初始化PARAM元素HTML文档中的内嵌APPLET在运行时可能需要一些初始化 值，例如输入参数等，PARAM元素可以用于为APPLET提供这些 信息，从而进行APPLET的初始化 元素语法,2 Applet, 元素语义 在APPLET元素中可以出现若干个PARAM元素，这些元素的出现顺序是无关紧要的 每个PARAM元素给出了一个初始化参数，其中属性name给出了参数的名称，而属性value则给出了参数的初始化值 参数名称和值的语法和语义与HTML规范无关，它们
9、取决于特定的嵌入对象 示例参见Applet,3 对象,在HTML中，可以使用IMG元素来嵌入图像，使用APPLET元素来 嵌入Java Applet 。考虑到将来可能会出现各种媒体类型或者可执行的程 序，HTML中引入了OBJECT元素，该元素为在文档中嵌入各种对象提供 了一种通用的机制，这儿的对象可以是作者想嵌入在文档中的各种事物， 包括图像等媒体数据、Applets、 Activex Control、 Plug-ins等3.1 对象元素OBJECT 元素语法参见下页 元素语义大多数浏览器都具备展现常见媒体数据的能力，例如文本GIF图像等。为了展现一些浏览器本身所不能够支持的数据，浏览器需要
10、调用一些外部程序，当作者需要在文档中嵌入数据或者可执行程序时，需要为浏览器提供展现这些数据或程序所需要的各种信息,3 对象,3 对象, 元素语义(续)在大多数情况下这些信息分为三种类型 可执行程序的标识符：例如，如果嵌入对象是一个applet ，作者必须给出applet的URI 展现数据的标识符：例如，如果嵌入对象是一个用于展现视频的程序，作者必须给出视频数据文件的URI 一些附加信息：例如，pplet可能有一些输入参数需要初始值每个对象并不是同时需要上述三种类型的信息 有的可执行程序可能不需要数据 有些可执行程序可能不需要初始化参数 有些数据可能不需要外部程序来展现,3 对象, 元素语义(续
11、)作者可以通过设定OBJECT元素的各种属性来提供前两种信息 classid属性给出来可执行程序的URI，通常可以是APPLET对应的Java Class名称，也可以是Activex Control的CLSID（ 128-bit value known as a globally unique identifier GUID） codetype则给出了可执行程序的类型 data属性给出了对象数据的URI type则给出了对象数据的类型 codebase属性给出了解析classid data等属性时的基准URI，该属性告诉浏览器应该从Web上的什么地方找到并下载当前的内嵌对象，当内嵌对象为Act
12、ivex Control时，浏览器通常不会从服务器上下载该对象，而是通过在客户端注册表中查找CLSID ，找到本地的Activex Control,3 对象, 元素语义(续)OBJECT元素是一种用于嵌入对象的通用机制，因此除了可以使用IMG元素外，也可以使用OBJECT来嵌入图像，同样，Applet也可以使用OBJECT元素来嵌入 示例参见object3.2 对象元素PARAMHTML文档中的内嵌对象在运行时可能需要一些初始化值，例如 输入参数等。PARAM元素可以用于为OBJECT元素提供这些信息， 从而进行对象的初始化 元素语法语义参见APPLET 示例参见object,4 表单,4.1
13、 表单简介 什么是HTML表单通过在HTML文档中加入OBJECT APPLET等，作者可以实现活动网页，同样，通过在HTML文档中加入表单，作者可以实现动态网页表单是HTML文档中的一个比较特别的区域，其中除了包含正文内容标记以外，还包含一些特别的元素（控件、文本框、复选框、单选钮、菜单按钮等） HTML表单的作用从Web网页的角度来看动态页面 FORM为用户提供了一个交互界面 浏览器将表单的内容提交给服务器端的应用程序 服务器端的应用程序根据用户输入的信息实时地生成网页内容并返回给客户,4 表单,4.1 表单简介 HTML表单的作用续从应用程序的角度而言B/S结构 FORM提供了一种在We
14、b文档中与用户进行交互的机制，用户通过修改控件的内容（例如输入文本选择菜单等）来填写完一个表单 三层结构的应用程序可以将浏览器作为展现层 用户在展现层输入信息可以被提交给逻辑层，而逻辑层的执行结果又可以在展现层显示给用户,4 表单,4.1 表单简介 表单与控件用户通过控件和表单进行交互控件的名称由name属性给出，而控件的值则由value属性所给出，作者可以在创建表单的时候为控件设定初始值，控件的值可以被用户或者脚本所修改当表单被重置reset 时，表单中所有的控件都会恢复其初始值当表单被提交submit 时，表单中的一些控件会以“名称/值”对的形式传送给服务器处理，这些控件被称为“succe
15、ssful control”参见form,4 表单, 表单中的控件内容HTML中定义了以下八种主要的控件包括button 分为3种类型 submit button 当用户激活它时将会向服务器提交表单内容 reset button 当用户激活它时将会重置表单的内容 push button 这种按钮可以具有客户端的脚本用于处理特定的事件，例如用户点击按钮的click事件。作者可以使用BUTTON或INPUT元素来创建button控件checkbox 用户可以将其开关值设置为on/off 当控件的checked属性被设定时，其开关值为on； 当用户提交表单时只有被设置为on的checkbox才会被传
16、送给服务器 表单中的多个checkbox控件可以具有相同的控件名称，但是控件的值不同，这样用户可以实现多选，作者可以使用INPUT元素来创建checkbox控件,4 表单, 表单中的控件内容续 radio button 用户可以将其开关值设置为on/off radio button与checkbox控件基本类似，但radio button是互斥的，即所有具有相同名称的radio button只能有一个被设置为on 表单中的多个radio button控件可以具有相同的控件名称，但是控件的值不同，这样用户可以实现多选作者可以使用INPUT元素来创建radio button控件 menu menu为用户提供了多个选择项 作者可以使用SELECT元素来创建menu控件，使用OPTION元素来创建menu中的选项，使用OPTGROUP来在逻辑上将选项分组 text input 供用户输入文本分为两种类型 INPUT元素用于创建一种单行的输入控件 TEXTAREA元素则用于创建多行的输入控件,
