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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論