Dreamweaver CC如何定義標(biāo)題欄?

定義標(biāo)題欄導(dǎo)航

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

第2步，按Ctrl+S快捷鍵，保存文檔為inciex.html。此時(shí)，Dreamweaver CC會(huì)彈出對(duì)話框提示 保存相關(guān)的框架文件。

第3步，切換到代碼視圖，清除第3、4頁容器結(jié)構(gòu)，保留第1、2個(gè)Page容器，修改第一個(gè)容器的ID值為a,第二個(gè)容器的ID值為b,同時(shí)清除兩個(gè)容器中標(biāo)題欄和內(nèi)容欄中所有內(nèi)容，刪除腳 注欄，代碼如下：

第4步，為標(biāo)題欄添加data-position屬性，設(shè)置屬性值為inline,然后在標(biāo)題欄中添加標(biāo)題和按 鈕，代碼如下。使用clata-position="inlinen定義標(biāo)題欄行內(nèi)顯不，使用data-icon屬性定義按鈕顯示在 標(biāo)題欄指向箭頭，其值為arrow-丨表示向左， arrow-r表示向右。

第5步，添加內(nèi)容欄，在內(nèi)容欄中插入圖像，定義類樣式wlOO,設(shè)計(jì)寬度為100%顯示，然后為每個(gè)內(nèi)容欄中插入的圖像應(yīng)用wlOO類樣式，代碼如下，詳細(xì)設(shè)置如下圖。

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

第7步，在移動(dòng)設(shè)備中預(yù)覽該首頁，單擊“下一張”按鈕， 即可顯示下一張視圖，顯示效果如圖17.30右圖所示。單擊“上一張”按鈕，將返回顯示。