1. 基本手機網頁設計

1.1 wap端的網站表頭

wap端的網站，寫的時候首先注意表頭，因為是手機端的，所以和我們平常用的web端頁面的不一樣，表頭為：

1.2 盡量少使用水平滾動。

水平滾動除了比較費時之外，用戶還將難以判斷他們在整個頁面中的位置。如果可能，設計的內容不要寬于或長于目標設備的顯示屏。盡量保證一行出現14個字符，或者用<br/>換行，或者設寬為100%，以便內容會根據用戶手機屏幕的大小自適應往下排。

1.3 避免過多使用文本強調屬性，如粗體，斜體和下劃線等，因為這降低了小顯示屏上內容的可讀性。

1.4 盡量少用float。

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

1.5 為了手機的流量，提倡盡量少用背景圖

另外，有背景色的白字在部分手機上也是不支持的，故少用此效果

1.6 刪除代碼內不必要的空白區和代碼內的注釋

確保代碼內沒多余的空白區非常重要。雖然空白區在屏幕上是不可見的。但然要被處理，因為瀏覽器要對空白區進行分析、排版、css分配和顯示等。XHTML代碼內注釋數量盡量減少，以使代碼盡可能地緊湊。

1.7 使用內部樣式表。

一般而言，雖然使用外部樣式表無論如何都有可能把樣式從標記語言中分離出來，這是一種好的方法，但應注意權衡考慮。如果樣式定義包含在XHTML代碼中，則XHTML頁面的顯示就更快。

但是外部樣式表的使用提供一種在整個服務中更改樣式的便利方法。在整個服務器中應該使用相同的外部樣式表已避免把多個樣式表下載到電話上。外部樣式表僅需下載一次并能夠保存在高速緩存器中。

所以我們盡量寫在xhtml里面，把一些相同的通用的建一個外部樣式表。這樣便于更快的打開手機頁面。

1.8 謹慎使用表格。

因為手機上盡量不讓用float布局，那我們為了方便布局，大部分都使用table來布局。

如果要用嵌套表格，當明確指定子表格的寬度時。開發人員應避免用子表格寬度的一定比例來指定其父表格的寬度。因為設備具有不同的屏幕尺寸，所以百分比不一定能夠表示相同數量的像素。所以我們在表格中要使用絕對寬度，注意必須確保表格的總寬度與所有列的寬度加上邊框和單元格間隔的總和是一樣的。

1.9 盡可能減少圖像數量和減小圖像容量大小。

頁面上的沒一幅圖像就產生一次獨立的來回。這反過來使整個頁面的現實速度減慢。因此建議在全部服務中各個頁面使用相同的圖像，那么一個特定的圖像只需下載一次且能夠保存到高速緩存器中。

1.10 定義圖片的高度和寬度屬性。

在標記語言中明確地指定圖像的高度和寬度，以使瀏覽器為圖像預留適當的空間。這不影響XHTML頁面的完整下載和處理時間，但卻大打改善用戶的感受，因為在下載圖像之前用戶可瀏覽頁面。

例：<img src="images/001.gif" width="175" height="41"/>

1.11 網頁文檔使用擴展名命名為 " .xhtml"

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

1.12 使用WCSS還是CSS？

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

1.13 網頁大小限制

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

1.14 網頁之間的空隙。

網頁之間的空隙我們一般用空格表示，因為手機中不會說文字之間有太大的距離，所以一般用空格" "表示，或者margin和padding值也可以用，但最好不要超過10px。

1.15 避免空值屬性

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