Apply the newly created main-content-area style rule to the index page
Open the index page (index.html). Right click on the page and select "Page Properties" from the context menu.
Click on the Style tab and select "content area" from the drop down menu of the Container.
Press the Add button to open the Select Styles Dialog and select "main-content-area" from the styles.
Click OK to add this style to the Page Properties Dialog and then click OK again to apply this style to the page.
Open the template page "template.html" and click on the text element which is used as background for easy placement of other elements. This is needed because the styles used by the content area are only shown when the page is previewed.
Right click on that element to bring up the context menu. Copy that element by selecting "Copy" and note its position. It is 70 pixels from the top and 0 pixel from the left.
Open or switch to the index page (index.html). Paste the element on the page. Then, move it to the location where it is 0 pixel from the left and 70 pixels from the top.
Right click on the element and select "Styles" from the context menu. The Styles Dialog will be opened.
Select the style "content-area" and press the "Remove" button to remove this style rule. Press the "Add" button to open the Select Styles Dialog. Select "main-content-area" from the styles and click the "OK" button to add this style. Click OK again to apply the style to the element.
Now it covers the elements on the page. We need to move it to the back of all other elements. When it is still selected. Click on this button to send it to the back of all other elements.
After pressing the button, it will go to the back of the other elements.
to send it to the back of all other elements. 
