导航:首页 > 万维百科 > 网页设计导航条怎么做

网页设计导航条怎么做

 发布时间：2020-10-14 16:21:42

1、怎么用fireworks制作网页导航条

下载安装 FIREWOKRS CS5（我目前电脑上已经安装）并启动软件，建议大家购买正版软件，此处不做过多说明。 新建一个宽950像素X35像素，分辨率为72像素的画布，并且点确定，如下图二 选择矩形工具，在画布上拖动出一个大小为950X35像素黑白渐变的图形 渐变的颜色大家可以根据自己网页的风格进行调整），单击属性面板中的油漆桶工具，调整颜色为红色渐变，调整完毕，画布上的矩形图形的颜色已经发生了变化。 选择矢量工具内的文本工具，键入导航上需要显示的文字，为了演示方便，我只打了几个导航的文字。 下边我们开始正式制作下拉导航，也就是平时常说的下拉菜单。选择切片工具，一次切好对应的大小 点击产品展示这个切片中心位置的圆形图形，弹出下拉菜单选择“添加弹出菜单”选项， 选择后台在弹出的面板分别添加产品分类1，产品分类2，产品分类3等下拉菜单的文字内容。链接和打开窗口大家可以根据自己的需要手动添加即可。 下拉导航添加完成后，在弹出菜单编辑器面板点击继续，分别进行外观、高级、及位置设置，最后点击完成。如下图2所示 下拉导航的显示位置需要手动拖动进行简单的调整，如下图，用鼠标左键选中红色方框框选的内容，进行左右或者上下拖动，将下拉内容显示的合适的位置进行显示，此处需要进行多次调整并通过导出的页面文件进行测试，直到显示完美即可。 回到FW主界面，在画布外的任意位置，点击鼠标右键，弹出菜单选择“全选”，全选的目的是为了保证每个切边的状态为选中。 这里有三种全选的方法，大家可以采取任意一种： 方法1：直接在FW主界面，按下快捷键“CTRL+A”进行快速全选（图示略）； 方法2：即上面提到的方； 方法3：在画布外的任意位置，按下鼠标左键不放，拖动选择，将画布上的内容可以全部选中， 导出选项如下图1，导出后的文件如下图2 双击导出的未命名1.htm这个文件进行浏览，最终效果如下。

2、如何用Photoshop制作网站的“导航栏”

用photoshop画出导航栏的效果

用切片工具把每个导航标签切出来。并保存切片。如下图：

再用html写出导航栏的代码，把这几个图片链接到网页中，就可以了

总结：photoshop是无法直接做出导航栏，它只是辅助设计出效果，实际功能的，还是要用html代码的。

3、用PS制作的网站导航栏，怎么应用到自己的网页里

网站的“导航栏”作为网页设计中的重要组成部分，扮演着极为重要的角色。网页导航栏设计的成功与否，在很大程序上决定着整个网页的美观程度。用Photoshop设计“导航栏”，不仅讲究ps技术，更在于发挥你的创造力和想象力，这是学习ps最难之所在。具体制作过程见网上教程。

4、网页设计导航条

下面的代码，你去看看，不好用再说。
<!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">
<!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
-->
</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>

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

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

<html xmlns="网址">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首  页</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互动交流</a></li>

<li><a href="#">开心一刻</a></li>

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

6、网页导航条中的竖线是怎么制作的啊？

一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">链接</a>

7、网页制作 导航栏和分类栏怎么在子页面也共用呢

首先将导航栏或分类栏目制作成一个独立的文件，这个文件需要根据你使用不同的网页编程语言来进行不同的命名，比如.html .asp .php .jsp;再将这文件放置到需要调用的地方即可：
HTML静态网页调用：
<include file="header.htm" />
ASP网页调用：
<!--#include.file="header.asp"-->
PHP网页调用：
<?php include 'header.php';?>

8、如何使用Dreamweaver做一个网页的导航栏

Dreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。
想用DW做出导航栏必熟知div+css，基本代码：
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">HTML教程</a></li>
<li><a href="#">CSS基础</a></li>
<li><a href="#">CSS开发工具</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS问题</a></li>
</ul>

9、网页设计中,怎么做成上面是导航条,下面是内容....... （我要简单的代码，让我做参考）

没明白你什么意思！你是说就像百度知道首页一样，导航条在上面，导航条的下面也有内容？还是内容在导航条里面，鼠标放在导航条上自动弹出导航内容的效果？

与网页设计导航条怎么做相关的知识