|
|
|
|
|
- Overview
- Creating the page and the header bar
- Creating a page
- Creating the header bar
- Creating the bar elements
- Creating the title and logo
- Implementing the logo
- Implementing the title
- Page test
Responsive Web Design: Managing a header banner
Warning
In version 28, the page editing mode initially called "Responsive Web Design: page layout by slice" becomes "Slices (Historical Responsive for compatibility)".. "Responsive (zoning and layouts)" is now the recommended mode for any new project. For more details, see New edit mode for mobile-friendly websites. This page is adapted to the new options of version 28.
This help page explains how to create a page containing a header in legacy responsive mode. The main steps are: Note: The same method can be used to create a footer banner. Creating the page and the header bar Creating a page To create a new page in "Responsive Web Design" mode: - Click
in the quick access buttons. - In the window that appears, click "Page" then "Page".
- The page creation wizard starts.
- Select the type of page to be created: "Blank" and confirm. The page is automatically created and displayed in the editor.
- Display the page description window: In the "Page" pane, in the "Description" group, click on "Description"..
- On the "General" tab, go to "Edit mode" and select "Slices (legacy Responsive mode)".
- Confirm changes and close the description window.
- The different slices appear in the editor. The default mode is "Desktop First - Edit in max. size".
- Right-click to open the context menu of the page and select "Description".
- Type the page name: "PAGE_usingcell".
- Confirm changes and close the description window.
- Save the window (Ctrl + S).
Creating the header bar The slice presentation bar is displayed in the editor: We are going to create a page header with cells. The following operations must be performed: - Click the Desktop slice.
Remember: Always start by working in the reference bracket: - Desktop slice in Desktop First mode.
- Mobile slice in Mobile First mode.
- On the "Creation" tab, in the "Containers" group, select "Cell".
- Click in the page: the field is created.
- Position the control in the upper-left corner and resize it horizontally until it reaches the full width of the page. There is no need to resize it vertically in this example.
Tip Don't hesitate to add a background color to the cell for better visualization. In this example, the cell has an orange background color and a rounded border. - The result is as follows:
- "Desktop" slice:
- "Tablet" slice:
- "Mobile" slice:
To simulate the change of width in the editor: - Display the "Office" slice: click on the "Office" header.
- Click the double arrow in the "Browser width" tooltip. Keep the left mouse button down and move to the left.
- Move the mouse left or right: the browser width is modified in the editor..
- The cell follows the browser width.
In fact, the cell has an anchor that allows it to follow the width of the grid, thus adapting to the width of the page.
We are going to study the anchoring options available for the cell: - Select the Cell control.
- Right-click to open the context menu and select "Anchor". The anchor options window appears:
- In this window, under "Horizontal anchors", the "Enlarge or reduce like the browser (or its container)" option is selected. The width of the selected element (here, the cell) adapts to the width of the page. In this case, the cell follows the page width (as already seen).
- To test this behavior, change the "Width" parameter and select "Fixed width".
- Validate.
- Enable the UI errors if necessary:
- under the "Project" pane, in the "Project" group, click on "Description": in the "Compilation" tab of the project description, check the "Enable UI compilation" option.
- display the "Compilation errors" pane and click
.
- Save the page (Ctrl + S).
- We are going to check the difference of behavior:
- Display the "Office" slice: nothing changes.
- Display the "Tablet" or "Mobile" slice: the cell no longer resizes in width.
- The cell is wider than the resolution limit: UI errors appear:
There are 2 solutions to these UI errors: - Solution 1: Return to the previous width anchor setting: "Enlarge or reduce like the browser (or its container)".
- Solution 2: In each slice where the error is located, specifically change the cell width. Therefore, the width of the cell will be fixed in each slice.
For example, in the illustration below, the cell width was modified in the "Mobile" slice.
Solution 2 is simple, but is only valid if the size of the "Desktop", "Tablet" and "Mobile" slices is fixed and known: the website only works on the same type of hardware/browser. Solution 1 will work regardless of the resolution of your browser. Therefore, you don't have to worry about your target. For the remainder of this operation, we'll return to solution 1: we'll modify the width anchor parameter to use the "Enlarge or reduce as browser (or its container)" option. - Display the "Desktop" slice.
- Right-click the Cell control to open the context menu. Select "Anchor".
- Under "Horizontal anchors", select "Enlarge or reduce like the browser (or its container)".
- Validate
Creating the bar elements Creating the title and logo We are going to add a title and a logo into the cell. To create the title: - Display the "Desktop" slice.
- In the "Creation" pane, in the "Usual controls" group, click on
then click on the cell in the top left-hand corner of the page: the field is created..
To create the logo: - Display the "Desktop" slice.
- On the "Creation" tab, in the "Usual controls" group, expand "Image" and select "Image".
- Click on the cell in the top right-hand corner of the page: the field is created..
Implementing the logo First, we are going to handle the image: - Select an image in the WEBDEV catalog:
- Open the Image control description window (select "Description" in the context menu).
- On the "General" tab, click
to the right of "Image". Select "Catalog" from the menu that is displayed.
- In the image catalog, type "car" for example and select an image in the list.
- Select a width set to 80 and validate.
- Validate the next screen to save the image in the site directory.
- The description window of the image is upated. Validate.
If the image is not displayed entirely, resize it vertically or horizontally WHILE keeping the Shift key down. Remark: Holding down the Shift key allows you to perform these manipulations without taking object snapping into account: movement and resizing are performed on a pixel-by-pixel basis. After these operations, you get: No other operation will be performed on the "Desktop" slice. Let's now see what happens in the 2 other blades ("Tablet" and "Mobile"): - Select the "Tablet" slice, then the "Mobile" slice.
- "Tablet" slice:
- "Mobile" slice:
- The image overflows the area in the two presentation modes. This display problem comes from an anchoring problem.
- Stay in the "Mobile" slice. The other slices will be fixed thereafter.
- Check the anchor options of the Image control ("Anchor" in the context menu).
The image keeps the creation width in the WEBDEV editor. The width does not depend on the page width.
- The image must be moved to the left in order to be displayed inside the page.
- Select the "Tablet" slice. The same display problem occurs.
- Perform the same operations to correct the display.
Implementing the title Let's now work on the title: - Display the "Desktop" slice.
- Type the title and choose a style for the text:
- Right-click the Static Text control to open the context menu and select "Description".
- In the description window:
- Give a name to the field: "ZTR_TITRE"..
- Click the "Edit rich text" button and type "Page with cells" for example.
- Choose the "Times New Roman" font with a size set to 20 pixels.
- Press Esc to exit from the control edit mode.
- Display the "Tablet" slice, then the "Mobile" slice:
- "Tablet" slice:
- "Mobile" slice:
- The caption is reduced horizontally, the text is no longer visible in the "Mobile" slice. The caption is just visible in the "Tablet" slice.
To correct this display problem of Static Text control, the anchoring parameters of Static Text control must be modified. - Select the "Mobile" slice if necessary.
- Select the Static Text control.
- Right-click the control to open the context menu and select "Anchor".
- Change the horizontal anchor option. Select "Fixed width" and confirm.
- The control stretches so that the content is entirely visible.
Let's now check the behavior of the header bar at runtime. - Test the page (click
in the quick access buttons). - You get these 3 representations (reduce the width of your browser to simulate an execution on a tablet or on a mobile device).
- Browser ("Desktop" slice):
- Browser ("Tablet" slice):
- Browser ("Mobile" slice):
The image moves and it is not properly aligned with the right border of browser. Furthermore, it changes line below the title. Once again, it is an anchor-related problem. The problem comes from the anchors. In reality, the image is anchored on the left, but it should follow the right border of the browser. To fix this, let's anchor the image to the right: - Select the "Desktop" slice.
- Select the Image control.
- Right-click the control to open the context menu and select "Anchor".
- Change the anchor settings. Select "Right" (
) and confirm. - Test the page (click
in the quick access buttons). - The image is properly aligned even in a small resolution.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|