[教程] WAP初级教程(5)—WML之使用表格、链接和图像
发布:小优 | 发布时间: 06 January 2008WAP初级教程(5)—WML之使用表格、链接和图像
上一节我们知道了WML编程的基本结构以及文字的插入,今天我们要讲的是怎样在WAP页面中使用表格、链接和图像。
一、表格
WMLcard可通过设置显示WML的表格函数
| <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Table"> <p> <table columns="3"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </p> </card> </wml> |
手机显示的结果也许会是这样
| ------ Table ------ Cell 1 Cell 2 Cell 3 |
WML支持简单的表格标记<table>、<tr>和<td>。语法如下:
| <table align="L|R|C" columns="NUMBER" TITLE="STRING" <tr> <td> 内容... </td> 其他列... </tr> 其他行... </table> |
在WML里定义一个表格必须先指定列数,即columns属性。而在表格里就必须有相应数量的<td></td>标记对。因该注意的是,align(对齐)属性的内容只能是L(左对齐)、R(右对齐)和C(居中),跟其他标记不同(是不是有点怪?)。
下面的例子演示了表格的基本功能:
| <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="SALARY"> <p> <table columns="2"> <tr> <td>NAME</td> <td>PAYED</td> </tr> <tr> <td>Johnson</td> <td>$7810.11</td> </tr> <tr> <td>Faye</td> <td>$8912.00</td> </tr> </table> </p> </card> </wml> |
显示结果(注意WML里没有表格线):
| ------ SALARY ------ NAME PAYED Johnson $7810.11 Faye $8912.00 |
二、链接
WML的card可被设置来显示WML的anchor函数
<anchor>
<anchor>标记总是带有指定的任务("go"向后, "prev"向前, 或 "refresh"刷新)。任务定义了当用户选择链接时该做些什么。在这个例子里,当用户选择"Next page"(下页)链接时,任务是“到文件test.wml":
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Anchor Tag"> <p> <anchor>Next page <go href="test.wml"/> </anchor> </p> </card> </wml> |
<a>
<a>标记经常执行一个"go"任务,但没有变量。下面的例子和<anchor>标记例子所做的一样:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="A Tag"> <p> <a href="test.wml">Next page</a> </p> </card> </wml> |
三、图像
WMLcard可被设置显示图像:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Image"> <p> This is an image <img src="/images/stickman.wbmp" alt="stickman" /> in a paragraph </p> </card> </wml> |
手机显示的结果也许是这样的:
------ Image ------ This is an image ![]() |
注意:以前.wbmp类型是能在WAP浏览器中被显示的唯一一种图像类型,可以使用PHOTOSHOP和fireworks制作。你也可以使用电脑上的.jpeg或.PNG等格式的图像试试。
相对于多媒体泛滥的HTML网站,在资源紧张的WAP设备上显示图像就有点奇怪了。但是WML还是提供了图像显示的支持,毕竟一个设计精巧的图像会比一段话表达意思更清楚,或许占用空间更小。
WML支持WBMP(Wireless Bitmap)格式的图像,需要用特殊工具制作。显示图像使用<img>标记,语法如下:
| <img alt="STRING" src="STRING" align="top|middle|bottom" height="NUMBER" width="STRING" hspace="NUMBER" vspace="STRING" localsrc="STRING" /> |
alt:图像无法显示时的替换文字。
src:图像的url。
localsrc:储存于ROM(或RAM)中图像的名字,各种终端支持不同。
align:上下对齐方式。
height:图像显示高度。
width:图像显示宽度。
hspace:图像左右的空白,以pixel数或百分比表示。
vspace:图像上下的空白,以pixel数或百分比表示。
src:图像的url。
localsrc:储存于ROM(或RAM)中图像的名字,各种终端支持不同。
align:上下对齐方式。
height:图像显示高度。
width:图像显示宽度。
hspace:图像左右的空白,以pixel数或百分比表示。
vspace:图像上下的空白,以pixel数或百分比表示。
上面的属性只有alt和src是必须的。其他附加属性基本上仅仅用来指示用户终端,大多数情况下会被忽略。
下面是个例子:
| <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card title="Congratulation"> <p> 玩转RIA, <img src="wonderful.wbmp" alt="wonderful"/>! </p> </card> </wml> |
下面分别是在支持和不支持图像的终端上的显示结果:
|
发布:小优 | 分类:Mobile | 评论:0 | 引用:0 | 浏览:
| TrackBack引用地址
- 相关文章:
[教程] WAP初级教程(4)—WML基本结构 (2008-1-2 20:56:38)
[教程] WAP初级教程(3)—WML编程环境搭建 (2007-12-30 18:30:45)
[教程] WAP初级教程(2)—WML工具资源篇 (2007-12-30 18:4:31)
[教程]WAP初级教程(1)—认识WAP (2007-12-29 0:43:52)
[专题]WAP入门教程系列 (2007-12-29 0:37:55)
[教程]ActionScript 3 Cookbook 中文版PDF(下载) (2007-7-8 17:29:25)
[教程]FLASH CS3/AS3.0教程汇总(2007-7-25更新) (2007-7-7 20:10:0)
[教程]Flex初学者看,Flex官方视频演示 (2007-7-4 23:33:0)
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。







