《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 IIQH D 累叫 画版权信息 国 I导航菜单母版（2）将制作完的“导航菜单”母版，引用到“联系我们”页面里，需要在“导航菜单”母版上, 右键单击，在弹出的快捷菜单中，选择“新增页面”选项，在弹出的“添加母版到页面中”对话框 里设置将母版引用到“联系我们”页面里。X赤加母版到页面中添加。帆章华到以下页： 诩 不法 中子重中子R 回首B 回公耽M8 回新他00 口 回省士 | g 回 n |（）幢定为母版中的位置O海定新的位*苣于底层 Aia页面中不包含此卷版时才RM加.说明：此建作无法E.取消母版引用到页面里(3)进入到“联系我们”页面里，可以看到引用的导航菜单内容，默认引用的母版内容是锁定、 不能移动的。如果想修改此母版内容，需要将引用的母版内容变为一般元件，右键单击引用的母版 内容，在弹出的快捷菜单中勾选“脱离母版”选项。概要回首页目公司介蛤回新苗中心回招贤纳土国版权信息四背昌图国导航菜单7Ctt联系会X与39X0B 口设置从母版脱离拖放行为页面内容没有更新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）。钱要300400首页走进越月亮清洁之彖人力资源联系我们导航菜单内容（2）制作选中菜单项背景，拖曳一个“矩形1”元件到工作区域，将其宽度设置为107,高度 设置为107,边框设置为无，填充颜色为蓝色（#03328D）,置于底层，元件命名为“背景”，作为 导航菜单被选中时的背景图。页BI国首页目走迸演先回清洁之家坦版量导航菜单母版概要B 口柠泡8单母豚x科学洗涤人力资源联系我们I图6.33菜单背景（4）设计走进蓝月亮二级菜单，拖曳一个“矩形1”元件到工作区域，将其坐标位置设为（0,111）, 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色（#F3FAFE）,去掉矩形边框线；再拖 曳3个文本元件，分别命名为“关于我们”“企业文化”“社会责任”，作为二级菜单；再拖曳两 个竖线，作为二级菜单的分隔符。 口关于我们I企业文化I社会责任47Cft走进蓝月亮二级菜单（5）把走进蓝月亮二级菜单全部选中，然后右键单击，在弹出的快捷菜单中选择“组合”选项, 把走进蓝月亮二级菜单组合命名为“走进蓝月亮二级菜单”，这样方便对走进蓝月亮二级菜单的显 示与隐藏控制。（6）设计人力资源二级菜单，拖曳一个“矩形1”元件到工作区域，将其坐标位置设为（0,111）, 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色（#F3FAFE）,去掉矩形边框线；再拖 曳5个“文本标签”元件到工作区域，将其分别命名为“用人理念”“社会招聘”“校园招聘”“培 训开展”“员工福利”作为二级菜单；再拖曳4个“竖线”元件到工作区域，将其作为二级菜单的 分隔符。1300 I400500 I0007008009001000走进蓝月亮滔洁之家科学洗涤人力资源联系我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) o400400走进蓝月亮画导航菜单里版渣网站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 的 HfGnOn4- _ A s ira PP Q Taarr* CHilirvn 口X添加母版到页面中xX Cut Copy Paste口口口 !(=添加导航菜单母版到以下页面:渭全选 三不选 ，选中子项 三取消选中子项共享 目苜页 目苜页蹦：面同概要 目走进盛月亮400匕 门联数我们产|母版中的百O指定新的位置置于底层Q国导航菜单母版画雄信息母版说明：此操作无法撤销。页面中不包含此母版时才能添加.将导航菜单母版引用到页面(5)把页尾信息母版也引用到页面上，在页尾信息母版上右键单击，在弹出的快捷菜单中选择 “新增页面”选项，弹出“添加母版到页面中”对话框，单击全选按钮，选中所有页面。文件(陶楫(祺X Cut。Copy0 Past图片a首页修)导航菜单母板页尾信身母版7tnDefault基本元件,共享+页尾信息母版引用到页面X m 、几、I0r- 口口口 ：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链接动作翻开链接关闭窗口框柒中翻开链接覆动到元件 元件功作iS面板状态设置图片设置选中鳍列越中项启用朦用移动旋转设置尺寸室,M设置不逶明我取焦点一加单击时移动背屏到达(361.4)显示值意砺首昱设置文本走进蔻月亮为“走讲离月充“设置文本首页为“首页”清酒之家为“清酒之家“ 科学洗濠为“科学我*人力资懑为“人力资源” 联系我们为“联M我们”显示/除藏显示走进蓝月完二级菜单显示M域S人力资源二菜华隆藏联系我们二级菜单目样走进蜜月先富文本编辑文本取消走进蓝月亮导航单击事件(5)为清洁之家导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在清洁之家导航上面，为其鼠标单击时触发事件，将菜单背景移动到达位置(490,4)，显示菜单项选择 中背景，在通过富文本的设置清洁之家导航文字为白色，其他导航菜单文字为黑色(#555555),隐 藏所有二级菜单。：交互编辑器2活加事件夕 考*t链频作翻开链接关闭窗口框架中打涛动?玩件元件动作SSc设置面板状态iSS?$：设置图片金直选中设置列表选中项启用朦用移动螭设置尺寸设置不逶明我取焦点2活加事件夕 考*t链频作翻开链接关闭窗口框架中打涛动?玩件元件动作SSc设置面板状态iSS?$：设置图片金直选中设置列表选中项启用朦用移动螭设置尺寸设置不逶明我取焦点幽砧单击时移动背M到达(490.4)显示描i显示背星设造文本粉之家为设敢本首页为“首页“走进盒月光为“走进盒月壳“科学涵为“科学洗涤” 人力资源为“人力资常联系我们为“联系我们“面SKM我6匚甄单 隋藏人力资源二单除荻走进盖月亮二a菜单目标清洁之家富文本值家辑文本目标清洁之家富文本值家辑文本清洁之家导航单击事件(6)给科学洗涤导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在科学洗涤导航上面，添加鼠标单击时触发事件，将菜单背景移动到达位置(610,4),显示菜单项选择 中背景，通过富文本的设置科学洗涤导航文字为白色，其他导航菜单文字为黑色(#555555),隐藏 所有二级菜单。X交互编辑器55JEW*夕*添mswt链接功作翻开链接 口框架中翻开链接元件动作S5a设置面板状态设置图片设置选中设置列表选中项启用燎用移动SEl$设置尺寸置于顶层/底层设置不逶明获取焦点单击时移动背景到达（610.4）果示/网显示背聂设置文本科学洗涤为“科学洗濠”设首文本苜贝为“苜贝”走迸朝壳为“走进区月光清洁之家为“清洁之家” 人力资源为“人力资源”联系我们为“联系我们”显示/院慈 月菜单窥MSzzai菜单 券就联系我们二级菜单目标科学洗涤设查为富文本值编辑文本单击时移动背星到达（731.4）靖示胸显示背星设看文本人力将惠为11人力资源”一设省文本苜员为“苜贝“走进幽克为“走进蓝月壳 清洁之家为“清洁之家” 科学洗浴为降俘洗滞联装我们为“联茎我们“显示田t除藏走迸至月光二单 显示人力覆源二膜除薄联系我们职肖职肖确定科学洗涤导航单击事件（7）为人力资源导航添加鼠标单击时触发事件，拖曳一个“热区”元件到工作区域，将其覆盖 在人力资源导航上面，在“添加事件”面板选择鼠标单击时触发事件，在“添加动作”面板即将菜 单背景移动到达位置（731,4）,显示菜单项选择中背景，在“添加动作”面板通过富文本的设置人力资 源导航文字为白色，其他导航菜单文字为黑色（#555555）,显示人力资源二级菜单，隐藏其他二级 菜单。;交互编辑器0却raw*添加到页面中. .(A)从页面中移除. . . 00使用情况. .00导航菜单母版(2)单击“新增文件夹”按钮可以新增文件夹，将其命名为“页面母版”，文件夹可以对母版 进行归类，存放导航菜单的母版、页首的母版、页尾的母版。);交互编辑器心 潮值的黝呻酢Q宦按动柞翻开蜓授关闭窗口框架中翻开链接濠动到元件 元件动柞显示/除藏设置面板状态设置图片设置选中设置列君乐中项启用噤用移动螃设置尺寸置于顶层/底层设置不透明点单击时移动苜后到达(851.4)显示田砺背M设宜文本联豕我们 为,联茎我们,一设置文本百页为首页“走迸至月亮为“走进蓼月壳“清洁之冢为清洁之舒 科学洗濠为“科学洗滞 人力资源为“人力资源”显示值装溺a走进朝亮二单除藏人力资源二级菜单显示联系我们二XS3机白玩联系我们磕联系我们导航单击事件(9)保存原型设计，并同时发布原型，通过页面载入时或者鼠标单击时会把隐藏的菜单项选择中背 景显示出来。首页lol回I区J首页走进盛月亮清洁之家科学洗涤人力资源联系我们关于我们I企业文化I社会责任苏宁易购24M消费者熟线:400-111-1118客服： 400bluemoon .cn走进蓝月亮口首页X + C 127.0.0. l:32767/start. htalttid=ldub(y&p=B&c=l盛为w首页走进蓝月亮清洁之家科学洗涤人力滨源联系我们用人理念I社会招聘I校园招聘I培训或展 I员工福利苏宁易购24M消费者侬:400-111-1118客服4 ： 400bluemoon .cn人力资源联系我们口首页X I + C 127.0.0.1：32767/八53 11，11=11=18741=首页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个页面里，需要右键单击“导航菜单”母版，在弹出的快捷 菜单中选择“添加到页面中”选项，弹出“添加母版到页面中”对话框，将母版引用到“首页”“公 司介绍”“新闻中心”“招贤纳士” “联系我们”页面。文件（漏宿（视目（工程工添加母版到页面中概要添加导航菜单到以下页面：三全选 三不选 鼻选中子项 三取消选中子项500600目首页目公司介郎 目公司介绍 目新闻中心日新闻中心目招贤纳士 国招贤纳士 S联系我们国联系我们联系我们坦麻曲锁定为母版中的位置O指定新的位置左侧： 像二像素导航菜单置于底层透曜丽中不包含此母版时才瞄加.说明：此操作无法撤销.取消母版引用到页面里（4）进入到“首页”页面，可以看到母版的“导航菜单”被引用到首页里，其他页面也是一样 的。页面Q首页 $jo o一|回首页|回公司介螭E新闻中心E招贵纳士口 Bstnun坦版Q田口厨同导航菜单首页公司介绍新闻中心招贤纳士联系我们首页内容（5）如果不想把“导航菜单”母版引用到页面里，在“导航菜单”母版上右键单击，在弹出的 快捷菜单中选择“从页面中移除”选项，在弹出的对话框中删除“首页”里的母版，删除后首页里 就没有母版内容。X a o 文件（维辑（视因（工程（母版应用-Axure RP 9 Team Edition :已授权；从页面中移除母版2SJ概要4-从以下页面中移除导航菜单:乌全选 三不选 三选中子项 W脱前比中子项600回首而回公司介熠 目新闻中心 叵招雷纳士 叵联装我们目公司介绍3新闻中心 可指孰士a联系我们除我们母版国导停单说明：此操作无法JK精。确定删除首页母版这种方式就是通过母版区域新建母版，然后将母版引用到页面里使用，这种方式适合明确知道 有哪些内容可以在不同页面上共用、复用的情况，比方导航菜单、版权信息等，每个页面都会使用 这些内容。2 .通过元件转换为母版在原型设计过程中，如果重复设计某个区域的内容，这时可以把这个内容抽取出来，制作成母 版，这样就能够防止重复制作同样的内容。实战演练（1）在页面区域上建立一个“首页”页面，进入到“首页”里，拖曳5个“矩形1”元件到工作区域作为5个导航菜单，将其宽度均设置为100,高度均设置为40,分别重命名为“首页”“公司介绍”“新闻中心”“招贤纳士”“联系我们”。页面概要首页可。100300400马医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, . tooQE） CJ选择元件剪切（T）复制化）拈砧信）WK送啖设榜亚J质序9）选择元件剪切（T）复制化）拈砧信）WK送啖设榜亚J质序9）目苜页目公司介绍新闻中心 回招朝士回RS我们v锁定到母版中的位正-15曰版组合（G）Ctrl+C淡定转投为母版（N）料换为动态面板（D）毋乐Q Q B版或信息国设置为任何位置的拖放行为（5）在“版权信息”母版里修改版权信息，再新增“2019年”这几个字，回到“公司介绍” “新闻中心”页面里，可以看到引用母版的页面内容也会发生修改，这样当有变更的时候，就不需 要到页面里逐个进行修改，只需要在母版里进行修改就可以了，引用母版的页面可以自动更新。好皿一麟耻e X匚 负而 疑丁QH ：回S5I目公司介妁8目腼中心1 ,回招费纳士201强这是版权信息201强这是版权信息目联系我们201强这是版权信息母Bi0 给，权信息修改母版内容6.2.2拖放行为为锁定到母版中的位置锁定到母版中的位置：母版在引用的页面会处于最底层并被锁定，对母版所做的修改会在所有 引用母版的页面同时更新，页面引用母版中的控件位置与其在母版中的位置相同，这种拖放行为常 用于布局和底板。很多网站可以换不同的背景色或者背景图片，使用母版也可以进行背景色或者背景图片的切换, 这样所有的页面背景都会一起更改。实战演练(1)而增一个红版，将其命名为“背景图”，翻开该母版，拖曳一个“矩形3”元件到工作区 域，将其宽度设置为800,高度设置为1000,位置为(0,0)。新建背景图母版(2)将“背景图”母版引用到“招贤纳士”页面里，进入到“招贤纳士”页面里，可以看到“背 景图”母版被应用到“招贤纳士”页面里。母版引用到页面里(3)在“招贤纳士”页面里可以看到无法移动的母版内容，它可以作为页面背景图，它的这种 拖放行为就是锁定到母版中的位置拖放行为，是不可以移动的。如果背景图想换成其他的颜色，比 如绿色，只需要在“背景图”母版里，将背景填充为绿色(#00CC00),页面的背景图也会随之变 为绿色。