WAP2.0—— XHTML MP and WCSS.ppt

1、WAP 2.0, XHTML MP and WCSS,怿 飞,一、WAP的常识（省略）,二、XHTML MP,（一）XHTML MP 介绍,XHTML MP（eXtensible HyperText Markup Language Mobile Profile） WAP2.0 与WCSS（WAP CSS /WAP Cascading Style Sheet）配套使用 是XHTML的子集 XHTML Basic (XHTML子集)+另外的一些XHTML的元素和属性 WAP浏览器与互联网之间 以前WAP网站（WML and WMLScript ） 更多的展示表现（presentation cont

2、rol ）,（一）XHTML MP 介绍,优势：开发的站点可以在WEB和无线上都可以使用，也可以用任何Web浏览器访问WAP2.0应用 向后兼容：XHTML MP / WCSS 和 WML / WMLScript,（二）无线标记语言发展,HTML：WAP发展的首要任务移动电话，PDA等访问互联网。WAP standard (WML and XHTML Mobile Profile) 类似HTML WML（Wireless Markup Language） 1.x：WAP 1.x 规范中规定的标记语言，无线设备的第一个标记语言。Openwave、Nokia 和 Ericsson 很早都有自己的标

3、记语言。WML规范是WAP Forum（97）创建的。而现在，很多的WAP站点依然使用的是WML。 XHTML：结构比HTML更简洁和严格。这对于无线设备（例：移动电话）很重要，对于有限的处理能力。 XHTML Basic :是XHTML的一个简化版本。为处理 能力和性能有限的设备设计的（移动电话，PDA，呼机等）,（二）无线标记语言发展,但是不包含XHTML特性。例如CSS，frames和Scripting。是由W3C定义的。 XHTML MP: 在WAP2.0说明中指定的官方标记语言。WAP Forum 基于 XHTML Basic创造，并从XHTML的完整版本中增加了一些元素和属性。例如

4、,和。XHTML MP支持一个简单的CSS版本，即WCSS/WAP CSS。 WCSS/WAP CSS: CSS2的一个简化版本，增加了WAP特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。 WML2.0: WAP站点开发者不需要顾虑WML2.0。WML2.0向后兼容，并且对于WAP站点开发者还不可用。,（三）XHTML MP的优点,最大优点：开发者可用相同的技术开发适用于WEB和WAP的站点。 有HTML、XHTML、CSS基础即可入门。 同样的开发工具可以用来开发WEB和WAP站点。 开发过程中一般的WEB浏览器可以浏览你的WAP站点。 HTML/XHTML页面可以通过较小的

5、修改成XHTML MP，甚至不用修改（注意：布局是否适应小屏幕，文件大小是否出最大）。 支持WCSS。移动设备有很多不同的特征，比如屏幕大小，只需写一次结构，使用不同的WCSS文件即可。 更多的表现控制。,（四） 不支持的WML 特性,XHTML MP 不支持和标签。 在XML中，一个文件可以包含一个或更多的card，所有的card组合成一个deck，并在无线设备中一同被下载。WAP浏览器每次只显示一个card，可以通过锚链接访问其他的card。通过这些，减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性，可以使用multipart messages（多个文

6、档放到一个请求）另外一个方式是使用目标锚（一个页面的不同位置）。 XHTML MP 不支持标签 元素10秒后告诉WAP浏览器URL。 注意点：WML timer 仅当进入card，而HTML refresh timer当进入XHTML MP页面。,（四） 不支持的WML 特性,3. XHTML MP 不支持事件。 WML支持四个事件（ontimer,onenterbackward,onenterforward,onpick），除ontimer其他事件无法模拟。如要使用，需使用WML1.X。 4. XHTML MP 不支持变量。 在XML，可以声明变量，并赋值，拥有全局作用域。可以在任何的dec

7、k和card中使用。XHML MP放在服务器端处理（必须发送并保存）。 5. XHTML MP 不支持客户端脚本。 在XML，你可以使用客户端脚本（WMLScript）。JavaScript的简化版，常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本（ECMAScript MP）,支持所有的WMLScript功能。,（四） 不支持的WML 特性,6. XHTML MP 不支持可编程序软键（Programmable SoftKeys）。 WML的一个最大特征。通过标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性： XHTML MP Tuto

8、rial Part 1标签。 在XML，用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。 8. XHTML MP 不支持Input框的format属性。 在XML，可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性，语法一致。比如限制5个数字字符：input -wap-input-format:”5N”,（四） 不支持的WML 特性,9. XHTML MP 不支持锚链接传输数据。 姓名：提交 姓名：,（五） 语法规则,标签必须完全闭合。 标签和属性必须小写。 属性值必须包含在引号标记内。 不允许无属性值存在。 标签必须完全嵌套。

9、,（六）MIME 类型和文件扩展名,MIME类型： application/vnd.wap.xhtml+xml、application/xhtml+xml 、text/html。 动态生成MIME类型。获得HTTP请求中的accept header信息。 文件扩展名：.xhtml、.html、.htm,（七）文档结构,必须包含, , 和 元素。 Hello world Hello world. Welcome to . ,（七）文档结构,XML声明和字符编码： UTF-8/16编码可省略。XML声明也不是必须的，但如果忽略在许多WAP浏览器中出错。 必须有DOCTYPE声明。在XML声明和元素

10、之间。 、 元素，align属性已经去除，可以通过WAP CSS的text-align属性来设置。,（八）通用的元数据,使用标签，包含在内 WAP浏览器如果不理解则忽略。 比如添加作者： Cache Control：标签的一个应用是控制XHTML MP文件在Cache中的存在周期： 注意点：与设备相关。一些使用不相的方法，一些没有Cache机制。还有一些不支持但识别Cache-Control:no-cache的 HTTP头。也可应用于图片的缓存。,（八）通用的元数据,周期性刷新。必须配合使用。不是所有浏览器都支持。 ,（九）常用标签介绍,注释：，和HTML和WML1.X相同。 换行： ，和HT

11、ML和WML1.X相同。 水平线：。不能包含在标签之内。 标题：-（不同的大小和样式），有些设备看起来一样的。,（九）常用标签介绍,字体样式：XML可以使用标签来改变字体样式（ 、等）。但一些浏览器只支持其中的部分，不支持的忽略，不会出错。 WCSS 控制字体格式。 与格式化文本：在XHTML MP中，标签间空白不显示，此外，段落中2个或更多的空白只显示一个，如果想保持文字的格式，可使用。 列表：、。对于元素，可以用属性 start 指定数字开始的序列。还可以用WCSS来做更精确的控制。 显示图片：标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持，显示alt属性文本。Heig

12、ht和width属性来指定图片显示区域的高度和宽度,（九）常用标签介绍,除了老的WBMP图片格式，WAP2.0还支持WEB上的图片格式（gif, jpg和PNG），但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过accept HTTP header判断设置。 关于大图片的发布：很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏，很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。 优化图片：1、用制图软件按比例缩小图片；2、如果是gif图片，减少颜色，但降低了图片质量，权衡。3、如果是jpg图片，保存一

13、定的压缩比例，依然是权衡。 使用multipart messages，先下载的XHTML MP文档，,（九）常用标签介绍,后请求图片，产生多个请求。该方式可以使文档和图片在一个请求，意味着一个页面只有一个请求。减少服务器的压力。 表格：创建表格，需要使用、标签，默认表格没有边线。属性有rowspan和colspan。 锚链接：一般用在导航。标签为。属性href定义指定的URL。当前页面位置的跳转：先设置目标链接，通过id属性设置；再设置锚链接的URL为#id名称。 对锚链接设置快捷键：标签的accesskey属性，有效的值为：*，#，0-9。还可以用-wap-accesskey设置。,（九）常

14、用标签介绍,选择列表：选择列表使用标签，包含一个或更多的标签。标签的name属性定义选择列表的名字。name用来取得被选择的item的值（option的value属性定义）。 1. 多重选择列表：Option的selected属性用来设置默认的option。如果想设置多重选择列表，可使用标签的multiple属性，只有一个唯一值multiple。 2. Option分组：使用标签，label属性定义option组的名称。,（九）常用标签介绍,选择列表,（九）常用标签介绍,输入元素：Text field、Password fireld、Checkbox、Radio button、Hidden f

15、ield。通过元素创建。传输数据到服务器，元素必须和一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称，方便取得用户数据。 input -wap-input-format: 10N ,（九）常用标签介绍,13. form元素：、等元素不能直接包含在form元素下，XHMTL MP标准规定必须有块级元素。如果有non-ASCII字符，需使用POST方法来避免编码问题。 14. 提交按钮：所有的表单都必须包含一个提交按钮。元素用来创建一个提交按钮。而type属性被定义为submit。 ,（九）常用标签介绍,15. 重置按钮：并不是必须的。元素用来创建一个重置按钮。而typ

16、e属性被定义为reset。 16. Div和Span。,三、WCSS/WAP CSS,（一）WCSS 介绍,WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS（WAP Cascading Style Sheet ） 是CSS2的子集+一些WAP特有的扩展 目的：定义文档的风格和布局，从文档内容中分离。 重要性：不同的手机设备有多样的特征，比如屏幕大小。 WML不支持WCSS W3C CSS Mobile Profile和WAP CSS 不同。,（二）使用WCSS的优势,主要：学习成本降低，可用相同的开发工具，可用WEB浏览器浏览。 表现和结构的分离：匹

17、配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分。 比WML更好的控制表现：可以定义元素的color，font，background，border，margin，padding等属性。 移动设备第一次访问站点下载样式（Cache）。 使用外部WCSS，XHTML MP的文档大小变小，提高下载时间。,（三）使用WCSS的劣势,不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持。 外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不

18、存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档。,（四）MIME 类型和文件扩展名,MIME类型： text/css。 文件扩展名：.css,（五）WCSS的语法规则,WCSS声明：selector property: property_value 多个属性允许的，用;分隔。 多个选择器也是允许的，用，分隔。 注释：/*orz*/，WAP浏览器将忽略这些内容。,（六）如何在XHTML MP文档中应用,链接外部WC

19、SS（推荐），放置在文档的head部分，用style属性定义WCSS样式 ，可以多个，无需修改rel和type属性。 some WCSS statements ,（七）不同的选择器,类型选择器：h1 font-style: italic 元素名称必须小写。 Class选择器： .class color:blue 对应标签的class属性，还可以联合元素名称使用 h1.class color:blue。 ID选择器：#id color:red 对应标签的id属性也可联合元素名称。 通用选择器：* color:blue ，所有的标签。注意：在某些WAP浏览器上会使样式渲染变慢。（建议不要用）,（八

20、）常用的属性值,长度：%，px，em，ex，cm，mm，in，pt，pc（值和单位之间不允许有空格：margin-top:1px而不是margrin-top:1 px）。 颜色：rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。 URL：ul list-style-image: url(bullet.gif) 无引号、双引号、单引号均可。,（九）字体和文本属性,字体名称：p font-family: “Times New Roman” 名称中有空格或多个单词必须用引号包含。 字体大小：p font-size:12px，也可以用xx-small，x-s

21、amll，small，medium，large，x-large，xx-large 字体样式：斜体、粗体和下划线（font-style,font-weight和text-decoration）。 设置文本对齐：text-align和float。WAP中float（left,right,none）常用在img和table标签,（十）列表属性,改变无序列表的图标（list-style-type ）：默认disc，其他值：circle，square，none。可以应用在ul和li元素上。 改变有序列表的次序：默认decimal，其他值：upper-alpha（A），lower-alpha（a），upp

22、er-raman（I），lower-raman（i），none 3. 使用图片文件作为小图标：list-style-image: url(bullet.gif) 。注：Openware WAP浏览器本地保存了一些icon，可以使用这些作为小图标，例如：ul list-style-image: localsrc(rightarrow1),（十）列表属性,（十一）颜色属性和border属性,设置前景和背景颜色：color、background-color属性。 设置border样式：border-style（border-top-style等）属性，值有很多，但只有none和solid被WAP浏览

23、器广泛支持。table border-style: solid 设置border宽度：border-width（同上）属性，值为数值，还接受thin、medium和thick。注：值设置border-width，border并不可见，必须设置border-style非none值。 设置border颜色：border-color（同上）属性。注意点同上。 设置border属性的快捷方式：table border: 2px solid black 顺序自由。,（十二）WAP特有的CSS扩展,快捷键：-wap-accesskey ，用来指定XHTML MP元素的快捷键。 Input：定义文本框是否可

24、以留空，什么类型，可以输入多少字符 Marquee：在屏幕上滚动一些内容。,（十二.1）WCSS快捷键扩展,给元素定义快捷键：-wap-accesskey属性 可用的属性值*，#，0，1，2，3，4，5，6，7，8，9 input.wcss_class -wap-accesskey: 4 直接定义*和#违反CSS2语法。需要使用Unicode转义字符2a和23。但是有些WAP浏览器（Sony Ericsson WAP 浏览器 ）要求使用2a 和 23,一些（Openwave 手机浏览器） 要求使用* 和#。 与元素的accesskey属性同效，如同时定义，显示该属性值。 只用于四个元素a， i

25、nput，label，textarea，其他定义也无效。,（十二.2）WCSS输入扩展,由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。 早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。 控制文本框的类型和字符数量：-wap-input-format。需应用在, 和 标签上，如应用在其他标签无效。格式字符（大小写敏感）：a（小 写字母或符号），A（大写字母或符号）

26、，n（数字或符号）,（十二.2）WCSS输入扩展,N（数字），x（小写字母或数字或符号），X（大写字母或数字或符号），m（任何字符，默认小写字母输入模式，可换大写模式），M（任何字符，默认大写字母输入模式，可换小写模式）。属性值必须包含在引号内，由于部分Openwave 手机浏览器不支持单引号，建议使用双引号（ ） -wap-input-format: “2N” （最多两个数字） -wap-input-format: “NN” （两个数字） -wap-input-format: “*N” （无限个数字） -wap-input-format: “A*a” （第一个大写字母或符号，0-n个小写字母

27、或符号） -wap-input-format :“*M”（默认） 格式字符前使用数字或*的原则：1、只允许一次；2、在最后,（十二.2）WCSS输入扩展,如果值语法错误，则WAP浏览器忽略该属性。 也可以包含转义字符：在WCSS中是特殊字符，使用。 控制文本框是否可以留空：-wap-input-required（值为：false和true ），帮助控制文本框是否可以空白。使用元素同上。 当-wap-input-format和-wap-input-required冲突时，以required优先。,（十二.3）WCSS Marquee扩展,可以在屏幕上滚动一些内容（一行文字，一个图片，一个链接等），但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。 包含四个属性和一个属性值：-wap-marquee属性值（display属性的值），-wap-marquee-dir属性（指定marquee的方向,值：ltr，rtl-默认），-wap-marquee-loop属性（指定marquee重复的时间，infinite永远，大多数默认为1），-wap-marquee-speed属性（指定marquee的速度，值：slow，