《手机网页开发》由会员分享,可在线阅读,更多相关《手机网页开发(18页珍藏版)》请在金锄头文库上搜索。
1、您所查看的文章来源于阿邦教育作者:黄超现在的互联网,可以说是名副其实的移动互联网。大家不仅可以利用无线网卡随 处随地上网,还可以直接利用手机浏览网页、下载文件,而且现在的无线运营商 也正在大力发展无线网络、扩展手机上网带宽。于是,手机网页的制作需求也变多了。这篇文章就简单的介绍一下制作手机网页 的基础知识。首先,如果想制作wap网页,先要确定你的wap站的版本,是wapl.2还是wap2.0。 只有先确定好这个内容,才能继续下面的制作工作。之所以要分别这两个版本,是因为它们所使用的网页语言的标准是不同的, wapl.2采用的WML语言,2.0采用的则是Xhtml MP语言。WML语言是无线标记
2、语言(Wireless Markup Language)的缩写,它是一种从 HTML继承而来的标记语言,但是WML基于XML,因此它较HTML更严格。Xhtml MP是Xhtml Mobile Prof ile的缩写,它是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站偏要使用wapl.2标准制作网站该怎么办?我的答案有两个,一好一坏,坏的是您需要学习一些新的语言标记方法;好的是 您又掌握了一门新技能。关于WML和Xhtml MP的制作方法,将在以后的文章中 介绍。
4、第一章圈_ Mn-H. nv 知 c在上篇文章中已经说过,手机网站有两个版本,Wapl.2和Wap2.0,它们使用的 网页语言也不同,Wapl.2使用Wml语言,Wap2.0使用Xht ml MP语言。Wml语言 和Html语言有颇多不同之处,所以若要用它编写手机网页需要重新学习一下Wml 语言。而Xhtml语言和普通网页的Xhtml语言十分相似,如果已经掌握Xhtml 语言,那么再做Xhtml MP的手机网页就轻而易举了。既然这样,我们就从简单处入手,先以实例讲解用Xhtml MP制作手机网页的步 骤,然后再分部分讲解Wml语言制作手机网页的方法。制作手机网页最好先准备三样东西:网页设计图、
5、Dreamweaver软件和Opera浏 览器。网页设计图就是网页未来的摸样,必不可少;用Xhtml MP语言进行手机 网页制作和普通网页制作方法一样,使用Dreamweaver即可;而Opera则对手机网页有很好的支持,可以明确指出网页中的错误。有了这三样,就可以开始制作 了。下面正式进入Xhtml MP手机网页的制作方法步骤是,由于篇幅可能过长,所以 本文先只介绍新建网页步骤。、新建手机网页1、新建手机网页的方法和新建普通网页相同,详细步骤可以参见原来的文章。新 建手机网页,只有一个地方不同,就是在打开Dreamweaver后,在新建网页弹出 窗口的文档类型处选择“Xhtml Mobile
6、 1.0”,然后点击确定,如图一所示。2、新建网页后,页面中出现了代码网页源代码如下:html xmlns二http:/www.w3.org/1999/xhtml 无标题文档和普通网页不同的只有文档类型的声明,普通网页是xhtmll-transitional.dtd,而它是xhtml-mobile10.dtd,它定义了网页的解析 标准。3、保存手机网页。上篇文章页也说过了,手机网页是以wml为文件结尾的,所 以应该将网页保存为wml文件。但是,如果使用Dreamweaver制作wml网页会出 现一个问题,就是在编辑wml文件时Dreamweaver工具栏的按钮都变成灰色不可 点击了,出现这种状
7、况只能考手写代码制作网页了,这对于高手来说无所谓,但 对于新手似乎有些难度。所以通常情况下我都会将手机网页先保存成html格式 文件,待制作完成后再另存为wml文件。所以这里直接将网页保存为即可。AW- *第二章 l IEl ?Wap2.0手机网站的网页语言是Xhtml MP。一提起Xhtml,就绝对离不开Div和 CSS。在上篇文章讲到了新建手机网页,下面继续介绍链接CSS文件的方法。二、CSS文件链接方法和定义方法和普通网页相同,在使用Dreamweaver软件时,链接CSS文件只需要在软件右侧 的CSS面板中点击“附加样式表”,然后选择CSS文件即可。如果还没有CSS文件,就点击“新建C
8、SS规则”按钮新建一个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:。;h1,h2,h3,div,li,p margin:。;padding:2px 2px;font-size:12pxh1 background:#7acdea;h2 background:#d2edf6;input font-size:12px;a font-size:12px;a:link,a:
10、visi 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标签的属性可以不定义,直接使用浏览器默认颜色,这里仅用于美 化。hl、h2作为标题使用,list是列表内容区域,footer是页脚的版权信息。手机网页中需要用CSS定义的内容基本上就这些,如果以后有用到其它内容,将 继续补充。第三章经过新
11、建网页、链接css文件几个简单步骤,一个手机网页的模型已经初步建立 了。接下来就是为这个页面添加更多的内容元素,本文将介绍插入图片、标题、 文字链接等方法。一般的手机网页的首页顶部都有一个logo图片或者广告图片,然后下面依次是 “分类标题一内容;分类标题一内容;版权信息;”等,我们也按照这个结构进 行制作。三、插入内容1、插入Div首先是在页面顶部插入图片,用Dreamweaver插入图片,点击插入图片图标,然 后选择要插入的图标即可。但是,在这之前要先给这个图片加个“外壳”,就是 所谓的Div容器,也就是插入一个Div。具体操作方法:在工具栏中点击“插入 Div标签”按钮,如图一,随后在弹
12、出的对话框的ID中填入“head”,如图二 所示。其实,在上篇文章链接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 键添加一个折行标记br /。这样
14、做是让文本强制折行,避免由于手机屏幕过窄 而造成错位,同理,下面每行宽度最好不超过200像素,都要添加折行标记br /。然后将全选文字全选,在属性面板中添加链接,目标一栏中留空不填,因为一般 的手机网页都是在本页刷新的,所以保留。重复以上操作,继续添加链接数条。5、其它按照以上3-4步操作,在页面中添加一些内容后你会发现,制作手机网页真的和 普通网页没什么大区别,只不过需要稍微注意一下制作习惯而已。所以,诸如搜 索框、版权信息的内容就不需要再介绍了吧。再者,您也许也发觉了,这篇文章中所用到的Class和ID没有几个,都是上篇 文章CSS里给出的,可见用Xhtml MP语言实在很容易。第四章WML基础知识1、WML使用的标签类似Html,但是语法更严格且遵守XML 1.0标准;2、WML页面的扩展名是*.WML,就像HTML页面的扩展名是*.HTML 样,这 个在前面的文章中提过; 3、WML语言的源代码内区分大小写p和P是不同的,标签必须正常关闭,否 则就会报错甚至无法显示。WML基础语法1、卡片和卡片组:WML页面叫做卡片组(DECK)。卡片组是由一系列的卡片(CARD) 构成的,卡片之间通过链接联系。2、页面基本结构:和Html语言一样,完整的WML页面也是从文档声明开始的, 具