📄 wml设计-入门篇.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0053)http://www.fanqiang.com/a4/b6/20010608/070000436.html -->
<HTML><HEAD><TITLE>[ 永远的UNIX > WML设计-入门篇 ]</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT: 12pt 宋体
}
TH {
FONT: 12pt 宋体
}
INPUT {
FONT: 12pt 宋体
}
SELECT {
FONT: 12pt 宋体
}
TEXTAREA {
FONT: 12pt 宋体
}
SELECT {
FONT: 12pt 宋体
}
checkbox {
FONT: 12pt 宋体
}
A:link {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:visited {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:hover {
COLOR: #ffff00; TEXT-DECORATION: underline
}
BODY {
FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
TD {
FONT-SIZE: 12pt; FONT-FAMILY: "宋体", "serif"
}
P {
FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
</STYLE>
<META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD>
<BODY text=#ffffff bgColor=#000000 background=WML设计-入门篇.files/bline.gif>
<DIV align=center>
<CENTER>
<TABLE height=400 cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD height=45>
<P align=center><IMG alt="[ 永远的UNIX::UNIX技术资料的宝库 ]"
src="WML设计-入门篇.files/title.gif"></P></TD></TR>
<TR>
<TR>
<TD vAlign=bottom align=left height=40><SMALL><A
href="http://www.fanqiang.com/">首页</A> > 编程技术 > XML/WML >
正文</SMALL></TD></TR>
<TR>
<TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1
src="WML设计-入门篇.files/c.gif" width=1></TD></TR>
<TR>
<TD vAlign=center align=middle height=40><FONT
size=5><B>WML设计-入门篇</B></FONT></TD></TR>
<TR>
<TD align=middle height=20><FONT
color=#999999><SMALL>http://www.fanqiang.com (2001-10-31
11:44:15)</SMALL></FONT></TD></TR>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=700 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top><FONT color=#cccccc> <BR><BR>
<BR> Wireless Markup Language - WML是WAP中用来描述与展现资料用的语言，如同HTML与HTTP协定间的定位一般；如果你熟悉HTML相信你会很快入手并爱上它
<BR><BR>WML与XML
<BR><BR>WML是类似HTML的标语言，不同的是WML基础是Extensible Markup Language (XML)，而非HTML的基础Standard Generalized Markup Lanuage (SGML)，不过XML也正是SGML的变形；本文我们不讨论SGML与XML的差异，只说明撰写WML所需要的XML基础知识，并首先，我们先来看看下面这个基本的WML原始码：
<BR> <BR><wml> <BR><head>
<BR><meta http-equiv="cache-control" content="max-age=0"/>
<BR></head> <BR><template>
<BR><do type="options" label="help">
<BR><go href="help.wml"/> <BR></do>
<BR></template> <BR><card>
<BR>This is a card. <BR></card>
<BR></wml>
<BR><BR>以"<"与">"所构成的语法，是XML的基本文法，而以<标>开头，包含内文，再以</标>结束的格式，我们称之为标－Tag，XML的基本元素；由於构成WML的语法是基础於XML，因此它与以SGML的HTML有着明显不同，它是大小写有别的，并且大部份的标名称是以小写为主，因此<card>不等於<Card>，你也不能以<card></Card>构成一个标元素。而所有的标，若无成对，也就是只有开头的单对标，必须以<标/>格式，表示自已是开头也是结尾，例如HTML中的<BR>在WML就必须是<br/>。
<BR><BR>既然称标为元素，标就如同细胞，集合而构成WML文件，再构成WAP软体系统，而XML的地位就如同DNA一般，定义了所有元素的基本可能型式。首先我们来谈谈WML的DNA－XML的概念。首先，在XML中标是由一个名称构成，例如<card>，我们就称之为card标，视它为一个基本单位－元素，而每个标开头与结尾之间，我们称之为内文；内文之中，可能包含两种基本常见的元素－标与字串；利用标中能再包含标或字串的特性，虽然简单，但却可以构成许多杂的XML文件，如同细胞虽简单，但却构成了杂的人类一般。虽然标如同细胞，同类的细胞大致相同，但是为了能有弹性的特色变化，XML语法中允许你利用属性值（attribute）给予标更细节的说明，例如前面的例子中的meta标使用中，便使用到了http-equiv与content两个属性值；所以你应该很容易了解标属性值的语法便是在开头标的<>内部指定，以空白做为格的“键名－键值”（key-value）对构成，键值必须以双引号或单引号左右包括起来以示区别；在WML规中，标中的某些属性值是必须的，否则是错误的文法，例如前面例子中的go标的href属性。不要将HTML中允许简化而不在键值左右加上引号的坏习惯带来，这在XML文法中是不允许的。
<BR><BR>XML虽然规了标的组合方式，但是WML规格会给允每个具有义意的标（如同前面的例中的wml、template、card，等等...）一定的规格，也就是说什麽样的标有什麽样的意义，标能包含什麽样的标，都有其规存在，而不是杂乱无章的；例如，我们拿前面的WML原始码例来看，WML对wml所能包含的内文规就如同以下：
<BR><BR>图表 1、标的内文属性 <BR>元素 包含
<BR><head> 无或包含一个
<BR><template> 无或包含一个
<BR><card> 包含一个或一个以上
<BR><BR><BR>这样的规格制定方式，在XML中是以Document Type Definition DTD来定义的，因此WML也有它语法对映的DTD格，我们抽取其中制定wml标的部份来看：
<BR><!ELEMENT wml ( head?, template?, card+ )>
<BR><BR><BR>XML的文件构成，如果以分析的角度来看，便如同一个树状的资料结构： <BR><BR>
<BR><BR>wml标包含了head、template与card三个标，每个标或字串在这资料结构中，被视为一个节点，而身为最顶端的节点－<wml>，即为整个树状结构资料的WML文件的根，这是WML文件的第一个标开头。接下来，wml标所能包含的内文可以是依顺序head、template与card标，在DTD中的语法中，你应该很容易了解它的意义与使用方法，在上面的DTD语法中ELEMENT後所接的便是欲描述的标，构成的标名旁加“?”表示“无或包含一个”，而“+”表示“包含一个或一个以上”，若旁边没加任何符号，则表示“正好一个”，你可以参考图表1来了解其间的关。
<BR><BR>WML的显示
<BR><BR>wml标中head与template是非必要性的标，我们稍後再讨论；而card标是整个WML文件内容的主要所在，如同HTML语法中的body标一般，所有可见的内容都在这里；card所能包含的文字与图型控制标，与HTML语法类似。这些文字控制标该怎麽应用呢？例如：
<BR> <card id="main" title="Hello World">
<BR><p> <BR><i>Hello WAP World.</i>
<BR></p> <BR><p>
<BR>This is my first <br/><b>WML</b> example.
<BR></p> <BR></card>
<BR><BR><BR>下面则是WML显示幕上你可能看到的情形
<BR><BR>card里包含了两个p标（功用在於区分段落），所以被包含的“Hello WAP world”与“This is my first WML example”便会被分段开来；而i标与b标所包含的文字分别会以斜体与粗体显示。上面所谈到的标都是文字格式化的标，与HTML类似，共有：
<BR>标 用途解释 <BR>em 将字体强调
<BR>strong 将字体加强强调 <BR>i 将字体变成斜体
<BR>b 将字体变成粗体 <BR>u 将字体加上底线
<BR>big 使用较大的字体 <BR>small 使用较大的字体
<BR><BR><BR>分页的文件格式
<BR><BR>但是，card不同於body标的地方是html标只能包含一个body，而wml标却能包含一个以上的card标，这样设计上的差异主要是WML文件的显示器通常是行动电话之类的小型显示幕，受限於显示空间，而将WML文件（Deck）设计成可以包含多个页面（card）的格式。这样的设计格局：
<BR><BR>这样的设计格局，显示出WML文件以数张牌构成，而以将文件的构成称为一副牌；因此WML的显示端，同时间只会显示一个牌面，为了牌面间的外换，WML藉由链结来达成，与HTML的内部链结切换方式一样；这样的设计无非是为了在小型的显示器上有较好的浏览效果。
<BR><BR>在下面是一个例： <BR> <?xml version="1.0"?>
<BR><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
<BR>"http://www.wapforum.org/DTD/wml_1.1.xml">
<BR><!-- Main menu for WML examples -->
<BR><wml> <BR><card id="card1"> <BR><p>
<BR>Links Demo: <BR></p> <BR><p>
<BR>Go to <a href="#card2">card2</a> of this deck.
<BR><br/>
<BR>Go to another <a href="deck.wml">deck</a>.
<BR></p> <BR></card> <BR><card id="card2">
<BR><p>
<BR>Go back to <a href="#card1">card1</a> of this deck.
<BR></p> <BR></card> <BR></wml>
<BR><BR><BR>下面是它的执行结果，同样的，也是与WML显示器有关，呈现方式也不一定：
<BR><BR><BR><BR><BR>a是表示超链结的标，而其属性href则是指向超链结位置，而以 "#card_id"的href值，则表示该deck中的某个id相符的card，选取这个超链结便会切换到该card；这样的切换方式也与HTML类似，所以也不难猜到你可以用href=”url_link#card” 来指向某WML中的某个card。
<BR><BR>第一阶段的WML教学到此结束，WML与HTML不光是单方面的资料浏览功能，而是要有与HTML功能相近的表单功能来达成与使用者的双向沟通能力，下一篇教学文章我们将会把重点放在这里。
<BR>(<A
href="http://www.fanqiang.com/">http://www.fanqiang.com/</A>)
</FONT> 进入【<A
href="http://www.chinaunix.net/">UNIX论坛</A>】 </TD></TR>
<TR>
<TD>
<HR>
</TD></TR>
<TR>
<TD><B>相关文章</B> </TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TR>
<TD></TD></TR>
<TR>
<TD> </TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1
src="WML设计-入门篇.files/c.gif" width=1></TD></TR>
<TR>
<TD vAlign=top width="100%" colSpan=5 height=40>
<P align=center><FONT color=#ffffff>★ 樊强制作 欢迎分享 ★
</FONT></P></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -