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

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

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

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

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

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

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

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

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

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

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

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

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

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