网页设计导航条制作教程_网页设计导航是怎么做的

1、网页制作-导航条背景图片

<li class="title">Service</li>
<li class="back" style="background:url(添加你得渐变背景，是整个的背景。)">
<ul>
<li>Language Services</li>
<li>Market Research</li>

<li>Software Development</li>

<li>Corporate Training</li>

</ul>

</li>

2、网页设计导航条

下面的代码，你去看看，不好用再说。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品展示</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">联系电话</a>
<div>
<ul>
<li><a href="#">产品1一</a></li>
<li><a href="#">产品2一</a></li>
<li><a href="#">产品3一</a></li>
<li><a href="#">产品4一</a></li>
<li><a href="#">产品5一</a></li>
<li><a href="#">产品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介绍</a></li>
</ul>
</div>

</body>
</html>

3、DW网页导航条的制作。请大家教下！附图

看不到你的图...给按钮做成a标签的背景a{background:url(你要做背景的图片路径)； width:119px; height:60px; display:block;}然后定义a:hover{background:url(你要做背景的图片路径)；}需要叠加的效果的话就在hover的样式里面加上filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;
打字不易，希望采纳

4、怎样制作网站导航条

网页菜单导航制作助手——硕思魔法菜单。是一款无需了解DHTML和JavaScript代码编程的导航工具，只需点击鼠标就可以制作具有专业水准的动态菜单和简单专业的菜单导航。真正地体现了“简单才是专业”。步骤/方法现在很多人有个人网站，公司的网站更是日新月异。一个友好的菜单导航，不仅能让用户快捷的访问相关页面，也能让搜索引擎更快的抓取到我们网站。而制作网站时会遇到各种各样的问题。比如：如何展示更多的内容，怎样让访问者便捷地到达想要的页面等等。网页菜单导航，能很好地帮你解决这些问题！所以，网站的菜单导航制作便成为重中之重了。选择一款很强大的菜单制作工具，让我们不懂DHTML和JavaScript的小白，都可以用它轻松制作具有专业水准的动态菜单和导航条的工具也是大势所趋。网页菜单导航制作助手——硕思魔法菜单。是一款无需了解DHTML和JavaScript代码编程的导航工具。硕思网页魔法菜单可以生成多级菜单，其独特的菜单悬浮和任意定位功能更是最大限度地节省了页面空间，而丝毫不影响页面布局。多种子菜单弹出效果使你的页面化平庸为神奇！您可以在菜单项中插入生动的动画图片、设置背景图、编辑文字以及定义边框。生成的菜单还会根据浏览器窗口的大小，自动调整弹出菜单的位置。硕思网页魔法菜单支持多款主流浏览器：IE、Netscape 和Opera。这些体贴的功能一定能让您制作出非同凡响的菜单！魔法菜单还可以作为插件在FrontPage、DreamWeaver和硕思主页编辑器中使用。制作好的网页菜单可以根据用户自己的需要自动生成相应的代码。可以选择生成搜索引擎友好代码可以生成站点地图，谷歌xml站点地图或者发布js脚本代码等。提供了很大的选择空间，可以满足大部分网页菜单制作及导航条制作的要求。硕思魔法菜单支持多种编码格式，我们可以根据我们所使用的编码选择一种合适的编码格式，同时还支持任意类型文档，并且支持UTF-8字符编码。提供多种动态菜单模板样式，可以根据自己所要创建的菜单项的需要，编辑菜单上的文字、设置背景图、式样以及定义边框等。操作简单，只要点击鼠标就可以创建出属于你的个性化的、专业的菜单项。更多精彩电脑信息，请登录:中国高速网-IT频道。

5、如何用PPT制作网站导航栏

PPT教程一、首先画一个矩形框，设置其大小为：高6.2厘米，宽5.2厘米。
PPT教程二、再画一个矩形框，设置其大小为：高6厘米，宽5厘米。
PPT教程三、把它们的顶边、左边重合在一起，再进行组合，这样两个对象就变成一个对象。
具体步骤如下：把小一点的矩形框放在大的矩形框上面，直接拖动小的到大的上面即可。或者采用如下办法：设置大的矩形框的位置为：水平：1厘米，垂直：2厘米，小的也是同样的位置，这样它们就重合。
选中大的矩形框(下面的那个)，按住Shift键不放开，再单击小的矩形框，然后右击->组合
PPT教程四、再画一个矩形框，高：1.2厘米，宽：5.8厘米，位置：水平：0.65厘米，垂直：0.8厘米。
右击该矩形框，选择“添加文字”，输入“菜单”两字。
PPT教程五、添加菜单项
1、再画一个矩形框，大小：高：1.2，宽：5，位置：水平：1，垂直：2，添加文字为“设计思维”
2、重复1，改位置为：水平：1，垂直：3.2，添加文字“色彩设计”。
3、再画三个同样的矩形框，只是按照上面步骤更改位置和文本，不再鳌述。
PPT教程六、设置进入动画
右击选中刚刚创建的对象，选择“自定义动画”，出现“自定义动画”的任务窗格(只有PPT 2003以上的版本才有，2000版以下的可以休息了，不支持啊)，选择组合框(两个大的矩形框，已经组合在一起成为一个对象)，单击“添加效果”->“进入”->“其它效果”，选择“切入”，确定返回。更改切入方向的为“自顶部”(只要在任务窗格中单击“方向”的下拉箭头进行选择即可)。
设置触发器，在任务窗格下方出现第一个动画对象，单击它(选中)，然后在它的右边单击下拉箭头，选择“计时”，出现一个对话框。单击“触发器”的按钮，选择下面的一个“单选按钮”，再单击它右边的下拉箭头选择“矩形框5：菜单”，确定返回即可。
一个组合框的触发器下拉动画完成了。
下面进行其它的对象触发器下拉动画设置：
选中“设计思维”矩形框，按照上面的步骤进行重复的设置，只修改如下部分：
在设置完成后，“设计思维”的动画是“单击”才能进行的，因此，需要修改。在任务窗格中选中“设计思维”动画，然后单击它右边的下拉箭头，选择“从上一项之后开始”命令(或者直接单击任务窗格上部的“开始”下拉箭头，选择“之后”，下同)。
上面完成了“设计思维”的下拉动画设置
再选择“色彩设计”矩形框，添加下拉动画，其设置与“设计思维”相同，但是要改“单击”为“之前”，其含义是：让“设计思维”与“色彩设计”的动画同时进行。
后面的菜单项与“色彩设计”完全相同。
PPT教程七、设置退出动画
其设置过程与六基本相同，
首先选择“组合框”，单击“添加效果”->选择“退出”命令(注意，六是选择“进入”，这里是选择“退出”)，然后选择“退出动画”中的“切出”，设置其触发器为“矩形框5：菜单”，也就是和上面的相同。动画方向为“到顶部”，开始为“单击”，再选择“设计思维”矩形框，添加“退出”动画效果，触发器还是“矩形框5：菜单”，把“单击”改为“之后”，而其它的菜单项都设置为“之前”，设置方法同六。
PPT教程八、添加多张幻灯片
按下Ctrl + M 4次，添加4张幻灯片，在每一张上添加适当的文字。
选择刚刚弄成包含有的菜单幻灯片(也就是第一张)，选中“设计思维”矩形框对象，单击“幻灯片放映”，选择“动作设置”命令，超链接到第一张幻灯片，同理，其它每一个菜单对象都超连接到对应的幻灯片上。
然后选中第一张做好动画菜单的所有对象，复制粘贴到所有的幻灯片上，至此大功告成。

6、网页设计导航是怎么做的

1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：

<head>

<title>导航栏示例</title>

</head>

<body>

</ul>

</body>

</html>

2、此时对应效果如图：

3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。

4、然后将以下CSS代码加入到<head></head>之间：

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代码之间，网页此时的效果如图：

7、网页中的导航条怎样简单的制作出来？？

不麻烦啊。。。。css文本导航条，你多去学学就很简单啊。。。你加我qq，我传个给你，这个里面有很多精美的导航。。。 //css代码 body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } /*- Menu Tabs 1--------------------------- */ #tabs1 { float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url("images/tableft1.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url("images/tabright1.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } //图片 //html代码 <h2>Tab Menu 1</h2> <div id="tabs1"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div> <br /><br />
记得采纳啊

8、html中制作一个网页导航，怎么弄

用表格做！
看你的导航是横排的还是竖排的。
横排的就建一个一行多列的表格，竖排的就建一个一列多行的表格。把每一个链接放在各个单元格中。最后把这个表格保存为一个HTML文件，在需要导航的页面上include这个文件在你指定的位置就OK了。这样的好处是你只要做一次导航文件就可以在所有你想要用！的地方引用。改起来也灰常方便，因为你只要改这个HTML文件就会在所有引用的地方全部生效了！

导航:首页 > 万维百科 > 网页设计导航条制作教程

网页设计导航条制作教程

与网页设计导航条制作教程相关的知识