1、第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互l 行為的應(yīng)用行為的應(yīng)用l AP元素和時間軸元素和時間軸l AP元素動畫元素動畫l Spry框架框架l JavaScript基礎(chǔ)知識基礎(chǔ)知識開開 始始 在制作網(wǎng)頁時，為了豐富網(wǎng)頁內(nèi)容，可以在網(wǎng)頁中添加特效與交互。這樣制作出來的網(wǎng)頁，不但新穎、有風(fēng)格，而且也能增加網(wǎng)站的訪問量。Dreamweaver內(nèi)置了一些行為，行為是被用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法，利用行為可以高效地實(shí)現(xiàn)網(wǎng)頁的互動效果。另外，利用AP元素（層）動畫和Spry框架也可以實(shí)現(xiàn)網(wǎng)頁的交互功能。 本章主要內(nèi)容：本章主要

2、內(nèi)容：第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 6.1.1 附加行為附加行為6.1.2 行為應(yīng)用實(shí)例行為應(yīng)用實(shí)例網(wǎng)頁加載時彈網(wǎng)頁加載時彈出公告頁出公告頁6.1.3 內(nèi)置行為簡介內(nèi)置行為簡介返回本章首頁返回本章首頁6.1 行為行為 行為是由一個事件（Event）所觸發(fā)的動作（Action ），因此又把行為稱為事件的響應(yīng)，是被用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。事件是瀏覽器產(chǎn)生的有效信息，也就是訪問者對網(wǎng)頁所做的事情。例如，單擊某個圖像，鼠標(biāo)經(jīng)過指定的元素等。 Dreamweaver CS3內(nèi)置了30多種行為，利用這些行為，不需要書寫一行代碼，就可以實(shí)現(xiàn)豐富的動態(tài)頁面

3、效果，諸如為網(wǎng)頁添加播放音樂、顯示/隱藏層、彈出消息、打開新瀏覽窗口等功能，達(dá)到用戶與頁面的交互。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié) 行為可以附加到整個文檔，即附加到 標(biāo)簽，還可以附加到鏈接、圖像、表單元素或多種其它HTML元素中的任何一種。 1 1添加行為的方法添加行為的方法 2 2修改行為修改行為6.1.1 附加行為附加行為第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié) 訪問網(wǎng)頁的時候經(jīng)常可以遇到這樣的情況，打開網(wǎng)站頁面時，同時會彈出寫有通知事項或特殊信息的小窗口。利用Dreamweaver的“打開瀏覽器窗口”行為就可以制作這種效果。 1 1制作用做公

4、告頁的網(wǎng)頁文檔制作用做公告頁的網(wǎng)頁文檔 2 2在另一個網(wǎng)頁中添加在另一個網(wǎng)頁中添加“打開瀏覽器窗口打開瀏覽器窗口”行為行為 3 3設(shè)置事件設(shè)置事件 4 4JavascriptJavascript代碼代碼6.1.2行為應(yīng)用實(shí)例行為應(yīng)用實(shí)例網(wǎng)頁加載時彈出公告頁網(wǎng)頁加載時彈出公告頁第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.1.3 內(nèi)置行為簡介內(nèi)置行為簡介 行為可以附加到整個文檔，即附加到 標(biāo)簽，還可以附加到鏈接、圖像、表單元素或多種其它HTML元素中的任何一種。 1 1添加行為的方法添加行為的方法 2 2修改行為修改行為 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)

5、 Dreamweaver CS3內(nèi)置了30多個行為動作，這些自帶的行為動作是為在Netscape Navigator 4.0和更高版本以及Internet Explorer 4.0和更高版本中使用而編寫的。下面說明每一個動作的功能，如表6-1所示。6.1.3 內(nèi)置行為簡介內(nèi)置行為簡介表6-1 常用動作列表 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 6.2.1 應(yīng)用應(yīng)用AP Div創(chuàng)建創(chuàng)建AP元素元素 6.2.2 AP元素的屬性詳解元素的屬性詳解返回本章首頁返回本章首頁6.2 AP元素元素 AP元素（絕對定位元素）是分配有絕對位置的HTML頁面元素。AP 元素可以包含文本、圖像或其它任何可放置到

6、HTML文檔正文中的內(nèi)容。AP元素提供了一種在網(wǎng)頁上比較自由地進(jìn)行布局和設(shè)計的途徑，在進(jìn)行頁面布局時，可以任意調(diào)整AP元素的大小、背景、疊放順序等，如同在繪圖軟件中作圖一樣方便。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.2.1 應(yīng)用應(yīng)用AP Div創(chuàng)建創(chuàng)建AP元素元素 在Dreamweaver的“標(biāo)準(zhǔn)”模式下，利用“布局”工具欄上的“繪制AP Div”按鈕可以插入AP元素。 1 1插入插入AP AP 元素元素 2 2為為APAP元素添加內(nèi)容元素添加內(nèi)容 3 3APAP元素的可見性元素的可見性 4 4APAP元素的重疊元素的重疊第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回

7、本節(jié)返回本節(jié)6.2.2 AP元素的屬性詳解元素的屬性詳解 要能正確運(yùn)用AP元素來設(shè)計網(wǎng)頁，必須了解AP元素的屬性和設(shè)置方法，在上面的介紹中已經(jīng)知道，利用AP元素的屬性可以精確快速地來調(diào)整操作AP元素。下面就來全面地了解AP元素屬性及其設(shè)置方法。 1 1單個單個APAP元素的屬性元素的屬性 先來看一個單個AP元素的屬性面板，如圖6-23所示。圖6-23單個AP元素的屬性面板 編號：給AP元素指定一個名稱以便在AP元素面板和代碼中識別它。只能用標(biāo)準(zhǔn)數(shù)字文字符號定義名稱。不要用特殊字符，比如：空格，連字號，斜線，或者句號。每個AP元素必須擁有一個區(qū)別于其他AP元素的名稱。 左（L）、上（T）：指定A

8、P元素相對于頁面或者其父AP元素（假如是被嵌入的）頂部和左上角的位置。其中【左】的值對應(yīng)于AP元素距離頁面左邊（嵌套AP元素對應(yīng)的是父AP元素的左邊框）的像素值，【上】的值對應(yīng)于AP元素距離頁面上面（嵌套AP元素對應(yīng)的是父AP元素的上邊框）的像素值。 寬、高：指定AP元素的寬度和高度。如果AP元素的內(nèi)容超過指定的大小，這些值將被覆蓋。Z軸：確定Z-軸選項，或著說是疊加順序。數(shù)值高的AP元素將顯示在數(shù)值低的上面。數(shù)值可以是正的也可以是負(fù)的。第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.2.2 AP元素的屬性詳解元素的屬性詳解 可見性：指定AP元素顯示的初始情況（顯示與否）。具體選

9、項如下所述。 Default（缺?。┎恢付梢曅詫傩?，但大多數(shù)瀏覽器解釋為Inherit （繼承）。 Inherit（繼承）就是繼承該AP元素的父AP元素的可視性屬性。 Visible（可視）顯示AP元素的內(nèi)容，不管其父AP元素的值。 Hidden（隱藏）不顯示AP元素的內(nèi)容，不管其父AP元素的值。 背景圖像：為AP元素指定背景圖像。單擊右邊的文件夾 按鈕選擇要設(shè)置的背景圖像。 背景顏色：為AP元素指定背景顏色。將這個選項空著即為指定透明背景。 溢出：指定當(dāng)AP元素內(nèi)的內(nèi)容超出了AP元素的設(shè)置大小時，AP元素將如何反應(yīng)。具體 選項如下所述。 Visible（可視）。當(dāng)AP元素內(nèi)的內(nèi)容超出了AP

10、元素的大小則增大AP元素的尺寸。AP元素的擴(kuò)展方向?yàn)橄路胶陀曳健?Hidden（隱藏）。保持AP元素的大小并裁掉容納不下的東西。并且不會出現(xiàn)滾動。 Scroll（卷軸）。無論AP元素內(nèi)的內(nèi)容是否超出了AP元素的大小都為AP元素添加滾動條。 Auto（自動）。只有當(dāng)AP元素內(nèi)的內(nèi)容超出了它的邊界才出現(xiàn)滾動條。 剪輯：定義AP元素內(nèi)的顯示區(qū)域（AP元素邊距，類似于ord中通過設(shè)置頁邊距來定義版心）可以指定以像素為單位的相對于該AP元素的邊框的距離。第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.2.2 AP元素的屬性詳解元素的屬性詳解 2 2多個多個APAP元素的屬性元素的屬性 當(dāng)選

11、擇兩個或者多個AP元素時，AP元素屬性面板將顯示文本屬性和普通AP元素的屬性的子集，允許一次修改多個AP元素。圖6-24所示是多個AP元素的屬性面板。 圖6-24多個AP元素的屬性面板 文本屬性部分在前面的學(xué)習(xí)中已經(jīng)講過，這里就不再重復(fù)了。這里只簡單介紹下半部分的設(shè)置。 左和上：指定AP元素相對頁面或者其父AP元素左上角的位置。 寬和高：指定AP元素的寬和高。當(dāng)AP元素中的內(nèi)容超出設(shè)定值時這些值將失效。 顯示：指定AP元素顯示的初始情況（顯示與否）。 標(biāo)簽：指定所用的HTML標(biāo)簽。推薦使用div。 背景圖象：為AP元素指定背景圖像。 背景顏色：為AP元素指定背景顏色。將這個選項空著即為指定透明

12、背景。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.3 制作制作AP元素動畫元素動畫 利用Dreamweaver中的時間軸，可以更改AP元素和圖像在一段時間內(nèi)的屬性，在網(wǎng)頁中直接創(chuàng)建不需要任何ActiveX控件、插件或JavaApplet（但需要JavaScript）的動畫。6.3.1 “時間軸時間軸”面板面板6.3.2 制作滾動字幕效果制作滾動字幕效果第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.3.1 “時間軸時間軸”面板面板 動畫的實(shí)現(xiàn)原理就是將畫面連起來播放，產(chǎn)生運(yùn)動的錯覺。所以動畫的基本單位就是一個畫面，也叫做幀。而在動畫中有些畫面是關(guān)鍵的，可以影響

13、整個動畫的，這樣的幀叫做關(guān)鍵幀。很多的畫面按照時間先后順序連起來播放就是動畫。在Dreamweaver中，時間軸就是用來排列畫面的順序的。 對于要在頁面加載后執(zhí)行的其他操作，時間軸也非常有用。例如，時間軸可以更改圖像標(biāo)簽的源文件，因此一段時間內(nèi)有不同的圖像出現(xiàn)在頁面上。 下面介紹一下Dreamweaver的時間軸。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.3.1 “時間軸時間軸”面板面板 1 1【時間軸時間軸】面板面板 選擇【窗口】|【時間軸】命令即可打開【時間軸】面板。如圖6-25所示。 時間軸下拉列表播放選項行為通道動畫通道當(dāng)前幀指示線 【時間軸】下拉列表：指定當(dāng)前在

14、【時間軸】面板中顯示文檔的哪些時間軸。系統(tǒng)默認(rèn)是Timeline1。 播放選項：包括用于查看動畫的命令選項。 “行為”通道：時間軸中特定的幀執(zhí)行某些行為的通道。 “動畫”通道：顯示用于制作AP元素和圖像動畫的條。 當(dāng)前幀指示線：給出當(dāng)前頁面上顯示的是時間軸的哪一幀。 圖6-25【時間軸】面板第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.3.1 “時間軸時間軸”面板面板 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.3.2 制作滾動字幕效果制作滾動字幕效果 制作滾動字幕效果的方法很多，下面介紹利用AP元素和時間軸結(jié)合制作一個文字左右滾動的效果。 1 1創(chuàng)建創(chuàng)建AP

15、AP元素元素 2 2將將APAP元素添加到時間軸元素添加到時間軸 3 3添加關(guān)鍵幀添加關(guān)鍵幀 4 4設(shè)置時間軸參數(shù)設(shè)置時間軸參數(shù)第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4 Spry框架框架 Spry框架是Dreamweaver CS3新增加的一個功能。它是一個JavaScript庫，Web設(shè)計人員使用它可以構(gòu)建能夠向站點(diǎn)訪問者提供更豐富體驗(yàn)的Web頁。有了Spry，就可以使用HTML、CSS和極少量的JavaScript將XML數(shù)據(jù)合并到HTML 文檔中。還可以創(chuàng)建Spry控件（如折疊控件和菜單欄），向各種頁面元素中添加不同種類的效果。在設(shè)計上，Spry框架的標(biāo)記非常簡單

16、且便于那些具有HTML、CSS和JavaScript基礎(chǔ)知識的用戶使用。 6.4.1 Spry效果效果6.4.2 Spry控件控件第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.1 Spry效果效果 Spry效果是視覺增強(qiáng)功能，可以將它們應(yīng)用于使用JavaScript的HTML頁面上幾乎所有的元素。效果通常用于在一段時間內(nèi)高亮顯示信息，創(chuàng)建動畫過渡或者以可視方式修改頁面元素?？梢詫⑿Ч苯討?yīng)用于HTML元素，而無需其它自定義標(biāo)簽。 Spry效果可以修改元素的不透明度、縮放比例、位置和樣式屬性（如背景顏色）?？梢越M合兩個或多個屬性來創(chuàng)建有趣的視覺效果。由于這些效果都基于Spry

17、，因此，當(dāng)用戶單擊應(yīng)用了效果的對象時，只有對象會進(jìn)行動態(tài)更新，不會刷新整個HTML頁面。 Spry效果包括下列幾種類型。 增大/收縮：使元素變大或變小。 擠壓：使元素從頁面的左上角消失。 顯示/漸隱：使元素顯示或漸隱。 晃動：模擬從左向右晃動元素。 滑動：上下移動元素。 遮簾：模擬百葉窗，向上或向下滾動百葉窗來隱藏或顯示元素。 高亮顏色：更改元素的背景顏色。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.1 Spry效果效果 要想給HTML頁面中的某個元素添加Spry效果，可以按照以下方法進(jìn)行操作。 （1）選中這個元素，然后在【行為】面板中單擊“”按鈕，在彈出的菜單中單擊【

18、效果】，在子菜單中選擇需要的效果。如圖6-35所示。 圖6-35 在【行為】面板中選擇效果 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.1 Spry效果效果 （2）選擇某個效果以后，會彈出相應(yīng)的對話框，可以在其中設(shè)置目標(biāo)元素等，因?yàn)槭孪纫呀?jīng)選擇了元素，所以這里直接單擊“確定”按鈕即可。如圖6-36所示。 圖6-36 設(shè)置目標(biāo)元素 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.1 Spry效果效果 （3）這時【行為】面板中就新增了相應(yīng)的一個行為，如圖6-37所示?？梢愿鶕?jù)具體需要更改事件，這里默認(rèn)是單擊元素。 圖6-37 【行為】面板新增一個行為 如果要

19、刪除一個或者多個效果行為，可以按照以下步驟進(jìn)行操作。 （1）選擇要應(yīng)用效果的內(nèi)容或布局對象。 （2）在【行為】面板中，單擊要從行為列表中刪除的效果。 （3）在【行為】面板中，單擊“刪除事件”按鈕 。 專家點(diǎn)撥：專家點(diǎn)撥：當(dāng)使用Spry效果時，系統(tǒng)會在“代碼”視圖中將不同的代碼行添加到網(wǎng)頁文件中。其中的一行代碼用來標(biāo)識 SpryEffects.js文件，該文件是包括這些效果所必需的。請不要從代碼中刪除該行，否則這些效果將不起作用。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.2 Spry控件控件 Spry框架支持一組用標(biāo)準(zhǔn)HTML、CSS和JavaScript編寫的可重用控

20、件。在利用Dreamweaver CS3制作網(wǎng)頁時，可以方便地插入這些控件，然后設(shè)置控件的樣式。 1 1插入插入SprySpry控件控件 在Dreamweaver CS3中的“插入”面板上，單擊“Spry”選項卡將工具欄切換到“Spry”工具欄，可以看到若干Spry控件圖標(biāo)，如圖6-38所示。 圖6-38 “Spry”工具欄 單擊某個Spry控件圖標(biāo)即可將相應(yīng)的Spry控件插入到當(dāng)前網(wǎng)頁中。也可以執(zhí)行“插入記錄”|“Spry”命令，在彈出的聯(lián)級菜單中選擇要插入的Spry控件。第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.2 Spry控件控件 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特

21、效與交互 返回本節(jié)返回本節(jié)6.4.2 Spry控件控件 2 2選擇和編輯選擇和編輯SprySpry控件控件 如果要選擇某個Spry控件，可以將鼠標(biāo)指向這個控件，直到看到控件的藍(lán)色選項卡式輪廓。如圖6-39所示。單擊控件左上角中的控件選項卡即可。 圖6-39 選擇控件圖6-40 在“屬性”面板中編輯控件 選擇某個控件后，在“屬性”面板中就可以編輯控件了。如圖6-40所示。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.2 Spry控件控件 3 3設(shè)置設(shè)置SprySpry控件的樣式控件的樣式 控件樣式是由CSS控制的。要想更改控件的外觀，可以對相應(yīng)的CSS文件進(jìn)行編輯。在站點(diǎn)的

22、SpryAssets文件夾中找到與該控件相對應(yīng)的CSS文件，并根據(jù)需要對CSS進(jìn)行編輯。 當(dāng)用戶在已保存的頁面中插入Spry控件時，Dreamweaver會自動在站點(diǎn)中創(chuàng)建一個SpryAssets目錄，并將相應(yīng)的JavaScript和CSS文件保存到其中。如果喜歡將Spry資源保存到其它位置，可以更改Dreamweaver保存這些資源的默認(rèn)位置。具體方法如下所示。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.4.2 Spry控件控件 （1）選擇“站點(diǎn)”“管理站點(diǎn)”命令。 （2）在“管理站點(diǎn)”對話框中選擇站點(diǎn)并單擊“編輯”按鈕。彈出“的站點(diǎn)定義為”對話框，如圖6-41所示。圖6

23、-41 編輯站點(diǎn)的對話框 （3）在“的站點(diǎn)定義為”對話框中的“分類”列表中選擇“Spry”類別。 （4）在“Spry資源文件夾”文本框中輸入想要用于Spry資源的文件夾的路徑，也可以單擊文件夾圖標(biāo)瀏覽到某個位置。設(shè)置完成后單擊“確定”按鈕。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5 JavaScript入門入門 6.5.1 標(biāo)簽標(biāo)簽6.5.2 編寫一個簡單的編寫一個簡單的JavaScript程序程序6.5.3 使用使用“代碼片斷代碼片斷”面板面板 JavaScript是目前在網(wǎng)頁中廣泛使用的腳本語言，它是Netscape公司利用Java的程序概念，將自己原有的Lives

24、cript重新進(jìn)行設(shè)計后而產(chǎn)生的腳本語言。 JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，有了JavaScript，可使網(wǎng)頁變得生動、活潑。使用它的目的是與HTML超文本標(biāo)識語言、Java小程序（Java Applet）一起實(shí)現(xiàn)在一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡(luò)客戶進(jìn)行交互，從而可以開發(fā)客戶端的應(yīng)用程序。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.1 標(biāo)簽標(biāo)簽 所有腳本程序都必須封裝在一對特定的HTML標(biāo)簽之間，標(biāo)簽表示一個腳本程序的開始，則表示該腳本程序的結(jié)束，一個網(wǎng)頁中可能有多個腳本程序。使用標(biāo)簽

25、的 語法結(jié)構(gòu)是： 如果要在網(wǎng)頁中用VBScript建立腳本程序，就應(yīng)該將標(biāo)簽的language屬性賦值為VBScript，語法結(jié)構(gòu)是： 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.1 標(biāo)簽標(biāo)簽 另外，為了照顧廣大的互聯(lián)網(wǎng)用戶，必須考慮那些使用了不支持客戶腳本程序的舊版本瀏覽器用戶。因?yàn)闉g覽器會忽略掉它不支持的任何HTML標(biāo)簽，所以腳本程序可能就會像純文本那樣顯示。這是網(wǎng)頁設(shè)計者所不想看到的，為了避免出現(xiàn)這樣的情況，可以在HTML注釋中封裝腳本程序。 舊版本的瀏覽器忽略標(biāo)簽，同時也忽略封裝在HTML注釋中的腳本程序，而一個新版本的瀏覽器即使是將腳本程序封裝在HTML注釋中，

26、也會識別其中的標(biāo)簽并解釋運(yùn)行其中的腳本程序。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.1 標(biāo)簽標(biāo)簽 script塊可以出現(xiàn)在HTML頁面的任何地方（body或者h(yuǎn)ead部分之中）。最好將所有的通用script代碼放在head部分，以使所有的script代碼集中放置。這樣即編譯管理script代碼也可以確保在body部分調(diào)用代碼之前所有的script代碼都被讀取并解碼。 /這里調(diào)用在HEAD部分定義的腳本程序（函數(shù)） 一般情況下，大多數(shù)script代碼被定義成過程函數(shù)（Function），放在head部分，在body部分調(diào)用函數(shù)時執(zhí)行它。對于一些簡單的script代碼也

27、可以直接放在body部分的script標(biāo)簽中。 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.2 編寫一個簡單的編寫一個簡單的JavaScript程序程序 本小節(jié)通過編寫一個簡單JavaScript程序制作一個帶鏈接的水平滾動字幕效果，在網(wǎng)頁中，這種效果一般用于廣告宣傳，非常醒目。實(shí)例的最終效果如圖6-42所示。在網(wǎng)站首頁的導(dǎo)航條下有一個帶鏈接的字幕在水平方向上滾動。 圖6-42 帶鏈接的水平滾動字幕效果 第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.2 編寫一個簡單的編寫一個簡單的JavaScript程序程序 本實(shí)例的制作步驟如下所示。 1 1創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁 （1）新建一個網(wǎng)頁文檔，將其保存為6.5.2.html。 （2）在這個網(wǎng)頁中，利用表格進(jìn)行布局，并在表格中輸入相應(yīng)的網(wǎng)站標(biāo)題文字和導(dǎo)航條。效果如圖6-43所示。 圖6-43 制作網(wǎng)頁第第6章章 網(wǎng)頁特效與交互網(wǎng)頁特效與交互 返回本節(jié)返回本節(jié)6.5.2 編寫一個簡單的編寫一個簡單的JavaScript程序程序 2 2編寫編寫JavaScriptJavaScript程序程序 （1）切換到“代碼