3.5　图像效果实例——创建导航条

在Dreamweaver CS6中，提供了快速制作导航条的功能。导航条中的按钮，包含4个不同显示状态的图像：“一般状态图像”“鼠标经过图像”“按下图像”和“按下鼠标时经过图像”。一般情况下，只需要设置一般状态图像与鼠标经过图像就可以了。

本实例中导航条的制作，主要由“插入导航条”对话框来完成。通过本实例，学习和掌握在Dreamweaver中添加导航条的基本方法。本实例的编辑过程，主要包括以下操作环节。

（1）准备好导航条中要使用的图像，包括“一般状态”“鼠标经过”“按下”和“按下鼠标时经过”这4个状态时的图像。

（2）执行“插入记录”→“图像对象”→“导航条”命令，打开“插入导航条”对话框。

（3）在“插入导航条”对话框中，设置“一般状态”“鼠标经过”“按下”和“按下鼠标时经过”这4个状态的图像存放地址，然后为其设置超级链接。

（4）执行“文件”→“保存”命令保存文件，按下“F12”键在浏览器中预览效果。

当鼠标指针指向导航条上的导航按钮时，按钮的图像会产生变化；当鼠标移开后，图像又恢复到初始状态；当单击导航条上的按钮，会跳转到另一个页面。下面就一起来对网页导航条的插入编辑进行实践练习。

3.5.1　设置导航条项目

（1）打开光盘中Chapter 3\Lesson 9小节目录下的“start.html”文件（图3-32）。

（2）将光标插入到文档Logo图像右边的单元格中，执行“插入记录”→“图像对象”→“导条”命令，打开“插入导航条”对话框（图3-33）。

“插入导航条”对话框中各项参数的功能介绍如下。

导航条元件：在列表框中显示添加的导航条元件。选中列表框中的元件，即可在正文的选项中进行设置。

项目名称：为导航条元件设置名称。

状态图像：浏览器默认显示的图像。

鼠标经过图像：当鼠标移动到图像上方时显示的图像。

按下图像：当按下鼠标左键单击图像时显示的图像。

按下鼠标时经过图像：当按下鼠标后，经过图像时显示的图像。

替换文本：当图像无法正常显示时，在浏览器中显示的图像。

按下时，前往的URL：设置该导航条元件的超级链接。

in：在其下拉列表中选择链接网页在浏览器中的打开方式。

3.5.2　添加导航条项目

在“插入导航条”对话框中，完成一个导航条元件的设置后，还需要添加新的导航条元件项目，以满足导航条在网页设计中的需要。

（1）单击“插入导航条”对话框中的“添加项”按钮，在“导航条元件”列表框中新添加一个项目（图3-34）。

（2）重复开始时的操作，单击“状态图像”后面的“浏览”按钮，在打开的“选择图像源文件”对话框中，选择“22.png”图像文件，然后单击“确定”按钮（图3-35）。

（3）单击“鼠标经过图像”后面的“浏览”按钮，在打开的“选择图像源文件”对话框中，选择“23.png”图像文件，然后单击“确定”按钮（图3-36）。

（4）在“插入导航条”对话框的“按下时，前往的URL”文本框中输入链接地址，在“in”下拉列表中选择“主窗口”选项（图3-37）。

（5）重复前面的操作，添加新项目并进行各种图像的设置，直到所有的项目添加完成，然后单击“确定”按钮（图3-38）。

（6）在文档中插入光标的位置，可以看到新创建的导航条（图3-39）。

（7）执行“文件”→“保存”命令保存文件，按下“F12”键在浏览器中预览效果（图3-40）。