Using Axure RP prototyping practice 01, usage overview_html/css_WEB-ITnose

First get to know the default interface layout of Axure RP Pro 7.0 software. The top is the toolbar area, the upper left is the sitemap area (sitemap), the middle left is the widgets area (Widgets), the lower left is the template area (Masters), the upper middle is the page area, and the middle The lower one is the page settings area, the upper right side is the component properties area, and the lower right side is the dynamic panel area.

Click "Publish", "Preview" or directly press the shortcut key F5 or directly press the preview button in the toolbar to preview the current project in the browser.

Click "Publish", "Preview Options..." or press ctrl F5 at the same time to set the preview.

Above, you can choose which browser to use and whether you need to bring a Sitemap for preview.

Click "Publish" to also include some settings:

Above, "More Generators and Configurations" is used from Define the generator. "Generate HTML Files" is used to save all html pages and various settings. "Regenerate Current Page to HTML" is used to save the current html page and various settings.

If you want to modify the node name in the site map on the left, right-click the node and click "Rename" to rename the node.

Create a new page and click the "Add Page" button in the upper left corner of the site map area.

To add a folder, click the "Add Folder" button in the upper left corner of the site map area.

To adjust the positional relationship of page nodes in the site map area, first select the page node, and then click the up or down arrow in the upper left corner.

To delete a node in the site map area, select it first and then click the "Delete" button above.

Click the "Search" button in the upper right corner of the site map area to search for nodes.

Double-click the node in the site map area to start editing the page.

Widgets under Widgets can be dragged to the page area.

You can select different parts through the "Select Library" drop-down box in the upper left corner, and you can also search for parts.

● Text Field: Input box
● HTML Button: Button
● Image: Place the image, double-click to select the image source, and you can also cut the imported image into several pieces Pictures that fit the page layout
● Droplist: drop-down box
● Rectangle: rectangular component, which can be filled with background, used as a text link, and can also be transformed into different shapes
● Placeholder: when it is necessary to preset the image on the page Use
● Table: table
● Text Area: multi-line text box
● List Box: multi-select box
● Checkbox: check Frame
● Radio Button: Radio button
● Button Shape: Make a button like a tab, a button that changes the background color when the mouse is hovering, etc.
● Inline Frame: iframe, displayed on a page Another page
● Dynamic Panel: can be regarded as a super component with multiple states, and then select a certain state through events. For example, create a dynamic panel component with 12 states, corresponding to 12 months. If a state matches the current month, a certain background color will be displayed. Dynamic panels show the first state by default. Can be understood as a component that contains other components
● Classic Menu-Vertical: Create a multi-level vertical menu
● Classic Menu-Horizontal: Create a multi-level horizontal menu
● Tree: Tree directory
● The components under the Flow group are used to create flow charts

...

You can also load or download third-party or official components.

Each widget has some common properties, including: name, coordinates, size, font, font size, font style, font alignment, font color, border color, border thickness, Border style, fill color, bring to front, bring to back, lock widgets, and more.

Place some reused modules under Masters, such as navigation, website header, website bottom, website logo, and frequently repeated modules.

The page area is the area where html will be generated. The scale of the page is in pixels, and the upper left corner is the original coordinate of the page. There is "Grid and Guides" in the menu that pops up when you right-click on a blank area of ​​the page. This is about grids and guides. Click "Grid Settings" to set the spacing between grids. The default is 10 pixels, which can be set. Grid style. Guides can be set, and you can create guides by clicking and dragging within the abscissa or mid-ordinate area. The reference lines here are for the current page.

How to create global guides? Right click on the page, Grid and Guides, Create Guides, you will see the following:

Global guides are created based on columns. Under the Preset attribute, it includes: a width of 960 pixels is divided into 12 columns, a width of 960 pixels is divided into 16 columns, a width of 1200 pixels is divided into 12 columns, a width of 1200 pixels is divided into 15 columns; the Columns group is used to set the columns, # of Columsn indicates the total number of columns, Column Width represents the width of the column, Gutter Width represents the distance between columns, and Margin is left blank; the Rows group is used to set rows, and the settings are similar to the Columns group. Suppose you create a column with 3 columns, a column width of 100, a column spacing of 20, and a margin of 10 on the left and right sides. Set it as follows:

The effect is as follows:

So, the width of the entire layout = 10*2 100*3 20*2=360 pixels

In the page settings area, "Page Notes" is used to enter some text information, such as information describing requirements; in "Page Interactions", some page-level events are set; in "Page Style", the page is set Format, such as: background image, background color, alignment, font, spacing, etc.

In the Widget Interactions and Notes panel of the relevant widget, Interations are used to set widget events, such as focus events, such as loss of focus events; Notes are used to add some notes.

In the Widget Properties and Style panel of the relevant widget, set various styles of the widget.

When you drag the "Dynamic Panel" component to the page, a set of states will appear in the Widget Manager panel. Each state is like a layer in Photoshop and can be interacted with If required, make one layer visible and other layers hidden. You can also control the visibility of states through the small blue icons after each state.

Reference: Axure RP high-fidelity web page prototyping, from Lu Haoyue, Yang Changtao