在Dreamweaver?中如何定義標(biāo)題欄？

定義標(biāo)題欄

第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頁為詳細(xì)頁視圖。在站點(diǎn)中新建了 jquery-mobile文件夾，包括了 所有需要的相關(guān)技術(shù)文件和圖標(biāo)文件。

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

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

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