電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目9_第1頁(yè)
電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目9_第2頁(yè)
電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目9_第3頁(yè)
電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目9_第4頁(yè)
電子商務(wù)網(wǎng)頁(yè)制作-項(xiàng)目9_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

DW工程九電子商務(wù)網(wǎng)頁(yè)制作網(wǎng)頁(yè)特效的使用 學(xué)習(xí)為網(wǎng)頁(yè)元素添加行為 學(xué)習(xí)在網(wǎng)頁(yè)中插入網(wǎng)頁(yè)特效工程目標(biāo)試一試——有趣的網(wǎng)頁(yè)特效第一步：翻開(kāi)IE瀏覽器，在地址欄中輸入，將翻開(kāi)北京銀行官方網(wǎng)站首頁(yè)。試一試——有趣的網(wǎng)頁(yè)特效第一步：翻開(kāi)IE瀏覽器，在地址欄中輸入，將翻開(kāi)北京銀行官方網(wǎng)站首頁(yè)。試一試——有趣的網(wǎng)頁(yè)特效第二步：觀察北京銀行網(wǎng)站首頁(yè)具有的特效。頂部顯示了當(dāng)前的日期；“京行公告〞欄采用了滾動(dòng)文字效果；網(wǎng)頁(yè)兩側(cè)使用了層廣告效果。第三步：在IE瀏覽器地址欄中輸入，將翻開(kāi)華夏銀行官方網(wǎng)站首頁(yè)，在翻開(kāi)首頁(yè)的同時(shí)，會(huì)自動(dòng)彈出以下圖所示的廣告窗口，這也是網(wǎng)頁(yè)特效的一種。試一試——有趣的網(wǎng)頁(yè)特效很多網(wǎng)站都會(huì)參加假設(shè)干網(wǎng)頁(yè)特效以增強(qiáng)網(wǎng)站的動(dòng)態(tài)效果，此外還可以制作網(wǎng)頁(yè)廣告，提高網(wǎng)頁(yè)的宣傳效果。網(wǎng)頁(yè)特效的種類很多，可根據(jù)需要選用，但是網(wǎng)頁(yè)特效的使用不宜過(guò)雜，要有針對(duì)性，不能引起瀏覽者的反感?；顒?dòng)小結(jié)行為概述行為是在某一對(duì)象上因?yàn)槟骋皇录|發(fā)某一動(dòng)作的綜合描述，它是被用來(lái)動(dòng)態(tài)響應(yīng)用戶操作、改變當(dāng)前頁(yè)面的效果或是執(zhí)行特定任務(wù)的一種方法。行為是由事件、對(duì)象和動(dòng)作構(gòu)成的。使用行為，我們可以完成翻開(kāi)新瀏覽器窗口、改變對(duì)象屬性、制作文字滾動(dòng)等效果。行為是由事件和觸發(fā)該事件的動(dòng)作組合而成的。在“行為〞面板中，通過(guò)指定一個(gè)動(dòng)作然后指定觸發(fā)該動(dòng)作的事件，可將行為添加到網(wǎng)頁(yè)中。行為概述事件：事件是瀏覽器生成的消息，指示網(wǎng)頁(yè)的訪問(wèn)者執(zhí)行了某種操作。比方，當(dāng)訪問(wèn)者將鼠標(biāo)指針移動(dòng)到某個(gè)鏈接上時(shí)，瀏覽器為該鏈接生成一個(gè)onMouseOver事件；然后瀏覽器查看是否存在當(dāng)為該鏈接生成該事件時(shí)瀏覽器應(yīng)該調(diào)用的JavaScript代碼。動(dòng)作：動(dòng)作是由預(yù)先編寫(xiě)的JavaScript代碼組成的，這些代碼可以執(zhí)行特定的任務(wù)，比方翻開(kāi)瀏覽器窗口、顯示或隱藏層、播放聲音或停止Shockwave影片。單個(gè)事件可以觸發(fā)多個(gè)不同的動(dòng)作，可以指定這些動(dòng)作發(fā)生的順序。行為的觸發(fā)事件行為的產(chǎn)生要通過(guò)事件來(lái)觸發(fā)，常見(jiàn)的事件如鼠標(biāo)單擊、頁(yè)面加載、鼠標(biāo)移入、按鍵等等。翻開(kāi)“窗口〞菜單，選擇“行為〞命令，將在面板組中翻開(kāi)“行為〞面板：onBlur：當(dāng)指定元素失去焦點(diǎn)時(shí)產(chǎn)生的事件。onClick：當(dāng)用戶單擊指定元素時(shí)產(chǎn)生的事件。onDbClick：當(dāng)用戶單雙指定元素時(shí)產(chǎn)生的事件。onError：當(dāng)頁(yè)面或圖像載入，發(fā)生錯(cuò)誤時(shí)產(chǎn)生的事件。onFocus：當(dāng)指定元素獲得焦點(diǎn)時(shí)產(chǎn)生的事件。onKeyDown：當(dāng)用戶按下任意鍵時(shí)產(chǎn)生的事件。行為的觸發(fā)事件onKeyPress：當(dāng)用戶按下任意鍵并釋放該鍵時(shí)產(chǎn)生的事件。onKeyUp：當(dāng)用戶釋放按下的任意鍵時(shí)產(chǎn)生的事件。onLoad：當(dāng)圖像或網(wǎng)頁(yè)載入完畢時(shí)產(chǎn)生的事件。onMouseDown：當(dāng)用戶在網(wǎng)頁(yè)的某元素上按下鼠標(biāo)時(shí)產(chǎn)生的事件。onMouseMove：當(dāng)鼠標(biāo)移動(dòng)時(shí)產(chǎn)生的事件。onMouseOut：當(dāng)鼠標(biāo)離開(kāi)某元素范圍時(shí)產(chǎn)生的事件。onMouseOver：當(dāng)鼠標(biāo)移動(dòng)到某元素范圍內(nèi)時(shí)產(chǎn)生的事件onMouseUp：當(dāng)按下的鼠標(biāo)被松開(kāi)時(shí)產(chǎn)生的事件。onUnLoad：當(dāng)頁(yè)面卸載時(shí)產(chǎn)生的事件?？商砑有袨榈某Ｒ?jiàn)網(wǎng)頁(yè)元素選取網(wǎng)頁(yè)元素可通過(guò)單擊該元素或通過(guò)相應(yīng)標(biāo)簽進(jìn)行選取。這些不同的網(wǎng)頁(yè)元素可以產(chǎn)生不同的事件。可附加行為的常見(jiàn)對(duì)象包括：1．<A>：超鏈接可以產(chǎn)生的事件有：onClick、onDbClick、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseOut、onMouseOver、onMouseUp。2．<AREA>：圖像的熱點(diǎn)區(qū)域可以產(chǎn)生的事件有：onClick、onDbClick、onMouseOut、onMouseOver。3．<BODY>：HTML文件的正文局部可以產(chǎn)生的事件有：onBlur、onError、onFocus、onLoad、onUnLoad。4．<FORM>：表單對(duì)象可以產(chǎn)生的事件有：onSubmit、onReset。5．<FRAMESET>：框架集可以產(chǎn)生的事件有：onBlur、onFocus、onLoad、onUnLoad。可添加行為的常見(jiàn)網(wǎng)頁(yè)元素6．<IMG>：圖像可以產(chǎn)生的事件有：onError、onLoad。7．<INPUT>：按鈕、復(fù)選框、文件域、密碼域、單項(xiàng)選擇按鈕、提交按鈕或重置按鈕等可以產(chǎn)生的事件有：onBlur、onClick、onFocus、onMouseDown、onMouseUp8．<SELECT>：下拉菜單可以產(chǎn)生的事件有：onBlur、onFocus。9．<TEXTAREA>：文本區(qū)域可以產(chǎn)生的事件有：onBlur、onFocus、onKeyDown、onKeyPress、onKeyUp。在實(shí)際應(yīng)用時(shí)，可根據(jù)需要選擇元素的事件來(lái)觸發(fā)行為。DreamweaverCS5的行為應(yīng)用1．翻轉(zhuǎn)圖像翻轉(zhuǎn)圖像可以增添美觀而專業(yè)的裝飾效果，是網(wǎng)頁(yè)設(shè)計(jì)的常用手法，通過(guò)使用“交換圖像〞和“交換圖像恢復(fù)〞行為，很容易實(shí)現(xiàn)翻轉(zhuǎn)圖像的效果?！?〕選中一個(gè)圖像，翻開(kāi)“行為〞面板，單擊面板中的“+〞按鈕，翻開(kāi)下拉菜單，選擇其中的“交換圖像〞命令，將翻開(kāi)“交換圖像〞對(duì)話框：DreamweaverCS5的行為應(yīng)用〔2〕在“設(shè)定原始檔為〞文本框中輸入要交換的圖像的地址，或者單擊“瀏覽〞按鈕查找并選擇圖像文件。〔3〕選中“預(yù)先載入圖像〞復(fù)選框。〔4〕如果選中“鼠標(biāo)滑開(kāi)時(shí)恢復(fù)圖像〞復(fù)選框，那么鼠標(biāo)移到圖片上時(shí)，圖片翻轉(zhuǎn)；鼠標(biāo)移走后，圖片復(fù)原?！?〕單擊“確定〞按鈕完成此行為的設(shè)置。這時(shí)可以看見(jiàn)，插入的動(dòng)作已經(jīng)出現(xiàn)在“行為〞面板中：DreamweaverCS5的行為應(yīng)用2．彈出信息“彈出信息〞動(dòng)作可以設(shè)置彈出消息框顯示指定的消息?？梢越o某個(gè)按鈕或鏈接設(shè)置單擊事件彈出信息，也可以設(shè)置網(wǎng)頁(yè)加載時(shí)彈出信息?！?〕選擇某個(gè)按鈕或鏈接，在行為面板下拉菜單中選擇“彈出信息〞，將翻開(kāi)“彈出信息〞對(duì)話框：〔2〕在“消息〞文本框中輸入信息內(nèi)容，單擊“確定〞完成彈出信息行為的設(shè)置。DreamweaverCS5的行為應(yīng)用3．翻開(kāi)瀏覽器窗口翻開(kāi)瀏覽器窗口是網(wǎng)上廣告投放的一種常見(jiàn)形式。使用行為可以輕松實(shí)現(xiàn)這個(gè)動(dòng)作。〔1〕在行為面板下拉菜單中選擇“翻開(kāi)瀏覽器窗口〞，將翻開(kāi)“翻開(kāi)瀏覽器窗口〞對(duì)話框：〔2〕在“要顯示的URL〞文本框中輸入要翻開(kāi)的文件的地址，或單擊“瀏覽〞按鈕查找并選擇該文件。在“窗口寬度〞和“窗口高度〞中設(shè)定窗口的尺寸。在屬性一欄中，選擇相應(yīng)的選項(xiàng)，以控制翻開(kāi)的新窗口的外觀。〔3〕單擊“確定〞完成此行為的設(shè)置?！?〕如需要更改觸發(fā)動(dòng)作的事件可參考前面的說(shuō)明。DreamweaverCS5的行為應(yīng)用4．改變屬性可以設(shè)置某種鼠標(biāo)事件來(lái)改變對(duì)象的屬性。比方鼠標(biāo)移過(guò)時(shí)改變對(duì)象的顏色，或者改變對(duì)象的大小等等。〔1〕選擇要改變屬性的對(duì)象，如一個(gè)鏈接或是一個(gè)圖像，在屬性面板中為其設(shè)置一個(gè)ID名?！?〕在行為面板下拉菜單中選擇“改變屬性〞，將翻開(kāi)“改變屬性〞對(duì)話框〔3〕選擇“元素類型〞和“元素ID〞，在“屬性〞中選擇要改變的屬性類型，在“新的值〞文本框中輸入改變后的屬性值?！?〕單擊“確定〞完成此行為的設(shè)置?！?〕如需要更改觸發(fā)動(dòng)作的事件可參考前面的說(shuō)明。DreamweaverCS5的行為應(yīng)用5．顯示/隱藏元素顯示和隱藏元素可以實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象的出現(xiàn)的隱藏，可以用于制作網(wǎng)頁(yè)小廣告，點(diǎn)擊關(guān)閉將小廣告隱藏，也可以用于制作層提示效果等。如果要制作一個(gè)隱藏對(duì)象的效果，點(diǎn)擊一個(gè)按鈕將一幅廣告圖片隱藏，可按如下操作進(jìn)行：〔1〕選擇要隱藏的圖片，在屬性面板中為其設(shè)置一個(gè)ID名?！?〕選擇觸發(fā)隱藏動(dòng)作的按鈕，在行為面板下拉菜單中選擇“顯示/隱藏元素〞，將翻開(kāi)“顯示/隱藏元素〞對(duì)話框〔3〕選擇圖片的ID名，點(diǎn)擊“隱藏〞按鈕后單擊“確定〞。〔4〕如需要更改觸發(fā)動(dòng)作的事件可參考前面的說(shuō)明。網(wǎng)頁(yè)特效概述1.什么是網(wǎng)頁(yè)特效網(wǎng)頁(yè)特效就是網(wǎng)頁(yè)的特殊效果，是一段編寫(xiě)好的腳本程序，應(yīng)用它可以讓網(wǎng)頁(yè)變得形式多樣，更加吸引人，比方彈出窗口、漂浮廣告等。2.網(wǎng)頁(yè)特效的分類常用的網(wǎng)頁(yè)特效有很多，根據(jù)其作用的對(duì)象可分為以下幾類：文本特效類、圖形圖像類、鼠標(biāo)事件類、網(wǎng)頁(yè)特效類、背景特效類、時(shí)間日期類、按鈕特效類、狀態(tài)欄特效類、代碼生成類、等等。網(wǎng)頁(yè)特效概述3.網(wǎng)頁(yè)特效代碼的應(yīng)用網(wǎng)頁(yè)特效代碼的應(yīng)用十分簡(jiǎn)單，只要根據(jù)特效說(shuō)明，把這些代碼復(fù)制、粘貼到網(wǎng)頁(yè)源代碼的相應(yīng)位置中，保存文件，再在瀏覽器中翻開(kāi)，就能夠看到效果了。在網(wǎng)頁(yè)源代碼中插入特效代碼有兩種方式：〔1〕在Dreamweaver中應(yīng)用特效代碼。用Dreamweaver翻開(kāi)要應(yīng)用特效的網(wǎng)頁(yè)，切換到代碼視圖，將特效代碼插入到指定位置，然后做相應(yīng)的調(diào)試即可?！?〕直接使用文本編輯器。直接用文本編輯器〔如記事本〕翻開(kāi)網(wǎng)頁(yè)文件，將特效代碼插入到指定位置，然后做相應(yīng)的調(diào)試即可。網(wǎng)頁(yè)特效實(shí)例1．圖片逐漸顯現(xiàn)腳本說(shuō)明：第一步：把如下代碼參加<body>區(qū)域中：<SCRIPTFOR=windowEVENT=onLoadLANGUAGE=vbscript> image1.filters.item(0).apply() image1.filters.item(0).transition=12 image1.Style.visibility="" image1.filters(0).play(2.0)</SCRIPT>第二步：把如下代碼參加<body>區(qū)域中：<imgsrc="圖片的URL"id="image1"style="visibility:hidden;FILTER:revealTrans(Duration=4.0,Transition=23);">網(wǎng)頁(yè)特效實(shí)例2．顯示日期和時(shí)鐘腳本說(shuō)明：第一步：把如下代碼參加<body>區(qū)域中<divid="shijian"></div>第二步：把如下代碼參加<body>區(qū)域中：<scripttype="text/javascript">functionshowtime(){

vartoday=newDate();varnian=today.getFullYear();varyue=today.getMonth()+1;varri=today.getDate();varday=today.getDay;varshi=today.getHours();varfen=today.getMinutes();varmiao=today.getSeconds();if(today.getDay()==0)day="星期日";if(today.getDay()==1)day="星期一";if(today.getDay()==2)day="星期二";if(today.getDay()==3)day="星期三";if(today.getDay()==4)day="星期四";

if(today.getDay()==5)day="星期五";if(today.getDay()==6)day="星期六";if(shi<10)shi="0"+shi;if(fen<10)fen="0"+fen;if(miao<10)miao="0"+miao;document.getElementById("shijian").innerHTML="<h2>今天是："+nian+"年"+yue+"月"+ri+"日"+day+"<br>"+"現(xiàn)在時(shí)刻："+shi+":"+fen+":"+miao+"</h2>";setTimeout(showtime,1000);}</script>網(wǎng)頁(yè)特效實(shí)例第三步：在<body>標(biāo)簽內(nèi)參加代碼onload="showtime()"：<bodyonl

溫馨提示

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

評(píng)論

0/150

提交評(píng)論