如何有效利用dw制作漂亮的导航栏效果.docx

1、如何有效利用dw制作漂亮的导航栏效果目录目录 1增加新框架 1如何有效利用dw制作漂亮的导航栏效果 1建立CSS 导航代码 6Dreamweaver网页设计技巧 7怎样用Dreamweaver制作导航栏下拉菜单 11增加新框架如何有效利用dw制作漂亮的导航栏效果最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。Lets Go！一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然

2、后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤：1使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。图片如下：图1为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。2选中导航条上的

3、链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。图片如下：图2 显示层设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。图片如下：图3 隐藏层设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。3拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下

4、方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。4设置子层的显示属性为隐藏。按F12键在浏览器中预览页面，下拉菜单效果如图4所示。 图片如下：默认状态 图片如下：鼠标划过状态 图4下拉菜单效果 至此应该说基本实现了所要求的下拉菜单的效果，但是当把鼠标光标移动到层上，要选择子菜单时，层却消失了。这是因为“显示-隐藏层”的行为是设置在文本“菜单1”上，鼠标划出文本区域后，当然就响应了隐藏层的行为。所以还需要进一步的设置，给子层也加上“显示-隐藏层”行为。利用行为面板，给子层加上“显示-隐藏层”行为，更简单的方法是在链接文本的

5、HTML代码中拷贝如下代码：onMouseOver=MM_showHideLayers(layer2,show) onMouseOut=MM_showHideLayers( layer2,hide)在子层的DIV标签内粘贴以上代码即可。按F12在浏览器中预览，当鼠标划过映射时弹出下拉菜单，通过鼠标可以在下拉菜单中选择，鼠标划出映射和下拉菜单区域时，下拉菜单消失，完全实现了预定的效果。小节：1导航条的下边框线与子层的上边框应该重合，否则当鼠标光标移动到文本和层之间的空白区域时，层就会隐藏，达不到应有的效果；2对于有多个下拉菜单时，可以将多个子层放在一个父层中。为保持位置的统一，在调整完第一个子层

6、的位置后，记下层距上和距左的值。当导航图像为水平方向时，所有子层的距上的值都是相同的；当导航图像为垂直方向时，所有子层的距左的值都是相同的；3调整完全部子层的位置后，再设置层的显示属性，有助于保持所有子层格式的统一；4在层中插入图像或动画等页面元素可以制作出更酷的菜单效果。$page二、三道茶：使用Dreamweaver MX中的行为使用“显示弹出式菜单”行为，可以快捷在页面中创建出自定义样式的弹出菜单。具体的做法如下：创建一个空白HTML文档，保存文件。选中页面中的链接（文本或图象）打开行为面板，单击加号按钮，选择动作菜单中的“显示弹出式菜单”，弹出设置弹出式菜单对话框，内容窗口图5所示。图

7、片如下：图5 设置菜单项目对话框文本、链接、目标的意义都很容易理解。菜单：单击加号按钮可以添加菜单项目，选中菜单项目后单击减号按钮可以删除相应的菜单项目；选中菜单项目，单击 按钮可以转换到上级菜单，单击 按钮可以转换到下级菜单；单击上、下箭头按钮可以调整菜单项目的相对位置关系。设置完菜单项目后单击“外观”选项卡可设置菜单的外观，如图6所示。图6设置菜单外观对话框在第一个下拉列表中选择弹出菜单的样式为垂直菜单或者水平菜单，下面几个按钮可以设置文本的状态。 一般状态：在颜色选择器中选择菜单项目文本和单元格在默认状态下的颜色；滑过状态：在颜色选择器中选择当鼠标光标滑过单元格时菜单项目文本和单元格的颜

8、色；设置完菜单外观后，单击“高级”选项卡设置菜单的高级属性，如图7所示。图片如下：图7 设置菜单高级属性对话框前几个选项和一般表格参数的意义一致文本缩进：菜单项目文本在单元格中的缩进距离（单位：像素）；菜单延迟：打开弹出菜单的延迟时间（单位：毫秒）；弹出式菜单边框：选中“显示边框”就可以对边框颜色进行设置；不选中，就不会显示边框；设置完菜单高级属性后，单击“位置”选项卡设置菜单的位置，如图8所示。图片如下：图8设置菜单位置对话框在菜单位置中选择不同的按钮可以设置菜单与设定网页元素之间的位置关系。单击按钮设置弹出菜单位于网页元素的右下角；单击按钮设置弹出菜单位于网页元素的下方并靠近左边缘；单击按

9、钮设置弹出菜单位于网页元素的上方并靠近左边缘；单击按钮设置弹出菜单位于网页元素的右上角；在X和Y文本框中可以设定菜单的相对与网页元素左上角的距离（单位：像素）；选中“在发生onmouseout事件时隐藏菜单”复选框，当鼠标光标划出菜单时菜单隐藏，实际上就是应用了隐藏弹出式菜单的动作。设置完弹出菜单所有的属性后，单击确定按钮即可在页面中插入弹出式菜单，按F12键在浏览器中预览效果，如图9所示。图片如下：图9弹出式菜单效果使用显示弹出式菜单时，如果使用的网页元素为图像，需要首先给图像文件命名。体现在HTML代码中就是在img标签中加上id属性，这样才可以给图像应用上显示弹出式菜单的动作。建立CSS

10、 导航代码看到上面的导航条了吗？你可以点击一下看看它的效果，请注意，这可是用表格做出来的，你相信吗？其实代码很简单，现在让我们来看看该怎么做。 1.首先创建一个1x6的表格，参数为：border=0 cellspacing=3 cellpadding=0；2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；3.建立一个CSS样式.up和.down；代码如下： .upborder:4 outset royalblue;color:yellow;background:blue;cursor:hand.downborder:4 inset royalblue;color:#33ff

11、33;background:blue;cursor:hand 4.对插入的表格调用样式和行为，代码如下： class=up onMouseDown=className=down onMouseUp=className=up onMouseOut=className=up onclick=window.open(button.htm,_blank) 注意：链接请用onclick，不要用href，因为后者访问后有虚线框，不美观。现在存盘看看效果吧！Dreamweaver网页设计技巧1、灵活运用样式 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style

12、来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个span标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。 2、活用Format Table命令 在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Tab

13、le”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。 3、同时链接到两个网页 我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注

14、意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。 4、不给文件起中文名称 大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。 5、巧

15、妙设置字体分辨率 我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。 6、巧妙隐藏标签 如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应

16、的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比如我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category中选中Invisibel Elements，在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。 7、善用拖放技巧 我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的

17、，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。 8、自动设置更新时间 我们知道一个网页要想获得更多

18、的回头率，一个很重要的一条就是要不断更新。但对于我们这些个人网页来说，要天天及时更新恐怕不是很容易的事情。因此，我们希望网页能自动更新，下面笔者就提供一个能自动更新修改时间的源代码，我们只要把这段源代码添加到 /BODY之间就能实现更新时间的目的了: Script Language=JavaScript /script;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag，并从中选择a，然后在decoration中选中none，最后单击确定就成功了。 12、巧妙复制文字 在几个不同的应用程序

19、中间相互复制文字，是我们在实际工作中可能要常做的事情。但是，如果我们从Dreamweaver中复制编辑区中的文字到另外一个应用程序的时候，HTML代码和文字将一起被复制过去了，那么我们该如何才能只把编辑区中的文字复制下来呢?我们知道，通常复制时都用快捷键 Ctrl - C 来操作，如果我们在复制的时候多按一个C键，那么Dreamweaver将只会复制选中的文字了。 13、善用快捷键 为了提高操作的效率，我们可以在Dreamweaver中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式，也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0: 无格式 C

20、trl-T: 段落 Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6 14、自动关闭网页 如果我们希望自己的网页在指定的时间内能自动关闭，不妨在网页源代码中的标签后面加入如下代码: script LANGUAGE=JavaScript /script其中代码中的3000表示3秒钟，它是以毫秒为单位的。 15、巧妙设置对象名称 我们在用Dreamweaver来制作非常复杂的效果时，有可能需要经常重复地使用某一个或者多个对象，例如我们经常需要定位某个特定的表格、图象等，如果我们没有给某一个网页

21、中的多个对象取名的话，那么在重复应用这些对象的时候，可能很麻烦或者容易出错。为了能够方便调用这些对象，我们应该在每创建一个新的对象时，都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时，我们可以通过对象的“属性”面板来操作就行了。 16、为图象链接增加动态效果 有时我们为了要达到一种逼真的效果，希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时，我们首先需要准备两幅图象，第一幅是原始图象，第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图，在属性面板中的链接栏中填上要链接的文件，然后单击键盘上的F8键，在弹出的Behaviors窗

22、口中单击“+”号，随后选择“swap image”，在接着出现的窗口中选择第二幅图象，最后单击确定就可以了。在Dreamweaver中应用框架是非常容易的事情，下面我们就来看看具体的应用。 增加新框架 要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。 其操作如下： （1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。 （2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“

23、确定”按钮即可。 删除框架 若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。 改变框架属性 在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下： （1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。 （2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。 （3）在“框架大小”区域中

24、，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。 （4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。（5）单击“框架网页”按钮，则弹出“网页属性”对话框。 （6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。 （7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置。怎样用Dreamweaver

25、制作导航栏下拉菜单内容摘要： 在一些企业或门户网站的导航栏中，经常会看到下拉菜单，这样会使用户操作方便一些。其实，用Dreamweaver软件就可以制作下拉菜单，只需要点几下就出来了。而且良好地兼容IE、FF浏览器。 -在一些企业或门户网站的导航栏中，经常会看到下拉菜单，这样会使用户操作方便一些。其实，用Dreamweaver软件就可以制作下拉菜单，只需要点几下就出来了。而且良好地兼容IE、FF浏览器。以下是具体制作步骤：一、打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接：#。然后保存该网页文件。

26、 二、点击 窗口-行为 菜单，打开行为面板。 三、选中第一步输入的文字，点行为面板上的+号，在弹出的菜单中选-显示弹出式菜单。 四、在弹出的对话框中勾选 Dont show me this message again(不要再次向我提示此信息)，再点 继续。 五、在下列对话框分别设置内容、外观、高级、位置选项。在 内容 选项中，点+号可以添加菜单项，-号可以删除菜单项，缩进项可以自动生成二级菜单。 六、各项都设置好后，按F12，在浏览器中预览网页效果如下： 此时你会发现和网页同级的目录多了两个文件，分别是：arrows.gif、mm_menu.js。请勿修改、移动位置，这是弹出式菜单必须的图片、JS文件。 如需修改下拉菜单，可以选中文字，点击行为面板的 显示弹出式菜单 即可。 如果下拉菜单下面有Flash，为了不影响下拉菜单的正常效果和层次，需要给Flash添加透明代码： ，还需在embed标签中加入代码：wmode=transparent，原文链接：