• Creating the page and the bar.
• Creating the different elements found in the header bar (title and logo).
• Page test.

Creating a page

1. Click in the quick access buttons.
   • The new element window appears: click "Page" then "Page".
   • The page creation wizard starts.
2. Select the type of page to create: Select "Blank" and confirm. The page is automatically created and displayed in the editor.
3. Open the page description window: On the "Page" tab, in the "Description" group, click "Description".
4. In the "General" tab, go to "Edit mode" and select "Slices (legacy Responsive mode)".
   
5. Validate the description window.
6. The different slices appear in the editor. The default mode is "Desktop First - Edit in max. size".
7. Right-click to open the context menu of the page and select "Description".
8. Type the page name: "PAGE_usingcell".
9. Validate the description window.
10. Save the window (Ctrl + S).

Creating the header bar

The slice presentation bar is displayed in the editor:

1. Click the Desktop slice.
   Reminder: You should always work first in the reference slice:
   • Desktop slice in Desktop First mode.
   • Mobile slice in Mobile First mode.
2. On the "Creation" tab, in the "Containers" group, select "Cell".
3. Click in the page: the control appears in creation mode.
4. 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 define a background color for the cell in order to better see it.
   In this example, the cell has an orange background color and a rounded border.
5. The result is as follows:
   • "Desktop" slice:
     
   • "Tablet" slice:
     
   • "Mobile" slice:
     

1. Display the "Desktop" slice: click the "Desktop" header.
2. Click the double arrow in the "Browser width" tooltip. Keep the left mouse button down and move to the left.
   
3. Move the mouse to the left or to the right: the browser width is modified in the editor.
4. The cell follows the browser width.
   
   Indeed, the anchor defined for the cell allows the cell to follow the width of the grid, therefore to adapt to the page width

1. Select the Cell control.
2. Right-click to open the context menu and select "Anchor". The anchor options window appears:
   
3. 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).
4. To test this behavior, change the "Width" parameter and select "Fixed width".
5. Validate.
6. Enable the UI errors if necessary:
   • on the "Project" tab, in the "Project" group, click "Description": in the "Compilation" tab of the project description, check "Enable UI compilation".
   • display the "Compilation errors" pane and click .
7. Save the page (Ctrl + S).
8. We are going to check the difference of behavior:
   • Display the "Desktop" slice: nothing changes.
   • Display the "Tablet" or "Mobile" slice: the cell is not resized horizontally anymore.
     
   • The cell is wider than the limit resolution: UI errors occur:
     

• Solution 1: Go back to the previous horizontal anchor option: "Enlarge or reduce like the browser (or its container)".
• Solution 2: Change the width of the cell in each slice where the error occurs. 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.
  

1. Display the "Desktop" slice.
2. Right-click the Cell control to open the context menu. Select "Anchor".
3. Under "Horizontal anchors", select "Enlarge or reduce like the browser (or its container)".
4. Validate

Creating the title and logo

1. Display the "Desktop" slice.
2. On the "Creation" tab, in the "Usual controls" group, click and then click inside the cell at the upper-left corner of the page: the control appears in creation mode.
   

1. Display the "Desktop" slice.
2. On the "Creation" tab, in the "Usual controls" group, expand "Image" and select "Image".
3. Click in the page at the top right in the cell: the control appears in creation mode.
   

Implementing the logo

1. Select an image in the WEBDEV catalog:
   • Open the Image control description window (select "Description" in the context menu).
   • In 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.
2. The description window of the image is upated. Validate.

After these operations, you get:

1. Select the "Tablet" slice, then the "Mobile" slice.
   • "Tablet" slice:
     
   • "Mobile" slice:
     
2. The image overflows the area in the two presentation modes. This display problem comes from an anchoring problem.
3. Stay in the "Mobile" slice. The other slices will be fixed thereafter.
4. 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.
5. The image must be moved to the left in order to be displayed inside the page.
   
6. Select the "Tablet" slice. The same display problem occurs.
7. Perform the same operations to correct the display.
   
   

Implementing the title

1. Display the "Desktop" slice.
2. Type the title and choose a style for the text:
   • Right-click the Static control to open the context menu and select "Description".
   • In the description window:
     • Give a name to the control: "RTA_TITLE".
     • 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.
3. Press Esc to exit from the control edit mode.
   
4. Display the "Tablet" slice, then the "Mobile" slice:
   • "Tablet" slice:
     
   • "Mobile" slice:
     
5. The caption is reduced horizontally, the text is no longer visible in the "Mobile" slice. The caption is just visible in the "Tablet" slice.

1. Select the "Mobile" slice if necessary.
2. Select the Static control.
3. Right-click the control to open the context menu and select "Anchor".
   
4. Change the horizontal anchor option. Select "Fixed width" and confirm.
5. The control stretches so that the content is entirely visible.
   

1. Test the page (click in the quick access buttons).
2. 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):
     

1. Select the "Desktop" slice.
2. Select the Image control.
3. Right-click the control to open the context menu and select "Anchor".
4. Change the anchor settings. Select "Right" () and confirm.
5. Test the page (click in the quick access buttons).
6. The image is properly aligned even in a small resolution.