2.廣州市交通技師學(xué)院網(wǎng)站焦點(diǎn)圖的制作過程

步驟1：啟動(dòng)Axure RP pro 7.0，從元件庫面板中拖放一個(gè)動(dòng)態(tài)面板元件到默認(rèn)的index頁面，設(shè)置動(dòng)態(tài)面板的元件的名稱為gzjtjx，如圖3-6所示。

步驟2：單擊選中g(shù)zjtjx動(dòng)態(tài)面板，在工具欄的位置尺寸輸入框中，輸入面板的高度和寬度（根據(jù)準(zhǔn)備的圖片素材尺寸確定），如圖3-7所示。

步驟3：雙擊gzjtjx動(dòng)態(tài)面板，打開動(dòng)態(tài)面板狀態(tài)管理器，插入四個(gè)狀態(tài)頁面，如圖3-8所示。

步驟4：在打開的動(dòng)態(tài)面板管理器中，鼠標(biāo)雙擊“State1”，進(jìn)入State1的編輯頁面。

步驟5：拖入“image”元件，設(shè)置元件屬性，將準(zhǔn)備好的第一張圖片素材導(dǎo)入；調(diào)整圖像的位置，使其正好放置在動(dòng)態(tài)面板的虛框內(nèi)，如圖3-9所示。

步驟6：插入四個(gè)按鈕形狀元件，寬和高設(shè)置為30，顯示文本分別輸入1、2、3、4，設(shè)置每一個(gè)按鈕形狀的名稱與顯示的數(shù)字一致。

步驟7：設(shè)置按鈕1的樣式，字體顏色為白色，填充顏色為淺藍(lán)色；其他三個(gè)按鈕均設(shè)置為白底黑字；調(diào)整四個(gè)按鈕的位置，如圖3-10所示。

步驟8：為按鈕1添加“鼠標(biāo)移入時(shí)”用例，設(shè)置鼠標(biāo)移入時(shí)，將gzjtjx動(dòng)態(tài)面板的狀態(tài)切換到State1，進(jìn)入動(dòng)畫選擇“向右滑動(dòng)”，時(shí)間間隔輸入500毫秒，如圖3-11所示。

步驟9：為按鈕1添加“鼠標(biāo)移出時(shí)”事件的用例，“選擇狀態(tài)為”下拉框選擇“Next”，選中“向后循環(huán)”和“循環(huán)間隔”兩個(gè)復(fù)選框，間隔輸入1000毫秒，如圖3-12所示。

步驟10：重復(fù)步驟8、步驟9，為其他三個(gè)導(dǎo)航指示按鈕設(shè)置相應(yīng)的事件用例，設(shè)置好之后如圖3-13所示。

步驟11：關(guān)閉State1編輯頁面，重復(fù)步驟4至步驟10，設(shè)置gzjtjx動(dòng)態(tài)面板的其他三個(gè)狀態(tài)，最終效果如圖3-14、3-15、3-16所示。

步驟12：關(guān)閉當(dāng)前狀態(tài)編輯頁面，返回index頁面，在交互面板選中“頁面載入時(shí)”事件，添加“設(shè)置動(dòng)態(tài)面板狀態(tài)”用例，在“選擇狀態(tài)為”下拉框中，選擇“Next”，選中“向后循環(huán)”和“循環(huán)間隔”兩個(gè)復(fù)選框，循環(huán)間隔輸入1000毫秒，如圖3-17所示。

步驟13：從文件菜單中保存項(xiàng)目，按F5快捷鍵預(yù)覽最終效果；頁面啟動(dòng)時(shí)動(dòng)態(tài)面板每秒切換狀態(tài)，實(shí)現(xiàn)預(yù)期效果。