- 准备开始
- 页面操作
- 部件库和 Masters
- 建立交互
- 引入动态面板
- 条件、值和变量
- 从头开始
- 从头构建一个电子商务网站
- 设计一个可以在 iPhone 或者 Android 上展示的原型
- 原型设计基础指南
- 按钮的交互
- 显示隐藏部件
- 用户自定义 Tooltip
- 导航菜单
- Masters 指南
- 触发事件教程之上一页/下一页链接 master
- 动态面板指南
- 图片循环显示
- 制作用户自定义的下拉菜单
- 折叠控制
- 选项板部件
- 视频与图片的 Lightbox
- 图像的拖拽交互
- 拖拽地图使用嵌套的动态面板和 OnDrag
- 自动旋转标题
- 高级原型设计指南
- 条件逻辑:账户登录教程
- Auto-Tab 字段
- Terms 和 Conditions
- 下拉列表选择
- 必填字段
- 设置文本下拉列表选择教程
- 将文本传递给下一个页面
- 在下一个页面上设置面板教程
- Web 设计指南
- 嵌入视频和地图
- iPhone App 指南
- 滑动菜单
- 滚动内容
- 屏幕过渡动画
- Swipping 幻灯片
- Repeater 部件指南
- Repeater 小部件
- 自适应视图指南
- 自适应视图
嵌入视频和地图
关于内联框架(浮动框架、页内框架,内嵌框架)
内联框架(inline frames)可以用来为你的原型添加任意外部 HTML 内容,但他们用于嵌入外站视频(例如 YouTube、Vimeo 等)或者在线地图(例如谷歌地图)时显得特别有用。其中最难的地方也不过是如何从这些外站获取目标 URL 而已。一个嵌入式视频和地图的示例工程可以在 AxureWebsite.zip 内找到,双击内联框架就能看见其目标 URL。
常用的内联框架嵌入式媒体
嵌入式视频
大多数像 Vimeo、YouTube 这类的视频托管服务都会允许你通过他们提供的嵌入码(embed code)来将视频放在您的网页上。您可以将那些嵌入码内的 URL 放进内联框架小部件中,将其嵌入原型内。
嵌入式地图
你可以通过内联框架小部件将谷歌地图直接被嵌入到您的网页原型中。在谷歌地图界面中,点击页面底部的齿轮图标,选择“分享并嵌入地图”选项,切换到“嵌入地图”选项,然后将嵌入码复制下来,提取里面的 URL 并将其载入到内联框架小部件中。
详细逐步示例
去目标视频或者地图的地址
首先,打开 AxureWebsite.zip 里面的 Website-InlineFrame.rp,然后打开 Build Your Own 页面。
访问你想要嵌入到原型中的目标视频或者地图站点。
点击“分享”或者“超链接”
为了得到 iframe 嵌入码,你需要先找到并点击相应的分享/嵌入码/超链接按钮。例如在谷歌地图中,那个按钮是一个超链接图标。
复制 iframe 嵌入码
您也许还需要点击多一些按钮(例如在上图中的 “Embed”)来获得代码。你所需要的代码应以 <iframe
开头,找到整段代码并复制下来。
删除所有代码,只留下 URL
回到 Axure 并且双击在设计区域中的内联框架小部件。点击 Link to an external URL or file(链接到外部 URL 或文件)的单选框,然后粘贴之前复制下来的代码。
然后,删除所有的代码,除了 URL,URL 通常就在 src=
语句的右边。请确保您的 URL 带着 http://
前缀,看上图了解正确情况下的样子。
总结
在你的内联框架里使用正确的 URL 是至关重要的!寻找 iframe 标记,截取 src=
右边的 URL,然后走起!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论