• <tbody id="qvefl"></tbody>
  • <tbody id="qvefl"><pre id="qvefl"></pre></tbody>
    <em id="qvefl"></em>
    <progress id="qvefl"><big id="qvefl"><video id="qvefl"></video></big></progress>
    <legend id="qvefl"><pre id="qvefl"></pre></legend>
  • <rp id="qvefl"></rp> <tbody id="qvefl"><noscript id="qvefl"><video id="qvefl"></video></noscript></tbody><rp id="qvefl"></rp>
    <em id="qvefl"></em>
    <rp id="qvefl"></rp>

    1. <strong id="qvefl"><big id="qvefl"></big></strong>
    2. 13996527831
      网站建设知识详细

      使用层布局页面制作网页

      发表日期:2021-01-17 22:12:06   作者来源:米卓网络   浏览:    

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

      使用层布局页面制作网页

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