在Dreamweaver?中如何定義標題欄？

定義標題欄

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

第2步，按Ctrl+S快捷鍵，保存文檔為index3.html。此時，Dreamweaver CC會彈出對話框提示 復(fù)制相關(guān)的框架文件。

第3步，在編輯窗口中，可以看到Dreamweaver CC新建了包含4個頁面的HTML5文檔，其中 第1個頁面為導(dǎo)航列表頁，第2~4頁為詳細頁視圖。在站點中新建了 jquery-mobile文件夾，包括了 所有需要的相關(guān)技術(shù)文件和圖標文件。

第4步，切換到代碼視圖，清除第2~4頁容器結(jié)構(gòu)，保留第一個Page容器，在容器中添加一個 data-role屬性為header的<&>標簽，定義標題欄結(jié)構(gòu)。在標題欄中添加一個<h1>標簽，定義標題， 將標題文本設(shè)置為“標題欄文本”，如圖所示。

每個視圖容器中只能夠有一個標題欄，通過添加一個Page容器的<div>標簽，在容器中添加一個 data-role屬性，設(shè)置屬性值為header,就可以在標題欄中添加標題、按鈕或者標題文本了。標題文本 一般應(yīng)包含在標題標簽中。

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