?? 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 + -