1、2021/8/21第四章 使用層和框架布局頁面v創(chuàng)建層v層的基本操作v層和表格的轉(zhuǎn)換v框架和框架集的基本操作v設(shè)置框架和框架集的屬性并創(chuàng)建鏈接2021/8/22什么是圖層v在上網(wǎng)時，你會發(fā)現(xiàn)有的網(wǎng)站頁面上有個小精靈走來走去，時而在文字或圖片上，時而在某些圖片下，這是如何實(shí)現(xiàn)的呢？v實(shí)現(xiàn)這種效果有多種方法，而使用圖層來完成這種效果是最容易的。v什么是圖層呢？q通俗地講，圖層就象是含有文字或圖形等元素的膠片，一張張按順序疊放在一起，組合起來形成頁面的最終效果。圖層可以將頁面上的元素精確定位。圖層中可以加入文本、圖片、表格、插件，也可以在里面再嵌套圖層。2021/8/23創(chuàng)建層v創(chuàng)建平鋪式層q沒有重

2、疊q層面板（窗口/層，F(xiàn)2）中選中“防止重疊”q插入工具欄中的“繪制層”鼠標(biāo)拖出來一個矩形框q按住ctrl鍵可連續(xù)繪制多個層v創(chuàng)建重疊式層q層面板中“防止重疊”的不選中v創(chuàng)建嵌入式層q被包含在其他層中q子層會跟著父層一起移動q兩種方法：光標(biāo)定位在要創(chuàng)建子層的父層，選擇“插入/布局對象/層”拖動插入欄中的“繪制層”到父層中2021/8/24設(shè)置層的屬性v“編輯/首選參數(shù)”類別中選擇“層”q顯示默認(rèn)，繼承，可見，隱藏q寬q高q背景顏色q背景圖像q嵌套：如果在層中則使用嵌套qNetscape 4兼容性：插入的層是固定大小的2021/8/25設(shè)置層的屬性v設(shè)置單個層屬性v同時設(shè)置多個層的屬性2021/

3、8/26編輯層v使用層面板v在層中添加內(nèi)容q光標(biāo)在層中定位“插入/圖像”（或：插入欄中選擇“圖像”；或：ctrl+alt+I）v選擇層q層面板中單擊該層的名稱q單擊層的標(biāo)簽q單擊層的邊框q多個層：shift（最后選中的：黑色控制柄）v移動層q光標(biāo)變成 拖動鼠標(biāo)q按方向鍵2021/8/27編輯層v防止層重疊q層面板上“防止重疊”q“修改/排列/防止層重疊”q當(dāng)啟動防止層重疊選項(xiàng)后，不會自動修正已有的重疊層v改變層的堆疊次序（層面板中）q選中一個層向上或向下拖q單擊改變層的編號q或：在層的屬性面板中，改變“Z軸”的屬性2021/8/28編輯層v調(diào)整層的大小q拖動層的控制柄q按下ctrl+箭頭鍵微調(diào)

4、qShift+ctrl+箭頭鍵網(wǎng)格大小移動q屬性面板中，輸入寬度和高度的值q多個層：“修改/對齊/設(shè)成寬度（高度）相同”v對齊層q左、右、對齊上緣、對齊下緣2021/8/29編輯層v顯示/隱藏層q層面板中的眼睛q睜眼可見；閉眼隱藏；沒眼繼承q正文始終是可見的q顯示/隱藏層動作創(chuàng)建層取消對層的選擇“窗口/行為”單擊加號選擇“顯示/隱藏層”選擇要更改可見性的層設(shè)置可見性重復(fù)上兩步檢查默認(rèn)事件是否是所需的事件兩個例子（滑過、單擊）2021/8/210層和表格的轉(zhuǎn)換v層可以隨便移動v層轉(zhuǎn)換成表格q“修改/轉(zhuǎn)換/層到表格”2021/8/211層和表格的轉(zhuǎn)換v“修改/轉(zhuǎn)換/表格到層”2021/8/212練

5、習(xí)v當(dāng)將鼠標(biāo)指針劃過一個植物的圖像時，顯示一個層，在該層中顯示該植物的生長季節(jié)和地區(qū)、需要多少陽光、可以長到多大等詳細(xì)信息。2021/8/213創(chuàng)建和使用框架v框架與框架集的概念v創(chuàng)建框架與框架集v選擇框架與框架集的方法v設(shè)置框架與框架集的屬性v使用鏈接控制框架內(nèi)容v保存框架與框架集文件v解決瀏覽器無法顯示框架的問題2021/8/214框架與框架集v框架可以用來劃分網(wǎng)頁，是不同的文件可以載入不同頁面的定義區(qū)域中。框架是一種先進(jìn)的web技術(shù)，它比模板更靈活，可以方便創(chuàng)建使用相同布局的多個頁面。v框架的最常見用途就是導(dǎo)航v框架集是單獨(dú)的一個html文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、

6、框架的大小和位置以及在每個框架中初始顯示的頁面的URL；本身并不保存要在瀏覽器中顯示的html內(nèi)容v每個框架都是獨(dú)立的html文件2021/8/215 2021/8/216注：v一方面，它可以將瀏覽器顯示空間分割成幾個部分，每個部分可以獨(dú)立顯示不同的網(wǎng)頁，同時對于整個網(wǎng)頁設(shè)計(jì)的整體性的保持也是有利的；但它的缺陷又同樣明顯，對于不支持框架結(jié)構(gòu)的瀏覽器，頁面信息不能顯示。2021/8/217創(chuàng)建框架與框架集v使用預(yù)定義創(chuàng)建框架集q插入工具欄中的布局類，單擊其中的frames（框架集）將當(dāng)前文檔顯示在某新框架中q選擇菜單“文件/新建”在目錄中選擇框架集選擇框架集類型單擊“創(chuàng)建”預(yù)覽2021/8/21

7、82021/8/219創(chuàng)建框架與框架集v自己設(shè)計(jì)框架集q查看/可視化助理/框架邊框q修改/框架集拆分左框架拆分右框架拆分上框架拆分下框架或：鼠標(biāo)拖動左右或上下的邊框線注：要創(chuàng)建多個框架時，最好拆分而不要合并2021/8/2202021/8/221v拆分q拆分插入點(diǎn)所在的框架，選擇菜單“修改/框架集”q水平或垂直拆分，將框架邊框從設(shè)計(jì)視圖的邊框線拖到中間即可q拆分的框架不靠邊，按住alt鍵拖動框架邊框q一個框架分成四個，從一角拖起創(chuàng)建框架與框架集2021/8/222v刪除框架q將光標(biāo)放在創(chuàng)建好的框架上，拖動框架至邊框上；若頁面中有多個框架，可將其拖到?？蚣艿倪吙蛏蟩拖動邊框不能完全刪除一個框架集

8、v創(chuàng)建嵌套框架集q框架集內(nèi)的框架集2021/8/223選擇框架與框架集v更改屬性前必須選定v在文檔窗口中選擇q選定一個框架按住alt鍵的同時單擊框架內(nèi)部邊框被虛線環(huán)繞q選定一個框架集單擊框架集的某一內(nèi)部框架邊框各框架的所有邊框都被淡顏色的虛線環(huán)繞q同一層次級別上的下/上一框架和框架集alt+ /q父框架alt+q當(dāng)前選擇框架集的第一個子框架或框架集alt+2021/8/224選擇框架與框架集v在框架面板中選擇q框架面板能夠顯示框架集的層次結(jié)構(gòu)q框架面板窗口/框架shift+F22021/8/225設(shè)置框架與框架集屬性v框架和框架集的屬性面板中設(shè)置的v選中再設(shè)置v框架名稱，源文件，滾動條，邊框及

9、邊框顏色等v可設(shè)置框架集的邊框、邊框顏色及邊框?qū)挾鹊葀先選取整個框架集，在屬性面板上，從Borders下拉菜單中選擇“No” ；同樣，將下面的框架體的Borders也設(shè)為No，再瀏覽此頁面，框線消失了2021/8/2262021/8/227編輯框架頁面v設(shè)置框架中文檔的背景顏色q光標(biāo)定位到框架中的文檔“修改/頁面屬性”v使用鏈接控制框架內(nèi)容q要在一個框架中使用鏈接以打開另一框架中的文檔，用戶必須設(shè)置連接目標(biāo)qTarget_blank, _parent, _self, _top，2021/8/228_blank 在新的瀏覽器窗口中打開鏈接的文檔，同時保持當(dāng)前窗口不變。_parent 在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集。_self 在當(dāng)前框架中打開鏈接，同時替換該框架中的內(nèi)容。 top 在當(dāng)前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架。2021/8/229v替換框架文件q“文件/在框架中打開”選擇html文件q用框架面板替換框架文件v保存框架和框架集文件q框架集文件“untitledframeset-?.html”q框架文件“untitledframe-?.html”q選中框架集保存框架集“文件/框架集另存為”q光標(biāo)定位在文檔中保存在框架中顯示的文檔“文件/框架另存為”q保存與一組框架有關(guān)的