另一种网站布局的办法是用层。层与标签类似,但与标签不一样的是层可以浮动在其他网页对象的上面,可以自由拖动层的地方。与其他网页元素不一样的是,层具备绝对定位的功能,设置层的地方将来,这个层可以浮动在其他层的上面,不受其他层的约束。上面的层会遮挡下面元素的内容。借助层的这一特征,可以用层来达成网页的布局。
1、创建层
在 Dreamweaver CS6的设计视图中,单击需要插入层的地方,再选择插入布局对象AP Div命令,即可插入一个层。新插入的层,默认在网页的左上角,没边框与背景。可以在一个网页中插入多个层,达成网页的布局。
2、设置层的属性
网页中的层可以独立地设置层的背景颜色、内容、层次等属性,通过对层的设置可以达成不少网页成效单击一个层的边框,即可选择一个层,然后可以在层的属性面板中对层的属性进行设置。可以设置层的背景颜色、背景图像、大小、边距、可见性等属性。
3、设置层的Z轴
对层的属性设置时,除去对层的地方、大小、背景进行设置,另一个要紧设置是Z轴。层的Z轴指的是层的上下关系,上面的层可以遮盖住下面层的内容。层的Z轴数字较大就会在网页的最上层在层的属性面板Z轴文本框中输入一个数字,即可设置层的Z轴属性。网页中两个层不同Z轴设置的遮盖成效。
4、层的样式
层的属性设置,是借助单一对象的CSS样式来达成的。每插入一个层,就会在样式表中新建针对这个层的样式,CSS样式面板中层的样式双击CSS样式面板中一个层的样式,即可对这个层的样式进行设置。在样式表中可以达成不少在属性面板中没办法达成的设置。就是对层的边框属性进行设置可以对边框不同边的颜色、粗细、线型进行设置。
层进行属性设置后,即可在层中输入内容,层中可以插入表格、文本、图片等内容,层中的内容可以独立于网页的其他内容进行排版。
5、借助层达成网页的布局
分别对多个层进行属性设置,再正确放置层的地方,即可在层中输入内容,达成网站布局的排版是经过了属性设置的3个层达成的网站布局设计。在层达成的网站布局中,可以便捷地达成网站布局的调整。
6、6层中的样式代码
在进行这类层的设置时,事实上是 Dreamweaver CS6自动生成CSS样式脚本,针对单一层对象进设置。下面是本例中网页层布局的HTML代码。
7、用层制作下拉菜单
下拉菜单的主要特点是两个鼠标事件。当鼠标移动到某一个对象上时,显示菜单;当鼠标移出这对象时,菜单隐藏用层可以在网页中制作下拉菜单。对一个对象进行设置,当鼠标移动到这一对象上时,显示菜单层;当鼠标移出时,隐藏菜单层。在用层网站设计菜单时,可以借助这一思路来达成。
(1)在 Dreamweaver中新建一个网页,在网页中加入图中布局的链接与层菜单然后需要设置两个层的属性,并且设置这两个层隐藏。
(2)需要设置鼠标事件。当有两个菜单时,需要有如下的鼠标事件。
当鼠标移动到第一个链接上时,显示第一个层隐藏第二个层。
当鼠标移动到第二个链接上时,显示第二个层隐藏第一个层。
当鼠标在这个层上单击时,隐藏所单击的层。
(3)选择需要设置事件的对象,选择标签检査器选项卡,单击行为标签。在行为标签中单击添加行为按钮*,在显示的菜单中单击显示-隐藏元素,弹出显隐藏元素对话框。
(4)在显示-隐藏元素对话框中,需要进行对象和显示隐藏的设置。
(5)用与前面相同的办法,对两个链接与两个层进行各自的行为设置,如此就完成了一个菜单的制作。可以在层中插入图片、链接、文本等内容达成更多的菜单功能,如图12-17所示是用层制作的菜单成效。
(6)网页中的菜单功能,事实上就是用 Javascript对网页中对象与事件的设置。两个链接的事件分别对两个层的隐藏与显示属性进行设置,这就是菜单。