ULTRADEV经典之旅-动态菜单实战

日期：2004年10月3日作者：清风网络学院查看:[大字体中字体小字体]

第一步：准备图片

　　图片和层―― 准备图片
　　本指南已经假设您已经学会制作WEB图形，我们是使用的 Macromedia Fireworks 来制作这些图片的。
　　这里出现的是在下拉菜单结构中出现的图形：

1图		2图
	images/up/menu1trig.gif		images/over/menu1trig2.gif
	images/up/menu2trig.gif		images/over/menu2trig2.gif
	images/up/menu3trig.gif		images/over/menu3trig2.gif
	images/up/menu4trig.gif		images/over/menu4trig2.gif
增加的图片
	images/menutopper.gif
	images/shim.gif

　　在制作转换效果时，合理地把这些WEB图存放在文件夹中是很重要的，在我们通常的制作过程中，我们是把它们放在images这个文件夹中，并以xyz1.gif和xyz2,gif这样的方式命名，这里我们另外一种方法，看看是不是比传统的方法更好啊！
　　（1）在images文件夹下建立两个文件夹分别来存放1图和2图，例如：把文件夹取名为“UP”和“OVER”，“UP”中存放所有的“ 1 图”，“OVER”中存放所有的 “2 图”，这是非常容易定义的。
　　（2）由于在不同的文件夹，一个转换效果用到的“ 1 图”和 “2 图”可以用同样的文件名，这样是不是可以对这些图片进行管理呢：）
　　举例：
　　up/menu1trig.gif（1图） 与 over/menu1trig.gif（2图） 分别位于不同的文件夹下，它们的转换形成了一个动态按钮的效果。

　我们使用过程的概念是这样的：
　　1、用户用鼠标触发1图。
　　2、图片由白色的 1 图变成蓝色的 2 图。
　　3、如果同时触发一个下拉菜单，那么鼠标移到按钮上去的时候菜单可见，移开则不可见。在前三个转换效果时，为了达到下拉菜单与按钮的一致性视觉效果，在它们之间都加入了一个小矩形的蓝条，这是通过在下拉菜单的顶行插入背景图片来实现的。

　　第四个菜单没有使用这个背景因为它没有挂接菜单。

　　图片和层--建立层和表格

　　菜单系统是一共是由6个用<div>标签命名的CSS-P层组成的。

层的名字	层的用途：
version3	对于3.0版本浏览器的用户显示基本的信息。
triggers	把控制下拉菜单的按钮在在顶端排成一排。
menu1	第一个下拉菜单。
menu2	第二个下拉菜单。
menu 3	第三个下拉菜单。
menucloser	放置一个几乎与页面等大的透明GIF图用来关闭菜单的层

　　具体说明：
　层：version3
　这个层放在源代码的最前面，并且在层的设置中属性是隐藏的，这样的话，3.0版本的浏览器可以在它们窗口的顶端看到层中的内容，包括里面的图片和链接，4.0版本的用户将不会看到这个层。
　　1、在DREAMWEAVER或是DU中新建一个文件；
　　2、运用插入（ INSERT）菜单或在OBJECT（物件）面板插入一个层，把它定位在左上角，紧贴上边界和靠近左边界的地方；
　　3、如下图 picture 1 所示使用属性面板（Property Inspector ）给层命名并且设置它的属性；
　　4、选择层或按（F11）键激活层对它进行编辑；
　　5、在层内插入一个单行单列的表格，并输入相应的信息，以便3.0版本浏览器的用户可以看到这些内容，例如：您的浏览器版本太旧，无法正常浏览该页！

Picture 1

　层：triggers……
　该层包括2行4列放置页面标题，即用来触发下拉菜单的按钮，该层的属性是可见的。
　　1、运用插入（INSERT）菜单或在OBJECT（物件）面板插入一个层，把它定位在左上角，紧贴上边界和靠近左边界的地方；
　　2、如下图picture 2 所示设置该层的属性。

Picture 2

　　3、如下图 picture 3所示在层内插入一个一行四列的表格。

Picture 3

　　插入原始图片
　　在 Triggers 层的第一个表格内，插入第一个按钮的 1 图，并依次在其它表格内插入图片。

（出处：急速软件下载学院）

ULTRADEV经典之旅-动态菜单实战相关文章：
·Dreamweaver UltraDev打造生成静态页的新闻系统3
·Dreamweaver UltraDev打造生成静态页的新闻系统2
·Dreamweaver UltraDev打造生成静态页的新闻系统
·DreamweaverMXUltradev探索：技巧荟萃
·Ultradev实例教程:5 做一个相对简单的网站后台(3
·Dreamweaver 4 & UltraDev 4两个BUG(字体设置不能保存和行号显示错位)的解决方法
·Ultradev实例教程:5 做一个相对简单的网站后台(1)
·Ultradev实例教程:5 做一个相对简单的网站后台(2)
·Ultradev实例教程:5 做一个相对简单的网站后台(3)
·Ultradev实例教程:目录
ULTRADEV经典之旅-动态菜单实战相关软件
·Dreamweaver UltraDev实例教程
·Dreamweaver UltraDev网页编程不求人
·Dreamweaver UltraDev实例教程
·DreamWeaver UltraDev动态网页设计
·UltraDev编程不求人
·Dreamweaver UltraDev实例教程
·Macromedia Dreamweaver UltraDevV4.01 Update
·Dreamweaver MX Ultradev探索

上一篇:用WinRAR制作开机密码程序

下一篇:用好AutoCAD的线型比例

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

ULTRADEV经典之旅-动态菜单实战

精品推荐

热点TOP10

特别推荐