《Dreamweaver制作下拉导航菜单》由会员分享，可在线阅读，更多相关《Dreamweaver制作下拉导航菜单（6页珍藏版）》请在金锄头文库上搜索。
1、用 Dreamweaver 制作下拉菜单的原理：它利用了 Behaviors （行为）面板中的内置方法 Show-Hide La yers （隐藏-显示层）方法，并用onMouseOver （鼠标移至）和onMouseOut （鼠标移开）来触发层的隐藏 和显示，而将要出现的菜单就在“层”中。一、导航条的制作按 CTRL+F2 打开 Objects 面板，点击【层按钮】在页面中按住鼠标不放拖出一个“层”，然后在层的 Pro per ties （属性）面板中设置各参数，Layer ID框填入title, L、T、W、H框分别填入8、15、480、30， 背景色填入#006699，如图。将光标移至层
2、内，点击Objects面板上的【表格按钮】，插入一个一行四列的“表格”。 按住CTRL键不放，公别点取表格的四个单元格，然后设置它们的宽度为120（120*4=480），高度为25, 并在前两个单元格中输入“关于公司”和“新闻中心”，做为主菜单名，并加上链接。二、下拉选单的制作现在开始制作将要下拉出现的菜单，同样用层来制作。再次插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框 分别填入8、34、120、80，背景色填入#999966,其中L和T两个参数是设置这个层距离窗口 左边框 和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完
3、成后的可用性。looov#in enulP5010&250. 3M35P莎厂 450I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I50 jl性层编号左宽120Z轴i背員图像m emil上r颊高80可见性E i bl H背杲颜色r;#9999
4、66这时候，我们便可以在 menu1 这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表 格来做菜单（W=120,H=80）。这个层将作为“关于公司”的下拉选单出现，填入你所需要的菜单并链接。 同样的方法，制作其它的下拉选单（层 menu2）。onMouseMove urJil due eLhit筋显不-隐载层 曲显于-隐識层Wee制作这一步要注意的地方就是下拉菜单所在的层（menul、menu2）的位置非常重要（由L和T 两个参数决定）。它们的上边线应该紧贴导航条的下边线。如果远离导航条的话，鼠标一离 开导航条，菜单就消失了。按F2打开LAYER （层）面板，其中列出了网页中的三
5、个层，点menul和menu2的前面一 格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态 是不可见的。三、显示和隐藏效果的添加 本步骤分为两部分： 第一，对“导航条中的主菜单”添加控制显示隐藏的命令 第二，给“下拉选单”本身添加显示隐藏的命令。1 导航条部分首先按CTRL键不放，点击导航条中的第一个单元格，现按Shift+F3打开Behaviors（行为）窗 口，在下拉选项中选中Show-Hide Layers（如图）。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点按钮，此时Show-Hide Layers将出现。交换團槪弹
6、廿信息打JT浏览器窗口弛动辰祥制 Shockwave 5 Flash改受屁性吋间轴显示独LL式莱单 检苣箱件检至恚羊设宣旨朋栏图像 设置丈本适悶 J av-iS oript 疏转荚牟 眺转菜牟蘇 供I血 隐京強土式熊单 预尤载汛图像 显采爭件这时将会弹出一个窗口，如下图。在Named Layers（命名的层）框中会列出当前网页所有的层，选中“层 menul ”，因为我们想要menul这个层对“关于公司”响应。然后点下面的“显示（Show） ”按钮一0K。这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字“onClick”，会出 现一个向下的小箭头，点击它，在下
7、拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个 单元格时，下拉选单menu1的状态变为显示（Show）。下一步是让下拉选单 menu2 在鼠标移至第二个单元格时再变加隐藏状态。再点按钮，在下拉选项中选中Show-Hide Layers，在弹出窗口中选中“层menu1 ”，因为我们想要 menu1这个层对“新闻中心”响应。然后点下面的“隐藏（hide） ”按钮，0K。回到 Behaviors 窗口，点击向下的小箭头，在下拉选项中选中 onMouseOut。2下拉选单部分先选中层menu1，方法是点击层的边缘或在LAYER面板中点击menu1，用与导航条部分同样的方法在 B
8、ehaviors 窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层 menul 时，层 menul 就 自动隐藏。3重复以上两部分，为导航条的第二个主菜单“新闻中心”和层 menu2 添加显示、隐藏层命令。【若鼠标停留“导航标题栏” （关于公司），看到“下拉选单”不整齐，则可把第一行的“公司简介”改 成“空白”】四、下拉菜单的美化修饰到这里，下拉菜单的功能效果已经实现了，你现在按 F12 就可以看到。不过你一定也发现菜单有点难 看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。1定义菜单字体样式按 Shift+F11 打开 CSS Styl
9、e （样式）面板，点击面板下面的按钮在弹出的New Style窗的 Type 选 Redefine HTML Tag, Tag 框内选中 td 标签，Define 选 This Document Only,如图。此时弹出设置窗口，不管其它的，只在右边的Size框里选中12,单位为pixels。td的css規则定义XiiV傷素（p吨XVV像素（pxj粗細迪:祥式:犬虫:分类类型行高修怖；下划线 上划线如 删琮线 闪烁 无W2定义菜单链接样式 在样式面板中，点击面板下面的 按钮，在弹出窗中， Type 选 Use CSS Selector，Tag 框内选中 a:hover 标签，Define 选
10、This Document Only.点击确定后在弹出窗中，Color填#ff9933. Decoration选none，点OK。a:hover的CSS握則定义类型勞类字体（）：V橡索（PK）Vv像索I.PX）丈小:样式:行高（1）:修怖丄：下划线 上划线） 删除线 闪烁VVV变体迫.：尢小写:颜色瞪?粗细迪:返回到样式面板，点击面板下面的按钮，在弹出窗中，Type选Use CSS Selector. Tag框内选中a:link 标签，Define 选 This Document Only。点击OK后在弹出窗取消帮助中, Color 填#ffffff，Decation i确定又返回到样式面板，
11、点击面板下面的按钮，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。table的CSS煤则定文分类边框II样式上:右:下J.左:宽度回全部相同世）1V像素晶.V-1像素71 -像素（p壽V1 -1像素（p站V颜色回全部相同追）逗 #000000fl#000000#000000#000000应用（A）帮助
