利用圖層技術(shù)制作網(wǎng)頁(yè)

1、第十講 利用圖層技術(shù)制作網(wǎng)頁(yè)一、教學(xué)內(nèi)容：1、圖層的特性2、圖層的屬性3、在圖層中加載文本4、浮動(dòng)效果的實(shí)現(xiàn)5、隨滾動(dòng)條移動(dòng)的浮動(dòng)層6、顯示-隱藏層二、教學(xué)難重點(diǎn)： 1、重點(diǎn)：圖層的屬性 2、難點(diǎn)：圖層中的行為面板的應(yīng)用一、圖層的特性1、三種技術(shù)可以對(duì)頁(yè)面進(jìn)行布局1)、表格: 可進(jìn)行頁(yè)面設(shè)計(jì)和排版,控制文本和圖像在頁(yè)面上的位置。 2)、框架:在同一個(gè)瀏覽器中顯示不同的網(wǎng)頁(yè)，即把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè) 區(qū)域可鏈接不同的網(wǎng)頁(yè)。3)、圖層：層是網(wǎng)頁(yè)內(nèi)容的容器，所有可以放置于網(wǎng)頁(yè)中的內(nèi)容，都可以放置在層上，并且可以定位在頁(yè)面上的任意位置上2、圖層的添加方法及外觀(guān)二、圖層的屬性1、層的編號(hào)：指

2、定一個(gè)名稱(chēng)來(lái)標(biāo)識(shí)層面板中的層。2、左（L）、上（L）：左邊和頂邊距：指定層相對(duì)于頁(yè)面或父層左上角的位置（以像素為單位）。3、寬（W）、高（H）：寬度和高度：指定層的寬度和高度。4、Z軸：指定層的Z-編號(hào)（或堆疊順序號(hào)）。Z-編號(hào)較大的層出現(xiàn)在編號(hào)較小的層的上面。編號(hào)可正可負(fù)，也可以是0。5、可見(jiàn)性：決定層的初始顯示狀態(tài)。 Default（默認(rèn)）：不指定可見(jiàn)性屬性，但多數(shù)瀏覽器把本項(xiàng)解釋為Inherit（繼承）。Inherit（繼承）：繼承父的可見(jiàn)性屬性。Visible（可見(jiàn)）：顯示層的內(nèi)容，忽略父值。Hidden（隱藏）：隱藏層的內(nèi)容，忽略父值。6、溢出：指定如果層的內(nèi)容超過(guò)了它的大小將發(fā)生的

3、事件：Visible（可見(jiàn)）： 增加層的大小，以便層的所有內(nèi)容都可見(jiàn)。層向下和向右擴(kuò)大。Hidden（隱藏）：保持層的大小，并剪栽掉與層大小不符的任何內(nèi)容，不顯示滾動(dòng)條。Scroll（滾動(dòng)）：給層添加滾動(dòng)條，不管內(nèi)容是否超過(guò)了層的大小。特別是通過(guò)提供滾動(dòng)條來(lái)避免在動(dòng)態(tài)環(huán)境中顯示和不顯示滾動(dòng)條導(dǎo)致的混亂。Auto（自動(dòng)）：在層的內(nèi)容超過(guò)它的邊界時(shí)自動(dòng)顯示滾動(dòng)條。二、圖層的應(yīng)用（一）在固定區(qū)域（單元格）顯示文本1、設(shè)置表格，加載元素2、將光標(biāo)定位在當(dāng)前的單元格內(nèi)，選擇“插入”/“布局對(duì)象”/“層”項(xiàng)目，插入一個(gè)新層3、改變層的大?。▽挾群透叨龋?、改變層的溢出屬性，經(jīng)常設(shè)置為“Auto”5、在層內(nèi)

4、輸入文字內(nèi)容6、進(jìn)入代碼視圖，層的相應(yīng)代碼：#Layer1 position:absolute;width:200px;height:115px;z-index:1;left: 120;top: 234;注：層的定位方式絕對(duì)定位(absolute)：坐標(biāo)原點(diǎn)為瀏覽器的左上角相對(duì)定位（relative）：坐標(biāo)原點(diǎn)為層所在容器的左上角修改代碼：#Layer1 position:relative;width:759px;height:300px;z-index:1;left: 0px;top: 0px;overflow: auto;（二）飄動(dòng)的圖層1）、首先打開(kāi)要添加浮動(dòng)層的網(wǎng)頁(yè)文件 2)、對(duì)圖層的

5、屬性進(jìn)行修改，設(shè)置圖層的背景3)、在圖層中插入一個(gè)表格，在表格中輸入文字4)、選中圖層，打開(kāi)代碼視圖，將以下代碼放置在圖層所對(duì)應(yīng)的代碼的后面： 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 chan

6、gePos() 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 = (h

7、eight - Hoffset) yon = 0; yPos = (height - Hoffset); if (xon) xPos = xPos + step; else xPos = xPos - step; if (xPos = (width - Woffset) xon = 0; xPos = (width - Woffset); function start() img.visibility = visible; interval = setInterval(changePos(), delay); function pause_resume() if(pause) clearInt

8、erval(interval); pause = false; else interval = setInterval(changePos(),delay); pause = true; start(); 5) 、將層的標(biāo)號(hào)設(shè)置為：“img”（三）隨滾動(dòng)條移動(dòng)的圖層1) 、首先打開(kāi)要打開(kāi)添加隨著拉條滾動(dòng)的浮動(dòng)層的網(wǎng)頁(yè)文件 2) 、對(duì)圖層的屬性進(jìn)行修改，設(shè)置圖層的背景3) 、在圖層中插入一個(gè)表格，在表格中輸入文字4) 、選中圖層，打開(kāi)代碼視圖，將以下代碼放置標(biāo)簽和之間：!- function MM_preloadImages() /v3.0var d=document; if(d.images)

9、 if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; iself.onError=null;currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0;NS = (document.layers) ? 1 : 0;IE = (document.all) ? 1: 0;function heartBeat() if(IE) diffY = document.body.scroll

10、Top; diffX = document.body.scrollLeft; if(NS) diffY = self.pageYOffset; diffX = self.pageXOffset; if(diffY != lastScrollY) percent = .1 * (diffY - lastScrollY);if(percent 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater2.style.pixelTop += percent;if(NS)

11、document.floater2.top += percent; lastScrollY = lastScrollY + percent;if(diffX != lastScrollX) percent = .1 * (diffX - lastScrollX);if(percent 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater2.style.pixelLeft += percent;if(NS) document.floater2.left += p

12、ercent;lastScrollX = lastScrollX + percent; function checkFocus(x,y) stalkerx = document.floater2.pageX;stalkery = document.floater2.pageY;stalkerwidth = document.floater2.clip.width;stalkerheight = document.floater2.clip.height;if( (x stalkerx & x stalkery & y (stalkery+stalkerheight) return true;e

13、lse return false;function grabIt(e) if(IE) whichIt = event.srcElement;while (whichIt.id.indexOf(floater2) = -1) whichIt = whichIt.parentElement;if (whichIt = null) return true; whichIt.style.pixelLeft = whichIt.offsetLeft;whichIt.style.pixelTop = whichIt.offsetTop;currentX = (event.clientX + documen

14、t.body.scrollLeft);currentY = (event.clientY + document.body.scrollTop); else window.captureEvents(Event.MOUSEMOVE);if(checkFocus (e.pageX,e.pageY) whichIt = document.floater2;StalkerTouchedX = e.pageX-document.floater2.pageX;StalkerTouchedY = e.pageY-document.floater2.pageY; return true;function mo

15、veIt(e) if (whichIt = null) return false; if(IE) newX = (event.clientX + document.body.scrollLeft);newY = (event.clientY + document.body.scrollTop);distanceX = (newX - currentX); distanceY = (newY - currentY);currentX = newX; currentY = newY;whichIt.style.pixelLeft += distanceX;whichIt.style.pixelTo

16、p += distanceY;if(whichIt.style.pixelTop document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;if(whichIt.style.pixelLeft document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixe

17、lWidth - 20;if(whichIt.style.pixelTop document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;event.returnValue = false; else whichIt.moveTo(e.pageX-StalkerTouc

18、hedX,e.pageY-StalkerTouchedY);if(whichIt.left 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;if(whichIt.top = (window.innerWidth+self.pageXOffset-17) whichIt.left = (window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17) whichIt.top = (window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;return false;return false;function dropIt() whichIt = null;if(NS) window.releaseEvents (Event.MOUSEMOVE);return true;if(NS) window.captureEvents(Event.MOUSEUP|Event.