《2022年wap网页制作教程 .pdf》由会员分享，可在线阅读，更多相关《2022年wap网页制作教程 .pdf（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第一节：WAP 的潜能这些日子， 我们常听到WAP 技术，一种手机上网的技术。从技术上讲， 移动电话不可能和PC来竞争，移动电话的屏幕只能容下很少的字符，它的带宽也是很受限制，而且输入也很笨拙。那我为什么还要介绍它了，嘿嘿，这里有两个主要的我认为WAP 一定有成功的因素。随处性 :只要你有手机，你到哪里都可以访问wap 网站。帐单机构 : 在不久的将来，我们就能通过我们的手机来支付我们的一切费用，查询很多的信息。只是我们的手机费用中又多了一项费用WAP 服务费 。这样我们就能用手机支付我们的商品费用，信用卡都不用了，它一定能够成为新消费方式。第二节： WAP 基础WAP (Wireless A
2、pplication Protocol) v1.1 是一种开放性规范,它试图规范移动电话访问信息和服务行业。这个规范是由WAP Forum 来开发的，一个民间组织。1.2 版本的 WAP 协议将会被认为是最后的WAP 规范。关于 wap 最基本的概念就是重复利用internet 协议，这个协议必须很清楚地在现有的技术上轻松地调用 wap 服务。WAP 协议利用一种很像我们电脑网络的分层结构。较低层次不太像我们常用的web 应用，但是顶层还是我们的老朋友 -HTTP 。数据一样是从服务器上发出，从服务器上接收，信息能够储存在服务器上，调用也可能用CGI,也可以用其它的方法，比如ASP .也就是说
3、只要你会ASP，那么你就可以在轻松地写出你的第一个WAP 应用程序了。当然，就手机的带宽和用户能力方面来看，手机需要不同 （更严格）的设备，所以在目前的条件下HTML就不能适应WAP 所能提供的带宽。WAP Forum 的定位是 WML (Wireless Mark-up Language),一种 xml 格式的语言。WML 是精简的 HTML。WAP Forum 同时也指定了WMLScript, 很像 javascript ，只是用于手机而已， 它能够处理客户端的程序。第三节： WML 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -
4、- - 名师精心整理 - - - - - - - 第 1 页，共 13 页 - - - - - - - - - 尽管我已经讲解了手机与服务器的通讯，但是真正的客户端不是手机。一个软件（wap gateway),实际上允当了这个角色。它将手机的请求转换为HTTP 请求，同时也将服务器的回应返回给手机，WML 文件此时就被WAP GateWay编译成二进制文件。尽管有些WAP geteway 能够将 HTML 直接转换为 WML，但是也不要指望它们能任意地将HTML 转换为我们在手机上能看懂的东东。当然，仿真器就不需要WAP gateway来工作了，它会直接从服务器下载WML 文件（或者直接在本地
5、机上打开 WML), 同时将它显示在手机的屏幕上。图一WAP 结构WAP 仿真器为了使用 WAP 服务，像吾等穷人买不起手机，就需要一个wap 仿真器。你可以去Nokia website 下载一个Nokia Toolkit 1.2, 同时你也得装上Java Virtual Machine 1.2.2，可以免费从SUN 公司下载，这里是个例子。WML 结构一个 WML 文档是由板块组成的，一个板块包含有许多的卡片。在实际中，你可以把一个板块看成一个由许多有名字的标签组成的HTML 。手机下载一个完整的板块，但是在一次只能显示一个卡片。通过链接浏览不同的地方。我们将会看到一个简单的WML 文档，你
6、得懂点最基本的XML。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 13 页 - - - - - - - - - This is the first card. This is the second card. 一旦手机接收了这个块，它就会显示第一个卡片，当你按下左边的软键时，就会看到第二个卡片。WML 基本的语言p element 作用与 HTML 一样 ,只是如果你想显示文字这个就是必须的。do element 实际上每个WAP 应用必须支持导航条。do 标签最主
7、要的type属性的值就是accept, 这个意味着当你按下软键一个新的选项会被加到列表中来。 label 属性指定显示的文字。另外是一些选项：go - 导航到另外一个卡片或板块中去。他需要href 属性。prev - 导航到上一个卡片中去refresh - 刷新显示。noop - 无Anchor 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 13 页 - - - - - - - - - 作用和 HTML 中的 一样的。 在 WML 中 Anchor 链接的作用和do 差
8、不多， 唯一的不同就是Anchor 不以选项的形式显示。 Go to card 2 变量WML 结合变量的办法有一点不同于HTML 和 javascript 。WML 的变量不仅可以被WMLScript 来调用， 还可以通过 card 直接用于 WML 文档。换句话说就是变量不仅可以由用户直接输入，同时也可以由setvar 元素来设置。当然变量能够被脚本来操作，但这个不是必须的！这个观点必须被更进一步的强调和阐明。例如，你可能需要一个card 来获得用户的名字，下一个card就显示 Hello, 飞刀 , 我们就可以这样 Hello,$(firstname),有点像 PHP ,是不是，这个在传
9、统的HTML 中是不可能办到的！既然变量的值能够在各个card 之间保存，那么它们就经常被用于保存状态信息，支持一些复杂的交互式WAP 服务。这种方法的一个问题就是当整个deck 不得不重新引用时，这些状态可能与用户的浏览不能保持同步。所以，一些事件和属性就被用来捕获这些事件（onenterofrward 和 onenterbackward).刷新则根据一些变量的值被用做更新card. 用户输入当然，为了使你的页面变得更加的强大，变量就需要储存（接收）用户的标准输入。这一切通过一些类似于 HTML 的元素来完成 . input - 很像 HTML, 用户通过手机的键盘来输入。你能够想像，这种输
10、入就不像我们使用PC上的键盘一样实用，所以我们应当尽量简化这种输入方式，有可能尽量使用select 元素来供用户选择。name 属性是这个变量的名字，缺省值和大小的属性显然也是必须的。 format 为输入入口指定了一个输入面具。其它的请查看其它资料，在这我就不一一讲述了！select/option - 用户选项的列表。同样也很像HTML: Eyes Wide Shut 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 13 页 - - - - - - - - - Nott
11、ing Hill : Buena Vista Social Club multiple=true属性告诉用户代理（浏览器）多项选择是被允许的. onpick 事件发生于一个选项被选择/ 被取消时 . Postfield - 很像 html 中的 hidden 属性，它将不显示在屏幕中。它能同时将name 与 value 传送给服务器 . Fieldset - 包含一大堆的信息强迫手机在一个屏幕中显示，当然这得看手机的能力了其它的元素img 元素也同样被支持，但是你得使用一种特殊的图片格式，名叫 WBMP.因为 WAP 手机拥有有限的内存和储存空间。这种新的格式能够让 WAP 设备快速的理解和生
12、成图片。Wireless bitmaps 的生成，可以通过下载一个Photoshop和 Paint Shop Pro 的插件就可以搞定了。最后大家要记住在你的服务器上设置正确的MIME 类型，下面我列出了所有与WAP 有关的 MIME: wml text/vnd.wap.wmlwmlc application/vnd.wap.wmlc wmlsc application/vnd.wap.wmlscriptc wmlscript text/vnd.wap.wmlscript ws text/vnd.wap.wmlscript wsc application/vnd.wap.wmlscriptc
13、wmls text/vnd.wap.wmlscript wbmp image/vnd.wap.wbmp 一些传统的强调元素也被支持，比如:em,i,b,small,strong等等 ,用法也和HTML 一样。 BR 也同样被支持，不过写法有点不同，毕竟是 XML 嘛,要写成这样 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 13 页 - - - - - - - - - 最后我们来看看time对象和ontimer事件 ,time对象保存着至card 被调用至今的时间，如果
14、我们定了ontimer 事件，那么ontimer事件就会被激发 . 还有很多我也懒得写了，希望对你们建设WML 网页没有什么影响. WAP 的开发问题很不幸的是，事情并不是我们想像的那么简单，不同的WAP 手机总是有一些小的不同的地方，就像M$的Javascript 与 NS 的不同一样。例如， NoKia 7710这样第一部在挪威出售的WAP 手机，就不能正确的支持POST 方法。另一个限制就是deck 的大小的问题。有些手机(Nokia 7110) 就是不支持超过1.4K 的 WML 文档， WAP 网关能够将你的WML 文档压缩成更小的二进制格式，但是你也不要希望奇迹出现。这时不仅是No
15、kia 7110 支持的东东不能显示，一些强调标帜也被忽略了，另外fieldset标帜也很轻松地被它忽略了，是不是很烦！？嘿嘿，当你在仿真器上做出很cool 的页面，然后再到手机上一看，嘿嘿，砸了手机是你的第一选择. 虽然 Nokia Toolkit 1.2仿真器上支持cookies, 但是第一批 WAP 手机就是不支持， 这就意味着你将和你的ASP中的 Session，说再见，至少也是很长的一段时间在上一节中， 我讲解了最基本的WAP 和 WML 的概念， 这一节我们就来看看 ASP 和 WAP 是如何结合的 . 第四节：另一种预订你电影票的方法现在在奥斯陆，电影院提供了一种基于电话系统的来
16、销售门票，这个系统是很复杂的，还必须给用户一些说明才能指导用户买票，而且用户还必须在报纸上找到某种电影的代码，这个很烦，我们来介绍另一种方法。这里这将给你展示一个简单的让手机用户订票的WAP 应用： 一个肯定让人叫好的服务。用户不必记住那些烦人的代码，他们能够直接从菜单中选取电影和电影院，并且用户也不需要认证。 在这个例子中用户被要求在电影开始前40 分钟交费，但是在真正的生活中，用户同样可以通过手机来结帐. 此应用程序想像的条件是一个电影能够在同一时间在多个电影院上映，一个电影院不同的时间上演不同的电影。这里我没有过多的考虑错误处理的问题，因为这不是本章节的重点，你喜欢你可以自己加上. 为了
17、简单，我使用了Access 97 来做为数据库，当然真正的系统不会用它了，其它的数据库如SQL Server，也不必改动多少代码. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 13 页 - - - - - - - - - 数据库图表数据库图表.Movie 和 Theater 表是显然需要的。Show 表用于追踪现在还有多少空位可以出售。怎样调试这个程序为了访问这个WAP 服务，你需要一个WAP 仿真器，这个程序主要是在Nokia Toolkit 1.2上调试，详细情况
18、请查看上一章节。选择电影在 list 表中选择一个电影: 这里是代码 : % send the right MIME type Response.ContentType = text/vnd.wap.wml 第一件事就是声明wml, 仿真器如何不在正确的地方声明XML， 它是不会接受WML 的尽管 Nokia 7110 可以忽略这一点，但是不能保证其它的手机也行，所以你不得不做这事。同样你也得设置好MIME 类型。 在进入下一个card 以前会有一个闪烁的屏幕来显示一个图片WBMP 一种新的格式。这个事件是由timer属性决定的，这里我们设置的时间为 5 秒.ontimer 事件引发后将带你去
19、另一个card.(wmbp的 Photoshop 插件可以从网上免费下载). 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 13 页 - - - - - - - - - % Do while not rsMovies.eof response.write( & rsMovies(title) & & vbcrlf) rsMovies.MoveNext loop % 这一部分是本文的焦点。从数据库中读出需要的数据显示出来，作为一个asp 程序员，这个没有什么特别的，但是就
20、是这个简单的程序现在被用于一种全新的服务器就显得不一样了。这也使得我更加认为在基于WML 的商业站的网络编程asp 更胜于 Java servlet. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 13 页 - - - - - - - - - Next 表单的提交也可以通过软开关函数(do 和 anchor) 来完成。在这里，我是通过简单的内嵌链接来完成的，因为我觉得这样能够使用户感觉直观和友好。Postfields大至和 HTML 中的 hidden 差不多，但是wm
21、l 的变量不像html 中的那样需要在 javascript 中传送，它可以直接写在wml 中，这一点上一节已经讲解了.在这里的传递的方法是get,post 方法在 WAP 的规范也是被支持的，仿真器也能识别它，但是很不幸，在Nokia 7110中，这个 post 不被支持，所以你没得选择. 选择电影院和上映时间这部分代码让用户来选择看什么时间的电影，所有的记录根据前一页所选的电影来决定。在这里来选择电影院和上映时间 . movie_id = R equest(movie) sqlQuery = SELECT title FROM movie WHERE Movie_id = & movie_
22、id set rsMovie = conn.Execute(sqlQuery) movie_title = rsMovie(title) : sqlQuery = SELECT name, time, show_id FROM Show, Theater &_ WHERE show.movie_id = & movie_id &_ AND theater .theater_id = show.theater_id 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 13 页
23、- - - - - - - - - set rsShows = conn.Execute(SQLquery) 如果你仔细研究了这个代码，你就会想用Session 来保存电影信息，再在这页进行查询更简单。同样很不幸， Session 是需要cookies 的支持 ,虽说在 WAP 规范中也是被支持的，但是在Nokia 7110 中也是不被支持 ,这就是说现在我们还不能把 session 用在 WAP 服务中。下面有一些有趣的事情: % Do while not rsShows.eof response.write( & Left(rsShows(name),cutter) & ( & rsSho
24、ws(time) & ) & &vbcrlf) rsShows.MoveNext loop % 如果你对 cutter变量感到疑惑，那么就有一些事让你哭笑不得Dim cutter if InStr(Request.ServerVariables(HTTP_USER_AGENT), Nokia7110) then cutter = 12 else cutter = 7 end if 这段代码根据不同的设备来显示选项。我们有充足的理由的这样做，Nokia Toolit 1.2仿真器喜欢把砍掉我的的选项到只有几个字符，而我们要显示电影名字和上映时间，所以我们就不得不减少电影名字的字符。在真的手机中不
25、会出现这种问题，所以我们就必须先判断设备的类型. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 13 页 - - - - - - - - - 一旦我有机会（飞刀我很穷，没有钱，这是仅仅是遥远的梦想.) 在真的 Nokia 7110 上测试我的代码，我们会立即感到我们有比我们想像更大的屏幕。实际上,有些电影院的名字很古怪，而且这些长名字会占用很大屏幕空间，我们没有必要浪费这些显示空间,尽量把这些名字简化。票下一步就是让用户选择需要的票数.这部分的代码很像其它的部分。我将
26、从数据库中查询相同的数据，因为Session 不能在真正的WAP 手机中使用，所以我必须对有些内容进行确认，看看是否还有座位出售. SQLquery = SELECT * FROM show WHERE Show_id = & show_id set rsShow = conn.Execute(SQLquery) : seats = rsShow(free_seats) : if seats = 0 then Response.write(Sorry, no more seats) rsShow.close set rsShow = nothing Response.write() Respo
27、nse.end else if seats 6 then book up to 6 tickets or max available max_seats=6 else max_seats = seats 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 13 页 - - - - - - - - - end if end if % at % dim i i = 1 Do while i = max_seats response.write( & i & ticket(s)
28、& &vbcrlf) i = i 1 loop % 储存票数现在我们已经有了所有需要的数据了，我们得把它们保存起来: tickets = Request(ticket) : free_seats = rsShow(free_seats) : free_seats = free_seats - tickets : SQLUpdate = UPDATE Show &_ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 13 页 - - - - - - - - - SET Sh
29、ow.free_seats= & free_seats & &_ WHERE Show_ID= & show_id conn.Execute(SQLupdate) SQLquery = SELECT max(Booking_ID) as bookingnumber FROM booking Set rsBooking = conn.execute(SQLquery) maxbookid = rsBooking(bookingnumber) 1 SQLinsert = INSER T INTO Booking ( show_id, booked_seats ) & _ VALUES ( & sh
30、ow_id & , & tickets & ) conn.Execute(SQLinsert) % You have booked ticket(s) for The show will take place at () Your reference number is 下面是显示 : Figure 4: 完成交易 . 交易已经完成了，电影院可以坐着电影院门口收钱了. 结论WAP 现在才刚刚走出它的第一步，然而它是最近几年内最有革命性的IT 发展之一。在这篇文章中我介绍了怎样用 asp 写 WAP 应用程序 , 并对你们提出了一些警告，希望对你们以后的发展有用。多媒体技术依然不能太多的用于WAP,但是它的可移动性却是重要的，也为商家提供了不少的商机。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 13 页 - - - - - - - - -