Design basics

You edit the design and layout in a WYSIWYG mode. In the browser you can see the preview of the page that you are editing. Any changes are displayed immediately.
The working area of the browser is split in two. In the upper section you can see the multifunction bar. This displays the available functions. For more information, see Multifunction bar and design, below.
In the lower section you can see the page preview. You can edit the design directly there. The page preview shows you the current Web page in the design and layout specified by the selected style; see Styles, below.
The pages are split into the following possible functional areas; see Figure 27.
Figure 27: Web site structure
The following areas are defined:

Area 1:
Header
Area 2:
Top
Area 3:
Left
Area 4:
Content area
Area 5:
Right
Area 6:
Bottom
Area 7:
Footer

In addition there is the surrounding working area of the browser in which the Web site is displayed. See Configuring the general page layout in the browser, below.
If you want to edit an area, click the mouse in the corresponding location. This activates that area. It is highlighted by a border and the multifunction bar displays the functions that can be carried out in this area.
In terms of editing and configuration options, the areas of the site can be categorised in two groups. All the areas in each group are edited in the same way. The groups are as follows:

Horizontal areas:
Header, Top, Bottom, Footer; see Horizontal areas, below
Vertical areas:
Left, right; see Vertical areas, below
Content area:
Content area; see Configuring the content area, below

The parameters for the individual areas create the complete design when they are combined. Some parameters influence each other or are interdependent. These side-effects must be considered. The following information should be helpful: