Dreamweaver CC如何定義標題欄?

定義標題欄導航

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

第2步，按Ctrl+S快捷鍵，保存文檔為inciex.html。此時，Dreamweaver CC會彈出對話框提示 保存相關的框架文件。

第3步，切換到代碼視圖，清除第3、4頁容器結構，保留第1、2個Page容器，修改第一個容器的ID值為a,第二個容器的ID值為b,同時清除兩個容器中標題欄和內容欄中所有內容，刪除腳 注欄，代碼如下：

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

第5步，添加內容欄，在內容欄中插入圖像，定義類樣式wlOO,設計寬度為100%顯示，然后為每個內容欄中插入的圖像應用wlOO類樣式，代碼如下，詳細設置如下圖。

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

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