Dreamweaver在居中页面使用层

 

在居中页面中使用层,最大的问题就是层的定位问题,当改变显示器分辨率后,层相对其它居中元素就会改变位置。本文介绍层相对其它居中元素不会错位的方法。

  层的绝对定位和相对定位

  层的绝对定位代码:

  <div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>

层的相对定位代码:

  <div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>

在居中页面中,插入相对定位层代码,层的位置在页面居中。但是它变得不可移动,使用不够方便。

  插入绝对定位代码,当left和top含有正负数值,层就无法居中。当清除left和top属性后,层可以居中,相对页面其它居中元素没有错位现象。

  描绘层和插入层的差别

  使用描绘层:

  在一个居中的页面中,使用描绘层的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
</head>
<body>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</body>
</html>

  使用插入层:

  

  在一个居中的页面中,使用插入层的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</head>
<body>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</body>

</html>
因为使用“描绘层”生成的代码不在居中代码之中,所以,在居中页面中,要使层相对其它元素没有错位现象,就必须使用插入层。

  在居中页面中,常用两种方法,实现层相对其它居中元素没有错位现象。

  使用插入层

  1.在一个居中页面中,把插入点放在文档中,实例中把插入点放在表格中。

  

  2.选择“插入”/“层”菜单。

  

3.在文档中插入了一个层。实例中,在表格中插入了一个层。在IE浏览器中测试,改变分辨率,层的内容相对其它居中元素都不会发生错位现象。

  

  在属性面板查看这个层的属性,这段插入层清除了“左”和“上”的值。

  这种方法,常用来制作弹出式菜单。

  使用嵌套层

  嵌套层是其代码包含在另一个层中的层。

  在使用嵌套层之前,先要对层做一些参数设置。选择“编辑”/“参数选择”菜单,在“参数选择”对话框中,选中“Netscape 4 兼容性:插入层时固定大小”,这样制作的嵌套层就可以兼容Netscape 4浏览器。并且选中“嵌套:如果在层中则使用嵌套”。

  

  打开层面板,不选中“防止重叠”。

  

  嵌套层:

  在一个居中页面,插入一个表格,在表格中,插入一个层,这个层相对表格,不会发生错位。在这个层中,使用“插入”/“层”命令,插入一个子层(嵌套层),无论在页面中怎么移动这个子层,它的位置相对其它居中元素都不会错位。

  在一个插入层中,可以插入多个嵌套层,然后把嵌套层移动到需要的地方,这样在居中页面就可以随心所欲的使用层了。

  结论:居中页面,制作弹出菜单,使用“插入”/“层”命令;使用层布局和用层放置内容,使用嵌套层。

时间: 2024-12-22 00:32:31

Dreamweaver在居中页面使用层的相关文章

Dreamweaver MX 2004高级技巧(9)在居中页面使用层

dreamweaver|高级|技巧|页面 在居中页面中使用层,最大的问题就是层的定位问题,当改变显示器分辨率后,层相对其它居中元素就会改变位置.本文介绍层相对其它居中元素不会错位的方法. 层的绝对定位和相对定位 层的绝对定位代码: <div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>

Dreamweaver网页制作教程:层及其应用

dreamweaver|教程|网页 层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置.层可以包含文本.图像或其它 HTML 文档.层的出现使网页从二维平面拓展到三维.可以使页面上元素进行重叠和复杂的布局.首先,请看下图: 我们首先来做一个层 1. 在「窗口」菜单>选"层",或点「插入」菜单>布局对象>选"层". 2. 在页面中显示一个层. 3. 通过周围的黑色调整柄拖动控制层的大小 4. 拖动层左上角的选择柄可以移动层的

使用jQuery制作Web页面遮罩层插件的实例教程_jquery

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

教程/dreamweaver/入门 Dreamweaver 4 简明教程12(层的使用)

dreamweaver|教程 如果你觉得用表格对页面元素进行定位太难掌握,不妨尝试利用层(Layer)这个好东西.点击属性面板的  按钮,光标会成为一个十字,在编辑窗口上拖动,就可以创建出一个层,我们可以在层上输入绝大部分的网页元素,例如图片.文字等.层的好处是可以放置在页面的任何位置,如下图: 选择一个层后,对应的属性面板如下: ① Layer ID:层的名称,用于识别不同的层: ② L,T:层的位置,L是距离页面左边界的距离,T是距离页面上边界的距离: W,H:层的宽和高: ③ Z-Inde

Dreamweaver MX 2004入门教程层及应用

dreamweaver|教程|入门教程 层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置.层可以包含文本.图像或其它 HTML 文档.层的出现使网页从二维平面拓展到三维.可以使页面上元素进行重叠和复杂的布局.首先,请看下图: 我们首先来做一个层 1. 在「窗口」菜单>选"层",或点「插入」菜单>布局对象>选"层". 2. 在页面中显示一个层. 3. 通过周围的黑色调整柄拖动控制层的大小 4. 拖动层左上角的选择柄可以移动

用Dreamweaver MX控制页面元素

dreamweaver|控制|页面 浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了. 建立主菜单栏新建页面,执行菜单"Insert/Table"命令打开"Insert Table"对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置"Cell Padding"."Cell Spac

用Dreamweaver插件制作滚动链接层

在制作网页时,制作者经常将网页菜单置于网页顶端,这样当浏览者浏览较长内容的网页时,如果想选择其他菜单,就不得不回到网页顶端才能选择其他菜单.本实例将学习如何制作一个滚动链接层,以便于浏览者对菜单进行选择. 效果说明 浏览页面时,右上角的快捷菜单跟随着滚动条的滚动而滚动,如图 57-1 所示. 创作思想 本实例将使用 Macromedia 的扩展插件 Perisistent Layers 制作出滚动链接层. 操作步骤 ( 1 )安装扩展插件.使用菜单命令[命令] | [扩展管理]调出 Macrom

Dreamweaver中提高页面显示速度的秘技

在安排Web页面的布局时,最常用的方法之一是用HTML表格界定页面的结构.例如,假设Web页面由顶端的导航条和它下面的两栏(列)构成--左边的列是一个导航条,右边的列是实际安置内容的区域.对于这样一个页面,我们可以用一个两行.两列的大表格进行布局:在第一行中,合并两个列然后放上顶端导航表格;在第二个行中,左边的列放上一个显示导航按钮的表格,右边的列再用一个表格显示页面的实际内容.用这种表格嵌套表格的方法进行布局可以得到非常好的效果. 要制作出这种页面,我们可以使用如下HTML代码: < TABL

页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理_CSS/HTML

实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码 代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px