当前位置:首页 > 数码 > 网站
 
网站

让层相对定位的方法

时间:2008-8-18 22:33:59   作者:谷春江   来源:峡谷居资讯网   阅读:327   评论:0
内容摘要:在网页设计中,层(layer)的作用是很大的。它可以制作浮动图片广告,可以制作提示文本框,更可以制作简洁明快的弹出式菜单……。这里,讲一讲用层制作弹出式菜单的关键点:相对定位。因为,绝对定位的层,当显示器分辨率变更后,会发生明显的错位现象,这就需要层的相对定位技术让它跟随某表格或...

      在网页设计中,层(layer)的作用是很大的。它可以制作浮动图片广告,可以制作提示文本框,更可以制作简洁明快的弹出式菜单……。

      这里,讲一讲用层制作弹出式菜单的关键点:相对定位。

      因为,绝对定位的层,当显示器分辨率变更后,会发生明显的错位现象,这就需要层的相对定位技术让它跟随某表格或文字移动,不论分辨率或浏览器窗口大小如何变化。因为我们一般不会想让弹出菜单在页面中到处乱“飘”,而难以点击到。

      但是,如果直接在Dreamweaver的Css面板中的“AP元素”选项卡中直接生成层肯定是绝对定位的(相对页面左边和上边定位)。而用插入记录菜单相对网页元素生成的相对定位的层,虽然刚开始是相对定位的,可是一旦用鼠标拖动移动就又变成绝对定位的了。

      而在实际应用中,我们一般既要求层制作的菜单相对某表格或文字定位,又需要精细地微调其位置。

      怎么做到两者兼顾呢?这就要运用父层和子层的概念。相对一个层建立的层就是其子层,而前者则是父层。当父层移动,子层则跟随移动,父层相对某表格或文字不动,则其子层也会相对这些表格或文字不动。

      好了,知道这些,问题就好解决了。先在需要相对定位的表格或其他网页元素中,找一个不会被轻易改动的定位点将光标焦点定位其中,然后用Dreamweaver的菜单选项:插入记录——布局对象——AP Div,建立一个相对定位的层(父层)。然后将光标定位在这个父层中,再用上述方法建立一个或若干个相对这个父层的子层,然后把这个父层设为“hidden”(隐藏),各子层中添加表格建立菜单选项,然后把这些子层按照需要拖动到需要的位置,设好相关的文字及层的“显示/隐藏”行为等。

      这样,用相对定位的层做的菜单就大功告成了,而它绝对不会出现随分辨率和窗口大小变化而错位的情况。

      本站页面顶部导航栏“IT科技”和“人文旅游”弹出式下拉菜单就是用这一技术做的,大家可以看看实际效果。


标签:Dreamweaver 网页设计  相对定位 弹出式菜单 
相关评论
友情链接
boke112导航 中国E动网 网钛文章管理系统 快科技(原驱动之家) Lbuilder 今日头条 悟空问答
关于我们 - 网站地图 - 客户端下载

©2005-2018 峡谷居资讯网,xgj-info.com.谷春江,Gu Chunjiang.版权所有,All Rights Reserved.

川公网安备 51030002000086号

蜀ICP备05008512号-1