第十讲利用图层技术制作网页.docVIP

第十讲 利用图层技术制作网页 一、教学内容： 1、图层的特性 2、图层的属性 3、在图层中加载文本 4、浮动效果的实现 5、随滚动条移动的浮动层三种技术可以对页面进行布局 1)、表格: 可进行页面设计和排版,控制文本和图像在页面上的位置。 2)、框架:在同一个浏览器中显示不同的网页，即把浏览器窗口划分为若干个区域，每个 区域可链接不同的网页。 3)、图层：层是网页内容的容器，所有可以放置于网页中的内容，都可以放置在层上，并且可以定位在页面上的任意位置上指定一个名称来标识层面板中的层。左边和顶边距：指定层相对于页面或父层左上角的位置（以像素为单位）。宽度和高度：指定层的宽度和高度。指定层的Z-编号（或堆叠顺序号）。Z-编号较大的层出现在编号较小的层的上面。编号可正可负，也可以是0。决定层的初始显示状态。Default（默认）：不指定可见性属性，但多数浏览器把本项解释为Inherit（继承）。Inherit（继承）：继承父的可见性属性。Visible（可见）：显示层的内容，忽略父值。Hidden（隐藏）：隐藏层的内容，忽略父值。溢出：指定如果层的内容超过了它的大小将发生的事件：Visible（可见）： 增加层的大小，以便层的所有内容都可见。层向下和向右扩大。Hidden（隐藏）：保持层的大小，并剪栽掉与层大小不符的任何内容，不显示滚动条。Scroll（滚动）：给层添加滚动条，不管内容是否超过了层的大小。特别是通过提供滚动条来避免在动态环境中显示和不显示滚动条导致的混乱。Auto（自动）：在层的内容超过它的边界时自动显示滚动条。溢出style type=text/css #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 120; top: 234; } /style 注：层的定位方式 绝对定位(absolute)：坐标原点为浏览器的左上角 相对定位（relative）：坐标原点为层所在容器的左上角 修改代码： style type=text/css #Layer1 { position:relative; width:759px; height:300px; z-index:1; left: 0px; top: 0px; overflow: auto; } /style （二）飘动的图层 1）、首先打开要添加浮动层的网页文件 2)、对图层的属性进行修改，设置图层的背景3)、在图层中插入一个表格，在表格中输入文字4)、选中图层，打开代码视图，将以下代码放置在图层所对应的代码的后面：SCRIPT language=“JavaScript” var xPos = 200; var yPos = document.body.clientHeight; var step = 1; var delay = 20; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; img.style.top = yPos; function changePos() { width = document.body.clientWidth; height = document.body.clientHeight; Hoffset = img.offsetHeight; Woffset = img.offsetWidth; img.style.left = xPos + document.body.scrollLeft; img.style.top = yPos + document.body.scrollTop; if (yon) { yPos = yPos + step; } else { yPos = yPos - step; } if (yPos 0) { yon = 1; yPos = 0; } if (yPos = (height - Hoffset)) { yon = 0; yPos = (height - Hoffset); } if (xon) { xPos = xPos + step; } else { xPos = xPos - step; } if (xPos 0) { xon = 1; xPos = 0; } if (xPos = (width - Woffset)) { xon = 0; xPos = (width - Woffset); } } func