上門一對一計算機家教
當前位置: 首頁 > 建站心得 >

手機網頁切圖及制作知識收集及注意事項

點擊: 時間:2013-07-24 來源:北京家教網
wap手機網頁css(wap css) 大部分手機現在都支持XHTML瀏覽器,這意味著我們只需在stylesheets的類型設置成handheld即 * { position: static !important; float: none !important; } 因為現行的手機的屏幕限制,沒有太多的空間去漂移,故提

 

  wap手機網頁css(wap css)

  大部分手機現在都支持XHTML瀏覽器,這意味著我們只需在stylesheets的類型設置成“handheld”即

  * {

  position: static !important;

  float: none !important;

  }

  因為現行的手機的屏幕限制,沒有太多的空間去漂移,故提倡用靜態布局和盡量少的用float(ucweb6.0目前還不支持float)

  為了手機的流量,提倡盡量少用背景圖background: none !important;

  另外,有背景色的白字在部分手機上也是不支持的,故少用此效果(ucweb6.0目前也不支持)

  解決Pocket PC 2003的Pocket IE內自動縮小

  Pocket IE到了Pocket PC 2003之后,讀取頁面的速度提升不少,終于到了實用階段。新版的Pocket IE對于超過螢幕寬度的圖形也會自動縮小,避免橫向卷軸的出現。

  自動縮圖的功能很不錯,但是卻沒有提供關閉的功能,造成原先在Pocket PC 2002上能夠全螢幕顯示的Flash影片(240×320),到了Pocket PC2003之后,自動會縮小。這個問題現在有解了,只要在html頁面上加上〈meta name="MobileOptimized" content="240"〉就可以了。

  XHTML MP 常用的 Meta 信息

  你可以用 標簽為你的 XHTML MP 文件指定一些常用的 meta 信息. 標簽應當被包含在 標簽之間. WAP 瀏覽器會忽略它不能理解的 meta 信息. 你可以在一個 XHTML MP 文件中指定任何種類的 meta 信息而不影響頁面的顯示效果.

  例如, 你或許想在你的 XHTML MP 文件中加入作者的名字而不在屏幕上顯示它.

  〈meta name="author" content="linlin"/〉

  XHTML MP 的緩存控制

  標簽的用途之一是控制緩存中一個 XHTML MP 文件的過期時間. 緩存是無線設備中的一些內存空間, 這些空間臨時存儲著從服務器上下載下來的 XHTML MP 文件. 如果 WAP 瀏覽器發現所請求的某個 XHTML MP 文件位于緩存中并且還沒有過期, WAP 瀏覽器將顯示緩存中的文件以最小化加載延遲. 如果你的 XHTML MP 頁面有對時間敏感的內容, 如財務數據, 你或許想把過期時間設置為一個較小的值甚至為 0, 以不至于使用戶稍后看到過期的 XHTML MP 頁面. 下面的 XHTML MP 例子展示了如何用 標簽將一個 XHTML MP 頁面的過期日期設置為 0.

  〈meta http-equiv="Cache-Control" content="no-cache"/〉

  或者是〈meta http-equiv="Cache-Control" content="max-age=0"/〉

  將一個 XHTML MP 文件的過期日期設置為 300 秒

  〈meta http-equiv="Cache-Control" content="max-age=300"/〉

  XHTML MP 中的間歇性刷新

  在 XHTML MP 中, HTTP 刷新可用于通知 WAP 瀏覽器間歇性刷新當前頁. 對于提供實時信息的移動互聯網瀏覽應用來說, 這是一個非常有用的功能. 在下面的 XHTML MP 代碼中, 頁面每 15 秒鐘自動被刷新一次. 要注意的是這個 XHTML MP 例子中需要 . 如果上述代碼沒被包含, WAP 瀏覽器將僅僅顯示緩存中的文檔的復本, 而不需要每次刷新都連接服務器.

  〈meta http-equiv="Cache-Control" content="no-cache"/〉

  〈meta http-equiv="refresh" content="15"/〉

  HTTP 刷新可用于通知 WAP 瀏覽器在一定時間后去另一個 URL. 你可以利用此特征把用戶重定向到另一個 XHTML MP 頁面或者創建一個幻燈片,如下例子15 秒鐘后把用戶重定向到 "hello_world_example1.xhtml".

  〈meta http-equiv="refresh" content="15;URL=hello_world_example1.xhtml"/〉

  但注意, 某些 WAP 瀏覽器是不支持 HTTP 刷新的.

  例外,幾個有用的meta信息

  〈meta id="viewport" name="viewport" content="width=240; user-scalable=0;" /〉

  〈meta http-equiv="Content-Type" content="text/html; charset=utf-8" /〉

  〈meta name="MobileOptimized" content="240" /〉

  viewport的meta標簽

  網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,并不允許縮放。

  〈meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"〉

  其中:

  width - viewport的寬度 height - viewport的高度

  initial-scale - 初始的縮放比例

  minimum-scale - 允許用戶縮放到的最小比例

  maximum-scale - 允許用戶縮放到的最大比例

  user-scalable - 用戶是否可以手動縮放

  這個標簽主要是用來控制搜索引擎抓取網站的頻率,告訴搜索引擎多長時間來網站抓取一次。假如我設置,那這樣搜索引擎就是7天來一次。使用這個標簽的網站,通常是因為網站數據量非常大,被搜索引擎過于頻繁的抓取,會占用過大的資源,影響網站的訪問。所以,希望搜索引擎不要天天過來,抓取過一次了,那么等7天后再來。一般的網站是不需要這個標簽的。

  wap2.0手機網頁的語言 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>第一個手機頁面例子〈/title〉

  〈/head〉

  〈body〉

  〈p〉你好. 歡迎來第一個手機頁面例子.〈/p〉

  〈/body〉

  〈/html〉

  

復制代碼

 

  XHTML MP 以序言 (prolog) 開頭, 該序言中含有 XML 聲明和 DOCTYPE 聲明.

  該序言組件并非 XHTML MP 的元素, 因此不應該把它關閉, 也就是, 你不應該給它們加結束標簽或用 /〉 結束它們.

  文檔的其余部分, 除了 HTML 中的 〈html〉 標簽不應該有 xmlns 屬性外, 與普通的 HTML 文檔相同.

  XHTML MP 必須包含 〈html〉,〈head〉, 〈title〉, 和 〈body〉 元素.

  XML 聲明與字符編碼格式:

  所有 XHTML MP 都是 XML 文檔. 因此, 文檔的開始總會有 XML 聲明. XML 聲明指定了文檔的 XML 版本. 文檔的字符編碼也可以在這里指定, 像這樣:

  〈?xml version="1.0" encoding="UTF-8"?〉

  上面一行表述了 XHTML MP 文檔的 XML 版本為 1.0, 字符編碼格式為 UTF-8. 如果 XHTML MP 文檔的編碼格式為 UTF-8 或 UTF-16, encoding 屬性可以省略.

  在XHTML MP 中, XML 聲明并非必需的組件. 然而, 如果 XML 聲明被省略的話, 將會導致一些 WAP 瀏覽器出問題. 例如, 一些 Sony Ericsson 的 WAP 瀏覽器, 當接收到的 MIME 類型為 text/html 時, 會利用 XML 聲明來區分 XHTML MP 和 IHTML (一個 NTT DoCoMo 定義的有專利的標記語言) 文檔: 如果文檔包含 XML 聲明, 它就是一個 XHTML MP 文檔, 否則它就是一個 IHTML 文檔.

  DOCTYPE 聲明:

  所有 XHTML MP 文檔都必須有 DOCTYPE 聲明. 該聲明應該放在 XML 聲明與 元素之間. 下面是 XHTML MP 的 DOCTYPE 聲明. 你可以直接將其復制并粘貼到你的 XHTML MP 中.

  〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉

  DOCTYPE 指定了 DTD (文檔類型定義) 的名字 和鏈接到 DTD 的 URL. DTD 包含了關于標記語言的語法信息. 它定義了什么元素和屬性可以在標記中使用和使用它們的規則. 驗證工具, 通過把你的 XHTML MP 文檔與 DOCTYPE 聲明中指定的 DTD 進行比較, 可用于檢查你的 XHTML MP 文檔是否遵守了 XHTML MP 語言的規則. 一些 IDE 集成了類似的審核工具.

  〈body〉 元素:

  〈body〉 元素用于實際內容的容器. 一個 XHTML MP 文件只能包含一個 〈body〉 元素, 文本不可直接被包含在 〈body〉〈/body〉 標簽對中. 例如, 下面的標記代碼在 XHTML MP 中是不正確的:

  〈body〉 你好. 〈/body〉

  要糾正上面的 XHTML MP 標記代碼, 文檔 body 中的文本必須被包含在其它元素, 如段落 (〈p〉〈/p〉), 列表 (〈ul〉〈li〉〈/li〉〈/ul〉 或 〈ol〉〈li〉〈/li〉〈/ol〉), 標題 (〈h1〉〈/h1〉, 〈h2〉〈/h2〉...), 等等, 之間. 下面的標記代碼在 XHTML MP 中是正確的:

  〈body〉〈p〉你好.〈/p〉〈/body〉

  手機網頁編碼需要遵循什么規范?

  遵循XHTML Mobile Profile規范,簡稱為XHTML MP,也就是通常說的WAP2.0規范。 XHTMLMP是為不支持XHTML的全部特性且資源有限的客戶端所設計的。它以XHTML Basic為基礎,加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其他元素和對內部樣式表的支持。和XHTML Basic相同,XHTML MP是嚴格的XHTML 1.0子集。

  網頁文檔推薦使用擴展名?

  推薦命名為xhtml,按WAP2.0的規范標準寫成html/htm等也是可以的。但少數手機對html支持的不好。

  為什么現今大多數的網站一行字數上限為14個中文字符?

  由于手持設備的特殊性,其頁面中實際文字大小未必是我們在CSS中設定的文字大小,尤其是在第三方瀏覽器中。例如Nokia5310,其內置瀏覽器 頁面內文字大小與CSS設定相符,但是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大于CSS設定。經測試,其文本大概在16px左右。 假如屏幕分辨率寬度為240px,去除外邊距,那么其一行顯示14個字以內,是比較保險(避免文本換行)的做法。

  使用WCSS還是CSS?

  WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集,去掉了一些不適于移動互聯網特性的屬性,并加入一些具有WAP特性的擴展(如-wap- input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,這些特殊的屬性擴展并不是很實用,所以在實際的項目開發當中,不推薦使用WCSS特有的屬性。

  避免空值屬性

  如果屬性值為空,在web頁面中是完全沒有問題的,但是在大部分手機網頁上會報錯。

  網頁大小限制

  建議低版本頁面不超過15k,高版本頁面不超過60k。

------分隔線----------------------------
30选5开奖查询