手机网页开发管理知识分析

您所查看的文章来源于阿邦教育作者：黄超第零章现在的互联网，可以说是名副其实的移动互联网。大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。于是，手机网页的制作需求也变多了。这篇文章就简单的介绍一下制作手机网页的基础知识。首先，如果想制作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中那样形式多样，但也够用了。第八章