强强联手打造精美导航条
数码时尚
如果你仔细观察那些门户网站，一定不难发现圆角矩形导航条，这些精美的导航条，除了可以增强网页的美观性外，更将整个网页安排得井井有条、错落有致。不过，想要制作这样的导航条可是要费一番脑筋哟，下面我给大家介绍一下它的制作方法。
用Photoshop绘制导航条
圆角矩形导航条大多是由图像组成的，所以我们首先在Photoshop中将它绘制出来。
1.启动Photoshop7.0，新建一个宽570像素，高462像素的文件，用鼠标单击前景色，将前景色改为红色，白色的背景不变。
2.选择“圆角矩形工具”，将圆角的半径设置成“30px”，在画布内拖动鼠标，画一个较大的圆角矩形，然后切换前景色和背景色，并创建一个新的图层，选择“矩形选择工具”，选中下面多余的部分，按“Alt+Del”组合键删除(填充前景色)，用同样的方法删除右上角的圆角部分(图1)。
3.新建一个图层(图层2)，切换前景色和背景色，选择选取工具中的“单列选框工具”和“单行选框工具”，用鼠标分别在导航条的左右两边和下面单击，此时会出现一条虚线外框，点按鼠标将它移到适当位置，按“Alt+Del”键画上前景色(即红色)的线条(图2)。最后将多余的线条用“矩形选择框”选中后再按“Del”键删除。
4.选择“文字工具”，在导航栏上面写几个字，如“网页制作”，然后拼合图层即可(图3)。
5.用矩形选框工具将所有的图像选中后，按“Ctrl+C”组合键复制，新建一个文件，将它全部粘贴过去，然后将上面的文字栏框选后(尽量不要选多余部分)，进行“复制→新建文件→粘贴”，中间选取一小部分，最下面的一条红线也用矩形框线工具选中然后进行“复制→新建文件→粘贴”(图4)。最后将三个文件分别存储为Jpg格式。
在Dreamweaver中插入导航条
下面我们把在Photoshop中的工作成果插入到Dreamweaver里。
1.启动Dreamweaver MX，插入一个“三行一列”表格，注意将“单元格填充”、“单元格间距”和“边框”均设置为“0”(图5)。
2.用鼠标指针单击第一个单元格，选择“常用”面板中的“图像”命令，找到最上面文字栏的图像，将它插入，并可作适当调整(图6)。
3.用鼠标指针单击第二个单元格，选择属性面板中的“单元格背景URL”，将存储的第二部分图像作为背景插入到单元格中，此时可在单元格中添加一些具体内容(图7)。
4.用鼠标指针单击第三个单元格，选择“常用”面板中的“图像”命令，找到最下面的那条红线图像，将它插入，并用鼠标作适当调整。至此，圆角矩形导航条制作就完成了，按F12键即可预览效果(图8)。
