DW网页设计17：制作弹出菜单
怎么使用dreamweaver制作网页教程 dw建站设计网页
怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件，被广泛应用于网页设计师的日常工作中。
它是一款视觉化网页开发工具，可以轻松制作出跨越平台和浏览器限制的充满动感的网页。
在本文中，我们将为您介绍如何使用Dreamweaver制作网页。
一、定义站点1.在任意一个根目录下创建一个文件夹（例如E盘），并为其命名（例如MyWeb）。
2.打开Dreamweaver，选择“站点-新建站点”，在对话框中输入网站名称和本地根文件夹路径（E:web），然后确定。
此时再次打开Dreamweaver，会自动找到刚才设立的站点。
二、创建页面1.在本地文件夹E:\MyWeb下，右键点击空白处，选择“新建文件”，建立一个页面。
默认的文件名为untitled.htm，将其改名为index.htm。
2.双击index.htm进入该页面的编辑状态。
在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。
在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3.在页面中添加文字，可用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。
4.如果需要选取字体，则选择字体中的最后一项“编辑字体列表”，在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
三、为页面添加图片在页面中添加图片，可用菜单“插入/图片”，选择本地图片路径，然后将其拖拽到页面中即可。
Dreamweaver是一款非常强大的网页制作软件，通过本文的教程，相信您可以轻松上手制作出精美的网页。
1、在本地文件夹E:\MyWeb下新建文件夹，用于存放图片，可更名为tu、pic或images。
2、打开对象面板，选择“插入图像”，在对话框中选择要插入的图片。
若出现对话框“是否将该文件复制到根文件夹中？”，需选择“是”，并保存到刚建立的文件夹中。
用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”预览，就可看到我们期盼的效果。
Dreamweaver弹出信息行为
——文章来源网，仅供分享学习参考 1 Dreamweaver 弹出信息行为
使用“弹出信息”行为将显示JavaScript 警告和一个确定按钮。
一、Dreamweaver CS5弹出信息行为
1. 选择一个页面元素或者对象。
2. 打开行为面板。
3. 点击“添加行为(+)”按钮，在弹出的下拉菜单中选择“弹出信息”命令。
如下图所示：
4. 打开“弹出信息”对话框，如下图所示：
消息：输入要显示的消息。
提示：也可以在“消息”框中输入任何JavaScript 函数、属性、变量或者表达式。
如果输入JavaScript 表达式，请将其放在大括号({})中。
如果要显示大括号，请在前面加上反斜杠转义字符({ 和 })。
(1)使用JavaScript 表达式示例一：
这个页面的URL 地址是：{window.location}
将代码输入到“消息”文本框中即可。
(2)使用JavaScript 表达式示例二：
今天是：{new Date()}
将代码输入到“消息”文本框中即可。
5. 单击“确定”按钮。
6. 查看附加的事件是否是需要的事件。
如果不是需要的事件，可以更改事件。
7. 查看行为参数是否合适。
如果不合适，也可以修改行为参数。
怎样用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”被隐藏了起来。
当我们打开网页时，这两个下拉菜单中隐藏起来的。
Dreamweaver制作活动菜单条效果
Dreamweaver制作活动菜单条效果在自己的网页中加一些元素在Dreamweaer 中实现自动隐藏窗口功能效果，具体怎么做呢？大家就和我一起来制作吧！第1步：制作菜单外貌在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。
第2步：设计菜单的动态效果1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。
然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。
单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。
交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。
2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。
网页下拉菜单的制作
网页下拉菜单的制作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)。
DW网页设计17：制作弹出菜单
弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。
效果说明
本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图17-1 和图17-2 所示。
弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。
创作思想
本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用Dreamweaver MX 2004 自带的行为制作弹出菜单。
操作步骤
（1 ）输入文字并设置超链接。
在网页中输入文字，因为单独的文本文字是无法添加行为的，按照Dreamweaver 中的约定，将文字的超链接设置为“ javascript:;
”才能够添加行为。
所以将文字的超链接设为“ javascript:; ”，并执行【显示弹出式菜单】行为，如图17-3 所示。
 
（2 ）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图17-4 所示。
 
（3 ）设置页面元素。
将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图17-5 所示。
 
（4 ）设置【高级】标签。
在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。
然后设置边框的宽度、颜色、阴影、高亮，如图17-6 所示。
 
注意：【菜单延迟】中时间的单位是毫秒（ms ），1000 毫秒等于1 秒，在设置时注意换算。
（5 ）设置的x 轴和y 轴参数。
在【位置】标签选项中设置弹出菜单的x 轴和y 轴参数，这两个参数表示弹出菜单左上角到网页左上角的距离，如图17-7 所示。
 
（6 ）保存网页文件，然后在浏览器中打开该网页，将鼠标光标移动到文字上方时即可看到有菜单弹出，本实例操作完毕。
通过Dreamweaver ，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美观、整洁。