網(wǎng)頁設(shè)計(jì)與制作課件第9章

案例說明使用Dreamweaver可以創(chuàng)建帶有文本字段、單選按鈕、復(fù)選框和文件域等輸入類型的表單，這些輸入類型又被稱為表單對象。本案例將要制作的“歡樂購”注冊頁面，效果如右圖所示。該頁面包含了表單中的幾個主要元素：文本框、密碼框、單選按鈕、復(fù)選框等。通過制作該頁面，可以掌握在網(wǎng)頁中插入表單標(biāo)簽，以及使用各種結(jié)構(gòu)標(biāo)簽對表單元素進(jìn)行布局的方法，并了解表單標(biāo)簽在頁面中的默認(rèn)顯示效果。案例一應(yīng)用表單制作“歡樂購”注冊頁面——應(yīng)用表單和表單對象相關(guān)知識表單多用于填寫用戶信息。右圖為京東網(wǎng)注冊頁面，當(dāng)用戶填寫完信息，單擊“立即注冊”按鈕后，所填信息將提交到網(wǎng)站數(shù)據(jù)庫中。一、表單基礎(chǔ)知識嚴(yán)格來說，一個完整的表單設(shè)計(jì)應(yīng)該分為兩部分，即表單對象部分和應(yīng)用程序部分，它們分別由網(wǎng)頁設(shè)計(jì)師和程序設(shè)計(jì)師來完成。一般首先由網(wǎng)頁設(shè)計(jì)師制作出一個表單頁面（就是表單對象部分），此時的表單只是一個空殼，并不具備工作的能力；還需要程序設(shè)計(jì)師來編寫程序（應(yīng)用程序部分），實(shí)現(xiàn)表單與數(shù)據(jù)庫之間的連接。二、插入表單由于默認(rèn)狀態(tài)下插入的表單是以100%的寬度顯示，所以在插入表單前一般都要先創(chuàng)建一個表格或Div，之后將表單插入到單元格或Div中。啟動DreamweaverCC，新建一個網(wǎng)頁文檔，并在其中插入一個1行1列，“表格寬度”為“600像素”，其他各項(xiàng)均為0的表格。步驟01將插入點(diǎn)置于表格單元格中。然后單擊“插入”面板“表單”類別中的“表單”按鈕，在表格中插入表單。步驟02文檔編輯窗口中的表單顯示為紅色虛線框，瀏覽器中的表單是不可見的。接下來設(shè)置表單屬性，將插入點(diǎn)置于表單區(qū)域中，“屬性”面板中將顯示表單屬性。步驟03ID：設(shè)置表單名稱，可用于程序調(diào)用。頁面中插入的第1個表單默認(rèn)名為“form1”，后面插入的依次為“form2”“form3”……。Class（類）：對表單應(yīng)用定義好的CSS樣式。Action（動作）：用于指定處理該表單的動態(tài)頁或腳本文件的路徑，可以直接鍵入完整的路徑，也可以單擊編輯框右側(cè)的文件夾圖標(biāo)來選擇站點(diǎn)中的文件。Method（方法）：選擇傳送表單數(shù)據(jù)的方式。Enctype（編碼類型）：指定提交給服務(wù)器的數(shù)據(jù)所使用的編碼類型。Target（目標(biāo)）：選擇打開返回信息網(wǎng)頁的方式。三、插入表單元素可以把表單看做一個容器，表單對象就是放在這個容器里的東西，只有添加了表單對象，表單才能真正起作用，才可以讓訪問者輸入數(shù)據(jù)或執(zhí)行其他操作。常用的表單對象主要有文本字段、單選按鈕、復(fù)選框和按鈕等，下圖顯示了常見的表單對象。在插入文本字段之前，應(yīng)確保已經(jīng)插入一個表單，并且將插入點(diǎn)置于表單中。步驟01單擊“插入”面板“表單”類別中的“文本”按鈕，即可在表單中插入一個文本字段。文本字段默認(rèn)處于選中狀態(tài)，“屬性”面板中顯示其屬性，如下圖所示。步驟02Name：用于設(shè)置文本字段名稱，每個文本字段都必須有一個唯一的名稱。Size（字符寬度）：用英文字符單位來指定文本字段寬度。MaxLength（最多字符數(shù)）：設(shè)置文本字段中最多可輸入的字符數(shù)。Disabled（禁用）復(fù)選框：選擇該項(xiàng)后，文本字段的邊框?qū)⒆優(yōu)榛疑⑶艺麄€文本框不可用。Required（復(fù)選框）：選中該復(fù)選框可將文本框設(shè)置為在提交之前必須輸入內(nèi)容。。AutoComplete復(fù)選框：設(shè)置表單是否啟用自動完成功能。提示表單對象的名稱不能包含空格或特殊字符，可以使用字母、數(shù)字或下劃線的組合。提示最好根據(jù)文本字段的內(nèi)容設(shè)置合適的“最多字符數(shù)”，防止個別瀏覽者惡意輸入大量數(shù)據(jù)，影響系統(tǒng)的穩(wěn)定性。AutoFocus復(fù)選框：設(shè)置在支持HTML5的瀏覽器中打開網(wǎng)頁時，鼠標(biāo)光標(biāo)自動聚焦在文本字段中。ReadOnly（只讀）復(fù)選框：選擇該項(xiàng)后，文本字段中的內(nèi)容將不可更改。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在學(xué)習(xí)了表單和表單對象的基礎(chǔ)知識后，下面通過創(chuàng)建“歡樂購”注冊頁面，來進(jìn)一步學(xué)習(xí)表單和表單對象在實(shí)際網(wǎng)頁制作中的應(yīng)用。案例實(shí)施將“huanlegou”文件夾拷貝至本地磁盤，然后啟動DreamweaverCC，在其中創(chuàng)建站點(diǎn)“huanlegou”，將該文件夾設(shè)置為站點(diǎn)根文件夾。一、網(wǎng)頁、網(wǎng)站和主頁步驟01一、網(wǎng)頁、網(wǎng)站和主頁一、構(gòu)建HTML結(jié)構(gòu)在站點(diǎn)“huanlegou”中新建一個名為“huanlegou_lx.html”的網(wǎng)頁文檔并打開。步驟02分析頁面結(jié)構(gòu)。該頁面需要分為3部分，以安排各元素在網(wǎng)頁中的位置，以及在后面使用CSS分別設(shè)置相應(yīng)元素的樣式。步驟031．對網(wǎng)頁進(jìn)行整體布局①logo部分：包括歡樂購logo及右側(cè)的廣告，可以用<div>標(biāo)簽來構(gòu)造。②表單部分：將無序列表標(biāo)簽放到這部分來進(jìn)行簡單的布局，大結(jié)構(gòu)用<div>標(biāo)簽來構(gòu)造。③版權(quán)層：最后一行文本所在部分，可以用HTML5中的新標(biāo)簽<footer>來構(gòu)造。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在Dreamweaver設(shè)計(jì)界面中定位插入點(diǎn)，然后單擊“插入”面板“HTML”類別中的“Div”按鈕，打開“插入Div”對話框，在id編輯框中輸入“l(fā)ogo”，然后單擊“確定”按鈕，如左圖所示，插入Div的效果如右圖所示。步驟04案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在代碼界面中將插入點(diǎn)置于代碼<divid=“l(fā)ogo”>此處顯示id“l(fā)ogo”的內(nèi)容</div>后面，然后參照步驟4的方法插入一個id值為“main”的div，如下圖所示。步驟05案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在代碼界面中將插入點(diǎn)置于代碼<divid=“main”>此處顯示id“main”的內(nèi)容</div>后面，然后單擊“插入”面板“HTML”類別中的“Footer”按鈕，打開“插入Footer”對話框，如左圖所示，單擊“確定”按鈕插入Footer標(biāo)簽，如右圖所示。步驟06案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁插入用于布局的<ul>標(biāo)簽。在代碼界面中刪除id為main的<div></div>標(biāo)簽對之間的文本，然后將插入點(diǎn)置于該標(biāo)簽對之間，單擊“插入”面板“HTML”類別中的“項(xiàng)目列表”按鈕，插入<ul>標(biāo)簽，如下圖所示。步驟012．制作表單部分1——添加列表和輸入框標(biāo)簽提示根據(jù)案例效果圖可以看出，頁面中要添加的表單元素標(biāo)簽包括文本框、密碼框、單選按鈕、復(fù)選框、文本區(qū)域及按鈕。為避免頁面上嵌套過多的<div>標(biāo)簽增加頁面布局的難度，故表單部分采用ul無序列表的方式來布局。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在ul標(biāo)簽中添加表單。在代碼界面中將插入點(diǎn)置于<ul></ul>標(biāo)簽對中，單擊“插入”面板“表單”類別中的“表單”按鈕，插入表單標(biāo)簽<form>，如下圖所示。步驟02提示書寫HTML網(wǎng)頁代碼時，要注意標(biāo)簽之間的嵌套，它們決定了元素的包含關(guān)系。此外，為使代碼層次分明，方便后期查看和調(diào)試，可將標(biāo)簽放在不同的行中，并利用代碼界面左側(cè)“工具欄”中的“縮進(jìn)代碼”按鈕，對不同層次的標(biāo)簽進(jìn)行不同的縮進(jìn)。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加li標(biāo)簽。需要制作的注冊頁面上屬于表單部分的內(nèi)容有：會員賬號、登錄密碼、確認(rèn)密碼、會員性別、個人愛好、出生日期、按鈕、閱讀協(xié)議、協(xié)議文本域共9項(xiàng)內(nèi)容。此處使用列表對這些元素進(jìn)行布局，為此，將插入點(diǎn)置于<form>標(biāo)簽對中，然后單擊“插入”面板“HTML”類別中的“列表項(xiàng)”按鈕，插入<li>標(biāo)簽，按照同樣的方法共添加9個<li>標(biāo)簽，如下圖所示。步驟03后添加的<li>標(biāo)簽一定要在前一個標(biāo)簽的后面。當(dāng)添加下一個<li>標(biāo)簽時，如果不在代碼界面中將插入點(diǎn)移到前1個<li></li>標(biāo)簽對的后面，就會將新的<li>標(biāo)簽添加到前1個標(biāo)簽的內(nèi)部。例如，添加完第1個<li>標(biāo)簽后，代碼為：<li></li>，如果不移動光標(biāo)就直接添加新的標(biāo)簽，結(jié)果就會變成：<li><li></li></li>，這顯然是錯誤的。提示案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁插入文本框。在設(shè)計(jì)界面中，將插入點(diǎn)置于第1個<li>標(biāo)簽中，單擊“插入”面板“表單”類別中的“文本”按鈕，插入文本框和<label>標(biāo)簽。步驟04在代碼界面中修改<label>標(biāo)簽為<labelfor=“user”>會員賬號：</label>，修改<input>標(biāo)簽為<inputtype="text"name="username"id="user">。步驟05案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加密碼輸入框。首先參照步驟4，在設(shè)計(jì)界面中，將插入點(diǎn)置于第2個<li></li>標(biāo)簽對中，然后單擊“插入”面板“表單”類別中的“密碼”按鈕，插入密碼框和<label>標(biāo)簽，如下圖所示。步驟06文本框、復(fù)選框、單選按鈕等表單元素的標(biāo)簽均為<input>，這是一個單標(biāo)簽，其type屬性的值決定了元素的類型，如“text”表示文本框；name屬性用于定義元素名稱；id和class屬性用于定義元素的id和類別名。提示案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在代碼界面中修改<label>標(biāo)簽為<labelfor=“psw1”>登錄密碼：</label>，修改<input>標(biāo)簽為<inputtype="password"name="psw1"id="psw1">。步驟07添加確認(rèn)密碼輸入框。參照步驟6和步驟7的操作，在第3個<li></li>標(biāo)簽對中添加確認(rèn)密碼輸入框及其對應(yīng)的<label>標(biāo)簽，此時的網(wǎng)頁效果如下圖所示。步驟08使用“插入”面板插入文本框和密碼框時，若將插入點(diǎn)放在設(shè)計(jì)界面中，將自動添加<label>標(biāo)簽；若將插入點(diǎn)放在代碼界面中，將只添加<input>標(biāo)簽。提示案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加“會員性別”單選鈕。在代碼界面中，將插入點(diǎn)置于第4個<li></li>標(biāo)簽對中，單擊“插入”面板“表單”類別中的“標(biāo)簽”按鈕，添加<label></label>標(biāo)簽對，并在其中輸入文字“會員性別:”；然后將插入點(diǎn)放在該標(biāo)簽對后面，單擊“插入”面板“表單”類別中的“單選按鈕”，插入單選按鈕標(biāo)簽，如下圖所示。步驟013．制作表單部分2——添加單選按鈕和復(fù)選框案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁為<input>標(biāo)簽添加屬性。在代碼界面中，在<input>標(biāo)簽中輸入代碼：name="rdoSex"value="0"checked，以設(shè)置其屬性。步驟02添加代表會員性別的圖標(biāo)。在設(shè)計(jì)界面中將插入點(diǎn)置于剛才添加的單選按鈕后面，單擊“插入”面板“HTML”類別中的“Image”按鈕，在打開的對話框中選擇“images”文件夾中的“male.jpg”文件，單擊“確定”按鈕插入圖像，效果如下圖所示。步驟03以上代碼中，name、type和value屬性分別決定了表單元素的名稱、類型和值；checked屬性表示單選按鈕默認(rèn)為選中狀態(tài)。知識庫案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在代碼界面中，將插入點(diǎn)置于前面添加的圖像標(biāo)簽后面，參照步驟1的操作添加另一個單選按鈕（“值”為1，其他屬性與上一個相同）和對應(yīng)圖像“female.jpg”，效果如下圖所示。步驟04一組單選按鈕中，所有單選按鈕的name屬性值必須一樣，否則就無法產(chǎn)生單選的效果，這一點(diǎn)必須要注意。后面添加的復(fù)選框也需要遵循此規(guī)則。本例將兩個單選按鈕的name值都設(shè)置為rdoSex。知識庫案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加復(fù)選框。首先在代碼界面的第5個<li></li>標(biāo)簽對中添加<label></label>標(biāo)簽對，并在其中輸入文字“個人愛好：”；然后將插入點(diǎn)移到<label></label>標(biāo)簽對后面，單擊“插入”面板“表單”類別中的“復(fù)選框”按鈕，插入復(fù)選框標(biāo)簽，為其添加name和value屬性，并在其后輸入文字“運(yùn)動”，如下圖所示。步驟05案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加其他復(fù)選框。參照上述方法，在“運(yùn)動”文字后面接著添加2個復(fù)選框以及其對應(yīng)的文字“聊天”和“游戲”，代表聊天復(fù)選框的“value”屬性值為chat；代表游戲復(fù)選框的“value”屬性值為game；2個復(fù)選框的“name”屬性均為cbxHobby，效果如下圖所示。步驟06案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加日期標(biāo)簽。在設(shè)計(jì)界面中，將插入點(diǎn)置于第6個<li></li>標(biāo)簽對中，單擊“插入”面板“表單”類別中的“日期”按鈕，同時插入<label>標(biāo)簽和日期標(biāo)簽。步驟014．制作表單部分3——添加日期、按鈕和文本區(qū)域標(biāo)簽在<label></label>標(biāo)簽對中輸入文字“出生日期：”，將原來的“Date:”刪除；為<input>標(biāo)簽添加value=“2015-08-04”屬性，如下圖所示。步驟02日期標(biāo)簽是HTML5中的新標(biāo)簽，目前IE還不支持該標(biāo)簽，在預(yù)覽網(wǎng)頁時可以使用360或GoogleChrome瀏覽器。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加按鈕。在設(shè)計(jì)界面中，將插入點(diǎn)置于第7個<li></li>標(biāo)簽對中，單擊“插入”面板“表單”類別中的“‘提交’按鈕”，插入按鈕，將其“value”值修改為“同意以下條款并提交注冊信息”，如下圖所示。步驟03案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加“重置”按鈕。在設(shè)計(jì)界面中，將插入點(diǎn)置于前面插入的按鈕后面，單擊“插入”面板“表單”類別中的“‘重置’按鈕”，插入“重置”按鈕，效果如下圖所示。步驟04案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加協(xié)議圖像和文字。在設(shè)計(jì)界面中將插入點(diǎn)置于第8個<li></li>標(biāo)簽對中，利用“插入”面板“HTML”類別中的“Image”按鈕插入本書配套素材“images”文件夾中的“read.gif”圖像，然后在圖像后面輸入文字“閱讀《歡樂購服務(wù)協(xié)議》”，效果如下圖所示。步驟05案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁添加文本區(qū)域。在代碼界面中，將插入點(diǎn)置于第9個<li></li>標(biāo)簽對中，單擊“插入”面板“表單”類別中的“文本區(qū)域”按鈕，插入文本區(qū)域標(biāo)簽對，并為其添加屬性name=“textarea”cols=“70”rows=“5”，如下圖所示。步驟06案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁在文本區(qū)域中添加文字。在代碼界面文本區(qū)域的<textareaname=“textarea”cols=“70”rows=“5”></textarea>標(biāo)簽對中輸入歡樂購用戶協(xié)議，完成后的頁面效果如下圖所示。步驟07案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁修改id為logo的<div>標(biāo)簽內(nèi)容。將id為logo的<div>標(biāo)簽中系統(tǒng)默認(rèn)輸入的內(nèi)容刪除，然后參照前面的步驟，在該<div>標(biāo)簽中添加2張圖像（image文件夾中的logo.jpg和reg.jpg文件），完成后的效果如下圖所示。步驟015．添加logo圖像等內(nèi)容案例實(shí)施修改footer標(biāo)簽的內(nèi)容。將footer標(biāo)簽中的系統(tǒng)默認(rèn)內(nèi)容刪除，然后輸入文本“Copyright?2005-2015版權(quán)所有”，效果如下圖所示。步驟02至此，歡樂購注冊頁面結(jié)構(gòu)部分全部完成，按【F12】鍵預(yù)覽網(wǎng)頁，效果如下圖所示。步驟03案例實(shí)施指定在頁面中引入CSS樣式的方法。本例使用內(nèi)嵌樣式，單擊“CSS設(shè)計(jì)器”面板“源”窗格中的“添加CSS源”按鈕，在其下拉列表中選擇“在頁面中定義”，此時在代碼界面中自動添加style標(biāo)簽。一、網(wǎng)頁、網(wǎng)站和主頁步驟01一、網(wǎng)頁、網(wǎng)站和主頁二、設(shè)置CSS樣式步驟02案例實(shí)施設(shè)置頁面中所有文本的默認(rèn)字體為微軟雅黑。新建“body”選擇器，并設(shè)置其font-family屬性為“微軟雅黑”，如下圖所示。案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁設(shè)置3個結(jié)構(gòu)標(biāo)簽的統(tǒng)一樣式。首先新建#logo選擇器，設(shè)置其width屬性值為700px，margin屬性上下值為0，左右值為auto，然后在代碼界面#logo選擇器名后面輸入“,#main,footer”，為這3個標(biāo)簽設(shè)置統(tǒng)一樣式，如下圖所示。步驟03該樣式中使用了“微軟雅黑”字體，如果用戶的電腦中沒有安裝該字體，則系統(tǒng)會默認(rèn)選擇宋體。提示案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁設(shè)置id為main的<div>標(biāo)簽的樣式。新建選擇器#main，設(shè)置其height屬性為380px，如左圖所示。步驟04設(shè)置id為main的<div>中列表項(xiàng)<li>的樣式。新建嵌套選擇器#mainli，設(shè)置其height屬性為35px，list-style屬性為none，如右圖所示。步驟05案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁設(shè)置id分別為user，psw1和psw2的三個文本框的共同樣式。此處直接給出代碼如下。步驟06#user,#psw1,#psw2{height:20px; /*設(shè)置文本框高度為20像素*/width:150px; /*設(shè)置文本框?qū)挾葹?50像素*/border:#1577821pxsolid; /*設(shè)置文本框邊框顏色，寬度和線型*/background-color:#ffd4e2; /*設(shè)置文本框背景顏色*/}為了使文本框與整個頁面的色調(diào)更加協(xié)調(diào)一致，此處將文本框背景顏色設(shè)置為粉色。提示案例實(shí)施一、網(wǎng)頁、網(wǎng)站和主頁設(shè)置id分別為user，psw1和psw2的三個文本框hover狀態(tài)時的樣式。具體表現(xiàn)為，當(dāng)將鼠標(biāo)指針移到表單文本框上方時，文本框的背景顏色變?yōu)榘咨２襟E07設(shè)置<footer>標(biāo)簽的樣式，代碼如下。步驟08#user:hover,#psw1:hover,#psw2:hover{ background-color:#FFF; /*設(shè)置hover狀態(tài)時的背景顏色*/}footer{ font-size:16px; /*設(shè)置文字大小為16像素*/ height:40px; /*設(shè)置高度為40像素*/ line-height:40px; /*設(shè)置行高為40像素*/ text-align:center; /*設(shè)置文字位置為居中*/background-color:#FF6699; /*設(shè)置背景色*/}這樣，一個帶有CSS美化效果的表單就制作完成了，保存并預(yù)覽網(wǎng)頁。步驟09案例說明在Dreamweaver中合理運(yùn)用“行為”，可以方便地為網(wǎng)頁對象添加一些動態(tài)效果和簡單的交互功能，如浮動的廣告、交換圖像、可以收縮放大的圖像等。案例二應(yīng)用行為為學(xué)校網(wǎng)頁添加彈出框——應(yīng)用行為相關(guān)知識一、認(rèn)識行為行為由事件和動作兩部分組成，事件是指“用戶的操作”，如鼠標(biāo)移到對象上方、離開對象或雙擊對象等；而動作是指“發(fā)生什么”，如打開瀏覽器窗口、播放聲音或彈出信息等。事實(shí)上，動作是預(yù)先寫好的能夠執(zhí)行某項(xiàng)任務(wù)的腳本語言代碼段。一般的行為都是由事件來引發(fā)動作。例如，當(dāng)用戶把鼠標(biāo)移動至對象上（事件），該對象會發(fā)生預(yù)定義的變化（動作）。事件是為大多數(shù)瀏覽器理解的通用代碼，瀏覽器通過釋譯來執(zhí)行動作。一個事件也可以觸發(fā)許多動作，可以定義它們執(zhí)行的順序。二、“行為”面板要在Dreamweaver中應(yīng)用行為，首先要打開“行為”面板。在菜單欄中選擇“窗口”>“行為”菜單或按下【Shift+F4】組合鍵，均可打開“行為”面板，如下圖所示。轉(zhuǎn)到URL：發(fā)生指定事件時跳轉(zhuǎn)到指定的網(wǎng)頁。打開瀏覽器窗口：在新窗口中打開網(wǎng)頁，并可設(shè)置新窗口的寬度和高度等屬性。彈出信息：顯示帶指定信息的JavaScript警告。在DreamweaverCC中，可以將事件分為不同的種類，有的與鼠標(biāo)有關(guān)，有的與鍵盤有關(guān)，如鼠標(biāo)單擊，按下鍵盤某個鍵；有的還和網(wǎng)頁相關(guān)，如網(wǎng)頁下載完畢，網(wǎng)頁切換等。在添加某個行為后，單擊左側(cè)的事件，可打開“事件”列表。調(diào)用JavaScript：調(diào)用網(wǎng)頁中包含的Javascript程序。onMouseOver：鼠標(biāo)指針移至對象上方時發(fā)生的事件。onMouseUp：當(dāng)按下的鼠標(biāo)按鍵被釋放時發(fā)生的事件。onMouseDown：單擊鼠標(biāo)左鍵（不必釋放鼠標(biāo)鍵）時發(fā)生的事件。onMouseMove：鼠標(biāo)指針經(jīng)過對象時發(fā)生的事件。onMouseOut：鼠標(biāo)指針離開選定對象時發(fā)生的事件。onLoad：在瀏覽器中加載完網(wǎng)頁時發(fā)生的事件。onClick：鼠標(biāo)單擊對象（如超鏈接、圖像、圖像映像、按鈕）時發(fā)生的事件。onFocus：對象獲得焦點(diǎn)時發(fā)生的事件，如單擊表單中的文本編輯框觸發(fā)該事件。三、應(yīng)用行為行為可以應(yīng)用于HTML標(biāo)簽、圖像、鏈接文本等對象。如果要對某個對象應(yīng)用行為，需要先選中該對象，然后單擊“行為”面板上的“添加行為”按鈕，在打開的行為列表中選擇動作，并在打開的窗口中設(shè)置效果，最后指定設(shè)定的動作在什么情況下發(fā)生，也就是事件。啟動DreamweaverCC，在“文件”面板中打開“blog”站點(diǎn)，并雙擊打開其中的網(wǎng)頁文檔“index.html”。步驟01首先選擇要應(yīng)用行為的