使用层布局页面制作网页

2022-12-30    分类: 网站建设

另一种网页布局的方法是使用层。层与标签类似,但与标签不同的是层可以浮动在其他网页对象的上面,可以自由拖动层的位置。与其他网页元素不同的是,层具有绝对定位的功能,设置层的位置以后,这个层可以浮动在其他层的上面,不受其他层的约束。上面的层会遮挡下面元素的内容。利用层的这一特点,可以用层来实现网页的布局。

使用层布局页面制作网页

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对网页中对象与事件的设置。两个链接的事件分别对两个层的隐藏与显示属性进行设置,这就是菜单。

文章名称:使用层布局页面制作网页
网站链接:https://www.cdcxhl.com/news/226670.html

成都网站建设公司_创新互联,为您提供手机网站建设网站导航品牌网站设计小程序开发网页设计公司App开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设