PS设计出效果然后用css或者js实现如果你平时只是设计效果图的话是不需要你做的如果你是设计加页面切图的话这个是你需要掌握的这种你也可以直接做一个flash套在页面里面
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
<html xmlns="网址">
<head>
<meta >
<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/noactivejpg);}
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/activejpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/leftjpg); width:22px;}
</style>
5、在加入CSS代码之间，网页此时的效果如图：
网页菜单导航制作助手——硕思魔法菜单。是一款无需了解DHTML和JavaScript代码编程的导航工具，只需点击鼠标就可以制作具有专业水准的动态菜单和简单专业的菜单导航。真正地体现了“简单才是专业”。步骤/方法现在很多人有个人网站，公司的网站更是日新月异。一个友好的菜单导航，不仅能让用户快捷的访问相关页面，也能让搜索引擎更快的抓取到我们网站。而制作网站时会遇到各种各样的问题。比如：如何展示更多的内容，怎样让访问者便捷地到达想要的页面等等。网页菜单导航，能很好地帮你解决这些问题！所以，网站的菜单导航制作便成为重中之重了。选择一款很强大的菜单制作工具，让我们不懂DHTML和JavaScript的小白，都可以用它轻松制作具有专业水准的动态菜单和导航条的工具也是大势所趋。网页菜单导航制作助手——硕思魔法菜单。是一款无需了解DHTML和JavaScript代码编程的导航工具。硕思网页魔法菜单可以生成多级菜单，其独特的菜单悬浮和任意定位功能更是最大限度地节省了页面空间，而丝毫不影响页面布局。多种子菜单d出效果使你的页面化平庸为神奇！您可以在菜单项中插入生动的动画、设置背景图、编辑文字以及定义边框。生成的菜单还会根据浏览器窗口的大小，自动调整d出菜单的位置。硕思网页魔法菜单支持多款主流浏览器：IE、Netscape 和Opera。这些体贴的功能一定能让您制作出非同凡响的菜单！魔法菜单还可以作为插件在FrontPage、DreamWeaver和硕思主页编辑器中使用。制作好的网页菜单可以根据用户自己的需要自动生成相应的代码。可以选择生成搜索引擎友好代码可以生成站点地图，谷歌xml站点地图或者发布js脚本代码等。提供了很大的选择空间，可以满足大部分网页菜单制作及导航条制作的要求。硕思魔法菜单支持多种编码格式，我们可以根据我们所使用的编码选择一种合适的编码格式，同时还支持任意类型文档，并且支持UTF-8字符编码。提供多种动态菜单模板样式，可以根据自己所要创建的菜单项的需要，编辑菜单上的文字、设置背景图、式样以及定义边框等。 *** 作简单，只要点击鼠标就可以创建出属于你的个性化的、专业的菜单项。 更多精彩电脑信息，请登录:中国高速网-IT频道。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）