|
|
|
|
- Overview
- Creating pages in "Responsive (zoning and layouts)" mode
- How to create pages using the zoning mode?
- "Responsive (zoning and layouts)" 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: Responsive mode (Zoning and layouts)
"Responsive (zoning and layouts)" 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
- anchors (mobile-friendly sites),
- ...
Creating pages in "Responsive (zoning and layouts)" mode How to create pages using the zoning mode? By default, all pages are generated using the "Responsive (zoning and layouts)" mode. You can choose this mode in the page description window: - Open the page description window ("Description" in the context menu of the page).
- In the "General" tab, select "Responsive (zoning and layouts)".
- 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.
"Responsive (zoning and layouts)" mode: Reference size of pages When editing a page in "Responsive (zoning and layouts)" mode, you can set the page size: - by directly resizing the page with the mouse.
- by specifying the page size 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 "Responsive (zoning and layouts)" mode makes page editing easier by using "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. 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.
- Split the layout area vertically or horizontally.
Remark: To delete the layout area, simply press the Delete key. The controls contained in a layout area are kept when the area is deleted. 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 - ...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|