在Dreamweaver2014?中如何設(shè)置導(dǎo)航按鈕位置？

設(shè)置導(dǎo)航按鈕位置

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

第2步，按Ctrl+S快捷鍵，保存文檔為index.htrnl。切換到代碼視圖，清除第2~4頁容器結(jié)構(gòu)， 保留第一個(gè)Page容器’在容器中添加一個(gè)data-role屬性為header的<div>標(biāo)簽，定義標(biāo)題欄結(jié)構(gòu)。在 標(biāo)題欄中添加一個(gè)導(dǎo)航結(jié)構(gòu)。使用data-role="navbar"屬性定義導(dǎo)航欄容器，使用clata-iconpos="lefV" 屬性設(shè)置導(dǎo)航欄按鈕圖標(biāo)位于按鈕文字的左側(cè)，然后在導(dǎo)航欄中添加3個(gè)導(dǎo)航列表項(xiàng)目，定義3個(gè)按 鈕，第一個(gè)按鈕圖標(biāo)為data-icon="home"即顯示為首頁效果，并使用ui-btn-active類激活該按鈕樣式；第二個(gè)按鈕圖標(biāo)為data-icon="alert"，即顯示為警告效果；第三個(gè)按鈕圖標(biāo)為data-icon="info",即. 顯示為信息效果。

第3步，清除內(nèi)容容器內(nèi)的列表視圖容器，添加一個(gè)導(dǎo)航欄。使用data-iconpos="right"屬性設(shè)置 導(dǎo)航欄按鈕圖標(biāo)位于按鈕文字的右側(cè)’然后在導(dǎo)航欄中添加3個(gè)導(dǎo)航列表項(xiàng)目，定義3個(gè)按鈕，^一 個(gè)按鈕圖標(biāo)為data-ico="home"，即顯示為首頁效果；第二個(gè)按鈕圖標(biāo)為data-icon="alert"，即顯示為 警告效果；第三個(gè)按鈕圖標(biāo)為data-icon="info' 即顯不為彳自息效果。最后，選擇“插入|圖像| ‘‘圖像”命令，在導(dǎo)航欄后面插入圖像images/l.jpg，定義一個(gè)類樣式w100，設(shè)置width為100%， 綁定類樣式到圖像標(biāo)簽上。

第4步，清除腳注容器內(nèi)的標(biāo)題信息，添加一個(gè)導(dǎo)航欄。使用data-iconpos="bottom"屬性設(shè)置導(dǎo) 航欄按鈕圖標(biāo)位于按鈕文字的底部，然后在導(dǎo)航欄中添加3個(gè)導(dǎo)航列表項(xiàng)目，定義3個(gè)按鈕，第一個(gè) 按鈕圖標(biāo)為data-icon="home",即顯示為首頁效果；第二個(gè)按鈕圖標(biāo)為data-icon="alerf"，即顯示為警告效果；第三個(gè)按鈕圖標(biāo)為data-icon="info"，即顯示信息效果。

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

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