電子商務(wù)網(wǎng)站建設(shè)第6章

1、第6章 動態(tài)網(wǎng)頁技術(shù)本課要點具體要求本課導(dǎo)讀上機練習(xí)本課要點點應(yīng)用表單單使用行為為插入媒體體對象滾動特效效具體要求求掌握表單單的創(chuàng)建建及表單單元素的的使用熟悉行為為的設(shè)置置方法掌握動畫畫、聲音音和視頻頻的添加加了解標簽及屬屬性參數(shù)數(shù)本課導(dǎo)讀讀動態(tài)網(wǎng)頁頁技術(shù)主主要包含含表單的的提交、行為控控制、Flash動畫的插插入、影影片的插插入、聲聲音的添添加、滾滾動效果果的制作作等，合合理地使使用這些些動態(tài)元元素，可可以為網(wǎng)網(wǎng)頁添加加豐富的的動態(tài)效效果。6.1應(yīng)用表單單表單的作作用是從從訪問者者那里獲獲取信息息驗證。訪問者者可以在在文本域域、列表表框、復(fù)復(fù)選框以以及單選選按鈕等等表單元元素中輸輸入信息息，

2、然后后提交這這些信息息到服務(wù)務(wù)器進行行處理。6.1應(yīng)用表單單6.1.1知識講解解6.1.2典型案例例制作“在在線報名名”頁面面6.1.1知識講解解本節(jié)將學(xué)學(xué)習(xí)表單單的創(chuàng)建建及表單單元素的的屬性設(shè)設(shè)置等知知識。6.1.1知識講解解1.表單2.添加文本本域3.添加復(fù)選選框4.單選按鈕鈕及單選選按鈕組組5.添加列表表/菜單6.添加跳轉(zhuǎn)轉(zhuǎn)菜單7.添加文件件域8.添加按鈕鈕1.表單表單是放放置表單單元素的的區(qū)域，表單內(nèi)內(nèi)的元素素通過用用戶單擊擊【提交】按鈕，將將所有填填寫的信信息提交交給服務(wù)務(wù)器進行行處理。創(chuàng)建表單單的具體體操作如如下：（1）在打開開的文檔檔中，將將鼠標光光標定位位在要插插入表單單的位置

3、置。（2）選擇【插入記錄錄】【表單】【表單】命令，或或在插入入欄的【表單】選項卡中中單擊按按鈕，在指定定位置添添加一個個紅色的的虛線框框，即表表單。 2.添加文本本域文本域用用于創(chuàng)建建一個包包含單行行或多行行文本的的區(qū)域。用戶可可以創(chuàng)建建一個隱隱藏用戶戶輸入文文本的密密碼文本本域。添加文本本域的具具體操作作如下：（1）將鼠標標光標定定位在表表單中要要添加文文本域的的位置。（2）在插入入欄的【表單】選項卡中中單擊或按按鈕，即可在在指定位位置添加加文本域域。3.添加復(fù)選選框允許用戶戶從一組組選項中中同時選選擇多個個選項，這些選選項就是是復(fù)選框框，選中中時顯示示為。添加復(fù)選選框的具具體操作作如下：（

4、1）將鼠標標光標定定位在要要添加復(fù)復(fù)選框的的位置。（2）在插入入欄的【表單】選項卡中中單擊按鈕，即即可在指指定位置置添加復(fù)復(fù)選框。4.單選按鈕鈕及單選選按鈕組組單選按鈕鈕是要求求用戶只只能從一一組選項項中選擇擇一個選選項的表表單元素素。單選選按鈕通通常成組組地使用用，在同同一個組組中的所所有單選選按鈕必必須具有有相同的的名稱。4.單選按鈕鈕及單選選按鈕組組添加單選選按鈕的的具體操操作如下下：（1）將鼠標標光標定定位在要要添加單單選按鈕鈕的位置置。（2）在插入入欄的【表單】選項卡中中單擊按按鈕，在指定定位置添添加單選選按鈕。若單擊擊按按鈕，可可打開【單選按鈕鈕組】對話框，添加單單選按鈕鈕組。（3

5、）設(shè)置完完成后，單擊【確定】按鈕。5.添加列表表/菜單列表/菜單表單單元素即即是在一一個列表表中顯示示選項值值，用戶戶可以從從該列表表中選擇擇多個選選項。當(dāng)當(dāng)頁面空空間有限限，又需需要顯示示許多選選項時，就使用用菜單，菜單中中只顯示示一個選選項，其其他的選選項被隱隱藏。列表/菜單的添添加方法法如下：（1）將鼠標標光標定定位在表表單中要要添加列列表/菜單的位位置。（2）在插入入欄的【表單】選項卡中中單擊按按鈕，即可在在指定位位置添加加列表/菜單。 6.添加跳轉(zhuǎn)轉(zhuǎn)菜單跳轉(zhuǎn)菜單單類似于于彈出菜菜單，可可給菜單單中的選選項添加加URL鏈接，如如果不指指定鏈接接，則與與列表/菜單的屬屬性相同同。添加跳轉(zhuǎn)

6、轉(zhuǎn)菜單的的具體操操作如下下：（1）將鼠標標光標定定位在要要添加跳跳轉(zhuǎn)菜單單的位置置。（2）在插入入欄的【表單】選項卡中中單擊按按鈕，打開【插入跳轉(zhuǎn)轉(zhuǎn)菜單】對話框。（3）設(shè)置完完成后單單擊【確定】按鈕。7.添加文件件域使用文件件域表單單元素，用戶可可以選擇擇本地計計算機上上的文件件，并將將該文件件上傳到到服務(wù)器器。文件件域的外外觀與文文本域類類似，只只是文件件域多一一個【瀏覽】按鈕。在在文件域域的文本本框中可可以手動動輸入要要上傳的的文件路路徑，也也可以單單擊【瀏覽】按鈕指定定上傳文文件。添加文件件域的具具體操作作如下：（1）將鼠標標光標定定位在要要添加文文件域的的位置。（2）在插入入欄的【表單

7、】選項卡中中單擊按按鈕鈕，插入入文件域域。8.添加按鈕鈕按鈕有兩兩種：一一種是圖圖像域，另一種種是普通通按鈕。圖像域是是用圖像像作為按按鈕圖標標，用于于提交或或重置表表單信息息等，與與普通按按鈕的功功能相同同。在插入欄欄的【表單】選項卡中中單擊按按鈕鈕，打開開【選擇圖像像源文件件】對話框，從計算算機中找找出要作作為按鈕鈕圖標的的圖像，單擊【確定】按鈕，插插入的圖圖像即為為圖像域域。在插入欄欄的【表單】選項卡中中單擊按按鈕鈕，在鼠鼠標光標標處可插插入普通通按鈕。6.1.2典型案例例制作“在在線報名名”頁面面案例目標標本案例將將制作一一份“在在線報名名”頁面面，主要要介紹表表單的創(chuàng)創(chuàng)建以及及表單元

8、元素的添添加與設(shè)設(shè)置等，完成的的效果如如下圖所所示。6.1.2典型案例例制作“在在線報名名”頁面面6.1.2典型案例例制作“在在線報名名”頁面面操作思路路：（1）在ls6站點中建建立“baoming.html”文檔。（2）插入2行1列的表格格，添加加表格標標題。（3）在第2行添加表表單，并并在表單單中添加加一個20行3列的表格格。（4）依次在在單元格格中添加加報名表表內(nèi)容及及對應(yīng)的的表單元元素。6.1.2典型案例例制作“在在線報名名”頁面面案例小結(jié)結(jié)本案例制制作了一一份在線線報名的的網(wǎng)頁，主要介介紹了表表單的創(chuàng)創(chuàng)建、文文本域、單選按按鈕、復(fù)復(fù)選框、列表/菜單及按按鈕的添添加與屬屬性設(shè)置置等內(nèi)容

9、容。在制制作表單單時，可可以通過過CSS規(guī)則定義義中的【方框】類別來指指定表單單中的文文本域和和按鈕等等元素的的寬度和和高度。6.2使用行為為使用行為為可將JavaScript代碼嵌入入到文檔檔中，使使訪問者者可以與與Web頁進行交交互，從從而以多多種方式式更改頁頁面或執(zhí)執(zhí)行任務(wù)務(wù)。行為為由事件件和該事事件觸發(fā)發(fā)的動作作兩部分分組成。6.2使用行為為6.2.1知識講解解6.2.2典型案例例檢測報名名表6.2.1知識講解解本節(jié)將介介紹【行為】面板和添添加行為為的方法法。6.2.1知識講解解1.認識【行為】面板2.添加行為為 1.認識【行為】面板按【Shift+F4】組合鍵打打開【行為】面板，如如

10、下圖所所示。通通過【行為】面板，將將行為添添加到頁頁面元素素中，即即可實現(xiàn)現(xiàn)相應(yīng)的的操作，已添加加到當(dāng)前前文檔的的行為顯顯示在行行為列表表中，并并按字母母順序排排列。2.添加行為為行為可以以添加到到整個文文檔，也也可以添添加到鏈鏈接、圖圖像、表表單或其其他HTML元素中，但不能能將行為為添加到到純文本本上，因因為和等標簽不不能在瀏瀏覽器中中生成事事件。如如果要給給文本指指定行為為，則需需要先給給該文本本指定一一個鏈接接，即創(chuàng)創(chuàng)建空鏈鏈接。6.2.2典型案例例檢測報名名表案例目標標本案例將將對報名名表進行行檢測設(shè)設(shè)置，主主要介紹紹行為中中的表單單檢測動動作及行行為的添添加和使使用方法法，完成成后

11、的效效果如下下圖所示示。6.2.2典型案例例檢測報名名表6.2.2典型案例例檢測報名名表操作思路路：（1）將“baoming.html”文檔另另存為“baoming1.html”文檔。（2）選取整整個表單單，在【行為】面板中設(shè)設(shè)置各個個文本域域是否為為必填項項、文本本內(nèi)容是是否必須須為數(shù)字字等。（3）保存文文檔，在在瀏覽器器中填寫寫表單并并提交。6.2.2典型案例例檢測報名名表案例小結(jié)結(jié)本例對報報名表進進行了檢檢測設(shè)置置，主要要介紹了了檢測表表單行為為的添加加方法。行為的的添加比比較簡單單，重要要的是對對各個行行為動作作的設(shè)置置。本例例中的“檢測表表單”行行為用于于檢測文文本的輸輸入是否否正確

12、，如果出出錯將彈彈出提示示信息，以便訪訪問者正正確填寫寫。6.3插入媒體體對象媒體對象象即含有有圖像和和聲音的的對象。在Dreamweaver中可以將將Flash動畫與Shockwave影片、QUICKTIME、AVI、Java Applet、ActiveX控件，以以及各種種格式的的音頻文文件嵌入入到網(wǎng)頁頁中。6.3插入媒體體對象6.3.1知識講解解6.3.2典型案例例在網(wǎng)頁中中插入Flash動畫和背背景音樂樂6.3.1知識講解解本節(jié)將學(xué)學(xué)習(xí)Flash動畫與元元素的插插入，以以及視頻頻與聲音音文件的的嵌入方方法。6.3.1知識講解解1.插入Flash動畫2.嵌入視頻頻3.嵌入聲音音1.插入Fl

13、ash動畫Dreamweaver自帶有Flash文本和Flash按鈕，可可以將其其插入到到網(wǎng)頁中中。除此此之外，用戶還還可以插插入Flash動畫，下下面分別別進行講講解。單擊插入入欄【常用】選項卡中中按按鈕鈕旁的的下拉按按鈕，在在彈出的的【媒體】下拉菜單單中選擇擇按按鈕對應(yīng)應(yīng)的命令令，打開開【插入Flash文本】對話框，如下圖圖所示。1.插入Flash動畫1.插入Flash動畫單擊插入入欄【常用】選項卡中中按按鈕旁的的下拉按按鈕，在在彈出的的【媒體】下拉菜單單中選擇擇按按鈕鈕對應(yīng)的的命令，打開【插入Flash按鈕】對話框，如下圖圖所示。1.插插入Flash動畫1.插入Flash動畫Flash文

14、本與Flash按鈕在設(shè)設(shè)計網(wǎng)頁頁時使用用比較少少，使用用較多的的是在Flash中制作的的按鈕和和動畫。單擊插插入欄【常用】選項卡中中的按按鈕，可插入入站點中中的Flash動畫，也也可以從從【文件】面板中直直接拖動動動畫文文件到頁頁面中要要插入Flash動畫的位位置。2.嵌入視頻頻各種視頻頻文件都都可以添添加到網(wǎng)網(wǎng)頁，但但有些視視頻文件件需要相相應(yīng)的插插件的支支持才能能正確顯顯示。常常見的視視頻文件件有Flash視頻、Shockwave影片、AVI和MPEG文件等。視頻文件件可以通通過鏈接接方式嵌嵌入，也也可以作作為插件件嵌入。Flash視頻和Shockwave影片可以以分別通通過插入入欄【常用

15、】選項卡中中的【Flash視頻】和【Shockwave】按鈕直接接插入。3.嵌入聲音音嵌入聲音音的方法法有代碼碼法、鏈鏈接法、插件法法和直接接插入法法4種。6.3.2典型案例例在網(wǎng)頁中中插入Flash動畫和背背景音樂樂案例目標標本案例將將在網(wǎng)頁頁中插入入Flash動畫和背背景音樂樂，完成成后的效效果如右右圖所示示。6.3.2典型案例例在網(wǎng)頁中中插入Flash動畫和背背景音樂樂操作思路路：（1）將“index.html”文檔另另存為“flash.html”文檔。（2）在代碼碼視圖中中使用標簽添加加背景音音樂，并并設(shè)置為為循環(huán)播播放。6.3.2典型案例例在網(wǎng)頁中中插入Flash動畫和背背景音樂樂案

16、例小結(jié)結(jié)本例主要要介紹了了在代碼碼視圖中中應(yīng)用標簽添加加背景音音樂，及及插入Flash文件的操操作，這這里添加加背景音音樂使用用的是代代碼法。6.4滾動特效效滾動特效效在網(wǎng)頁頁中使用用得比較較普遍，如新聞聞滾動或或廣告語語滾動等等。滾動動特效是是通過設(shè)設(shè)置標簽及添添加相應(yīng)應(yīng)的屬性性參數(shù)來來完成的的。6.4滾動特效效6.4.1知識講解解6.4.2典型案例例制作滾動動欄6.4.1知識講解解本節(jié)將介介紹標簽及對對應(yīng)的屬屬性參數(shù)數(shù)的應(yīng)用用。6.4.1知識講解解1.認識標簽2.標簽的屬屬性參數(shù)數(shù)1.認識標簽標簽用于于制作可可移動的的文本效效果，可可以在標簽間的的任意位位置添加加，其基基本語法法結(jié)構(gòu)為為：

17、，在標簽簽間可添添加文本本、表格格、圖像像、動畫畫、視頻頻和表單單等元素素。2.標簽的屬屬性參數(shù)數(shù)標簽的屬屬性參數(shù)數(shù)添加在在“”中，各各屬性參參數(shù)間用用空格分分隔，其其屬性參參數(shù)有大大小、對對齊方式式、移動動方式、移動方方向、循循環(huán)次數(shù)數(shù)、速度度和延遲遲方式等等。6.4.2典型案例例制作滾動動欄案例目標標本案例會會將上一一案例中中的“最最新禮品品”欄制制作成滾滾動欄，主要介介紹標簽的使使用及屬屬性參數(shù)數(shù)的設(shè)置置，完成成后的效效果如下下圖所示示。6.4.2典型案例例制作滾動動欄6.4.2典型案例例制作滾動動欄操作思路路：（1）打開文文件“flash.html”文檔，然后另另存為“marq.htm

18、l”文檔。（2）在代碼碼視圖中中添加標簽。（3）設(shè)置標簽屬性性參數(shù)。6.4.2典型案例例制作滾動動欄案例小結(jié)結(jié)本例制作作了滾動動欄，主主要介紹紹了標簽的使使用，滾滾動區(qū)的的大小設(shè)設(shè)置，循循環(huán)播放放、滾動動方式、播放速速度、對對齊方式式設(shè)置，以及鼠鼠標對滾滾動對象象的控制制等內(nèi)容容。在制作滾滾動效果果時，如如果要水水平移動動，可以以指定“direction”參數(shù)的的值為“l(fā)eft”或“right”，如果果需要走走走停停停，可以以指定“scrolldelay”參數(shù)的的值。6.5添加Spry構(gòu)件6.5.1知識講解解6.5.2典型案例例制作選項項卡式個個人簡歷歷6.5.1知識講解解1.插入Spry菜單

19、欄2.插入選項項卡式面面板3.Spry折疊式4.插入Spry可折疊面面板1.插插入Spry菜單欄欄在插入Spry構(gòu)件時應(yīng)應(yīng)先保存存文件，在插入入構(gòu)件后后，將在在站點中中生成名名為“SpryAssets”的文件件夾，用用于存放放Spry構(gòu)件所需需的樣式式表文件件和腳本本程序。單擊插入入欄【Spry】選項卡中中的按按鈕，打開對對話框，設(shè)置菜菜單欄的的布局方方向，單單擊【確定】按鈕，在在頁面中中插入菜菜單欄，如下圖圖所示。2.插插入選選項卡式式面板單擊插入入欄【Spry】選項卡中中的按按鈕，在在文檔中中插入選選項卡式式面板，如下圖圖所示。2.插插入選選項卡式式面板更改選項項卡中的的文字內(nèi)內(nèi)容與格格式

20、，與與修改單單元格中中的內(nèi)容容及格式式的方法法相同，要修改改被隱藏藏的選項項卡內(nèi)容容時，將將鼠標移移至選項項卡名稱稱的位置置，單擊擊圖圖標標，即可可將該選選項卡設(shè)設(shè)置為當(dāng)當(dāng)前選項項卡，從從而可對對其進行行編輯。3.Spry折折疊式單擊插入入欄【Spry】選項卡中中的按按鈕，在在文檔中中插入Spry折疊式，如下圖圖所示。4.插插入Spry可折疊疊面板單擊插入入欄【Spry】選項卡中中的按按鈕鈕，在文文檔中插插入可折折疊面板板，如下下圖所示示。6.5.2典型案例例制作選項項卡式個個人簡歷歷案例目標標本例通過過制作選選項卡式式個人簡簡歷，主主要介紹紹Spry選項卡式式面板的的插入、屬性設(shè)設(shè)置及內(nèi)內(nèi)容的添添加，同同時了解解Spry構(gòu)件的基基本使用用方法，完成后后的效果果如右圖圖所示。6.5.2典型案例例制作選項項卡式個個人簡歷歷操作思路路：（1