《Dreamweaver 8案例教程》課件第10章

本章學(xué)習(xí)目標(biāo)創(chuàng)建和使用層10.1轉(zhuǎn)換表格和層10.2使用時(shí)間軸10.310.1.1創(chuàng)建層

插入層時(shí)，Dreamweaver將顯示層的邊框，默認(rèn)情況下，在將指針移到塊上時(shí)它還會(huì)高亮顯示塊。通過(guò)在“查看”→“可視化助理”菜單中禁用“層外框”和“CSS布局外框”，可以啟用層邊框。在設(shè)計(jì)時(shí)，還可以啟用CSS布局背景和CSS布局框模型，作為可視化助理。

創(chuàng)建層后，只需將插入點(diǎn)放置于該層中，然后像在頁(yè)面中添加內(nèi)容一樣，就可以將內(nèi)容添加到層中。連續(xù)繪制一個(gè)或多個(gè)層，步驟如下：在“插入”欄的“布局”類別中單擊“繪制層”按鈕。在“文檔”窗口的“設(shè)計(jì)”視圖中，執(zhí)行下列操作之一：

（1）拖動(dòng)以繪制一個(gè)層。（2）通過(guò)按住Ctrl鍵并拖動(dòng)(Windows)或通過(guò)按住Command鍵并拖動(dòng)(Macintosh)來(lái)連續(xù)繪制多個(gè)層。只要不松開(kāi)Ctrl或Command鍵，就可以繼續(xù)繪制新的層。注意：如果要隱藏層邊框，可選擇“查看”→“可視化助理”，然后取消選擇“層外框”和“CSS布局外框”。10.1.2嵌套層繪制嵌套層時(shí)，步驟如下：1.在“插入”欄的“布局”類別中單擊“繪制層”按鈕。2.在“文檔”窗口的“設(shè)計(jì)”視圖中，拖動(dòng)以在現(xiàn)有層中繪制層：如果已經(jīng)在層首選參數(shù)中關(guān)閉了”嵌套”功能，請(qǐng)通過(guò)按住Alt鍵并拖動(dòng)(Windows)或按住Option鍵并拖動(dòng)(Macintosh)在現(xiàn)有層中嵌套一個(gè)層。插入嵌套層，步驟如下：1.在“文檔”窗口的“設(shè)計(jì)”視圖中將插入點(diǎn)放置在一個(gè)現(xiàn)有層中，然后選擇“插入”→“層”。2.若要使用“層”面板將現(xiàn)有層嵌套在另一個(gè)層中，執(zhí)行以下操作：3.選擇“窗口”→“層”，打開(kāi)“層”面板。4.在“層”面板中選擇一個(gè)層，然后通過(guò)按住Ctrl鍵并拖動(dòng)(Windows)或按住Command鍵并拖動(dòng)(Macintosh)將層移動(dòng)到”層”面板上的目標(biāo)層。5.當(dāng)目標(biāo)層的名稱突出顯示時(shí)，松開(kāi)鼠標(biāo)按鈕。10.1.3層標(biāo)簽具體操作如下：在“文檔”窗口中，將插入點(diǎn)放置在要顯示.div標(biāo)簽的位置。1．選擇“插入”→“布局對(duì)象”→“Div標(biāo)簽”。在“插入”欄的“布局”類別中單擊“Div標(biāo)簽”按鈕。2．出現(xiàn)“插入Div標(biāo)簽”對(duì)話框，3．完成對(duì)話框。4．單擊”確定”。.div標(biāo)簽以一個(gè)框的形式出現(xiàn)文檔中，并帶有占位符文本。將指針移到該框的邊緣上時(shí)，Dreamweaver會(huì)高亮顯示該框。如果已經(jīng)給.div標(biāo)簽分配了絕對(duì)位置，它就可充當(dāng)一個(gè)Dreamweaver層。10.1.4選擇層要在“層”面板中選擇一個(gè)層，在“層”面板（“窗口”→“層”）中，單擊該層的名稱。若要在“文檔”窗口中選擇一個(gè)層，可執(zhí)行以下操作之一：?jiǎn)螕粢粋€(gè)層的選擇柄。如果選擇柄不可見(jiàn)，請(qǐng)?jiān)谠搶又械娜我馕恢脝螕粢燥@示該選項(xiàng)柄。單擊一個(gè)層的邊框。在一個(gè)層中按住Ctrl-Shift鍵并單擊(Windows)或按住Command-Shift鍵并單擊(Macintosh)。在層內(nèi)單擊并按Ctrl+A(Windows)或Command+A(Macintosh)以選擇層的內(nèi)容。再次按Ctrl+A或Command+A以選擇層。在層內(nèi)單擊并在標(biāo)簽選擇器中選擇層的標(biāo)簽。

注意：選擇多個(gè)層時(shí)，可以在“層”面板（“窗口”→“層”）中，請(qǐng)按住Shift鍵并單擊兩個(gè)或更多的層名稱。在“文檔”窗口中，在兩個(gè)或更多個(gè)層的邊框內(nèi)（或邊框上）按住Shift鍵并單擊。若要查看和設(shè)置層屬性，具體操作如下：選擇一個(gè)層。在”屬性”檢查器（“窗口”→“屬性”）中，單擊右下角的展開(kāi)箭頭（如果它尚未展開(kāi)）以查看所有屬性，如圖所示。

根據(jù)需要設(shè)置屬性來(lái)更改層的屬性。當(dāng)選擇兩個(gè)或更多個(gè)層時(shí)，層“屬性”檢查器會(huì)顯示文本屬性以及全部層屬性的一部分，從而允許同時(shí)修改多個(gè)層。10.1.5設(shè)置層屬性在HTML代碼中，層的堆疊順序或z軸確定層在瀏覽器中的繪制順序。層的z軸值越高，該層的堆疊順序就越高。步驟如下：1．選擇“窗口”→“層”，打開(kāi)“層”面板。2．將層向上或向下拖至所需的堆疊順序。移動(dòng)層時(shí)會(huì)出現(xiàn)一條線，它指示該層將出現(xiàn)的位置。當(dāng)放置線出現(xiàn)在層疊順序中的所需位置時(shí)，請(qǐng)松開(kāi)鼠標(biāo)按鈕。如果用”屬性”檢查器更改層的層疊順序，則選擇“窗口”→“層”，打開(kāi)“層”面板以查看當(dāng)前堆疊順序。10.1.6更改層的層疊屬性在“層”面板或“文檔”窗口中選擇一個(gè)層。在層的“屬性”檢查器（“窗口”→“屬性”）中，在z軸文本框中鍵入一個(gè)編號(hào)。

鍵入一個(gè)較大的數(shù)字可將該層在層疊順序中上移。鍵入一個(gè)較小的數(shù)字可將該層在層疊順序中下移。10.1.6更改層的層疊屬性更改層可見(jiàn)性，具體操作如下：1．選擇“窗口”→“層”，打開(kāi)“層”面板。2．在層的眼形圖標(biāo)列內(nèi)單擊可以更改其可見(jiàn)性。眼睛睜開(kāi)表示該層是可見(jiàn)的。眼睛閉合表示該層是不可見(jiàn)的。如果沒(méi)有眼形圖標(biāo)，該層通常會(huì)繼承其父級(jí)的可見(jiàn)性。（如果層沒(méi)有嵌套，父級(jí)就是文檔正文，而文檔正文始終是可見(jiàn)的。）另外，如果未指定可見(jiàn)性，則不會(huì)顯示眼形圖標(biāo)（這在“屬性”檢查器中表示為“默認(rèn)”可見(jiàn)性）。10.1.7更改層可見(jiàn)性一些

Web設(shè)計(jì)人員可能不喜歡使用表格或“布局”模式來(lái)創(chuàng)建自己的布局，而是喜歡通過(guò)層來(lái)進(jìn)行設(shè)計(jì)。Dreamweaver使您可以使用層來(lái)創(chuàng)建自己的布局，然后將它們轉(zhuǎn)換為表格。

注意：在模板文檔或已應(yīng)用模板的文檔中，不能將層轉(zhuǎn)換為表格或?qū)⒈砀褶D(zhuǎn)換為層。相反，應(yīng)該在非模板文檔中創(chuàng)建布局，然后在將該文檔另存為模板之前進(jìn)行轉(zhuǎn)換。

在轉(zhuǎn)換為表格之前，請(qǐng)確保層沒(méi)有重疊。將層轉(zhuǎn)換為表格，具體操作如下：1.選擇“修改”→“轉(zhuǎn)換”→“層到表格”。即可顯示“轉(zhuǎn)換層為表格”對(duì)話框10.2將層轉(zhuǎn)換成表格10.2將層轉(zhuǎn)換成表格2.選擇所需的選項(xiàng)。3.單擊“確定”。注意：從層轉(zhuǎn)換為表格可能會(huì)生成包含大量空單元格的表。10.3使用時(shí)間軸時(shí)間軸通過(guò)隨時(shí)間的變化改變層的位置、大小、可見(jiàn)性和疊放順序來(lái)創(chuàng)建動(dòng)畫(huà)。這就是動(dòng)態(tài)HTML的表達(dá)方式，也是Dreamweaver強(qiáng)于其它網(wǎng)頁(yè)編輯器的地方。時(shí)間軸只能移動(dòng)層，因此想讓圖象或文本對(duì)象移動(dòng)，就須先創(chuàng)建層，然后在層中插入對(duì)象。時(shí)間軸描述了層和圖像的屬性隨時(shí)間變化的情況。選擇“窗口”→“時(shí)間軸”，打開(kāi)時(shí)間軸控制器，如圖所示。在時(shí)間軸控制器中：播放頭（Playbackhead）指示在網(wǎng)頁(yè)中顯示的是哪一幀。動(dòng)畫(huà)通道（Animationchannels）顯示動(dòng)畫(huà)層的地方。動(dòng)畫(huà)條（Animationbars）即圖中的Layer1，可顯示每個(gè)對(duì)象的持續(xù)時(shí)間。一行可以包含代表不同對(duì)象的多個(gè)動(dòng)畫(huà)條。關(guān)鍵幀（Keyframes）動(dòng)畫(huà)條中的小圓圈是關(guān)鍵幀。行為通道（Behaviorchannel）在時(shí)間軸中執(zhí)行行為的通道?；胤牛≧ewind）可將播放頭移到時(shí)間軸的初始幀。后退（Back）將播放頭往左移動(dòng)一幀。播放（Play）將播放頭往右移動(dòng)一幀。單擊Play按鈕并按住鼠標(biāo)不放，則時(shí)間軸向前連續(xù)播放。自動(dòng)播放（Autoplay）當(dāng)網(wǎng)頁(yè)載入到瀏覽器時(shí)使當(dāng)前時(shí)間軸自動(dòng)播放。循環(huán)（Loop）當(dāng)網(wǎng)頁(yè)載入到瀏覽器時(shí)使當(dāng)前時(shí)間軸無(wú)限循環(huán)播放。10.3使用時(shí)間軸10.3使用時(shí)間軸由于時(shí)間軸只能移動(dòng)層，因此如果要移動(dòng)圖像或文本，則要?jiǎng)?chuàng)建一個(gè)層，然后在該層中插入圖像、文本或其它類型的內(nèi)容。下面就通過(guò)一個(gè)實(shí)例來(lái)認(rèn)識(shí)時(shí)間軸動(dòng)畫(huà)的創(chuàng)建。本章小