手机网页开.pdf

《手机网页开.pdf》由会员分享，可在线阅读，更多相关《手机网页开.pdf（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、您所查看的文章来源于阿邦教育作者：黄超第零章现在的互联网，可以说是名副其实的 移动互联网。大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。于是，手机网页的制作需求也变多了。这篇文章就简单的介绍一下制作手机网页的基础知识。首先，如果想制作 wap网页，先要确定你的 wap站的版本，是 wap1.2还是 wap2.0。只有先确定好这个内容，才能继续下面的制作工作。之所以要分别这两个版本，是因为它们所使用的网页语言的标准是不同的，wap1.2 采用的 WML 语言，2.0 采用的则是 Xhtml MP 语言。W

2、ML 语言是无线标记语言（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 制作手机站点，目的就

3、是为了兼容老版本手机，比如手机新浪网、网易手机版等。分清自己使用的 wap版本和语言后，还需要知道一些其它知识：1、虽然采用 Xhtml MP语言编写，写法也和Xhtml 语言相似，但 wap站的页面扩展名却是*.wml 结尾，不是*.html。2、使用 Dreamweaver就可以利用 Xhtml MP语言制作 wap页面，在新建页面时将文档类型选为 xhtml-mobile1.0，其它制作页面方法和制作Xhtml 普通页面大同小异。如果您问我您的 wap站偏要使用 wap1.2 标准制作网站该怎么办？我的答案有两个，一好一坏，坏的是您需要学习一些新的语言标记方法；好的是您又掌握了一门新技能

4、。关于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语言制作手机网页的方法

5、。制作手机网页最好先准备三样东西：网页设计图、Dreamweaver软件和 Opera浏览器。网页设计图就是网页未来的摸样，必不可少；用Xhtml MP 语言进行手机网页制作和普通网页制作方法一样，使用 Dreamweaver即可；而 Opera 则对手机网页有很好的支持，可以明确指出网页中的错误。有了这三样，就可以开始制作了。下面正式进入 Xhtml MP 手机网页的制作方法步骤是，由于篇幅可能过长，所以本文先只介绍新建网页步骤。一、新建手机网页1、新建手机网页的方法和新建普通网页相同，详细步骤可以参见原来的文章。新建手机网页，只有一个地方不同，就是在打开 Dreamweaver后，在新建网

6、页弹出窗口的文档类型处选择“Xhtml Mobile 1.0”，然后点击确定，如图一所示。2、新建网页后，页面中出现了代码网页源代码如下：无标题文档 和普通网页不同的只有文档类型的声明，普通网页是xhtml1-transitional.dtd，而它是 xhtml-mobile10.dtd，它定义了网页的解析标准。3、保存手机网页。上篇文章页也说过了，手机网页是以wml为文件结尾的，所以应该将网页保存为wml文件。但是，如果使用 Dreamweaver制作 wml网页会出现一个问题，就是在编辑 wml文件时 Dreamweaver工具栏的按钮都变成灰色不可点击了，出现这种状况只能考手写代码制作网

7、页了，这对于高手来说无所谓，但对于新手似乎有些难度。所以通常情况下我都会将手机网页先保存成html 格式文件，待制作完成后再另存为wml文件。所以这里直接将网页保存为index.html即可。第二章Wap2.0手机网站的网页语言是Xhtml MP。一提起 Xhtml，就绝对离不开 Div 和CSS。在上篇文章讲到了新建手机网页，下面继续介绍链接CSS文件的方法。二、CSS文件链接方法和定义方法和普通网页相同，在使用 Dreamweaver软件时，链接 CSS文件只需要在软件右侧的 CSS面板中点击“附加样式表”，然后选择CSS 文件即可。如果还没有 CSS文件，就点击“新建 CSS规则”按钮新

8、建一个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 文件就新建并链接完毕，接下来再进行一些定义即可。手机网页不需要太多美化，修饰越多就会造成下载数据过多和时间过慢，还会增加用户流量费用，所以简

9、要的修饰和清晰地结构才是最重要的。于是，运用好标题、列表项、换行等内容在收集网页中是很重要的。在做网页前先对以上提到几项进行简略定义，代码内容如下：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:visi

10、ted 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文件几

11、个简单步骤，一个手机网页的模型已经初步建立了。接下来就是为这个页面添加更多的内容元素，本文将介绍插入图片、标题、文字链接等方法。一般的手机网页的首页顶部都有一个logo 图片或者广告图片，然后下面依次是“分类标题内容；分类标题内容；版权信息；”等，我们也按照这个结构进行制作。三、插入内容1、插入 Div首先是在页面顶部插入图片，用 Dreamweaver插入图片，点击插入图片图标，然后选择要插入的图标即可。但是，在这之前要先给这个图片加个“外壳”，就是所谓的 Div 容器，也就是插入一个Div。具体操作方法：在工具栏中点击“插入Div 标签”按钮，如图一，随后在弹出的对话框的ID 中填入“he

12、ad”，如图二所示。其实，在上篇文章链接 CSS 文件中已经将是网页中可能用到的CSS罗列出来，但没有这个 head 的 ID 的 CSS内容，现在添加的Div 使用了 head这个 ID，但并不用给它做任何定义，仅仅为了以后方便程序调用才给它添加这个ID。2、插入图片插入 Div 后，删除 Div 中自动添加的文字，然后点击工具栏中的插入图像图标，如图三所示。在随后弹出的对话框中选择要插入的图片，如图四所示，或者在 URL处输入网络地址，如图四中 2 处。点击确定后，又弹出了一个图像标签辅助功能属性对话框，在“替换文本”栏中输入图片的注解文字，如：LOGO，XXX网站等，然后点击确定，如图五

13、。图片插入成功！如果需要调整图片，只需要点中它，在属性面板中修改即可。3、插入标题LOGO 添加完毕，下面就是添加标题和内容了。在 head 的 Div 后添加标题，点击工具栏中文本标签中的标题2（h2）按钮插入标题，如图六，然后在标题2 中输入【分类名称一】。4、添加文字链接接下来，要给分类一添加一些内容。但给它添加内容之前，也要先给它添加一个“外壳”，所以重复第一步骤中插入Div 的操作，只不过这次不要在ID 中填入head，而改成在“类”中选择class 或填入 list。然后将 Div 中自动添加的文字删除，输入链接文字，输入完毕后按Shift+Enter键添加一个折行标记 。这样做是

14、让文本强制折行，避免由于手机屏幕过窄而造成错位，同理，下面每行宽度最好不超过200 像素，都要添加折行标记。然后将全选文字全选，在属性面板中添加链接，目标一栏中留空不填，因为一般的手机网页都是在本页刷新的，所以保留。重复以上操作，继续添加链接数条。5、其它按照以上 3-4 步操作，在页面中添加一些内容后你会发现，制作手机网页真的和普通网页没什么大区别，只不过需要稍微注意一下制作习惯而已。所以，诸如搜索框、版权信息的内容就不需要再介绍了吧。再者，您也许也发觉了，这篇文章中所用到的Class 和 ID 没有几个，都是上篇文章 CSS里给出的，可见用 Xhtml MP 语言实在很容易。第四章WML

15、基础知识1、WML 使用的标签类似 Html，但是语法更严格且遵守 XML 1.0 标准；2、WML 页面的扩展名是 *.WML，就像 HTML 页面的扩展名是 *.HTML 一样，这个在前面的文章中提过；3、WML 语言的源代码内区分大小写和 是不同的，标签必须正常关闭，否则就会报错甚至无法显示。WML 基础语法1、卡片和卡片组：WML 页面叫做卡片组（DECK）。卡片组是由一系列的卡片（CARD）构成的，卡片之间通过链接联系。2、页面基本结构：和 Html 语言一样，完整的 WML 页面也是从文档声明开始的，具体结构如下：Wap页面测试！http:/ Wap页面测试！Div+css WML

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

17、机 WML 语言的文章中简单介绍了WML 的基础知识和基础语法，这篇文章中将讲些更加实质性的内容：WML 网页中的段落、换行、文本格式化、表格、图像等内容。一、段落和换行WML 中的段落和换行与Html 中的段落和换行写法相同，都是标签和 ，而且都是需要关闭的。段落文字 段落文字 段落文字 二、文本格式化文本格式化可没有硬盘那么严重，其实就是将它们定义各种格式而已，比如加粗字体、斜体、下划线等等。强调emphasized 和 斜体italic 加强strong 和 粗体bold 下划线 underline 增大字体 big 缩小字体 small 有人会说强调和斜体效果不是一样吗？为什么要分开来

18、两种标签，加强和粗体也是。这一点我曾在xhtml 文本格式和特殊字符详解中详细将结果，有兴趣的朋友可以去看看。三、表格WML 中的表格和 Html 中的表格制作方法也大同小异。单元格 1 单元格 2 单元格 3 从上面的代码中可以看出，WML 和 Html 在文本方面没有多大的区别。其实这个原因是他们本质上都遵守 XML 1.0 标准。第六章本篇文章继续上文的 WML 文本代码，继续介绍链接和插入图像。四、链接在 Html 语言中，链接的标签是，但再 WML 中链接却有两个标签，他们是和。标签强调的是“任务”，使用它的时候要跟随一些动作一起执行（比如“go”和“refresh”等）。下一页 上

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

20、tml 中十分相似。六、输入框输入框可以让用户输入信息，起到交互效果。和 Html 中一样，都是使用 标签：姓名:年龄:性别:七、单选框和复选框同理，在 Html 中也有单选和复选的表单内容之分，在WML 中也存在。比如单选框的代码如下：HTML 教程 XML 教程 WAP 教程 不要奇怪，虽然 标签和 在 Html 语言中会显示为下拉菜单选项，但在 WML 语言的浏览器中会显示成单选框，这是与Html 的区别。而复选框也是在它的基础上稍加定义而成的：HTML 教程 XML 教程 WAP 教程 没错，仅仅在 处添加了multiple=true就使单选框变成了复选框。八、Fieldset控件组为

21、了让表单显得整齐，我们常常在其外面加上一段标明区域的代码fieldset，Html 中也有这个做法。比如：标题:价格:WML 中基本的表单元素大概只有那么多，虽然没有Html 中那样形式多样，但也够用了。第八章九、任务动作在前面介绍 WML 语言的链接标签 时层提到过 和几个任务，它们都是WML 中的典型任务动作。本文就对它们进行简单介绍。任务(task)定义了事件发生时所执行的动作，比如在输入一个卡片或选择一个链接之类的时间发生时。分别有：Go任务、Prev 任务、Refresh 任务、Noop 任务。它们各自的含义如下：表示切换到新卡片的动作。规定不做任何事情。用于覆盖卡片组级别的元素。表

22、示后退到前面的卡片的动作。刷新一些指定的卡片变量。如果有变量显示在屏幕上，此任务也刷新屏幕。使用方法：跳转到测试页面 返回前页 刷新本页 上面的例子使用 标签向卡片添加了一个 刷新本页 链接。当用户点击该链接时，它会刷新页面，同时变量 x 的值将被设置为 30。上面的例子使用 标签向卡片添加一个 Back 链接。当用户点击这个Back 链接时，他被带回前面的卡片。但是 标签阻止了这个操作；当用户点击 Back 时，不会发生任何事情。十、计时器除了上面所讲的任务动作等，WML 中还有一个特色标签timer 计时器。利用它可以制作倒数计时器，时间单位是一秒的十分之一。下面的例子将用 5 秒来显示一条消息，然后切换到文件 test.wml：提示文字 到这里，WML 的基本语法已经介绍的差不多了，再往下就是WML 中的变量内容，一般网页制作者用得不多，所以暂且不做介绍了，感兴趣的朋友可以自己查阅相关资料。