一般Web后台都包含导航栏，且导航栏会出现每个页面中，因此导航栏可以做成Axure母版，从而方便地在各个页面直接复用。另外，每个页面中的内容显示区域基本也是固定位置，这部分内容显示区域可以用到Axure的内联框架。今天这篇就主要写一下如何使用axure的母版和内联框架搭建web后台基本框架，即：点击导航菜单按钮，按钮将处于选中状态，并且当前窗口将显示与按钮相对应的内容，里面有很多小tips，会加粗表示(*^_^*)，如果大家有更好的方法欢迎分享哦~

按照惯例，首先上效果图啦（哈哈，开门见山，不感兴趣就不用往下看啦），如下：

下面开始详细步骤：

1.创建母版：点击母版masters右侧的“+”号，创建一个母版，这里命名为：menu，如下图所示:

2.为母版添加内容与交互：

  (1)添加导航栏背景：在母版menu中拖入一个矩形，并按照需要填充背景颜色与设置矩形高度。问题来了，这里没有提到矩形宽度，那宽度该如何设置呢？一般来说，网页中导航栏背景的宽度都是铺满浏览器的，在Axure里如何达到这个效果呢？方法很简单啦：为矩形背景添加onload（加载时）事件，事件动作为：set size->width:[[Windows.width]],即加载时设置矩形背景框宽度为windows系统宽度。具体设置如下图所示：

（2）添加导航按钮：在导航栏背景框上根据需要放置logo图片与导航按钮，这里用占位符与text简单表示，如下图所示：

首先为了保证logo在导航栏背景框上的位置正确，这里需要将logo占位符转换为动态面板（这里注意：必须要转换成动态面板哦，因为动态面板才有固定到浏览器的功能呢~），然后右键选择“pin to brower”(固定到浏览器)，具体设置如下：

接下来为导航按钮设置mouseover（鼠标移入）和selected（选中）样式，这里简单设置为字体变色并添加下划线，并且设置第一个导航按钮（这里为page1）为默认选中状态，如下图所示：

（3）添加内联框架并关联内容页面：在母版menu中的导航菜单下面添加inline frame（内联框架）部件，同导航背景框，这里为内联框架添加onload事件，事件动作为：set size->width:[[Windows.width]],这样内联框架的宽度将为铺满浏览器的效果。

接下来在pages中创建与导航按钮相同数目（这里为3）的页面并添加内容，三个页面与三个导航按钮具有一一对应关系（这里页面page1对应导航按钮page1,以此类推），如下图所示：

设置内联框架默认关联页面为page1页面，也即：第一个导航按钮对应的页面，如下图所示：

（4）为导航按钮设置交互（画重点啦：关键的步骤哦）：首先为导航按钮添加onclick（鼠标点击）事件，以page1为例，事件动作为：在内联框架中打开page1页面，并设置其为选中状态，如下图所示：

同理为其他导航按钮添加鼠标点击事件。到这里为止，将母版内容添加到空白页面并锁定母版位置，进行预览后可以看到能够出现点击导航按钮并显示相应页面内容的效果，但是有个问题：鼠标点击过后，导航按钮即变为选中状态，当三个按钮都点击过后，所有按钮均变为选中状态，即无法保证只有与当前内联框架显示页面相对应的导航按钮处于选中状态。解决方法如下：选中三个按钮，为其设置selection group选项组，这样将保证有且只能有一个导航按钮处于选中状态，如下图所示：

同logo占位符，为了使导航按钮在导航栏背景框上的位置正确，需选中三个导航按钮将其转换为动态面板，然后右键选择“pin to brower”(固定到浏览器)，具体设置如下：

到此所有步骤都已完成，Web后台基本框架搭建完毕，将menu母版添加到空白页面中（直接拖入页面中即可，注意要设置为锁定位置哦~，如下图所示），进行预览即可看到最开始动图所示效果啦~

小结：通过母版与内联框架相结合，Web后台（不止web后台，其他网站或app原型有类似需求的都可以用~）原型制作效率会有很大提升哦。

（手动尴尬）写完发现，其实不是必须在母版中做这些步骤，直接在空白页面中做这些操作步骤也可以。哈哈哈，标题就不改啦！