Dreamweaver滑动菜单的制作

言归正传,废话少说。准备工作如下:

1. 在dw中新建一个空白文档(或者打开你要添加效果的页面)。

2. 设置好你自己的css风格。

3. 在页面上插入一个长500pix的表格(这里说明:插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变,如果你的页面之前没有做相关设置,那么这一部你可能要费点功夫整理一下你的页面结构)。

4. 将光标置入表格内,点击菜单 [插入——层] 插入一个长500高20的图层,并命名为layer1。

5. 然后再将光标置入图层layer1,点击菜单 [插入——层] 再插入一个长500高130的图层layer2;并将layer2的属性中左边距和上边距都设置为0,并为它指定一个你喜欢的背景色。

6. 然后重复步骤5的方法,再插入一个图层layer3,这个图层没什么特殊的用处,在我的这个教程中,我只不过是为了放置几个按钮而已。最后我的开起来如图:

TIPS:这里这么做的目的是为了给你要滑动的图层前面加一个挡板,只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。

现在开始,才正式进入到我们今天要制作的滑动菜单的制作过程中。

1.现在让我们再次重复上面的步骤5,再插入一个图层layer4,设置图层属性为宽500 、150高,刚好是刚才layer2和layer3的高度之和,并将图层layer4调整到另外两个图层下面。如图:

然后我们点击图层layer2前面的眼睛让他闭合,这样可以让我们看到它下面的图层layer4.

2.这时,我们点击ALT + F9 打开时间轴面板,DW已经为我们添加了默认的时间轴Timeline1,然后,我们选中我们要滑动的图层layer4,在上面点击右键,选择 [添加到时间轴] 这时我们可以在时间轴面板中看到我们刚刚制定的图层layer4,这说明,我们已经添加成功了!

3.然后我们点击时间轴上的第15桢,将图层layer4的属性面板中的上边距调整为150。到这里,一个能滑动的图层就算做好了,你可以拖动时间轴上面的红色方块慢慢从1走向15,你就可以看到你的这个图层慢慢的从layer2和layer3下面滑动出来!

时间: 2024-09-20 15:53:00

Dreamweaver滑动菜单的制作的相关文章

滑动菜单的制作

菜单 今天应朋友们要求,来对我网站上一个滑动菜单效果写一篇简单的教程:在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错.这个效果大家可以点击这里察看. 言归正传,废话少说.准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添加效果的页面). 2. 设置好你自己的css风格. 3. 在页面上插入一个长500pix的表格(这里说明:插入

滑动菜单的制作(组图)

菜单 今天应朋友们要求,来对我网站上一个滑动菜单效果写一篇简单的教程:在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错.这个效果大家可以点击这里察看. 言归正传,废话少说.准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添加效果的页面). 2. 设置好你自己的css风格. 3.在页面上插入一个长500pix的表格(这里说明:插入表

DW滑动菜单的制作

今天应朋友们要求,来对一个滑动菜单效果写一篇简单的教程:在牛筋大学软件部有一个关于层滑动的效果,好像Itnow上的广告也是采用的这样效果,不用的时候隐藏,用的时候点击一下按钮层就慢慢的滑动出来,即节省了有限的页面空间,还达到了令人羡慕的视觉效果,感觉起来还不错.这个效果大家可以点击这里察看. 言归正传,废话少说.准备工作如下: 1.在Dreamweaver中新建一个空白文档(或者打开你要添加效果的页面). 2.设置好你自己的css风格. 3.在页面上插入一个长500pix的表格(这里说明:插入表

jQuery的animate方法制作滑动菜单

周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴.我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行. 正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,

Dreamweaver也能轻松制作Flash相册

漂亮的Flash动画人人喜欢,不过制作起来的确有一些技术难度.你知道吗,Dreamweaver作为一个网页制作工具,还可以创建好玩的Flash相册.今天我们就来利用它来制作一个简单.漂亮的Flash相册,最终效果如图1. 图1 插入Flash元素 运行Dreamweaver,点击菜单"插入"→"媒体"→"图像查看器",系统会自动弹出"保存Flash元素"对话框,键入保存的文件名,例如:"Photo.swf"

30个下拉菜单和滑动菜单设计实例

30个很棒的下拉菜单和滑动菜单设计实例,值得参考. 每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futu

简单的滑动菜单

菜单 <!---  简单的滑动菜单   徐祖宁(唠叨)  2003.03  czjsz_ah@stats.gov.cn   滑动菜单是一种较常用的菜单形式,在罗列二级分类的场合下广泛使用.其特点是代码量极小,数据描述简洁.  本例使用无线表格,以类的书写方式表述.  本代码可自由扩散.---><style>table {font-size = 9pt}td {height = 20px}</style><body><span id="menu

位图菜单的制作

菜单 *******************************************************实用环境:pb6.5\pb70\pb80\pb90功    能:位图菜单的制作方    法:如下*******************************************************第一步,首先要建立一个menu对象,命名为:m_bitmap.设计格式有一个主菜单 File,下面有4个子菜单new\open ave\exit,如下: ----File----

30个很棒的下拉菜单和滑动菜单设计实例

每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futuro Apple Reviews Archer Gr