在Dreamweaver2014​中如何设置导航按钮位置？

设置导航按钮位置

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

第2步，按Ctrl+S快捷键，保存文档为index.htrnl。切换到代码视图，清除第2~4页容器结构， 保留第一个Page容器’在容器中添加一个data-role属性为header的<div>标签，定义标题栏结构。在 标题栏中添加一个导航结构。使用data-role="navbar"属性定义导航栏容器，使用clata-iconpos="lefV" 属性设置导航栏按钮图标位于按钮文字的左侧，然后在导航栏中添加3个导航列表项目，定义3个按 钮，第一个按钮图标为data-icon="home"即显示为首页效果，并使用ui-btn-active类激活该按钮样式；第二个按钮图标为data-icon="alert"，即显示为警告效果；第三个按钮图标为data-icon="info",即. 显示为信息效果。

第3步，清除内容容器内的列表视图容器，添加一个导航栏。使用data-iconpos="right"属性设置 导航栏按钮图标位于按钮文字的右侧’然后在导航栏中添加3个导航列表项目，定义3个按钮，^一 个按钮图标为data-ico="home"，即显示为首页效果；第二个按钮图标为data-icon="alert"，即显示为 警告效果；第三个按钮图标为data-icon="info' 即显不为彳自息效果。最后，选择“插入|图像| ‘‘图像”命令，在导航栏后面插入图像images/l.jpg，定义一个类样式w100，设置width为100%， 绑定类样式到图像标签上。

第4步，清除脚注容器内的标题信息，添加一个导航栏。使用data-iconpos="bottom"属性设置导 航栏按钮图标位于按钮文字的底部，然后在导航栏中添加3个导航列表项目，定义3个按钮，第一个 按钮图标为data-icon="home",即显示为首页效果；第二个按钮图标为data-icon="alerf"，即显示为警告效果；第三个按钮图标为data-icon="info"，即显示信息效果。

第5步，在头部位置添加如下元信息，定义视图宽度与设备屏幕宽度保持一致。

第6步，完成设计之后，在移动设备中预览该index.html页面，可以看到如图所示的导航 按钮效果。