网页导航条怎么做?

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

ppt制作导航栏的方法图解步骤

对于初学者来说，可能不知道如何在ppt中制作导航栏，下面就让我告诉你 ppt怎样制作导航栏的 方法 ，希望对大家有所帮助。

ppt制作导航栏的方法

舞台上右键——设置背景格式——填充——纯色填充——黑色。

ppt制作导航栏的步骤图1

2插入——形状——矩形，在舞台上拉出一个合适的矩形。绘图工具——形状填充——无填充色。形状轮廓——其他颜色轮廓，色码如图，透明度48%。粗细——其他线条——线型——复合类型——由细到粗，宽度6磅。

ppt制作导航栏的步骤图2

3插入——图片，将背景图片导入，放置在顶部，右键——置于底层。

ppt制作导航栏的步骤图3

4边框左上方输入文字，开始——字体中设置好字体、字号、颜色(这些都依个人的设计而定)。

、、

ppt制作导航栏的步骤图4

5边框右侧输入导航目录，分别选择好字体、字号、颜色。图2为三个目录完成后的效果。

ppt制作导航栏的步骤图5

ppt制作导航栏的步骤图6

6插入三张小图，在绘图——格式——大小中，将宽度与高度更改为相同大小。对齐工具栏中将其顶端对齐并横向分布(按最左与最右的图片构成的间距平均分配图片)。

ppt制作导航栏的步骤图7

7矩形工具如图拉出一个长方形，颜色依个人图片设定，右键将其置于底层。

ppt制作导航栏的步骤图8

8绘图工具——格式——形状效果——棱台，为矩形选择“十字形”棱台。三张小图选择“松散嵌入”棱台。

ppt制作导航栏的步骤图9

ppt制作导航栏的步骤图10

9矩形上方输入标题，艺术字样式中选择一种效果，绘图工具——格式——文本效果中，为其选择一种映像。

ppt制作导航栏的步骤图11

看了ppt怎样制作导航栏的人还看：

1. 在ppt中怎样添加图片边框

2. 如何制作高大上的立体导航栏效果

3. ppt怎样设计导航栏

4. ppt如何制作导航菜单

5. ppt如何制作下拉菜单效果

6. 在WPS演示中如何制作下拉式列表导航

7. ppt怎样制作下拉菜单

如何用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张幻灯片，在每一张上添加适当的文字。

选择刚刚弄成包含有的菜单幻灯片(也就是第一张)，选中“设计思维”矩形框对象，单击“幻灯片放映”，选择“动作设置”命令，超链接到第一张幻灯片，同理，其它每一个菜单对象都超连接到对应的幻灯片上。

然后选中第一张做好动画菜单的所有对象，复制粘贴到所有的幻灯片上，至此大功告成。

PhotoShop制作3D立体Logo与网站导航教程

Hi~在这辑Step

by

Step中，我将教大家使用几个简单的渐变和图层样式制作超酷的3D网页，如果你想让你的网页脱颖而出，那你绝对不能错过这辑，

开始吧~

效果图：

Step

1

创建一个

1000x750像素大小的文件，双击背景图层将其变为可编辑的图层，并打开图层样式颜色叠加，用#47382e叠加。

Step

2

打开标尺(视图标尺)，按下图添加一些参考线

Step

3

用矩形工具创建一个矩形，将该图层命名为header.

Step

4

将前景色设为黑色，选择椭圆工具创建一个阴影区域，大小要高于白色的矩形。将椭圆形图层命名为shadow，并将其置于header图层下面。

然后打开滤镜转换智能滤镜，之后滤镜模糊高斯模糊，半径为10像素，并把不透明度设为60%，得到下图效果：

Step

5

选中header图层，双击打开图层样式，选择渐变叠加，按照下图参数设置。

Step

6

使用直线工具画一条亮红色直线，然后再用黑色画另外一条直线(1像素)，之后将红线和黑线图层编组，组命名为

vDivider。打开图层图层蒙版

现实全部。

使用径向渐变工具，从黑色到白色，自上而下拉去，在组上添加渐变效果。

Step

7

使用文字工具创建导航栏(字体白色)。然后将所有标签编组，命名为White

Links。复制这个组，将其置于white

links组下面，将字体颜色设为黑色，

然后将其向上和向左移动1像素大小的位置。这样是为了制作3D效果。

Step

8