《網頁設計與制作》課件-項目十一 任務一 利用行為制作網頁動態(tài)效果_第1頁
《網頁設計與制作》課件-項目十一 任務一 利用行為制作網頁動態(tài)效果_第2頁
《網頁設計與制作》課件-項目十一 任務一 利用行為制作網頁動態(tài)效果_第3頁
《網頁設計與制作》課件-項目十一 任務一 利用行為制作網頁動態(tài)效果_第4頁
《網頁設計與制作》課件-項目十一 任務一 利用行為制作網頁動態(tài)效果_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目十一為首頁添加動態(tài)效果

核心技術

了解JavaScript代碼的概念及作用

掌握常見的行為在網頁中的應用

掌握常見的、簡單一些的JavaScript代碼在頁面中的使用

任務目標

任務一：利用行為制作頁面動態(tài)效果

任務二：利用源代碼制作特效網頁能力目標

JavaScript簡介

添加Dreamweaver提供的行為效果

添加一些常見的、公開的JavaScript代碼項目背景在一般僅使用HTML語言的網頁中，由于缺乏動態(tài)效果和交互性，從而帶給用戶的體驗感總是有所欠缺。要加強這種用戶體驗，使用JavaScript（簡稱JS）是一種很好的解決辦法。JS是一種基于瀏覽器的腳本語言，編寫十分方便，能夠提供大量的動態(tài)效果并加強交互性，但是對于一般用戶而言，編寫規(guī)范的、有效的JavaScript代碼比較麻煩。針對這個問題，Dreamweaver直接將一些常用的JS效果集成起來，成為行為，通過直接添加行為，可以在網頁中添加各種效果。對于Dreamweaver中沒有集成的行為，用戶也可以直接使用代碼添加到網頁中，豐富網頁的功能。項目分析在Dreamweaver中行為是用來動態(tài)響應用戶操作、改變當前頁面效果或執(zhí)行特定任務的一種方法。行為是由事件和動作構成的。例如，當用戶把鼠標移動至對象（稱為事件）上時，這個對象會發(fā)生預定義的變化（稱為動作）。事件是為大多數瀏覽器理解的通用代碼，瀏覽器通過釋譯來執(zhí)行動作。一個事件可以觸發(fā)許多動作，用戶可以定義它們執(zhí)行的順序。利用Dreamweaver中的行為，無須書寫代碼，就可以實現豐富的動態(tài)頁面效果，達到用戶與頁面交互的目的。Dreamweaver不可能集成用戶需要的所有行為，故用戶還可以根據自己需要將JavaScript代碼插入到網頁的相應位置，豐富網頁的功能，達到更好的交互。項目目標通過網頁行為的添加和網頁JavaScript代碼的直接添加，對于通過JavaScript代碼加強網頁的交互性和動態(tài)效果有比較清晰的認識。能熟練添加一些常用的行為，能將一些常見的JavaScript代碼添加到網頁中。行為的添加中主要應注意行為對象的選擇及事件的選擇。添加JavaScript代碼時特別要注意JavaScript代碼是區(qū)分大小寫的。任務一

利用行為制作網頁動態(tài)效果任務描述為構建好的“育才學校網站”中的“學校首頁”網頁設置一些行為，使首頁具有一些簡單的動態(tài)效果。本任務將為首頁添加四種行為效果，分別為在打開和關閉頁面時，顯示彈出信息的行為；當鼠標移動到網頁元素上方時，該網頁元素產生晃動的行為；當鼠標移動到圖片上時，圖片產生更換的行為；當鼠標移動到頁面元素上時，該頁面元素背景色發(fā)生改變的行為。知識準備1．Dreamweaver的常用行為（1）交換圖像:通過更改

img

標簽的

src

屬性將一個圖像和另一個圖像進行交換。（2）彈出消息：在頁面上顯示一個信息對話框，給用戶一個提示信息。使用此動作可以提供信息，而不能為用戶提供選擇。（3）恢復交換圖像：將最后一組交換的圖像恢復為它們以前的源文件。（4）打開瀏覽器窗口：使用“打開瀏覽器窗口”動作在一個新的窗口中打開

URL，可以指定新窗口的屬性。（5）拖動AP元素：“拖動AP元素”動作允許訪問者拖動層。使用此動作可以創(chuàng)建拼板游戲、滑塊控件和其他可移動的界面元素。

（6）改變屬性：這個行為允許用戶動態(tài)地改變對象屬性，圖像的大小、層的背景色等。需要注意的是，這個行為的設置取決于瀏覽器的支持。（7）效果：對于一些指定元素添加一些變形的動態(tài)效果。（8）時間軸：可以根據需要添加一些時間軸動態(tài)效果，如浮動廣告等。（9）顯示/隱藏層：顯示/隱藏或恢復一個或多個層的默認可見性。此動作用于在用戶與頁進行交互時顯示信息。（10）檢查插件：有時制作的頁面需要某些插件的支持，如使用Flash制作的網頁，所以有必要對用戶瀏覽器的插件進行檢查，看它是否安裝了指定的插件。應用這個行為就可以實現這一工作。（11）檢查表單：檢查指定文本域的內容以確保用戶輸入了正確的數據類型。（12）設置文本：可以設置容器、文本域、框架、狀態(tài)欄的文本（13）調用JavaScript：這個行為允許當某些事件被觸發(fā)時，調用相應的JavaScript腳本，以實現相應的動作。（14）跳轉菜單：該行為主要用于編輯跳轉菜單。跳轉菜單是文件中的彈出菜單，對站點訪問者可見，并列出鏈接到文件或文件的選項。（15）設置導航欄圖像：設置網站導航欄的圖像。（16）跳轉到URL：可以指定當前瀏覽器窗口或者框架窗口載入指定的頁面。（17）預先載入圖像：“預先載入圖像”動作會使圖像載入瀏覽器緩存中。這樣可防止當圖像應該出現時由于下載而導致的延遲。2．Dreamweaver的常用事件（1）onload（裝入一個文件）：當瀏覽器完成裝入一個窗口或一個幀集合中所有的幀時產生該事件。（2）onunload（退出一個文件）：當Web頁面退出時引發(fā)該事件。（3）onmousedown（按下鼠標）：當按下鼠標的一個鍵時發(fā)生該事件。（4）onmousemove（鼠標移動）：當鼠標移動時發(fā)生該事件。（5）onmouseover（鼠標懸停）：當鼠標懸停在一個界面對象時發(fā)生該事件。（6）onmouseout（鼠標滑出界面對象）：當鼠標滑出一個界面對象時發(fā)生該事件。（7）onclick（單擊一個對象）：當用戶單擊鼠標按鍵時產生該事件。（8）onfocus（獲得焦點）：當表單對象中的文本輸入框對象、文本輸入區(qū)對象或者選擇框對象獲得焦點時引發(fā)該事件。可通過用鼠標單擊或用鍵盤的“Tab”鍵使一個對象得到焦點。（9）onblur（失去焦點）：當表單對象中的文本輸入框對象、文本輸入區(qū)對象或者選擇框對象不再擁有焦點時引發(fā)該事件。任務實施圖11.1.2打開和關閉頁面時，顯示彈出信息行為的實現步驟1：選擇頁面元素。因為是打開和關閉頁面時產生的效果，故一定要先選擇<body>標簽，如圖11.1.1所示。步驟2：選擇行為單擊窗口菜單的“行為”選項卡，在Dreamweaver的右側打開“行為”面板。這時“行為”面板中所選擇的標簽應該提示為<body>，如果這時標簽提示為其他內容，則表示是對其他的網頁元素進行行為操作，請重新選擇頁面元素后再操作，如圖11.1.2所示。圖11.1.1將構建好的“育才學校網站”導入站點，打開“11_1/index.html”文件。圖11.1.1步驟3：設置行為。單擊“+”按鈕，在相應的下拉菜單中添加彈出信息的效果，如圖11.1.3所示圖11.1.3添加打開頁面時的彈出信息步驟4：查看效果。保存頁面并刷新，或者重新打開“11_1/index.html”文件，將可以看到打開頁面時會彈出信息，如圖11.1.4所示。步驟5：設置關閉頁面時的彈出信息。設置關閉頁面時的彈出信息可以參照打開頁面時的彈出信息的相應設置。不過要注意一個問題，即設置彈出信息事件的激活事件為“onUnload”，如圖11.1.5所示圖11.1.4打開頁面時的彈出信息效果

圖11.1.5設置彈出信息事件的激活事件步驟1：選擇頁面元素。選擇“校園明星”中楊麗的圖片，然后選擇<img>標簽，如圖11.1.6所示。步驟2：選擇并設置行為。這時“行為”面板中所選擇的標簽應該提示為<img>，添加“效果”→“晃動”行為，然后單擊“確定”按鈕。此時如存盤并刷新頁面是看不到效果的。因為此時該行為的激活事件默認為“onClick”，即鼠標單擊時有效，應該將其設置為“onMouseOver”，即鼠標移動到圖片上有效，如圖11.1.7所示。鼠標移動到網頁元素上方時，該網頁元素產生晃動的行為本行為的效果是將鼠標移動到圖片上，圖片產生晃動的效果，鼠標移開后，圖片恢復正常。步驟3：查看效果。保存頁面并刷新，或者重新打開“11_1/index.html”文件，將鼠標移動到楊麗的圖片上可以看到圖片晃動的效果。圖11.1.7步驟1：選擇頁面元素。選擇“在線報名”圖片。步驟2：選擇并設置行為。這時“行為”面板中所選擇的標簽應該提示為<img>，添加“交換圖像”行為，按圖11.1.8進行設置。當鼠標移動到圖片上時，圖片產生更換的行為本行為的效果是將鼠標移動到“在線報名”圖片上時，圖片更換為“成績查詢”圖片，鼠標移開后，圖片恢復正常。圖11.1.8設置交換圖像的行為圖11.1.8中，圖像列表框中選擇的元素保持默認，不要更改。設置“設定原始檔為”為圖中所示的相應文件，然后單擊“確定”即可。步驟3：查看效果。保存頁面并刷新，或者重新打開“11_1/index.html”文件，將鼠標移動到“在線報名”圖片上并移開可以看到相應效果，如圖11.1.9和圖11.1.10所示。圖11.1.9交換圖像前的效果圖11.1.10交換圖像后的效果步驟1：選擇頁面元素。選擇ID值為“nav_content”的<div>標簽，如圖11.1.11所示。步驟2：選擇并設置行為。這時“行為”面板中所選擇的標簽應該提示為<div>，添加“改變屬性”行為，按圖11.1.12進行設置。當鼠標移動到頁面元素上時，該頁面元素背景色發(fā)生改變的行為本行為的效果是將鼠標移動到“校園明星”區(qū)域楊麗的附近時，則該區(qū)域的背景色將變成灰色，鼠標移開后背景色恢復正常。

圖11.1.11圖11.1.12設置改變屬性的行為此時，再次進行測試，即可看到最終效果。但鼠標移開后背景色還是灰色，沒有還原為白色。為此，還應該添加一個“改變屬性”的行為，如圖11.1.13所示，并將其激活事件改為“onMouseOut”，如圖11.1.14所示步驟3：查看效果。保存頁面并刷新，或者重新打開“11_1/index.html”文件，將鼠標移動到“校園之星”區(qū)域可以看到背景色變化的效果。圖11.1.13設置改變屬性的背景色為白色的行為圖11.1.14設置改變屬性行為的激活事件圖11.1.13設置改變屬性的背景色為白色的行為知識拓展1．靜態(tài)網頁擴展名一般為.htm或.html。網頁中僅使用.HTML語言。頁面元素的定位一般使用表格及CSS+Div技術。不使用數據庫技術，沒有服務器和瀏覽器的交互。一般來說，常見的網頁采用以下幾種類型或技術。2．動態(tài)網頁擴展名不僅為.htm或.html，更多地為.asp、.php或者.jsp等。網頁中，在瀏覽器端為編譯后的HTML語言，服務器端為各種網絡編程語言。頁面元素的定位一般使用表格及CSS+Div技術，但是還可以使用JavaScript等腳本進行動態(tài)控制，Dreamweaver的行為中

溫馨提示

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

評論

0/150

提交評論