11.1項(xiàng)目1：創(chuàng)建、操作和管理AP元素11.2項(xiàng)目2：利用AP元素布局網(wǎng)頁(yè)11.3項(xiàng)目3：制作AP元素動(dòng)畫 11.4項(xiàng)目4：控制時(shí)間軸動(dòng)畫11.5課堂綜合訓(xùn)練11.6小結(jié)

習(xí)題

第11章AP元素和時(shí)間軸在網(wǎng)頁(yè)中的應(yīng)用

1.操作步驟

可以在“AP元素”面板中創(chuàng)建AP元素。

1)創(chuàng)建AP元素

創(chuàng)建AP元素的具體操作步驟如下：

(1)在AdobeDreamweaverCS3主窗口中，單擊【布局】類別中的【繪制APDiv】按鈕，如圖11.1所示。11.1項(xiàng)目1：創(chuàng)建、操作和管理AP元素圖11.1【APDiv按鈕】繪制窗口

(2)之后，在【文檔】窗口的【設(shè)計(jì)】視圖中，拖動(dòng)光標(biāo)以繪制一個(gè)APDiv，如圖11.2所示。

2)查看AP元素的首選參數(shù)

查看AP元素首選參數(shù)的具體步驟如下：

(1)選擇【編輯】→【首選參數(shù)】，從左側(cè)的【分類】列表中選擇AP元素并指定以下首選參數(shù)，然后單擊【確定】按鈕，如圖11.3所示。圖11.2【繪制APDiv】視圖圖11.3AP元素首選參數(shù)

【顯示】：確定AP元素在默認(rèn)情況下是否可見，其選項(xiàng)為“default”、“繼承”、“可見”和“隱藏”。

【寬】和【高】：指定使用【插入】→【布局對(duì)象】→【APDiv】創(chuàng)建的AP元素的默認(rèn)寬度和高度(以像素為單位)。

【背景顏色】：指定一種默認(rèn)背景顏色。請(qǐng)從顏色選擇器中選擇顏色。

【背景圖像】：指定默認(rèn)背景圖像。單擊“瀏覽”按鈕可在計(jì)算機(jī)上查找圖像文件。

【嵌套】：指定從現(xiàn)有APDiv邊界內(nèi)的某點(diǎn)開始繪制的APDiv是否應(yīng)該是嵌套的APDiv。當(dāng)繪制APDiv時(shí)，按Alt鍵可臨時(shí)更改此設(shè)置。

3)為AP元素添加內(nèi)容

創(chuàng)建APDiv后，只需將插入點(diǎn)放置于該APDiv中，然后就可以像在頁(yè)面中添加內(nèi)容一樣，將內(nèi)容添加到APDiv中，如圖11.4所示。圖11.4【插入內(nèi)容】視圖

4)查看AP元素的屬性

查看AP元素屬性的具體操作如下：

(1)選擇一個(gè)AP元素，在屬性面板中可查看該AP元素的屬性，如圖11.5所示。

(2)其中，“CSS-P”元素是為選定的AP元素指定一個(gè)ID，用于在“AP元素”面板和JavaScript代碼中標(biāo)識(shí)AP元素。此ID只能用字母、數(shù)字和字符，不能使用空格、斜杠或句號(hào)等特殊字符。圖11.5AP元素【屬性】面板

(3)“左”和“上”是指定AP元素的左上角，相當(dāng)于頁(yè)面左上角的位置；“寬”和“高”指定AP元素的寬度和高度；“Z軸”確定AP元素的堆疊順序；“溢出”是當(dāng)AP元素的內(nèi)容超過AP元素的指定大小時(shí)，如何在瀏覽器中顯示AP元素。

5)更改AP元素的堆疊順序

更改AP元素堆疊順序的具體操作如下：

(1)在DreamweaverCS3中選擇【窗口】→【AP元素】項(xiàng)，打開【AP元素】面板，如圖11.6所示。圖11.6【AP元素】面板

(2)將AP元素向上或向下拖動(dòng)至所需的堆疊順序，如圖11.7所示。

6)顯示和隱藏AP元素

顯示和隱藏AP元素的具體操作如下：

(1)選擇【窗口】→【AP元素】，打開【AP元素】面板。在AP元素的眼形圖標(biāo)列內(nèi)單擊可以更改其可見性，如圖11.8所示。圖11.7改變AP元素堆疊順序后的視圖圖11.8AP元素的可見性

(2)其中，表示AP元素是不可見的，表示AP元素是可見的。

7)選擇、移動(dòng)和調(diào)整AP元素

選擇、移動(dòng)和調(diào)整AP元素的具體操作步驟如下：

(1)在【AP元素】面板中，單擊該AP元素可選中AP元素。

(2)在【設(shè)計(jì)】視圖中，選中一個(gè)或多個(gè)AP元素，拖動(dòng)選定的AP元素的選擇控點(diǎn)，如圖11.9所示。圖11.9移動(dòng)AP元素視圖

(3)如果要調(diào)整大小，拖動(dòng)AP元素的調(diào)整大小手柄即可，如圖11.10所示。圖11.10調(diào)整AP元素大小視圖2.相關(guān)知識(shí)點(diǎn)

AP元素的創(chuàng)建；

AP元素的首選參數(shù)；

AP元素的面板、Z軸和可見性；

AP元素的屬性設(shè)置。

1.操作步驟

利用AP元素布局網(wǎng)頁(yè)的具體操作步驟如下：

(1)在【插入】面板的【布局】類別中，單擊【繪制APDiv】按鈕。在【文檔】窗口的【設(shè)計(jì)】視圖中，拖動(dòng)以繪制三個(gè)APDiv，屬性設(shè)置見圖11.11～圖11.13。11.2項(xiàng)目2：利用AP元素布局網(wǎng)頁(yè)圖11.11apDiv1屬性圖11.12apDiv2屬性圖11.13apDiv3屬性

(2)三個(gè)AP元素的布局如圖11.14所示。

(3)在標(biāo)題欄中選擇【修改】→【轉(zhuǎn)換】項(xiàng)，單擊【將APDiv轉(zhuǎn)換為表格】命令，如圖11.15所示。

(4)彈出【將APDiv轉(zhuǎn)換為表格】對(duì)話框，如圖11.16所示。

(5)轉(zhuǎn)換后的效果如圖11.17所示。圖11.14AP元素布局視圖圖11.15【修改】菜單圖11.16【將APDiv轉(zhuǎn)換為表格】對(duì)話框圖11.17APDiv轉(zhuǎn)換為表格后的效果

2.相關(guān)知識(shí)點(diǎn)

AP元素的屬性設(shè)置；

將AP元素轉(zhuǎn)換為表格。

3.知識(shí)拓展：將表格布局轉(zhuǎn)換為APDiv布局

將表格布局轉(zhuǎn)換為APDiv布局的具體操作步驟如下：

(1)在AdobeDreamweaverCS3主窗口的【布局】類別中，單擊【表格】按鈕。在【文檔】窗口的【設(shè)計(jì)】視圖中，繪制兩個(gè)表格，如圖11.18所示。圖11.18【表格布局】視圖

(2)選擇【修改】→【轉(zhuǎn)換】，單擊【將表格轉(zhuǎn)換為APDiv】命令，如圖11.19所示。

(3)彈出【將表格轉(zhuǎn)換為APDiv】對(duì)話框，如圖11.20所示。

(4)轉(zhuǎn)換后的效果如圖11.21所示。圖11.19【將表格轉(zhuǎn)換為APDiv(I)】命令圖11.20【將表格轉(zhuǎn)換為APDiv】對(duì)話框圖11.21表格轉(zhuǎn)換為APDiv后的效果

1.操作步驟

制作AP元素動(dòng)畫的具體操作步驟如下：

(1)選擇【窗口】→【時(shí)間軸】，打開【時(shí)間軸】面板，如圖11.22所示。

(2)在AdobeDreamweraverCS3主窗口的【布局】類別中，單擊【繪制APDiv】按鈕。在【文檔】窗口的【設(shè)計(jì)】視圖中，拖動(dòng)以繪制一個(gè)AP元素，如圖11.23所示。11.3項(xiàng)目3：制作AP元素動(dòng)畫圖11.22【時(shí)間軸】面板圖11.23繪制AP元素視圖

(3)在AP元素中插入如圖11.24所示的圖像。

(4)使用鼠標(biāo)選定AP元素，拖至【時(shí)間軸】面板中，在時(shí)間軸的第一個(gè)通道中出現(xiàn)一個(gè)動(dòng)畫條，如圖11.25所示。

(5)單擊提示消息中的【確定】按鈕，然后單擊位于動(dòng)畫條末端的關(guān)鍵幀標(biāo)簽。在頁(yè)面上將層移至它在動(dòng)畫結(jié)束的位置。這時(shí)將出現(xiàn)一條線，顯示的即是動(dòng)畫的軌跡，如圖11.26所示。圖11.24插入圖像視圖圖11.25將AP元素拖至【時(shí)間軸】面板圖11.26動(dòng)畫軌跡設(shè)置

(6)若要使時(shí)間軸在瀏覽器打開時(shí)自動(dòng)播放，單擊【時(shí)間軸】面板中的【自動(dòng)播放】按鈕，然后單擊提示消息中的【確定】按鈕，如圖11.27所示。

(7)若要使時(shí)間軸在瀏覽器打開時(shí)循環(huán)播放，單擊【時(shí)間軸】面板中的【循環(huán)】按鈕，然后單擊提示消息中的【確定】按鈕，如圖11.28所示。

(8)若要使動(dòng)畫的播放時(shí)間更長(zhǎng)，可將結(jié)束幀標(biāo)簽向右拖動(dòng)，如圖11.29所示。圖11.27自動(dòng)播放設(shè)置圖11.28循環(huán)播放設(shè)置圖11.29播放時(shí)間變長(zhǎng)視圖

(9)若要實(shí)現(xiàn)曲線運(yùn)動(dòng)，需要添加關(guān)鍵幀。例如，將動(dòng)畫條末端的關(guān)鍵幀標(biāo)簽拖放到第50幀，選擇動(dòng)畫條的第30幀，然后按住Ctrl鍵并單擊動(dòng)畫條，即添加了一個(gè)關(guān)鍵幀，如圖11.30所示。

(10)單擊此關(guān)鍵幀，拖動(dòng)AP元素在頁(yè)面中的位置，形成曲線路徑，如圖11.31所示。

(11)可依此方法繼續(xù)添加關(guān)鍵幀，并改變AP元素在頁(yè)面中的位置，形成更加豐富的曲線路徑。按F12鍵預(yù)覽頁(yè)面，可以看到圖像沿著曲線移動(dòng)的效果。圖11.30添加關(guān)鍵幀視圖圖11.31曲線路徑

2.相關(guān)知識(shí)點(diǎn)

時(shí)間軸面板；

AP元素的移動(dòng)效果；

關(guān)鍵幀的添加。

3.知識(shí)拓展：利用時(shí)間軸和AP元素實(shí)現(xiàn)滾動(dòng)字幕效果

利用時(shí)間軸和AP元素實(shí)現(xiàn)滾動(dòng)字幕效果的具體操作如下：

(1)在【插入】面板的【布局】類別中，單擊【繪制APDiv】按鈕。在【文檔】窗口的【設(shè)計(jì)】視圖中拖動(dòng)鼠標(biāo)以繪制一個(gè)AP元素，在AP元素中添加文字內(nèi)容，如圖11.32所示。圖11.32插入AP元素和文字視圖

(2)選擇【窗口】→【時(shí)間軸】，打開【時(shí)間軸】面板，使用鼠標(biāo)選定AP元素，拖至【時(shí)間軸】面板中，在時(shí)間軸的第一個(gè)通道中出現(xiàn)一個(gè)動(dòng)畫條，再將動(dòng)畫條末端的關(guān)鍵幀標(biāo)簽拖放到第50幀，如圖11.33所示。

(3)單擊位于動(dòng)畫條末端的關(guān)鍵幀標(biāo)簽。在頁(yè)面上將層移至它在動(dòng)畫結(jié)束的位置。這時(shí)將出現(xiàn)一條線，顯示的是動(dòng)畫的軌跡，如圖11.34所示。圖11.33動(dòng)畫條圖11.34添加結(jié)束幀路徑視圖

(4)選擇動(dòng)畫條的第20幀，然后按住Ctrl鍵并單擊動(dòng)畫條，從而添加了一個(gè)關(guān)鍵幀，單擊此關(guān)鍵幀，拖動(dòng)AP元素在頁(yè)面中的位置，如圖11.35所示。

(5)選擇動(dòng)畫條的第40幀，然后按住Ctrl鍵并單擊動(dòng)畫條，從而添加了一個(gè)關(guān)鍵幀。單擊此關(guān)鍵幀，拖動(dòng)AP元素在頁(yè)面中的位置，如圖11.36所示。

(6)選擇【時(shí)間軸】面板中的【自動(dòng)播放】和【循環(huán)】，按F12鍵預(yù)覽頁(yè)面，可以看到滾動(dòng)字幕的效果。圖11.35添加關(guān)鍵幀視圖圖11.36添加第40幀視圖

1.操作步驟

控制時(shí)間軸動(dòng)畫的具體操作步驟如下：

(1)首先制作AP元素動(dòng)畫，選中AP元素中的圖像作為對(duì)象，然后選擇【窗口】→【行為】命令，打開【行為】面板。單擊??圖標(biāo)，在彈出式菜單中選擇【停止時(shí)間軸】，如圖11.37所示。11.4項(xiàng)目4：控制時(shí)間軸動(dòng)畫圖11.37【停止時(shí)間軸】命令

(2)在彈出的對(duì)話框中選擇要停止的時(shí)間軸，這里選擇Timeline1，如圖11.38所示。

(3)單擊【確定】按鈕后，在【行為】面板中將鼠標(biāo)事件修改為onMouseOver，如圖11.39所示。

(4)繼續(xù)選擇圖像，在行為面板中單擊圖標(biāo)，在彈出式菜單中選擇【播放時(shí)間軸】，在彈出的對(duì)話框中選擇要播放的時(shí)間軸，這里選擇Timeline1，單擊【確定】按鈕后，在【行為】面板中將鼠標(biāo)事件修改為onMouseOut，如圖11.40所示。圖11.38【停止時(shí)間軸】對(duì)話框圖11.39【選擇事件】操作

圖11.40【修改事件】操作

(5)按F12鍵預(yù)覽，當(dāng)鼠標(biāo)移開圖像時(shí)，圖像繼續(xù)移動(dòng)，當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)，圖像停止移動(dòng)。

2.相關(guān)知識(shí)點(diǎn)

控制時(shí)間軸行為。

1.訓(xùn)練內(nèi)容

具體內(nèi)容如下：

(1)首先準(zhǔn)備服裝類的縮略圖(11.jpg～16.jpg)和對(duì)應(yīng)的換裝后完整大小的圖片(1.jpg～6.jpg)，分別如圖11.41所示。11.5課堂綜合訓(xùn)練圖11.41服裝及縮略圖圖片

(2)在【插入】面板的【布局】類別中，單擊【繪制APDiv】按鈕。在【文檔】窗口的【設(shè)計(jì)】視圖中拖動(dòng)以繪制一個(gè)AP元素，在AP元素中插入圖像man.jpg，如圖11.42所示。

(3)在頁(yè)面右側(cè)依次繪制6個(gè)層，插入服裝類的縮略圖11.jpg～16.jpg，如圖11.43所示。圖11.42未換裝圖像圖11.43換裝圖庫(kù)

(4)選擇圖11.jpg，在行為面板中單擊圖標(biāo)，在彈出式菜單中選擇【設(shè)置文本】→【設(shè)置容器的文本】，如圖11.44所示。

(5)彈出【設(shè)置容器的文本】對(duì)話框，“容器”選擇“div“apDiv1””，在新建“HTML”中輸入HTML代碼，如圖11.45所示。

(6)單擊【確定】按鈕，行為面板中顯示鼠標(biāo)事件為onClick，如圖11.46所示。圖11.44【設(shè)置容器的文本】命令圖11.45【設(shè)置容器的文本】對(duì)話框圖11.46行為面板

(7)按照步驟(4)、(5)、(6)，分別對(duì)12.jpg～16.jpg設(shè)置相同的行為，在“新建HTML”中將圖像修改為2.jpg～6.jpg。

(8)按F12鍵預(yù)覽，當(dāng)鼠標(biāo)單擊圖像時(shí)，左側(cè)出現(xiàn)類似QQ秀的換裝效果，如圖11.47所示。

2.相關(guān)知識(shí)點(diǎn)

設(shè)置容器的文本行為。圖11.47預(yù)覽效果對(duì)于頁(yè)面，層是一種有效的布局工具。在DreamweaverCS3中，可以通過拖拽鼠標(biāo)的方式在文檔的任意位置制作APDiv。制作的APDiv之間可以互相重疊，但是在默認(rèn)情況下，所有的APDiv之間并沒有嵌套關(guān)系。

在APDiv中可以定義標(biāo)簽的寬度和高度，以及位置等屬性。在DreamweaverC3中可以使用APDiv進(jìn)行布局。

時(shí)間軸可以影響層和圖像的屬性，大多數(shù)DreamweaverCS3動(dòng)畫效果都使用時(shí)間軸特性來(lái)管理動(dòng)作與時(shí)間的結(jié)合。11.6小結(jié)

1.選擇題

(1)以下選項(xiàng)中，關(guān)于層的說(shuō)法錯(cuò)誤的是()。

A.使用層進(jìn)行排版是一種非常自由的方式

B.層可以將一個(gè)瀏覽器窗口下的網(wǎng)頁(yè)分割成幾個(gè)不同的區(qū)域，在不同的區(qū)域內(nèi)顯示不同的內(nèi)容

C.可以在網(wǎng)頁(yè)上任意改變層的位置，實(shí)現(xiàn)對(duì)層的精確定位

D.層還可以重疊，因此可