• 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.
   • In the window that appears, click "Page" then "Page".
   • The page creation wizard starts.
2. Select the type of page to be created: "Blank" and confirm. The page is automatically created and displayed in the editor.
3. Display the page description window: In the "Page" pane, in the "Description" group, click on "Description"..
4. On the "General" tab, go to "Edit mode" and select "Slices (legacy Responsive mode)".
   
5. Confirm changes and close 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. Confirm changes and close 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.
   Remember: Always start by working in the reference bracket:
   • 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 field is created.
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 add a background color to the cell for better visualization.
   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 "Office" slice: click on the "Office" 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 left or right: the browser width is modified in the editor..
4. 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.

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:
   • 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 .
7. Save the page (Ctrl + S).
8. 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:
     

• 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.
  

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. 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..
   

1. Display the "Desktop" slice.
2. On the "Creation" tab, in the "Usual controls" group, expand "Image" and select "Image".
3. Click on the cell in the top right-hand corner of the page: the field is created..
   

Implementing the logo

1. 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.
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 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.
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 Text 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.