設(shè)計(jì)復(fù)雜網(wǎng)頁

1、第5章 設(shè)計(jì)復(fù)雜網(wǎng)頁 5.1應(yīng)用Dreamweaver內(nèi)部行為 5.2使用CSS樣式 5.3創(chuàng)建表單 15.1 應(yīng)用Dreamweaver內(nèi)部行為 行為是指Web頁面上的對象可以對用戶的一些動(dòng)作做出反應(yīng)，并進(jìn)而引發(fā)的頁面效果。組成行為的基本要素有兩個(gè)：事件(Event)和動(dòng)作(Action)，也就是說事件和動(dòng)作共同構(gòu)成了行為。 本節(jié)講述利用Dreamweaver提供的一些工具和面板，實(shí)現(xiàn)許多常見的動(dòng)態(tài)交互式效果，如彈出窗口、顯示和隱藏層、播放多媒體文件、下拉菜單效果，以及拖拽層的效果等復(fù)雜的動(dòng)態(tài)網(wǎng)頁。25.1.1添加及修改行為 1添加行為 添加行為的操作步驟如下：（1）在網(wǎng)頁中選定一個(gè)對象，也

2、可以單擊文檔窗口左下角的標(biāo)記，選中整個(gè)頁面。（2）選擇【窗口】【行為】命令，打開【行為】面板。單擊面板上的按鈕，彈出動(dòng)作菜單。（3）選擇希望執(zhí)行的動(dòng)作，例如打開一個(gè)瀏覽器窗口、交換圖片、隱藏一個(gè)層，或是在狀態(tài)欄顯示一段文字。之后會(huì)彈出相應(yīng)的參數(shù)設(shè)置對話框。設(shè)置參數(shù)后，單擊【確定】按鈕。3【行為】面板上各按鈕的作用如下： 按鈕：單擊該按鈕，只顯示已經(jīng)設(shè)置的事件。 按鈕：單擊該按鈕，顯示所有可設(shè)置的事件。 按鈕：單擊該按鈕，打開下拉菜單，其中包含可以附加到當(dāng)前所選對象的多個(gè)動(dòng)作。當(dāng)在其中選擇某個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對話框，用戶可以在其中指定該動(dòng)作的參數(shù)。如果所有動(dòng)作都以灰色顯示，則表示沒有該所選對象

3、可以生成的事件。 按鈕：單擊該按鈕，刪除選定的行為。 按鈕：這兩個(gè)按鈕用來將特定事件的所選動(dòng)作在行為列表中向上或向下移動(dòng)。給定事件的動(dòng)作是以特定的順序執(zhí)行的?？梢詾樘囟ǖ氖录膭?dòng)作的順序。對于不能在列表中上下移動(dòng)的動(dòng)作將禁用箭頭按鈕。 4 Dreamweaver提供了許多常用的事件能夠觸發(fā)的動(dòng)作。下面介紹【行為】面板動(dòng)作彈出菜單能夠和動(dòng)作相鏈接的事件。onAbort：該事件在瀏覽者中斷瀏覽器正在載入圖像的操作時(shí)產(chǎn)生。onBlur：該事件在指定元素不再被瀏覽者交互時(shí)產(chǎn)生。onChange：該事件在瀏覽者改變網(wǎng)頁中的某個(gè)值時(shí)產(chǎn)生。onClick：該事件在瀏覽者在指定的元素上單擊時(shí)產(chǎn)生。onDbl

4、Click：該事件在瀏覽者在指定的元素上雙擊時(shí)產(chǎn)生。onError：該事件在瀏覽器在網(wǎng)頁或圖像載入產(chǎn)生錯(cuò)位時(shí)產(chǎn)生。 5onFocus：該事件在指定元素被瀏覽者交互時(shí)產(chǎn)生。onKeyDown：該事件在按下任意鍵的同時(shí)產(chǎn)生。onKeyPress：該事件在按下和松開任意鍵時(shí)產(chǎn)生。此事件相當(dāng)于把onKeyDown和onKeyUp這兩個(gè)事件集合在一起 onKeyUp：該事件在按下的鍵松開時(shí)產(chǎn)生。onLoad：該事件在一幅圖像或網(wǎng)頁載入完成時(shí)產(chǎn)生。onMouseDown：該事件在瀏覽者按下鼠標(biāo)時(shí)產(chǎn)生。onMouseMove：該事件在瀏覽者將鼠標(biāo)在指定元素上移動(dòng)時(shí)產(chǎn)生。onMouseOut：該事件在鼠標(biāo)從指

5、定元素上移開時(shí)產(chǎn)生。onMouseOver：該事件在鼠標(biāo)第一次移動(dòng)到指定元素時(shí)產(chǎn)生。onMouseUp：該事件在鼠標(biāo)彈起時(shí)產(chǎn)生。6 onMove：該事件在窗體或框架移動(dòng)時(shí)產(chǎn)生。onReadyStateChange：該事件在指定元素的狀態(tài)改變時(shí)產(chǎn)生。onReset：該事件在表單內(nèi)容被重新設(shè)置為默認(rèn)值時(shí)產(chǎn)生。onResize：該事件在瀏覽者調(diào)整瀏覽器或框架大小時(shí)產(chǎn)生。onScroll:該事件在瀏覽者使用滾動(dòng)條向上或向下滾動(dòng)時(shí)產(chǎn)生。onSelect：該事件在瀏覽者選擇文本框中的文本時(shí)產(chǎn)生。onSubmit：該事件在瀏覽者提交表格時(shí)產(chǎn)生。onUnload：該事件在瀏覽者離開網(wǎng)頁時(shí)產(chǎn)生7 2.修改行為

6、打開【行為】面板后，用戶可以根據(jù)需要對行為進(jìn)行刪除、改變動(dòng)作參數(shù)以及調(diào)整動(dòng)作的順序等修改。 要?jiǎng)h除一個(gè)行為，先將其選中，然后單擊刪除按鈕即可。 要改變一個(gè)動(dòng)作的參數(shù)，可雙擊此行為，在彈出的對話框中修改參數(shù)項(xiàng)，修改完畢后單擊【確定】按鈕即可。 要更改動(dòng)作之間的順序，可選定需要改變順序的行為，然后單擊面板上的向上或向下方向按鈕即可。85.1.2 交換圖像 交換圖像動(dòng)作是通過改變IMG(圖像)標(biāo)簽的SRC屬性，將該圖像變換為另外一幅圖像。該動(dòng)作可以制作變換的按鈕效果。 5.1.3彈出信息 彈出信息動(dòng)作的功能是：當(dāng)用戶與附加了該動(dòng)作的對象（例如圖片、文本等）進(jìn)行交互（例如單擊、鼠標(biāo)移過等）時(shí)，顯示指定

7、信息。 95.1.4打開瀏覽器窗口 打開瀏覽器窗口動(dòng)作的功能是在新的瀏覽器窗口打開指定的網(wǎng)頁。用戶可以自定義新窗口的大小、屬性及名稱等。5.1.5拖動(dòng)層 拖動(dòng)層行為之所以具有很大的吸引力，在于它可以讓瀏覽者自己控制和改變一些頁面元素的位置，例如常見的一些可以拖動(dòng)的圖片，以及一些拼圖游戲等。使用【拖動(dòng)層】可以指定層的移動(dòng)范圍、移動(dòng)方向（水平或垂直）、層的目標(biāo)位置、是否自動(dòng)對齊或到達(dá)指定位置后是否觸發(fā)另一個(gè)行為。 105.1.6控制Flash 控制shockwave或Flash動(dòng)作的功能是控制shockwave或Flash影片的播放和停止等。 5.1.7播放聲音 使用播放聲音動(dòng)作可以為網(wǎng)頁制作背景

8、音樂。打開頁面時(shí)，將自動(dòng)循環(huán)播放音樂。5.1.8顯示隱藏圖層 通過應(yīng)用【顯示隱藏層】行為，交互式地改變層的顯示和隱藏屬性，可實(shí)現(xiàn)Web頁面的一些特殊效果，例如翻轉(zhuǎn)圖效果、下拉菜單效果等。115.1.9檢查表單 表單的完整性和正確性是非常重要的，通常情況下，對表單的驗(yàn)證是在服務(wù)器端進(jìn)行的，不過在客戶端利用Dreamweaver的【檢查表單】行為也可以實(shí)現(xiàn)檢查表單數(shù)據(jù)是否符合要求。 5.1.10改變屬性 改變屬性行為的功能是改變網(wǎng)頁元素或?qū)ο蟮膶傩浴＠鐚拥谋尘邦伾虮韱蔚膭?dòng)作等都是對象的屬性。對HTML和JavaScript非常屬性的情況下則能較好應(yīng)用此行為。125.2.使用CSS樣式 CSS是

9、Cascading Style Sheets（層疊樣式單）的簡稱，通常我們把它稱作樣式表，它是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式。CSS樣式不僅能夠控制一篇文檔中的文本格式，而且通過采用外部鏈接的方式，還可以控制多篇文檔的文本格式。當(dāng)對CSS樣式的定義進(jìn)行修改時(shí)，文檔中所有應(yīng)用該樣式的文本格式也會(huì)自動(dòng)發(fā)生改變。 135.2.1創(chuàng)建CSS樣式1CSS樣式的構(gòu)成樣式規(guī)則組成如下：選擇符屬性：值單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開，即：選擇符屬性1：值1；屬性2：值214以下是一段定義了H1和H2元素的顏色和字體大小屬性的代碼： CSS例子 H1font-size: x-large; color: gree

10、n H2font-size: large; color: red 上述樣式表用加大、綠色字體顯示一級(jí)標(biāo)題，用大的、紅色字體顯示二級(jí)標(biāo)題。 15 在網(wǎng)頁中應(yīng)用樣式的常用方法有3種：（1）使用HTML標(biāo)記符的STYLE屬性嵌套樣式信息，適用于只在網(wǎng)頁的局部使用CSS樣式。例如：這段的樣式是紅色的New Century Schoolbook字體，如果字體可用的話。（2）通過在網(wǎng)頁的HEAD標(biāo)記中使用STYLE標(biāo)記嵌套樣式信息，適用于只對單個(gè)網(wǎng)頁中使用CSS樣式。（3）通過在網(wǎng)頁的HEAD標(biāo)記中使用LINK標(biāo)記符鏈接外部樣式表文件（*.css文件），適用于對多個(gè)網(wǎng)頁使用CSS樣式。例如：16 2創(chuàng)建C

11、SS樣式 在Dreamweaver中創(chuàng)建CSS樣式的操作步驟如下： （1）單擊【窗口】【CSS樣式】命令，打開【CSS樣式】面板，在面板上單擊上的【新建CSS樣式】按鈕，打開【新建CSS樣式】對話框；或右鍵單擊【CSS樣式】面板，在彈出的快捷菜單中選擇【新建】命令，打開【新建CSS樣式】對話框，如圖5.28所示。 （2）在【名稱】文本框中輸入新樣式的名稱。命名時(shí)必須注意，樣式名稱必須以英文句號(hào)開頭。 （3）在【選擇類型】的三個(gè)單選項(xiàng)中選定一個(gè)要定制的類型 。17 （4）單擊【確定】按鈕，彈出【保存樣式表文件為】對話框，選擇樣式的保存位置。 （5）單擊【保存】按鈕，彈出定義CSS格式的對話框。在

12、對話框中進(jìn)行各項(xiàng)的格式設(shè)置，設(shè)置完畢后單擊【確定】按鈕。 3CSS編輯器 在保存樣式后，系統(tǒng)會(huì)自動(dòng)彈出編輯CSS樣式屬性的對話框，通過該對話框，可以定義CSS樣式的多種格式，如文本、背景等。對話框左邊【分類】列表框中顯示了設(shè)置CSS樣式的不同屬性 ，各屬性的作用如下：18（1）類型 【類型】選項(xiàng)中主要用來設(shè)置字體屬性，包括字體、大小、樣式、文字顏色等。字體屬性是每個(gè)頁面中最基本的屬性。需要注意的是，不僅單獨(dú)的文字需要定義字體屬性，幾乎所有的頁面元素都會(huì)涉及到字體定義，例如定義表格需要涉及表格中的字體、定義列表也要涉及到列表中的字體。（2）背景 背景的屬性通常包括背景色和背景圖片。在這個(gè)對話框里

13、可以精確設(shè)定背景圖片的位置、是否重復(fù)顯示、是否隨頁面內(nèi)容滾動(dòng)。 19（3）區(qū)塊 區(qū)塊屬性主要是定義段落的一些屬性值。需要注意的是，在Dreamweaver樣式面板里很多屬性前面有“*”，它表示此屬性只能在瀏覽器中看到效果，在Dreamweaver的編輯器中無法預(yù)覽。（4）方框 【方框】屬性是樣式表最為重要的一個(gè)屬性類別，是實(shí)現(xiàn)頁面元素精確定位的基礎(chǔ)。 （5）邊框【邊框】項(xiàng)可以定義元素周圍的邊框，例如樣式、寬度和顏色。 20（6）列表【列表】屬性可以對分級(jí)列表內(nèi)容進(jìn)行更多的控制。 （7）定位【定位】屬性是實(shí)現(xiàn)精確和自由定位的關(guān)鍵屬性，它賦予設(shè)計(jì)者更大的控制頁面元素的能力，而且還擴(kuò)展到了三維的Z軸

14、方向，從而為動(dòng)態(tài)頁面的實(shí)現(xiàn)創(chuàng)造了基礎(chǔ)。 （8）擴(kuò)展【擴(kuò)展】屬性是一些增強(qiáng)性的樣式屬性，在低版本和不同類型的瀏覽器中支持不好。 215.2.2 應(yīng) 用 CSS樣式 1應(yīng)用CSS樣式 用戶創(chuàng)建好的樣式可以直接應(yīng)用到文檔中。有兩種操作方法：第一種是選擇【文本】【CSS】子菜單中列出的樣式名稱。第二種是：在要應(yīng)用CSS樣式的文檔中單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇【文本】【CSS】子菜單中列出的樣式名稱。 2應(yīng)用外部樣式 用戶可以選用或鏈接已經(jīng)存在的樣式表并應(yīng)用到文檔中。具體操作步驟如下：（1）單擊【窗口】【CSS樣式】命令，打開【CSS樣式】面板。22（2）單擊面板右上角的下拉按鈕，打開下拉菜單，

15、單擊【附加樣式表】命令，打開【鏈接外部樣式表】對話框?；騿螕裘姘迳系摹靖郊訕邮奖怼堪粹o，打開【鏈接外部樣式表】對話框。 （3）單擊【瀏覽】按鈕，打開【選擇樣式表文件】對話框，選擇要應(yīng)用的一個(gè)樣式表，單擊【確定】按鈕，返回【鏈接外部樣式表】對話框，單擊【確定】按鈕。選擇的樣式表則會(huì)添加到【CSS樣式】面板中。 （4）對所添加的樣式表的應(yīng)用，如上所述。235.2.2管理CSS樣式 創(chuàng)建好的CSS樣式，用戶還可以對其進(jìn)行再編輯，進(jìn)行復(fù)制、刪除等操作。 1修改CSS樣式 具體操作步驟如下：（1）單擊【窗口】【CSS樣式】命令，打開【CSS樣式】面板。（2）在要修改屬性的CSS樣式上單擊鼠標(biāo)右鍵，從彈出

16、的快捷菜單中選擇【編輯】命令；或者在【CSS樣式】面板上選擇要修改屬性的CSS，單擊面板上的【編輯樣式】按鈕，打開定義CSS樣式對話框。（3）在彈出的定義CSS樣式的對話框中對各項(xiàng)的屬性進(jìn)行修改即可。 24 2復(fù)制CSS樣式 復(fù)制CSS樣式的操作方法是：在【CSS樣式】面板上選擇要復(fù)制的CSS樣式，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇【重制】命令，彈出【重制CSS樣式】對話框。在對話框上重新定義一個(gè)名稱，或使用原名稱，單擊【確定】按鈕即可。 3刪除CSS樣式 如果創(chuàng)建的樣式不再使用了，則可以將其刪除。操作方法是：打開【CSS樣式】面板，選擇要?jiǎng)h除的樣式。單擊面板右上角的下拉按鈕，打開下拉菜單，

17、選擇【刪除】命令；或在樣式表上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇【刪除】命令；或單擊面板上的【刪除CSS樣式】按鈕即可將選中的樣式進(jìn)行刪除。 255.3創(chuàng)建表單 表單是網(wǎng)站管理者與瀏覽者之間溝通的橋梁，通過表單是可以收集來站點(diǎn)訪問者的信息。例如，用戶申請郵箱時(shí)填寫個(gè)人資料的表格就是用表單來實(shí)現(xiàn)的。表單通常由兩部分組成，一部分用于描述表單外觀和組成的HTML代碼，另一部分是用來處理用戶在表單中提交的數(shù)據(jù)的服務(wù)器端應(yīng)用程序或者客戶端的處理腳本。使用Dreamweaver可以創(chuàng)建表單，可以給表單中添加對象，還可以通過使用行為來驗(yàn)證用戶輸入信息的正確性。 265.3.1創(chuàng)建及修改表單域 表單域是一個(gè)

18、紅色虛線區(qū)域，各種表單元素都被存放在該區(qū)域中。表單域的作用是當(dāng)訪問者單擊表單中的某個(gè)按鈕時(shí)，瀏覽器將其中的各個(gè)對象的內(nèi)容發(fā)送到網(wǎng)頁上。所以表單元素必須放到表單域中，否則發(fā)送不出去。 1、創(chuàng)建表單域 創(chuàng)建表單域的步驟如下： （1）將光標(biāo)放到要插入表單的位置。 （2）單擊【插入】【表單】命令，即可在光標(biāo)處插入一個(gè)表單域?；蛘邌螕簟静迦搿棵姘宓摹颈韱巍孔用姘逯械摹颈韱巍堪粹o，也可在光標(biāo)處插入一個(gè)表單域。272修改表單域?qū)傩?設(shè)置表單域的屬性通過屬性面板來完成。將光標(biāo)放到表單域中，可對屬性面板各項(xiàng)設(shè)置如下： 表單名稱：用來設(shè)置表單的名稱。 動(dòng)作：指定處理表單信息的服務(wù)器端應(yīng)用程序，單擊文件夾圖標(biāo)，查找

19、需要的應(yīng)用程序，或者直接輸入應(yīng)用程序路徑。方法：設(shè)置表單的提交方式。提交方式有默認(rèn)、GET和POST，默認(rèn)值為POST。MIME類型：在彈出的菜單中，指定對提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用MIME編碼類型。285.3.1創(chuàng)建及修改表單對象 Dreamweaver中的表單對象有文本字段、按鈕、復(fù)選框、單選按鈕、列表菜單等。各對象的功能如下所述：文本字段：接受任何類型的文本、字母或數(shù)字。輸入的文本可以顯示為單行、多行、黑點(diǎn)或星號(hào)(用于密碼保護(hù))。按鈕：單擊時(shí)執(zhí)行提交或重置表單之類的任務(wù)?？梢暂斎胱远x的按鈕標(biāo)簽，或使用Dreamweaver的預(yù)定義標(biāo)簽。復(fù)選框：在一組選項(xiàng)中選擇多項(xiàng)。單選按鈕：在一組選項(xiàng)中一次只能選擇一項(xiàng)。29 列表菜單：提供一組選項(xiàng)，讓用戶從中選擇一項(xiàng)或多項(xiàng)。 創(chuàng)建表單元素的方法有兩種：一是通過【插入】【表單】中的命令；二是通過【插入】面板上的【表單】子面板上的按鈕。 1創(chuàng)建文本字段 文本字段就是表單中放置文字的地方，例如姓名、地址等內(nèi)容均填寫在文本字段中。 創(chuàng)建表單后，將光標(biāo)放到表單中，單擊【插入】【表單】【文本字段】命令，或單擊【插入】面板中【表單】子面板中的文本字段按鈕，即可插入一個(gè)文本字段。 創(chuàng)建文本字段后，選定文本字段在屬性面板設(shè)置其屬性。 30 2創(chuàng)建按鈕創(chuàng)建表單后，將光標(biāo)放到表單中，單擊【插入】【表單】【按鈕】命令，或單擊【插入】面板中【表