网页导航条图片(网页设计导航栏图片)
求网页制作达人，dreamweaver怎样在图片上放导航条?
1、点击Dreamweaver，双击打开。
2、选择文件-打开（快捷键Ctrl+O），打开网页文本。
3、把鼠标光标放在需要插入导航条的地方，选择插入记录-图像对象-导航条命令。
4、此时会弹出插入导航条的对话框。
5、点击“状态图像”后面的浏览，在弹出的对话框中选择需要的图片。
6、同上步一样，插入鼠标经过图像和按下图像。
7、点击确定后出现下面效果。
8、保存文档，按F12使用浏览器浏览效果。
用PS怎么做出导航栏的效果
打开PS，新建一文件，大小设置为“200*800”，背景色设为“透明”。
选择“工具栏”中的“圆角矩形工具”项，并设置合适的“半径”（如20像素），然后在绘图区域进行绘制，可以通过按键盘组合键“Ctrl+T”对其进行调整。
切换至“路径”面板，点击“将路径作为选区载入”按钮。
接着返回“图层”面板，选择“工具栏”中的渐变工具，并设置合适的渐变色进行填充。
接着双击该图层，为其添加“浮雕 图层样式”
新建一个“图层2”，接着选择“圆角矩形工具”，将半径设置为“10像素”，并绘制如图所示的图形。然后切换至“路径”面板，点击“将路径作为选区载入”按钮，然后返回图层面板，填充一种纯色。
双击“图层2”，为其添加“图层样式”
接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”，接着选择“移动”工具将“图层2 副本”移动到合适的位置。
按住键盘上“Ctrl”键不放的同时，点击“图层2 副本”以选中该图像，然后为其填充另一种颜色。
基本的导航栏结构已经做好。接下来创建切片。点击“工具栏”中的“切片”工具，然后对整个图像区域进行划分。
最后点击“文件”→“存储为Web所有格式”项，选择文件类型为“JPEG”格式，接着点击“存储”按钮，在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”，最后点击“保存”按钮。
图片文件名为001.jpg,现在我的网页导航条要做效果，鼠标选中时显示上面背景颜色，不选中时显示下
加个伪选择器:hover , 假如你背景图片高度10，导航高度5， 就设置导航{background-image:url(./001.jpg);background-position:0px 0px;transtion:all 1s out-in}导航:hover{background-position:0px 5px} 其中transtion是为了设置缓动效果
如何用Photoshop制作网站的“导航栏”
用photoshop画出导航栏的效果
用切片工具把每个导航标签切出来。并保存切片。如下图：
再用html写出导航栏的代码，把这几个图片链接到网页中，就可以了
总结：photoshop是无法直接做出导航栏，它只是辅助设计出效果，实际功能的，还是要用html代码的。
网页导航条怎么做?
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title导航栏示例/title
/head
body
ul id="navigation"
li/li
lia href="#"首 ? ?页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia href="#"悬 赏 令/a/li
li/li
/ul
/body
/html
2、此时对应效果如图：
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到head/head之间：
style type="text/css"
body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
/style
5、在加入CSS代码之间，网页此时的效果如图：