频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
互联网产品设计进阶(16)灵活使用层布局页面
2011-03-29 13:45:46      个评论      
收藏   我要投稿

 
在很多网站中,合理的网页布局可以给用户带来很好的体验。在网站中,图层是网页的一个区域,在一个网页中可以有多个图层存在,它最大的优势在于:各个图层可以重叠,并且可以决定每个图层是否可见,同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后,就可以给网页提供强大的页面控制能力。

1.关于图层的一些特性
层可以包含文本、图像或其他任何可在 HTML 文档正文中放入的内容。这里谈一下今天对嵌套图层应用的一个体会。嵌套图层指的是一个图层创建在另外一个图层中,只要创建了一个父图层之后用鼠标点击图层内部,并且再次插入一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部,它们之间存在着继承关系。继承的作用是可以使子图层的可见性和父图层保持一致,由于很多动态网页的特效是通过控制图层的可见性来实现的,因此当父图层可见性改变时,子图层的可见性也随之改变。而且继承关系也可以让子图层和父图层的相对位置不变,比如我们拖拽父图层移动,此时子图层也会跟随着移动,这在制作动态网页的时候将显得非常有用。

图层最大的优势在于图层可以重叠,为了表示各个图层哪个在上面,哪个在下面,就要给每个图层设定一个序号,这个序号就是“Z-顺序”,它的意思就是除了屏幕的X和Y坐标之外,人为增加一个垂直于屏幕的Z轴。层对象的主要参数。

l         层编号:用于惟一标识每一个层以供网页中的程序使用。层编号中不能含有特殊字符和连字符,例如图4-30中的layer1,这时在叶面上插入第一个层时的默认值。

l         左和上:网页中层对象的位置,默认为以页面的左上角为基准。

l         宽和高:层对象的宽度和高度。

l         Z轴:若层对象在网页中出现重叠,Z轴数值大的层显示在数值小的层的上方。

l         显示:设置层对象的可见性,其有四个选项:default(默认)、inherit(继承)、visible(可见)和hidden(隐藏)。

l         背景图像:设置层的背景图片。

l         背景颜色:设置层的背景颜色。

l         标签:设置层对象所使用的HTML标签,共有DIV和SPAN两种,默认情况下Dreamweaver MX使用 p 标签创建层。。

l         溢出:设置当前层对象中的内容超出层的定义尺寸时的处理方法。有四种处理方式,visible:自动调整层的大小以适应层中的内容;hidden:保持层的定义尺寸,超出的内容将被隐藏;scroll:强制为层设置滚动条;auto:根据需要自动为层设置滚动条。

l         剪辑:定义当层对象超出设定尺寸时的基本显示区域。

2.实例注释
首先定义td_news、td_news_jysp,只有被选中的td突出显示。

<SCRIPT LANGUAGE="JavaScript">

                   <!--

                            function select_change_p(sShowTdId,sShowDivid){

                                     var aTd=new Array();

                                     aTd[0]="td_news";

                                     aTd[1]="td_news_jysp";

 

                                     //数组中所有td的样式还原,被选中的td突出显示

                                     for(var i=0;i<aTd.length;i++){

                                               document.getElementById(aTd[i]).background="images/menu_bg2.gif";

                                     }

                                     document.getElementById(sShowTdId).background="images/menu_bg1.gif";

 

                                     var aDiv=new Array();

                                     aDiv[0]="p_news";

                                     aDiv[1]="p_news_jysp";

 

                                     //隐藏数组中所有p,显示被选中的p

                                     for(var i=0;i<aDiv.length;i++){

                                               document.getElementById(aDiv[i]).style.display="none";

                                     }

                                     document.getElementById(sShowDivid).style.display="";

                            }

 

                            function tdOnMouseOver(o){

                                     o.style.backgroundImage=url(images/menu_bg1.gif);

   &nb

点击复制链接 与好友分享!回本站首页
上一篇:检测浏览器对样式的支持
下一篇:互联网产品设计进阶(17)设计良好的UGC激励机制
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站