上海网站建设

上海网站建设

咨询热线:(021)51698180


HTML,CSS

上海网站建设RSS订阅  RSS订阅  新浪微博  新浪微博  上海网站建设客服  客服  获取报价  获取报价

XHTML MP教程(十六):XHTML MP 图片

XHTML MP 中显示图片

 
在 XHTML MP 中, <img> 标签被用于显示图片. 这和在 HTML 中是一样的. 如果因为诸如文件没被找到或图片格式不被支持等原因而不能显示图片, WAP 浏览器将会把 <img> 标签里 alt 属性指定的文本显示出来. <img> 标签中的 width 和 height 属性, 正如它们的名字所暗示的那样, 被用于指定图片显示区域的宽度和高度 ( 以像素为单位 ). 你可以利用这两个属性来调整图片在显示器上的大小.

包括老式的 WBMP 图片格式, WAP 2.0 无线设备可以支持运用在 web 上的普遍图片格式, 例如 GIF, 动态 GIF, JPG 和 PNG. 然而, 这些可被支持的格式因设备而异. 某些 WAP 2.0 无线设备只能支持以上这些图片格式的子集.

找出某种图片格式是否被某无线设备支持的一个简单方法是, 检查 HTTP 头中的 Accept, 就像我们在本 XHTML MP 教程里 "动态选择 MIME 类型" 章节中的做法一样 . 例如, 如果在 HTTP 头里可以找到 "image/gif", "image/jpg" 和 "image/png", 这就意味着这个无线设备支持 GIF, JPG  和 PNG 图片格式.

下面的例子演示了如何在 XHTML MP 里显示图片:
 
<?xml version="1.0"?>
<!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>
    <title>Image in XHTML MP</title>
  </head>
		
  <body>
    <p>
      <img src="smile.gif" alt="Smile" height="62" width="60" /><br/>
      Hello, welcome to our XHTML MP tutorial.
    </p>
  </body>
</html>
 
下面是上述 XHTML MP 代码在某些 WAP 浏览器上的显示结果:
 
XHTML MP教程(十六):XHTML MP 图片1

Sony Ericsson T610
XHTML MP教程(十六):XHTML MP 图片2

Nokia Mobile Browser 4.0
 
如果图片文件不存在, 同样 XHTML MP 代码的显示结果将变为:
 
XHTML MP教程(十六):XHTML MP 图片3

Sony Ericsson T610
XHTML MP教程(十六):XHTML MP 图片4

Nokia Mobile Browser 4.0
 

关于 XHTML MP 中大型图片的问题

 
许多 WAP 浏览器都没有水平滚动的功能. 因此, 如果图片的宽度比无线设备的显示屏宽的话, 许多 WAP 浏览器将会裁剪图片, 也就意味着你的 XHTML MP 页面, 对用户来说, 或许会看上去不那么美观和专业. 下面的例子展示了 XHTML MP 页面中的大型图片在某些移动电话浏览器上的显示效果:
 
<?xml version="1.0"?>
<!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>
    <title>Image in XHTML MP</title>
  </head>
		
  <body>
    <p>
      <img src="smileBig.gif" alt="Smile" height="159" width="160" /><br/>
      Welcome to our XHTML MP tutorial.
    </p>
  </body>
</html>
 
XHTML MP教程(十六):XHTML MP 图片5

 
XHTML MP教程(十六):XHTML MP 图片6

Sony Ericsson T610
XHTML MP教程(十六):XHTML MP 图片7

 
XHTML MP教程(十六):XHTML MP 图片8

Nokia Mobile Browser 4.0
 
另一个你不得不考虑的问题是, 图片大小将会影响你的移动因特网网站的性能. 用 <img> 的 width 和 height 属性把图片缩小并不会有助于提高性能,  因为图片文件的实际大小仍然相同.

还有, 较大的图片对于那些通过 GPRS 访问你的移动网站的用户来说, 会花费他们更多的钱, 因为手机网络运营商通过在他们的手机网络中传输的数据量向他们的 GPRS 服务订阅用户收取费用.
 
  1. 优化你的 XHTML MP 页面中的图片以保持图片较小至关重要. 以下是几种实现方式:用图片操作软件, 像 GIMP 和 Photoshop, 把图片的宽和高限制下来, 而不是发送一张大图片到无线设备上然后用 <img> 标签的 width 和 height 属性限制图片的显示大小.
  2. 如果图片是 GIF 文件, 你应该用一个小的调色板. 一个较小的调色板意味着更低的图片质量, 因此你要在二者之间取个平衡.
  3. 如果文件是 JPG 文件, 你应当用一个合适的压缩比率保存它们. 高的压缩比率将产生更小的文件, 但图片质量也更低. 因此, 你得在二者之间取个平衡.

另一种有助于提高你的移动网站性能的方式是使用多个部分消息. 正常情况下当用户请求一个包含图片的 XHTML MP 页面时, WAP 浏览器会首先下载 XHTML MP 文档, 然后再用独立的请求去下载图片. 这就意味着要下载整个 XHTML MP 页面, 要发送好几次请求. 多个部分消息允许你把 XHTML MP 文档和图片放在同一个返回中, 也就意味着整个 XHTML MP 页面可以用一个请求加载. 这减小了与服务器间的穿梭次数. 关于如何创建多部分消息的细节超出了本教程的范围. 如果你感兴趣的话, 你可以去网上搜索一下.
 
由花火网络整理 www.hahoo.cn 上海网站建设