Create Websites with CHEETAH
"Rapid Design" of a first website (1)
Now we come to a first small example website, which should be developed "lightning fast" with "Cheetah" (a web designer, who is already somewhat familiar with the "Cheetah Sitebuilder" and has also done some preparatory work, should hardly need more than half an hour for this - therefore "Rapid Design").
The goal of the exercise is to develop a small landing page on the topic "Cuba cigars", which consists of a header, a content band and a footer with a contact form. To simplify our work, we build the content structure from prefabricated banner templates, which we then customize. Of course, we could have also started (which might be the more common case) with completely empty bands.
As far as the aforementioned "preparatory work" is concerned, here it consists primarily of a pre-selection of royalty-free images and possibly the provision of text modules that are to be used. And of course, you should already have some ideas about the structure and functionality of the website (for example, in the form of a simple sketch).
In this example, the website should only consist of a homepage and a separate imprint page, which is linked in the page footer.
Create a new website called "Cuba Cigars" in the "Cheetah" Sitebuilder and then open the "Home" page in the editor in the page view. We will take care of all settings that go beyond the default settings later.
Important: Use an empty "Blank Template" as a starting point.
Compose banner structure of the homepage
The homepage should consist of three banners: the header, a 1st Fold banner and a footer. To do this, we first select the "Express Header" banner from the banner templates (category "Header"), then the 1st Fold - Banner "1st Fold - 08" and the Footer "Express Footer". Then delete the upper banner provided by the template using the trash function of its header menu. The result should then look like this in the editor:
Adaptation of the banner content to the task
Now we can start designing our website using the template banners loaded into the editor. Here it pays off to have made some preparations in advance. Among other things, this concerns the provision of the images to be included in a separate folder together with a few pre-formulated texts, which should be available unformatted in a simple text file. The latter can then be opened with an editor or WordPad and transferred to the appropriate text fields of the web page, either in whole or in bits and pieces, via the clipboard.
As for the image material, it should be either in png or jpg format, preferably have the size in pixels as they appear on the desktop and - for SEO reasons - have a file name that, together with a keyword, describes as far as possible what can be seen in the respective image.
Note: To prepare the images, you can use various programs such as IrfanView or the photo manager from Builderall, to name just two. Use these programs to resize your images to approximately the same size as the images in the template that you want to replace. This step is not really necessary, because within the editor you can adjust the image size continuously while keeping the aspect ratio the same. But you should get used to doing it anyway, since oversized image files always have a negative effect on the loading behavior of a web page.
In our case, we replace the background image of the content banner with a promotional image that fits our theme. It is already available in a folder on the hard disk and shows a box of noble Cuba cigars...
After we have focused the middle content banner in the editor, we look for the category "Background" in the right side menu (or the properties dialog box). Because here you can assign a background image to the entire banner. As you can see from the preview image, this has also been done in the template. But since we only want to use one image in the internal area, we will delete it here as well. Then we change to the category "Internal background". Here you will also find the setting "Change image" and a click on the corresponding button will take us to the Builderall repository, where we will now upload the desired background image.
As soon as the loading process is complete, the image appears in the folder and can be explicitly marked with the mouse (i.e. it is "framed"). Now just click "Save" and the former background image will be replaced in the web page editor by the one you just selected. In addition, it is now also displayed in the settings area of the banner as "Background Image".