計(jì)算機(jī)網(wǎng)絡(luò)與網(wǎng)頁制作PPT課件

1、計(jì)算機(jī)網(wǎng)絡(luò)與網(wǎng)頁制作Chapter 18：用行為增加頁面的互動(dòng)復(fù)旦大學(xué)計(jì)算機(jī)學(xué)院肖川1目標(biāo)行為的含義為網(wǎng)頁對(duì)象添加動(dòng)作選擇觸發(fā)動(dòng)作的事件使用行為增加頁面的交互性在頁面內(nèi)創(chuàng)建可拖-放的對(duì)象2效果31. 什么是行為？行為 = 事件 + 動(dòng)作“行為”面板4行為的本質(zhì)行為是由事件觸發(fā)的動(dòng)作；事件是用戶的某個(gè)操作，如打開頁面、單擊鼠標(biāo)、移動(dòng)鼠標(biāo)等；動(dòng)作是用JavaScript語言編寫的函數(shù)，它具有某項(xiàng)功能，如顯示-隱藏頁面元素、彈出信息等；行為的本質(zhì)是建立事件與動(dòng)作的關(guān)聯(lián)，使得瀏覽器捕獲到這個(gè)事件時(shí)自動(dòng)觸發(fā)指定的動(dòng)作。52.為超鏈接添加“顯示-隱藏元素”動(dòng)作添加鏈接繪制AP Div后選擇菜單 插入圖像6

2、重復(fù)繪制AP Div并層疊phone1phone6 AP Div分別插入圖像層疊7為數(shù)字鏈接“1”添加動(dòng)作8設(shè)置將引發(fā)這個(gè)動(dòng)作的事件只顯示phone1 AP Div，其他Div則隱藏9為數(shù)字鏈接26添加類似的行為事件：onMouseOver動(dòng)作：隱藏-顯示元素每個(gè)鏈接要顯示或隱藏的AP Div是不同的10設(shè)置圖片的初始顯示狀態(tài)只顯示phone1 AP Div，其他Div則隱藏onLoad表示頁面在瀏覽器中剛打開時(shí)11預(yù)覽頁面的初始狀態(tài)123.用“拖動(dòng)AP元素”動(dòng)作創(chuàng)建一個(gè)匹配游戲游戲描述頁面中有四種不同型號(hào)的手機(jī)圖像排成一行，第二行是四個(gè)空白的方框，每個(gè)方框內(nèi)用文字顯示上述四種手機(jī)之一的型號(hào)。

3、瀏覽者可以用鼠標(biāo)拖動(dòng)一個(gè)手機(jī)圖像至某個(gè)方框內(nèi)，如果方框內(nèi)的文字正好是手機(jī)的型號(hào)，則彈出信息窗口告知瀏覽者匹配正確，否則不會(huì)彈出消息窗。13繪制四個(gè)AP Div面板 插入布局 (標(biāo)準(zhǔn))繪制AP Div 四個(gè)AP Div的標(biāo)識(shí)依次為answer14，寬度70px，高度110px14添加類CSS規(guī)則.answer面板 CSS樣式新建CSS規(guī)則15把.answer規(guī)則作用于四個(gè)AP Div在每個(gè)AP Div的“屬性”面板內(nèi)的“類”下拉列表中選擇“answer”16給每個(gè)AP Div添加手機(jī)型號(hào)文本17在第一排繪制四個(gè)AP Div四個(gè)AP Div的標(biāo)識(shí)依次為phone14，寬度65px，高度105px。無需對(duì)齊。面板 插入布局 (標(biāo)準(zhǔn))繪制AP Div 18往第一排的AP Div內(nèi)插入圖像定位光標(biāo)于AP Div內(nèi)，菜單 插入圖像19將phone1 拖至answer1內(nèi)可以選中phone1 AP Div，再敲擊方向鍵（上、下、左、右）來微調(diào)此phone1 AP Div的位置20為標(biāo)簽添加行為21添加針對(duì)phone24 AP Div的行為事件：onLoad動(dòng)作：拖動(dòng)AP元素此時(shí)這四個(gè)AP Div位于正確的位置上22錯(cuò)開phone AP Div