關(guān)于內(nèi)聯(lián)框架（浮動框架、頁內(nèi)框架，內(nèi)嵌框架）

內(nèi)聯(lián)框架（inline frames）可以用來為你的原型添加任意外部 HTML 內(nèi)容，但他們用于嵌入外站視頻（例如 YouTube、Vimeo 等）或者在線地圖（例如谷歌地圖）時顯得特別有用。其中最難的地方也不過是如何從這些外站獲取目標(biāo) URL 而已。一個嵌入式視頻和地圖的示例工程可以在 AxureWebsite.zip 內(nèi)找到，雙擊內(nèi)聯(lián)框架就能看見其目標(biāo) URL。

常用的內(nèi)聯(lián)框架嵌入式媒體

嵌入式視頻

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-1.png" alt="" />

大多數(shù)像 Vimeo、YouTube 這類的視頻托管服務(wù)都會允許你通過他們提供的嵌入碼（embed code）來將視頻放在您的網(wǎng)頁上。您可以將那些嵌入碼內(nèi)的 URL 放進(jìn)內(nèi)聯(lián)框架小部件中，將其嵌入原型內(nèi)。

嵌入式地圖

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-2.png" alt="" />

你可以通過內(nèi)聯(lián)框架小部件將谷歌地圖直接被嵌入到您的網(wǎng)頁原型中。在谷歌地圖界面中，點(diǎn)擊頁面底部的齒輪圖標(biāo)，選擇“分享并嵌入地圖”選項(xiàng)，切換到“嵌入地圖”選項(xiàng)，然后將嵌入碼復(fù)制下來，提取里面的 URL 并將其載入到內(nèi)聯(lián)框架小部件中。

詳細(xì)逐步示例

去目標(biāo)視頻或者地圖的地址

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-3.png" alt="" />

首先，打開 AxureWebsite.zip 里面的 Website-InlineFrame.rp，然后打開 Build Your Own 頁面。

訪問你想要嵌入到原型中的目標(biāo)視頻或者地圖站點(diǎn)。

點(diǎn)擊“分享”或者“超鏈接”

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-4.png" alt="" />

為了得到 iframe 嵌入碼，你需要先找到并點(diǎn)擊相應(yīng)的分享/嵌入碼/超鏈接按鈕。例如在谷歌地圖中，那個按鈕是一個超鏈接圖標(biāo)。

復(fù)制 iframe 嵌入碼

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-5.png" alt="" />

您也許還需要點(diǎn)擊多一些按鈕（例如在上圖中的 “Embed”）來獲得代碼。你所需要的代碼應(yīng)以 <iframe 開頭，找到整段代碼并復(fù)制下來。

刪除所有代碼，只留下 URL

http://wiki.jikexueyuan.com/project/axure/images/web-design-tutorials-embed-video-and-maps-6.png" alt="" />

回到 Axure 并且雙擊在設(shè)計(jì)區(qū)域中的內(nèi)聯(lián)框架小部件。點(diǎn)擊 Link to an external URL or file（鏈接到外部 URL 或文件）的單選框，然后粘貼之前復(fù)制下來的代碼。

然后，刪除所有的代碼，除了 URL，URL 通常就在 src= 語句的右邊。請確保您的 URL 帶著 http:// 前綴，看上圖了解正確情況下的樣子。

總結(jié)

在你的內(nèi)聯(lián)框架里使用正確的 URL 是至關(guān)重要的！尋找 iframe 標(biāo)記，截取 src= 右邊的 URL，然后走起！