手机网页开发docx.docx

手机网页开发docx.docx

《手机网页开发docx.docx》由会员分享，可在线阅读，更多相关《手机网页开发docx.docx（16页珍藏版）》请在冰豆网上搜索。

手机网页开发docx

您所查看的文章来源于阿邦教育

作者：

黄超

第零章

现在的互联网，可以说是名副其实的移动互联网。

大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。

于是，手机网页的制作需求也变多了。

这篇文章就简单的介绍一下制作手机网页的基础知识。

首先，如果想制作wap网页，先要确定你的wap站的版本，是wap1.2还是wap2.0。

只有先确定好这个内容，才能继续下面的制作工作。

之所以要分别这两个版本，是因为它们所使用的网页语言的标准是不同的，

wap1.2采用的WM语言，2.0采用的则是XhtmlMP语言。

WM语言是无线标记语言（WirelessMarkupLanguage）的缩写，它是一种从

HTML继承而来的标记语言，但是WML基于XML，因此它较HTML更严格。

XhtmlMP是XhtmlMobileProfile的缩写，它是wap2.0的标记语言，属于Xhtml的一种，较之WM又先进了许多，它也可以引用外部CSS进行修饰，可以达到和普通网页浏览器相近的浏览效果。

在XhtmlMP没有出现之前，开发者们只能使用WM创建wap网站。

虽然XhtmlMP看起来更简单、也更美观，但仍有许多大型网站仍使用wap1.2的WM制作手机站点，目的就是为了兼容老版本手机，比如手机新浪网、网易手机版等。

分清自己使用的wap版本和语言后，还需要知道一些其它知识：

1、虽然采用XhtmlMP语言编写，写法也和Xhtml语言相似，但wap站的页面扩展名却是*.wml结尾，不是*.html。

2、使用Dreamweaver就可以利用XhtmlMP语言制作wap页面，在新建页面时将文档类型选为xhtml-mobile1.0，其它制作页面方法和制作Xhtml普通页面大同小异。

如果您问我您的wap站偏要使用wap1.2标准制作网站该怎么办?

我的答案有两个，一好一坏，坏的是您需要学习一些新的语言标记方法；好的是

您又掌握了一门新技能。

关于WM和XhtmlMP的制作方法，将在以后的文章中介绍。

第一章

▼W耳...nwmru

在上篇文章中已经说过，手机网站有两个版本，Wap1.2和Wap2.0,它们使用的

网页语言也不同，Wap1.2使用Wm语言，Wap2.0使用XhtmlMP语言。

Wm语言和Html语言有颇多不同之处，所以若要用它编写手机网页需要重新学习一下Wml

语言。

而Xhtml语言和普通网页的Xhtml语言十分相似，如果已经掌握Xhtml语言，那么再做XhtmlMP的手机网页就轻而易举了。

既然这样，我们就从简单处入手，先以实例讲解用XhtmlMP制作手机网页的步

骤，然后再分部分讲解Wm语言制作手机网页的方法。

制作手机网页最好先准备三样东西：

网页设计图、Dreamweave软件和Opera浏览器。

网页设计图就是网页未来的摸样，必不可少；用XhtmlMP语言进行手机网页制作和普通网页制作方法一样，使用Dreamweaver即可；而Opera则对手机

网页有很好的支持，可以明确指出网页中的错误。

有了这三样，就可以开始制作了。

下面正式进入XhtmlMP手机网页的制作方法步骤是，由于篇幅可能过长，所以本文先只介绍新建网页步骤。

一、新建手机网页

1、新建手机网页的方法和新建普通网页相同，详细步骤可以参见原来的文章。

新建手机网页，只有一个地方不同，就是在打开Dreamweaver后，在新建网页弹出窗口的文档类型处选择“XhtmlMobile1.0”，然后点击确定，如图一所示。

2、新建网页后，页面中出现了代码网页源代码如下：

DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN"

"http:

//www.wapforum.org/DTD/xhtml-mobile10.dtd">

//www.w3.org/1999/xhtml">

和普通网页不同的只有文档类型的声明，普通网页是

xhtml1-transitional.dtd，而它是xhtml-mobile10.dtd，它定义了网页的解析

标准。

3、保存手机网页。

上篇文章页也说过了，手机网页是以wml为文件结尾的，所

以应该将网页保存为wml文件。

但是，如果使用Dreamweaver制作wml网页会出现一个问题，就是在编辑wml文件时Dreamweaver工具栏的按钮都变成灰色不可点击了，出现这种状况只能考手写代码制作网页了，这对于高手来说无所谓，但

对于新手似乎有些难度。

所以通常情况下我都会将手机网页先保存成html格式

文件，待制作完成后再另存为wml文件。

所以这里直接将网页保存为index.html即可。

Wap2.0手机网站的网页语言是XhtmlMP。

一提起Xhtml，就绝对离不开Div和

CSS在上篇文章讲到了新建手机网页，下面继续介绍链接CSS文件的方法。

CSS文件链接方法和定义方法

和普通网页相同，在使用Dreamweave嗽件时，链接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:

Opx;

padding:

0px;

line-height:

18px;

}

img{

border:

0;

}

h1,h2,h3,div,li,p{

margin:

0;

padding:

2px2px;

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:

3px005px;

}

#footer{

border-top:

2px#FD6301solid;

border-bottom:

1px#dddsolid;

margin:

15px010px0;

padding:

5px;

}

其中，链接a标签的属性可以不定义，直接使用浏览器默认颜色，这里仅用于美化。

h1、h2作为标题使用，list是列表内容区域，footer是页脚的版权信息。

手机网页中需要用CSS定义的内容基本上就这些，如果以后有用到其它内容，将继续补充。

第三章

LIILF

经过新建网页、链接CSS文件几个简单步骤，一个手机网页的模型已经初步建立了。

接下来就是为这个页面添加更多的内容元素，本文将介绍插入图片、标题、文字链接等方法。

一般的手机网页的首页顶部都有一个logo图片或者广告图片，然后下面依次是“分类标题一内容；分类标题一内容；版权信息；”等，我们也按照这个结构进行制作。

三、插入内容

1、插入Div

首先是在页面顶部插入图片，用Dreamweaver插入图片，点击插入图片图标，然后选择要插入的图标即可。

但是，在这之前要先给这个图片加个“外壳”，就是所谓的Div容器，也就是插入一个Div。

具体操作方法：

在工具栏中点击“插入Div标签”按钮，如图一，随后在弹出的对话框的ID中填入“head”，如图二

所示。

其实，在上篇文章《链接CSS文件》中已经将是网页中可能用到的CSS罗列出来，但没有这个head的ID的CSS内容，现在添加的Div使用了head这个ID，但并不用给它做任何定义，仅仅为了以后方便程序调用才给它添加这个ID。

2、插入图片

插入Div后，删除Div中自动添加的文字，然后点击工具栏中的插入图像图标，如图三所示。

在随后弹出的对话框中选择要插入的图片，如图四所示，或者在URL处输入网络地址，如图四中2处。

点击确定后，又弹出了一个图像标签辅助功能属性对话框，在“替换文本”栏中输入图片的注解文字，如：

LOGOXXX网站等，然后点击确定，如图五。

图片插入成功！

如果需要调整图片，只需要点中它，在属性面板中修改即可。

3、插入标题

LOGO添加完毕，下面就是添加标题和内容了。

在head的Div后添加标题，点击工具栏中文本标签中的标题2（h2）按钮插入

标题，如图六，然后在标题2中输入【分类名称一】。

4、添加文字链接

接下来，要给分类一添加一些内容。

但给它添加内容之前，也要先给它添加一个

“外壳”，所以重复第一步骤中插入Div的操作，只不过这次不要在ID中填入

head，而改成在“类”中选择class或填入list。

然后将Div中自动添加的文字删除，输入链接文字，输入完毕后按Shift+Enter键添加一个折行标记＜br/＞。

这样做是让文本强制折行，避免由于手机屏幕过窄而造成错位，同理，下面每行宽度最好不超过200像素，都要添加折行标记＜br/＞。

然后将全选文字全选，在属性面板中添加链接，目标一栏中留空不填，因为一般的手机网页都是在本页刷新的，所以保留。

重复以上操作，继续添加链接数条。

5、其它

按照以上3-4步操作，在页面中添加一些内容后你会发现，制作手机网页真的和普通网页没什么大区别，只不过需要稍微注意一下制作习惯而已。

所以，诸如搜索框、版权信息的内容就不需要再介绍了吧。

再者，您也许也发觉了，这篇文章中所用到的Class和ID没有几个，都是上篇

文章CSS里给出的，可见用XhtmlMP语言实在很容易。

第四章

WM基础知识

1、WM使用的标签类似Html，但是语法更严格且遵守XML1.0标准；

2、WM页面的扩展名是*.WML，就像HTML页面的扩展名是*HTML—样，这个在前面的文章中提过；

3、WM语言的源代码内区分大小写＜p＞和＜卩＞是不同的，标签必须正常关闭，否则就会报错甚至无法显示。

WM基础语法

1、卡片和卡片组：

WM页面叫做卡片组（DEC）卡片组是由一系列的卡片（CAR