Dreamweaver CC如何定义标题栏?

定义标题栏导航

第1步，启动DreamweaverCC，选择“文件”丨“新建”命令，打开“新建&档”对话框，在该 ■对话框中选择“启动器模板”选项，设置“示例文件夹”为“Mobile起始页”，“示例页”为“jQuery :Mobile (本地）”，设置“文挡类型”为HTML5,然后单击“确定”按钮，完成文档的创建操作。

第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右图所示。单击“上一张”按钮，将返回显示。