前端设计

手机网页的制作方法一_新建手机网页

2013-08-20

手机网页的制作方法一_新建手机网页[点击放大]

手机网站有两个版本,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、新建网页后,页面中出现了代码网页源代码如下:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<TITLE>无标题文档</TITLE>
</head>
<body>
</BODY>
</HTML>

和普通网页不同的只有文档类型的声明,普通网页是xhtml1-transitional.dtd,而它是xhtml-mobile10.dtd,它定义了网页的解析标准。

3、保存手机网页。上篇文章页也说过了,手机网页是以wml为文件结尾的,所以应该将网页保存为wml文件。但是,如果使用Dreamweaver制作wml网页会出现一个问题,就是在编辑wml文件时Dreamweaver工具栏的按钮都变成灰色不可点击了,出现这种状况只能考手写代码制作网页了,这对于高手来说无所谓,但对于新手似乎有些难度。所以通常情况下我都会将手机网页先保存成html格式文件,待制作完成后再另存为wml文件。所以这里直接将网页保存为index.html即可。