工作生活在高河

本稿于2009年底初稿，2010年部分修订，2011年3月9日定稿。
经过搜索国内未有设计采用Golive设计的，本文属博主原创，可以转载，但请注明出处。

网页的滑动布局是应用最广泛的一种快速多栏目的方式，一般应用于首页，像每天登录QQ时弹出的那个窗口的类型，今天尝试用golive来尝试解决这一问题，所做的只是抛砖引玉，请Golive爱好者赐教。

设计稿选取潞安集团公司首页左侧滑动为例。潞安集团网站总体布局合理，应用了新式的网页格式，这是做得很好的一面。在内容的更新上也有强与其它煤炭公司的方面，在字体上首页的12px的字体显示的非常美观，但在打开次页时，字体设计不合理，间隔、字号有待改进。

设计稿选取潞安集团公司首页左侧滑动为例。潞安集团网站总体布局合理，应用了新式的网页格式，这是做得很好的一面。在内容的更新上也有强与其它煤炭公司的方面，在字体上首页的12px的字体显示的非常美观，但在打开次页时，字体设计不合理，间隔、字号有待改进。

滑动效果分别采用：IE、谷歌及慧星分别测试效果

  1、基于纯图层设计方案

这三个滑动的页面都分别指向了不同的内容，也就是说用普通的网页表格不能做到这点，要实现这一点，除了框架布局<在下一方案将会提到>，能够利用的只用图层方式，图层在Golive的排版中，可以设定为隐藏或者显示，也就是说将三个不同内容的页面放在同一个位置。
如图所示，将三个页面不同的文字打在三个不同的图层中

图层全部显示

图层部分显示

在设定好图层后，应当对图层的显示进行更多的设定，在页面加载时，我希望的是浏览者看到只是潞安集团概况这一界面，所以应当加入标头动作对Layer2、Layer3进行隐藏操作。

图层的标头动作设定

然后依次设定隐藏，这样就可以看到滑动的效果了，此篇文章完成后，远航兄第一时间看到了效果，他说图层没有设定返回，就是说当鼠标离开后，仍然停留在上一次鼠标滑过的位置。我说这个简单：加上就好了，但是原网站作品就是这样的设计。

利用图层实现了网页滑动的效果，如果仅仅是这一页，此种方式就可以了。但如果这只是网页中的一部分，比如像潞安网页中，滑动只是其中的一个元素，这样的布局是不行的。

GoLive 图层是 DHTML 图层，可以在页面上重叠、隐藏和显示它们，并可以将它们制作成动画。 例如，图层通常与“显示/隐藏”动作一起使用，这使它们能够在鼠标触发时出现和消失，滑动的设计中就是利用此功能。图层可以包含背景图像或颜色，它们可以从页面的级联样式表中继承属性（请参阅关于级联样式表）。 它们可以精确定位，因为它们是使用 DIV 元素实现的。 DIV 元素（由用于指定图层宽度、可见性和绝对位置的 CSS ID 样式规定其格式）可以指示浏览器创建次分界线，次分界线是页面中正常 HTML 流的组成部分。

基于以上原因，图层无法实现在普通页面中的应用，但在应用于框架结构的页面中有极大的适用空间。