上节课我们学习了文字导航的设计，这节课我们将要学习使用Photoshop制作同一导航的不同样式，然后使用Dreamweaver来制作切换效果。

首先，我们的网页整体宽度是960像素，在网页结构设计中，一共有6个导航链接，所以平均每一个导航链接的宽度是 960/6=160像素，导航的高度是32，所以每一个图片导航的大小就是 160*32 像素。如图所示：

一、制作导航图片

1. 打开Photoshop，新建一个160*32像素的图片。

2. 鼠标双击图层，点击确定，将图层解锁。

3. 鼠标右击图层，然后混合样式，在混合样式中勾选颜色叠加，在颜色叠加里面选择颜色块，设置颜色为黑色，点击确定，直到完成。（因为导航条本身是黑色的。）

4. 使用左侧快捷工具栏中的文字工具，在图片中间添加“首页”两个字，并设置字体为：方正舒体，大小为：30点，居中对齐，文字颜色：白色。完成后，使用选择工具，将文字摆放到图片的正中间。

5. 使用文件菜单中的”存储为web所有格式"，

6. 设置图片格式是：JPEG，图片质量为：80，点击：SAVE保存，

保存时，选择站点目录（gushi/）下的images/目录中，并将图片名称设定为：nav_1_a.jpg （表示第一个导航的第一种形式。）

7. 双击文字图层前面的'T'，将文字颜色修改成：红色。

8. 用前面同样的导出和保存的方法，将红色文字的导航名称命名为：nav_1_b.jpg 保存。

9. 使用同样的方法，分别制作其他5个导航，并将名称分别命名为：nav_2_a.jpg nav_2_b.jpg nav_3_a.jpg nav_3_b.jpg nav_4_a.jpg nav_4_b.jpg nav_5_a.jpg nav_5_b.jpg nav_6_a.jpg nav_6_b.jpg

10. 制作完成后，打开gushi目录下的images/目录，检查图片是否制作正确。

注：一共有6对导航图片，每一种导航都有两种不同颜色。

二、制作切换效果

1. 打开Dreamweaver软件，并打开站点中的index.html文件，将之前制作的文字导航删除。（选中表格后，按键盘Delete键删除，如果之前未做文字导航，则不需要删除。）

2. 在导航的单元格里，插入1行6列的表格。（与制作文字导航时插入方法一致。）

3. 在插入的1行6列的表格中，单击第一个单元格，然后选择插入图片右侧的小三角，在下拉菜单中选择“鼠标经过图像”。

将原始图片设置为：nav_1_a.jpg，经过图片设置为：nav_1_b.jpg，按下鼠标前往的URL地址设置为：index.html

4. 使用同样的方法，设置其他5个导航，5个导航的地址分别为： miyu.html shige1.html shige2.html shige3.html xiaotuozhan.html

添加完成后，如图示样：

点击蓝色小球或按F12在浏览器中预览效果，如下：