Create Websites with CHEETAH

Special websites and techniques (1)

In this chapter some special website techniques, a few tips and tricks as well as some general design rules shall be presented and how to best implement them with "Cheetah". However, they are - with exceptions - to be considered only as suggestions and perhaps as a kind of idea generator.
 

Rebuild existing web pages with "Cheetah“
 

Much more often than you think, the question arises whether you could not somehow port an already existing, natively or with one of the many other CMS systems or web construction kits created website to "Cheetah". The answer to this question is clearly "no". This even applies to websites created with the predecessor of "Cheetah", the Builderall "PixelPerfect" Sitebuilder (unless it's a blog created with it, because there is a conversion option for that). But what can be envisaged is a rebuild in "Cheetah", which will be easier the less "bells and whistles" that rely on JavaScript or / and CSS etc the source website contains. Simple landing pages, for example, are often as quick to rebuild with "Cheetah" as they are to create from scratch. And of course you can additionally use the possibilities of "Cheetah" to make such a page even more visitor-friendly.
 

Note: If you reproduce web pages that do not originate from yourself or your client, you must absolutely observe copyright (and possibly trademark rights). This applies in particular to the media incorporated therein (only linking, not copying), any texts and special design features that suggest a certain "level of creation".
 

Ideally, you use a two-screen solution as the "development environment". On one screen you display the website to be reproduced and on the other screen you display the "Cheetah Sitebuilder" in the same browser. Here you start your work not with a template, but with an empty template.
 

Furthermore you need some browser add-ons (we will talk about them in a moment), the simple Windows editor, a calculator as well as a (real) notepad with pen for notes.
 

Let's start with the browser extensions (we assume you are using Google Chrome or a derivative of it). With their help, we primarily get information about color, sizes and proportions, as well as about the fonts used in each case and their sizes and attributes. It is also useful to have a tool that allows us to download all the images used on a web page. There are of course alternatives to each of the add-ons suggested below. So take a look at the Google Webstore to see for yourself what else is available.
 

1. Extract images from a webpage

Image Downloader

With this Chrome extension you can download all (or selected) images of the website in the active tab.
 

The downloaded images should then be uploaded to Cloudinary, preferably in a separate folder per website, and - if not already done - given an SEO-friendly file name.
 

2. Measure distances on the web page

Dimensions

Whenever you need to measure distances between clearly colored HTML elements on a web page, this easy-to-use Chrome extension is the tool of choice.
 

3. Define colors

ColorPick Eyedropper

When reproducing a web page, it is important to reproduce the colors of the original page exactly. To do this, you need a tool that determines the color values (usually RGB Hexa) of a pixel touched with the mouse pointer and allows to copy them. Such a Chrome AddOn is the ColorPick Eyedropper, with which it is easy to transfer a color value into the color settings of a "Cheetah" - element.
 

4. Designer Tools

This Chrome AddOn is indispensable if you want to measure the size of elements on a web page (images, text containers, etc.) with pixel precision. To do this, you only need to touch the element to be examined with the mouse and a frame with length and width labels is immediately displayed.
 

TB Amazon