186手机网 趣闻 ULTRADEV经典之旅-动态菜单实战

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

第一步: 准备图片  图片和层―― 准备图片  这里出现的是在下拉菜单结构中出现的图形:

1图2图images/up/menu1trig.gifimages/over/menu1trig2.gifimages/up/menu2trig.gifimages/over/menu2trig2.gifimages/up/menu3trig.gifimages/over/menu3trig2.gifimages/up/menu4trig.gifimages/over/menu4trig2.gif增加的图片images/menutopper.gifimages/shim.gif  (1) 在images文件夹下建立两个文件夹分别来存放1图和2图,例如:把文件夹取名为“UP”和“OVER”,“UP”中存放所有的“ 1 图”,“OVER”中存放所有的 “2 图”,这是非常容易定义的。
  (2) 由于在不同的文件夹,一个转换效果用到的“ 1 图”和 “2 图”可以用同样的文件名,这样是不是可以对这些图片进行管理呢:)
  举例:  up/menu1trig.gif(1图)over/menu1trig.gif(2图) 分别位于不同的文件夹下,它们的转换形成了一个动态按钮的效果。我们使用过程的概念是这样的:  2、图片由白色的 1 图变成蓝色的 2 图。
  3、如果同时触发一个下拉菜单,那么鼠标移到按钮上去的时候菜单可见,移开则不可见。 在前三个转换效果时,为了达到下拉菜单与按钮的一致性视觉效果,在它们之间都加入了一个小矩形的蓝条,这是通过在下拉菜单的顶行插入背景图片来实现的。
图片和层–建立层和表格  菜单系统是一共是由6个用标签命名的CSS-P层组成的。
层的名字层的用途:version3对于3.0版本浏览器的用户显示基本的信息。triggers把控制下拉菜单的按钮在在顶端排成一排。menu1第一个下拉菜单。menu2第二个下拉菜单。menu 3第三个下拉菜单。menucloser放置一个几乎与页面等大的透明GIF图用来关闭菜单的层具体说明:层:version3
 这个层放在源代码的最前面,并且在层的设置中属性是隐藏的,这样的话,3.0版本的浏览器可以在它们窗口的顶端看到层中的内容,包括里面的图片和链接,4.0版本的用户将不会看到这个层。  2、运用插入( INSERT)菜单或在OBJECT(物件)面板插入一个层,把它定位在左上角,紧贴上边界和靠近左边界的地方;
  3、如下图 picture 1 所示使用属性面板(Property Inspector )给层命名并且设置它的属性;
  4、选择层或按(F11)键激活层对它进行编辑;
  5、在层内插入一个单行单列的表格,并输入相应的信息,以便3.0版本浏览器的用户可以看到这些内容,例如:您的浏览器版本太旧,无法正常浏览该页!

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

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

  插入原始图片

上一篇
下一篇

本站内容转载自互联网,其发布内容言论不代表本站观点,如果其链接、内容的侵犯您的权益,烦请提交相关信息发邮件至xwei067@foxmail.com我们将及时予以处理。

建议您使用1366×768 分辨率、Microsoft Internet Explorer 11浏览器以获得本站的优质浏览效果

Copygight © 2017-2024 https://www.186shouji.com All Rights Reserved. 186手机网

站长:xwei067#foxmail.com(请把#换成@)

联系我们

联系我们

0577-28828765

在线咨询: QQ交谈

邮箱: xwei067@foxmail.com

工作时间:周一至周五,9:00-17:30,节假日休息