《電子商務(wù)網(wǎng)頁設(shè)計（第二版）》 課件項目九_第1頁
《電子商務(wù)網(wǎng)頁設(shè)計（第二版）》 課件項目九_第2頁
《電子商務(wù)網(wǎng)頁設(shè)計（第二版）》 課件項目九_第3頁
《電子商務(wù)網(wǎng)頁設(shè)計（第二版）》 課件項目九_第4頁
《電子商務(wù)網(wǎng)頁設(shè)計（第二版）》 課件項目九_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

content電子商務(wù)網(wǎng)頁賞析商品圖片的使用與編輯15目錄HTML網(wǎng)頁制作基礎(chǔ)2電子商務(wù)網(wǎng)頁編輯軟件Dreamweaver20203網(wǎng)頁元素的編輯4表格與DIV的使用HTML5與響應(yīng)式網(wǎng)頁設(shè)計610使用CSS控制頁面元素7使用Animate制作網(wǎng)頁中的動畫8

使用JavaScript制作動態(tài)效果9設(shè)計與制作電子商務(wù)網(wǎng)店結(jié)構(gòu)項目11使用JavaScript制作動態(tài)效果9任務(wù)一Dreamweaver內(nèi)置行為的網(wǎng)頁特效任務(wù)二使用JavaScript制作網(wǎng)頁以實現(xiàn)互動

JavaScript是一種基于對象和事件驅(qū)動,并具有相對安全性的客戶端腳本語言,通過使用它控制網(wǎng)頁中的各種元素,實現(xiàn)各種動態(tài)網(wǎng)頁特效,達到美化頁面的效果。例如我們?yōu)g覽網(wǎng)頁時經(jīng)常看到的導(dǎo)航菜單、浮動的廣告窗口、隨著鼠標(biāo)位置的變化而變換的圖片、單擊一個按鈕時彈出的提示框等,在網(wǎng)頁設(shè)計中都可以使用JavaScript來實現(xiàn)這些效果。

本項目將帶領(lǐng)大家學(xué)會如何使用JavaScript制作動態(tài)效果來美化電子商務(wù)網(wǎng)頁,達到自己喜歡的效果。項目介紹Contents目錄任務(wù)分析1相關(guān)知識2任務(wù)實施3任務(wù)一

Dreamweaver內(nèi)置行為的網(wǎng)頁特效任務(wù)分析1

通過使用一些內(nèi)置行為,可以簡單有效地制作出一些動態(tài)效果。我們在淘寶上看到過很多商品展示圖片在鼠標(biāo)經(jīng)過時能顯示商品的詳圖，在本任務(wù)中我們將學(xué)習(xí)通過Dreamweaver內(nèi)置行為來完成我們鼠標(biāo)經(jīng)過圖層的顯示與隱藏，并掌握用內(nèi)置行為制作網(wǎng)頁特效。03040201事件行為使用Dreamweaver的內(nèi)置行為動作相關(guān)知識2

1.行為行為是用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。行為是由事件和動作構(gòu)成。例如，當(dāng)用戶把鼠標(biāo)移動至對象上（稱：事件），這個對象會發(fā)生預(yù)定義的變化（稱：動作）。事件是為大多數(shù)瀏覽器理解的通用代碼，瀏覽器通過釋譯來執(zhí)行動作。一個事件也可以觸發(fā)許多動作，你可以定義它們執(zhí)行的順序。在dreamweaver中有多種事件與動作，如圖9-1所示，其中英文字母的是事件，中文的是動作。相關(guān)知識03040201

1.行為相關(guān)知識03040201圖9-1行為面板2.事件onload（裝入一個文檔）：當(dāng)瀏覽器完成裝入一個窗口或一個幀集合中所有的幀時，產(chǎn)生該事件。onunload（退出一個文檔）：當(dāng)Web頁面退出時引發(fā)該事件。onsubmit（提交一個表單對象）：在完成信息輸入，準(zhǔn)備將信息提交給服務(wù)器處理時發(fā)生該事件。onReset（重置一個表單對象）：當(dāng)一個表單對象被提交以及被重置時，觸發(fā)該事件。onmousedown（按下鼠標(biāo)）：當(dāng)按下鼠標(biāo)上一個鍵時，發(fā)生該事件。onmousemove（鼠標(biāo)移動）：鼠標(biāo)移動的時候發(fā)生該事件。onmouseover（鼠標(biāo)懸停）：鼠標(biāo)懸停在一個界面對象時發(fā)生該事件。相關(guān)知識030402012.事件onmouseout（鼠標(biāo)滑出界面對象）：當(dāng)鼠標(biāo)滑出一個界面對象時，發(fā)生該事件。onmouseup（釋放鼠標(biāo)上一個鍵）：釋放鼠標(biāo)上一個鍵時發(fā)生該事件。onclick（單擊一個對象）：當(dāng)用戶單擊鼠標(biāo)按鈕時，產(chǎn)生該事件。onfocus（獲得焦點）：當(dāng)表單對象中的文本輸入框?qū)ο?、文本輸入?yún)^(qū)對象或者選擇框?qū)ο螳@得焦點時，引發(fā)該事件。可通過用鼠標(biāo)單擊或用鍵盤的Tab鍵使一個對象得到焦點。onblur（失去焦點）：當(dāng)表單對象中的文本輸入框?qū)ο?、文本輸入?yún)^(qū)對象或者選擇框?qū)ο蟛辉贀碛薪裹c時，引發(fā)該事件。onchange（改變事件）：當(dāng)利用文本框或多行文本框輸入字符值改變時發(fā)生該事件，同時當(dāng)在列表項中一個選項狀態(tài)改變后也會引發(fā)該事件。onselect（選中事件）：當(dāng)文本框或多行文本框?qū)ο笾械奈淖直患恿梁?，引發(fā)該事件相關(guān)知識030402013.動作（1）調(diào)用JavaScript：這個行為允許你設(shè)置當(dāng)某些事件被觸發(fā)時，調(diào)用相應(yīng)的JavaScript腳本，以實現(xiàn)相應(yīng)的動作。（2）改變屬性：這個行為允許你動態(tài)地改變對象屬性，比如圖像的大小、層的背景色等等。需要注意的是，這個行為的設(shè)置取決于瀏覽器的支持。（3）檢查瀏覽器：不同瀏覽器的支持能力有一定的差異，利用這個行為，我們可以檢查瀏覽器的版本，以跳轉(zhuǎn)到不同的頁面。（4）檢查插件：有時候我們制作的頁面需要某些插件的支持，比如使用Flash制作的網(wǎng)頁，所以有必要對用戶瀏覽器的插件進行檢查，看看它是否安裝了指定的插件。應(yīng)用這個行為就可以實現(xiàn)。（5）跳轉(zhuǎn)到URL：你可以制定當(dāng)前瀏覽器窗口或者指定的框架窗口載入指定的頁面。（6）跳轉(zhuǎn)菜單：該行為主要是用于編輯跳轉(zhuǎn)菜單。跳轉(zhuǎn)菜單是文檔中的彈出菜單，對站點訪問者可見，并列出鏈接到文檔或文件的選項。相關(guān)知識030402013.動作（7）打開瀏覽器窗口：使用“打開瀏覽器窗口”動作在一個新的窗口中打開URL。您可以指定新窗口的屬性。（8）彈出消息：在頁面上顯示一個信息對話框，給用戶一個提示信息。使用此動作可以提供信息，而不能為用戶提供選擇。（9）預(yù)先載入圖像：“預(yù)先載入圖像”動作會使圖像載入瀏覽器緩存中。這樣可防止當(dāng)圖像應(yīng)該出現(xiàn)時由于下載而導(dǎo)致延遲。(10)設(shè)置框架文本：該行為允許您動態(tài)設(shè)置框架的文本。（11）顯示－隱藏元素：顯示、隱藏或恢復(fù)一個或多個元素的默認(rèn)可見性。此動作用于在用戶與頁進行交互時顯示信息。（12）交換圖像:通過更改img標(biāo)簽的src屬性將一個圖像和另一個圖像進行交換。（13）檢查表單：檢查指定文本域的內(nèi)容以確保用戶輸入了正確的數(shù)據(jù)類型。相關(guān)知識030402014.使用Dreamweaver的內(nèi)置行為Dreamweaver的行為是將內(nèi)置的JavaScript代碼放置在文檔中,以實現(xiàn)Web頁的動態(tài)效果?！靶袨椤笨刂泼姘迨窃诖翱诓藛蜗?選擇“行為”項目顯示出來的。（1）在編輯文檔窗口中選擇一個元素,例如一個圖像或一個鏈接,也可選擇整個文檔的內(nèi)容,只要點擊文檔窗口左下側(cè)的標(biāo)簽選擇器的<body>標(biāo)簽。（2）選擇“窗口”→“行為”命令,如圖9—2所示。啟用“行為控制面板”,如圖9—3所示。相關(guān)知識03040201相關(guān)知識圖9—3行為面板圖9—2窗口菜單欄

4.使用Dreamweaver的內(nèi)置行為（3）單擊“添加行為”按鈕,從彈出的菜單中選擇“彈出信息”,如圖9—4所示,在彈出的對話框中設(shè)置該動作的參數(shù),如圖10—5所示。會彈出包含全部事件的事件列表,如圖9—6所示,用戶可根據(jù)需要選擇相應(yīng)的事件。這里我們選擇“onClick”事件。（4）按F12鍵瀏覽網(wǎng)頁效果,點擊相應(yīng)的元素,彈出一個對話框,如圖9—9所示。相關(guān)知識03040201相關(guān)知識圖9—4設(shè)置內(nèi)容項

圖9—5彈出信息設(shè)置圖9—6事件設(shè)置圖9—7效果3任務(wù)實施打開站點下的index.html文件，在BODY的狀態(tài)下選擇菜單欄“插入”→“DIV”,新建一個層。在彈出的插入DIV對話框中單擊“新建CSS規(guī)則”按鈕。12圖9-8新建規(guī)則對話框3在新建規(guī)則對話框的選擇器名稱中輸入新建類名“hddiv”,單擊“確定”按鈕，如圖9-8所示。3任務(wù)實施在.hddiv的CSS規(guī)則定義對話框中，選擇方框分類，設(shè)置寬度width為560，高度為400；在定位分類中設(shè)置位置position為absolute,設(shè)置Z-index為99，設(shè)置placement組中top為346px，right為160，設(shè)置在背景分類的背景顏色background-color為red(背景顏色這里的設(shè)置是測試和觀察用的，在后期在層中添加圖片之后可能刪除背景顏色的設(shè)置)單擊“確定”按鈕返回dreamweaver主界面，如圖9-9所示。4圖9-9規(guī)則定義對話框3任務(wù)實施在網(wǎng)頁里我們就一個新層出現(xiàn)在圖層之上，按F12在瀏覽器預(yù)覽，使新層能覆蓋“商品詳情”的內(nèi)容，如圖9-10所示。5圖9-10新建層效果3任務(wù)實施刪除層中多余的文字，單擊菜單欄“插入”→“image”,在對話框中選擇商品一樣的大圖，預(yù)覽如圖9-11所示。6圖9-11插入圖像3任務(wù)實施在狀態(tài)欄上單擊DIV層，在屬性面板中CSS-P元素中輸入層名稱newdiv，在可見性中選擇hidden，刪除背景顏色的red，如圖9-12所示。按F12在瀏覽器預(yù)覽時新建層就不會顯示，下面再進行行為設(shè)置當(dāng)鼠標(biāo)在商品圖片上時就顯示新建層，當(dāng)鼠標(biāo)移出商品圖片時就隱藏。7圖10-12屬性面板3任務(wù)實施單擊商品圖片，在行為面板中選擇下面的“顯示-隱藏元素”，如圖9-13所示。8圖9-13行為面板3任務(wù)實施在彈出的顯示-隱藏對話框中選擇新建層“divnewdiv”，單擊顯示，再單擊“確定”按鈕，如圖9-14所示。9圖9-14顯示-隱藏元素對話框3任務(wù)實施返回行為面板設(shè)置事件為“onMouseOver”，使鼠標(biāo)在圖片上時就顯示新建層，如圖9-15所示。10圖9-15事件設(shè)置3任務(wù)實施根據(jù)上面的方法在商品圖片上再設(shè)置“onMouseOut”事件，動作是隱藏新建層，如圖9-16所示，完成操作再按F12在瀏覽器中瀏覽行為效果。11圖9-16完成圖

小思考如何用JavaScript內(nèi)置行為創(chuàng)建跳轉(zhuǎn)菜單?提示:1.在文檔中插入表單“選擇(列表/菜單)”對象。2.在“行為”面板添加“跳轉(zhuǎn)菜單”對話框。3.根據(jù)需要選擇相應(yīng)的事件。Contents目錄任務(wù)分析1任務(wù)實施3任務(wù)二使用JavaScript制作網(wǎng)頁以實現(xiàn)互動相關(guān)知識2在本任務(wù)中我們將學(xué)習(xí)用JavaScript制作網(wǎng)頁,通過JavaScript實現(xiàn)數(shù)量增減與統(tǒng)計反饋，與消費者實現(xiàn)互動。任務(wù)分析1

了解JavaScriptJavaScript的基本結(jié)構(gòu)相關(guān)知識2了解JavaScript相關(guān)知識2JavaScript是為適應(yīng)動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言。如今隨著電子商務(wù)網(wǎng)站的發(fā)展,客戶要求越來越高,JavaScript在網(wǎng)頁制作方面被廣泛應(yīng)用起來。JavaScript是Netscape公司開發(fā)的一種腳本語言(ScriptingLanguage),或稱為描述語言。JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間有了一種實時性、動態(tài)性、交互性的關(guān)系,可使網(wǎng)頁包括更多活躍的元素和更加精彩的內(nèi)容。了解JavaScript相關(guān)知識2JavaScript具有以下一些基本特點:(1)解釋性。JavaScript不同于一些編譯性的程序語言,它是一種解釋性的程序語言,它的源代碼不需要經(jīng)過編譯,而直接在瀏覽器運行時被解釋。(2)動態(tài)性。JavaScript是動態(tài)的,它可以直接對用戶或客戶端輸入做出響應(yīng),無須經(jīng)過Web服務(wù)程序。(3)跨平臺性。JavaScript依賴于瀏覽器本身,與操作環(huán)境無關(guān),只要能運行瀏覽器的計算機,并有支持JavaScript的瀏覽器就可以執(zhí)行。(4)安全性。JavaScript是一種安全性語言,只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互,有效地防止丟失數(shù)據(jù)。JavaScript的基本結(jié)構(gòu)相關(guān)知識2JavaScript程序是根據(jù)HTML文件中出現(xiàn)的順序來逐行執(zhí)行。整個HTML文件中都可以嵌入JavaScript,但最好放在HTML文件中的<head>和</head>之間。以下是一個JavaScript應(yīng)用的實例:在網(wǎng)頁上插入一幅圖片,給圖片設(shè)置的行為是:當(dāng)鼠標(biāo)指向圖片時,彈出信息框,即“onMouseOver”事件,引發(fā)彈出信息框的動作,如圖10—1所示。4321文字滾動特效.漂浮廣告特效.制作日期特效.實現(xiàn)鼠標(biāo)經(jīng)過圖片時的變換相關(guān)知識2知識鏈接

JavaScript常用語法:(1)創(chuàng)建腳本塊語法如下:

<scriptlanguage="JavaScript"></script>(2)輸出到瀏覽器語法如下:document.write("<strong>Hello</strong>");(3)定義變量語法如下:Vari;或vari="字符串";(4)定義函數(shù)語法如下:<scriptlanguage=”JavaScript”>function函數(shù)名(函數(shù)值){內(nèi)容}</script>(5)頁面跳轉(zhuǎn)語法如下:<scriptlanguage="JavaScript">window.location="URL地址";</script>(6)語句塊語法如下:if(條件成立){執(zhí)行語句;}else{執(zhí)行語句);}3任務(wù)實施打開站點下的index.html文件，在表單數(shù)字后面修改表格。先單擊屬性面板“拆分單元格為行或為列”按鈕拆分為兩列，調(diào)整列的位置，再將后面的單元拆分為兩行，如圖9-18所示。1圖9-18拆分圖3任務(wù)實施在拆分單元格的第一行中選擇菜單欄“插入”→“表單”→“按鈕”，插入按鈕后在屬性面板設(shè)置按鈕的value值為“+”，表示添加命令，如圖10-18所示。2圖9-19屬性面板3任務(wù)實施在拆分單元格的第二列，按上面的方法再插入一個value值為“-”的按鈕，如圖10-20所示。3圖9-20添加按鈕圖3任務(wù)實施單擊CSS設(shè)計器面板的選擇器前的“+”，添加一個名為.btncss的CSS類，設(shè)置width為24，height為18，邊框中width為1px，style為solid，color為#9a9a9a，如圖9-21所示。4圖9-21CSS設(shè)計器面板3任務(wù)實施單擊第一個“+”按鈕，在屬性面板的class中選擇新建的.btncss類，將新建的.btncss應(yīng)用到按鈕上，如圖9-22所示。5圖9-22屬性面板3任務(wù)實施按上面的方法將CSS再應(yīng)用到第二個按鈕，再調(diào)整新增第一行與第二行單元格屬性面中垂直對齊方式，使兩個按鈕能貼合在一起，如圖9-23所示。6圖9-23效果圖3任務(wù)實施單擊“代碼”視圖，進入JavaScript編寫。78在<head>與</head>之間輸入如下JavaScript代碼<scripttype="text/javascript"> functionchangenum(num) { varch=document.getElementById("number"); ch.value=parseInt(ch.value)+num; if(ch.value<1) { alert("數(shù)量不能少于1"); ch.value=1; } } </script>提示：dreamweaver提供代碼提示，如果提示第一個內(nèi)容是您需要的代碼直接按Enter可將內(nèi)容輸入到網(wǎng)頁中，也可以用簡寫快速定位語句后按Enter填充。3任務(wù)實施8在“+”號按鈕的定義標(biāo)簽后面加上onClick

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論