admin 管理员组

文章数量: 1184232


2024年3月10日发(作者:php网站源码是什么)

网页下拉菜单的制作

MacroMedia公司不愧是软件大家,从AuthorWare到Flash无一不是软件中的精品,

其主页制作工作Dreamweaver大概由于曲高和寡的原因吧,用的人反而不多,实际上

Dreamweaver中层(Layer)、行为(Action)、时间线(TimeLine)等工具使我们可以非常方

便地做出另人眼花缭乱动态网页。下拉菜单是WINDOWS中最常见的菜单,在网页的制

作中要做到却很不容易,好在有了Dreamweaver的层的概念,我们可以非常方便地在网

页中做出下拉菜单(本文所用的示例文件为:

/jzwl/,大家可以下载后对照看看)。过程如

下:

一、打开Dreamweaver,在SITE管理器中新建一个页面,双击即可用Dreamweaver

打开,可先设好其页面属性,背景图片等。

二、许多人对网页中有链接的文字没有下划线,而当鼠标指向它时却出现下划线且文

字颜色会改变而感到很奇怪,本文所用的例页中也有些效果,大家只要在网页的样式中加

入示例文件中之间的语句即可,不用自己再创建多种样式。这一操作

可按F10进入HTML编辑窗口复制即可。

三、在页面中输入好主菜单棒的文字,为了美观,主菜单棒可放在一个表格中,并固

定各单无格宽度,以免走样。如下图:

四、点击插入(Insert)菜单,选择层(Layer),在其属性窗口(如果没有该窗口可用Ctrl+F3

打开)中可看见其名称为“Layer1”,插入一个新层,作为“菜单一”的下拉菜单。点击该

层选中后,点击插入(Insert)菜单,选择表格(Table),选择好该表格中的行、列数,以及把

表格线宽度设为0,把表格底色设为某种颜色。如本例中“菜单一”的下拉菜单有4项,

即该表格有1列4行。然后在该表格中输入四个子项的菜单名,输入完成后调节表格的大

小与层的大小,文字的对中,每一项的链接,以及层的位置(均可在属性窗口中调节,或

用鼠标直接调节),使其正好在“菜单一”下。如下图:

五、重复第四步,依次建立层“Layer2”、“Layer3”、“Layer4”,输好子菜单项,设

好链接,并调整好每个层的位置。结果如下图:

到此文字输入部分全部完成,可按F12用你的IE浏览器看看位置是否正确。下面则是

关键了。

六、选中层“Layer1”,在其属性窗口中把“可视”项改为“hidden”,把该层隐藏起

来,如下图:

然后依次是层“Layer2”、“Layer3”、“Layer4”,把四个层全部隐藏。屏幕如下图:

七、用鼠标选中主菜单棒中的“菜单一”三个字,然后按F8打开“行为”(Action)

窗口,可见如下“Behaviors”窗口:

点击按钮,出现如下菜单:

选择“Show-Hide Layers”,表示该动作要对层进行显示或隐藏操作。出现如下窗口

在“Layer "Layer1"”上点击一下,再点击“Show”按钮,然后在“Layer "Layer2"”

点击一下,再点击“Hide”按钮,然后是“Layer "Layer3"”及“Layer "Layer4"”。表示

该动作是要把“Layer1”显示,而其它层均隐藏。如下图:

再点击确定按钮后,出现下图:

此时点击“Events”下“OnClick”旁的下剪头,出现如下菜单:

选择“onMouseOver”,表示该动作是在鼠标移到“菜单一”三个文字上时执行。至

于其它事件大家一看即可明白是怎么回事了。

八,仿照第七步,依次把“菜单二”、“菜单三”、“菜单四”设置好,但要注意设置“菜

单二”时,第二层显示,一、三、四层隐藏;设置“菜单三”时,第三层显示,一、二、

四层隐藏;设置“菜单四”时,第四层显示,一、二、三层隐藏;。


本文标签: 菜单 表格 输入 点击 出现