如何有效利用dw制作漂亮的导航栏效果
目录
目录    1
增加新框架    1
如何有效利用dw制作漂亮的导航栏效果    1
建立CSS 导航代码    6
Dreamweaver网页设计技巧    7
怎样用Dreamweaver制作导航栏下拉菜单    11
增加新框架
如何有效利用dw制作漂亮的导航栏效果
   最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿su
per大餐。Let’s Go！
  一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单
  实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤：
  1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。
  　
图片如下：

              图1
  为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。
  2．选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。
  　
图片如下：

              图2 显示层
  设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。
  　
图片如下：

              图3 隐藏层
  设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。
  3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。
  4．设置子层的显示属性为隐藏。
  按F12键在浏览器中预览页面，下拉菜单效果如图4所示。
   
图片如下：

        默认状态
   
图片如下：

        鼠标划过状态
        图4下拉菜单效果
  至此应该说基本实现了所要求的下拉菜单的效果，但是当把鼠标光标移动到层上，要选择子菜单时，层却消失了。这是因为“显示-隐藏层”的行为是设置在文本“菜单1”上，鼠标划出文本区域后，当然就响应了隐藏层的行为。所以还需要进一步的设置，给子层也加上“显示-隐藏层”行为。利用行为面板，给子层加上“显示-隐藏层”行为，更简单的方法是在链接文本的HTML代码中拷贝如下代码：
 
onMouseOver="MM_showHideLayers('layer2','','show')" onMouseOut="MM_showHideLayers(' layer2','','hide')"

  在子层的DIV标签内粘贴以上代码即可。按F12在浏览器中预览，当鼠标划过映射时弹出下拉菜单，通过鼠标可以在下拉菜单中选择，鼠标划出映射和下拉菜单区域时，下拉菜单消失，完全实现了预定的效果。
  小节：
  1．导航条的下边框线与子层的上边框应该重合，否则当鼠标光标移动到文本和层之间的空白区域时，层就会隐藏，达不到应有的效果；
  2．对于有多个下拉菜单时，可以将多个子层放在一个父层中。为保持位置的统一，在调整完第一个子层的位置后，记下层距上和距左的值。当导航图像为水平方向时，所有子层的距上的值都是相同的；当导航图像为垂直方向时，所有子层的距左的值都是相同的；
  3．调整完全部子层的位置后，再设置层的显示属性，有助于保持所有子层格式的统一；
  4．在层中插入图像或动画等页面元素可以制作出更酷的菜单效果。
{$page}
二、三道茶：使用Dreamweaver MX中的行为
  使用“显示弹出式菜单”行为，可以快捷在页面中创建出自定义样式的弹出菜单。
  具体的做法如下：
  创建一个空白HTML文档，保存文件。选中页面中的链接（文本或图象）打开行为面板，单击加号按钮，选择动作菜单中的“显示弹出式菜单”，弹出设置弹出式菜单对话框，内容窗口图5所示。

图片如下：

        图5 设置菜单项目对话框
  文本、链接、目标的意义都很容易理解。
  菜单：单击加号按钮可以添加菜单项目，选中菜单项目后单击减号按钮可以删除相应的菜单项目；选中菜单项目，单击 按钮可以转换到上级菜单，单击 按钮可以转换到下级菜单；单击上、下箭头按钮可以调整菜单项目的相对位置关系。
  设置完菜单项目后单击“外观”选项卡可设置菜单的外观，如图6所示。

        　图6设置菜单外观对话框
  在第一个下拉列表中选择弹出菜单的样式为垂直菜单或者水平菜单，下面几个按钮可以设置文本的状态。
  一般状态：在颜选择器中选择菜单项目文本和单元格在默认状态下的颜；
  滑过状态：在颜选择器中选择当鼠标光标滑过单元格时菜单项目文本和单元格的颜；
  设置完菜单外观后，单击“高级”选项卡设置菜单的高级属性，如图7所示。

图片如下：

          图7 设置菜单高级属性对话框
  前几个选项和一般表格参数的意义一致
  文本缩进：菜单项目文本在单元格中的缩进距离（单位：像素）；
  菜单延迟：打开弹出菜单的延迟时间（单位：毫秒）；
  弹出式菜单边框：选中“显示边框”就可以对边框颜进行设置；不选中，就不会显示边框；
  设置完菜单高级属性后，单击“位置”选项卡设置菜单的位置，如图8所示。
       
图片如下：

          图8设置菜单位置对话框
  在菜单位置中选择不同的按钮可以设置菜单与设定网页元素之间的位置关系。单击按钮设置弹出菜单位于网页元素的右下角；单击按钮设置弹出菜单位于网页元素的下方并靠近左边缘；单击按钮设置弹出菜单位于网页元素的上方并靠近左边缘；单击按钮设置弹出菜单位于网页元素的右上角；
  在X和Y文本框中可以设定菜单的相对与网页元素左上角的距离（单位：像素）；
  选中“在发生onmouseout事件时隐藏菜单”复选框，当鼠标光标划出菜单时菜单隐藏，实际上就是应用了隐藏弹出式菜单的动作。
  设置完弹出菜单所有的属性后，单击确定按钮即可在页面中插入弹出式菜单，按F12键在浏览器中预览效果，如图9所示。

图片如下：

          图9弹出式菜单效果
  使用显示弹出式菜单时，如果使用的网页元素为图像，需要首先给图像文件命名。体现在HTML代码中就是在img标签中加上id属性，这样才可以给图像应用上显示弹出式菜单的动作。
建立CSS 导航代码
看到上面的导航条了吗？你可以点击一下看看它的效果，请注意，这可是用表格做出来的，你相信吗？其实代码很简单，现在让我们来看看该怎么做。

  1.首先创建一个1x6的表格，参数为：border=0 cellspacing=3 cellpadding=0；
 
  2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；
 
  3.建立一个CSS样式.up和.down；代码如下：
 
<style>
.
up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style> 
 
  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来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。
 
  2、活用Format Table命令
  在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘
落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜等等。
 
  3、同时链接到两个网页
  我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
  4、不给文件起中文名称
  大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver复制快捷键ctrl加什么对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。
  5、巧妙设置字体分辨率
  我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。
  6、巧妙隐藏标签
  如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比如我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category中选中Invisibel Elements，在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。
  7、善用拖放技巧
  我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接
拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。

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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。