问蚁族崛起下载

一、导航条的制作
首先进行一些必要的前期工作，按ctrl+j，打开page properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。按ctrl+f2打开objects面板，点击层[img=20,20]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819141626.gif[/img]按钮后在页面中按住鼠标不放拖出一个层，然后在层的properties（属性）面板中设置各参数，layer id框填入title，l、t、w、h框分别填入8、15、480、15，背景色填入#006699，如图。将光标移至层内，点击objects面板上的表格按钮[img=21,21]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819141659.gif[/img]，插入一个一行四列的表格，设置如图。按住ctrl键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典论坛"和"天极网"为例，并加上链接。二、下拉选单的制作
现在开始制作将要下拉出现的菜单，同样用层来制作。再次从objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：layer id框填入menu1，l、t、w、h框分别填入8、34、120、80，背景色填入#999966，其中l和t两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由l和t两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。按f2打开layer（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。三、显示和隐藏效果的添加
这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。1．导航条部分
首先按ctrl键不放点击导航条中的第一个单元格，现按shift+f3打开beh**iors窗口，点[img=20,18]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819141856.gif[/img]按钮，在下拉选项中选中"show-hide layers"（如图）。如果选项中没有这一项，则选择show events for下的ie 5.0后，重新点 按钮，此时"show-hide layers"将出现。这时将会弹出一个窗口，如下图。在named layers框中会列出当前网页所有的层，选中"layer"menu1""，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，ok。这时会回到beh**iors窗口，窗口中出现如下图所示字样，点击events下的文字"onclick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onmouseover。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（show）。下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。再点[img=20,18]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819142037.gif[/img]按钮，在下拉选项中选中"show-hide layers"，在弹出窗口中选中"layer"menu1""，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"hide"按钮，ok。回到beh**iors窗口，点击向下的小箭头，在下拉选项中选中onmouseout。2．下拉选单部分
先选中层menu1，方法是点击层的边缘或在layer面板中点击menu1，用与导航条部分同样的方法在beh**iors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的状态如图所示。3．重复以上两部分，为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。四、下拉菜单的美化修饰
到这里，下拉菜单的功能效果已经实现了，你现在按f12就可以看到。不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。1．定义菜单字体样式
按shift+f11打开css style（样式）面板，点击面板下面的[img=18,15]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819142159.gif[/img]按钮
在弹出的"new style"窗的tag框内选中td标签，type选第二项redefinehtml tag，define选th** document only，如图。此时弹出设置窗口，不管其它的，只在右边的size框里选中12，单位为pixels。2．定义菜单链接样式
在样式面板中，点击面板下面的 按钮，在弹出窗中，type选第三项use css selector，tag框内选中a:hover标签，define选th** document only，如图。点击ok后在弹出窗中，color填#ff9933，decoration选none，点ok。返回到样式面板，点击面板下面的[img=18,15]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819142413.gif[/img]按钮，在弹出窗中，type选第三项use css selector，tag框内选中a:link标签，define选th** document only。点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。又返回到样式面板，点击面板下面的[img=18,15]file:/g:/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之dreamwe**er篇.files/2003819142413.gif[/img]按钮，在弹出窗中，type选第三项use css selector，tag框内选中a:v**ited标签，define选th** document only。点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。3．定义菜单边框样式
在样式面板中，点击面板下面的按钮，在弹出窗中，tag框内选中td标签，type选第二项redefinehtml tag，define选th** document only，如图。弹出设置窗口，在左边的列表中选border，右边四条边宽度都输入为1，颜色设为黑色#000000，style选为solid。