- Overview
- Generation in Zoning mode
- How to use the generation in zoning mode?
- "Zoning" mode: Reference size of pages
- Creating and handling the layout areas in the editor
- Overview
- Creating layout areas
- Context menu of the layout area
- Description window of the layout area
- Semantics associated with a layout area ("Details" tab)
Editing pages: zoning mode
The Zoning mode is the default page editing mode. This editing mode allows you to easily handle pages in the editor. There are many features in this mode: - optimized page generation.
- ability to set a reference page size,
- ability to define layout areas,
- intuitive control anchors, etc.
Generation in Zoning mode How to use the generation in zoning mode? By default, all pages are generated using the zoning mode. This generation mode can be configured directly in the page description window: - Open the page description window ("Description" in the context menu of the page).
- In the "General" tab, select "Zoning: per-pixel positioning".
- Validate.
The advantages of this mode include: - consistent page layouts in the editor and at runtime.
- the ability to freely manipulate controls.
- clear and simple code.
"Zoning" mode: Reference size of pages In zoning mode, when editing a page in the editor, you have the ability to define the size of the page: - by using the mouse and by resizing the page.
- by indicating the new dimensions of the page in the status bar of the editor:
The controls are positioned in relation to the page and to its size defined in the editor. Usign a reference size for the page is used to: - automatically display scrollbars if necessary when the page is displayed in a specific browser (display in the browser of an iPhone for example).
- manage the anchors.
Creating and handling the layout areas in the editor Overview The Zoning mode makes editing pages easier based on "layout areas".. These layout areas allow you, for example, to define the page architecture: header, footer, ... These layout areas are clearly represented and can be easily handled in the editor.
s
For example, increasing the height of the header area will automatically move the layout areas below it: page body and footer. Creating layout areas There are two methods to create layout areas. - Method 1:
- On the "Creation" tab, in the "Containers" group, expand "Zoning":
- To create a horizontal area, click "Divide horizontally".
- To create a vertical area, click "Divide vertically".
- To create a horizontal subdivision, click "Subdivide horizontally".
- To create a vertical subdivision, click "Subdivide vertically"..
- The cursor turns into a pencil.
- Click the page where you want to create the area. If necessary, areas can be resized and moved.
- Method 2:
- On the "Page" tab, in the "Edit" group, expand Zoning:
- To create a horizontal area, click "Divide horizontally".
- To create a vertical area, click "Divide vertically".
- To create a horizontal subdivision, click "Subdivide horizontally".
- To create a vertical subdivision, click "Subdivide vertically"..
- The cursor turns into a pencil.
- Click the page where you want to create the area. If necessary, areas can be resized and moved.
Remarks: - The "Divide" option divides an existing layout area into two separate areas.
- The "Subdivide" option creates two new areas, but keeps the original area.. This means there will be three areas after this option is used: the original area, and the two new areas it now contains
- You can create layout areas:
- in pages and page templates,
- in popup pages,
- in "containers": cells, supercontrols, loopers, control templates, ...
- You cannot create areas in internal pages.
Context menu of the layout area The context menu of a layout area allows you to perform several operations: - Click the layout area. The selected area is highlighted.
- Right-click the area. The context menu appears: This menu allows you to:
- Open the description window of the layout area.
- Anchor the layout area.
- Delete the layout area. If a layout area is deleted, its controls will not be lost.
- Split the layout area vertically or horizontally.
Description window of the layout area The description window of the layout area can be accessed via the context menu. This window contains the following sections: - "General" tab: This tab allows you to specify the name of the layout area, and lists the controls it contains.
- "UI" tab: This tab allows you define the options for the anchors of the layout area, the pinned mode and the management of planes.
- "Details" tab: This tab allows you to specify the semantic elements associated with the layout area.
- "Style" tab: This tab is used to define the alignment and overflow options of the layout area, its background image and its border. These options avoid the use of a cell.
Semantics associated with a layout area ("Details" tab) WEBDEV gives you the ability to associate a specific HTML 5 semantics with each layout area. This information is optional and it is mainly used to improve SEO (Search Engine Optimization). This information can also be used to improve the accessibility of a site (for example, a site will know the title of the page and it will be able to enlarge it in "accessibility" mode).
Related Examples:
|
Complete examples (WEBDEV): WW_Forum_AWP
[ + ] This example proposes the main features of a user forum (creation of forums, topics and messages, moderator, search, etc.). Some of the features used by WW_FORUM_AWP: - Full-text search - Rich controls - Loopers - POPUP pages - AJAX - ...
|
|
|
|