Dreamweaver CC 2014如何自定義導(dǎo)航圖標(biāo)？

自定義導(dǎo)航圖標(biāo)

【操作步驟】

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

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

第3步，清除內(nèi)容容器內(nèi)的列表視圖容器，添加一個(gè)導(dǎo)航欄。使用data-iconpos="top”屬性設(shè)置導(dǎo) 航欄按鈕圖標(biāo)位于按鈕文字的頂部，然后在導(dǎo)航欄中添加4個(gè)導(dǎo)航列表項(xiàng)目，定義4個(gè)按鈕，設(shè)置4 個(gè)按鈕圖標(biāo)為自定義，即data-icon="custom”。

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

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

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

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

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

第9步，完成設(shè)計(jì)之后，在移動(dòng)設(shè)備中預(yù)覽該index.htm丨頁(yè)面，可以看到如圖左圖所示的 :自定義導(dǎo)航按鈕效果。