Axure RP 9萌新修炼手册-第三章-基础应用(6)

AxureRP9教程 小楼一夜听春语 172℃ 0评论

第六节 内联框架

内联框架(简称“框架”)元件的用途是向页面中嵌入内容。

我们可以将这个元件想象为页面中的一个浏览器窗口。

所以,只要能够在浏览器中直接打开的文件(网页、多媒体文件等),都可以通过内联框架嵌入到页面中。

一、嵌入项目页面

百度的个人资料设置页面中,左侧的菜单点击时,右侧的设置内容相应发生改变。(图3-125)

像这样的原型内容,我们就可以结合框架来实现。

案例09:内联框架嵌入页面

在多个页面中分别制作右侧的内容,然后在带有菜单的页面中通过交互设置进行嵌入。

这样做的好处就是菜单内容只需要制作一次,达到重用的效果。并且,点击菜单项时,页面不会刷新,只有框架中的内容会刷新,菜单的交互效果不会受到任何影响。

因为内容太多,这里我们仅以前三个菜单项以及对应的页面为例。

1、我们先完成首页中菜单的制作。(图3-126)

使用到的元件,除了两个图标元件,其他都是矩形元件。

不过,个人设置、个人资料以及隐私设置这三个标题栏的填充颜色都是线性渐变。

选中元件后,填充颜色的设置中切换到【线性】选项卡,分别点击左右两侧的圆形滑块,并输入对应的颜色代码。(图3-127)

2、制作需要嵌入到首页菜单右侧的内容页面。

根据之前我们所学习的关于线框草图绘制的内容,完成以下页面的制作。

基本资料页面:(图3-128)


详细资料页面:(图3-129)

教育背景页面:(图3-130)

3、为每个菜单添加交互样式,以便选中时能够改变颜色。

注意,除了颜色的改变,菜单选中时要去除右侧的边框。(图3-131)

因为菜单中只能有一个菜单项选中变色,所以还需要将所有菜单项设置为相同的选项组。(图3-132)

还有,第一个菜单项是页面打开时就默认选中的,需要勾选属性中的【选中】。(图3-133)

4、为每个菜单项添加【单击时】【设置选中】“当前元件”为【真】的交互事件。(图3-134)


添加完这个交互之后,当点击菜单项时,菜单项会变为选中的状态,从而显示选中时的交互样式。

此时预览原型,点击菜单项已经能够看到相应的效果。

接下来,我们完成页面内容的嵌入,以及点击菜单项切换嵌入页面的交互。

5、在菜单的右侧,放入一个内联框架元件,命名为“Frame”,并进行样式的设置,包括尺寸、隐藏边框、滚动条,以及自定义预览图。(图3-135)

预览图可以使用矩形制作,尺寸与框架相同,然后在上下文菜单中选择【转换为图片】,预览原型,将图片保存到本地,再在样式中导入。(记得做完图片后删除矩形)

添加预览图是为了方便我们编辑原型,图能够看到框架的尺寸、位置;它只会在画布中显示,不会在发布后显示。

6、双击内联框架元件,在【链接属性】的设置界面中,选择链接的目标为第一个内容页面。(图3-136)

通过双击嵌入的页面,在页面打开之后就会在框架中呈现。

7、每个菜单项【单击时】切换嵌入内容的交互。

以第一个菜单项“基本资料”为例。

【单击时】选择在“Frame”【框架中打开链接】,指定嵌入的页面。(图3-137)

完成第一个菜单项的交互之后,我们可以通过复制新增加的交互动作,粘贴到其他菜单项的【单击时】交互事件中,然后更改每个动作中指定的页面。

二、嵌入本地文件

如果我们想在生成的HTML页面中中播放一些本地的媒体文件(例如MP3、MP4、PDF等),可以通过内联框架进行嵌入。

方法比较简单。

1、将文件放入HTML所在的文件夹中(图3-138)。

2、双击内联框架,【链接属性】中选择【链接一个外部的URL或文件】,输入框中填写文件名(包含扩展名)。(图3-139)

实际上填写的文件名是一个相对路径。

注:因为是在生成的HTML中嵌入的本地文件,所以必须生成后,打开HTML文件进行查看,不可通过预览功能进行查看。

如果,想把嵌入的文件放入一个单独的文件夹中,【链接属性】的设置中的文件路径也必须带有文件夹名称,并以斜杠“/”表示层级。

例如,在HTML文件夹中创建名为“MP3”的文件夹保存文件“一剪梅.mp3”,那么,在内联框架的【链接属性】设置中,文件路径就要填写“MP3/一剪梅.mp3”。

三、嵌入在线内容

内联框架除了嵌入本地文件,还可以嵌入在线内容(包括网页与文件)。

嵌入在线内容,只需要将完整的网址(http:://或https://开头)填入【链接属性】的【超链接】中,就能够在框架中打开网页。

例如,在我们的原型页面中嵌入一个优酷视频。

案例10:原型页面中嵌入优酷视频

1、打开优酷视频播放页面,在播放器底部找到视频的分享链接,选择通用代码。(图3-140)

2、 在通用代码中找到“src”属性,将属性值中的视频源链接地址复制,粘贴到框架【链接属性】的【超链接】中即可。(图3-141)

例如:http://player.youku.com/embed/XMzg0MTE2NjAxNg==

完成以上步骤之后,预览原型,就能够自动播放优酷视频。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第三章-基础应用(6)

喜欢 (2)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    内联框架关联到另一个页面的时候,怎么操作使得关联的页面正好适合框架窗口?
    young2019-05-23 13:49 回复