在Dreamweaver?中如何定義標(biāo)題欄?
定義標(biāo)題欄
第1步,啟動(dòng)DreamweaverCC,選擇“文件” | “新建”命令,打開“新建文檔”對(duì)話框,在該 對(duì)話框中選擇“啟動(dòng)器模板”選項(xiàng),設(shè)置“示例文件夾”為“Mobile起始頁”,“示例頁”為“jQueiy Mobile (本地)”,設(shè)置“文檔類型”為HTML5,然后單擊“確定”按鈕,完成文檔的創(chuàng)建操作,如圖所示
第2步,按Ctrl+S快捷鍵,保存文檔為index3.html。此時(shí),Dreamweaver CC會(huì)彈出對(duì)話框提示 復(fù)制相關(guān)的框架文件。
第3步,在編輯窗口中,可以看到Dreamweaver CC新建了包含4個(gè)頁面的HTML5文檔,其中 第1個(gè)頁面為導(dǎo)航列表頁,第2~4頁為詳細(xì)頁視圖。在站點(diǎn)中新建了 jquery-mobile文件夾,包括了 所有需要的相關(guān)技術(shù)文件和圖標(biāo)文件。
第4步,切換到代碼視圖,清除第2~4頁容器結(jié)構(gòu),保留第一個(gè)Page容器,在容器中添加一個(gè) data-role屬性為header的<&>標(biāo)簽,定義標(biāo)題欄結(jié)構(gòu)。在標(biāo)題欄中添加一個(gè)<h1>標(biāo)簽,定義標(biāo)題, 將標(biāo)題文本設(shè)置為“標(biāo)題欄文本”,如圖所示。
每個(gè)視圖容器中只能夠有一個(gè)標(biāo)題欄,通過添加一個(gè)Page容器的<div>標(biāo)簽,在容器中添加一個(gè) data-role屬性,設(shè)置屬性值為header,就可以在標(biāo)題欄中添加標(biāo)題、按鈕或者標(biāo)題文本了。標(biāo)題文本 一般應(yīng)包含在標(biāo)題標(biāo)簽中。
第5步,在頭部位置添加如下元信息,定義視圖寬度與設(shè)備屏幕寬度保持一致。
點(diǎn)擊加載更多評(píng)論>>