中職網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目五 使用行為添加導(dǎo)航特效電子課件（）_第1頁(yè)
中職網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目五 使用行為添加導(dǎo)航特效電子課件（）_第2頁(yè)
中職網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目五 使用行為添加導(dǎo)航特效電子課件（）_第3頁(yè)
中職網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目五 使用行為添加導(dǎo)航特效電子課件（）_第4頁(yè)
中職網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目五 使用行為添加導(dǎo)航特效電子課件（）_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(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)介

(中職）網(wǎng)頁(yè)制作基礎(chǔ)（DreamweaverCS6）（第2版）項(xiàng)目五使用行為添加導(dǎo)航特效電子課件（工信版）項(xiàng)目五使用行為添加導(dǎo)航特效項(xiàng)目目標(biāo)（1）了解DreamweaverCS6行為的概念；（2）了解DreamweaverCS6行為的創(chuàng)建及應(yīng)用；（3）掌握使用行為創(chuàng)建按鈕、窗口、菜單等導(dǎo)航特效的方法。項(xiàng)目描述

本項(xiàng)目將通過(guò)3個(gè)任務(wù)來(lái)說(shuō)明如何利用DreamweaverCS6的行為來(lái)制作導(dǎo)航的按鈕特效、打開(kāi)瀏覽器窗口及跳轉(zhuǎn)菜單等。任務(wù)1使用Spry效果制作按鈕特效任務(wù)目標(biāo)（1）了解DreamweaverCS6行為的概念；（2）了解DreamweaverCS6的行為面板；（3）了解DreamweaverCS6的內(nèi)置行為；（4）理解Spry特效的種類；（5）掌握使用Spry效果制作按鈕特效的方法。

任務(wù)1使用Spry效果制作按鈕特效任務(wù)描述Spry特效幾乎可以應(yīng)用到HTML頁(yè)面中的任何元素上，使用這些特效可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的放大/縮小、發(fā)光、淡化、高光等。Spry特效的行為主要包括“增大/收縮”“擠壓”“顯示/漸隱”“晃動(dòng)”“滑動(dòng)”“遮簾”“高亮顏色”等。本任務(wù)主要通過(guò)使用Spry效果來(lái)制作導(dǎo)航按鈕特效，介紹行為的概念及行為面板的使用。

任務(wù)1使用Spry效果制作按鈕特效任務(wù)分析

本任務(wù)主要講解使用Spry效果制作按鈕特效的過(guò)程，了解行為的概念，熟悉行為面板的操作，掌握“高亮顏色”的操作方法。

操作步驟步驟1．打開(kāi)素材網(wǎng)頁(yè)文檔，選中需要應(yīng)用行為的對(duì)象。步驟2．設(shè)置“高亮顏色”。（1）選擇“窗口”→“行為”命令，如圖5-3所示，打開(kāi)“行為”面板。（2）選中已創(chuàng)建的“登錄”按鈕，單擊“行為”面板中的“添加行為”按鈕

，在彈出的下拉列表中選擇“效果”→“高亮顏色”選項(xiàng)。（3）彈出“高亮顏色”對(duì)話框，輸入需要的信息，設(shè)置完畢后單擊“確定”按鈕。（4）在事件下拉列表中選擇“onMouseOver”選項(xiàng)，即鼠標(biāo)指針在選中元素上面時(shí)觸發(fā)該事件。操作步驟步驟3．在瀏覽器上進(jìn)行驗(yàn)證操作。（1）單擊，圖標(biāo)或按F12鍵，在瀏覽器中預(yù)覽（2）將鼠標(biāo)指針移動(dòng)到“網(wǎng)絡(luò)推廣”超級(jí)鏈接上方時(shí)即顯示高亮顏色。

配置前配置后步驟4．使用相同的方法為“域名注冊(cè)”“企業(yè)郵局”“聯(lián)系我們”“網(wǎng)站地圖”設(shè)置“高亮顏色”特效。知識(shí)鏈接

行為，是事件及事件所觸發(fā)的動(dòng)作的集合。行為通過(guò)這些動(dòng)作來(lái)實(shí)現(xiàn)用戶與頁(yè)面的交互。行為包含3個(gè)重要的組成部分：對(duì)象、事件與動(dòng)作。1．對(duì)象

對(duì)象是發(fā)生行為的主體，包括圖片、文字、多媒體文件，乃至整個(gè)網(wǎng)絡(luò)。2．事件

事件是觸發(fā)動(dòng)態(tài)效果的條件，是網(wǎng)頁(yè)瀏覽者針對(duì)對(duì)象所做的動(dòng)作。3．動(dòng)作

動(dòng)作是DreamweaverCS6內(nèi)置的、可執(zhí)行的JavaScript代碼，是網(wǎng)頁(yè)最終產(chǎn)生的動(dòng)態(tài)效果。拓展與提高

Spry特效簡(jiǎn)介如下。

增大/收縮：該行為使對(duì)象產(chǎn)生伸展或收縮的效果。

擠壓：該行為使對(duì)象產(chǎn)生不同事件下觸發(fā)的擠壓效果。

顯示/漸隱：該行為使對(duì)象產(chǎn)生逐漸顯示或隱藏的效果。

晃動(dòng)：該行為使對(duì)象產(chǎn)生不同事件下觸發(fā)的晃動(dòng)效果。

滑動(dòng)：該行為使對(duì)象產(chǎn)生不同事件下觸發(fā)的向上滑動(dòng)或向下滑動(dòng)的效果。

遮簾：該行為使對(duì)象產(chǎn)生向上或向下的百葉窗效果。

高亮顏色：該行為使對(duì)象產(chǎn)生不同事件下觸發(fā)不同顏色的高亮效果。試一試

參照本書(shū)素材“素材\項(xiàng)目5\示例\01”文件夾中的素材，新建網(wǎng)頁(yè)文檔，嘗試應(yīng)用“增大/收縮”“擠壓”“顯示/漸隱”“晃動(dòng)”“滑動(dòng)”“遮簾”“高亮顏色”等行為來(lái)體會(huì)Spry特效。任務(wù)2制作打開(kāi)瀏覽器窗口任務(wù)目標(biāo)（1）掌握DreamweaverCS6“行為”面板的操作；（2）能靈活使用不同的內(nèi)置行為；（3）掌握制作打開(kāi)瀏覽器窗口的操作方法。任務(wù)描述

網(wǎng)頁(yè)文件中最常用的JavaScript源代碼是調(diào)節(jié)瀏覽器窗口的代碼，它可以按照要求打開(kāi)新窗口或者編輯瀏覽窗口的名稱、大小、菜單欄、狀態(tài)欄等屬性。使用“打開(kāi)瀏覽器窗口”行為可以打開(kāi)一個(gè)新的瀏覽器窗口，顯示指定的網(wǎng)頁(yè)文檔，同時(shí)可以指定新窗口的相關(guān)屬性。通過(guò)本任務(wù)可以熟悉DreamweaverCS6的“行為”面板及常用內(nèi)置行為。任務(wù)分析

利用“打開(kāi)瀏覽器窗口”行為，在頁(yè)面中制作打開(kāi)窗口。此行為常常用于網(wǎng)頁(yè)訪問(wèn)者單擊縮略圖時(shí)，在一個(gè)單獨(dú)窗口中打開(kāi)一個(gè)較大的圖像；或者用于創(chuàng)建接入網(wǎng)頁(yè)打開(kāi)事件窗口的時(shí)候，如打開(kāi)廣告小窗口等。

操作步驟步驟1．應(yīng)用“打開(kāi)瀏覽器窗口”行為。（1）單擊頁(yè)面中的<body>標(biāo)簽，選擇“窗口”→“行為”命令，打開(kāi)“行為”面板，單擊“添加行為”按鈕

，在彈出的下拉列表中選擇“打開(kāi)瀏覽器窗口”選項(xiàng)。（2）彈出“打開(kāi)瀏覽器窗口”對(duì)話框，單擊“要顯示的URL”文本框右側(cè)的“瀏覽”按鈕。（3）彈出“選擇文件”對(duì)話框，選擇需要的網(wǎng)頁(yè)文檔，單擊“確定”按鈕。（4）設(shè)置新打開(kāi)的“打開(kāi)瀏覽器窗口”的其他屬性，按照需要配置完成后單擊“確定”按鈕。（5）在右側(cè)的“行為”面板中，會(huì)顯示選擇事件“onLoad”和“打開(kāi)瀏覽器窗口”。操作步驟步驟2．在瀏覽器上進(jìn)行驗(yàn)證操作。（1）單擊

圖標(biāo)或按F12鍵在瀏覽器中預(yù)覽。（2）在新打開(kāi)的窗口中，顯示“關(guān)于我們”的頁(yè)面信息。知識(shí)鏈接1．內(nèi)置行為

內(nèi)置行為實(shí)際上就是為網(wǎng)頁(yè)添加了一些基本的JavaScript代碼，方便網(wǎng)頁(yè)設(shè)計(jì)者的操作，使網(wǎng)頁(yè)呈現(xiàn)動(dòng)態(tài)的效果。2．JavaScript事件類型

事件通常用于指定行為動(dòng)作在何種情況下發(fā)生，是瀏覽器響應(yīng)用戶操作的機(jī)制，JavaScript的事件處理功能可改變?yōu)g覽器響應(yīng)這些操作的方式，這樣將使網(wǎng)頁(yè)操作更具交互性。拓展與提高

“調(diào)用JavaScript”動(dòng)作允許用戶使用“行為”面板指定當(dāng)發(fā)生某個(gè)事件時(shí)應(yīng)該執(zhí)行的自定義函數(shù)或JavaScript代碼。彈出“調(diào)用JavaScript”對(duì)話框的操作步驟如下：選擇“窗口”→“行為”命令，打開(kāi)“行為”面板，單擊“添加行為”按鈕

，在彈出的下拉列表中選擇“調(diào)用JavaScript”選項(xiàng)，即可彈出“調(diào)用JavaScript”對(duì)話框。在“JavaScript”文本框中輸入需要執(zhí)行的JavaScript代碼或函數(shù)的名稱即可。試一試

參照本書(shū)素材“素材\項(xiàng)目5\示例\02”文件夾中的素材，新建兩個(gè)網(wǎng)頁(yè)文檔“我的首頁(yè)”“我的彈出頁(yè)面”，使用“行為”面板中的“打開(kāi)瀏覽器窗口”行為制作打開(kāi)窗口。任務(wù)3制作跳轉(zhuǎn)菜單任務(wù)目標(biāo)（1）熟悉JavaScript事件的意義與使用；（2）學(xué)會(huì)使用行為制作跳轉(zhuǎn)菜單的方法。任務(wù)描述

跳轉(zhuǎn)菜單指網(wǎng)頁(yè)文檔中的彈出式菜單，它對(duì)網(wǎng)頁(yè)的瀏覽者是可見(jiàn)的，還能夠顯示連接到的文檔。它可以創(chuàng)建到整個(gè)Web站點(diǎn)內(nèi)文檔的超級(jí)鏈接、到其他Web站點(diǎn)上文檔的超級(jí)鏈接、電子郵件超級(jí)鏈接、圖形的超級(jí)鏈接等，還可以創(chuàng)建到可在瀏覽器中打開(kāi)的任何文件類型的超級(jí)鏈接。在網(wǎng)頁(yè)導(dǎo)航的設(shè)計(jì)與制作中，經(jīng)常會(huì)用到跳轉(zhuǎn)菜單。任務(wù)分析

使用行為可以控制表單元素，如常用的跳轉(zhuǎn)菜單、表單驗(yàn)證等。DreamweaverCS6為用戶提供了跳轉(zhuǎn)菜單的操作。

操作步驟步驟1．在表單中創(chuàng)建跳轉(zhuǎn)菜單。（1）在“行為”面板中，如果準(zhǔn)備制作跳轉(zhuǎn)菜單，則需要先在表單中創(chuàng)建一個(gè)跳轉(zhuǎn)菜單，才可以使用行為。選擇“插入”→“表單”→“跳轉(zhuǎn)菜單”命令，創(chuàng)建跳轉(zhuǎn)菜單。操作步驟（2）彈出“插入跳轉(zhuǎn)菜單”對(duì)話框，在該對(duì)話框中依次輸入“建站套餐”的內(nèi)容，單擊

按鈕繼續(xù)添加，添加完成后單擊“確定”按鈕，跳轉(zhuǎn)菜單創(chuàng)建完畢。操作步驟步驟2．為跳轉(zhuǎn)菜單添加行為。（1）選擇已創(chuàng)建的跳轉(zhuǎn)菜單，選擇“窗口”→“行為”命令，打開(kāi)“行為”面板。（2）單擊“行為”面板中的“添加行為”按鈕

，在彈出的下拉列表中選擇“跳轉(zhuǎn)菜單”選項(xiàng)。（3）彈出“跳轉(zhuǎn)菜單”對(duì)話框，在“菜單項(xiàng)”列表框中選擇“企業(yè)入門”選項(xiàng)，單擊“瀏覽”按鈕，彈出“選擇文件”對(duì)話框，為其添加所需鏈接，配置完成后單擊“確定”按鈕。

使用相同的方法為“大眾展示”“信息展示”“高級(jí)互動(dòng)”“電子商務(wù)”“模板王全能”等菜單項(xiàng)添加指定的超級(jí)鏈接。（4）在事件下拉列表中選擇“onChange”選項(xiàng)，即事件會(huì)在域的內(nèi)容改變時(shí)觸發(fā)。操作步驟步驟3．在瀏覽器上進(jìn)行驗(yàn)證操作。（1）單擊

圖標(biāo)或按F12鍵，在瀏覽器中預(yù)覽。。（2）選擇跳轉(zhuǎn)菜單中的“企業(yè)入門”菜單項(xiàng)，頁(yè)面將跳轉(zhuǎn)到指定的頁(yè)面。在瀏覽器中預(yù)覽跳轉(zhuǎn)頁(yè)面知識(shí)鏈接

“跳轉(zhuǎn)菜單”與“跳轉(zhuǎn)菜單開(kāi)始”動(dòng)作關(guān)系密切，“跳轉(zhuǎn)菜單開(kāi)始”允許訪問(wèn)者將一個(gè)按鈕和一個(gè)跳轉(zhuǎn)菜單關(guān)聯(lián)起來(lái)，當(dāng)單擊按鈕時(shí)，可打開(kāi)在該跳轉(zhuǎn)菜單中選中的超級(jí)鏈接。通常情況下

溫馨提示

  • 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)論