Dreamweaver CC 2014如何自定义导航图标？

自定义导航图标

【操作步骤】

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

第2步，按Ctri+S快捷键，保存文档为index.html。切换到代码视图，清除第2~4页審器结构， 保留第1个Page容器，在容器中添加一个data-role属性为header &<div>标签，定义标题栏结构。定 义标题名称为“播放器”，在标题栏中添加一个导航结构。使用da丨a-role="navbar”属性定义导航栏容 器，使用data-iconpos="Left属性设置导航栏按钮图标位于按钮文字的左侧，然后在导航栏中添加3 个导航列表项固，疋义3个按钮，设置3个按钮图标为自定义data-icon=”custom"。

第3步，清除内容容器内的列表视图容器，添加一个导航栏。使用data-iconpos="top”属性设置导 航栏按钮图标位于按钮文字的顶部，然后在导航栏中添加4个导航列表项目，定义4个按钮，设置4 个按钮图标为自定义，即data-icon="custom”。

第4步，把光标置于内容容器尾部，选择“插入” I “图像” I “图像”命令，在内容客器内导航栏后面插入图像images/1.png,定义一个类样式w100,设置width为100%，绑定类样式到图像标 签上。

第5步，自定义按钮图标。在文档头部位置使type="text/css">标签定义内部样式表，定 义一个类样式play,在该类别下编写ui-icon类样式。ui-icon类样式有两行代码，第一行通过background 属性设置自定义图标的地址和显示方式，第二行通过background-size设置自定义图标显不的长度与宽度。

第6步，以同样的方式定义pause、stop、begin、back、forward和end，除了背景图像URL不同外，声明的样式代码基本相同，如下所示。最后，把这些类样式绑定到对应的按钮标签上，如图

第7步，在文档头部的内部样式表中，重写自定义图标的基础样式，清除默认的阴影和圆角特效, 代码如下所示，然后为导航栏容器绑定custom类样式，如图所示。如果不清楚默认的圆角阴影 特效，则显示效果如图右图所示。

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

第9步，完成设计之后，在移动设备中预览该index.htm丨页面，可以看到如图左图所示的 :自定义导航按钮效果。