計(jì)算機(jī)實(shí)用技術(shù)課件第4章 交互式網(wǎng)頁(yè)設(shè)計(jì)

目錄

4.1表單概述4.2創(chuàng)建表單頁(yè)4.3行為的應(yīng)用4.4層的應(yīng)用4.1表單概述·表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)站之間信息交互的一種網(wǎng)頁(yè)對(duì)象。在Internet中使用表單可以幫助服務(wù)器從用戶(hù)那里收集信息與反饋通常一個(gè)表單中包含多個(gè)對(duì)象，例如用于輸入文本的文本域、用于發(fā)送命令的按鈕等一個(gè)完整的表單包含兩個(gè)部分：一個(gè)是在網(wǎng)頁(yè)中進(jìn)行描述的表單對(duì)象；另一個(gè)是應(yīng)用程序，它可以是服務(wù)器端的，也可以是客戶(hù)端的，用于對(duì)客戶(hù)信息進(jìn)行分析處理。

4.2創(chuàng)建表單頁(yè)4.2.1插入表單4.2.2設(shè)置表單屬性4.2.3表單實(shí)例4.2.1插入表單1．插入表單對(duì)象的方法（1）選擇“插入”|“表單”中的相關(guān)命令來(lái)插入表單對(duì)象。（2）選擇“插入”|“表單”子工具欄，在其中選擇要插入對(duì)象的相應(yīng)按鈕，如圖4-1所示。2．插入表單在網(wǎng)頁(yè)中添加表單對(duì)象，首先必須創(chuàng)建表單。方法：選擇“插入”|“表單”|“表單”命令，選擇“插入”工具欄中的“表單”類(lèi)別，然后單擊“表單”按鈕。4.2.2設(shè)置表單屬性

選中表單，在“屬性”面板上可以設(shè)置表單的各項(xiàng)屬性。4.3行為的應(yīng)用4.3.1行為概述4.3.2行為的基本應(yīng)用4.3.1行為概述行為是事件與動(dòng)作的彼此結(jié)合。1．對(duì)象（Object）對(duì)象是產(chǎn)生行為的主體，很多網(wǎng)頁(yè)元素都可以成為對(duì)象，如圖片、文字、多媒體文件等2．事件（Event）事件是觸發(fā)動(dòng)態(tài)效果的原因，它可以被附加到各種頁(yè)面元素上，也可以被附加到HTML標(biāo)記中。

3．動(dòng)作（Action）行為通過(guò)動(dòng)作來(lái)完成動(dòng)態(tài)效果，如圖片翻轉(zhuǎn)、打開(kāi)瀏覽器、播放聲音都是動(dòng)作。動(dòng)作通常是一段JavaScript代碼，在Dreamweaver中不必自己編寫(xiě)。4．事件與動(dòng)作將事件和動(dòng)作組合起來(lái)就構(gòu)成了行為，例如，將onClick行為事件與一段JavaScript代碼相關(guān)聯(lián)，單擊時(shí)就可以執(zhí)行相應(yīng)的JavaScript代碼（動(dòng)作）。一個(gè)事件可以同多個(gè)動(dòng)作相關(guān)聯(lián)，即發(fā)生事件時(shí)可以執(zhí)行多個(gè)動(dòng)作。為了實(shí)現(xiàn)需要的效果，還可以指定和修改動(dòng)作發(fā)生的順序。4.3.2行為的基本應(yīng)用1．“行為”面板在Dreamweaver中，對(duì)行為的添加和控制主要通過(guò)“行為”面板來(lái)實(shí)現(xiàn)，“行為”面板如圖所示。2．創(chuàng)建行為創(chuàng)建行為有三個(gè)步驟：選擇對(duì)象、添加動(dòng)作、調(diào)整事件。示例：通過(guò)一個(gè)“打開(kāi)瀏覽器窗口”實(shí)例說(shuō)明如何創(chuàng)建行為。效果是，在鼠標(biāo)放到網(wǎng)頁(yè)的小圖像上時(shí)打開(kāi)一個(gè)新窗口顯示放大的圖像。

（1）單擊“行為”面板上的“+”按鈕，打開(kāi)動(dòng)作菜單。從動(dòng)作菜單中選擇“打開(kāi)瀏覽器”命令，在彈出的“打開(kāi)瀏覽器窗口”對(duì)話框中設(shè)置參數(shù)，如圖所示。（3）在“要顯示的URL”文本框右側(cè)單擊“瀏覽”按鈕選擇在新窗口中載入的目標(biāo)的URL地址（可以是網(wǎng)頁(yè)也可以是圖像）。在這里選擇../images/sslld.jpg圖片，然后將窗口寬度設(shè)為500像素，窗口高度設(shè)為667像素，窗口名稱(chēng)為“放大圖片”。設(shè)置好后單擊“確定”按鈕即可添加該動(dòng)作。（4）在添加行為時(shí)，系統(tǒng)自動(dòng)選擇了事件onClick（單擊鼠標(biāo)）。單擊“行為”面板上的“事件菜單”按鈕，打開(kāi)事件菜單，重新選擇一個(gè)觸發(fā)行為的事件。把onClick（單擊鼠標(biāo)）的事件改為onMouseOver（鼠標(biāo)滑過(guò)）

4.4層的應(yīng)用

4.4.1層的概述4.4.2層的基本應(yīng)用4.4.1層的概述

層是CSS中的定位技術(shù)，在Dreamweaver中對(duì)其進(jìn)行了可視化操作。文本、圖像、表格等元素只能固定其位置，不能互相疊加在一起，而層可以放置在網(wǎng)頁(yè)文檔內(nèi)的任何一個(gè)位置，層內(nèi)可以放置網(wǎng)頁(yè)文檔中的其他構(gòu)成元素（如文本、圖像、表格等）層可以自由移動(dòng)，層與層之間還可以重疊，因此還可以用層來(lái)布局網(wǎng)頁(yè)。網(wǎng)頁(yè)中的層就像一個(gè)透明畫(huà)布，可以多個(gè)層疊加在一起，每個(gè)層里都可以是不同的元素，修改其中一個(gè)層不會(huì)影響到其他層的效果。4.4.2層的基本應(yīng)用

1．創(chuàng)建層（1）插入層的方法。選擇“插入”|“布局對(duì)象”|“層”命令在“插入”工具欄中選擇“布局”選項(xiàng)，單擊“繪制層”按鈕，在文檔窗口內(nèi)鼠標(biāo)光標(biāo)變成十字光標(biāo)，然后按住鼠標(biāo)左鍵拖動(dòng)出一個(gè)矩形，矩形的大小就是層的大小，釋放鼠標(biāo)后層就會(huì)出現(xiàn)在頁(yè)面中。（2）選擇和移動(dòng)層。方法：?jiǎn)螕魧拥倪吙蛟凇皩印泵姘逯袉螕魧拥拿Q(chēng)?？梢园醋hift鍵來(lái)選擇多個(gè)層。（3）調(diào)整層的大小。選中層后將鼠標(biāo)放在層的邊框控制柄上，當(dāng)鼠標(biāo)變?yōu)殡p箭頭時(shí)拖動(dòng)鼠標(biāo)即可。如果要調(diào)整多個(gè)層的大小，可以先將需要調(diào)整的層選中，再選擇“修改”|“排列順序”|“設(shè)成寬度相同”命令。（4）對(duì)齊層。方法：選擇“修改”|“排列順序”子菜單中的相應(yīng)命令對(duì)齊的方式有：左對(duì)齊、右對(duì)齊、對(duì)齊上緣和對(duì)齊下緣。2．創(chuàng)建嵌套層創(chuàng)建嵌套層的方法如下：（1）將光標(biāo)放在某個(gè)層內(nèi)，選擇“插入”|“布局對(duì)象”|“層”命令。（2）將光標(biāo)放在某個(gè)層內(nèi)，將“插入”工具欄“布局”類(lèi)別中的“繪制層”按鈕拖動(dòng)到該層中。（3）將光標(biāo)放在某個(gè)層內(nèi)，單擊“繪制層”按鈕，按住Alt鍵繪制一個(gè)新層。（4）打開(kāi)“層”面板，從中選擇需要嵌套的層，此時(shí)按住Ctrl鍵的同時(shí)拖動(dòng)該層到另外一個(gè)層下，釋放Ctrl鍵和鼠標(biāo)，這樣普通層就轉(zhuǎn)換為嵌套層了。3．設(shè)置層的屬性選中要設(shè)置的層，即可在“屬性”面板中設(shè)置層的屬性

4．在層中添加內(nèi)容在層中任意位置單擊，將插入點(diǎn)置于