1、第6章 使 用 層教學(xué)提示和教學(xué)目標(biāo) 6.1 創(chuàng)建和設(shè)置層6.2 層的基本操作6.3 層和表格間的相互轉(zhuǎn)換6.4 時(shí)間軸的應(yīng)用第6章 使 用 層教學(xué)提示和教學(xué)目標(biāo) 教學(xué)提示和教學(xué)目標(biāo)教學(xué)提示：層是一種精確定位網(wǎng)頁(yè)元素工具，層可以包含文本、圖像或其他任何在HTML文檔正文中插入的內(nèi)容。使用層可以將網(wǎng)頁(yè)元素放置任何位置，還可以按順序排放網(wǎng)頁(yè)文檔中的其他構(gòu)成元素。在Dreamweaver中使用層和行為結(jié)合，還可以不用編寫(xiě)任何HTML或JavaScript代碼制作出動(dòng)畫(huà)效果。教學(xué)目標(biāo)：掌握層的創(chuàng)建和設(shè)置掌握調(diào)整層的大小掌握移動(dòng)層掌握對(duì)齊層掌握層和表格間的相互轉(zhuǎn)換掌握利用層制作網(wǎng)頁(yè)下拉菜單掌握時(shí)間軸的應(yīng)

2、用教學(xué)提示和教學(xué)目標(biāo)教學(xué)提示：層是一種精確定位網(wǎng)頁(yè)元素工具，層6.1 創(chuàng)建和設(shè)置層可以通過(guò)直接插入或繪制的方法來(lái)創(chuàng)建層，創(chuàng)建層后，就可以通過(guò)【層】面板來(lái)設(shè)置層的屬性。6.1.1 創(chuàng)建層6.1.2 嵌套層6.1.3 層的【屬性】面板6.1.4 【層】面板6.1 創(chuàng)建和設(shè)置層可以通過(guò)直接插入或繪制的方法來(lái)創(chuàng)建層，6.1.1 創(chuàng)建層使用Dreamweaver 8可以很方便地在網(wǎng)頁(yè)上創(chuàng)建層，并精確地定位層的位置。創(chuàng)建層的具體操作步驟如下。(1) 打開(kāi)網(wǎng)頁(yè)文檔。(2) 將鼠標(biāo)指針置于頁(yè)面中，選擇【插入】|【布局對(duì)象】|【層】命令。(3) 選擇命令后，即可插入層。6.1.1 創(chuàng)建層使用Dreamweave

3、r 8可以很方便6.1.2 嵌套層在Dreamweaver 8中，一個(gè)層里還可以包含另外一個(gè)層，也就是嵌套層，創(chuàng)建嵌套層的具體操作步驟如下。(1) 將鼠標(biāo)指針置于文檔窗口的現(xiàn)有層中。(2) 選擇【插入】|【布局對(duì)象】|【層】命令，插入層。(3) 嵌套層創(chuàng)建完畢后的效果如圖6.4所示。6.1.2 嵌套層在Dreamweaver 8中，一個(gè)層里6.1.3 層的【屬性】面板在Dreameaver中若對(duì)層進(jìn)行編輯，首先必須選定層，在層的【屬性】面板中可以設(shè)置層的名字、位置及其他一些屬性。單擊層邊框線將其選中，層【屬性】面板。層【屬性】面板中可以進(jìn)行如下設(shè)置?！緦泳幪?hào)】：設(shè)置層的名稱，用于識(shí)別不同的層。

4、【左】：設(shè)置層左邊界與瀏覽器窗口左邊界的距離?！旧稀浚涸O(shè)置層上邊界與瀏覽器窗口上邊界的距離?！緦挕浚涸O(shè)置層的寬?！靖摺浚涸O(shè)置層的高?！綵軸】：設(shè)置層的Z軸順序?！颈尘皥D像】：設(shè)置層的背景圖像?！究梢?jiàn)性】：設(shè)置層的顯示狀態(tài)，包括default、inherit、visible和hidden四個(gè)選項(xiàng)?！颈尘邦伾浚涸O(shè)置層的背景顏色。【剪輯】：用來(lái)指定層的哪一部分可見(jiàn)，輸入的數(shù)值是距離層的四個(gè)邊界的距離?！疽绯觥浚喝绻麑永锩娴奈淖痔?，或圖像太大，或?qū)拥妮^大不足以全部顯示的時(shí)候，有以下選擇：visible：溢出部分依然顯示。hidden：溢出部分隱藏。scrool：不管是否溢出，強(qiáng)制顯示滾動(dòng)條。aut

5、o：有溢出時(shí)將自動(dòng)出現(xiàn)滾動(dòng)條。6.1.3 層的【屬性】面板在Dreameaver中若對(duì)層6.1.4 【層】面板在Dreamweaver中有一個(gè)【層】面板，在該面板中可以設(shè)置層的屬性。選擇【窗口】|【層】命令，打開(kāi)如圖6.6所示的【層】面板?！緦印棵姘宸秩龣冢钭髠?cè)的是眼睛標(biāo)記，用鼠標(biāo)直接單擊標(biāo)記，可以顯示或隱藏所有的層；中間顯示的是層的名稱；最右側(cè)是層在Z軸排列的情況。6.1.4 【層】面板在Dreamweaver中有一個(gè)【層6.2 層的基本操作利用層可以精確地定位網(wǎng)頁(yè)元素。下面講述如何選擇層、移動(dòng)層、對(duì)齊層、改變層大小等基本操作。6.2.1 選擇層6.2.2 調(diào)整層的大小6.2.3 移動(dòng)層6

6、.2.4 對(duì)齊層6.2 層的基本操作利用層可以精確地定位網(wǎng)頁(yè)元素。下面講述6.2.1 選擇層常見(jiàn)的選擇層有如下兩種操作方法。直接在層的邊框上單擊，選定的層周?chē)霈F(xiàn)八個(gè)控制點(diǎn)(小黑色方塊) 。切換到【層】面板，在面板中單擊層的名稱，即可選中層。6.2.1 選擇層常見(jiàn)的選擇層有如下兩種操作方法。6.2.2 調(diào)整層的大小在文檔窗口中插入層后，在操作過(guò)程中常常會(huì)根據(jù)需要，對(duì)層的大小進(jìn)行適當(dāng)?shù)恼{(diào)整，調(diào)整層大小的具體操作步驟如下。(1) 選擇需要調(diào)整大小的層，在【屬性】面板中改變層【寬】和【高】的大小，如圖6.9所示。(2) 將鼠標(biāo)指針移動(dòng)到層邊框上的小黑方框上，當(dāng)鼠標(biāo)指針變?yōu)榇怪彪p向箭頭時(shí)，按住鼠標(biāo)左鍵

7、向下或向上拖動(dòng)鼠標(biāo)，則可以調(diào)整層的高度；當(dāng)鼠標(biāo)指針變?yōu)樗诫p向箭頭時(shí)，按住鼠標(biāo)左鍵向左或向右拖動(dòng)鼠標(biāo)，則可以調(diào)整層的寬度；當(dāng)鼠標(biāo)指針變?yōu)樾毕螂p箭頭時(shí)，按住鼠標(biāo)左鍵斜向上或斜向下拖動(dòng)鼠標(biāo)，可以同時(shí)調(diào)整層的高度和寬度，如圖6.10所示。6.2.2 調(diào)整層的大小在文檔窗口中插入層后，在操作過(guò)程中6.2.3 移動(dòng)層移動(dòng)層的具體操作步驟如下。(1) 選中要移動(dòng)的層，當(dāng)鼠標(biāo)靠近層的縮放手柄時(shí)，鼠標(biāo)指針就會(huì)變成十字箭頭形狀，按住鼠標(biāo)左鍵拖動(dòng)，層將跟著鼠標(biāo)的移動(dòng)而發(fā)生改變。(2) 選中移動(dòng)的層，使用鍵盤(pán)上的四個(gè)方向鍵，一次可以移動(dòng)一個(gè)像素。(3)選中移動(dòng)的層，按住Shift鍵，然后按鍵盤(pán)上的四個(gè)方向鍵中的任意

8、一個(gè)可以移動(dòng)10個(gè)像素。6.2.3 移動(dòng)層移動(dòng)層的具體操作步驟如下。6.2.4 對(duì)齊層當(dāng)在文檔窗口中有多個(gè)層時(shí)，可以使用【修改】|【排列順序】命令使多個(gè)層對(duì)齊。具體操作步驟如下。(1) 打開(kāi)網(wǎng)頁(yè)文檔，選擇【插入】|【布局對(duì)象】|【層】命令。(2) 在網(wǎng)頁(yè)中插入層按照步驟的方法在網(wǎng)頁(yè)中插入另外兩個(gè)層，并調(diào)整層的大小和位置。(3) 選中所有層，選擇【修改】|【排列順序】|【左對(duì)齊】命令。(4) 選擇【左對(duì)齊】命令后，層將最后選中的層的底部為準(zhǔn)，對(duì)齊排列。6.2.4 對(duì)齊層當(dāng)在文檔窗口中有多個(gè)層時(shí)，可以使用【修改6.3 層和表格間的相互轉(zhuǎn)換雖然通過(guò)層定位網(wǎng)頁(yè)元素比表格方便很多，但是由于受到瀏覽器版本

9、的限制，不是所有的瀏覽器都支持層，Dreamweaver 8提供了層和表格相互轉(zhuǎn)換功能，可以最大程度的方便網(wǎng)頁(yè)設(shè)計(jì)，可以兼顧低版本瀏覽器能夠訪問(wèn)網(wǎng)頁(yè)。6.3.1 層轉(zhuǎn)換成表格6.3.2 表格轉(zhuǎn)換成層6.3 層和表格間的相互轉(zhuǎn)換雖然通過(guò)層定位網(wǎng)頁(yè)元素比表格方6.3.1 層轉(zhuǎn)換成表格為兼顧低版本瀏覽器訪問(wèn)網(wǎng)頁(yè)一般使用層將元素精確定位，然后將層轉(zhuǎn)換為表格。在【轉(zhuǎn)換層為表格】對(duì)話框中可以進(jìn)行如下設(shè)置。【最精確】：以精確方式轉(zhuǎn)換，為每一層建立一個(gè)單元格，并且創(chuàng)建所有的附加單元格，以保證各單元格之間的距離?！咀钚　浚阂宰钚》绞睫D(zhuǎn)換，去掉寬度和高度小于指定像素?cái)?shù)目的空單元格。【使用透明GIF】：用來(lái)定義是否

10、使用透明GIF圖像。【置于頁(yè)面中央】：選擇該選項(xiàng)，轉(zhuǎn)換的表格將在頁(yè)面中居中對(duì)齊，否則將左對(duì)齊?！痉乐箤又丿B】：該選項(xiàng)一般要選擇，否則如果有層發(fā)生重疊，將無(wú)法進(jìn)行轉(zhuǎn)換工作?！撅@示層面】：在文檔窗口中顯示【層】面板?！撅@示網(wǎng)格】：在文檔窗口中顯示網(wǎng)格?！究魁R到網(wǎng)格】：在文檔中將文字與網(wǎng)格對(duì)應(yīng)。6.3.1 層轉(zhuǎn)換成表格為兼顧低版本瀏覽器訪問(wèn)網(wǎng)頁(yè)一般使用6.3.2 表格轉(zhuǎn)換成層在Dreamweaver 8中可以把表格轉(zhuǎn)換為層。如果復(fù)雜的布局，則有時(shí)表格的形狀不能轉(zhuǎn)換為希望的形狀，并且層重疊時(shí)也不能轉(zhuǎn)換為表格。在【轉(zhuǎn)換表格為層】對(duì)話框中可以進(jìn)行如下設(shè)置?！痉乐箤又丿B】：選中此復(fù)選框可以在建立層、移動(dòng)層和

11、調(diào)整層大小時(shí)防止層重疊。【顯示層面板】：選中此復(fù)選框，在轉(zhuǎn)換完成時(shí)顯示【層】面板?！撅@示網(wǎng)絡(luò)】：以網(wǎng)格為參照物定位層?！究魁R到網(wǎng)格】：將層與網(wǎng)絡(luò)內(nèi)某個(gè)角靠齊以定位層。6.3.2 表格轉(zhuǎn)換成層在Dreamweaver 8中可以6.4 時(shí)間軸的應(yīng)用時(shí)間軸和層就像一對(duì)鑰匙和鎖，只有相互配合，才能打開(kāi)網(wǎng)頁(yè)動(dòng)畫(huà)的大門(mén)。常見(jiàn)的時(shí)間軸動(dòng)畫(huà)都涉及到沿著一條軌跡移動(dòng)層，時(shí)間軸只能移動(dòng)層?！緯r(shí)間軸】面板用于顯示層與圖像隨時(shí)間變化的屬性，選擇【窗口】|【時(shí)間軸】命令，打開(kāi)【時(shí)間軸】面板，如圖6.27所示。在【時(shí)間軸】面板中可以進(jìn)行如下設(shè)置?！静シ蓬^】：顯示當(dāng)前在頁(yè)面中的是時(shí)間軸上對(duì)應(yīng)的幀?！緞?dòng)畫(huà)條】：顯示每個(gè)對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間?！娟P(guān)鍵幀】：在動(dòng)畫(huà)中被指定對(duì)象屬性的幀?！緞?dòng)畫(huà)通道】：顯示層圖像的動(dòng)畫(huà)條?！拘袨橥ǖ馈浚涸跁r(shí)間軸上某一幀執(zhí)行Dreamweaver行為的通道?！緯r(shí)間軸下拉列表框】：指定當(dāng)前顯示在【時(shí)間軸】面板中的是文檔的哪一條時(shí)間軸?！净赝恕浚阂苿?dòng)播放頭到時(shí)間軸的第1幀?！竞笸恕浚合蜃笠苿?dòng)播放頭一幀。單擊按鈕并按住鼠標(biāo)左鍵，可以回放時(shí)間軸?！静シ拧浚合蛴乙苿?dòng)播放