1、打开Deamweaver8，新建一网页文竭惮蚕斗件。接着输入以下导航菜单的内容：<html xmlns="http://www.w3.org/1999/xhtml"><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]如何为网页添加导航栏](https://exp-picture.cdn.bcebos.com/3aae2b4f50b8b43e6020e2fe7132939c2df71950.jpg)
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。本文中小编使用的图标如图所示。
![网页导航栏制作：[2]如何为网页添加导航栏](https://exp-picture.cdn.bcebos.com/58021a0148fe1e428390b165c2299a8838130350.jpg)
5、在加入CSS代码之间，网页此时的效果如图：
![网页导航栏制作：[2]如何为网页添加导航栏](https://exp-picture.cdn.bcebos.com/82eff6d7592ae3ef1b83a18554b6326c56666450.jpg)
7、最终炫酷的导航栏就制作完成啦！
![网页导航栏制作：[2]如何为网页添加导航栏](https://exp-picture.cdn.bcebos.com/f7e6410f822b74ee09cefeacda2c8cf1d9a74a50.jpg)
