電子商務(wù)網(wǎng)站建設(shè)第6章課件_第1頁
電子商務(wù)網(wǎng)站建設(shè)第6章課件_第2頁
電子商務(wù)網(wǎng)站建設(shè)第6章課件_第3頁
電子商務(wù)網(wǎng)站建設(shè)第6章課件_第4頁
電子商務(wù)網(wǎng)站建設(shè)第6章課件_第5頁
已閱讀5頁,還剩135頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第6章動態(tài)網(wǎng)頁技術(shù)本課要點具體要求本課導(dǎo)讀上機(jī)練習(xí)第6章動態(tài)網(wǎng)頁技術(shù)本課要點本課要點應(yīng)用表單使用行為插入媒體對象滾動特效本課要點具體要求掌握表單的創(chuàng)建及表單元素的使用熟悉行為的設(shè)置方法掌握動畫、聲音和視頻的添加了解<marquee>標(biāo)簽及屬性參數(shù)具體要求掌握表單的創(chuàng)建及表單元素的使用本課導(dǎo)讀動態(tài)網(wǎng)頁技術(shù)主要包含表單的提交、行為控制、Flash動畫的插入、影片的插入、聲音的添加、滾動效果的制作等,合理地使用這些動態(tài)元素,可以為網(wǎng)頁添加豐富的動態(tài)效果。本課導(dǎo)讀動態(tài)網(wǎng)頁技術(shù)主要包含表單的提交、行為控制、Fl6.1應(yīng)用表單表單的作用是從訪問者那里獲取信息驗證。訪問者可以在文本域、列表框、復(fù)選框以及單選按鈕等表單元素中輸入信息,然后提交這些信息到服務(wù)器進(jìn)行處理。6.1應(yīng)用表單表單的作用是從訪問者那里獲取信息驗6.1應(yīng)用表單6.1.1知識講解6.1.2典型案例——制作“在線報名”頁面6.1應(yīng)用表單6.1.1知識講解6.1.1知識講解

本節(jié)將學(xué)習(xí)表單的創(chuàng)建及表單元素的屬性設(shè)置等知識。6.1.1知識講解 本節(jié)將學(xué)習(xí)表單的創(chuàng)建及表單元素的屬性6.1.1知識講解1.表單2.添加文本域3.添加復(fù)選框4.單選按鈕及單選按鈕組5.添加列表/菜單6.添加跳轉(zhuǎn)菜單7.添加文件域8.添加按鈕6.1.1知識講解1.表單1.表單表單是放置表單元素的區(qū)域,表單內(nèi)的元素通過用戶單擊【提交】按鈕,將所有填寫的信息提交給服務(wù)器進(jìn)行處理。創(chuàng)建表單的具體操作如下:(1)在打開的文檔中,將鼠標(biāo)光標(biāo)定位在要插入表單的位置。(2)選擇【插入記錄】→【表單】→【表單】命令,或在插入欄的【表單】選項卡中單擊按鈕,在指定位置添加一個紅色的虛線框,即表單。

1.表單表單是放置表單元素的區(qū)域,表單內(nèi)的元素通2.添加文本域文本域用于創(chuàng)建一個包含單行或多行文本的區(qū)域。用戶可以創(chuàng)建一個隱藏用戶輸入文本的密碼文本域。添加文本域的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在表單中要添加文本域的位置。(2)在插入欄的【表單】選項卡中單擊或按鈕,即可在指定位置添加文本域。2.添加文本域文本域用于創(chuàng)建一個包含單行或多行文3.添加復(fù)選框允許用戶從一組選項中同時選擇多個選項,這些選項就是復(fù)選框,選中時顯示為。添加復(fù)選框的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加復(fù)選框的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,即可在指定位置添加復(fù)選框。3.添加復(fù)選框允許用戶從一組選項中同時選擇多個選項4.單選按鈕及單選按鈕組

單選按鈕是要求用戶只能從一組選項中選擇一個選項的表單元素。單選按鈕通常成組地使用,在同一個組中的所有單選按鈕必須具有相同的名稱。

4.單選按鈕及單選按鈕組單選按鈕是要求用戶只能從一4.單選按鈕及單選按鈕組添加單選按鈕的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加單選按鈕的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,在指定位置添加單選按鈕。若單擊按鈕,可打開【單選按鈕組】對話框,添加單選按鈕組。(3)設(shè)置完成后,單擊【確定】按鈕。4.單選按鈕及單選按鈕組添加單選按鈕的具體操作如5.添加列表/菜單列表/菜單表單元素即是在一個列表中顯示選項值,用戶可以從該列表中選擇多個選項。當(dāng)頁面空間有限,又需要顯示許多選項時,就使用菜單,菜單中只顯示一個選項,其他的選項被隱藏。列表/菜單的添加方法如下:(1)將鼠標(biāo)光標(biāo)定位在表單中要添加列表/菜單的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,即可在指定位置添加列表/菜單。

5.添加列表/菜單列表/菜單表單元素即是在一個列表6.添加跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單類似于彈出菜單,可給菜單中的選項添加URL鏈接,如果不指定鏈接,則與列表/菜單的屬性相同。添加跳轉(zhuǎn)菜單的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加跳轉(zhuǎn)菜單的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,打開【插入跳轉(zhuǎn)菜單】對話框。(3)設(shè)置完成后單擊【確定】按鈕。6.添加跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單類似于彈出菜單,可給菜單中7.添加文件域使用文件域表單元素,用戶可以選擇本地計算機(jī)上的文件,并將該文件上傳到服務(wù)器。文件域的外觀與文本域類似,只是文件域多一個【瀏覽】按鈕。在文件域的文本框中可以手動輸入要上傳的文件路徑,也可以單擊【瀏覽】按鈕指定上傳文件。添加文件域的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加文件域的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,插入文件域。7.添加文件域使用文件域表單元素,用戶可以選擇本8.添加按鈕按鈕有兩種:一種是圖像域,另一種是普通按鈕。圖像域是用圖像作為按鈕圖標(biāo),用于提交或重置表單信息等,與普通按鈕的功能相同。在插入欄的【表單】選項卡中單擊按鈕,打開【選擇圖像源文件】對話框,從計算機(jī)中找出要作為按鈕圖標(biāo)的圖像,單擊【確定】按鈕,插入的圖像即為圖像域。在插入欄的【表單】選項卡中單擊按鈕,在鼠標(biāo)光標(biāo)處可插入普通按鈕。8.添加按鈕按鈕有兩種:一種是圖像域,另一種是普通按鈕。6.1.2典型案例——制作“在線報名”頁面案例目標(biāo)本案例將制作一份“在線報名”頁面,主要介紹表單的創(chuàng)建以及表單元素的添加與設(shè)置等,完成的效果如下圖所示。6.1.2典型案例——制作“在線報名”頁面案例目標(biāo)6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面操作思路:(1)在ls6站點中建立“baoming.html”文檔。(2)插入2行1列的表格,添加表格標(biāo)題。(3)在第2行添加表單,并在表單中添加一個20行3列的表格。(4)依次在單元格中添加報名表內(nèi)容及對應(yīng)的表單元素。6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面案例小結(jié)本案例制作了一份在線報名的網(wǎng)頁,主要介紹了表單的創(chuàng)建、文本域、單選按鈕、復(fù)選框、列表/菜單及按鈕的添加與屬性設(shè)置等內(nèi)容。在制作表單時,可以通過CSS規(guī)則定義中的【方框】類別來指定表單中的文本域和按鈕等元素的寬度和高度。6.1.2典型案例——制作“在線報名”頁面案例小結(jié)6.2使用行為使用行為可將JavaScript代碼嵌入到文檔中,使訪問者可以與Web頁進(jìn)行交互,從而以多種方式更改頁面或執(zhí)行任務(wù)。行為由事件和該事件觸發(fā)的動作兩部分組成。6.2使用行為使用行為可將JavaScript代6.2使用行為6.2.1知識講解6.2.2典型案例——檢測報名表6.2使用行為6.2.1知識講解6.2.1知識講解

本節(jié)將介紹【行為】面板和添加行為的方法。6.2.1知識講解 6.2.1知識講解1.認(rèn)識【行為】面板2.添加行為

6.2.1知識講解1.認(rèn)識【行為】面板1.認(rèn)識【行為】面板

按【Shift+F4】組合鍵打開【行為】面板,如下圖所示。通過【行為】面板,將行為添加到頁面元素中,即可實現(xiàn)相應(yīng)的操作,已添加到當(dāng)前文檔的行為顯示在行為列表中,并按字母順序排列。1.認(rèn)識【行為】面板按【Shift+F4】組合鍵打2.添加行為行為可以添加到整個文檔,也可以添加到鏈接、圖像、表單或其他HTML元素中,但不能將行為添加到純文本上,因為<p>和<span>等標(biāo)簽不能在瀏覽器中生成事件。如果要給文本指定行為,則需要先給該文本指定一個鏈接,即創(chuàng)建空鏈接。2.添加行為6.2.2典型案例——檢測報名表案例目標(biāo)

本案例將對報名表進(jìn)行檢測設(shè)置,主要介紹行為中的表單檢測動作及行為的添加和使用方法,完成后的效果如下圖所示。6.2.2典型案例——檢測報名表案例目標(biāo)6.2.2典型案例——檢測報名表6.2.2典型案例——檢測報名表6.2.2典型案例——檢測報名表操作思路:(1)將“baoming.html”文檔另存為“baoming1.html”文檔。(2)選取整個表單,在【行為】面板中設(shè)置各個文本域是否為必填項、文本內(nèi)容是否必須為數(shù)字等。(3)保存文檔,在瀏覽器中填寫表單并提交。6.2.2典型案例——檢測報名表操作思路:6.2.2典型案例——檢測報名表案例小結(jié)本例對報名表進(jìn)行了檢測設(shè)置,主要介紹了檢測表單行為的添加方法。行為的添加比較簡單,重要的是對各個行為動作的設(shè)置。本例中的“檢測表單”行為用于檢測文本的輸入是否正確,如果出錯將彈出提示信息,以便訪問者正確填寫。6.2.2典型案例——檢測報名表案例小結(jié)6.3插入媒體對象媒體對象即含有圖像和聲音的對象。在Dreamweaver中可以將Flash動畫與Shockwave影片、QUICKTIME、AVI、JavaApplet、ActiveX控件,以及各種格式的音頻文件嵌入到網(wǎng)頁中。6.3插入媒體對象媒體對象即含有圖像和聲音的對象6.3插入媒體對象6.3.1知識講解6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂6.3插入媒體對象6.3.1知識講解6.3.1知識講解本節(jié)將學(xué)習(xí)Flash動畫與元素的插入,以及視頻與聲音文件的嵌入方法。6.3.1知識講解本節(jié)將學(xué)習(xí)Flash動畫與元素6.3.1知識講解1.插入Flash動畫2.嵌入視頻3.嵌入聲音6.3.1知識講解1.插入Flash動畫1.插入Flash動畫Dreamweaver自帶有Flash文本和Flash按鈕,可以將其插入到網(wǎng)頁中。除此之外,用戶還可以插入Flash動畫,下面分別進(jìn)行講解。單擊插入欄【常用】選項卡中按鈕旁的下拉按鈕,在彈出的【媒體】下拉菜單中選擇按鈕對應(yīng)的命令,打開【插入Flash文本】對話框,如下圖所示。1.插入Flash動畫Dreamweaver自帶有1.插入Flash動畫1.插入Flash動畫1.插入Flash動畫單擊插入欄【常用】選項卡中按鈕旁的下拉按鈕,在彈出的【媒體】下拉菜單中選擇按鈕對應(yīng)的命令,打開【插入Flash按鈕】對話框,如下圖所示。1.插入Flash動畫單擊插入欄【常用】選項卡中1.插入Flash動畫1.插入Flash動畫1.插入Flash動畫Flash文本與Flash按鈕在設(shè)計網(wǎng)頁時使用比較少,使用較多的是在Flash中制作的按鈕和動畫。單擊插入欄【常用】選項卡中的按鈕,可插入站點中的Flash動畫,也可以從【文件】面板中直接拖動動畫文件到頁面中要插入Flash動畫的位置。1.插入Flash動畫Flash文本與Flash按鈕在設(shè)計2.嵌入視頻各種視頻文件都可以添加到網(wǎng)頁,但有些視頻文件需要相應(yīng)的插件的支持才能正確顯示。常見的視頻文件有Flash視頻、Shockwave影片、AVI和MPEG文件等。視頻文件可以通過鏈接方式嵌入,也可以作為插件嵌入。Flash視頻和Shockwave影片可以分別通過插入欄【常用】選項卡中的【Flash視頻】和【Shockwave】按鈕直接插入。2.嵌入視頻各種視頻文件都可以添加到網(wǎng)頁,但有些視頻文件3.嵌入聲音嵌入聲音的方法有代碼法、鏈接法、插件法和直接插入法4種。3.嵌入聲音嵌入聲音的方法有代碼法、鏈接法、插件法6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂案例目標(biāo)本案例將在網(wǎng)頁中插入Flash動畫和背景音樂,完成后的效果如右圖所示。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂操作思路:(1)將“index.html”文檔另存為“flash.html”文檔。(2)在代碼視圖中使用<bgsound>標(biāo)簽添加背景音樂,并設(shè)置為循環(huán)播放。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂案例小結(jié)本例主要介紹了在代碼視圖中應(yīng)用<bgsound>標(biāo)簽添加背景音樂,及插入Flash文件的操作,這里添加背景音樂使用的是代碼法。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.4滾動特效滾動特效在網(wǎng)頁中使用得比較普遍,如新聞滾動或廣告語滾動等。滾動特效是通過設(shè)置<marquee>標(biāo)簽及添加相應(yīng)的屬性參數(shù)來完成的。6.4滾動特效滾動特效在網(wǎng)頁中使用得比較普遍,如6.4滾動特效6.4.1知識講解6.4.2典型案例——制作滾動欄6.4滾動特效6.4.1知識講解6.4.1知識講解本節(jié)將介紹<marquee>標(biāo)簽及對應(yīng)的屬性參數(shù)的應(yīng)用。6.4.1知識講解本節(jié)將介紹<marquee>標(biāo)簽6.4.1知識講解1.認(rèn)識<marquee>標(biāo)簽2.<marquee>標(biāo)簽的屬性參數(shù)6.4.1知識講解1.認(rèn)識<marquee>標(biāo)簽1.認(rèn)識<marquee>標(biāo)簽<marquee>標(biāo)簽用于制作可移動的文本效果,可以在<body></body>標(biāo)簽間的任意位置添加,其基本語法結(jié)構(gòu)為:<marquee></marquee>,在標(biāo)簽間可添加文本、表格、圖像、動畫、視頻和表單等元素。1.認(rèn)識<marquee>標(biāo)簽<marquee>標(biāo)2.<marquee>標(biāo)簽的屬性參數(shù)<marquee>標(biāo)簽的屬性參數(shù)添加在“<marquee>”中,各屬性參數(shù)間用空格分隔,其屬性參數(shù)有大小、對齊方式、移動方式、移動方向、循環(huán)次數(shù)、速度和延遲方式等。2.<marquee>標(biāo)簽的屬性參數(shù)<marqu6.4.2典型案例——制作滾動欄案例目標(biāo)本案例會將上一案例中的“最新禮品”欄制作成滾動欄,主要介紹<marquee>標(biāo)簽的使用及屬性參數(shù)的設(shè)置,完成后的效果如下圖所示。6.4.2典型案例——制作滾動欄案例目標(biāo)6.4.2典型案例——制作滾動欄6.4.2典型案例——制作滾動欄6.4.2典型案例——制作滾動欄操作思路:(1)打開文件“flash.html”文檔,然后另存為“marq.html”文檔。(2)在代碼視圖中添加<marquee>標(biāo)簽。(3)設(shè)置<marquee>標(biāo)簽屬性參數(shù)。6.4.2典型案例——制作滾動欄操作思路:6.4.2典型案例——制作滾動欄案例小結(jié)本例制作了滾動欄,主要介紹了<marquee>標(biāo)簽的使用,滾動區(qū)的大小設(shè)置,循環(huán)播放、滾動方式、播放速度、對齊方式設(shè)置,以及鼠標(biāo)對滾動對象的控制等內(nèi)容。在制作滾動效果時,如果要水平移動,可以指定“direction”參數(shù)的值為“l(fā)eft”或“right”,如果需要走走停停,可以指定“scrolldelay”參數(shù)的值。6.4.2典型案例——制作滾動欄案例小結(jié)6.5添加Spry構(gòu)件6.5.1知識講解6.5.2典型案例——制作選項卡式個人簡歷6.5添加Spry構(gòu)件6.5.1知識講解6.5.1知識講解1.插入Spry菜單欄2.插入選項卡式面板3.Spry折疊式4.插入Spry可折疊面板6.5.1知識講解1.插入Spry菜單欄1.插入Spry菜單欄

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

2.插入選項卡式面板單擊插入欄【Spry】選項卡中2.插入選項卡式面板更改選項卡中的文字內(nèi)容與格式,與修改單元格中的內(nèi)容及格式的方法相同,要修改被隱藏的選項卡內(nèi)容時,將鼠標(biāo)移至選項卡名稱的位置,單擊圖標(biāo),即可將該選項卡設(shè)置為當(dāng)前選項卡,從而可對其進(jìn)行編輯。2.插入選項卡式面板更改選項卡中的文字內(nèi)容與格式,3.Spry折疊式單擊插入欄【Spry】選項卡中的按鈕,在文檔中插入Spry折疊式,如下圖所示。3.Spry折疊式單擊插入欄【Spry】選項卡中4.插入Spry可折疊面板單擊插入欄【Spry】選項卡中的按鈕,在文檔中插入可折疊面板,如下圖所示。4.插入Spry可折疊面板單擊插入欄【Spry】選6.5.2典型案例——制作選項卡式個人簡歷案例目標(biāo)

本例通過制作選項卡式個人簡歷,主要介紹Spry選項卡式面板的插入、屬性設(shè)置及內(nèi)容的添加,同時了解Spry構(gòu)件的基本使用方法,完成后的效果如右圖所示。6.5.2典型案例——制作選項卡式個人簡歷案例目標(biāo)6.5.2典型案例——制作選項卡式個人簡歷操作思路:(1)在站點中新建文檔“jl.html”,打開并編輯該文檔。(2)在頁面中插入Spry選項卡式面板并設(shè)置其屬性。(3)在選項卡相應(yīng)位置添加內(nèi)容。6.5.2典型案例——制作選項卡式個人簡歷操作思路:6.5.2典型案例——制作選項卡式個人簡歷案例小結(jié)

本例制作了選項卡式簡歷,主要介紹了Spry構(gòu)件的插入、屬性設(shè)置、內(nèi)容修改以及設(shè)置構(gòu)件對應(yīng)的CSS樣式等。在修改Spry構(gòu)件內(nèi)容的時候,可以將它當(dāng)成是普通的對象直接更改,修改其外觀樣式時可以修改外觀樣式所對應(yīng)的CSS樣式。6.5.2典型案例——制作選項卡式個人簡歷案例小結(jié)6.6上機(jī)練習(xí)6.6.1利用Spry折疊式制作簡歷6.6.2制作“信息反饋”欄目6.6上機(jī)練習(xí)6.6.1利用Spry折疊式制作簡歷6.6.1利用Spry折疊式制作簡歷下面練習(xí)Spry折疊式的使用,如下圖所示,主要練習(xí)Spry折疊式的屬性設(shè)置,內(nèi)容添加及CSS樣式的修改。6.6.1利用Spry折疊式制作簡歷下面練習(xí)Spr6.6.1利用Spry折疊式制作簡歷操作思路:新建文檔并插入Spry折疊式。添加項目。設(shè)置項目標(biāo)題名稱,在對應(yīng)的內(nèi)容區(qū)域插入內(nèi)容。設(shè)置對應(yīng)區(qū)域的CSS樣式。6.6.1利用Spry折疊式制作簡歷操作思路:6.6.2制作“信息反饋”欄目下面,在“聯(lián)系我們”頁面中增加“信息反饋”欄目,主要練習(xí)表單及表單元素的使用,效果如右圖所示。6.6.2制作“信息反饋”欄目下面,在“聯(lián)系我們”6.6.2制作“信息反饋”欄目

操作思路:打開“l(fā)ianxi2.html”文檔。在“聯(lián)系信息”欄的下方插入表單,并插入9行2列,寬為“100%”的表格,設(shè)置表格屬性。添加表單元素,在【屬性】面板中為每個文本域設(shè)置不同的名稱。6.6.2制作“信息反饋”欄目操作思路:第6章動態(tài)網(wǎng)頁技術(shù)本課要點具體要求本課導(dǎo)讀上機(jī)練習(xí)第6章動態(tài)網(wǎng)頁技術(shù)本課要點本課要點應(yīng)用表單使用行為插入媒體對象滾動特效本課要點具體要求掌握表單的創(chuàng)建及表單元素的使用熟悉行為的設(shè)置方法掌握動畫、聲音和視頻的添加了解<marquee>標(biāo)簽及屬性參數(shù)具體要求掌握表單的創(chuàng)建及表單元素的使用本課導(dǎo)讀動態(tài)網(wǎng)頁技術(shù)主要包含表單的提交、行為控制、Flash動畫的插入、影片的插入、聲音的添加、滾動效果的制作等,合理地使用這些動態(tài)元素,可以為網(wǎng)頁添加豐富的動態(tài)效果。本課導(dǎo)讀動態(tài)網(wǎng)頁技術(shù)主要包含表單的提交、行為控制、Fl6.1應(yīng)用表單表單的作用是從訪問者那里獲取信息驗證。訪問者可以在文本域、列表框、復(fù)選框以及單選按鈕等表單元素中輸入信息,然后提交這些信息到服務(wù)器進(jìn)行處理。6.1應(yīng)用表單表單的作用是從訪問者那里獲取信息驗6.1應(yīng)用表單6.1.1知識講解6.1.2典型案例——制作“在線報名”頁面6.1應(yīng)用表單6.1.1知識講解6.1.1知識講解

本節(jié)將學(xué)習(xí)表單的創(chuàng)建及表單元素的屬性設(shè)置等知識。6.1.1知識講解 本節(jié)將學(xué)習(xí)表單的創(chuàng)建及表單元素的屬性6.1.1知識講解1.表單2.添加文本域3.添加復(fù)選框4.單選按鈕及單選按鈕組5.添加列表/菜單6.添加跳轉(zhuǎn)菜單7.添加文件域8.添加按鈕6.1.1知識講解1.表單1.表單表單是放置表單元素的區(qū)域,表單內(nèi)的元素通過用戶單擊【提交】按鈕,將所有填寫的信息提交給服務(wù)器進(jìn)行處理。創(chuàng)建表單的具體操作如下:(1)在打開的文檔中,將鼠標(biāo)光標(biāo)定位在要插入表單的位置。(2)選擇【插入記錄】→【表單】→【表單】命令,或在插入欄的【表單】選項卡中單擊按鈕,在指定位置添加一個紅色的虛線框,即表單。

1.表單表單是放置表單元素的區(qū)域,表單內(nèi)的元素通2.添加文本域文本域用于創(chuàng)建一個包含單行或多行文本的區(qū)域。用戶可以創(chuàng)建一個隱藏用戶輸入文本的密碼文本域。添加文本域的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在表單中要添加文本域的位置。(2)在插入欄的【表單】選項卡中單擊或按鈕,即可在指定位置添加文本域。2.添加文本域文本域用于創(chuàng)建一個包含單行或多行文3.添加復(fù)選框允許用戶從一組選項中同時選擇多個選項,這些選項就是復(fù)選框,選中時顯示為。添加復(fù)選框的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加復(fù)選框的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,即可在指定位置添加復(fù)選框。3.添加復(fù)選框允許用戶從一組選項中同時選擇多個選項4.單選按鈕及單選按鈕組

單選按鈕是要求用戶只能從一組選項中選擇一個選項的表單元素。單選按鈕通常成組地使用,在同一個組中的所有單選按鈕必須具有相同的名稱。

4.單選按鈕及單選按鈕組單選按鈕是要求用戶只能從一4.單選按鈕及單選按鈕組添加單選按鈕的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加單選按鈕的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,在指定位置添加單選按鈕。若單擊按鈕,可打開【單選按鈕組】對話框,添加單選按鈕組。(3)設(shè)置完成后,單擊【確定】按鈕。4.單選按鈕及單選按鈕組添加單選按鈕的具體操作如5.添加列表/菜單列表/菜單表單元素即是在一個列表中顯示選項值,用戶可以從該列表中選擇多個選項。當(dāng)頁面空間有限,又需要顯示許多選項時,就使用菜單,菜單中只顯示一個選項,其他的選項被隱藏。列表/菜單的添加方法如下:(1)將鼠標(biāo)光標(biāo)定位在表單中要添加列表/菜單的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,即可在指定位置添加列表/菜單。

5.添加列表/菜單列表/菜單表單元素即是在一個列表6.添加跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單類似于彈出菜單,可給菜單中的選項添加URL鏈接,如果不指定鏈接,則與列表/菜單的屬性相同。添加跳轉(zhuǎn)菜單的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加跳轉(zhuǎn)菜單的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,打開【插入跳轉(zhuǎn)菜單】對話框。(3)設(shè)置完成后單擊【確定】按鈕。6.添加跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單類似于彈出菜單,可給菜單中7.添加文件域使用文件域表單元素,用戶可以選擇本地計算機(jī)上的文件,并將該文件上傳到服務(wù)器。文件域的外觀與文本域類似,只是文件域多一個【瀏覽】按鈕。在文件域的文本框中可以手動輸入要上傳的文件路徑,也可以單擊【瀏覽】按鈕指定上傳文件。添加文件域的具體操作如下:(1)將鼠標(biāo)光標(biāo)定位在要添加文件域的位置。(2)在插入欄的【表單】選項卡中單擊按鈕,插入文件域。7.添加文件域使用文件域表單元素,用戶可以選擇本8.添加按鈕按鈕有兩種:一種是圖像域,另一種是普通按鈕。圖像域是用圖像作為按鈕圖標(biāo),用于提交或重置表單信息等,與普通按鈕的功能相同。在插入欄的【表單】選項卡中單擊按鈕,打開【選擇圖像源文件】對話框,從計算機(jī)中找出要作為按鈕圖標(biāo)的圖像,單擊【確定】按鈕,插入的圖像即為圖像域。在插入欄的【表單】選項卡中單擊按鈕,在鼠標(biāo)光標(biāo)處可插入普通按鈕。8.添加按鈕按鈕有兩種:一種是圖像域,另一種是普通按鈕。6.1.2典型案例——制作“在線報名”頁面案例目標(biāo)本案例將制作一份“在線報名”頁面,主要介紹表單的創(chuàng)建以及表單元素的添加與設(shè)置等,完成的效果如下圖所示。6.1.2典型案例——制作“在線報名”頁面案例目標(biāo)6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面操作思路:(1)在ls6站點中建立“baoming.html”文檔。(2)插入2行1列的表格,添加表格標(biāo)題。(3)在第2行添加表單,并在表單中添加一個20行3列的表格。(4)依次在單元格中添加報名表內(nèi)容及對應(yīng)的表單元素。6.1.2典型案例——制作“在線報名”頁面6.1.2典型案例——制作“在線報名”頁面案例小結(jié)本案例制作了一份在線報名的網(wǎng)頁,主要介紹了表單的創(chuàng)建、文本域、單選按鈕、復(fù)選框、列表/菜單及按鈕的添加與屬性設(shè)置等內(nèi)容。在制作表單時,可以通過CSS規(guī)則定義中的【方框】類別來指定表單中的文本域和按鈕等元素的寬度和高度。6.1.2典型案例——制作“在線報名”頁面案例小結(jié)6.2使用行為使用行為可將JavaScript代碼嵌入到文檔中,使訪問者可以與Web頁進(jìn)行交互,從而以多種方式更改頁面或執(zhí)行任務(wù)。行為由事件和該事件觸發(fā)的動作兩部分組成。6.2使用行為使用行為可將JavaScript代6.2使用行為6.2.1知識講解6.2.2典型案例——檢測報名表6.2使用行為6.2.1知識講解6.2.1知識講解

本節(jié)將介紹【行為】面板和添加行為的方法。6.2.1知識講解 6.2.1知識講解1.認(rèn)識【行為】面板2.添加行為

6.2.1知識講解1.認(rèn)識【行為】面板1.認(rèn)識【行為】面板

按【Shift+F4】組合鍵打開【行為】面板,如下圖所示。通過【行為】面板,將行為添加到頁面元素中,即可實現(xiàn)相應(yīng)的操作,已添加到當(dāng)前文檔的行為顯示在行為列表中,并按字母順序排列。1.認(rèn)識【行為】面板按【Shift+F4】組合鍵打2.添加行為行為可以添加到整個文檔,也可以添加到鏈接、圖像、表單或其他HTML元素中,但不能將行為添加到純文本上,因為<p>和<span>等標(biāo)簽不能在瀏覽器中生成事件。如果要給文本指定行為,則需要先給該文本指定一個鏈接,即創(chuàng)建空鏈接。2.添加行為6.2.2典型案例——檢測報名表案例目標(biāo)

本案例將對報名表進(jìn)行檢測設(shè)置,主要介紹行為中的表單檢測動作及行為的添加和使用方法,完成后的效果如下圖所示。6.2.2典型案例——檢測報名表案例目標(biāo)6.2.2典型案例——檢測報名表6.2.2典型案例——檢測報名表6.2.2典型案例——檢測報名表操作思路:(1)將“baoming.html”文檔另存為“baoming1.html”文檔。(2)選取整個表單,在【行為】面板中設(shè)置各個文本域是否為必填項、文本內(nèi)容是否必須為數(shù)字等。(3)保存文檔,在瀏覽器中填寫表單并提交。6.2.2典型案例——檢測報名表操作思路:6.2.2典型案例——檢測報名表案例小結(jié)本例對報名表進(jìn)行了檢測設(shè)置,主要介紹了檢測表單行為的添加方法。行為的添加比較簡單,重要的是對各個行為動作的設(shè)置。本例中的“檢測表單”行為用于檢測文本的輸入是否正確,如果出錯將彈出提示信息,以便訪問者正確填寫。6.2.2典型案例——檢測報名表案例小結(jié)6.3插入媒體對象媒體對象即含有圖像和聲音的對象。在Dreamweaver中可以將Flash動畫與Shockwave影片、QUICKTIME、AVI、JavaApplet、ActiveX控件,以及各種格式的音頻文件嵌入到網(wǎng)頁中。6.3插入媒體對象媒體對象即含有圖像和聲音的對象6.3插入媒體對象6.3.1知識講解6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂6.3插入媒體對象6.3.1知識講解6.3.1知識講解本節(jié)將學(xué)習(xí)Flash動畫與元素的插入,以及視頻與聲音文件的嵌入方法。6.3.1知識講解本節(jié)將學(xué)習(xí)Flash動畫與元素6.3.1知識講解1.插入Flash動畫2.嵌入視頻3.嵌入聲音6.3.1知識講解1.插入Flash動畫1.插入Flash動畫Dreamweaver自帶有Flash文本和Flash按鈕,可以將其插入到網(wǎng)頁中。除此之外,用戶還可以插入Flash動畫,下面分別進(jìn)行講解。單擊插入欄【常用】選項卡中按鈕旁的下拉按鈕,在彈出的【媒體】下拉菜單中選擇按鈕對應(yīng)的命令,打開【插入Flash文本】對話框,如下圖所示。1.插入Flash動畫Dreamweaver自帶有1.插入Flash動畫1.插入Flash動畫1.插入Flash動畫單擊插入欄【常用】選項卡中按鈕旁的下拉按鈕,在彈出的【媒體】下拉菜單中選擇按鈕對應(yīng)的命令,打開【插入Flash按鈕】對話框,如下圖所示。1.插入Flash動畫單擊插入欄【常用】選項卡中1.插入Flash動畫1.插入Flash動畫1.插入Flash動畫Flash文本與Flash按鈕在設(shè)計網(wǎng)頁時使用比較少,使用較多的是在Flash中制作的按鈕和動畫。單擊插入欄【常用】選項卡中的按鈕,可插入站點中的Flash動畫,也可以從【文件】面板中直接拖動動畫文件到頁面中要插入Flash動畫的位置。1.插入Flash動畫Flash文本與Flash按鈕在設(shè)計2.嵌入視頻各種視頻文件都可以添加到網(wǎng)頁,但有些視頻文件需要相應(yīng)的插件的支持才能正確顯示。常見的視頻文件有Flash視頻、Shockwave影片、AVI和MPEG文件等。視頻文件可以通過鏈接方式嵌入,也可以作為插件嵌入。Flash視頻和Shockwave影片可以分別通過插入欄【常用】選項卡中的【Flash視頻】和【Shockwave】按鈕直接插入。2.嵌入視頻各種視頻文件都可以添加到網(wǎng)頁,但有些視頻文件3.嵌入聲音嵌入聲音的方法有代碼法、鏈接法、插件法和直接插入法4種。3.嵌入聲音嵌入聲音的方法有代碼法、鏈接法、插件法6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂案例目標(biāo)本案例將在網(wǎng)頁中插入Flash動畫和背景音樂,完成后的效果如右圖所示。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂操作思路:(1)將“index.html”文檔另存為“flash.html”文檔。(2)在代碼視圖中使用<bgsound>標(biāo)簽添加背景音樂,并設(shè)置為循環(huán)播放。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音樂案例小結(jié)本例主要介紹了在代碼視圖中應(yīng)用<bgsound>標(biāo)簽添加背景音樂,及插入Flash文件的操作,這里添加背景音樂使用的是代碼法。6.3.2典型案例——在網(wǎng)頁中插入Flash動畫和背景音6.4滾動特效滾動特效在網(wǎng)頁中使用得比較普遍,如新聞滾動或廣告語滾動等。滾動特效是通過設(shè)置<marquee>標(biāo)簽及添加相應(yīng)的屬性參數(shù)來完成的。6.4滾動特效滾動特效在網(wǎng)頁中使用得比較普遍,如6.4滾動特效6.4.1知識講解6.4.2典型案例——制作滾動欄6.4滾動特效6.4.1知識講解6.4.1知識講解本節(jié)將介紹<marquee>標(biāo)簽及對應(yīng)的屬性參數(shù)的應(yīng)用。6.4.1知識講解本節(jié)將介紹<marquee>標(biāo)簽6.4.1知識講解1.認(rèn)識<marquee>標(biāo)簽2.<marquee>標(biāo)簽的屬性參數(shù)6.4.1知識講解1.認(rèn)識<marquee>標(biāo)簽1.認(rèn)識<marquee>標(biāo)簽<marquee>標(biāo)簽用于制作可移動的文本效果,可以在<body></body>標(biāo)簽間的任意位置添加,其基本語法結(jié)構(gòu)為:<marquee></marquee>,在標(biāo)簽間可添加文本、表格、圖像、動畫、視頻和表單等元素。1.認(rèn)識<marquee>標(biāo)簽<marquee>標(biāo)2.<marquee>標(biāo)簽的屬性參數(shù)<marquee>標(biāo)簽的屬性參數(shù)添加在“<marquee>”中,各屬性參數(shù)間用空格分隔,其屬性參數(shù)有大小、對齊方式、移動方式、移動方向、循環(huán)次數(shù)、速度和延遲方式等。2.<marquee>標(biāo)簽的屬性參數(shù)<marqu6.4.2典型案例——制作滾動欄案例目標(biāo)本案例會將上一案例中的“最新禮品”欄制作成滾動欄,主要介紹<marquee>標(biāo)簽的使用及屬性參數(shù)的設(shè)置,完成后的效果如下圖所示。6.4.2典型案例——制作滾動欄案例目標(biāo)6.4.2典型案例——制作滾動欄6.4.2典型案例——制作滾動欄6.4.2典型案例——制作滾動欄操作思路:(1)打開文件“flash.html”文檔,然后另存為“marq.html”文檔。(2)在代碼視圖中添加<marquee>標(biāo)簽。(3)設(shè)置<marquee>標(biāo)簽屬性參數(shù)。6.4.2典型案例——制作滾動欄操作思路:6.4.2典型案例——制作滾動欄案例小結(jié)本例制作了滾動欄,主要介紹了<marquee>標(biāo)簽的使用,滾動區(qū)的大小設(shè)置,循環(huán)播放、滾動方式、播放速度、對齊方式設(shè)置,以及鼠標(biāo)對滾動對象的控制等內(nèi)容。在制作滾動效果時,如果要水平移動,可以指定“direction”參數(shù)的值為“l(fā)eft”或“right”,如果需要走走停停,可以指定“scrolldelay”參數(shù)的值。6.4.2典型案例——制作滾動欄案例小結(jié)6.5添加Spry構(gòu)件6.5.1知識講解6.5.2典型案例——制作選項卡式個人簡歷6.5添加Spry構(gòu)件6.5.1

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論