上次課程回顧初識Axure軟件界面頁面區(qū)域使用頁面區(qū)域注意事項1.制作軟件原型時要規(guī)劃軟件的功能菜單或者欄目結(jié)構(gòu)2.頁面的命名要有意義制作原型時要事先規(guī)劃好軟件的功能菜單或者欄目結(jié)構(gòu)，不要隨意地在站點地圖上新建頁面，導致頁面結(jié)構(gòu)混亂，根本看不出軟件的功能結(jié)構(gòu)。頁面的命名要讓使用者一看，就能知道這個頁面所要表達的含義。要做到顧名思義，不光是頁面要命名得有意義，部件也要命名得有意義。

頁面區(qū)域的功能使用頁面區(qū)域的功能使用包括兩方面內(nèi)容：

功能菜單的使用01OPTION02OPTION頁面管理頁面的功能菜單

除了使用功能菜單來管理頁面，也可以在頁面上右鍵單擊，通過彈出的

菜單選項管理頁面。

頁面右鍵菜單選項練習題目：通過頁面區(qū)域進行“夸父網(wǎng)”欄目規(guī)劃導航菜單有：首頁、學院介紹（學院簡介、學院院長、專業(yè)介紹、行政人員、大事記）、師資隊伍（學術(shù)帶頭人、客座講授、兼職教師、教授、副教授、講師）、教學管理（教務管理、教研活動、教務通知）、學生工作（學生活動、優(yōu)秀學子）、實習實訓（校內(nèi)實訓平臺、校外實習基地）、培養(yǎng)成果（考研留學、競賽獲獎、曬就業(yè)、學生文集）、創(chuàng)新實驗班【注意】：括號里面是二級菜單。

Axure基本元件和母版技術(shù)型文科人才系列課程主講人：王向軍文學與傳媒學院新媒體產(chǎn)品設計與項目管理大家小時候都玩過積木，積木的形狀、大小、長短各不相同，發(fā)揮我們自己的想象力，就可以用積木拼出一座橋、一個城堡、一座大樓。

Axure也提供了很多積木，我們稱之為組件或者元件，只不過它要比小時候的積木復雜了很多。使用元件，加上設計、經(jīng)驗、想象力，我們可以繪制出想要的軟件原型，Axure默認內(nèi)置了線框圖元件庫、流程圖元件庫、圖標元件庫，除了使用內(nèi)置的元件庫，也可以載入元件庫和自定義元件庫。

用元件“搭積木”1?Axure基本元件

2

課堂練習：頁面頂部和底部3

課堂練習：母版4

小結(jié)3.1Axure基本元件AxureRP8原型設計軟件里默認內(nèi)置了基本元件有20種，表單類元件有7種，菜單與表格元件有4種，標記元件有9種。

元件庫3.1基本元件的使用?基本元件包括矩形1、矩形2、矩形3、橢圓形、占位符、按鈕、主要按鈕、鏈接按鈕、一級標題、二級標題、三級標題、文本標簽、文本段落、水平線、垂直線、熱區(qū)、動態(tài)面板、內(nèi)部框架、中繼器等。最后3個元件，由于使用比較復雜，交互效果豐富，使用頻率非常高，放在后面的章節(jié)中詳細介紹。

基本元件1.標題元件的使用

標題元件可以用來作為一段文字的標題，也可以用來作為某個區(qū)域的標題說明。大家都設計過自己的簡歷，常把“個人信息”“教育經(jīng)歷”“工作經(jīng)驗”這類文字加粗起強調(diào)作用，這時就可以使用標題元件。 Axure提供了一級標題、二級標題、三級標題3個元件，一級標題元件是32號字、加粗、黑色（333333），二級標題元件是24號字、加粗、黑色（333333），三級標題元件是18號字、加粗、黑色（333333）。

標題1、標題2和標題3元件2.文本標簽元件和文本段落元件的使用

文本標簽元件是單行文本元件，文本段落元件是多行長文本元件。如果只有一行文本選擇文本標簽

元件，如果有多行文本可以使用文本段落元件。

文本標簽和文本段落元件3.水平線和垂直線元件的使用水平線和垂直線是很靈活的兩個元件，用它們可以設置一條水平線或者垂直線，可以利用工具欄快捷按鈕編輯這兩個元件，設置橫線和垂直線的顏色、線框、線條樣式和箭頭方向。

水平線和垂直線元件3.2?課堂練習：錦城學院頁面頂部和底部參照錦城學院官網(wǎng)（/index.html），完成頂部和底部的原型設計。頂部參考效果：底部參考效果：用Axure母版減少重復工作

主講人：王向軍文學與傳媒學院技術(shù)型文科人才系列課程新媒體產(chǎn)品設計與項目管理在原型設計過程中，往往會涉及很多重復的頁面內(nèi)容，包括頁面的首部、版權(quán)信

息、導航菜單等，如果不使用母版，這些頁面就需要重復制作，工作量很大，若使用

母版，在母版里面只需要設計一次頁面內(nèi)容，這樣其他頁面可以直接使用這個母版，

在母版里修改還可以實現(xiàn)所有引用母版的頁面同時更新，也不需要再到每個頁面里修

改內(nèi)容，如圖所示。

1?母版功能介紹2?母版3種拖放行為的使用3?實戰(zhàn)——錦城學院導航菜單母版設計4?小結(jié)1母版功能介紹Axure的母版解決重復制作原型某個類似功能的問題，制作一次母版，其他頁面進行復用。在Axure原型設計工具的左下角區(qū)域是Axure的母版區(qū)域。

實戰(zhàn)演練單擊“新增母版”按鈕可以新增一個母版，也可以單擊鼠標右鍵選擇“添加”，輸入母版的名稱“導航菜單”。單擊“新增文件夾”按鈕可以新增文件夾，命名為“頁面母版”。對母版進行歸類，可以存放導航菜單的母版、頁首的母版、頁尾的母版，單擊鼠標右鍵選擇“移動”選項調(diào)整頁面層級關(guān)系。

導航菜單母版母版文件夾在母版上單擊鼠標右鍵的選項里，通過“移動”選項可以調(diào)整母版之間的上下順序和層級關(guān)系，通過“刪除”選項可以進行刪除母版，刪除子母版的時候會彈出提示信息。在母版上單擊鼠標右鍵的選項里，除了可以進行新增母版、新增文件夾、移動和刪除操作，

還提供母版重命名、母版復制、設置母版拖放行為、將母版添加到頁面中、將母版從頁面中刪除及查看母版使用情況等功能。

1.2制作母版的兩種方式實戰(zhàn)演練1. 在母版區(qū)域里新建一個“導航菜單”母版，進入這個母版里，拖曳5個矩形1元件，寬度設置為100，高度設置為40，制作首頁、公司介紹、新聞中心、招賢納士、聯(lián)系我們這5個菜單。

1.通過母版區(qū)域新建母版2. 在頁面區(qū)域上新建5個頁面，分別命名為“首頁”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來顯示這5個菜單的內(nèi)容。

將制作完的母版，引用到5個頁面里，需要在導航菜單母版上，鼠標右鍵單擊選擇“新增頁面”選項，將母版引用到想引用的頁面里。進入“首頁”頁面里，可以看到將母版的“導航菜單”引用到了首頁里，其他頁面也是一樣的。

5. 假如不想將母版引用到頁面里，在“導航菜單”母版上單擊鼠標右鍵，選擇“頁面刪除”選項即可，也可以直接在首頁里將該母版引用刪除。

2.通過元件轉(zhuǎn)換為母版實戰(zhàn)演練在頁面區(qū)域上建立一個頁面“首頁”。進入“首頁”里，同樣制作5個菜單。同時選中這5個菜單，單擊鼠標右鍵選擇轉(zhuǎn)換為“母版”，新母版命名為“導航菜單”即可。

3. 元件轉(zhuǎn)換完母版后，就可以在母版區(qū)域里看到轉(zhuǎn)換后的母版“導航菜單”。

2母版的3種拖放行為母版有3種拖放行為：任何位置、鎖定到母版中的位置、從母版脫離。下面來看看母版這3種拖放行為及它們的含義。

2.1拖放行為為任何位置1. 在母版區(qū)域新增一個母版，命名為“版權(quán)信息”。進入這個母版里，拖曳一個矩形1元件，寬度設置為800，高度設置為100，文本內(nèi)容輸入為“這是版權(quán)信息”。

在頁面區(qū)域上新建5個頁面，分別命名為“首頁”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來顯示這5個菜單的內(nèi)容。將制作完的母版引用到“公司介紹”“新聞中心”兩個頁面里，需要在版權(quán)信息母版上單擊鼠標右鍵，選擇“新增頁面”，將母版引用到想引用的頁面。

4. 進入“公司介紹”頁面，可以看到“版權(quán)信息”的母版被引用到了“公司介紹”，移動引用的版權(quán)信息內(nèi)容，發(fā)現(xiàn)無法移動，在母版上單擊鼠標右鍵，將“固定位置”取消勾選，就可以隨意移動母版內(nèi)容了，這就是任何位置的拖放行為。

5. 在“版權(quán)信息”母版里修改版權(quán)信息，回到“公司介紹”“新聞中心”頁面里，可以看到引用母版的頁面內(nèi)容也會發(fā)生修改。這樣當有變更的時候，就不需要到頁面里逐個進行修改，只需要在母版里進行修改，引用母版的頁面可以自動更新。

2.2拖放行為為鎖定到母版中的位置鎖定到母版中的位置：母版在引用的頁面會處于最底層并被鎖定，對母版所做的修改會在所有引用母版的頁面同時更新，頁面引用母版中的控件位置與母版中的位置相同，這種拖放行為常用于布局和底板。

很多網(wǎng)站需要更換不同的背景色或者背景圖片，使用母版可以進行背景色或者背景圖片的切換，這樣所有的頁面背景都會一起更改。

實戰(zhàn)演練新增一個母版，命名為“背景圖”。打開這個母版，拖曳一個矩形3元件，寬度設置為800，高度設置為1000，位置（0,0）。將“背景圖”母版引用到“招賢納士”頁面。打開“招賢納士”頁面，可以看到母版已被成功引用。

3. 在“招賢納士”頁面里可以看到我們無法移動引用的母版內(nèi)容。如果背景圖想換成其他的顏色，比如綠色，只需要在“背景圖”母版里，填充為綠色（00CC00），頁面的背景圖也會隨之變?yōu)榫G色。

2.3拖放行為為從母版脫離

從母版脫離：這種拖放行為會使頁面引用的母版與原母版失去聯(lián)系，頁面引用的母版元件可以像一般元件一樣進行編輯，常用于創(chuàng)建包含自定義元件的組合。實戰(zhàn)演練在母版區(qū)域里新建一個“導航菜單”母版，進入這個母版里，同樣制作5個菜單。將制作完的“導航菜單”母版，引用到“聯(lián)系我們”頁面里。

3. 進入“聯(lián)系我們”頁面里，可以看到引用的導航菜單內(nèi)容，默認引用的母版內(nèi)容是鎖定的，不能移動。如果想修改引用的母版內(nèi)容，需要將其變?yōu)橐话阍谀赴鎯?nèi)容上單擊鼠標右鍵勾選“脫離母版”。

4. 導航菜單從母版脫離后，變?yōu)槠胀ㄔ瑢Ш讲藛蝺?nèi)容可以隨意地移動和放置，就算“導航菜單”母版內(nèi)容修改，“聯(lián)系我們”頁面內(nèi)容也不會隨之變化。進入“導航菜單”母版，復制一個導航菜單，文本內(nèi)容為“留言本”，回到“聯(lián)系我們”頁面可以看到，內(nèi)容并沒有更新。

3實戰(zhàn)——錦城學院導航菜單母版設計1. 在母版區(qū)域新建一個母版，命名為“導航菜單母版”。設計“導航母版”。2.在母版區(qū)域新建一個“頁尾母版”并設計。將“導航母版”引用到頁面上。在“導母版”上單擊鼠標右鍵，選擇“新增頁

面”選項，在彈出的對話框中單擊“全選”按鈕將所有頁面選中，再單擊“確定”按鈕即可。將“頁尾”母版也引用到頁面上。在“頁尾母版”上單擊鼠標右鍵，選擇“新增頁

面”選項，在彈出的