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

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