Design basics
In order to design your web site in all possible ways, open Advanced design. You edit the design and layout in a WYSIWYG mode, Changes are shown 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 content.In the lower section you can see the page preview. You can edit the design and layout directly there. The page preview shows you the current Web page in the design and layout specified by the selected style; see Own styles.The web site is split into the following functional areas; see Figure 8.
Figure 8: Web site structure
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 on which the Web site is displayed. See Page view in browser.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 into vertical and horizontal areas as well as the content area:
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:
- In areas, background images have more priority than background colours. This means that if you load a background image and also set a background colour, the background image will cover the colour.
- 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 Own styles for more information about this. Once you have created the desired design there, activate the style for your customers.
Notes on background imagesMatching templates are loaded for the background images in each design template. You can replace these with your own images. If you delete your own images, the template is reloaded automatically. If you do not want a background image at all, you must delete the template image too. To do this, click the Delete template link. When the template has been deleted, the name of this link changes to Restore template. Click this link to restore the default template for the background image without having to search for file names.Note: If you set both a background colour and a background image, the background image will always be on top of the background colour. Therefore, if you want to display the colour, delete the background image. If the background is to be filled completely, the image must be resized to fit the area or you can activate Tile image.Tile imageBackground images can either be displayed as a single image or repeatedly displayed so that the background of the entire page is filled. This arranges copies of the image next to and below each other until they fit the whole page.