网页设计导航是怎么做的

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

怎样设置导航栏

一般是：设置——全部设置——导航栏，当然可能不同的手机型号，设置方法不同。仅供参考。而涉及导航栏的具体步骤如下面的表格会写得很具体。

在屏幕上找到如图所示红色方框标记的“设置”选项，点击进如设置界面。

点击选择下图所示红色方框标记的“导航栏”选项。

我们可以看到下图所示目前“导航栏可隐藏”选项是关闭的。

点击打开红色方框标记的“导航栏可隐藏”选项后，我们可以看到如图下方红色标记的位置多了一个向下的“箭头”，这个“箭头”就是可以隐藏导航栏的选项。点击这个“箭头后”导航栏便会消失。

如下图所示，点击“箭头”后，导航栏已经在屏幕界面中消失了。如果再想导航栏出现，只需要拇指从屏幕最下方往上滑动一小段距离即可。

导航栏几个按键的位置还是可以调换的，如下图所示我们选中的导航栏按键分布已经和前面图片上显示的不一样了。

建设网站中的导航栏在设计时有哪些常见的样式？

分享几个常见的导航设计：

1、滑出导航

滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。

2、全屏导航

全屏导航设计对内容有强调作用，用户可以更加便捷地切换到不同的页面，让内容成为更加触手可及的东西。如果设计的够合理，用户会在无意识间充分运用起它的导航功能。

3、单页滚动导航

对于不含有大量内容的网站而言，单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作，内容就会持续不断地到你的眼前。

4、垂直导航

垂直导航最流行的有两种排版方式，一种是隐藏式的导航菜单，需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。

导航如何使用，还是要结合你的项目的具体特征来决定的。