用Dreamweaver制作下拉菜单(下)
?牐犝馐歉龆嗉恫说ィ颐蔷驮谏匣乩覯acromedia→Flash菜单下再加三个子菜单:Flash素材、Flash站点和Flash论坛。
?牐?1.插入相关的层和表格。先插入一个一行五列的表格,在每个单元格中插入相应的图片,并在Macromedia图片后换行插入层“Layer1”,并设置层“Layer1”的高宽等属性。再在层“Layer”中插入一个四行一列的表格,将相应的图片插入单元格中。接着,在紧挨着Flash图片不换行的地方用Insert→Layer菜单插入层“Layer2”并设置属性。最后,在层“Layer2”中插入一个三行一列的表格,将刚刚制作好的三张图片分别插入单元格(^20040703a^1)。
?牐犓淙辉贒reamweaver中,层“Layer2”似乎和Flash图片之间有换行(这是因为表格宽度不够了),但是实际上是不换行的。
?牐?2.加入链接和Behavior,给每个图片加入必要的超链接,如果没有,可以链接到“#####”或者“javascript:void(0)”。Macromedia图片和层“Layer1”的Behavior不变,和上例保持一致。最后再给Flash图片和层“Layer2”加入Behavior。其中,Flash图片的Behavior为:当鼠标移动到Flash图片上时,显示层“Layer2”;当鼠标移出Flash图片时,隐藏层“Layer2”。“Layer2”层的Behavior和Flash图片一样。
?牐?3.最后的整理。这一部分是这个例子的关键。先隐藏每个层,接着按工具栏的按钮,使代码编辑环境在工具栏下部出现。在代码编辑环境中查找<div id="Layer2",直到最近出现的一个</div>都是用来控制层“Layer2”的。这一段代码之最后出现的代码是</a>。我们需要做的是将<div id="Layer2"和它前面的</a>连在一起写,删去中间的换行和空格!这一点非常重要(^20040703b^2)。
?牐犠詈蟊4胬投晒4蚩榔鳎涂梢钥吹叫Ч耍╚20040703c^3)。
#1?牐牷说?
?牐牷说ブ荒苡迷谕匙钭蟊呋蛘咄车纳媳撸艺鲆趁姹匦刖幼螅裨蛟诓煌直媛氏落谰突岢鱿执砦弧2还だ龅男Ч故侵档么蠹胰パ?习这个例子的!
?牐?1.插入层和表格并布局。打开Dreamweaver,执行Modify→Page Properties 命令,在弹出对话框的Left和Top都设置为“0”,意思是页面中的内容和和浏览器边框的的上、左距离都为“0”。点击Object面板的按钮,然后在页面中拖出一个层来,名字为“Layer1”。并且用鼠标拖住层的句柄,将层移动到页面顶部。和顶部距离为“0”。当然,你也可以通过属性面板来完成这个工作。然后在层“Layer1”中插入一个一行五列的表格,每个单元格分别插入相应的图片(^20040703d^4)。
?牐犜儆冒磁ネ铣鲆桓霾憷矗癓ayer2”。在其中插入四行一列的表格,子菜单的图片分别插入其中,并调整层的高和宽刚好包住子菜单的图片为好。
?牐?2.Timeline和Behavior。这部分是这个例子的关键。用Window→Timeline菜单打开Timeline面板,将层“Layer2”拖入Timeline面板内。这样会自动生成一个名为Layer2的时间轴。你可以拖动第二个关键帧的位置来确定这个时间轴的长度,这里,我们用默认值15帧。在最后一个关键帧上点鼠标右键,在弹出菜单中选择Add Behavior,然后在Behaviors面板中点“+”,接着选择 Timeline→Stop Timeline。在弹出对话框中选择Timeline1,最后点“OK”确定(^20040703e^5)。
?牐犜赥imeline面板中将最后一个关键帧选中,将层“Layer2”拖到和Macromedia图片正下方,并且紧密接触,不留一点空隙(^20040703f^6)。
?牐犜傺≈械谝桓龉丶。恪癓ayer2”竖直向上拖动,直到层的下边框和Macromedia图片下边框重合为止(^20040703g^7)。
?牐牭比唬陨贤隙ぷ鞫伎梢酝ü粜悦姘謇唇形⒌鳌H绻愕姆轿桓泻芎茫苯永檬粜悦姘謇床僮魇亲詈玫摹?
?牐牻恪癓ayer2”选中,添加Behavior:Timeline→Go to Timeline Frame。在新对话框的Frame中添入15,激发事件为onMouseOver;再添加Behavior:Timeline→Go to Timeline Frame。在新对话框的Frame中添入1。最后点击OK确定,激发事件为onMouseOut。选中“Layer1”,在属性面板上将层“Layer1”的Z-index值设置得大一些(100以上)。然后选中Macromedia图片,添加Behavior:Timeline→Play Timeline (Timeline1),激发事件为onMouseOver;再添加一个Timeline→Go to Timeline Frame 。在新对话框的Frame中添入1。最后点击OK确定,激发事件为onMouseOut。
?牐牶昧耍蠊Ω娉桑4妫阡榔髦新砩峡梢钥吹窖だ龅男Ч恕?