WAP教程.ppt

WAP2 0 XHTMLMPandWCSS 怿飞 一 WAP的常识 省略 二 XHTMLMP 一 XHTMLMP介绍 XHTMLMP eXtensibleHyperTextMarkupLanguageMobileProfile WAP2 0与WCSS WAPCSS WAPCascadingStyleSheet 配套使用是XHTML的子集XHTMLBasic XHTML子集 另外的一些XHTML的元素和属性WAP浏览器与互联网之间以前WAP网站 WMLandWMLScript 更多的展示表现 presentationcontrol 一 XHTMLMP介绍 优势 开发的站点可以在WEB和无线上都可以使用 也可以用任何Web浏览器访问WAP2 0应用向后兼容 XHTMLMP WCSS和WML WMLScript 二 无线标记语言发展 HTML WAP发展的首要任务 移动电话 PDA等访问互联网 WAPstandard WMLandXHTMLMobileProfile 类似HTMLWML WirelessMarkupLanguage 1 x WAP1 x规范中规定的标记语言 无线设备的第一个标记语言 Openwave Nokia和Ericsson很早都有自己的标记语言 WML规范是WAPForum 97 创建的 而现在 很多的WAP站点依然使用的是WML XHTML 结构比HTML更简洁和严格 这对于无线设备 例 移动电话 很重要 对于有限的处理能力 XHTMLBasic 是XHTML的一个简化版本 为处理能力和性能有限的设备设计的 移动电话 PDA 呼机等 二 无线标记语言发展 但是不包含XHTML特性 例如CSS frames和Scripting 是由W3C定义的 XHTMLMP 在WAP2 0说明中指定的官方标记语言 WAPForum基于XHTMLBasic创造 并从XHTML的完整版本中增加了一些元素和属性 例如 和 XHTMLMP支持一个简单的CSS版本 即WCSS WAPCSS WCSS WAPCSS CSS2的一个简化版本 增加了WAP特有的扩展 可以很简单的改变XHTMLMP页面的布局和风格 WML2 0 WAP站点开发者不需要顾虑WML2 0 WML2 0向后兼容 并且对于WAP站点开发者还不可用 三 XHTMLMP的优点 最大优点 开发者可用相同的技术开发适用于WEB和WAP的站点 有HTML XHTML CSS基础即可入门 同样的开发工具可以用来开发WEB和WAP站点 开发过程中一般的WEB浏览器可以浏览你的WAP站点 HTML XHTML页面可以通过较小的修改成XHTMLMP 甚至不用修改 注意 布局是否适应小屏幕 文件大小是否出最大 支持WCSS 移动设备有很多不同的特征 比如屏幕大小 只需写一次结构 使用不同的WCSS文件即可 更多的表现控制 四 不支持的WML特性 XHTMLMP不支持和标签 在XML中 一个文件可以包含一个或更多的card 所有的card组合成一个deck 并在无线设备中一同被下载 WAP浏览器每次只显示一个card 可以通过锚链接访问其他的card 通过这些 减少了服务器的往返的访问 对性能的提高是有意义的 在XHTMLMP中要实现类似的特性 可以使用multipartmessages 多个文档放到一个请求 另外一个方式是使用目标锚 一个页面的不同位置 XHTMLMP不支持标签元素10秒后告诉WAP浏览器URL 注意点 WMLtimer仅当进入card 而HTMLrefreshtimer当进入XHTMLMP页面 四 不支持的WML特性 3 XHTMLMP不支持事件 WML支持四个事件 ontimer onenterbackward onenterforward onpick 除ontimer其他事件无法模拟 如要使用 需使用WML1 X 4 XHTMLMP不支持变量 在XML 可以声明变量 并赋值 拥有全局作用域 可以在任何的deck和card中使用 XHMLMP放在服务器端处理 必须发送并保存 5 XHTMLMP不支持客户端脚本 在XML 你可以使用客户端脚本 WMLScript JavaScript的简化版 常用来验证数据 放在服务器短处理 将来的版本将会支持客户端脚本 ECMAScriptMP 支持所有的WMLScript功能 四 不支持的WML特性 6 XHTMLMP不支持可编程序软键 ProgrammableSoftKeys WML的一个最大特征 通过标签使用 在XHMLMP中可以使用accesskey属性 锚链接和提交按钮支持这个属性 XHTMLMPTutorialPart1标签 在XML 用来在一些文字下添加下划线 可以用WCSS中的text decoration属性 8 XHTMLMP不支持Input框的format属性 在XML 可以定义类型和字数限制 可以使用WCSS中的 wap input format属性 语法一致 比如限制5个数字字符 input wap input format 5N 四 不支持的WML特性 9 XHTMLMP不支持锚链接传输数据 姓名 提交姓名 五 语法规则 标签必须完全闭合 标签和属性必须小写 属性值必须包含在引号标记内 不允许无属性值存在 标签必须完全嵌套 六 MIME类型和文件扩展名 MIME类型 application vnd wap xhtml xml application xhtml xml text html 动态生成MIME类型 获得HTTP请求中的acceptheader信息 文件扩展名 xhtml html htm 七 文档结构 必须包含 和元素 HelloworldHelloworld W 七 文档结构 XML声明和字符编码 UTF 8 16编码可省略 XML声明也不是必须的 但如果忽略在许多WAP浏览器中出错 必须有DOCTYPE声明 在XML声明和元素之间 元素 align属性已经去除 可以通过WAPCSS的text align属性来设置 八 通用的元数据 使用标签 包含在内WAP浏览器如果不理解则忽略 比如添加作者 CacheControl 标签的一个应用是控制XHTMLMP文件在Cache中的存在周期 注意点 与设备相关 一些使用不相的方法 一些没有Cache机制 还有一些不支持但识别Cache Control no cache的HTTP头 也可应用于图片的缓存 八 通用的元数据 周期性刷新 必须配合使用 不是所有浏览器都支持 九 常用标签介绍 注释 和HTML和WML1 X相同 换行 和HTML和WML1 X相同 水平线 不能包含在标签之内 标题 不同的大小和样式 有些设备看起来一样的 九 常用标签介绍 字体样式 XML可以使用标签来改变字体样式 等 但一些浏览器只支持其中的部分 不支持的忽略 不会出错 WCSS控制字体格式 与格式化文本 在XHTMLMP中 标签间空白不显示 此外 段落中2个或更多的空白只显示一个 如果想保持文字的格式 可使用 列表 对于元素 可以用属性start指定数字开始的序列 还可以用WCSS来做更精确的控制 显示图片 标签用来显示图片 和HTML一样 如果文件没发现或者图片格式不支持 显示alt属性文本 Height和width属性来指定图片显示区域的高度和宽度 九 常用标签介绍 除了老的WBMP图片格式 WAP2 0还支持WEB上的图片格式 gif jpg和PNG 但WAP2 0无线设备支持上面图片格式的某些 GPRS gif CDMA png 可以通过acceptHTTPheader判断设置 关于大图片的发布 很多WAP浏览器都没有水平滚动功能 如果宽度大于显示屏 很多的WAP浏览器会裁切图片 图片的按比例缩小不能帮助提升性能 大图片还会造成访问站点用户的费用 优化图片 1 用制图软件按比例缩小图片 2 如果是gif图片 减少颜色 但降低了图片质量 权衡 3 如果是jpg图片 保存一定的压缩比例 依然是权衡 使用multipartmessages 先下载的XHTMLMP文档 九 常用标签介绍 后请求图片 产生多个请求 该方式可以使文档和图片在一个请求 意味着一个页面只有一个请求 减少服务器的压力 表格 创建表格 需要使用 标签 默认表格没有边线 属性有rowspan和colspan 锚链接 一般用在导航 标签为 属性href定义指定的URL 当前页面位置的跳转 先设置目标链接 通过id属性设置 再设置锚链接的URL为 id名称 对锚链接设置快捷键 标签的accesskey属性 有效的值为 0 9 还可以用 wap accesskey设置 九 常用标签介绍 选择列表 选择列表使用标签 包含一个或更多的标签 标签的name属性定义选择列表的名字 name用来取得被选择的item的值 option的value属性定义 1 多重选择列表 Option的selected属性用来设置默认的option 如果想设置多重选择列表 可使用标签的multiple属性 只有一个唯一值 multiple 2 Option分组 使用标签 label属性定义option组的名称 九 常用标签介绍 选择列表 九 常用标签介绍 输入元素 Textfield Passwordfireld Checkbox Radiobutton Hiddenfield 通过元素创建 传输数据到服务器 元素必须和一起使用 Type属性用来定义input元素的类别 Name属性用来定义名称 方便取得用户数据 input wap input format 10N 九 常用标签介绍 13 form元素 等元素不能直接包含在form元素下 XHMTLMP标准规定必须有块级元素 如果有non ASCII字符 需使用POST方法来避免编码问题 14 提交按钮 所有的表单都必须包含一个提交按钮 元素用来创建一个提交按钮 而type属性被定义为 submit 九 常用标签介绍 15 重置按钮 并不是必须的 元素用来创建一个重置按钮 而type属性被定义为 reset 16 Div和Span 三 WCSS WAPCSS 一 WCSS介绍 WCSS WAPCSS WirelessCSS WirelessProfileCSS WAPCascadingStyleSheet 是CSS2的子集 一些WAP特有的扩展目的 定义文档的风格和布局 从文档内容中分离 重要性 不同的手机设备有多样的特征 比如屏幕大小 WML不支持WCSSW3CCSSMobileProfile和WAPCSS不同 二 使用WCSS的优势 主要 学习成本降低 可用相同的开发工具 可用WEB浏览器浏览 表现和结构的分离 匹配不同无线设备的特征 屏幕大小 不同客户端代理 PC PDA 手机 降低维护成本 新手机 改变视觉和布局仅需CSS 重复使用CSS 便于工作细分 比WML更好的控制表现 可以定义元素的color font background border margin padding等属性 移动设备第一次访问站点下载样式 Cache 使用外部WCSS XHTMLMP的文档大小变小 提高下载时间 三 使用WCSS的劣势 不同的WAP浏览器对WCSS的支持不同 可能一个属性在这个WAP浏览器上支持 而另外一个不支持 外部的WAPCSS可能增加第一次访问页面的请求时间 原因 外部WCSS不存在于手机的Cache 必须从服务器下载 XHTMLMP文档和外部的WCSS下载是不同的请求 增加了服务器压力 如果使用一个WCSS定义WAP站点的所有表现 该文件大小可能很大 WAP浏览器需要解析WCSS到XHTMLMP文档 四 MIME类型和文件扩展名 MIME类型 text css 文件扩展名 css 五 WCSS的语法规则 WCSS声明 selector property property value 多个属性允许的 用 分隔 多个选择器也是允许的 用 分隔 注释 orz WAP浏览器将忽略这些内容 六 如何在XHTMLMP文档中应用 链接外部WCSS 推荐 放置在文档的head部分 用style属性定义WCSS样式 可以多个 无需修改rel和type属性 someWCSSstatements 七 不同的选择器 类型选择器 h1 font style italic 元素名称必须小写 Class选择器 class color blue 对应标签的class属性 还可以联合元素名称使用h1 class color blue ID选择器 id color red 对应标签的id属性也可联合元素名称 通用选择器 color blue 所有的标签 注意 在某些WAP浏览器上会使样式渲染变慢 建议不要用 八 常用的属性值 长度 px em ex cm mm in pt pc 值和单位之间不允许有空格 margin top 1px而不是margrin top 1px 颜色 rgb r g b rgb r g b rrggbb rgb red 16种 URL ul list style image url bullet gif 无引号 双引号 单引号均可 九 字体和文本属性 字体名称 p font family TimesNewRoman 名称中有空格或多个单词必须用引号包含 字体大小 p font size 12px 也可以用xx small x samll 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 upper raman I lower raman i none3 使用图片文件作为小图标 list style image url bullet gif 注 OpenwareWAP浏览器本地保存了一些icon 可以使用这些作为小图标 例如 ul list style image localsrc rightarrow1 十 列表属性 十一 颜色属性和border属性 设置前景和背景颜色 color background color属性 设置border样式 border style border top style等 属性 值有很多 但只有none和solid被WAP浏览器广泛支持 table border style solid 设置border宽度 border width 同上 属性 值为数值 还接受thin medium和thick 注 值设置border width border并不可见 必须设置border style非none值 设置border颜色 border color 同上 属性 注意点同上 设置border属性的快捷方式 table border 2pxsolidblack 顺序自由 十二 WAP特有的CSS扩展 快捷键 wap accesskey 用来指定XHTMLMP元素的快捷键 Input 定义文本框是否可以留空 什么类型 可以输入多少字符Marquee 在屏幕上滚动一些内容 十二 1 WCSS快捷键扩展 给元素定义快捷键 wap accesskey属性可用的属性值 0 1 2 3 4 5 6 7 8 9input wcss class wap accesskey 4 直接定义 和 违反CSS2语法 需要使用Unicode转义字符 2a和 23 但是有些WAP浏览器 SonyEricssonWAP浏览器 要求使用 2a和 23 一些 Openwave手机浏览器 要求使用 和 与元素的accesskey属性同效 如同时定义 显示该属性值 只用于四个元素a input label textarea 其他定义也无效 十二 2 WCSS输入扩展 由两个属性组成 wap input famat和 wap input required 对应于WML中元素的format 定义类型和字符数量 和emptyok 是否可以留空 属性 早些的移动设备上WAP浏览器不支持 但支持format和emptyok属性作为XHTMLMP的扩展 为了更好的兼容性 建议WCSS和WML都使用 控制文本框的类型和字符数量 wap input format 需应用在 和标签上 如应用在其他标签无效 格式字符 大小写敏感 a 小写字母或符号 A 大写字母或符号 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个小写字母或符号 wap input format M 默认 格式字符前使用数字或 的原则 1 只允许一次 2 在最后 十二 2 WCSS输入扩展 如果值语法错误 则WAP浏览器忽略该属性 也可以包含转义字符 在WCSS中是特殊字符 使用 控制文本框是否可以留空 wap input required 值为 false和true 帮助控制文本框是否可以空白 使用元素同上 当 wap input format和 wap input required冲突时 以required优先 十二 3 WCSSMarquee扩展 可以在屏幕上滚动一些内容 一行文字 一个图片 一个链接等 但一些WAP浏览器只支持滚动文字 当内容超过屏幕时很有用 包含四个属性和一个属性值 wap marquee属性值 display属性的值 wap marquee dir属性 指定marquee的方向 值 ltr rtl 默认 wap marquee loop属性 指定marquee重复的时间 infinite永远 大多数默认为1 wap marquee speed属性 指定marquee的速度 值