fireworks CS3入門與提高教程第8章 按鈕、動畫和行為

第8章按鈕、動畫和行為

本章重點本章主要介紹了Fireworks的按鈕和動畫的概念以及行為面板的使用。在Web頁中按鈕的輪替效果具有導(dǎo)航的作用，F(xiàn)ireworks將按鈕的輪替效果作為行為的一個封裝，通過樣式和特效，用戶可以方便地創(chuàng)建需要的按鈕。通過使用幀面板，用戶可以對動畫中的對象進行方便的管理、編輯和預(yù)覽。學(xué)習(xí)目的通過本章的學(xué)習(xí)，應(yīng)該可以：制作輪替按鈕。使用幀面板創(chuàng)建動畫，并對各幀上的對象進行編輯，學(xué)會使用洋蔥皮技術(shù)。為熱點對象和切片對象添加行為。使用行為面板制作下拉菜單。8.1按鈕和導(dǎo)航條

在學(xué)習(xí)熱點和切片工具的使用時學(xué)習(xí)過，F(xiàn)ireworks中不僅可以編輯圖像，而且還可以同時在圖像上綁定HTML代碼。雖然通過熱點和切片可以靈活的實現(xiàn)網(wǎng)頁間的跳轉(zhuǎn)，但它們在網(wǎng)頁中仍表現(xiàn)為靜態(tài)，圖片本身不會發(fā)生什么變化。而在實際的Internet中，通?？梢钥吹酱罅烤哂薪换ヌ匦缘膱D像。其中最常見的就是按鈕，例如：當(dāng)將鼠標(biāo)移動到一個按鈕上方時，按鈕圖片顯示為一種狀態(tài)；而將鼠標(biāo)移離按鈕上方時，按鈕又顯示成另一種狀態(tài)。通過代碼（如JavaScript等）可以實現(xiàn)這些特性，但手工編寫多種狀態(tài)與圖片關(guān)聯(lián)的代碼，工作量很大。Fireworks不僅能夠生成與圖像相關(guān)的綁定代碼，也可以方便地構(gòu)建多種復(fù)雜的按鈕行為。即使對JavaScript和CSS代碼一無所知，也可以在AdobeFireworksCS3中創(chuàng)建多種JavaScript按鈕和CSS或JavaScript彈出菜單。將這些操作同普通的圖像操作相結(jié)合可以實現(xiàn)多種動態(tài)效果。8.1.1概述

按鈕是網(wǎng)頁中常見的元素。單擊按鈕可以實現(xiàn)某種行為，或是進行某種操作。例如，單擊一個按鈕可以進入到一個網(wǎng)站中，或是跳轉(zhuǎn)到另一個頁面上。利用按鈕在頁面中實現(xiàn)導(dǎo)航，是按鈕最常見的用途。最簡單的按鈕就是一幅圖片（當(dāng)然，為了美觀，可能會將圖片做成矩形的形狀，然后使用諸如內(nèi)斜角等特效來形成立體效果，再在上面顯示文字）。但是單擊這種圖片按鈕時，按鈕圖片本身不會發(fā)生任何變化，所以用戶無法了解按鈕是否被按下或者要確定單擊的操作是否生效。當(dāng)一個網(wǎng)頁中圖片很多的時候，用戶很難判斷哪幅圖片是按鈕，哪幅帶有鏈接。因為將鼠標(biāo)移動到按鈕上時，除了鼠標(biāo)指針可能變成手的形狀之外，沒有其他任何特征。

8.1.2創(chuàng)建和導(dǎo)出按鈕

在按鈕編輯器中，通過繪制不同狀態(tài)下的按鈕圖片，就可以實現(xiàn)對按鈕的創(chuàng)建。1．新建按鈕2．編輯按鈕對已插入的按鈕進行編輯修改的具體操作如下：方法一：在文檔窗口中，雙擊要編輯的按鈕，打開按鈕編輯器，然后對按鈕的各個狀態(tài)進行編輯。編輯完畢，關(guān)閉按鈕編輯器，即可實現(xiàn)對按鈕的更新。方法二：（1）在文檔窗口中，選中要編輯的按鈕。（2）選擇【修改】|【元件】|【編輯元件】菜單命令。打開按鈕編輯器編輯按鈕。3．為按鈕添加URL鏈接添加按鈕的目的是為了通過單擊執(zhí)行某種操作，如鏈接。在Fireworks中，可以為按鈕分派URL地址。為按鈕分派鏈接的具體操作如下：（1）在文檔窗口中選中要添加URL的按鈕實例。（2）在按鈕的屬性欄中，單擊【鏈接】下拉列表，可以直接輸入鏈接地址，也可以在下拉列表中選擇鏈接地址。（3）在【替代】文本框中可以輸入該按鈕的替換文字。（4）在【目標(biāo)】下拉菜單中，可以指定鏈接目標(biāo)的打開方式。4．導(dǎo)出按鈕在文檔中完成了按鈕的創(chuàng)建之后，需要導(dǎo)出后在Web中使用。導(dǎo)出按鈕的方法同導(dǎo)出切片的方法相同。8.1.3繪制導(dǎo)航條

導(dǎo)航條就是一組分別指向不同鏈接地址的按鈕。在網(wǎng)頁中，單擊相應(yīng)的按鈕，就可以實現(xiàn)相應(yīng)的跳轉(zhuǎn)。通常在網(wǎng)站的網(wǎng)頁中，無論如何跳轉(zhuǎn)，導(dǎo)航條按鈕始終出現(xiàn)在網(wǎng)頁中（通常將它們放入另外的框架中，以便保留在屏幕上）。這樣就方便了不同層次頁面之間直接切換。這些按鈕起到了很好的導(dǎo)航作用，因此被稱作導(dǎo)航條。通常在文檔中可以通過復(fù)制按鈕的方法來快速構(gòu)建導(dǎo)航條。在復(fù)制了按鈕之后，分別為這些按鈕指派不同的URL地址，就可以制作導(dǎo)航條。通常導(dǎo)航條的按鈕形狀相同，文字一般不同。在創(chuàng)建導(dǎo)航條時應(yīng)該能夠保證可以對按鈕形狀同時進行修改，而不影響按鈕上的文字。Fireworks允許將該按鈕主體作為一個元件，而按鈕主體的實例連同其文字作為另一元件來實現(xiàn)。8.2制作動畫

在網(wǎng)頁中添加動畫效果會使網(wǎng)頁變得生動活潑。Fireworks不僅可以制作精美的靜態(tài)圖像，還能方便地創(chuàng)作動畫。在創(chuàng)建動畫時，首先制作動畫元件，然后隨時間改變動畫元件的屬性。元件的每一個動作都存放在對應(yīng)的幀中。按一定順序播放這些幀就能產(chǎn)生動畫效果。通過FireworksCS3的優(yōu)化面板可以方便地將編輯好的動畫符號導(dǎo)出為GIF文件或SWF文件。8.2.1概述

動畫中稱每個獨立的畫面為一幀。將靜態(tài)幀不斷地連續(xù)顯示，當(dāng)幀與幀之間的時間間隔小于人眼存在的視覺暫留時間時，就可以產(chǎn)生動畫效果。動畫的原理同電影很相近。通常，1s的電影畫面中包含了24幀靜態(tài)圖像。但動畫的連續(xù)性要求遠比電影低，所以可以根據(jù)要求設(shè)置不同的幀數(shù)。當(dāng)1s內(nèi)幀數(shù)很少，如2s時，可以產(chǎn)生閃爍的效果。利用Fireworks可以構(gòu)建多種復(fù)雜的動畫，例如，通過連續(xù)幀的內(nèi)容，可以使一個對象呈現(xiàn)出橫越畫布、逐漸變大或變小、旋轉(zhuǎn)、改變顏色、淡入淡出、改變形狀等效果。合理運用這些技巧，還可以構(gòu)建成一個非常復(fù)雜的動畫?？梢灾v述一個完整的故事，也可以描述一個實際運動的物體，如卡通人物、動物或是汽車等。此外，如果一幅圖像中只有一小部分是活動的，還可以利用切片技術(shù)，將那一小部分的圖像制作成切片動畫，這樣可以極大減小圖像文件的大小，加快下載速度。通過將動畫和輪替行為結(jié)合起來，也可以獲得一些特殊的效果，例如，將鼠標(biāo)移動到某個圖像上時，動畫開始播放，而將鼠標(biāo)移離該圖像時，動畫停止播放。8.2.2規(guī)劃動畫

在繪制動畫之前，應(yīng)該對動畫進行合理的規(guī)劃。這包括在動畫中需要表達些什么，需要使用什么樣的技術(shù)和參數(shù)能實現(xiàn)這種需求。明確動畫內(nèi)容：這樣便于確定動畫圖象中需要出現(xiàn)的對象和其他元素。確定好的對象可以自己繪制，也可以采用導(dǎo)入的方式獲得。并且合理的利用樣式和實例的技術(shù)，可以大大提高效率。規(guī)劃幀：了解了描述內(nèi)容之后，需要知道動畫中應(yīng)該使用多少幀。需要描述的比較細膩流暢的動畫，應(yīng)該用較多的幀并且?guī)c幀之間的圖像差異應(yīng)減小到足夠小。若對動畫流暢性的要求并不高，則可以減小幀的數(shù)量，或加大兩幀圖像之間的差異。動畫的播放速度：決定了動畫的流暢程度，并且影響動畫的表現(xiàn)力。幀與幀間的顯示速度并不固定，可以改變。通過控制不同幀之間的延遲時間，可以實現(xiàn)一些非常的效果。合理使用圖層：Fireworks中將圖層和幀結(jié)合起來，更方便動畫圖像的編輯操作。動畫文檔中設(shè)置的多個圖層，可以出現(xiàn)在相應(yīng)的同一個幀上。8.2.3管理幀

制作動畫時可以從無到有一幀一幀地制作動畫，也可以將現(xiàn)有的多幅文件組合為一幅動畫，之后再進行編輯修改。創(chuàng)建和管理動畫的操作可以通過幀面板來完成。單擊菜單【窗口】|【幀】命令打開幀面板,如圖所示。1．添加空白幀動畫必須包含2個或2個以上的幀才能在圖像中顯示動態(tài)效果。若文檔中只有一個幀，它實際上是之前介紹的傳統(tǒng)的靜態(tài)圖像。所以，創(chuàng)建新的動畫圖像時，首要任務(wù)是在文檔中添加幀。在文檔中添加一個新的空白幀的操作如下所示：方法一：單擊幀面板上的【新建/重制幀】按鈕，即可在文檔中添加一個新的空白幀。添加的空白幀放置到幀面板中當(dāng)前選中幀的后面。新建幀只有畫布顏色同文檔中初始幀的顏色相同，其余都是空白。方法二：單擊菜單選項【編輯】|【插入】|【幀】命令。在幀面板中自動添加一個空白幀。方法三：按住Alt鍵，在幀面板的幀列表區(qū)域單擊鼠標(biāo)左鍵，可以直接添加新的空白幀。2．復(fù)制現(xiàn)有幀在制作連續(xù)的動畫時，可以通過復(fù)制現(xiàn)有的幀，然后再在其上進行編輯修改，生成最終的動態(tài)效果。根據(jù)現(xiàn)有的幀復(fù)制一個幀的具體操作如下：（1）在幀面板中，選中要復(fù)制的幀。（2）將要復(fù)制的幀拖動到幀面板上的【新建/重制幀】按鈕上，即可復(fù)制該幀。此時在幀面板上的幀列表中，新復(fù)制的幀會出現(xiàn)在當(dāng)前選中幀的下方（也就是后面）。在規(guī)劃好了幀操作后可以在指定的位置復(fù)制所需數(shù)目的幀，具體操作如下：（1）在幀面板上，選中要復(fù)制的幀。（2）打開幀面板菜單，選擇【復(fù)制幀】命令。打開【復(fù)制幀】對話框，如圖所示。在打開的對話框中輸入要復(fù)制的幀的數(shù)目，并設(shè)置新幀出現(xiàn)的位置。（3）設(shè)置完畢，按下【確定】，完成對現(xiàn)有幀的復(fù)制。如圖表示在圖所示的幀面板中添加一個幀。3．改變幀的播放順序幀的播放順序由它在幀面板上的順序確定，播放時先播放位于上端的幀然后再播放位于下端的幀。改變幀的播放順序的具體操作如下：（1）在幀面板中，單擊要改變順序的幀。（2）用鼠標(biāo)將其拖動到所需的位置上，此時目標(biāo)位置會出現(xiàn)一個閃爍黑條。（3）釋放鼠標(biāo)，即可將幀移動到相應(yīng)的位置上。對幀重新排序后，F(xiàn)ireworks自動對所有的幀重新排列，并且?guī)拿Q也會根據(jù)新的順序改變，如圖所示。4．刪除幀對于不需要的幀，可以將其在文檔中刪除，刪除幀的具體操作如下所示：方法一：（1）在幀面板中選中要刪除的幀。（2）打開幀面板菜單，選擇【刪除幀】命令。刪除選中的幀。方法二：（1）在幀面板上選中要刪除的幀。（2）單擊幀面板上的【刪除幀】按鈕，刪除選中的幀。方法三：（1）在幀面板上選中要刪除的幀。（2）將該幀拖動到幀面板上的【刪除幀】按鈕上，即可刪除幀。8.2.4在幀中編輯對象

Fireworks中，因為每個幀都可作為一個完整地圖像文檔，所以可以在幀面板中編輯選中的對象。并且在一個幀中編輯對象，不會影響另一個幀中的內(nèi)容。1．在幀之間復(fù)制或移動對象使用幀面板可以很便捷地將某個對象從一個幀復(fù)制或移動到另一個幀中。具體操作如下：（1）在文檔窗口中選中要復(fù)制的對象。此時在幀面板上該對象所在幀的右方出現(xiàn)一個藍色的矩形，如圖所示。（2）按住Alt鍵，將該藍色矩形拖動目標(biāo)幀項上，此時鼠標(biāo)指針右下角帶有【＋】符號，同時目標(biāo)幀右方會出現(xiàn)黑色的閃爍方塊。如圖第1幅圖所示。（3）若要移動對象，直接將該藍色矩形拖動到目標(biāo)幀所在的列上即可，此時該目標(biāo)幀項右方會出現(xiàn)黑色閃爍方塊。如圖第2幅圖所示。（4）釋放鼠標(biāo)，選中的對象就被復(fù)制或移動到目標(biāo)幀上。2．在幀之間共享層使用層，可以方便地對同一個幀中的不同對象進行管理。有時需要在多個圖像幀中重復(fù)某些固定的內(nèi)容，如背景等。通過圖層共享的方法，可以方便實現(xiàn)。圖層共享的原理是：將在所有幀中都固定出現(xiàn)并保持靜止的對象放置在某一圖層中，然后將該圖層在各幀之間交叉共享，這樣該圖層中的內(nèi)容就會出現(xiàn)在所有的幀中。若需要修改該對象，只需要在任何一個幀中對其進行修改，就可以反映到所有的幀中，從而減輕了工作量。若要禁止在幀間共享層，請進行如下操作：（1）雙擊共享層。（2）取消選擇【共享交疊幀】。（3）為將對象復(fù)制到幀的方式選擇下列選項之一：將共享層的內(nèi)容只保留在當(dāng)前幀中。將共享層的內(nèi)容復(fù)制到所有幀中。3．分散到幀若在一個幀中繪制了多個對象，可以使用分散到幀的操作，將創(chuàng)建的許多對象分別放入不同的幀內(nèi)。分散到幀的具體操作如下所示：（1）在文檔中選中要分發(fā)到不同幀中的多個對象。（2）在幀面板上單擊【分散到幀】按鈕；或打開面板菜單，選擇【分散到幀】命令。4．將多個圖像文件打開到不同幀中若已經(jīng)存在多個圖像，并希望將這些圖像組合起來形成一個動畫圖像，可以按照如下方法進行操作：（1）選擇【文件】|【打開】命令。打開【打開】對話框，如圖8-23所示。按住【Ctrl】鍵，在文件列表中，選中要打開的多個文件。按住【Shift】鍵，選中要打開的多個連續(xù)的文件。（2）選中【以動畫打開】復(fù)選框。（3）單擊【打開】，即可打開選中的多個文檔，并將它們放入不同的幀中。5．洋蔥皮技術(shù)洋蔥皮技術(shù)的含義是【同時在文檔中查看多個幀中的內(nèi)容】。洋蔥皮是一個傳統(tǒng)動畫制作的術(shù)語，主要是指在半透明的描圖紙上繪制動畫幀，以便透過紙張看到其他幀中的內(nèi)容，便于了解兩幀或多幀之間圖案的相差程度，以掌握動畫的流暢性。默認狀態(tài)下，文檔窗口只能看到當(dāng)前一個幀的內(nèi)容。利用洋蔥皮技術(shù)可以使各幀之間呈半透明狀態(tài)，所以在當(dāng)前幀中就可以看到其他幀中的圖像，方便了解動畫的整個流程?！狙笫[皮】打開后，當(dāng)前幀之前或之后的幀中的對象會變暗，以便與當(dāng)前幀中的對象區(qū)別開來。6．范圍選擇器使用幀面板上各個幀項目左方的范圍選擇器，可以更方便地指定在文檔中同時顯示的幀數(shù)。8.2.5控制動畫

在創(chuàng)建了動畫的各個幀之后，F(xiàn)ireworks允許對動畫的流程進行相應(yīng)的設(shè)置。如設(shè)置動畫的循環(huán)次數(shù)，以及在播放動畫時每個幀顯示的時間等。1．設(shè)置動畫的循環(huán)播放次數(shù)設(shè)置動畫播放的循環(huán)次數(shù)的具體操作如下：（1）單擊幀面板下方的循環(huán)按鈕，打開循環(huán)控制菜單，如圖所示。（2）選擇需要的選項。無循環(huán)：不循環(huán)播放動畫，動畫圖像在載入網(wǎng)頁時只播放一次。永久：永久循環(huán)播放動畫，此動畫圖像在載入網(wǎng)頁中后將一直播放下去，直到用戶離開該頁面為止。（3）選擇其他數(shù)字，表示指定具體的播放次數(shù)。

2．控制幀延遲時間在播放動畫中，可以控制幀與幀之間的時間間隔來改變動畫的節(jié)奏。設(shè)置不同幀與幀之間的時間間隔的具體操作如下：（1）在幀面板上，選中要設(shè)置幀延遲時間的幀?？梢赃x擇一個，也可以選擇多個。（2）雙擊該幀的右部分，或者在幀面板菜單中選擇【屬性】命令，打開【幀延時】對話框，如圖所示。（3）在【幀延時】文本框中輸入需要延遲的時間，單位是1|100s。（4）設(shè)置完畢，按回車鍵，使設(shè)置生效。幀的延遲時間會顯示在幀面板中每個幀的右邊位置上，如圖所示。8.2.6導(dǎo)出動畫

在創(chuàng)建和設(shè)計完動畫之后，在Web中使用時，需要將動畫導(dǎo)出為動畫GIF格式。動畫的導(dǎo)出同普通圖像的導(dǎo)出操作類似。在導(dǎo)出為GIF格式的動畫圖像時，需要對要導(dǎo)出的對象進行優(yōu)化。1．優(yōu)化動畫GIF圖像優(yōu)化動畫GIF圖像同優(yōu)化普通圖像的不同之處是需要在優(yōu)化面板上將文件格式選擇為【動畫GIF】，如圖所示。否則生成的是普通的圖像文件，不是動畫文件。因為動畫GIF文件是GIF文件，所以，可以對動畫文件應(yīng)用如透明等其他GIF圖像固有的特性。2．自動裁切使用Fireworks的【自動裁切】功能，可以對文檔中各幀自動進行比較，裁切出所有幀中有變化的區(qū)域。利用這一操作可以只保存圖像中改變過的內(nèi)容，而不會將未改變的內(nèi)容重復(fù)存儲。這樣可以縮小文件大小。3．自動差異化有時使用了【自動裁切】功能，但其中仍可能存在未改變的內(nèi)容，例如圖像的背景等。Fireworks的【自動差異化】功能可以將自動裁切區(qū)域中未改變的像素轉(zhuǎn)換為透明像素，進一步減小文件大小。4．使用導(dǎo)出預(yù)覽對話框優(yōu)化文檔（1）選擇菜單【文件】|【圖像預(yù)覽】命令，打開導(dǎo)出預(yù)覽對話框。選擇【動畫】選項卡。（2）單擊【處置方式】按鈕，打開下拉列表。（3）單擊幀列表中每個幀項左邊的【眼睛】圖標(biāo)，可以控制幀的導(dǎo)出與否。出現(xiàn)【眼睛】圖標(biāo)表示該幀項會導(dǎo)出。再次單擊【眼睛】圖案。圖標(biāo)消失，表示不導(dǎo)出該幀。（4）選中一個或多個幀，在幀延時文本框中輸入需要的幀延遲時間，單位為1|100s。在【動畫】選項卡的幀列表的右下角位置，顯示有動畫總的延遲時間。（5）單擊【循環(huán)播放】按鈕，在下拉列表中選擇循環(huán)播放次數(shù)。（6）選中【自動裁切】和【自動差異化】復(fù)選框，可以激活Fireworks對應(yīng)的特性。（7）在導(dǎo)出預(yù)覽對話框的右部還可以對動畫進行剪切、預(yù)覽動畫等。5．預(yù)覽動畫可以在Fireworks的文檔窗口中預(yù)覽動畫效果，也可以在瀏覽器中對動畫進行預(yù)覽。單擊Fireworks程序窗口狀態(tài)行右方的動畫播放按鈕，可以在文檔窗口中直接預(yù)覽動畫的播放效果。選擇菜單【文件】|【在瀏覽器中預(yù)覽】|【在Iexplorer中預(yù)覽】命令，可以直接在IE瀏覽器中預(yù)覽。此時也可以直接按F12打開IE瀏覽器。Fireworks指定兩個瀏覽器，主瀏覽器和次瀏覽器。指定主瀏覽器和次瀏覽器的具體操作如下：（1）選擇菜單【文件】|【在瀏覽器中預(yù)覽】|【設(shè)置主瀏覽器】命令，打開【定位瀏覽器】對話框。（2）選擇要設(shè)為主瀏覽器的執(zhí)行程序。（3）單擊【打開】完成設(shè)置。（4）同樣選擇【文件】|【在瀏覽器中預(yù)覽】|【設(shè)置次瀏覽器】命令可以設(shè)置此瀏覽器。8.2.7創(chuàng)建切片動畫

若想在一幅很大的圖像中設(shè)置較小的部分為動畫效果，可以使用Fireworks中的切片技術(shù)。Fireworks允許將圖像的某個單獨切片設(shè)置為動畫效果。也就是為單獨的某個切片添加多個圖幀，而導(dǎo)出時，該切片四周的其他圖像切片導(dǎo)出為普通的圖像，而動畫的切片區(qū)域?qū)С鰹閯赢婫IF圖像。如在圖的背景圖中的左上角設(shè)置一個楓葉飄落的動畫?；静僮魅缦拢海?）在大圖像中繪制出需要制作成動畫的切片對象。（2）在文檔中創(chuàng)建多個圖幀。如圖中第1幅圖所示。（3）在各個圖幀中切片對象所在的位置上，分別設(shè)置動畫的各個幀內(nèi)容。如圖中第2幅圖所示。（4）在文檔中選中切片對象，并設(shè)置其優(yōu)化選項。文件格式應(yīng)設(shè)置為【動畫GIF接近網(wǎng)頁128】。（5）對圖像中其他的區(qū)域進行常規(guī)優(yōu)化。如圖中第3幅圖所示。（6）完成導(dǎo)出。8.3行為

現(xiàn)在多數(shù)網(wǎng)頁都使用了動態(tài)效果和人機交互特性。如前面介紹的按鈕和導(dǎo)航條就采用了動畫效果。Fireworks提供一種【行為】面板，可以方便的建立用戶需要的行為，而不需要編輯JavaScript代碼。此外，行為可以看作Fireworks內(nèi)置的JavaScript庫，它可以幫助構(gòu)建腳本，還可以對現(xiàn)有腳本進行自動的管理。Fireworks將輪替按鈕這種行為封裝起來，所以用戶感受不到。8.3.1概述

行為就是在網(wǎng)頁中進行的一系列動作。通過這些動作，可以實現(xiàn)用戶同網(wǎng)頁的交互或?qū)е履硞€任務(wù)的執(zhí)行。通常一個行為由一個事件和一系列動作組成。例如，用戶將鼠標(biāo)移動到一幅圖像上，這就產(chǎn)生了一個事件，如果這時候圖像發(fā)生變化（比如發(fā)生輪替），就導(dǎo)致了一系列動作發(fā)生。通常在網(wǎng)頁中，動作由JavaScript代碼實現(xiàn)，F(xiàn)ireworks允許使用內(nèi)置的行為向文檔中添加JavaScript代碼。將文檔導(dǎo)出時，不僅會生成圖像文件，還生成相應(yīng)的HTML碼，以便在其他的HTML編輯器中使用。事件則通常由瀏覽器所定義，針對頁面元素或