第一步：在設(shè)計區(qū)域中添加三個一級標(biāo)題部件，分別將其文本內(nèi)容設(shè)置為cat、dog、fox，然后添加一個【動態(tài)面板】部件到設(shè)計區(qū)域，給動態(tài)面板命名為pets，將準(zhǔn)備好的三張動物圖像填充到三個動態(tài)面板狀態(tài)中，并且將動態(tài)面板狀態(tài)與其中的圖像對應(yīng)，分別命名為cat、dog、fox（注意：這一步一定不可忽略，否則這個效果將無法正常執(zhí)行），見圖92。

（圖92）

第二步：選中標(biāo)題cat，在右側(cè)的部件【屬性】面板中，雙擊【鼠標(biāo)點擊時】事件，在彈出的【用例編輯器】對話框中設(shè)置用例名稱為【設(shè)置value為cat】，添加【設(shè)置面板狀態(tài)】動作，然后在右側(cè)的【配置動作】中勾選pets動態(tài)面板，在選擇狀態(tài)下拉列表中選擇【Value】，見圖93。點擊【fx】（見圖93-5），在彈出的【編輯值】對話框中單擊【添加局部變量】，在中間的下拉列表中選擇【部件文字】，在右側(cè)的下拉列表中選擇【This】（也就是當(dāng)前所選中的標(biāo)題部件），見圖94。繼續(xù)單擊【插入變量或函數(shù)…】，在下拉列表中選擇我們剛剛添加的局部變量【LVAR1】，見圖95。插入變量后如圖96，單擊【確定】按鈕關(guān)閉【編輯值】對話框，再次單擊【確定】按鈕關(guān)閉【用例編輯器】。

第三步：按照上一步的過程給標(biāo)題dog和fox添加【鼠標(biāo)單擊時】事件。

第四步：在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。

（圖93）

（圖94）

（圖95）

（圖96）

內(nèi)聯(lián)框架

使用內(nèi)聯(lián)框架，可以嵌入視頻、地圖和HTML文件到原型設(shè)計中。外部的HTML文件、視頻、地圖等內(nèi)容都可以嵌入到內(nèi)聯(lián)框架中。對于視頻和地圖，選擇鏈接到外部url；鏈接到本地已經(jīng)存在的HTML文件，內(nèi)聯(lián)框架要鏈接到本地文件路徑，見圖97。

（圖97）

編輯內(nèi)聯(lián)框架指定目標(biāo)網(wǎng)址或視頻地址：拖放內(nèi)聯(lián)框架部件到網(wǎng)站設(shè)計區(qū)域中，雙擊內(nèi)聯(lián)框架，在彈出的對話框中指定哪些內(nèi)容要在內(nèi)聯(lián)框架中顯示?？蛇x擇內(nèi)部頁面或者任何站外url，見圖97。

隱藏邊框：右鍵點擊內(nèi)聯(lián)框架，在彈出菜單中勾選【切換邊框可見性】可切換顯示內(nèi)聯(lián)框架周圍的黑色邊框，見圖98。

顯示滾動條：要隱藏或按需顯示內(nèi)聯(lián)框架的滾動條，可以右鍵點擊內(nèi)聯(lián)框架，選擇【滾動條】，或者在部件【屬性】面板中設(shè)置滾動條。滾動條可以按需要顯示（當(dāng)內(nèi)聯(lián)框架中嵌入的內(nèi)容大小超過內(nèi)聯(lián)框架大小時才顯示），也可以總是顯示，見圖99。

（圖98）

（圖99）

內(nèi)聯(lián)框架預(yù)覽圖像：你可以給內(nèi)聯(lián)框架添加Axure 內(nèi)置的預(yù)覽圖像，如視頻、地圖，也可以自定義預(yù)覽圖像。注意，預(yù)覽圖像僅在設(shè)計區(qū)域中顯示，讓我們清楚該部件顯示的是什么內(nèi)容，但不會在生成的原型中顯示，見圖100。

（圖100）

內(nèi)聯(lián)框架的局限性

樣式：內(nèi)聯(lián)框架的樣式被限定為切換顯示邊框和滾動條，如果想添加其他樣式，請在內(nèi)聯(lián)框架下面添加一個矩形部件，然后調(diào)整矩形部件的樣式即可。

導(dǎo)航和傳遞變量：內(nèi)聯(lián)框架不能用來制作導(dǎo)航，也不能通過父頁面?zhèn)鬟f變量和設(shè)置動態(tài)面板狀態(tài)。你可以使用含有內(nèi)容的動態(tài)面板來替代內(nèi)聯(lián)框架，實現(xiàn)內(nèi)容滾動效果。