|
|
|
|
|
|
|
|
|
|
- Overview
- Creating pages in "Responsive (zoning and layouts)" mode
- How to create pages using the zoning mode?
- Responsive mode (zoning and layouts): Reference page size
- 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)
Page editing: 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).
- On the "General" tab, select "Responsive (zoning and layouts)".
- Validate.
The benefits of this mode are: - consistent page layouts in the editor and at runtime.
- the ability to freely manipulate controls.
- clear and simple code.
Responsive mode (zoning and layouts): Reference page size 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 can be used, for example, to define the page architecture: header, footer, etc. These layout areas are materialized and easily manipulated in the editor.. For example, enlarging the height of the header area automatically moves the layout areas below it: body and footer areas.. 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. At the end of the manipulation, there will be 3 zones: the initial zone and the two new zones inside the initial zone.
- You can create layout areas:
- in pages and page templates,
- in popup pages,
- in "containers": cells, supercontrols, repeated zones, field templates, etc.
- 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.
Note: To delete the layout area, simply press the Del 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: - Tab "General": This tab allows you to specify the name of the layout area and lists the fields present in the layout area.
- Tab "UI": This tab primarily allows defining the anchoring of the layout area, managing the pinned mode, and handling the plans.
- Tab "Detail": This tab allows you to specify the semantics associated with the layout area.
- Tab "Style": This tab allows you to set the framing and overflow options of the layout area, its background image, and its frame. 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 - ...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|