第十一講-網(wǎng)頁中的多媒體和特效

第十一講_網(wǎng)頁中的多媒體和特效2DreamweaverCS4網(wǎng)頁中的特效和表單3教學(xué)內(nèi)容掌握網(wǎng)頁中的特殊效果的處理技巧掌握創(chuàng)建表單的方法網(wǎng)頁特效在DreamweaverCS4中，可以添加許多網(wǎng)頁特效，例如鼠標(biāo)特效、滾動條和頁面特效等。常用的有彈出信息、交換圖片、背景音樂、滾動字幕等添加網(wǎng)頁特效的方法可以通過“行為”面板在“代碼”視圖中添加代碼4彈出信息彈出信息是指在瀏覽網(wǎng)頁時，鼠標(biāo)點(diǎn)擊對象(圖片等)，會彈出信息窗口。彈出信息創(chuàng)建步驟選擇網(wǎng)頁中的圖片打開“行為”面板選擇“彈出信息”打開“彈出信息”對話框輸入“信息內(nèi)容”56示例1_彈出信息選擇main.html中圖片，設(shè)置彈出信息。鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是指在瀏覽網(wǎng)頁時，鼠標(biāo)移動到某張圖像上時，該圖像會切換成另一張圖像，移開鼠標(biāo)時，恢復(fù)原來的圖像。鼠標(biāo)經(jīng)過圖像方法1(網(wǎng)頁中已插入原始圖片)選擇網(wǎng)頁中圖片打開“行為”面板選擇“交換圖像”打開“交換圖像”對話框選擇需要交換的圖像鼠標(biāo)經(jīng)過圖像方法2：(網(wǎng)頁中無原始圖片)選擇插入圖片的位置選擇“插入/圖像對象/鼠標(biāo)經(jīng)過圖像”菜單命令打開“插入鼠標(biāo)經(jīng)過圖像”對話框設(shè)置“原始圖像”、“鼠標(biāo)經(jīng)過圖像”和“鏈接網(wǎng)頁”8示例2_鼠標(biāo)經(jīng)過圖像1設(shè)置“smsc.html”網(wǎng)頁中鼠標(biāo)經(jīng)過圖像特效選擇圖片打開“行為”面板選擇“交換圖像”打開“交換圖像”對話框設(shè)置“pic1.jpg”與該圖片交換(pic1.jpg在SC3文件夾中)示例3_鼠標(biāo)經(jīng)過圖像2在網(wǎng)頁tk.html中設(shè)置鼠標(biāo)經(jīng)過圖像特效原始圖像為“xj1.jpg”，鼠標(biāo)經(jīng)過圖像為“xj2.jpg”點(diǎn)擊圖像能打開“main.html”網(wǎng)頁圖像大小設(shè)置為寬210，高260滾動字幕滾動字幕是指在網(wǎng)頁中來回移動的文字滾動字幕是通過快速標(biāo)簽編輯器來創(chuàng)建選中文字打開“修改”菜單，選擇“快速標(biāo)簽編輯器”打開“快速標(biāo)簽編輯器”輸入代碼<marqueebehavior=“alternate”bgcolor=“#339900”style=“color:#FFFFFF”>10滾動字幕中的常用參數(shù)align表示元素的垂直對齊方式，值可以是top，middle，bottom，默認(rèn)為middlebgcolor表示運(yùn)動區(qū)域的背景色，值是16進(jìn)制的RGB顏色，默認(rèn)為白色behavior表示滾動的方式，值可以是scroll（連續(xù)滾動）slide（滑動一次）alternate（來回滾動）direction表示滾動的方向，值可以是left，right，up，down，默認(rèn)為leftloop表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無限循環(huán)scrollamount表示運(yùn)動速度，值是正整數(shù)，默認(rèn)為6scrolldelay表示停頓時間，值是正整數(shù)，默認(rèn)為0，單位似乎是毫秒height、width表示運(yùn)動區(qū)域的高度和寬度，值是正整數(shù)（單位是像素）或百分?jǐn)?shù)，默認(rèn)width=100%height為標(biāo)簽內(nèi)元素的高度hspace、vspace表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素onmouseover=this.stop()onmouseout=this.start()表示當(dāng)鼠標(biāo)以上區(qū)域的時候滾動停止，當(dāng)鼠標(biāo)移開的時候又繼續(xù)滾動。<marquee>標(biāo)記的默認(rèn)情況向左滾動無限次，字幕高度是文本高度滾動范圍：水平滾動的寬度是當(dāng)前位置的寬度；垂直滾動的高度是當(dāng)前位置的高度。12示例4_滾動字幕在網(wǎng)頁“main.htm”表格插入一行，并添加文字“歡迎光臨E派網(wǎng)上沖印店”選中文字，在“快速標(biāo)簽編輯器”中輸入代碼<marqueebehavior=“alternate”bgcolor=“#339900”style=“color:#FFFFFF”>Spry特效Spry特效幾乎可以應(yīng)用于HTML頁面中的任何元素，使用這些特效可以實(shí)現(xiàn)使網(wǎng)頁元素發(fā)光、縮小、淡化、高光等效果。Spry特效的行為包括顯示/漸隱、遮簾、增大/收縮、高亮顏色、晃動、滑動、擠壓等。在網(wǎng)頁中插入Spry特效打開行為面板選擇“效果”中特效設(shè)置鼠標(biāo)事件示例5_Spry特效設(shè)置點(diǎn)擊網(wǎng)頁main.html中圖片設(shè)置Spry特效增大/收縮設(shè)置增大效果從10%變化到100%；事件為“onMouseOver”顯示/漸隱設(shè)置漸隱效果；事件為“onClick”晃動事件為“onClick”增大效果漸隱效果晃動效果層層是帶有CSS樣式的Div或Span代碼，用于網(wǎng)頁元素的精確定位。由于一個頁面中可以擁有多個層，而不同的層之間可以相互重疊，通過設(shè)置透明度來決定每個層是否可見或者可見的程度，因而層可用來實(shí)現(xiàn)許多特效。層就像是包含文字或圖像等元素的膠片，按順序疊放在一起，組合成頁面的最終效果。層可以精確地定位頁面上的元素，并且在層中可以加入文本、圖像、表格、插件等元素，還可以插入嵌套層。ApDiv特點(diǎn)所謂APDiv，是指存放文本、圖像、表單和插件等網(wǎng)頁內(nèi)容的容器。APDiv最主要的特性就是它是浮動在網(wǎng)頁內(nèi)容之上的，可以在（不影響其他網(wǎng)頁元素情況下）網(wǎng)頁上任意改變其位置，實(shí)現(xiàn)對APDiv的準(zhǔn)確定位；把頁面元素放入APDiv中可以使用戶對頁面操作的布局更加輕松。APDiv元素其他特點(diǎn)APDiv元素可以重疊，所以在網(wǎng)頁中可以實(shí)現(xiàn)網(wǎng)頁內(nèi)容的重疊效果（如立體字）APDiv元素可以被顯示或隱藏，可以實(shí)現(xiàn)網(wǎng)頁導(dǎo)航中的下拉菜單，圖片的可控顯示或隱藏可以通過應(yīng)用時間軸使其移動和變換，這樣在層中旋轉(zhuǎn)一些圖片或文本，就能夠?qū)崿F(xiàn)動畫效果。在網(wǎng)頁中插入ApDiv元素在工具欄中，選擇“布局”標(biāo)簽，點(diǎn)擊“繪制APDiv”按鈕在網(wǎng)頁上插入ApDiv在ApDiv框中插入對象(文字、圖像等)通過屬性面板設(shè)置屬性示例6_ApDiv元素打開wscy.html網(wǎng)頁在網(wǎng)頁上插入ApDiv元素在ApDiv框中輸入文字“網(wǎng)上沖印管理”設(shè)置ApDiv元素，可見性為“hidden”，背景色為“#FFFF99”設(shè)置ApDiv元素“顯示/隱藏”行為選擇ApDiv元素上方圖片，打開行為面板，選擇“顯示-隱藏”行為，打開“顯示-隱藏元素”對話框，選擇“顯示”按鈕，把行為面板上事件設(shè)置為“onMouseOver”選擇ApDiv元素上方圖片，打開行為面板，選擇“顯示-隱藏”行為，打開“顯示-隱藏元素”對話框，選擇“隱藏”按鈕，把行為面板上事件設(shè)置為“onMouseOut”表單的基礎(chǔ)知識表單允許服務(wù)器端的程序處理用戶端輸入的信息表單在網(wǎng)頁中時提供給訪問者填寫信息的區(qū)域，從而可以收集客戶端信息，使網(wǎng)頁更加具有交互的功能。表單一般被設(shè)置在一個HTML文檔中，訪問者填寫相關(guān)信息后提交表單，表單內(nèi)容會自動從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的ASP或CGI等程序處理后，再將訪問者所需的信息傳送到客戶端的瀏覽器上。幾乎所有網(wǎng)站都應(yīng)用表單，例如搜索欄、論壇和訂單等。20表單對象在DreamweaverCS4中，表單輸入類型稱為表單對象?？梢栽诰W(wǎng)頁中插入表單并創(chuàng)建各種表單對象。常用的表單對象有：文本域：接受文本輸入，可以單行、多行和密碼方式顯示復(fù)選框：允許在一組選項中選擇多個選項單選按鈕：代表相互排斥的選擇列表/菜單：在菜單或列表中選擇選項跳轉(zhuǎn)菜單：在菜單中選擇鏈接對象按鈕：在單擊時執(zhí)行操作21創(chuàng)建表單在插入表單對象之前必須先創(chuàng)建表單創(chuàng)建表單步驟選擇“插入/表單”菜單命令或(選擇“插入”工具欄上“表單”選項)在設(shè)計視圖中就會生成一個紅色虛線框22插入表單對象和屬性設(shè)置插入表單對象步驟選擇“插入/表單對象”菜單命令或(選擇“插入/表單”工具欄上相應(yīng)按鈕)表單對象屬性設(shè)置選擇相應(yīng)的表單對象，就可以在“屬性”面板中設(shè)置屬性23插入文本域表單對象文本域是非常重要的表單對象，可以輸入相關(guān)信息。點(diǎn)擊“插入/表單”工具欄中的“文本域/文本區(qū)域”按鈕，可以插入文本域表單對象文本域包括了“單行”、“多行”和“密碼”3種類型，以適應(yīng)不同情況下的需要。在屬性面板上可以設(shè)置：文本域名稱、字符寬度、最大字符數(shù)\行數(shù)、文本域類型、初始值等24插入單選按鈕單選按鈕提供相互排斥的選項值，在單選按鈕組內(nèi)只能選擇一個選項。點(diǎn)擊“插入/表單”工具欄中的“單選按鈕”按鈕，即可在文檔中創(chuàng)建一個單選按鈕。在屬性面板上可以設(shè)置：單選按鈕名稱選定值初始狀態(tài)25插入單選按鈕組點(diǎn)擊“插入/表單”工具欄中的“單選按鈕組”按鈕打開“單選按鈕組”窗口，設(shè)置單選按鈕組單選按鈕組名稱標(biāo)簽值26插入復(fù)選框復(fù)選框表單對象，可以限制訪問者填寫的內(nèi)容。使收集的信息更加規(guī)范，更有利于信息的統(tǒng)計。點(diǎn)擊“插入/表單”工具欄中的“復(fù)選框”按鈕，即可在網(wǎng)頁文檔中創(chuàng)建復(fù)選框。在屬性面板上可以設(shè)置：復(fù)選框名稱選定值初始狀態(tài)27插入復(fù)選框組復(fù)選框組和按鈕和單選按鈕組相似，可以一次插入多個選項點(diǎn)擊“插入/表單”工具欄中的“復(fù)選框組”按鈕打開“復(fù)選框組”對話框，設(shè)置復(fù)選框組復(fù)選框組名稱標(biāo)簽值28插入列表和菜單表單對象列表和菜單也是預(yù)定義選擇對象的表單對象，使用它們可以在有限的空間內(nèi)提供多個選項。列表也稱為“滾動列表”，提供一個滾動條，允許訪問者瀏覽多個選項，并進(jìn)行多重選擇。菜單也稱為“下拉列表框”，僅顯示一個選項，該項也是活動選項，訪問者只能從菜單中選擇一項。點(diǎn)擊“插入/表單”工具欄中的“列表/菜單”按鈕，即可在網(wǎng)頁文檔中插入列表/菜單表單29菜單列表添加菜單選項和列表選項插入列表/菜單表單后，在默認(rèn)情況下是沒有菜單選項或列表選項的，可以在“屬性”面板中添加菜單選項和列表選項。在“屬性”面板中，點(diǎn)擊“列表值”按鈕，打開“列表值”對話框，添加選項30添加跳轉(zhuǎn)菜單在表單中插入跳轉(zhuǎn)菜單，可以從菜單中選擇需要打開的網(wǎng)頁或文件點(diǎn)擊“插入/表單”工具欄中的“跳轉(zhuǎn)菜單”按鈕，打開“插入跳轉(zhuǎn)菜單”對話框，設(shè)置文本和跳轉(zhuǎn)對象插入按鈕在預(yù)覽網(wǎng)頁文檔時，當(dāng)輸入完表單數(shù)據(jù)后，可以單擊表單按鈕，提交服務(wù)器處理如果對輸入的數(shù)據(jù)不滿意，需要重新設(shè)置時，可以單擊表單按鈕，重新輸入按鈕是標(biāo)準(zhǔn)的瀏覽器默認(rèn)按鈕樣式，它包含需要顯示的文本，它包括“提交”和“重置”按鈕點(diǎn)擊“插入/表單”工具欄中的“按鈕”按鈕，即可在網(wǎng)頁文檔中插入按鈕

32示例7_創(chuàng)建表單和表單對象打開Mysite站點(diǎn)中的網(wǎng)頁“pszf.html”，按樣張創(chuàng)建表單對象姓名：文本域，單行，寬度為16地址：文本域，單行，寬度為50聯(lián)系方式：文本域，單行，寬度為50特殊要求：文本域，多行，寬度為50，5