Tuto WEBDEV 25

298 Part 7: Specific Web features Implementing the anchoring First of all, we are going to implement the anchoring of areas then the anchoring of controls in the areas. We want to get the following behavior when enlarging the browser: • The header area (yellow) must be enlarged in width. • The menu area (green) must be enlarged in height. • The content area (orange) must be enlarged in width and in height. • For the controls, we want them to remain centered in relation to their area. We are now going to perform all necessary operations. ▶ To implement the anchoring of areas: 1. Display the page in zoning mode: click the "Zoning" tab at the top of the page. 2. Select the yellow area. 3. Display the popup menu and select "Anchor". The window for anchor management is displayed. 4.  The area must be enlarged in width. Select: • Position: The control keeps its position. • Anchor in width: Enlarge or reduce like the browser. • Anchor in height: Fixed height. 5. Validate. 6. Select the green area, display the popup menu and select "Anchor". 7.  The area must be enlarged in height. Select: • Position: No anchor. • Anchor in width: Fixed width. • Anchor in height: Enlarge or reduce like the browser.