[新版]手机网页开辟-wml文件

[新版]手机网页开辟-wml文件 第零章 现在的互联网，可以说是名副其实的移动互联网。大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。 于是，手机网页的制作需求也变多了。这篇文章就简单的介绍一下制作手机网页的基础知识。 首先，如果想制作wap网页，先要确定你的wap站的版本，是wap1.2还是wap2.0。只有先确定好这个，才能继续下面的制作工作。 之所以要分别这两个版本，是因为它们所使用的网页语言的标准是不同的，wap1.2采用的WML语言，2.0采用的则是Xhtml MP语言。 WML语言是无线标记语言(Wireless Markup Language)的缩写，它是一种从 HTML 继承而来的标记语言，但是 WML 基于 XML，因此它较 HTML 更严格。 Xhtml MP是Xhtml Mobile Profile的缩写，它是wap2.0的标记语言，属于Xhtml的一种，较之WML又先进了许多，它也可以引用外部CSS进行修饰，可以达到和普通网页浏览器相近的浏览效果。在Xhtml MP没有出现之前，开发者们只能使用WML创建wap网站。虽然Xhtml MP看起来更简单、也更美观，但仍有许多大型网站仍使用wap1.2的WML制作手机站点，目的就是为了兼容老版本手机，比如手机新浪网、网易手机版等。 分清自己使用的wap版本和语言后，还需要知道一些其它知识: 1、虽然采用Xhtml MP语言编写，写法也和Xhtml语言相似，但wap站的页面扩展名却是*.wml结尾，不是*.html。 2、使用Dreamweaver就可以利用Xhtml MP语言制作wap页面，在新建页面时将文档类型选为xhtml-mobile1.0，其它制作页面方法和制作Xhtml普通页面大同小异。 如果您问我您的wap站偏要使用wap1.2标准制作网站该怎么办, 我的答案有两个，一好一坏，坏的是您需要学习一些新的语言标记方法;好的是您又掌握了一门新技能。关于WML和Xhtml MP的制作方法，将在以后的文章中介绍。 第一章 在上篇文章中已经说过，手机网站有两个版本，Wap1.2和Wap2.0，它们使用的网页语言也不同，Wap1.2使用Wml语言，Wap2.0使用Xhtml MP语言。Wml语言和Html语言有颇多不同之处，所以若要用它编写手机网页需要重新学习一下Wml语言。而Xhtml语言和普通网页的Xhtml语言十分相似，如果已经掌握Xhtml语言，那么再做Xhtml MP的手机网页就轻而易举了。 既然这样，我们就从简单处入手，先以实例讲解用Xhtml MP制作手机网页的步骤，然后再分部分讲解Wml语言制作手机网页的方法。 制作手机网页最好先准备三样东西:网页图、Dreamweaver软件和Opera浏览器。网页设计图就是网页未来的摸样，必不可少;用Xhtml MP语言进行手机网页制作和普通网页制作方法一样，使用Dreamweaver即可;而Opera则对手机 网页有很好的支持，可以明确指出网页中的错误。有了这三样，就可以开始制作了。 下面正式进入Xhtml MP手机网页的制作方法步骤是，由于篇幅可能过长，所以本文先只介绍新建网页步骤。 一、新建手机网页 1、新建手机网页的方法和新建普通网页相同，详细步骤可以参见原来的文章。新建手机网页，只有一个地方不同，就是在打开Dreamweaver后，在新建网页弹出窗口的文档类型处选择“Xhtml Mobile 1.0”，然后点击确定，如图一所示。 2、新建网页后，页面中出现了代码网页源代码如下: 和普通网页不同的只有文档类型的声明，普通网页是 xhtml1-transitional.dtd，而它是xhtml-mobile10.dtd，它定义了网页的解析标准。 3、保存手机网页。上篇文章页也说过了，手机网页是以wml为文件结尾的，所以应该将网页保存为wml文件。但是，如果使用Dreamweaver制作wml网页会出现一个问题，就是在编辑wml文件时Dreamweaver工具栏的按钮都变成灰色不可点击了，出现这种状况只能考手写代码制作网页了，这对于高手来说无所谓，但对于新手似乎有些难度。所以通常情况下我都会将手机网页先保存成html格式 文件，待制作完成后再另存为wml文件。所以这里直接将网页保存为index.html即可。 第二章 Wap2.0手机网站的网页语言是Xhtml MP。一提起Xhtml，就绝对离不开Div和CSS。在上篇文章讲到了新建手机网页，下面继续介绍链接CSS文件的方法。 二、CSS文件链接方法和定义方法 和普通网页相同，在使用Dreamweaver软件时，链接CSS文件只需要在软件右侧的CSS面板中点击“附加样式”，然后选择CSS文件即可。 如果还没有CSS文件，就点击“新建CSS规则”按钮新建一个CSS文件。如图一中所示: 1、图1-1，点击“新建CSS规则”按钮; 2、图1-2，在新建CSS规则的窗口中选择“标签”，在下面标签处选择“body”，或直接输入，在“定义在”选项中选择“新建样式表文件”，点击确定; 3、图1-3，将CSS文件命名为style.css，然后保存; 4、图1-4，在CSS规则定义的对话框中定义:字体-12px、行高-18px、填充-0(全部相同)、边界-0(全部相同)，然后确定。 完成以上四步，CSS文件就新建并链接完毕，接下来再进行一些定义即可。 手机网页不需要太多美化，修饰越多就会造成下载数据过多和时间过慢，还会增加用户流量费用，所以简要的修饰和清晰地结构才是最重要的。于是，运用好标题、列表项、换行等内容在收集网页中是很重要的。 在做网页前先对以上提到几项进行简略定义，代码内容如下: body { font-size: 12px; margin: 0px; padding: 0px; line-height: 18px; } img { border:0; } h1,h2,h3,div,li,p { margin:0; padding:2px 2px; font-size:12px } h1 { background:#7acdea; } h2 { background:#d2edf6; } input { font-size:12px; } a { font-size:12px; } a:link,a:visited { color:#0050B4; text-decoration: none; } .list { padding: 3px 0 0 5px; } #footer { border-top: 2px #FD6301 solid; border-bottom: 1px #ddd solid; margin: 15px 0 10px 0; padding: 5px; } 其中，链接a标签的属性可以不定义，直接使用浏览器默认颜色，这里仅用于美 化。h1、h2作为标题使用，list是列表内容区域，footer是页脚的版权信息。 手机网页中需要用CSS定义的内容基本上就这些，如果以后有用到其它内容，将 继续补充。 第三章 经过新建网页、链接CSS文件几个简单步骤，一个手机网页的模型已经初步建立了。接下来就是为这个页面添加更多的内容元素，本文将介绍插入图片、标题、文字链接等方法。 一般的手机网页的首页顶部都有一个logo图片或者广告图片，然后下面依次是“分类标题—内容;分类标题—内容;版权信息;”等，我们也按照这个结构进行制作。 三、插入内容 1、插入Div 首先是在页面顶部插入图片，用Dreamweaver插入图片，点击插入图片图标，然后选择要插入的图标即可。但是，在这之前要先给这个图片加个“外壳”，就是所谓的Div容器，也就是插入一个Div。具体操作方法:在工具栏中点击“插入Div标签”按钮，如图一，随后在弹出的对话框的ID中填入“head”，如图二所示。 其实，在上篇文章《链接CSS文件》中已经将是网页中可能用到的CSS罗列出来，但没有这个head的ID的CSS内容，现在添加的Div使用了head这个ID，但并不用给它做任何定义，仅仅为了以后方便程序调用才给它添加这个ID。 2、插入图片 插入Div后，删除Div中自动添加的文字，然后点击工具栏中的插入图像图标，如图三所示。 在随后弹出的对话框中选择要插入的图片，如图四所示，或者在URL处输入网络地址，如图四中2处。 点击确定后，又弹出了一个图像标签辅助功能属性对话框，在“替换文本”栏中输入图片的注解文字，如:LOGO，XXX网站等，然后点击确定，如图五。图片插入成功～如果需要调整图片，只需要点中它，在属性面板中修改即可。 3、插入标题 LOGO添加完毕，下面就是添加标题和内容了。 在head的Div后添加标题，点击工具栏中文本标签中的标题2(h2)按钮插入标题，如图六，然后在标题2中输入【分类名称一】。 4、添加文字链接 接下来，要给分类一添加一些内容。但给它添加内容之前，也要先给它添加一个“外壳”，所以重复第一步骤中插入Div的操作，只不过这次不要在ID中填入head，而改成在“类”中选择class或填入list。 然后将Div中自动添加的文字删除，输入链接文字，输入完毕后按Shift+Enter键添加一个折行标记
。这样做是让文本强制折行，避免由于手机屏幕过窄而造成错位，同理，下面每行宽度最好不超过200像素，都要添加折行标记
。 然后将全选文字全选，在属性面板中添加链接，目标一栏中留空不填，因为一般的手机网页都是在本页刷新的，所以保留。 重复以上操作，继续添加链接数条。 5、其它 按照以上3-4步操作，在页面中添加一些内容后你会发现，制作手机网页真的和普通网页没什么大区别，只不过需要稍微注意一下制作习惯而已。所以，诸如搜索框、版权信息的内容就不需要再介绍了吧。 再者，您也许也发觉了，这篇文章中所用到的Class和ID没有几个，都是上篇文章CSS里给出的，可见用Xhtml MP语言实在很容易。 第四章 WML基础知识 1、WML使用的标签类似 Html，但是语法更严格且遵守 XML 1.0 标准; 2、WML页面的扩展名是 *.WML，就像 HTML 页面的扩展名是 *.HTML 一样，这个在前面的文章中提过; 3、WML语言的源代码内区分大小写

和

是不同的，标签必须正常关闭，否则就会报错甚至无法显示。 WML基础语法 1、卡片和卡片组:WML页面叫做卡片组(DECK)。卡片组是由一系列的卡片(CARD)构成的，卡片之间通过链接联系。 2、页面基本结构:和Html语言一样，完整的WML页面也是从文档声明开始的，具体结构如下:

Wap页面测试～

Wap页面测试～Div+css

WML属于XML文档，文档模型为wml_1.1.xml。间是文档内容，就像Html中的标签;中是显示的主体内容，就像Html中的标签。 card标签上有ID，方便程序调用，card上的title就是这个看片的名称，显示效果如上图所示。与之间可包含的元素有很多，包括文本、图像、链接、表格、输入框、表单等等，这些内容将在下面的文章中介绍。 以上这段代码在预览时只能显示card1中的内容，如果页面中有card2内容，它将提前被下载到手机上而不显示，只有通过链接显示card2内容。 下篇文章将向您介绍WML网页中的段落、换行、文本格式化、表格、图像等内容，请留意。 第五章 在上篇关于手机WML语言的文章中简单介绍了WML的基础知识和基础语法，这篇文章中将讲些更加实质性的内容:WML网页中的段落、换行、文本格式化、表格、图像等内容。 一、段落和换行 WML中的段落和换行与Html中的段落和换行写法相同，都是

标签和
，而且都是需要关闭的。

段落文字

段落文字
段落文字

二、文本格式化 文本格式化可没有硬盘那么严重，其实就是将它们定义各种格式而已，比如加粗字体、斜体、下划线等等。 强调emphasized 和 斜体italic 加强strong 和 粗体bold 下划线underline 增大字体big 缩小字体small 有人会说强调和斜体效果不是一样吗,为什么要分开来两种标签，加强和粗体也是。这一点我曾在《xhtml文本格式和特殊字符详解》中详细将结果，有兴趣的朋友可以去看看。 三、表格 WML中的表格和Html中的表格制作方法也大同小异。

单元格 1

单元格 2

单元格 3

从上面的代码中可以看出，WML和Html在文本方面没有多大的区别。其实这个原因是他们本质上都遵守 XML 1.0 标准。 第六章 本篇文章继续上文的WML文本代码，继续介绍链接和插入图像。 四、链接 在Html语言中，链接的标签是，但再WML中链接却有两个标签，他们是和。 标签强调的是“任务”，使用它的时候要跟随一些动作一起执行(比如“go”和“refresh”等)。

下一页

上面的例子是当用户点击“下一页”链接的时候，跳转到nextpage.wml页面。 WML中另一个链接标签是。它执行的动作是go，就是前往指定页面，也是最常见的。比如: 下一页 五、插入图像 在WML语言中插入图像的标签也和Html中一样，使用的是标签。 这里插入的是wbmp图像，.wbmp图片是早期唯一可以显示在 WAP 浏览器中的图像类型，现在也可以在页面中插入.jpg和.gif等图像。 第七章 本文继前面讲到的WML语言中的文本标签和图像、链接后，接着讲WML语言中的表单内容。 在Html中，表单内容包括输入框、单选框、复选框等等，WML也并不例外，仍然包含这三个元素，而且和Html中十分相似。 六、输入框 输入框可以让用户输入信息，起到交互效果。和Html中一样，都是使用标签:

姓名:
年龄:
性别:

七、单选框和复选框 同理，在Html中也有单选和复选的表单内容之分，在WML中也存在。 比如单选框的代码如下:

HTML 教程 XML 教程 WAP 教程

不要奇怪，虽然 标签和在Html语言中会显示为下拉菜单选项，但在WML语言的浏览器中会显示成单选框，这是与Html的区别。 而复选框也是在它的基础上稍加定义而成的: HTML 教程 XML 教程 WAP 教程 没错，仅仅在 处添加了 multiple="true"就使单选框变成了复选框。 八、Fieldset控件组 为了让表单显得整齐，我们常常在其外面加上一段标明区域的代码fieldset，Html中也有这个做法。比如:

标题:

价格: WML中基本的表单元素大概只有那么多，虽然没有Html中那样形式多样，但也够用了。 第八章 九、任务动作 在前面介绍WML语言的链接标签时层提到过 和几个任务，它们都是WML中的典型任务动作。本文就对它们进行简单介绍。 任务 (task) 定义了事件发生时所执行的动作，比如在输入一个卡片或选择一个链接之类的时间发生时。分别有:Go任务 、 Prev 任务、Refresh 任务、Noop 任务。 它们各自的含义如下: 表示切换到新卡片的动作。

规定

关于下班后关闭电源的规定党章中关于入党时间的规定公务员考核规定下载规定办法文件下载宁波关于闷顶的规定

不做任何事情。用于覆盖卡片组级别的元素。 表示后退到前面的卡片的动作。 刷新一些指定的卡片变量。如果有变量显示在屏幕上，此任务也刷新屏幕。 使用方法:

跳转到测试页面

返回前页

刷新本页

上面的例子使用 标签向卡片添加了一个 "刷新本页" 链接。当用户点击该链接时，它会刷新页面，同时变量 x 的值将被设置为30。 上面的例子使用 标签向卡片添加一个 "Back" 链接。当用户点击这个 "Back" 链接时，他被带回前面的卡片。但是 标签阻止了这个操作;当用户点击 "Back" 时，不会发生任何事情。 十、计时器 除了上面所讲的任务动作等，WML中还有一个特色标签timer计时器。 利用它可以制作倒数计时器，时间单位是一秒的十分之一。 下面的例子将用5秒来显示一条消息，然后切换到文件 "test.wml":

提示文字

到这里，WML的基本语法已经介绍的差不多了，再往下就是WML中的变量内容，一般网页制作者用得不多，所以暂且不做介绍了，感兴趣的朋友可以自己查阅相关资料。