WAP 2.0 ——  XHTML MP and WCSS 怿  飞
一、 WAP 的常识 (省略)
二、 XHTML MP
(一) XHTML MP   介绍 <ul><li>XHTML MP ( eXtensible HyperText Markup Language Mobile Profile ) </li></ul><ul><li>WAP2.0 </li><...
(一) XHTML MP   介绍 <ul><li>优势:开发的站点可以在 WEB 和无线上都可以使用,也可以用任何 Web 浏览器访问 WAP2.0 应用 </li></ul><ul><li>向后兼容: XHTML MP / WCSS  和 ...
(二)无线标记语言发展 <ul><li>HTML : WAP 发展的首要任务——移动电话, PDA 等访问互联网。 WAP standard ( WML and XHTML Mobile Profile )  类似 HTML </li></ul...
(二)无线标记语言发展 <ul><li>但是不包含 XHTML 特性。例如 CSS , frames 和 Scripting 。是由 W3C 定义的。 </li></ul><ul><li>XHTML MP:  在 WAP2.0 说明中指定的官方...
(三) XHTML MP 的优点 <ul><li>最大优点:开发者可用相同的技术开发适用于 WEB 和 WAP 的站点。 </li></ul><ul><li>有 HTML 、 XHTML 、 CSS 基础即可入门。 </li></ul><ul>...
(四) 不支持的 WML  特性 <ul><li>XHTML MP  不支持 <deck> 和 <card> 标签。 </li></ul><ul><li>在 XML 中,一个文件可以包含一个或更多的 card ,所有的 card 组合成一个 d...
(四) 不支持的 WML  特性 <ul><li>3.  XHTML MP  不支持事件。 </li></ul><ul><li>WML 支持四个事件( ontimer,onenterbackward,onenterforward,onpick ...
(四) 不支持的 WML  特性 <ul><li>6.  XHTML MP  不支持可编程序软键( Programmable SoftKeys )。 </li></ul><ul><li>WML 的一个最大特征。通过 <do> 标签使用。在 XH...
(四) 不支持的 WML  特性 <ul><li>9.  XHTML MP  不支持锚链接传输数据。 </li></ul><ul><li><p>    姓名:   <input name=“name”/><br/>  <anchor> <go ...
(五) 语法规则 <ul><li>标签必须完全闭合。 </li></ul><ul><li>标签和属性必须小写。 </li></ul><ul><li>属性值必须包含在引号标记内。 </li></ul><ul><li>不允许无属性值存在。 </li...
(六) MIME  类型和文件扩展名 <ul><li>MIME 类型:  application/vnd.wap.xhtml+xml 、 application/xhtml+xml  、 text/html 。 </li></ul><ul><l...
(七)文档结构 <ul><li>必须包含 <html>, <head>, <title> 和 <body>  元素。   </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul><...
(七)文档结构 <ul><li>XML 声明和字符编码: <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li>UTF-8/16 编码可省略。 ...
(八)通用的元数据 <ul><li>使用 <meta/> 标签,包含在 <head> 内 </li></ul><ul><li>WAP 浏览器如果不理解则忽略。 </li></ul><ul><li>比如添加作者: <meta name=&quot...
(八)通用的元数据 <ul><li>周期性刷新。必须配合使用。不是所有浏览器都支持。 </li></ul><ul><li><meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-c...
(九)常用标签介绍 <ul><li>注释: <!-- -- > ,和 HTML 和 WML1.X 相同。 </li></ul><ul><li>换行: <br/>  ,和 HTML 和 WML1.X 相同。 </li></ul><ul><li>水...
(九)常用标签介绍 <ul><li>字体样式: XML 可以使用标签来改变字体样式(  <b> 、 <i> 、 <small> 、 <big> 等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。  WCSS  控制字体格式。 </li...
(九)常用标签介绍 <ul><li>除了老的 WBMP 图片格式, WAP2.0 还支持 WEB 上的图片格式( gif, jpg 和 PNG ),但 WAP2.0 无线设备支持上面图片格式的某些。 GPRS-gif,CDMA-png 。可以通...
(九)常用标签介绍 <ul><li>后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。 </li></ul><ul><li>表格:创建表格,需要使用 <table> 、 <tr> 、 <t...
(九)常用标签介绍 <ul><li>选择列表:选择列表使用 <select> 标签,包含一个或更多的 <option> 标签。 <select> 标签的 name 属性定义选择列表的名字。 name 用来取得被选择的 item 的值( opti...
(九)常用标签介绍 <ul><li>选择列表 </li></ul>
(九)常用标签介绍 <ul><li>输入元素: Text field 、 Password fireld 、 Checkbox 、 Radio button 、 Hidden field 。通过 <input> 元素创建。传输数据到服务器, <...
(九)常用标签介绍 <ul><li>13.  form 元素: <input> 、 <select> 等元素不能直接包含在 form 元素下, XHMTL MP 标准规定必须有块级元素。如果有 non-ASCII 字符,需使用 POST 方法来...
(九)常用标签介绍 <ul><li>15.  重置按钮:并不是必须的。 <input> 元素用来创建一个重置按钮。而 type 属性被定义为’ reset’ 。 </li></ul><ul><li><input type=&quot;reset...
三、 WCSS/WAP CSS
(一) WCSS  介绍 <ul><li>WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS ( WAP Cascading Style Sheet  ) </li></ul><ul><li>是 CSS...
(二)使用 WCSS 的优势 <ul><li>主要:学习成本降低,可用相同的开发工具,可用 WEB 浏览器浏览。 </li></ul><ul><li>表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理( PC 、 PDA 、手...
(三)使用 WCSS 的劣势 <ul><li>不同的 WAP 浏览器对 WCSS 的支持不同,可能一个属性在这个 WAP 浏览器上支持,而另外一个不支持。 </li></ul><ul><li>外部的 WAP CSS 可能增加第一次访问页面的请求...
(四) MIME  类型和文件扩展名 <ul><li>MIME 类型:  text/css 。 </li></ul><ul><li>文件扩展名: .css </li></ul>
(五) WCSS 的语法规则 <ul><li>WCSS 声明: selector {property: property_value}   </li></ul><ul><li>多个属性允许的,用’ ;’ 分隔。 </li></ul><ul><l...
(六)如何在 XHTML MP 文档中应用 <ul><li>链接外部 WCSS (推荐),放置在文档的 head 部分,用 style 属性定义 WCSS 样式  </li></ul><ul><li><link href=“url” rel=“...
(七)不同的选择器 <ul><li>类型选择器: h1 { font-style: italic}  元素名称必须小写。  </li></ul><ul><li>Class 选择器:  .class { color:blue}  对应标签的 cl...
(八)常用的属性值 <ul><li>长度: % , px , em , ex , cm , mm , in , pt , pc (值和单位之间不允许有空格: margin-top:1px 而不是 margrin-top:1 px )。  </l...
(九)字体和文本属性 <ul><li>字体名称: p {font-family: “Times New Roman”}  名称中有空格或多个单词必须用引号包含。 </li></ul><ul><li>字体大小: p {font-size:12px...
(十)列表属性 <ul><li>改变无序列表的图标( list-style-type  ):默认 disc ,其他值: circle , square , none 。可以应用在 ul 和 li 元素上。 </li></ul><ul><li>改...
(十)列表属性
(十一)颜色属性和 border 属性 <ul><li>设置前景和背景颜色: color 、 background-color 属性 。 </li></ul><ul><li>设置 border 样式: border-style ( border...
(十二) WAP 特有的 CSS 扩展 <ul><li>快捷键: -wap-accesskey  ,用来指定 XHTML MP 元素的快捷键。 </li></ul><ul><li>Input :定义文本框是否可以留空,什么类型,可以输入多少字符...
(十二 .1 ) WCSS 快捷键扩展 <ul><li>给元素定义快捷键: -wap-accesskey 属性 </li></ul><ul><li>可用的属性值 * , # , 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8...
(十二 .2 ) WCSS 输入扩展 <ul><li>由两个属性组成: -wap-input-famat 和 -wap-input-required ,对应于 WML 中 <input> 元素的 format (定义类型和字符数量)和 empt...
(十二 .2 ) WCSS 输入扩展 <ul><li>N (数字), x (小写字母或数字或符号), X (大写字母或数字或符号), m (任何字符,默认小写字母输入模式,可换大写模式), M (任何字符,默认大写字母输入模式,可换小写模式)。...
(十二 .2 ) WCSS 输入扩展 <ul><li>如果值语法错误,则 WAP 浏览器忽略该属性。 </li></ul><ul><li>也可以包含转义字符:’ ’ 在 WCSS 中是特殊字符,使用’  。 </li></ul><ul><li>...
(十二 .3 ) WCSS Marquee 扩展 <ul><li>可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些 WAP 浏览器只支持滚动文字。当内容超过屏幕时很有用。 </li></ul><ul><li>包含四个属性和一个...
(十二 .3 ) WCSS Marquee 扩展
二、 WAP2.0 设计原则
WAP2.0 设计原则 <ul><li>设计站点前的准备工作 </li></ul><ul><li>界面设计、挑选核心服务、 WAP 设备特性统计(浏览器等) </li></ul><ul><li>关注导航模型 </li></ul><ul><li>...
WAP2.0 设计原则 <ul><li>考虑小尺寸屏幕的设计 </li></ul><ul><li>确保内容可见、 <title> 少于 14 个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性( 1-3 )、充分利用空间(图文)、避免过多...
WAP2.0 设计原则 <ul><li>7. 页面上提供足够信息 </li></ul><ul><li>首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。 </li></ul><ul><li>为用户操作提供信息反馈 </...
WAP2.0 设计原则 <ul><li>11. 谨慎使用表格 </li></ul><ul><li>单元格宽度使用绝对宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。 </li></ul><ul><li>12. 考虑添加样式定义选...
附录 <ul><li>1.  常用 WAP 模拟器 </li></ul><ul><ul><li>WinWAP 、 OpenWave 、 Opera </li></ul></ul><ul><li>2.  常用 WAP 网站 </li></ul><...
The End!  ( return obj )
Upcoming SlideShare
Loading in …5
×

Wap2.0

1,482 views
1,448 views

Published on

as

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,482
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wap2.0

  1. 1. WAP 2.0 —— XHTML MP and WCSS 怿 飞
  2. 2. 一、 WAP 的常识 (省略)
  3. 3. 二、 XHTML MP
  4. 4. (一) XHTML MP 介绍 <ul><li>XHTML MP ( eXtensible HyperText Markup Language Mobile Profile ) </li></ul><ul><li>WAP2.0 </li></ul><ul><li>与 WCSS ( WAP CSS /WAP Cascading Style Sheet )配套使用 </li></ul><ul><li>是 XHTML 的子集 </li></ul><ul><li>XHTML Basic (XHTML 子集 )+ 另外的一些 XHTML 的元素和属性 </li></ul><ul><li>WAP 浏览器与互联网之间 </li></ul><ul><li>以前 WAP 网站( WML and WMLScript ) </li></ul><ul><li>更多的展示表现( presentation control ) </li></ul>
  5. 5. (一) XHTML MP 介绍 <ul><li>优势:开发的站点可以在 WEB 和无线上都可以使用,也可以用任何 Web 浏览器访问 WAP2.0 应用 </li></ul><ul><li>向后兼容: XHTML MP / WCSS 和 WML / WMLScript </li></ul>
  6. 6. (二)无线标记语言发展 <ul><li>HTML : WAP 发展的首要任务——移动电话, PDA 等访问互联网。 WAP standard ( WML and XHTML Mobile Profile ) 类似 HTML </li></ul><ul><li>WML ( Wireless Markup Language ) 1.x : WAP 1.x 规范中规定的标记语言,无线设备的第一个标记语言。 Openwave 、 Nokia 和 Ericsson 很早都有自己的标记语言。 WML 规范是 WAP Forum ( 97 )创建的。而现在,很多的 WAP 站点依然使用的是 WML 。 </li></ul><ul><li>XHTML :结构比 HTML 更简洁和严格。这对于无线设备(例:移动电话)很重要,对于有限的处理能力。 </li></ul><ul><li>XHTML Basic : 是 XHTML 的一个简化版本。为处理 </li></ul><ul><li>能力和性能有限的设备设计的(移动电话, PDA ,呼机等) </li></ul>
  7. 7. (二)无线标记语言发展 <ul><li>但是不包含 XHTML 特性。例如 CSS , frames 和 Scripting 。是由 W3C 定义的。 </li></ul><ul><li>XHTML MP: 在 WAP2.0 说明中指定的官方标记语言。 WAP Forum 基于 XHTML Basic 创造,并从 XHTML 的完整版本中增加了一些元素和属性。例如 <i>,<b>,<small>,<big> 和 <hr> 。 XHTML MP 支持一个简单的 CSS 版本,即 WCSS/WAP CSS 。 </li></ul><ul><li>WCSS/WAP CSS: CSS2 的一个简化版本,增加了 WAP 特有的扩展。可以很简单的改变 XHTML MP 页面的布局和风格。 </li></ul><ul><li>WML2.0: WAP 站点开发者不需要顾虑 WML2.0 。 WML2.0 向后兼容,并且对于 WAP 站点开发者还不可用。 </li></ul>
  8. 8. (三) XHTML MP 的优点 <ul><li>最大优点:开发者可用相同的技术开发适用于 WEB 和 WAP 的站点。 </li></ul><ul><li>有 HTML 、 XHTML 、 CSS 基础即可入门。 </li></ul><ul><li>同样的开发工具可以用来开发 WEB 和 WAP 站点。 </li></ul><ul><li>开发过程中一般的 WEB 浏览器可以浏览你的 WAP 站点。 </li></ul><ul><li>HTML/XHTML 页面可以通过较小的修改成 XHTML MP ,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出最大)。 </li></ul><ul><li>支持 WCSS 。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的 WCSS 文件即可。 </li></ul><ul><li>更多的表现控制。 </li></ul>
  9. 9. (四) 不支持的 WML 特性 <ul><li>XHTML MP 不支持 <deck> 和 <card> 标签。 </li></ul><ul><li>在 XML 中,一个文件可以包含一个或更多的 card ,所有的 card 组合成一个 deck ,并在无线设备中一同被下载。 WAP 浏览器每次只显示一个 card ,可以通过锚链接访问其他的 card 。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在 XHTML MP 中要实现类似的特性,可以使用 multipart messages (多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。 </li></ul><ul><li>XHTML MP 不支持 <timer> 标签 </li></ul><ul><li><head>   <meta http-equiv=&quot;refresh&quot; content=&quot;10;URL=http://www.planabc.net/&quot; /> </head> </li></ul><ul><li><meta> 元素 10 秒后告诉 WAP 浏览器 URL 。 </li></ul><ul><li>注意点: WML timer 仅当进入 card ,而 HTML refresh timer 当进入 XHTML MP 页面。 </li></ul>
  10. 10. (四) 不支持的 WML 特性 <ul><li>3. XHTML MP 不支持事件。 </li></ul><ul><li>WML 支持四个事件( ontimer,onenterbackward,onenterforward,onpick ),除 ontimer 其他事件无法模拟。如要使用,需使用 WML1.X 。 </li></ul><ul><li>4. XHTML MP 不支持变量。 </li></ul><ul><li>在 XML ,可以声明变量,并赋值,拥有全局作用域。可以在任何的 deck 和 card 中使用。 XHML MP 放在服务器端处理(必须发送并保存)。 </li></ul><ul><li>5. XHTML MP 不支持客户端脚本。 </li></ul><ul><li> 在 XML ,你可以使用客户端脚本( WMLScript )。 JavaScript 的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本( ECMAScript MP ) , 支持所有的 WMLScript 功能。 </li></ul>
  11. 11. (四) 不支持的 WML 特性 <ul><li>6. XHTML MP 不支持可编程序软键( Programmable SoftKeys )。 </li></ul><ul><li>WML 的一个最大特征。通过 <do> 标签使用。在 XHML MP 中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性: </li></ul><ul><li><a accesskey=&quot;1&quot; href=&quot;part1.xhtml&quot;>XHTML MP Tutorial Part 1</a </li></ul><ul><li>WCSS 中的 -wap-accesskey 属性也可以用来定义: a.wcss_class_1 {-wap-accesskey: 1} </li></ul><ul><li>7. XHTML MP 不支持 <u> 标签。 </li></ul><ul><li>在 XML , <u> 用来在一些文字下添加下划线。可以用 WCSS 中的 text-decoration 属性。 </li></ul><ul><li>8. XHTML MP 不支持 Input 框的 format 属性。 </li></ul><ul><li> 在 XML ,可以定义类型和字数限制。可以使用 WCSS 中的 -wap-input-format 属性,语法一致。比如限制 5 个数字字符: input {-wap-input-format:”5N”} </li></ul>
  12. 12. (四) 不支持的 WML 特性 <ul><li>9. XHTML MP 不支持锚链接传输数据。 </li></ul><ul><li><p>    姓名:   <input name=“name”/><br/>  <anchor> <go method=“get” href=“yuanxin.php”><postfield name=“name” value=“$(name)”/></go>   提交   </anchor> </p> </li></ul><ul><li><form action=“yuanxin.php” method=“get”>   <p> 姓名:     <input name=“name”/><br/><input type=“submit” value=“ 提交 &quot;/></p> </form> </li></ul>
  13. 13. (五) 语法规则 <ul><li>标签必须完全闭合。 </li></ul><ul><li>标签和属性必须小写。 </li></ul><ul><li>属性值必须包含在引号标记内。 </li></ul><ul><li>不允许无属性值存在。 </li></ul><ul><li>标签必须完全嵌套。 </li></ul>
  14. 14. (六) MIME 类型和文件扩展名 <ul><li>MIME 类型: application/vnd.wap.xhtml+xml 、 application/xhtml+xml 、 text/html 。 </li></ul><ul><li>动态生成 MIME 类型。获得 HTTP 请求中的 accept header 信息。 </li></ul><ul><li>文件扩展名: .xhtml 、 .html 、 .htm </li></ul>
  15. 15. (七)文档结构 <ul><li>必须包含 <html>, <head>, <title> 和 <body> 元素。 </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.0//EN&quot; &quot;http://www.wapforum.org/DTD/xhtml-mobile10.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title>Hello world</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Hello world. Welcome to taobao.com.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  16. 16. (七)文档结构 <ul><li>XML 声明和字符编码: <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li>UTF-8/16 编码可省略。 XML 声明也不是必须的,但如果忽略在许多 WAP 浏览器中出错。 </li></ul><ul><li>必须有 DOCTYPE 声明。在 XML 声明和 <html> 元素之间。 </li></ul><ul><li><html> 、 <head> 、 <link> 、 <title> 、 <body> </li></ul><ul><li><p> 元素, align 属性已经去除,可以通过 WAP CSS 的 text-align 属性来设置。 </li></ul>
  17. 17. (八)通用的元数据 <ul><li>使用 <meta/> 标签,包含在 <head> 内 </li></ul><ul><li>WAP 浏览器如果不理解则忽略。 </li></ul><ul><li>比如添加作者: <meta name=&quot;author&quot; content=“yuanxin&quot;/> </li></ul><ul><li>Cache Control : <meta/> 标签的一个应用是控制 XHTML MP 文件在 Cache 中的存在周期: </li></ul><ul><li><meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot;/> </li></ul><ul><li><meta http-equiv=&quot;Cache-Control&quot; content=&quot;max-age=0&quot;/> </li></ul><ul><li>注意点:与设备相关。一些使用不相的方法,一些没有 Cache 机制。还有一些不支持 <meta/> 但识别 Cache-Control:no-cache 的 </li></ul><ul><li>HTTP 头。也可应用于图片的缓存。 </li></ul>
  18. 18. (八)通用的元数据 <ul><li>周期性刷新。必须配合使用。不是所有浏览器都支持。 </li></ul><ul><li><meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache&quot;/> </li></ul><ul><li><meta http-equiv=&quot;refresh&quot; content=&quot;15;URL=yuanxin.xhtml&quot;/> </li></ul>
  19. 19. (九)常用标签介绍 <ul><li>注释: <!-- -- > ,和 HTML 和 WML1.X 相同。 </li></ul><ul><li>换行: <br/> ,和 HTML 和 WML1.X 相同。 </li></ul><ul><li>水平线: <hr/> 。不能包含在 <p></p> 标签之内。 </li></ul><ul><li>标题: <h1>-<h6> (不同的大小和样式),有些设备看起来一样的。 </li></ul>
  20. 20. (九)常用标签介绍 <ul><li>字体样式: XML 可以使用标签来改变字体样式( <b> 、 <i> 、 <small> 、 <big> 等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。 WCSS 控制字体格式。 </li></ul><ul><li>与格式化文本:在 XHTML MP 中,标签间空白不显示,此外,段落中 2 个或更多的空白只显示一个,如果想保持文字的格式,可使用 <pre> 。 </li></ul><ul><li>列表: <ul> 、 <ol> 、 <li> 。对于 <ol> 元素,可以用属性 start 指定数字开始的序列。还可以用 WCSS 来做更精确的控制。 </li></ul><ul><li>显示图片: <img> 标签用来显示图片。和 HTML 一样。如果文件没发现或者图片格式不支持,显示 alt 属性文本。 Height 和 width 属性来指定图片显示区域的高度和宽度 </li></ul>
  21. 21. (九)常用标签介绍 <ul><li>除了老的 WBMP 图片格式, WAP2.0 还支持 WEB 上的图片格式( gif, jpg 和 PNG ),但 WAP2.0 无线设备支持上面图片格式的某些。 GPRS-gif,CDMA-png 。可以通过 accept HTTP header 判断设置。 </li></ul><ul><li>关于大图片的发布:很多 WAP 浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的 WAP 浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。 </li></ul><ul><li>优化图片: 1 、用制图软件按比例缩小图片; 2 、如果是 gif 图片,减少颜色,但降低了图片质量,权衡。 3 、如果是 jpg 图片,保存一定的压缩比例,依然是权衡。 </li></ul><ul><li>使用 multipart messages ,先下载的 XHTML MP 文档, </li></ul>
  22. 22. (九)常用标签介绍 <ul><li>后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。 </li></ul><ul><li>表格:创建表格,需要使用 <table> 、 <tr> 、 <td> 标签,默认表格没有边线。属性有 rowspan 和 colspan 。 </li></ul><ul><li>锚链接:一般用在导航。标签为 <a></a> 。属性 href 定义指定的 URL 。当前页面位置的跳转:先设置目标链接,通过 id 属性设置;再设置锚链接的 URL 为 #id 名称。 </li></ul><ul><li>对锚链接设置快捷键: <a> 标签的 accesskey 属性,有效的值为: * , # , 0-9 。还可以用 -wap-accesskey 设置。 </li></ul>
  23. 23. (九)常用标签介绍 <ul><li>选择列表:选择列表使用 <select> 标签,包含一个或更多的 <option> 标签。 <select> 标签的 name 属性定义选择列表的名字。 name 用来取得被选择的 item 的值( option 的 value 属性定义)。 </li></ul><ul><li>1. 多重选择列表: Option 的 selected 属性用来设置默认的 option 。如果想设置多重选择列表,可使用 <select> 标签的 multiple 属性,只有一个唯一值‘ multiple’ 。 </li></ul><ul><li>2. Option 分组:使用 <optgroup> 标签, label 属性定义 option 组的名称。 </li></ul>
  24. 24. (九)常用标签介绍 <ul><li>选择列表 </li></ul>
  25. 25. (九)常用标签介绍 <ul><li>输入元素: Text field 、 Password fireld 、 Checkbox 、 Radio button 、 Hidden field 。通过 <input> 元素创建。传输数据到服务器, <input> 元素必须和 <form> 一起使用。 Type 属性用来定义 input 元素的类别。 Name 属性用来定义名称,方便取得用户数据。 </li></ul><ul><li><input type=&quot;text&quot; name=“taobao&quot; maxlength=&quot;16&quot; value=“yuanxin&quot;/> </li></ul><ul><li>input { -wap-input-format: &quot;10N&quot;} </li></ul><ul><li><input type=&quot;password&quot; name=“taobao&quot;/> </li></ul><ul><li><input type=&quot;checkbox&quot; name=“taobao&quot; value=“yuanxin&quot; checked=&quot;checked&quot;/> </li></ul><ul><li><input type=&quot;radio&quot; name=“taobao&quot; value=“yuanxin&quot; checked=&quot;checked&quot;/> </li></ul><ul><li><input type=&quot;hidden&quot; name=“taobao&quot; value=“yuanxin&quot;/> </li></ul>
  26. 26. (九)常用标签介绍 <ul><li>13. form 元素: <input> 、 <select> 等元素不能直接包含在 form 元素下, XHMTL MP 标准规定必须有块级元素。如果有 non-ASCII 字符,需使用 POST 方法来避免编码问题。 </li></ul><ul><li><form method=&quot;get&quot; action=“yuanxin.asp&quot;> <p>       <input ...>      <select ...> </p> </form> </li></ul><ul><li>14. 提交按钮:所有的表单都必须包含一个提交按钮。 <input> 元素用来创建一个提交按钮。而 type 属性被定义为’ submit’ 。 </li></ul><ul><li><input type=&quot;submit&quot; value=&quot;OK&quot;/> </li></ul>
  27. 27. (九)常用标签介绍 <ul><li>15. 重置按钮:并不是必须的。 <input> 元素用来创建一个重置按钮。而 type 属性被定义为’ reset’ 。 </li></ul><ul><li><input type=&quot;reset&quot; value=&quot;Default&quot;/> </li></ul><ul><li>16. Div 和 Span 。 </li></ul>
  28. 28. 三、 WCSS/WAP CSS
  29. 29. (一) WCSS 介绍 <ul><li>WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS ( WAP Cascading Style Sheet ) </li></ul><ul><li>是 CSS2 的子集 + 一些 WAP 特有的扩展 </li></ul><ul><li>目的:定义文档的风格和布局,从文档内容中分离。 </li></ul><ul><li>重要性:不同的手机设备有多样的特征,比如屏幕大小。 </li></ul><ul><li>WML 不支持 WCSS </li></ul><ul><li>W3C CSS Mobile Profile 和 WAP CSS 不同。 </li></ul>
  30. 30. (二)使用 WCSS 的优势 <ul><li>主要:学习成本降低,可用相同的开发工具,可用 WEB 浏览器浏览。 </li></ul><ul><li>表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理( PC 、 PDA 、手机);降低维护成本(新手机);改变视觉和布局仅需 CSS ;重复使用 CSS ;便于工作细分。 </li></ul><ul><li>比 WML 更好的控制表现:可以定义元素的 color , font , background , border , margin , padding 等属性。 </li></ul><ul><li>移动设备第一次访问站点下载样式( Cache )。 </li></ul><ul><li>使用外部 WCSS , XHTML MP 的文档大小变小,提高下载时间。 </li></ul>
  31. 31. (三)使用 WCSS 的劣势 <ul><li>不同的 WAP 浏览器对 WCSS 的支持不同,可能一个属性在这个 WAP 浏览器上支持,而另外一个不支持。 </li></ul><ul><li>外部的 WAP CSS 可能增加第一次访问页面的请求时间。原因:外部 WCSS 不存在于手机的 Cache ,必须从服务器下载; XHTML MP 文档和外部的 WCSS 下载是不同的请求,增加了服务器压力;如果使用一个 WCSS 定义 WAP 站点的所有表现,该文件大小可能很大; WAP 浏览器需要解析 WCSS 到 XHTML MP 文档。 </li></ul>
  32. 32. (四) MIME 类型和文件扩展名 <ul><li>MIME 类型: text/css 。 </li></ul><ul><li>文件扩展名: .css </li></ul>
  33. 33. (五) WCSS 的语法规则 <ul><li>WCSS 声明: selector {property: property_value} </li></ul><ul><li>多个属性允许的,用’ ;’ 分隔。 </li></ul><ul><li>多个选择器也是允许的,用‘,’分隔。 </li></ul><ul><li>注释: /*orz*/ , WAP 浏览器将忽略这些内容。 </li></ul>
  34. 34. (六)如何在 XHTML MP 文档中应用 <ul><li>链接外部 WCSS (推荐),放置在文档的 head 部分,用 style 属性定义 WCSS 样式 </li></ul><ul><li><link href=“url” rel=“stylesheet” type=“text/css”/> ,可以多个,无需修改 rel 和 type 属性。 </li></ul><ul><li><style type=&quot;text/css&quot;>   some WCSS statements </style> </li></ul><ul><li><hr style=&quot;color: blue&quot;/> </li></ul>
  35. 35. (七)不同的选择器 <ul><li>类型选择器: h1 { font-style: italic} 元素名称必须小写。 </li></ul><ul><li>Class 选择器: .class { color:blue} 对应标签的 class 属性,还可以联合元素名称使用 h1.class {color:blue} 。 </li></ul><ul><li>ID 选择器: #id {color:red} 对应标签的 id 属性也可联合元素名称。 </li></ul><ul><li>通用选择器: * { color:blue} ,所有的标签。注意:在某些 WAP 浏览器上会使样式渲染变慢。(建议不要用) </li></ul>
  36. 36. (八)常用的属性值 <ul><li>长度: % , px , em , ex , cm , mm , in , pt , pc (值和单位之间不允许有空格: margin-top:1px 而不是 margrin-top:1 px )。 </li></ul><ul><li>颜色: rgb(r%;g%,b%) 、 rgb(r,g,b) 、 #rrggbb 、 #rgb 、 red(16 种 ) 。 </li></ul><ul><li>URL : ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。 </li></ul>
  37. 37. (九)字体和文本属性 <ul><li>字体名称: p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。 </li></ul><ul><li>字体大小: p {font-size:12px} ,也可以用 xx-small , x-samll , small , medium , large , x-large , xx-large </li></ul><ul><li>字体样式:斜体、粗体和下划线( font-style,font-weight 和 text-decoration )。 </li></ul><ul><li>设置文本对齐: text-align 和 float 。 WAP 中 float ( left,right,none )常用在 img 和 table 标签 </li></ul>
  38. 38. (十)列表属性 <ul><li>改变无序列表的图标( list-style-type ):默认 disc ,其他值: circle , square , none 。可以应用在 ul 和 li 元素上。 </li></ul><ul><li>改变有序列表的次序:默认 decimal ,其他值: upper-alpha ( A ), lower-alpha ( a ), upper-raman ( I ), lower-raman ( i ), none </li></ul><ul><li>3. 使用图片文件作为小图标: list-style-image: url(bullet.gif) 。注: Openware WAP 浏览器本地保存了一些 icon ,可以使用这些作为小图标,例如: ul {list-style-image: localsrc(&quot;rightarrow1&quot;)} </li></ul>
  39. 39. (十)列表属性
  40. 40. (十一)颜色属性和 border 属性 <ul><li>设置前景和背景颜色: color 、 background-color 属性 。 </li></ul><ul><li>设置 border 样式: border-style ( border-top-style 等)属性,值有很多,但只有 none 和 solid 被 WAP 浏览器广泛支持。 table {border-style: solid} </li></ul><ul><li>设置 border 宽度: border-width (同上)属性,值为数值,还接受 thin 、 medium 和 thick 。注:值设置 border-width , border 并不可见,必须设置 border-style 非 none 值。 </li></ul><ul><li>设置 border 颜色: border-color (同上)属性。注意点同上。 </li></ul><ul><li>设置 border 属性的快捷方式: table {border: 2px solid black} </li></ul><ul><li>顺序自由。 </li></ul>
  41. 41. (十二) WAP 特有的 CSS 扩展 <ul><li>快捷键: -wap-accesskey ,用来指定 XHTML MP 元素的快捷键。 </li></ul><ul><li>Input :定义文本框是否可以留空,什么类型,可以输入多少字符 </li></ul><ul><li>Marquee :在屏幕上滚动一些内容。 </li></ul>
  42. 42. (十二 .1 ) WCSS 快捷键扩展 <ul><li>给元素定义快捷键: -wap-accesskey 属性 </li></ul><ul><li>可用的属性值 * , # , 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 </li></ul><ul><li>input.wcss_class {-wap-accesskey: 4} </li></ul><ul><li>直接定义 * 和 # 违反 CSS2 语法。需要使用 Unicode 转义字符 2a 和 23 。但是有些 WAP 浏览器( Sony Ericsson WAP 浏览器 )要求使用 2a 和 23, 一些( Openwave 手机浏览器) 要求使用 * 和 # 。 </li></ul><ul><li>与元素的 accesskey 属性同效,如同时定义,显示该属性值。 </li></ul><ul><li>只用于四个元素 a , input , label , textarea ,其他定义也无效。 </li></ul>
  43. 43. (十二 .2 ) WCSS 输入扩展 <ul><li>由两个属性组成: -wap-input-famat 和 -wap-input-required ,对应于 WML 中 <input> 元素的 format (定义类型和字符数量)和 emptyok (是否可以留空)属性。 </li></ul><ul><li>早些的移动设备上 WAP 浏览器不支持,但支持 format 和 emptyok 属性作为 XHTML MP 的扩展。为了更好的兼容性,建议 WCSS 和 WML 都使用。 </li></ul><ul><li><input type=&quot;text&quot; format=&quot;N&quot; style='-wap-input-format: &quot;N&quot;'/> </li></ul><ul><li>控制文本框的类型和字符数量: -wap-input-format 。需应用在 <input type=“text”>, <input type=“password”> 和 <textarea> 标签上,如应用在其他标签无效。格式字符(大小写敏感): a (小 </li></ul><ul><li>写字母或符号), A (大写字母或符号), n (数字或符号) </li></ul>
  44. 44. (十二 .2 ) WCSS 输入扩展 <ul><li>N (数字), x (小写字母或数字或符号), X (大写字母或数字或符号), m (任何字符,默认小写字母输入模式,可换大写模式), M (任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分 Openwave 手机浏览器不支持单引号,建议使用双引号( <input type=“text” style=‘-wap-input-format: “N”’/> ) </li></ul><ul><li>-wap-input-format: “2N” (最多两个数字) -wap-input-format: “NN” (两个数字) -wap-input-format: “*N” (无限个数字) </li></ul><ul><li>-wap-input-format: “A*a” (第一个大写字母或符号, 0-n 个小写字母或符号) -wap-input-format :“*M” (默认) </li></ul><ul><li>格式字符前使用数字或 * 的原则: 1 、只允许一次; 2 、在最后 </li></ul>
  45. 45. (十二 .2 ) WCSS 输入扩展 <ul><li>如果值语法错误,则 WAP 浏览器忽略该属性。 </li></ul><ul><li>也可以包含转义字符:’ ’ 在 WCSS 中是特殊字符,使用’ 。 </li></ul><ul><li>控制文本框是否可以留空: -wap-input-required (值为: false 和 true ),帮助控制文本框是否可以空白。使用元素同上。 </li></ul><ul><li>当 -wap-input-format 和 -wap-input-required 冲突时,以 required 优先。 </li></ul>
  46. 46. (十二 .3 ) WCSS Marquee 扩展 <ul><li>可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些 WAP 浏览器只支持滚动文字。当内容超过屏幕时很有用。 </li></ul><ul><li>包含四个属性和一个属性值: -wap-marquee 属性值( display 属性的值), -wap-marquee-dir 属性(指定 marquee 的方向 , 值: ltr , rtl- 默认), -wap-marquee-loop 属性(指定 marquee 重复的时间, infinite 永远,大多数默认为 1 ), -wap-marquee-speed 属性(指定 marquee 的速度,值: slow , normal- 默认, fast ), -wap-marquee-style (指定 marquee 在屏幕上如何滚动,有三个值: scroll- 默认, slide , alternate ) </li></ul>
  47. 47. (十二 .3 ) WCSS Marquee 扩展
  48. 48. 二、 WAP2.0 设计原则
  49. 49. WAP2.0 设计原则 <ul><li>设计站点前的准备工作 </li></ul><ul><li>界面设计、挑选核心服务、 WAP 设备特性统计(浏览器等) </li></ul><ul><li>关注导航模型 </li></ul><ul><li>一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入(考虑选择列表、复选框或单选按钮等。 -wap-input-format : *N; 避免模式转换。首字母。 ) </li></ul><ul><li>设计导航层次 </li></ul><ul><li>导航模型一致、少用‘返回’链接、避免深度太深( 4-5 )、返回首页或目录 </li></ul>
  50. 50. WAP2.0 设计原则 <ul><li>考虑小尺寸屏幕的设计 </li></ul><ul><li>确保内容可见、 <title> 少于 14 个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性( 1-3 )、充分利用空间(图文)、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。 </li></ul><ul><li>保持较短的文档大小:内存有限,不支持 WML 的多 card ,使用锚链接等 </li></ul><ul><li>不要包含长注释、去除缩进或空格、尽量少用 id 和 class </li></ul><ul><li>6. 用户任务流流畅和图片合理使用 </li></ul><ul><li>图片不是用户目的尽少使用、避免使用大表格。 </li></ul>
  51. 51. WAP2.0 设计原则 <ul><li>7. 页面上提供足够信息 </li></ul><ul><li>首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。 </li></ul><ul><li>为用户操作提供信息反馈 </li></ul><ul><li>对用户操作、错误和问题情况提供正确的反馈。 </li></ul><ul><li>9. 尽可能减少图片数量和减小图像容量大小 </li></ul><ul><li>每张图片都是一个请求,降低页面显示的速度,且内容可能重排序,占用时间和资源,全站规划相同图片。 </li></ul><ul><li>定义图像的高度和宽度属性 </li></ul><ul><li>定义了预占位,改善用户体验, </li></ul>
  52. 52. WAP2.0 设计原则 <ul><li>11. 谨慎使用表格 </li></ul><ul><li>单元格宽度使用绝对宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。 </li></ul><ul><li>12. 考虑添加样式定义选项 </li></ul><ul><li>权衡! </li></ul><ul><li>使用 Unicode 字符编写 XHTML MP 内容 </li></ul><ul><li>进行可用性测试 </li></ul>
  53. 53. 附录 <ul><li>1. 常用 WAP 模拟器 </li></ul><ul><ul><li>WinWAP 、 OpenWave 、 Opera </li></ul></ul><ul><li>2. 常用 WAP 网站 </li></ul><ul><ul><li>www.wapforum.org </li></ul></ul><ul><ul><li>www.spforum.net </li></ul></ul><ul><ul><li>www.csdn.com </li></ul></ul><ul><ul><li>www.blueidea.com </li></ul></ul>
  54. 54. The End! ( return obj )

×