一般的手機網(wǎng)頁的首頁頂部都有一個logo圖片或者廣告圖片，然后下面依次是“分類標題—內(nèi)容；分類標題—內(nèi)容；版權(quán)信息；”等，我們也按照這個結(jié)構(gòu)進行制作。

三、插入內(nèi)容

1、插入Div 首先是在頁面頂部插入圖片，用Dreamweaver插入圖片，點擊插入圖片圖標，然后選擇要插入的圖標即可。但是，在這之前要先給這個圖片加個“外殼”，就是所謂的Div容器，也就是插入一個Div。具體操作方法：在工具欄中點擊“插入Div標簽”按鈕，如圖一，隨后在彈出的對話框的ID中填入“head”，如圖二所示。 其實，在上篇文章《鏈接CSS文件》中已經(jīng)將是網(wǎng)頁中可能用到的CSS羅列出來，但沒有這個head的ID的CSS內(nèi)容，現(xiàn)在添加的Div使用了head這個ID，但并不用給它做任何定義，僅僅為了以后方便程序調(diào)用才給它添加這個ID。

2、插入圖片 插入Div后，刪除Div中自動添加的文字，然后點擊工具欄中的插入圖像圖標，如圖三所示。

 點擊確定后，又彈出了一個圖像標簽輔助功能屬性對話框，在“替換文本”欄中輸入圖片的注解文字，如：LOGO，XXX網(wǎng)站等，然后點擊確定，如圖五。圖片插入成功！如果需要調(diào)整圖片，只需要點中它，在屬性面板中修改即可。

3、插入標題

LOGO添加完畢，下面就是添加標題和內(nèi)容了。

在head的Div后添加標題，點擊工具欄中文本標簽中的標題2（h2）按鈕插入標題，如圖六，然后在標題2中輸入【分類名稱一】。

4、添加文字鏈接

接下來，要給分類一添加一些內(nèi)容。但給它添加內(nèi)容之前，也要先給它添加一個“外殼”，所以重復第一步驟中插入Div的操作，只不過這次不要在ID中填入head，而改成在“類”中選擇class或填入list。

然后將Div中自動添加的文字刪除，輸入鏈接文字，輸入完畢后按Shift+Enter鍵添加一個折行標記<br />。這樣做是讓文本強制折行，避免由于手機屏幕過窄而造成錯位，同理，下面每行寬度最好不超過200像素，都要添加折行標記<br />。

然后將全選文字全選，在屬性面板中添加鏈接，目標一欄中留空不填，因為一般的手機網(wǎng)頁都是在本頁刷新的，所以保留。
 

重復以上操作，繼續(xù)添加鏈接數(shù)條。

5、其它

按照以上3-4步操作，在頁面中添加一些內(nèi)容后你會發(fā)現(xiàn)，制作手機網(wǎng)頁真的和普通網(wǎng)頁沒什么大區(qū)別，只不過需要稍微注意一下制作習慣而已。所以，諸如搜索框、版權(quán)信息的內(nèi)容就不需要再介紹了吧。

再者，您也許也發(fā)覺了，這篇文章中所用到的Class和ID沒有幾個，都是上篇文章CSS里給出的，可見用Xhtml MP語言實在很容易。