Dreamweaver制作下拉导航菜单
用Dreamweaver MX 2004制作下拉菜单
用Dreamweaver MX 2004制作下拉菜单
余健美
【期刊名称】《电脑知识与技术》
【年(卷),期】2005(000)001
【摘要】下拉菜单是网上最常见到的效果.本文从导航条的制作、下拉选单的制作、显示和隐藏效果的实现三方面介绍了如何用Dreamweaver MX 2004制作下拉菜单.
【总页数】3页(P65-67)
【作者】余健美
【作者单位】江苏省通州职业高级中学,江苏,通州,226300
【正文语种】中文
【中图分类】TP311
【相关文献】
1.基于Dreamweaver MX2004科室网站设计和制作 [J], 穆飞航;李秋俐;张帆;王
烈明;闫涛;张麟
2.使用Dreamweaver MX2004制作立体表格 [J], 7star
3.利用Dreamweaver MX 2004制作实验室网上选课系统 [J], 赵传亮;初同喜;李
双东;王宇;王景聚
4.运用Dreamweaver的CSS样式制作动态下拉菜单 [J], 阎月
5.Dreamweaver MX 2004插件应用与制作解析 [J], 续蕾
因版权原因，仅展示原文概要，查看原文内容请购买。
Dreamweaver创建网站导航栏的简单方法
Dreamweaver创建网站导航栏的简单方法导航栏是网站中非常重要的组成部分之一，它不仅能够帮助用户快速定位所需内容，还能提升用户体验。
Dreamweaver是一个广泛使用的网页设计和开发工具，提供了一些简单的方法来创建网站导航栏。
本文将重点介绍使用Dreamweaver创建网站导航栏的简单方法，并按照以下几个章节进行详细说明。
第一章：了解导航栏的作用和设计原则在开始设计导航栏之前，我们应该先了解导航栏的作用和设计原则。
导航栏应该清晰、简洁，并能传达网站结构的层次关系。
设计导航栏时，需要考虑网站的整体风格和定位，选择适合的字体、颜色和图标等设计元素。
第二章：创建导航栏容器在Dreamweaver中，我们可以使用HTML和CSS来创建导航栏容器。
可以使用```<div>```元素作为容器，并使用CSS样式定义其外观。
通过设置宽度、高度、背景颜色或背景图片，调整导航栏的外观以适应网站的设计风格。
第三章：创建导航链接导航栏的核心部分是链接，它们将用户引导到网站的各个页面。
在Dreamweaver中，我们可以使用超链接工具或手动编写HTML代码来创建导航链接。
通过设置链接的文本、目标页面和样式，我们可以将其添加到导航栏中。
第四章：设置导航样式为了提高用户体验，我们可以对导航链接添加一些样式效果，比如鼠标悬停时的颜色变化、点击后的状态等。
在Dreamweaver 中，可以使用CSS样式表来定义这些效果。
通过选择链接元素，然后在属性面板中设置颜色、字体大小、边框等样式属性，达到所需的效果。
第五章：响应式导航栏设计如今，移动设备越来越普及，导航栏的响应式设计变得尤为重要。
通过使用CSS媒体查询，我们可以根据不同设备的屏幕宽度自动调整导航栏的布局和样式。
在Dreamweaver中，可以使用CSS Designer工具来创建和编辑媒体查询，并针对不同的屏幕大小设置导航栏样式。
第六章：导航栏动画效果为了使导航栏更加生动和吸引人，我们可以添加一些动画效果。
Dreamweaver中多种菜单样式的实现方法_0
Dreamweaver中多种菜单样式的实现方法【摘要】导航菜单是一个网站不可缺少的部分，是指引和方便浏览者访问所需内容的快速通道，它是如何设计和实现的。
本文介绍了三种样式的导航菜单以及每种式样的导航菜单的具体实现方法，同时也比较了这几种导航菜单的特点和不同，以及在具体制作导航菜单时的注意之处。
【关键词】菜单样式；导航菜单；导航菜单的实现；导航条的实现一、引言凡是浏览过网页的人都知道：导航菜单是一个网站不可缺少的部分，它不仅直观的体现出了这个网站的整体结构，更是指引和方便浏览者访问所需内容的快速通道。
故而，网站导航菜单的设计和实现就体现得尤为重要了，良好的网站导航会使网站更易于访问、更加吸引浏览者。
导航条的样式和风格是网站样式的一个重要的组成部分，好的导航条可以在确定网站风格的同时，清晰网站的层次。
二、导航菜单样式的实现1.普通的导航菜单样式普通的导航菜单样式适合下级链接页面不多，结构也不是很复杂的网站，使用Dreamweaver面板中提供的层或者表格直接编辑链接就可以了。
以表格的制作方式为例，我们创建一个水平的导航菜单，插入1行多列的表格（一个菜单项为一列），在每个单元格中输入具体的菜单项或者也可使用自己设计制作图片为菜单，在属性面板中编辑超链接的地址。
若我们需要制作侧边菜单栏，可以采用垂直的导航菜单样式，插入多行1列的表格进行编辑，在单元格中添加文字或图片，编辑超链接即可。
但是，无论是水平还是垂直导航菜单都有美中不足：编辑过超链接的文字会出现的蓝色的下划线，我们可以通过之间添加代码来解决：a：link {text-decoration：none；}a：visited {text-decoration：none；}a：hover { text-decoration：none；}a：active { text-decoration：none；}2.带滑块效果的导航菜单样式当鼠标指向导航菜单的某一菜单项时，该菜单项的颜色就会变成与其他菜单项不相同。
DW8下拉菜单制作
方法一：不知道你用的DW几，我是在DW8下操作的，其它的版本应该类似：1、打开DW后（设计视图），在工具栏上点“常用”，在下拉表中选择“表单”，在右面的工具里点表单图标，因为下拉菜单是表单项，须放在表单里面。
2、在右面的项目中接着找“列表/菜单”，点击即可插入一列表或菜单。
3、在设计窗口中双击插好的菜单，会自动打开属性，默认类型是“菜单”，这个可以不改，在靠右边有个列表值，单击打开，点加号添加项目标签（也就是那一项在网页中显示出来的名字），在后面填值单击确定即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" /1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><form id="form1" name="form1" method="post" action=""><select name="select"><option>1</option><option>2</option><option>3</option><option>4</option></select></form></body></html>补充：如果你要跳转的话还没做完，你先不要在值里填东西，4、在DW的菜单栏里选择“行为”，打开行为面板。
用DWMX制作导航下拉菜单
用DWMX制作导航下拉菜单用DW MX制作导航下拉菜单导语：用Dreamweaver做网页，下拉菜单是最常见的功能，下面就由店铺为大家介绍一下如何用Dreamweaver MX制作导航下拉菜单，欢迎大家阅读!Dreamweaver从出道以来，其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。
在Dreamweaver MX(DW MX)中，对这一功能又有了扩充与改进。
在DW MX中，行为指的是为了响应某一事件(Event)而采取的一个操作(Action)。
其中Event 指的是浏览器的事件，比如窗口刷新、鼠标移动等。
而Action 指的是后台响应事件的JavaScript 代码，可以完成相应的'操作，比如播放声音、翻转图片等。
用DW MX制作导航下拉菜单是网页中经常使用的特效之一。
(如图1)主要应用了DW MX中的“Show-Hide Layers”行为。
图1首先制作好导航条(图1中的“产品中心”那一栏)，随后添加一个层，作为下拉菜单将要显示的位置，并填入下拉菜单的对应栏目。
接下来，打开“Behaviors”面板，同时选中“产品中心”链接(注意，这个时候不能够选中刚刚建好的层，否则无法应用“Show-Hide Layers”行为)，单击“+”号，选择“Show-Hide Layers”，就可以看到我们刚刚建好的层在选择项中，可以设定为隐藏或者显示(如图2)。
图2行为的妙用主要体现在：如果我们要实现下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显示;而鼠标离开链接时，使层隐藏。
根据这种思想，我们首先为这个层设立两个Action，一个选择Hide，一个选择Show。
然后，调整Event，将Hide Layer的Event 设为OnMouseOut，即为鼠标离开链接;而将Show Layer的Event设为OnMouseOver，即为鼠标选中链接。
按“F12”预览，就可看到我们期盼的效果。
教案13--REAMWEAVER中层的应用2：制作下拉式(隐藏)菜单
重点技巧为：每个层的上边沿与对应单元格的下边沿应基本重合，不留空隙。否则将导致效果失败
总结
强调
理解
记忆
课后作业
抄写本课制作步骤并理解其操作过程。
教后札记
学生在制作时出现以下问题：
A、各下拉菜单对不齐。
B、下拉菜单有抖动效果，检查后发现是制作显示隐藏时应选定单元格作为对象，而不是单元格中的内容。
网页基础第课时教案月日第周星期
课题
DREAMWEAVER中层的应用2：制作下拉式
学习制作下拉式（隐藏）菜单
教学重点
识记制作下拉式（隐藏）菜单的步骤
课
前
准
备
软件
准备
教学难点
理解制作下拉式（隐藏）菜单过程
教学环节
教学过程
教师
活动
学生
活动
复习
引入
1、利用实例说明此效果的具体要点。
2、每个层的边框大小要与其中的表格大小一致，不能太大。
操作
演示
指导
学生
操作
制作时应明确其他软件的辅助作用
观察
记录
上机
实践
理解生成的网站结构。
教学环节
教学过程
教师
活动
学生
活动
授
课
3、本练习中应选择父栏目各单元格、子栏目各表格分别制作显示、隐藏事件，不能选其中文字来做效果。
演示
巡回
检查
纠错
实践
制作
理解
修改
5、为第一个单元格制作ONMOUSEOVER和ONMOUSEOUT事件，使光标放到单元格上时显示菜单，离开时隐藏；
6、选定层中的表格，为第一个单元格对应的层中的表格制作ONMOUSEOVER和ONMOUSEOUT事件，使光标放到层中任何
怎样用dreamweaver制作网站下拉菜单
一、使用Dreamweaver CS5制作下拉菜单1. 在“插入”面板中点击“绘制AP Div”按钮插入一个AP Div。
请阅读Dreamweaver CS5插入AP Div。
2. 选择刚才插入的AP Div。
请阅读Dreamweaver CS5激活、选择和删除AP Div。
3. 在AP Div属性面板上，设置AP Div的参数。
如下图所示：请阅读Dreamweaver CS5中AP Div属性面板。
4. 在AP Div内单击，将光标放在AP Div内，然后插入一个一行四列的表格，如下图所示：请阅读Dreamweaver CS5插入表格。
（1）按住Ctrl键的同时点击表格的四个单元格，设置它们的宽度都为120。
请阅读Dreamweaver CS5改变单元格的高度和宽度。
（2）在单元格中分别输入主菜单名称，然后加上链接。
请阅读Dreamweaver CS5创建超链接。
如下图所示：如果AP Div与表格的设置不一致，可以分别调整AP Div或者表格。
5. 重复1.2.3.的步骤再次插入一个AP Div，然后设置AP Div的参数。
如下图所示：注意：“左”和“上”两个参数是设置这个AP Div距离窗口左边框和上边框的距离的，如果填写的不正确，会导致子菜单的错位和以后的可用性。
6. 在apDiv2中输入下拉菜单的内容，在此仍用表格进行排版。
如下图所示：7. 为“网络编程”再制作一个AP Div，仍然重复1.2.3.的步骤插入一个AP Div，然后设置AP Div的参数。
如下图所示：8. 在apDiv3中输入下拉菜单的内容，仍然使用表格排版。
因为表格排版比较方便，当然也可以使用其它方法。
如下图所示：9. 在“窗口”菜单中选择“AP 元素”命令，打开“AP 元素”面板。
如下图所示：点击“apDiv2”和“apDiv3”前面的方格，出现了闭着的眼睛图标。
这时“apDiv2”和“apDiv3”被隐藏了起来。
当我们打开网页时，这两个下拉菜单中隐藏起来的。
网页下拉菜单的制作
网页下拉菜单的制作MacroMedia公司不愧是软件大家，从AuthorWare到Flash无一不是软件中的精品，其主页制作工作Dreamweaver大概由于曲高和寡的原因吧，用的人反而不多，实际上Dreamweaver中层(Layer)、行为(Action)、时间线(TimeLine)等工具使我们可以非常方便地做出另人眼花缭乱动态网页。
下拉菜单是WINDOWS中最常见的菜单，在网页的制作中要做到却很不容易，好在有了Dreamweaver的层的概念，我们可以非常方便地在网页中做出下拉菜单（本文所用的示例文件为：/jzwl/xlcdnew.htm，大家可以下载后对照看看）。
过程如下：一、打开Dreamweaver，在SITE管理器中新建一个页面，双击即可用Dreamweaver打开，可先设好其页面属性，背景图片等。
二、许多人对网页中有链接的文字没有下划线，而当鼠标指向它时却出现下划线且文字颜色会改变而感到很奇怪，本文所用的例页中也有些效果，大家只要在网页的样式中加入示例文件中<style>与</style>之间的语句即可，不用自己再创建多种样式。
这一操作可按F10进入HTML编辑窗口复制即可。
三、在页面中输入好主菜单棒的文字，为了美观，主菜单棒可放在一个表格中，并固定各单无格宽度，以免走样。
如下图：四、点击插入(Insert)菜单，选择层(Layer)，在其属性窗口(如果没有该窗口可用Ctrl+F3打开)中可看见其名称为“Layer1”,插入一个新层，作为“菜单一”的下拉菜单。
点击该层选中后，点击插入(Insert)菜单，选择表格(Table)，选择好该表格中的行、列数，以及把表格线宽度设为0，把表格底色设为某种颜色。
如本例中“菜单一”的下拉菜单有4项，即该表格有1列4行。
然后在该表格中输入四个子项的菜单名，输入完成后调节表格的大小与层的大小，文字的对中，每一项的链接，以及层的位置（均可在属性窗口中调节，或用鼠标直接调节），使其正好在“菜单一”下。
跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单
跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单杨教授工作室精心创作的优秀程序员职业提升必读系列资料目录1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 .................2 1.1.1 Spry菜单栏...................................................................... ........................................2 1.1.2 自定义菜单栏组件的显示风格(修改CSS文件) .............................................9 1.1.3 更改菜单栏组件的方向 ..................................................................... . (15)杨教授工作室，版权所有，盗版必究， 1/19页杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单1.1.1 Spry菜单栏Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。
有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件(如折叠构件和菜单栏)，向各种页面元素中添加不同种类的效果。
在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和JavaScript 基础知识的用户使用。
1、菜单栏组件是一组可导航的菜单按钮当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。
使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。
利用dw制作漂亮的导航栏效果
利用dw制作漂亮的导航栏效果最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。
考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。
Let’s Go！一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。
下面介绍在Dreamweaver中的具体操作步骤：1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。
图片如下：图1为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。
2．选中导航条上的链接文本。
使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。
图片如下：图2 显示层设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。
接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。
图片如下：图3 隐藏层设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。
3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。
层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
用Dreamweaver制作下拉菜单的原理：它利用了Behaviors（行为）面板中的内置方法Show-Hide La yers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在“层”中。
一、导航条的制作
按CTRL+F2打开Objects面板，点击【层按钮】在页面中按住鼠标不放拖出一个“层”，然后在层的Pro perties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、30，背景色填入#006699，如图。
将光标移至‘层内’，点击Objects面板上的【表格按钮】，插入一个一行四列的“表格”。
按住CTRL键不放，公别点取表格的四个单元格，然后设置它们的宽度为120（120*4=480），高度为25，并在前两个单元格中输入“关于公司”和“新闻中心”，做为主菜单名，并加上链接。
二、下拉选单的制作
现在开始制作将要‘下拉出现的菜单’，同样用‘层’来制作。
再次插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口‘左边框’和‘上边框’的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。
为了排版方便，我在这还是使用表格来做菜单（W=120,H=80）。
这个层将作为“关于公司”的下拉选单出现，填入你所需要的菜单并链接。
同样的方法，制作其它的下拉选单（层menu2）。
这一步要注意的地方就是下拉菜单所在的层（menu1、menu2）的位置非常重要（由L和T 两个参数决定）。
它们的上边线应该紧贴导航条的下边线。
如果远离导航条的话，鼠标一离开导航条，菜单就消失了。
按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。
操作这一步是因为下拉菜单的初始状态是不可见的。
三、显示和隐藏效果的添加
本步骤分为两部分：
第一，对“导航条中的主菜单”添加控制显示隐藏的命令；
第二，给“下拉选单”本身添加显示隐藏的命令。
1．导航条部分
首先按CTRL键不放，点击导航条中的第一个单元格，现按Shift+F3打开Behaviors(行为)窗口，在下拉选项中选中"Show-Hide Layers"（如图）。
如果选项中没有这一项，则选择Show Events For 下的IE 5.0后，重新点按钮，此时"Show-Hide Layers"将出现。
这时将会弹出一个窗口，如下图。
在Named Layers(命名的层)框中会列出当前网页所有的层，选中“层 "menu1" ”，因为我们想要menu1这个层对“关于公司”响应。
然后点下面的“显示(Show)”按钮→OK。
这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。
这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点按钮，在下拉选项中选中"Show-Hide Layers"，在弹出窗口中选中“层 "menu1" ”，因为我们想要menu1这个层对“新闻中心”响应。
然后点下面的“隐藏(hide)”按钮，OK。
回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。
2．下拉选单部分
先选中层menu1，方法是点击‘层的边缘’或在LAYER面板中点击menu1，用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。
这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。
3．重复以上两部分，为导航条的第二个主菜单“新闻中心”和层menu2添加显示、隐藏层命令。
【若鼠标停留“导航标题栏”(关于公司)，看到“下拉选单”不整齐，则可把第一行的“公司简介”改
四、下拉菜单的美化修饰
到这里，下拉菜单的功能效果已经实现了，你现在按F12就可以看到。
不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。
1．定义菜单字体样式
按Shift+F11打开CSS Style（样式）面板，点击面板下面的按钮
在弹出的"New Style"窗的Type选Redefine HTML Tag，Tag框内选中td标签，Define选This Document Only，如图。
此时弹出设置窗口，不管其它的，只在右边的Size框里选中12，单位为pixels。
2．定义菜单链接样式
在样式面板中，点击面板下面的按钮，在弹出窗中， Type选Use CSS Selector，Tag框内选中a:hover 标签，Define选This Document Only.
点击‘确定’后在弹出窗中，Color填#ff9933，Decoration选none，点OK。
返回到样式面板，点击面板下面的按钮，在弹出窗中， Type选Use CSS Selector，Tag框内选中a:link 标签，Define选This Document Only。
点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。
又返回到样式面板，点击面板下面的按钮， Type选Use CSS Selector，Tag框内选中a:visited标签，Define选This Document Only。
点击OK后在弹出窗中，Color填#ffffff，Decoration选none，点OK。
3．定义菜单边框样式
在样式面板中，点击面板下面的按钮，在弹出窗中， Tag框内选中tabld标签，Type选Redefine HTML Tag，Define选This Document Only.
弹出设置窗口，在左边的列表中选Border，右边四条边宽度都输入为1，颜色设为黑色#000000，Style选为solid。