如何用dreamweaver cs3制作导航栏

制作有弹出式的。导航栏已经做好了,但不知道如何做出弹出式来。弹出效果类似于:http://www.uir.cn/这个网站的导航栏。

由于步骤太多了 只能说 你自己去看下视频把
如果要的话 可以找我 wzqiangde@163.com
温馨提示:内容为网友见解,仅供参考
第1个回答  2010-07-28
js下拉菜单,很简单的,你复制下面代码到记事本,然后把后缀名改为.htm,或者直接把代码拷贝到dreamwerver里,浏览
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
alert(sfEls.length);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<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><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<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><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<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><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<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><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>

Dreamweaver cs3中菜单spry
插入菜单选择布局选项,点击Spry;根据自身需要选择你的Spry菜单栏方向;; 在实时视图中点击Sory菜单栏,属性栏里会出现相应的设置选项 根据需要调整菜单栏层数,数目 效果图如下: 注:要插入菜单栏首先要保存你的文件。

如何用DREAMWEAVER给已制作好的导航条加下拉菜单
虽然dreamweaver有制作下拉菜单的工具,比如dreamweaver cs3的spry折叠菜单、折叠面板功能,或者使用“层(ap元素)”+“行为--显示和隐藏”功能来制作,但是制作好的导航条,一般应该有自己的css样式文件,或者js文件。起码要对css或者js有一定的了解,才能修改原有的样式文件等等,添加新的菜单。dreamweaver不...

制作网页的三剑客是那3个软件?
使用Dreamweaver CS3布局页面,制作各种静态网页、制作动态留言系统。使用Flash CS3制作网页导航条、动态相册、产品展示动画。使用Fireworks CS3制作网页Logo、按钮、网页整体效果图。综合运用网页制作;三剑客制作完整的网站了。

AdobeDreamweaverCS3经典教程目录
2.1 了解工作区布局与功能2.2 创建和管理个性化工作环境2.3 使用属性检查器,方便设置2.4 调整工具栏,提升工作效率2.5 个性化设置,符合个人习惯3. 应用CSS 3.1 管理Dreamweaver站点,预览样式3.2 引入外部样式表,扩展样式库3.3 创建CSS规则,精准控制元素3.4 打印样式表,优化网页呈现4. 文本...

Dreamweaver CS3中文版网页制作图书目录
模块一 认识开发环境和创建本地站点 任务一 网站简述,了解网站的基本术语。任务二 开发工具的介绍,了解常用的网页编辑工具以及学习Dreamweaver CS3工作界面和站点目录结构常识。任务三 创建QQ站点,学习如何创建本地站点、在当前站点添加文件和文件夹以及对页面属性进行设置。任务四 制作新浪新闻页,掌握如何...

Dreamweaver CS3打开后中间的编辑界面不见了,请高人指点.
工具栏,左上角有一个拆分,点一下看看

Dreamweaver CS3的复选框怎么用
1.启动Dreamweaver CS3软件。2.在界面选择【新建空白文档】。3.这时进入工作编辑状态。4.在【插入】下选择【表单】按钮。5.点击【表单】选择【复选框】按钮。6.会弹出【输入标签铺助功能属性】窗口,点击【确定】按钮。7.又弹出对话框点击【确定】按钮。8.复选框名称:用于设置复选框的名称,作为复...

Dreamweaver CS3怎样设置状态栏的大小
1,只有在设计区域选择了相应的东西,下面的才可用。2,正版的有一个月的试用期,注册码网上可以找的到``3,表格的拖动,把鼠标移动的表格的边缘,就可以拖动 或者选中表格在下面的属性栏里输入长和宽`

我下了一个Adobe Dreamweaver CS3我怎样通过这个管理公司网站后台啊...
如果你们公司网站是动态的,这个是管理不了后台的。织梦,帝国啊等网站管理系统, 都可以管理。如果是静态网页,它也没法管理。可以使用上传软件连接空间。Dreamweaver只是一个制作网站的软件。它做好的网站,通过上传软件,上传到空间的。

中文版Dreamweaver网页设计目录
1.2 Dreamweaver 8入门: 安装:步骤和注意事项 启动:操作流程 退出:正确退出方法 1.3 界面解析: 标题栏:功能介绍 菜单栏:常用功能概览 “插入”面板:插入元素的快捷途径 工具栏:快捷操作工具 状态栏:实时信息显示 “属性”面板:设置元素属性 1.4 实战练习...

相似回答