《AxureRP9网站与App原型设计》教学教案—06用Axure母版减少重复工作.docx

第6章用Axure母版减少重复工作

课时内容用Axure母版减少重复工作
课时

教学目标
掌握母版功能、3种拖放行为，学会蓝月亮导航菜单母版设计

教学重点母版功能、3种拖放行为
教学难点母版功能、3种拖放行为

教学设计
1 .教学思路：通过实例引入母版的概念；通过多媒体演示和实机操讲解母版功能；通 过实战熟悉利用母版设计导航菜单的方法。
2 .教学手段：多媒体+计算机.教学资料：教材、多媒体课件
教学内容
Axure母版的使用是为了减少重复的工作，在原型设计过程中，往往会设计很多重复的页面内 容，包括页面的首部、版权信息、导航菜单。这就加大很多工作量，而通过母版，在母版里面只需 要进行一次设计，其他页面可以直接使用母版的内容，并且在母版里修改内容，可以实现所有引用 母版的页面同时更新，也不需要到每个页面里单独修改内容。
用母版设计页面重复出现的内容
6.1母版功能介名
Axure的母版能够重复制作原型某个类似的功能，实现母版制作一次，其他页面进行复用的效E百页

E百页
回公司介留
■版权信息
西背曷图
200
修改背景色
6.2.3拖放行为为从母版脱离
从母版脱离：这种拖放行为会使页面引用的母版与原母版失去联系，页面引用的母版元件 可以像一般元件一样进行编辑，常用于创立具有自定义元件的组合。
实战演练
（1）在母版区域里新建一个“导航菜单”母版，进入到此母版里，拖曳5个“矩形1”元件到 工作区域作为5个菜单，将其宽度均设置为100,高度均设置为40,分别重命名为“首页”“公司 介绍”“新闻中心”“招贤纳士”“联系我们”。
巴 会 1Q 国口口
回苜贝国公司介培
国新闻中心回招贤纳士彳
E联系我的I首页公司介绍新闻中心招贤纳士联系我们
望［I II
QH D 累
叫 画版权信息 国―— — I
导航菜单母版
（2）将制作完的“导航菜单”母版，引用到“联系我们”页面里，需要在“导航菜单”母版上, 右键单击，在弹出的快捷菜单中，选择“新增页面”选项，在弹出的“添加母版到页面中”对话框 里设置将母版引用到“联系我们”页面里。
X赤加母版到页面中添加［。帆章华］到以下页・：
■ 诩 ・不法 中子重中子R
□ 回首B
□ 回公耽M8
□ 回新他00 口 回省"士 | g 回 n |（»■
・）幢定为母版中的位置
O海定新的位*
□苣于底层 Aia
□页面中不包含此卷版时才RM加.
说明：此建作无法E.
取消
母版引用到页面里
(3)进入到“联系我们”页面里，可以看到引用的导航菜单内容，默认引用的母版内容是锁定、 不能移动的。如果想修改此母版内容，需要将引用的母版内容变为一般元件，右键单击引用的母版 内容，在弹出的快捷菜单中勾选“脱离母版”选项。
概要
回首页
目公司介蛤
回新苗中心
回招贤纳土
国版权信息
四背昌图
国导航菜单
7Ctt
联系会＜]X与39X
0
B 口
设置从母版脱离拖放行为

页面内容没有更新
6.3实战
蓝月亮导航菜单母版设计

(4)导航菜单从母版脱离后，导航菜单变为普通元件，可以随意地移动和放置，与母版没有任 何关系，即使修改“导航菜单”母版内容，“联系我们”页面内容也不跟着变化的。进入到“导航 菜单”母版，复制一个导航菜单，将文本内容命名为“留言本”，回到“联系我们”页面里可以看 到，页面内容并没有更新。
页H我要QB C3
回苜煲日公司介绍
国新闻中心回招士
国联泵的出版
QB D同版权信息
国首昱图国导航菜单
元件一旦与母版脱离关系，就变为普通的元件，这种方式常用于页面局部区域与母版不同，但 绝大局部与母版一致的情况。这时就可以先引用母版，再脱离母版，最后自定义元件。
母版的3种拖放行为，即任何位置的拖放行为、锁定到母版中位置的行为、从母版脱离的拖放 行为，前两种拖放行为会跟着母版的修改而发生变化，而最后一种从母版脱离后就不会随着母版的 修改而发生变化。可以根据具体场合来选择3种拖放行为。
在前面的章节中，学习了母版功能的使用、制作母版的2种方式以及母版的3种拖放行为,Axure 的母版区域是一个经常被用到的功能，它可以减少设计原型的工作量，提高工作效率，解决重复制 作原型某个类似功能耗时耗力的问题。下面通过设计蓝月亮导航菜单母版，来看看母版在实际工程 中是如何使用的。

蓝月亮门户

在页面区域的实例里，我们规划过它的栏目结构，它有6个一级导航菜单，包括首页、走进蓝 月亮、清洁之家、科学洗涤、人力资源、联系我们。
首页、清洁之家、科学洗涤下没有二级菜单，走进蓝月亮下面有3个二级菜单：关于我们、企 业文化、社会责任。鼠标悬浮在哪个菜单上面，那个菜单项就会变为选中状态。这是这个二级菜单 需要使用一个垂直菜单元件，并且需要为其添加交互样式：当鼠标悬浮在上面的时候，变为选中状 态。

走进蓝月亮二级菜单

人力资源一级导航菜单下面有5个二级菜单，包括用人理念、社会招聘、校园招聘、培训开展、 员工福利。

人力资源二级菜单
联系我们一级导航菜单下面有4个二级菜单，包括公司总部信息、各地办事处、订单物流查询、
供应商注册。
联系我们二级菜单

6.3.1导航菜单母版布局设计
（1）在母版区域新建一个母版，将其命名为“导航菜单母版”，翻开“导航菜单母版”，拖曳6 个文本标签元件到工作区域，将其文本内容分别命名为“首页” “走进蓝月亮”“清洁之家”“科学洗 涤”“人力资源”“联系我们”，文本元件也分别命名为“首页” “走进蓝月亮”“清洁之家”“科学洗 涤”“人力资源”“联系我们”。字体颜色为黑灰色（#555555）,字号为16号，字体加粗。坐标位置 分别为首页（286, 48）、走进蓝月亮（374, 48）、清洁之家（511, 48）、科学洗涤（631, 48）、人 力资源（752, 48）、联系我们（872, 48）。
钱要
300
400
首页
走进越月亮
清洁之彖
人力资源
联系我们
导航菜单内容
（2）制作选中菜单项背景，拖曳一个“矩形1”元件到工作区域，将其宽度设置为107,高度 设置为107,边框设置为无，填充颜色为蓝色（#03328D）,置于底层，元件命名为“背景”，作为 导航菜单被选中时的背景图。
页BI
国首页
目走迸演先
回清洁之家
坦版
量导航菜单母版
概要
B 口
柠《泡8单母豚x
科学洗涤人力资源
联系我们
I
图6.33菜单背景
（4）设计走进蓝月亮二级菜单，拖曳一个“矩形1”元件到工作区域，将其坐标位置设为（0,111）, 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色（#F3FAFE）,去掉矩形边框线；再拖 曳3个文本元件，分别命名为“关于我们”“企业文化”“社会责任”，作为二级菜单；再拖曳两 个竖线，作为二级菜单的分隔符。

□ 口
关于我们I企业文化I社会责任
4
7Cft
走进蓝月亮二级菜单
（5）把走进蓝月亮二级菜单全部选中，然后右键单击，在弹出的快捷菜单中选择“组合”选项, 把走进蓝月亮二级菜单组合命名为“走进蓝月亮二级菜单”，这样方便对走进蓝月亮二级菜单的显 示与隐藏控制。
（6）设计人力资源二级菜单，拖曳一个“矩形1”元件到工作区域，将其坐标位置设为（0,111）, 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色（#F3FAFE）,去掉矩形边框线；再拖 曳5个“文本标签”元件到工作区域，将其分别命名为“用人理念”“社会招聘”“校园招聘”“培 训开展”“员工福利”作为二级菜单；再拖曳4个“竖线”元件到工作区域，将其作为二级菜单的 分隔符。
1300 I400500 I000700।800।9001000走进蓝月亮滔洁之家科学洗涤人力资源联系我＜0
用人理念I社会招聘I校园招聘I培训开展 I员工福利人力资源二级菜单
（7）把人力资源二级菜单全部选中，然后右键单击，在弹出的快捷菜单中选择“组合”选项， 把人力资源二级菜单组合命名为“人力资源二级菜单”，这样方便对人力资源二级菜单的显示与隐 藏控制。
（8）设计联系我们二级菜单，拖曳一个“矩形1”元件到工作区域，将其坐标位置（0,111）, 宽度1191,高度137,背景颜色设置为浅蓝色（#F3FAFE）,去掉矩形边框线；再拖曳3个“文本 标签”元件到工作区域，将其分别命名“关于我们”“企业文化”“社会责任”，作为二级菜单； 再拖曳两个“竖线”元件，作为二级菜单的分隔符。
领他单号B X I 页面概要2t100200300- -500600700800900
□ Q °回百页走进越月亮清洛之家科处条人力资源联系我们
望□ 口
导航菜单田需关于我们I企业文化I社会责任
羽 联系我们二级菜单
（8）把联系我们二级菜单全部选中，然后右键单击，在弹出的快捷菜单中选择“组合”选项， 把联系我们二级菜单组合命名为“联系我们二级菜单”，这样方便对联系我们二级菜单的显示与隐 藏控制。
（9）分别右键单击走进蓝月亮二级菜单、人力资源二级菜单以及联系我们二级菜单，在弹出的
快捷菜单中设置其为隐藏状态。

二级菜单设为隐藏
6.3.2网站LOGO和版权信息母版布局设计
蓝月亮门户网站的LOGO、页尾信息都可以设计成母版，每个页面都会用到这些内容，这样只 需要在母版设计一次，其他页面可以直接使用相关内容，这样就可以极大地减少工作量。
(1)制作网站LOGO的母版，在导航菜单母版里拖曳一个“图片”元件到工作区域，用“log。” 图片替换图片元件，坐标位置为(108,37) o400

400
走进蓝月亮
画导航菜单里版
渣

网站LOGO
因为一个母版只能设置一种拖放行为像导航菜单母版，它的拖放行为设置为锁定到母版中的位 置的拖放行为，而页尾信息母版，它的拖放行为设置为任何位置的拖放行为，因为页面的内容不确 定，所以页尾信息的高度也是不确定的，它可以放置在任何位置。所以接下来需要单独设计页尾信 息母版。
(3)在母版区域新建一个“页尾信息母版”，翻开“页尾信息母版”，拖曳一个“图片”元件 到尾部信息母版工作区域，用网站“尾部信息”图片替换图片元件，尾部信息坐标位置为(0,250) oj&a ««
QS 0
目首页
回走遐筮月亮
13 0注，：t
出版 E) D 国单今板 页尾信且咫版

j&a ««
QS 0
目首页
回走遐筮月亮
13 0注，：t
出版 E) D 国单今板 页尾信且咫版
Q+ (3> ：
Default
基本元杵^
□

页尾信息母版
(4)把“导航菜单母版"母版引用到页面上，在“导航菜单母版”上右键单击，在弹出的快捷
菜单中，单击“新增页面”选项，弹出“添加母版到页面中”对话框，因为各个页面都需要导航菜 单，需要选中所有页面，这时全选按钮就会非常实用，单击全选按钮选中所有页面。
A上日 »=ai R* ftn, 1 的 ^H}fGnO"n4- _ A s ira PP Q Taarr* CHilirvn 口
X添加母版到页面中x
X Cut
© Copy
□ Paste
口口口 !(=
添加［导航菜单母版］到以下页面:
渭全选 三不选 ，选中子项 三取消选中子项
共享
□ 目苜页

□ 目苜页
蹦：

面同
概要
□ 目走进盛月亮
400
匕 门联数我们
产
|@母版中的百
O指定新的位置
□置于底层
Q
国导航菜单母版
画雄信息母版
说明：此操作无法撤销。
□页面中不包含此母版时才能添加.
将导航菜单母版引用到页面
(5)把页尾信息母版也引用到页面上，在页尾信息母版上右键单击，在弹出的快捷菜单中选择 “新增页面”选项，弹出“添加母版到页面中”对话框，单击全选按钮，选中所有页面。
文件(…陶楫(…祺
X Cut
。Copy
0 Past®
图片
a首页
修)导航菜单母板
页尾信身母版
7tn
Default
基本元件,
共享
+
页尾信息母版引用到页面
X m 、几、I
0
r- 口口口 ：c L..J L.
24d词
客服邮
这样就可以把导航菜单母版和页尾信息母版引用到页面里，就不需要在每一个页面重新设计内
容，防止重复制作内容，大大提高工作效率。
6.3.3导航菜单母版交互设计
(1)首页、清洁之家、科学洗涤是没有二级菜单的，单击这3个菜单时其背景为选中状态，文 字颜色为白色；走进蓝月亮、人力资源、联系我们这3个菜单是有二级菜单的，单击这3个菜单口寸 其背景为选中状态，文字颜色为白色，同时显示相应的二级菜单。
(2)当翻开某个页面时，首页会呈现为选中状态，出现蓝色背景和白色文字，这时就需要添加 页面载入时触发事件，显示菜单被选中时的背景，在“添加动作”面板中选择“移动”，“组织动 作”面板中是指到达位置(249,4),勾选“首页”复选项，在设置动作面板的设置为下拉列表中选 择“富文本”，即文字通过富文本的方式设置为白色。

>;交互编辑器住报物E
翻开蜷接 关闭窗口 隹架中翻开槌接 潦动到元件
TtWSOft 显示传藏 设道回板状态设式图片 eae中 设吉列表话中项 启用噤用
移动 财 iaa尺寸 置于丽底£ 设查不透明 获取隹点▼页面转入时 显示田 显示有男
移动
昔M到达（249.4）
设置文本 百页为■•首页~

▼页面转入时 显示田 显示有男
移动
昔M到达（249.4）
设置文本 百页为■•首页~
页面载入时触发事件
（3）给首页导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖在首 页导航上面，为其添加鼠标单击时触发事件，菜单背景移动到达位置（249,4）,显示菜单项选择中背景, 通过富文本来设置首页导航文字为白色，其他导航菜单文字为黑色（#555555）,隐藏二级菜单。
链接动作
翻开共
关闭窗口
框架中翻开链接
濠NJ到元件
元件动作
显示停箴
▼单击时
移动
背鼠到达（249.4）
昱示胸 显示背祟
设置文本
首更为"首页-
目标
iSSlffl板状态
设置图片
设置列表选中项
启用原用
设百文本
走进强月壳为“走进5s月壳”
粉。为之家“
M费源为“人力费索
除我们为“KM我们“
移动
££55 迨置尺寸
顶层/底层
设置不透明
获取筐点
珍藏走进盒月光二级菜单
卷奇人力资源二at菜单
年藏联系我们二级菜单
x交互编辑器取消
首页导航单击事件
（4）给走进蓝月亮导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆 盖在走进蓝月亮导航上面，为其鼠标单击时触发事件，将菜单背景移动到达位置（361,4）,显示菜 单项选择中背景，通过富文本的设置走进蓝月亮导航文字为白色，其他导航菜单文字为黑色（#555555）, 显示走进蓝月亮二级菜单，隐藏其他二级菜单。
>;交互编辑器
g添力丽。+添DEWT
链接动作
翻开链接
关闭窗口
框柒中翻开链接
覆动到元件 元件功作
i£S面板状态
设置图片
设置选中
鳍列越中项
启用朦用
移动
旋转
设置尺寸
室,M
设置不逶明
我取焦点
一加
▼单击时
移动
背屏到达(361.4)
显示值意
砺首昱
设置文本
走进蔻月亮为“走讲离月充“
设置文本
首页为“首页”
清酒之家为“清酒之家“ 科学洗濠为“科学我*
人力资懑为“人力资源” 联系我们为“联M我们”
显示/除藏
显示走进蓝月完二级菜单
显示M
域S人力资源二®菜华
隆•藏联系我们二级菜单
目样
走进蜜月先
富文本
编辑文本
取消走进蓝月亮导航单击事件
(5)为清洁之家导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在清洁之家导航上面，为其鼠标单击时触发事件，将菜单背景移动到达位置(490,4)，显示菜单项选择 中背景，在通过富文本的设置清洁之家导航文字为白色，其他导航菜单文字为黑色(#555555),隐 藏所有二级菜单。
》：交互编辑器2活加事件夕 考*t
链频作
翻开链接
关闭窗口
框架中打
涛动?玩件
元件动作
S^^Sc
设置面板状态
i£SS?$：
设置图片
金直选中
设置列表选中项
启用朦用
移动
螭
设置尺寸
设置不逶明
我取焦点

2活加事件夕 考*t
链频作
翻开链接
关闭窗口
框架中打
涛动?玩件
元件动作
S^^Sc
设置面板状态
i£SS?$：
设置图片
金直选中
设置列表选中项
启用朦用
移动
螭
设置尺寸
设置不逶明
我取焦点
幽砧
▼单击时
移动
背M到达(490.4)
显示描i
显示背星
设造文本
粉之家为
设敢本
首页为“首页“
走进盒月光为“走进盒月壳“
科学涵为“科学洗涤” 人力资源为“人力资常
联系我们为“联系我们“
面SKM我6匚甄单 隋藏人力资源二单
除荻走进盖月亮二a菜单目标
清洁之家
富文本
值
家辑文本

目标
清洁之家
富文本
值
家辑文本
清洁之家导航单击事件
(6)给科学洗涤导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在科学洗涤导航上面，添加鼠标单击时触发事件，将菜单背景移动到达位置(610,4),显示菜单项选择 中背景，通过富文本的设置科学洗涤导航文字为白色，其他导航菜单文字为黑色(#555555),隐藏 所有二级菜单。
X交互编辑器
55JEW*夕*■添mswt
链接功作
翻开链接 口
框架中翻开链接
元件动作
S5^a
设置面板状态
设置图片
设置选中
设置列表选中项
启用燎用
移动
SEl$
设置尺寸
置于顶层/底层
设置不逶明
获取焦点
▼单击时
移动
背景到达（610.4）
果示/网
显示背聂
设置文本
科学洗涤为“科学洗濠”
设首文本
苜贝为“苜贝”
走迸朝壳为“走进区月光'
清洁之家为“清洁之家” 人力资源为“人力资源”
联系我们为“联系我们”
显示/院慈
" 月菜单
窥MS^zzai菜单 券就联系我们二级菜单
目标
科学洗涤
设查为
富文本
值
编辑文本
▼单击时
移动
背星到达（731.4）
靖示胸
显示背星
设看文本
人力将惠为11人力资源”一
设省文本
苜员为“苜贝“
走进幽克为“走进蓝月壳 清洁之家为“清洁之家” 科学洗浴为降俘洗滞
联装我们为“联茎我们“
显示田t
除藏走迸至月光二^单 显示人力覆源二膜®
除薄联系我们
职肖

职肖
确定科学洗涤导航单击事件
（7）为人力资源导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在人力资源导航上面，在“添加事件”面板选择鼠标单击时触发事件，在“添加动作”面板即将菜 单背景移动到达位置（731,4）,显示菜单项选择中背景，在“添加动作”面板通过富文本的设置人力资 源导航文字为白色，其他导航菜单文字为黑色（#555555）,显示人力资源二级菜单，隐藏其他二级 菜单。
>;交互编辑器0却raw*<*初w评
Q ss笳作翻开链接
关闭窗口框架中翻开链接
潦动到元件 元件动作胡丽 设置面板状态
设置文本 设置图片 设置选中设置列表法中项 启用噤用
移动没百尺寸
置于底层 设置不透明 我取焦点取消
人力资源导航单击事件
（8）为联系我们导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在联系我们导航上面，在“添加事件”面板选择鼠标单击时触发事件，在“添加动作”面板将菜单 背景移动到达位置（851,4）,显示菜单项选择中背景，在“添加动作”面板通过富文本的设置联系我们 导航文字为白色，其他导航菜单文字为黑色（#555555）,显示联系我们二级菜单，隐藏其他二级菜 单。
果。在Axure原型设计工具的左下角是Axure的母版区域。
坦版
Q0 CoAxure母版区域
6.1.1母版的使用
Axure母版区域提供3个快捷操作按钮：新增母版、新增母版文件夹以及检索母版。更多的操 作可以通过鼠标右键单击模板区域，在弹出的快捷菜单中获取，包括调整母版之间的顺序以及层级 关系、删除母版和检索母版等功能，其与页面区域功能条的使用方式一致。
实战演练
(1)单击“新增母版”按钮可以新增一个母版，也可以鼠标右键单击母版区域在快捷菜单中通 过添加选项添加一个母版，输入母版的名称“导航菜单”。
母版
Q| 田 | 口
| 添加(A)1~ I
移动(M)►删除(D)
剪切⑹复制9) 粘贴⑻ 重命名(R) 重复©►
施放行为(B)>添加到页面中.. .(A)
从页面中移除. . . 00使用情况.. .00
导航菜单母版
(2)单击“新增文件夹”按钮可以新增文件夹，将其命名为“页面母版”，文件夹可以对母版 进行归类，存放导航菜单的母版、页首的母版、页尾的母版。
);交互编辑器
心 潮值的黝呻酢
Q
宦按动柞
翻开蜓授
关闭窗口
框架中翻开链接
濠动到元件 元件动柞
显示/除藏
设置面板状态
设置图片
设置选中
设置列君乐中项
启用噤用
移动
螃
设置尺寸
置于顶层/底层
设置不透明
点
▼单击时
移动
苜后到达(851.4)
显示田
砺背M
设宜文本
联豕我们 为,,联茎我们,一
设置文本
百页为"首页“
走迸至月亮为“走进蓼月壳“
清洁之冢为‘清洁之舒 科学洗濠为“科学洗滞 人力资源为“人力资源”
显示值装
溺a走进朝亮二®^单
除藏人力资源二级菜单
显示联系我们二^^
X
S3机
白玩
联系我们
磕
联系我们导航单击事件
(9)保存原型设计，并同时发布原型，通过页面载入时或者鼠标单击时会把隐藏的菜单项选择中背 景显示出来。
首页

lol回I区J
首页
走进盛月亮
清洁之家科学洗涤人力资源联系我们
关于我们I企业文化I社会责任
苏宁易购
24〃\M消费者熟线:400-111-1118
客服： 400@bluemoon .cn
走进蓝月亮
口首页X +
<--> C ① 127.0.0. l:32767/start. htalttid=ldub(y&p=B^&c=l
盛为w首页走进蓝月亮清洁之家科学洗涤
人力滨源
联系我们
用人理念I社会招聘I校园招聘I培训或展 I员工福利
苏宁易购
24〃\M消费者侬:400-111-1118
客服4^ ： 400@bluemoon .cn
人力资源
联系我们
口首页X I +
<--> C ① 127.0.0.1：32767/八53 11，1»1=1<1=1<11>8741>=首页4€=1
当鼠标单击到某个菜单的时候，就会显示相应二级菜单，菜单就变为选中状态。单击其他菜单 时，其他的二级菜单就会被隐藏起来。
当页面载入的时候，就会将当前页面的菜单项选择中，显示出背景菜单。
小结
(1)学会Axure母版的基本操作，新增母版、删除母版、将母版引用到页面，从 页面上删除母版等操作。
(2)学会制作母版的两种方式：一种是通过母版区域新建母版，另一种是通过元 件转换为母版。
(3)学会母版的3种拖放行为：任何位置、锁定到母版中的位置、从母版脱离的 3种拖放行为，根据不同的场合使用不同的拖放行为。
练习
蓝月亮页面还缺少内容，请去蓝月亮官网查看页面内容，完成页面的内容布局设计。

母版Q 国回
画导航菜单▼ ■页面母版
国导膜单画页首
屋I页尾母版文件夹
（3）在母版上右键单击，在弹出的快捷菜单中，通过移动选项可以调整母版之间的上下顺序和 层级关系，通过删除选项可以进行删除母版。
添加（A）►移动（M）►
删除⑻剪切⑹
复制（O粘贴（P）
重命名（R）重复⑹►
施放行为（B）►添加到页面中.・.（A）
从页面中移除...（R）使用情况.・.（U）
调整母版顺序和删除母版
（4）在母版上右键单击，在弹出的快捷菜单里的选项中，除了可以新增母版、新增文件夹、移 动和删除母版，还提供母版重命名、母版复制、设置母版拖放行为、将母版添加到页面中、将母版 从页面中移除以及查看母版使用情况等功能。
添加（A）►移动（M）►
删除⑻剪切（C）
复制（C）粘贴（P）
重命名（R）重复⑹►
施放行为（B）►
添加到页面中g） 从页面中移除（R）使用情况. • .（U）
母版右键菜单项选择项
6.1.2制作母版的两种方式
那怎么制作母版呢？有两种方式，一种是将元件转换为母版，另一种是通过母版区域新建母版。 下面演示制作母版的两种方式。
1 .通过母版区域新建母版实战演练
（1）在母版区域里新建一个“导航菜单”母版，进入该母版里，拖曳5个“矩形1”元件到工 作区域作为5个导航菜单，将其宽度均设置为100,高度均设置为40,分别重命名为“首页”“公 司介绍”“新闻中心”“招贤纳士”“联系我们”。

新建导航菜单母版
（2）在页面区域上新建5个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士” “联系我们。用来显示这5个菜单的内容。
400
招贤纳士
解我们

（3）将制作完的母版，引用到这5个页面里，需要右键单击“导航菜单”母版，在弹出的快捷 菜单中选择“添加到页面中…”选项，弹出“添加母版到页面中”对话框，将母版引用到“首页”“公 司介绍”“新闻中心”“招贤纳士” “联系我们”页面。
文件（…漏宿（…视目（…工程
工添加母版到页面中
概要
添加［导航菜单］到以下页面：
三全选 三不选 鼻选中子项 三取消选中子项
500
600
目首页
目公司介郎
□ 目公司介绍
□ 目新闻中心
日新闻中心
目招贤纳士
□ 国招贤纳士
□ S联系我们
国联系我们
联系我们
坦麻
曲
@锁定为母版中的位置
O指定新的位置
左侧：° 像二
像素
导航菜单
□置于底层
透曜
□丽中不包含此母版时才瞄加.
说明：此操作无法撤销.
取消
母版引用到页面里
（4）进入到“首页”页面，可以看到母版的“导航菜单”被引用到首页里，其他页面也是一样 的。
页面
Q
首页 $jo o一
|回首页|
回公司介螭
E新闻中心
E招贵纳士
口 Bstn«un
坦版
Q田口厨
同导航菜单
首页公司介绍新闻中心招贤纳士
联系我们
首页内容
（5）如果不想把“导航菜单”母版引用到页面里，在“导航菜单”母版上右键单击，在弹出的 快捷菜单中选择“从页面中移除”选项，在弹出的对话框中删除“首页”里的母版，删除后首页里 就没有母版内容。

X । a o 〜 文件（…维辑（…视因（…工程（
母版应用-Axure RP 9 Team Edition :已授权
＞；从页面中移除母版
2SJ
概要
4-
从以下页面中移除［导航菜单］:
乌全选 三不选 三选中子项 W脱前比中子项
600
回首而
回公司介熠 目新闻中心 叵招雷纳士 叵联装我们
目公司介绍
3新闻中心 可指孰士
a联系我们
除我们
母版
国导停单
说明：此操作无法JK精。

确定
删除首页母版
这种方式就是通过母版区域新建母版，然后将母版引用到页面里使用，这种方式适合明确知道 有哪些内容可以在不同页面上共用、复用的情况，比方导航菜单、版权信息等，每个页面都会使用 这些内容。
2 .通过元件转换为母版
在原型设计过程中，如果重复设计某个区域的内容，这时可以把这个内容抽取出来，制作成母 版，这样就能够防止重复制作同样的内容。
实战演练（1）在页面区域上建立一个“首页”页面，进入到“首页”里，拖曳5个“矩形1”元件到工
作区域作为5个导航菜单，将其宽度均设置为100,高度均设置为40,分别重命名为“首页”“公司介绍”“新闻中心”“招贤纳士”“联系我们”。
页面
概要
首页
可。
100
300
400
马医
0 C3
首页
公司介绍
新闻中心
招贤纲土
联荽我们
新建首页页面
（2）同时选中这5个菜单，右键单击，在弹出的快捷菜单中选择“转换为母版”选项，在弹出
的“创立母版”对话框中输入“导航菜单”作为新母版的名称，单击继续按钮，就可以把该元件转
换为母版。
ffiB
苜更X
切。
400
苫页
X创立母版
安：与件关蜘说畸要更航 新建也版名珍：号航菜单
托的士
联系我们。

取消
□不再显示元件转换为母版
(3)元件转换完母版后，就可以在母版区域里看到转换后的母版“导航菜单”。

国导航菜单转换后的母版

这种方式适用于事先并不能确定哪些内容可以设计成母版的情况。在页面设计过程中，会发现 有的元件，其他页面也会用到，这时就可以把这些元件转换为母版。
6.2母版3种拖放行为的使用
母版有3种拖放行为：任何位置、锁定到母版中的位置、从母版脱离。页面使用母版时，根据 不同的拖放行为来选择母版使用哪种拖放行为，下面来学习母版这3种拖放行为以及它们的含义。
6.2.1 拖放行为为任何位置
任何位置：使用这种拖放行为，母版在被引用的页面可以被移动，可以放置在页面中的任何位 置，对母版所做的修改会在所有引用母版的页面同时更新。
—实战演练
(1)在母版区域新增一个母版，把它命名为“版权信息”，进入到该母版中，拖曳一个“矩形 1”元件到工作区域，将其宽度设置为800,高度设置为100,文本内容命名为“这是版权信息”。

新建版权信息母版

(2)在页面区域上新建5个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士” “联系我们”，用来显示5个菜单的内容。

四版权信官新建5个页面
（3）将制作完的母版，引用到“公司介绍” “新闻中心”两个页面里，需要在“版权信息”母 版上，右键单击，在弹出的快捷菜单中选择“添加到页面中”选项，在弹出的“添加母版到页面中” 对话框里设置将母版引用到想引用的页面里。
X添加母版到页面中x
添加［版权信息］到以下页面： M全达 三不选 金迳中子项 三取消运中子项 □ 回首丈 回公司介绍 □ 回新词中心 □ s招费纳士 □ 回联鼻我们 幽 @锁定为母版中的位置 O指定新的百
□运于底层 选项
□页面中不包含此母版时才能添加.
说明：此操作无法掷销.
母版引用到页面里
（4）进入到“公司介绍”页面里，可以看到“版权信息”的母版被引用到“公司介绍”里，移 动引用的版权信息内容，发现无法移动，在“版权信息”母版上右键单击，在弹出的快捷菜单中， 取消勾选“锁定到母版中的位置”，从而可以随意移动引用的母版内容，这就是任何位置的拖放行 为。
一…公司介电x I «®ae x »3 x一▼三瞬o, . । too
QE） CJ选择元件
剪切（T）
复制化）
拈砧信）
WK送啖
设榜亚
J质序9）

选择元件
剪切（T）
复制化）
拈砧信）
WK送啖
设榜亚
J质序9）
目苜页目公司介绍
@新闻中心 回招朝士回RS我们
v锁定到母版中的位正
-1^5曰版
组合（G）Ctrl+C
淡定⑻
转投为母版（N）
料换为动态面板（D）
毋乐Q□ Q §
B版或信息国
设置为任何位置的拖放行为
（5）在“版权信息”母版里修改版权信息，再新增“2019年”这几个字，回到“公司介绍” “新闻中心”页面里，可以看到引用母版的页面内容也会发生修改，这样当有变更的时候，就不需 要到页面里逐个进行修改，只需要在母版里进行修改就可以了，引用母版的页面可以自动更新。
好皿一麟耻e X匚 ▼负而 疑丁
QH □：
回S5I目公司介妁8
目腼中心1 ,~
回招费纳士201强这是版权信息

201强这是版权信息
目联系我们201强这是版权信息母Bi
0 □给，权信息
修改母版内容
6.2.2拖放行为为锁定到母版中的位置
锁定到母版中的位置：母版在引用的页面会处于最底层并被锁定，对母版所做的修改会在所有 引用母版的页面同时更新，页面引用母版中的控件位置与其在母版中的位置相同，这种拖放行为常 用于布局和底板。
很多网站可以换不同的背景色或者背景图片，使用母版也可以进行背景色或者背景图片的切换, 这样所有的页面背景都会一起更改。
实战演练
(1)而增一个红版，将其命名为“背景图”，翻开该母版，拖曳一个“矩形3”元件到工作区 域，将其宽度设置为800,高度设置为1000,位置为(0,0)。

新建背景图母版
(2)将“背景图”母版引用到“招贤纳士”页面里，进入到“招贤纳士”页面里，可以看到“背 景图”母版被应用到“招贤纳士”页面里。

母版引用到页面里
(3)在“招贤纳士”页面里可以看到无法移动的母版内容，它可以作为页面背景图，它的这种 拖放行为就是锁定到母版中的位置拖放行为，是不可以移动的。如果背景图想换成其他的颜色，比 如绿色，只需要在“背景图”母版里，将背景填充为绿色(#00CC00),页面的背景图也会随之变 为绿色。