利用dw制作漂亮的导航栏效果

利用dw制作漂亮的导航栏效果
浏览：1031 次最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。

考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。

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属性，这样才可以给图像应用上显示弹出式菜单的动作。

一种细腻的导航效果的制作方法
浏览：133 次
首先分析效果的组成，鼠标经过时背景发生变化，小图象转动。

Ok！考虑使用dw中的swap image（翻转图）+背景图象变化（CSS定义）应该可以实现效果。

准备4张gif图象分别为：
鼠标经过时的背景图象（在fw中使用animate可以很简单的实现渐变效果，本图象透明度由0%渐变到100%）
鼠标划出时的背景图象（本图象透明度由100%渐变到0%）
动态小图象
静止小图象（在fw中设置图象格式为gif后保存即可）
1．背景效果实现
使用CSS定义两个类：.style1 { background-image: url(bg.gif)}
.style2 { background-image: url(b.gif)} 分别用于鼠标经过和划出时的背景图象
然后在单元格中添加如下代码：onmouseover="this.className='style1'"
onmouseout="this.className='style2'" 就可以实现鼠标经过时背景渐变出现，移开后背景渐变消失的效果。

2．翻转图效果实现
在单元格中插入静止小图象，使用行为添加swap image效果，设置鼠标经过后翻转为动态小图象。

为更贴近效果，需要把翻转图效果应用到单元格上，在静止小图象代码中剪切如下代码：onMouseOver="MM_swapImage('Image2','','2.GIF',1)"
onMouseOut="MM_swapImgRestore()" 粘贴到单元格代码td标签中。

就可以实现鼠标经过单元格时图象翻转，产生动态的效果。

至此即可实现全部的效果。

在这个例子中，使用dw实现的效果几乎可以与flash制作的效果媲美，甚至更好一点（我们实现了鼠标划出单元格时背景渐变消失的效果）。

小节：
1．在fw中精心制作渐变的背景图象（我只是随便做了两个渐变图象）+对导航单元格修饰可以使效果更加细腻，出色；
2．在使用该方法制作导航效果时，需要使用到多个单元格，注意swap效果不能被拷贝，拷贝代码后需要修改两处代码：onMouseOver="MM_swapImage('Image3','','2.GIF',1)"
<img src="/UploadFile/20090111/20090111132022332.gif" name="Image3" width="15" height="15" border="0" id="Image3">
修改翻转图的name为不同的值即可。

3．这个例子的技术含量并不是很高；而且偶不是很熟悉flash，不知道制作起来用dw或flash哪种更简单一些，这里提出来只是给大家提供一种解决问题的方法。

4．两个简单效果的叠加就可以制作出比较酷的效果，希望对大家能有所启示
补充一点：制作动画背景图象时，为实现效果，需要设置gif动画的循环为no looping（不循环）
:)
巧用样式表，让文本框与按钮变个样
浏览：35 次
在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色出现在您的主页上时，或多或少都会破坏主页的美观程度，那么可不可以改变它们的模样呢？我的回答是，这当然可以啊，下面我们就一起来动手来改变吧。

先看看在网页中经常出现的按钮与文本框的本来面目吧！如下图：
对照上图，我们怎么样才能改变文本框与按钮的模样呢？那在下面我为大家提供两种文本框与按钮样式作为例子参考，第一种是文本框与按钮无立体感，只是有线条颜色与填充颜色的，这种效果大家可能在很多网站上都看见过，给人一种特别的感觉，很不错的，第二种效果就比较特殊了，是将文本框做成一种类似于下划线的效果并且是彩色的，同时按钮的背景色也不再是灰色，而是彩色的，可以说这是一种非常酷的效果，好了，下面我就来说说这两种效果实现的详细操作步骤吧。

第一种效果：无立体效果的文本框与按钮
那我们就通过在DW3中网页的编辑操作为例来进行说明，首先我们已经在网页中插入了相应的表单对象，比如插入一个文本框与一个按钮，此时，我们在按下[F10]键，显示出网页源代码编辑窗口，那我们在网页的〈head〉与〈/head〉标签之间插入这个样式表：
〈style type="text/css"〉
input.smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
〈/style〉
好了第一步就完成了，下一步我们就分别在文本框与按钮的htm语句中加上这一句代码：
type="text" name="textfield" type="submit" name="Submit" value="平面按钮" height=35
src="/UploadFile/20090111/20090111132308874.gif" width=220>
怎么样，比起前面那张图中的标准按钮来说是不是美观多了，要实现起来其实也不是太难吧。

第二种效果：带颜色的下划线式文本框与按钮效果
同样，我们也需要样式表的帮助来实现这个效果，和第一种效果的操作步骤一样在网页的〈head〉与〈/head〉标签之间插入样式表，
〈style type="text/css"〉
input.smallInput{background:#ffffff;border-bottom-color:#ff6633;
border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt;
FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT:
normal}
〈/style〉
大家从上面的样式表中可以看出，这个效果的实现是通过两个样式来实现的，一个是文本框的，一个是按钮的，所以在文本框与按钮的htm语句中就需要插入两句不同的代码，在文本框中插入的是如例子〈input type="text" name="textfield" type="submit" name="Submit" value="彩色按钮" height=39
src="/UploadFile/20090111/20090111132308563.gif" width=225>
看看上面的效果，还会不会让您想起那单调的文本框与按钮呢？以上两种效果的方法都是通过样式表来实现的，使用方法也十分的简单，不要对我说这很难喔，最真心的希望能通过这篇文章介绍的方法能让你的主页多一点精彩。

否则就对不起我这双为了研究它们而成的黑眼圈了。

Dreamweaver未必了解的5个小技巧
浏览：22 次让DW支持中文文件名
Dreamweaver可以插入以中文命名的素材、也可以链接以中文命名的网页。

在插入素材或链接网页后切换到代码窗口，将乱码文件名改为相应的中文文件名即可。

定义大小不变的文字
更改浏览器字体大小设置，网页中字体尺寸也会发生变化。

如果使用了网页中的CSS样式表技术，就不会出现上述情况了。

使用快捷键“Shift+F11”打开样式表“CSS Style”编辑器，在窗口中单击鼠标右键执行“New CSS Style”命令，新建一个控制文字字体、字号属性的样式表，并将其添加到页面中，可以看到页面文本发生的变化。

预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。

一次链接到两个网页
超链接一次只能连到一个页面，如果一次在不同的框架页中打开文档，可以使用“Go To URL”行为。

打开一个有框架的网页，选择需要超链接的文字或图像，然后从Behaviors行为面板中选择“Go To URL”行为。

在弹出Go To URL对话框中显示所有可用的框架，选择其中一个我们想链接的框架并输入相应的URL，然后再选择另一个框架并输入另一个URL即可。

去掉图片和表格的间隙
要使图片和表格接触的地方不留空隙，仅在表格属性面板上把外框线(border)设为0是不行的，还需要在表格的属性面板上把单元格的两个属性设为0(即cellspacing="0"和cellpadding="0")。

实现网页每五分钟刷新一次
在Dreamweaver MX的Insert功能面板上选择“head”功能组，点击面板上“Refresh”按钮，弹出“Insert refresh”对话框，在“Delay”中输入以秒计的间隔时间，比如每五分钟刷新一次，则输入300。

最后在该对话框上复选“Refresh This Document”刷新当前窗口即可。