??想为网页制作出Tabpage页效果,我们可以使用axure8,在此教程中就为大伙带来了使用axure8为网页制作出Tabpage页效果的具体操作流程介绍。
??1、新建工程,在元件库中找:矩形元件,拖放到工作区。然后按照下图所示,按照顺序对元件进行:变形,旋转:
![](http://mydown-img2.yesky.com/news/201811/f63aed156b118e312387a5600c8acef4.png)
??2、设置元件大小,并在选中元件后右键,将元件转换为动态面板:详细见下图
![](http://mydown-img2.yesky.com/news/201811/f15f6af21ac7eb894ceb51927fe975d1.png)
??3、按照图示,对元件进行命名,状态命名操作,名称分别为 tab1、选中
![](http://mydown-img2.yesky.com/news/201811/496c071da5845aabdadf1bd7a53e727c.png)
??4、进入选中状态后,添加一个文本,设置为:tab1,然后选中状态,右键进行“复制状态”操作:
![](http://mydown-img2.yesky.com/news/201811/cc12b8ffa3446af1f5eba63d5c606513.png)
??5、复制状态后,对选中状态进行文字、背景的设置,如下图
![](http://mydown-img2.yesky.com/news/201811/8b2abf637f3a334c6b29ee1fd5431124.png)
??6、复制三个“tab1”元件,并分别改变文字为:tab1/tab2/tab3,并命名,且将tab2/tab3的选中状态置后:
![](http://mydown-img2.yesky.com/news/201811/2fcc15e532998e447ad15bd73ab61094.png)
??7、再添加一个动态面板,置于选项卡的下方,在状态1中添加一个图像元件,并添加图像。元件命名为:tabpage,然后复制状态两份,总计三份:
![](http://mydown-img2.yesky.com/news/201811/e70a912571fbd9e105e3eb1c0b3e5417.jpg)
![](http://mydown-img2.yesky.com/news/201811/e89015a648fa3508e268e916072e4f4e.jpg)
??8、点击选项卡1,在属性中添加:鼠标单击时,交互事件:
![](http://mydown-img2.yesky.com/news/201811/7dfb4ac2dcc2dabd33ee171704478e83.jpg)
??9、根据图示,设置tab1/tab2/tab3的交互事件,添加思路:点击tab1设置 tab1状态为选中,其他为非选中,设置tabpage为页面1,依次类推,进行设置:
![](http://mydown-img2.yesky.com/news/201811/52f3b33aa0e2afd2fda78615a6f6cc0d.png)
![](http://mydown-img2.yesky.com/news/201811/9bf51bf93729ec8ff1669e1e999c9901.png)
![](http://mydown-img2.yesky.com/news/201811/1d29454ef633c28d34c4e9516e18f07a.png)
??10、预览效果:
![](http://mydown-img2.yesky.com/news/201811/ac8fdcce72e101f6f40302479e21670a.jpg)
??看完了上文讲述的使用axure8为网页制作出Tabpage页效果的具体操作流程介绍,你们也赶快去试试吧!