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