去过
Microsoft
的网站吗?
(
如图一
)
如果去过的话,那么你应该对这个站上面那条折叠式菜单的导航栏感到赞叹吧?(
“
嘿嘿,还是老盖强。
”“
啊,鸡蛋怎么会飞呀?!
”
)你想过你也能够做出这样的效果吗?来吧,不用羡慕了,心动不如行动!
折叠式菜单实际上是通过层的显示和隐藏,来达到这种效果的。现在就让我来说说如何制作吧。 Follow Me! 先打开 DreamWeaver ( DreamWeaver 对层的支持很好的,也是做网页的必备工具)。
第一步:先插入一个一行、两列的表格,方法:单击菜单上的 “ 插入 ” ( Insert ),再选取 “ 表格 ”(Table) ,在 “ 行 ” ( Row )中输入 1 ,在列( Columns )中输入 2 ,在单击 “ 确定 ” 。(如图二)为了美观,在表格的属性栏中,把宽和高分别设为 200px 和 30px ,并且把表格的边框颜色全部设为 #FFFFFF ,然后分别点选两个单元格,在属性栏中将其边框颜色设为 #6699FF 。在两个单元格内分别输入 “ 资料教程 ” 和 “ 相关软件 ” 。并在单元格属性栏中设为中间对齐(顺便说一句:在 DreamWeaver 中不但可以设定表格水平对齐方式,而且可以设定垂直位置对齐方式,在 FrontPage 就只能自己去写代码了,这也是我放弃 FrontPage 使用 DreamWeaver 的原因之一!)
第二步,在 “ 资料教程 ” 单元格内插入一个层。方法:单击菜单上的 “ 插入 ”(Insert), 再选取 “ 层 ”(Layer) 。这时,在单元格中便会出现一个层。这时我们并不满意层的位置,所以就来移动它。层的移动是非常容易的,选取层,然后按键盘上的箭头键就可以移动了,而且不受任何限制,呵呵,简单吧。同样,我们为了美观也可以在层的属性栏中设定它的大小,把宽和高分别设为 100px 和 90px 。
第三步:在层中插入一个三行、一列的表格,方法同第一步。并把宽和高分别设为 100px 和 90px, 以填满这个层。再把边框颜色做如第一步的设置。在三个单元格中输入 “DreamWeaver” 、 “FrontPage” 和 “HotDog” 。并在属性栏中设为中间对齐。
折叠式菜单实际上是通过层的显示和隐藏,来达到这种效果的。现在就让我来说说如何制作吧。 Follow Me! 先打开 DreamWeaver ( DreamWeaver 对层的支持很好的,也是做网页的必备工具)。
第一步:先插入一个一行、两列的表格,方法:单击菜单上的 “ 插入 ” ( Insert ),再选取 “ 表格 ”(Table) ,在 “ 行 ” ( Row )中输入 1 ,在列( Columns )中输入 2 ,在单击 “ 确定 ” 。(如图二)为了美观,在表格的属性栏中,把宽和高分别设为 200px 和 30px ,并且把表格的边框颜色全部设为 #FFFFFF ,然后分别点选两个单元格,在属性栏中将其边框颜色设为 #6699FF 。在两个单元格内分别输入 “ 资料教程 ” 和 “ 相关软件 ” 。并在单元格属性栏中设为中间对齐(顺便说一句:在 DreamWeaver 中不但可以设定表格水平对齐方式,而且可以设定垂直位置对齐方式,在 FrontPage 就只能自己去写代码了,这也是我放弃 FrontPage 使用 DreamWeaver 的原因之一!)
第二步,在 “ 资料教程 ” 单元格内插入一个层。方法:单击菜单上的 “ 插入 ”(Insert), 再选取 “ 层 ”(Layer) 。这时,在单元格中便会出现一个层。这时我们并不满意层的位置,所以就来移动它。层的移动是非常容易的,选取层,然后按键盘上的箭头键就可以移动了,而且不受任何限制,呵呵,简单吧。同样,我们为了美观也可以在层的属性栏中设定它的大小,把宽和高分别设为 100px 和 90px 。
第三步:在层中插入一个三行、一列的表格,方法同第一步。并把宽和高分别设为 100px 和 90px, 以填满这个层。再把边框颜色做如第一步的设置。在三个单元格中输入 “DreamWeaver” 、 “FrontPage” 和 “HotDog” 。并在属性栏中设为中间对齐。
第四步:最关键的一步来了!在层的属性栏中将
“
可视
”
设为
“
隐藏
”
(
Hidden
),这样在打开网页时便看不见这个层(要是看得见那还叫什么折叠式呀?!)。接着选取单元格,然后单击
DreamWeaver
最下面那一条状态栏右边的
“
显示行为
”
按钮(就是那个最中间的,由两个圆圈组成的那个),来给单元格添加行为。这里要注意一个:一定要看好了!在行为栏的标题栏上一定要是显示
“<td>”
才行,这说明你要添加的这个行为是添加在单元格上的,如果没有的话那就要重新点选单元格,直到成功为止。(如图三)
在 “ 行为目标 ”(Events For) 中选择一个合适的浏览器,一般是选择 “IE 4.0” 。然后单击左边的 “+” 按钮,来添加行为。在弹出的菜单中选择 “ 显示或隐藏层 ”(Show-Hid Layers) , 在弹出的窗口中选择 “Layer “Layer1”” ,就是我们刚才添加的那个层了,再单击 “ 显示 ” ( Show ),确定就行了。这时在行为栏中就出现了我们刚刚添加的这个行为了。接着单击 “ 事件 ”(Events) 下面右边的那个向下箭头按钮,在弹出菜单中选择 “ 当鼠标移上 ” ( OnMouseOver )。好了,这样当页面载入时,这个层并不会出现,只有当我们的鼠标移上单元格时才会出现,怎样?酷吧? Stop !不要高兴得太早了,不要忘了还有一个问题:鼠标移开单元格之后这个层还是显示着的呀!并不会自动消失的。(不要把电脑当成全自动的,你不告诉它怎么做时,它只是一堆废铁。 ^_^ )其实解决这个问题也很容易,我们可以添加显示层的行为,当然也可以添加隐藏层的行为呀!再单击 “+” 按钮,选取 “ 显示或隐藏层 ” ,还是选取 “Layer1” ,不过这次我们点击的是 “ 隐藏 ” ( Hide )了,再确定。然后选择 “ 事件 ” ,单击 “ 当鼠标移开 ”(OnMouseOut) 。 OK !完成了。
接下来,按照从第二步到第四步的过程,对 “ 相关软件 ” 单元格进行操作。一切完成之后,按下 “F12” ,预览一下,呵呵,怎么样?简单的几步,就完成了这样炫的效果,一切还是 DreamWeaver 的功劳啊! ( 效果如图四 )
还有一个需要注意,层的移动有时并不能做到 “ 所见即所得 ” 的效果,在编辑时本来位置很满意,但是预览时却一塌糊涂,这就要多预览几次,多修改,才能得到好的效果。
在 “ 行为目标 ”(Events For) 中选择一个合适的浏览器,一般是选择 “IE 4.0” 。然后单击左边的 “+” 按钮,来添加行为。在弹出的菜单中选择 “ 显示或隐藏层 ”(Show-Hid Layers) , 在弹出的窗口中选择 “Layer “Layer1”” ,就是我们刚才添加的那个层了,再单击 “ 显示 ” ( Show ),确定就行了。这时在行为栏中就出现了我们刚刚添加的这个行为了。接着单击 “ 事件 ”(Events) 下面右边的那个向下箭头按钮,在弹出菜单中选择 “ 当鼠标移上 ” ( OnMouseOver )。好了,这样当页面载入时,这个层并不会出现,只有当我们的鼠标移上单元格时才会出现,怎样?酷吧? Stop !不要高兴得太早了,不要忘了还有一个问题:鼠标移开单元格之后这个层还是显示着的呀!并不会自动消失的。(不要把电脑当成全自动的,你不告诉它怎么做时,它只是一堆废铁。 ^_^ )其实解决这个问题也很容易,我们可以添加显示层的行为,当然也可以添加隐藏层的行为呀!再单击 “+” 按钮,选取 “ 显示或隐藏层 ” ,还是选取 “Layer1” ,不过这次我们点击的是 “ 隐藏 ” ( Hide )了,再确定。然后选择 “ 事件 ” ,单击 “ 当鼠标移开 ”(OnMouseOut) 。 OK !完成了。
接下来,按照从第二步到第四步的过程,对 “ 相关软件 ” 单元格进行操作。一切完成之后,按下 “F12” ,预览一下,呵呵,怎么样?简单的几步,就完成了这样炫的效果,一切还是 DreamWeaver 的功劳啊! ( 效果如图四 )
还有一个需要注意,层的移动有时并不能做到 “ 所见即所得 ” 的效果,在编辑时本来位置很满意,但是预览时却一塌糊涂,这就要多预览几次,多修改,才能得到好的效果。
参考示例 : http://www.5h6.com/article/11918.html