Axure8.0 Basic Tutorials (51-56) novice must master the basic operation

Axure8.0 Basic Tutorials (51-56) novice must master the basic operation directory of this document

Base 51. Generating part of a prototype page

Base 52. Add a flag to a prototype

Base 53. Release prototypes to Axshare

Base 54. Regenerate the current page

Base 55. Mobile Device Settings

Base 56.   Web font settings body Base 51. Generating part of a prototype page

When publishing a prototype, if you do not need to generate or publish all of the pages, you can set the page setting in the Build HTML settings, and uncheck "Generate All Pages", and you can create the specified page. Note that the child page cannot be published separately, and the parent page is automatically ticked when the child page is checked. If you need to publish a child page separately, you need to adjust the level of the child page to a first-level page in the page Management panel. (Fig. 6-4)

Base 52. Add a flag to a prototype

You can add a picture ID or text caption to your prototype by setting the flag in the settings that generate HTML. After the prototype is published, it appears in the page panel of the toolbar. (Fig. 6-5)

Base 53. Release prototypes to Axshare

The release of prototypes to Axshare refers to the release of a well-done prototype into a axure-provided space, accessed through an automatically generated URL. The shortcut key for publishing to Axshare is the key. Post to Axshare requires pre-registration Axureshare account, registered address: https://share.axure.com/. (Fig. 6-6)

Once the publication is complete, a URL will be automatically generated. You can view the prototype by opening the URL in your PC or mobile browser. (Fig. 6-7)

Base 54. Regenerate the current page

To modify a page without having to regenerate the entire prototype HTML file, simply select "Regenerate current page in HTML file" in the "Publish" option list. (Fig. 6-8)

Base 55. Mobile Device Settings

Prototyping a mobile device requires following the specifications to make the prototype into a standard size. Mobile Device prototype dimension calculation tool: http://www.iaxure.com/share/yxcc/(individual mobile devices may vary, for informational purposes only.) ）

In addition to the standard prototype size, it is also necessary to create a "mobile device" setting in the generated HTML file configuration, so that the resulting HTML file "contains viewport labels" so that it can be displayed normally. (Fig. 6-9)

Base 56. Web font settings

When a prototype uses some special fonts, it will not display properly on devices that do not have the font installed. Web fonts can be a good solution to this problem. The use of web fonts consists of two ways.

Way one, link ". CSS "file (Figure 6-10)

Pros: Easy to set up.

Cons: Requires network and online CSS file support.

Take the Fontawesome font as an example. In the Web font settings, click "" To add a new configuration, tick "link to". CSS "file" option, which will be available on the official website of the font. CSS "file address can be filled in into hyperspace link. This allows you to display fonts as long as you have network support for browsing through prototypes.

The configuration method for the Fontawesome4.4.0 font is shown in the figure. The official link address for this font CSS file is: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

Mode two, @font-face (Fig. 6-11)

Pros: Support for local fonts and online fonts

Cons: Setup is slightly more complex

Still take the Fontawesome font as an example. After creating a new Web font configuration, select @font-face options and fill in the code.

The online font code is as follows:

Font-family:fontawesome;

Src:url (\ ' http://7xl7jg.com1.z0.glb.clouddn.com/fontawesome-webfont.ttf\ ') format (\ ' truetype\ ');

The local font code is as follows:

Font-family:fontawesome;

Src:url (\ ' fontawesome-webfont.ttf \ ') format (\ ' truetype\ ');

Note: Using a local font requires that you copy the font file (. ttf) to the generated HTML folder.

When processed in the above way, fonts are displayed correctly when the prototype is viewed in a device that does not have the font installed.

Note: In the component library of the Axure RP 8, the Fontawesome icon library is available, which can be used directly without the above setup. However, the official Fontawesome icon Library is very different from the library, and the icons in the official library are not text, but shapes. In the following case, we need to put some icon fonts into the text editing interface for editing, which is not the official component.