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

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

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

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

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

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

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

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

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

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

10、n H2font-size: large; color: red 上述樣式表用加大、綠色字體顯示一級標(biāo)題，用大的、紅色字體顯示二級標(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)記嵌套樣式信息，適用于只對單個網(wǎng)頁中使用CSS樣式。（3）通過在網(wǎng)頁的HEAD標(biāo)記中使用LINK標(biāo)記符鏈接外部樣式表文件（*.css文件），適用于對多個網(wǎng)頁使用CSS樣式。例如：16 2創(chuàng)建C

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

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

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

14、方向，從而為動態(tài)頁面的實現(xiàn)創(chuàng)造了基礎(chǔ)。 （8）擴展【擴展】屬性是一些增強性的樣式屬性，在低版本和不同類型的瀏覽器中支持不好。 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)用的一個樣式表，單擊【確定】按鈕，返回【鏈接外部樣式表】對話框，單擊【確定】按鈕。選擇的樣式表則會添加到【CSS樣式】面板中。 （4）對所添加的樣式表的應(yīng)用，如上所述。235.2.2管理CSS樣式 創(chuàng)建好的CSS樣式，用戶還可以對其進行再編輯，進行復(fù)制、刪除等操作。 1修改CSS樣式 具體操作步驟如下：（1）單擊【窗口】【CSS樣式】命令，打開【CSS樣式】面板。（2）在要修改屬性的CSS樣式上單擊鼠標(biāo)右鍵，從彈出

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

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

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

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