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 structureThe 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:
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:
- Background images always take precedence over background colours. This means that if you load a background image and also set a background colour, the background image will cover the colour.
- Note the effect of individual area parameters on other areas. The height information for horizontal areas, and the width information for vertical areas will affect the size of the content area, for example.
- All sizes and dimensions for the examples are shown in pixels (px). You can also use any other sizes which can be used in style sheets, for example percent (%). For more information on the possible settings and how to use them, please consult the corresponding specialist literature or Web sites, such as http://www.selfhtml.org (only partially in English).
- Test out the various settings. Remember that you can use the Undo function at any time to restore the initial state. Alternatively, make a copy of the current style and test out the various options on the copy. You can do this in the table of your own styles by using the Create backup copy function. See also Styles, below. Once you have created the desired design there, activate the style for your customers.