Tuto WEBDEV 25

296 Part 7: Specific Web features We are now going to divide our page into 3 areas: • A header (at the top on the entire width). • A menu on the left (on the entire height). • A content area in the middle. Each area will have a specific behavior when resizing the page. To create the areas, we will be using the zoning feature. ▶ To create a first title area at the top of the page: 1. On the "Page" pane, in the "Edit" area, expand "Zoning" and select "Divide horizontally". 2.  The mouse cursor turns into a pen. 3. Click at the top of the page and draw an horizontal line. The area is created when releasing the mouse button. ▶ To view this area, we are going to associate it with a background color: 1. Display the description window of area: select "Description of area" from the popup menu. 2.  In the "Style" tab, select the "Border/Bckgrd" element if necessary and select a background color (tooltip yellow for example). 3. Validate the description window of area. ▶ We are going to perform the same operations to split the bottom area of our page: 1. On the "Page" pane, in the "Edit" area, expand "Zoning" and select "Divide vertically". 2.  The mouse cursor turns into a pen. 3. Click in the middle of bottom area and draw a vertical line.