精华区
[
关闭
][
返回
]
当前位置:
网易精华区
>>
讨论区精华
>>
网络专区
>>
● 网站建设
>>
盖世神功 — 网站建设技术
>>
手机专用网页设计入门(HDML篇)I
主题:手机专用网页设计入门(HDML篇)I
发信人: liy79()
整理人: morefeetin(2000-06-03 10:59:16), 站内信件
手机专用网页设计入门(HDML篇)I
最新手机的上网速度已经达到了14.4Kbps。
上网手机的数量会不会超过浏览器的数量?
本文主要介绍如何编写包含WAP协议的手机(以下的手机均指该类手机)所专用
的网页,从普通浏览器的角度来介绍,以便理解,同时需要读者有一定的HTML知
识。
1。手机上网的过程
普通浏览器上网过程
浏览器<--->Web服务器
手机上网过程
手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器
* UP指Unwired Planet公司,其UP.Phone浏览器为手机浏览器的事实标准,
以下内容都基于该标准。
*普通web页面用HTML描述,目前手机页面可以用HDML和WML两种语言来描述,
它们本质上是用XML 1.0来定义的。本文主要讲述HDML,由于其和HTML有相似,所
以通过比较来说明问题,可能在用词上有不妥的地方,但作为入门的文章,希望
不必深究。HDML的最新版本为4.0 Beta,这里讲3.0。
*请到www.phone.com下在UP.SDK,其中包括了一个UP.Phone手机浏览器的模
拟器,可以像真的手机一样上网(另外还包括了Perl, C, COM等库,这里不谈)。
在学习阶段,可以用它来显示我们所做的页面,这里就把手机的上网过程简化为
手机浏览器<---->HDML页面。
2。手机浏览器的特点
*屏幕小,一屏所容字数不多(支持GB2312字符集),所以要求信息尽量短。
*图形方面,目前只支持1位bmp图,即黑白的。
*输入字符的键盘为手机的数字键。(目前国内开发的一种嵌入式中文输入法有特
捷T9,王颂平的笔顺码CKE等)。用手机上的左右键控制来回,手机上的CLR(DELE
TE)键清除当前字符。
*只有垂直的滚屏,用手机上的上下键控制,
*屏幕上如果有选单,用上下键和数字键控制。
*手机上的HOME键相当于浏览器上的HOME键。
*浏览器屏幕分为内容显示区和软按钮(Softkey,可看作普通web页面上的按
钮可设置1-2个,按钮显示名称的字符受手机限制)区,这两个按钮分别对应了手
机上屏幕下方的两个按钮,称为ACCEPT和SOFT1键。对应于ACCEPT,默认的Softk
ey显示为ok。
*手机上只有BACK键,没有普通浏览器的FORWARD键,要实现FORWARD功能只有
重新返回菜单进行。手机能存储访问过的页面(这里称为CARD)的历史记录,用堆栈
的形式保存,BACK键的功能相当于退栈。
*手机还能存储用户的选择和变量等数据。
3。显示文本
HDML和HTML在语法上有许多相似的地方,用<标签名 属性=值>的TAG形式来格
式化页面。TAG是不区分大小写的,而以后谈及的变量是区分大小写的。HDML有着
和HTML统一的保留字符显示方式:
< <
> >
" "
& &
$ &dol;
任何ASCII字符 &#nn; (其中nn是ASCII代码)
熟悉HTML的话用不着记。同样对于文本的处理也是一样,忽略空格、回车等控字
符,用以下方式达到空格、回车等目的。
空格
<TAB> 类似于一般意义上的TAB键效果
<BR> 换行
<LINE> 换行,一行太长时,屏幕自动折行,新的一行忽略原文中的空字符
<WRAP> 换行,一行太长时,屏幕自动折行,原文中的空字符仍然显示
另外对齐的标签有:
<RIGHT> 该行文字向右对齐
<CENTER> 该行文字中间对齐
用文本编辑器编辑以下文件,存为c:\test1.hdml。(我用复杂的路径时失败
了,所以只能用最简单的路径)
Content-type: text/x-hdml; charset=GB2312
<HDML VERSION="3.0">
<DISPLAY name="card1">
<center>This is a test.<br>1234567890<<tab>1234567890<line>xxxxx
</DISPLAY>
</HDML>
在手机浏览器的地址栏输入file://c:/test1.hdml(注意这里是调试环境,在
实际应用中可能是http://updev.uplanet.com/dev/hdml/devhome3.hdml这种形式
),回车后页面就会出现在浏览器的显示区了。刷新按F9。
对上述程序进行一下说明:
第一行 Content...指定字符集(由于该模拟器在设置中文字体后出现了问题
,所以这里只用英文,但不代表不能用中文字符),类似于普通web页面内的<met
a http-equiv="Content-Type" content="text/html; charset=gb2312">,只是
写在了最开头。
第二行类似于HTML的<HTML>,这里要指出它不光说明该文件是HDML文件,重
要的是指明<hdml></hdml>间是浏览器和WEB服务器连接一次所传递的信息,相当
于普通浏览器的页面,这里称为DECK。
第三行可以看作HTML里的<BODY>,指明一页可视的内容,和HTML不同的是,
一个DECK可以包含多个页,每页用<DISPLAY></DISPLAY>包括,而HTML只有一个<
BODY>,正如前面所指出的,一次连接所传递的数据可包括多个页,这里的页专称
为CARD,CARD的类型有三种:纯文本图形显示、选单(相当于HTML的FORM)和指执
行一个action不显示内容(相当于cgi)。
<HDML>和<DISPLAY>里包含了可选的属性,和HTML一样,属性的值如果包含保
留字符先要escape,包含空格是要用""或者''括起来。HDML的标签不多,但属性
很多,作为入门文章,这里不做详细介绍,具体可参见SDK包含的文档。
第三行是CARD显示的内容,如果一屏显示不下,屏幕上会有提示,提示符号
根据手机的不同,可能是>或者|。以上就是HDML文件的基本形式了。下面的例子
用来说明多个CARD的跳转。
test2.hdml
------------
<HDML VERSION="3.0">
<DISPLAY name="card1">
<ACTION TYPE=ACCEPT TASK=GO DEST=#card2>
This is CARD1
</DISPLAY>
<DISPLAY name="card2">
<ACTION TYPE=ACCEPT TASK=GOSUB DEST=http://devgate2.uplanet.com/c.hdml
>
This is CARD2
</DISPLAY>
</HDML>
这里有2个CARD,并多了<ACTION>标签,这里的<ACTION>标签相当于HTML里的
,第一个<ACTION>相当于<A href="#card2">,即跳转到本DECK的名为card2的
CARD,(HTML里是本页的card2标记处),显然DEST相当于HTML里
的HREF属性,
TYPE指定了当按下ACCEPT键时,屏幕就跳转到CARD2。插一句,同样可以用http:
//x.com/a.hdml#card2的形式直接转到名为card2的CARD。第二个<ACTION>相当于
,当屏幕跳转到CARD2后再按ACCEPT键则跳转到另一
个DECK。(HTML里是另一页)。HTML里用鼠标点击发生跳转,而HDML里根据TYPE所
指定的值来触发跳转。TYPE可接受的值如下(实际上是对用的键盘,LABLE指Soft
key在屏幕上显示的名称):
ACCEPT (LABEL 可选) [显示上一页]
HELP (LABEL 需要) [如果手机内置卡里有当前页的帮助信息则显示]
PREV (LABEL 忽略) [显示上一页,如没有上页则取消当前activity]
SOFT1 (LABEL 需要) [无效]
SOFT2 (LABEL 需要) [无效]
SEND (LABEL 需要) [无效]
DELETE (LABEL 需要) [如果在可输入文本的CARD中,起删除作用]
此外,TASK的意思以后会提到,这里可以看成类似于HTML中FORM的ACTION属性,
制定了将要执行的动作,上述按键有默认的TASK,如以上[]中所述。
另外要说明的是CARD(<DISPLAY>)里和DECK(<HDML>)里都可以定义<ACTION>,
如果同时定义并且触发键相同的话,当前的CARD覆盖掉DECK的。
4。显示图片
和HTML里的用法完全一样,只是图片是1位BMP图,不过还是需要手机支
持的。
test3.hdml
-----------
<HDML VERSION=3.0>
<DISPLAY>
<!-- Here is 1bit BMP -->
<br>
<-- Here is buil-in icon -->
<IMG ICON="smileyface" ALT=":-)" >
</DISPLAY>
</HDML>
的ALT属性用于图片无法显示时;SRC和HTML的意思一样,指定图片的路
径;这里多了个ICON,它指定了ROM里预先存储的图片的名字,如果ROM里没有则
到UP.Link Sever里找,有175个图标可用,具体的名字在相关文档里有。这里还
出现了HDML的注释标签,和HTML里的相同,<!-- comment_text -->,也可以用<
-- comment_text -->。
5。显示选单
这里的选单功能可以看成HTML里的select单选表单,样子更像是一组竖排的
单选按钮表单。用手机上的上下键进行选择,然后(默认的)按ACCEPT键确定,确
定后,浏览器按照TASK所指定的任务去执行。
test4.hdml
-------------
<HDML VERSION="3.0">
<ACTION TYPE=ACCEPT TASK=GO DEST=#other_card>
<CHOICE>
<CE TASK=GO DEST=#card1>Your Choise1...
<CE TASK=GO DEST=#card2>Your Choise2...
<CE TASK=GO DEST=#card3>Your Choise3...
</CHOICE>
</HDML>
上面的例子中<CHOICE>和<CE>相当于HTML里的<SELECT>和<OPTION>的功能,
注意<CE>里加入的属性,在HTML里,一般<OPTION>没有直接的动作属性。这里要
指出的是,上例中DECK层所定义的<ACTION>不起作用,因为单选单定义的TASK优
先于DECK和CARD层所定义的动作。
(未完待续)
--
* * * *
* * * 话不嫌多,知心就好
* {~._.~} * 即刻 CALL IN
* ( Y ) * ICQ:37754773
* ()~*~() * 中文网址:星际争霸-梦幻之战
* (_)-(_) * http://starcraft.my163.net
※ 来源:.
月光软件站
http://www.moon-soft.com.[FROM: 202.99.167.125]
[
关闭
][
返回
]