Dreamweaver CC 2014如何自定義導航圖標？

自定義導航圖標

【操作步驟】

第1步，啟動Dreamweaver CC,選擇“文件” | “新建”命令，打開“新建文檔”對話框，在該 對話框中選擇“啟動器模板”選項，設置“示例文件央”為“Mobile起始頁”，“示例頁”為“jQuery Mobile (本地）”，“文檔類型”為HTML5,然后單擊“確定”按鈕，完成文檔的創(chuàng)建操作。

第2步，按Ctri+S快捷鍵，保存文檔為index.html。切換到代碼視圖，清除第2~4頁審器結構， 保留第1個Page容器，在容器中添加一個data-role屬性為header &<div>標簽，定義標題欄結構。定 義標題名稱為“播放器”，在標題欄中添加一個導航結構。使用da丨a-role="navbar”屬性定義導航欄容 器，使用data-iconpos="Left屬性設置導航欄按鈕圖標位于按鈕文字的左側，然后在導航欄中添加3 個導航列表項固，疋義3個按鈕，設置3個按鈕圖標為自定義data-icon=”custom"。

第3步，清除內容容器內的列表視圖容器，添加一個導航欄。使用data-iconpos="top”屬性設置導 航欄按鈕圖標位于按鈕文字的頂部，然后在導航欄中添加4個導航列表項目，定義4個按鈕，設置4 個按鈕圖標為自定義，即data-icon="custom”。

第4步，把光標置于內容容器尾部，選擇“插入” I “圖像” I “圖像”命令，在內容客器內導航欄后面插入圖像images/1.png,定義一個類樣式w100,設置width為100%，綁定類樣式到圖像標 簽上。

第5步，自定義按鈕圖標。在文檔頭部位置使type="text/css">標簽定義內部樣式表，定 義一個類樣式play,在該類別下編寫ui-icon類樣式。ui-icon類樣式有兩行代碼，第一行通過background 屬性設置自定義圖標的地址和顯示方式，第二行通過background-size設置自定義圖標顯不的長度與寬度。

第6步，以同樣的方式定義pause、stop、begin、back、forward和end，除了背景圖像URL不同外，聲明的樣式代碼基本相同，如下所示。最后，把這些類樣式綁定到對應的按鈕標簽上，如圖

第7步，在文檔頭部的內部樣式表中，重寫自定義圖標的基礎樣式，清除默認的陰影和圓角特效, 代碼如下所示，然后為導航欄容器綁定custom類樣式，如圖所示。如果不清楚默認的圓角陰影 特效，則顯示效果如圖右圖所示。

第8步，在頭部位置添加如下元信息，定義視圖寬度與設備屏幕寬度保持一致。

第9步，完成設計之后，在移動設備中預覽該index.htm丨頁面，可以看到如圖左圖所示的 :自定義導航按鈕效果。