Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (4)
Hinweis: Der Editor wird geschlossen, sobald Sie in einen Bereich außerhalb des Textelements klicken.
Alternativ können Sie aber auch ein spezielles Editorfenster verwenden, um insbesondere längere Texte zu ändern oder einzugeben. Es wird aufgeblendet, sobald Sie im Kopfmenü des Textbereichs auf das Symbol „T“ klicken. Beachten Sie dabei, das hierin der Text in der gleichen Farbe angezeigt wird wie im Webeditor („weiß“ ist hier eventuell das Problem – mit der Maus einfach im Editor Textbereich markieren und der Text wird trotz weißem Hintergrund sichtbar).
Wie Sie an diesem Beispiel sehen, ist der neue Text zu lang. Um ihn optimal auf der Webseite anzuordnen, müsste die Schriftgröße etwas verkleinert werden. Das lässt sich im Editor erst einmal leicht über die Klappbox „Size“ realisieren. Da es sich hier aber um eine Header-Überschrift der 1. Hierarchiestufe handelt, bietet sich hier eine andere Möglichkeit an, nämlich das Heading 1 – Format generell (d. h. für alle H1-Überschriften der Website) zu ändern. Dazu klicken Sie im Hauptmenü des Editors (also ganz oben) auf die mit „A“ beschriftete Schaltfläche und verringern mit dem Schieberegler der H1-Überschrift die Fontgröße solange, bis der Schriftzug nur noch eine Zeile auf der Webseite einnimmt. Das dürfte bei einer Schriftgröße von 80 Pixeln der Fall sein. Wenn Sie möchten, können Sie hier gleich noch global die Schriftgröße für die Smartphonevariante, die Schriftart und die Schriftfarbe ändern. Und das geht natürlich separat für jedes Heading 1 bis 6 sowie für die Absatz-Schriftart (ausprobieren!).
Zur Übung können Sie auf diese Weise nun auch alle anderen Texte durch eigene Texte und eigene Textformatierungen ersetzen.
Nun könnte es sein, dass Sie die Position eines fokussierten Elements auf der Webseite ändern möchten. Am Einfachsten ist es, das fokussierte Element mit der Maus an genau den gewünschten Ort der Webseite zu verschieben. Dazu müssen Sie nur die Maus mit gedrückter linker Maustaste bewegen (Achtung – die Kursorform ändert sich) und auf diese Weise das Element zum neuen Ort verschieben. Dabei werden oftmals grüne Hilfslinien, die sich u. a. an anderen Elementen der Webseite orientieren, angezeigt, was sehr nützlich sein kann. Feintuning kann dann mit den Kursortasten erfolgen, mit deren Hilfe sich das fokussierte Element pixelgenau verschieben lässt. Die Größe eines Elements (bei Texten das umschriebene Rechteck) lässt sich übrigens genauso mit der Maus (und oftmals über die Eigenschaften „Höhe“ und „Breite“ im Randmenü) ändern. Nur hier ist der „Angriffspunkt“ der kleine blaue Kreis in der rechten unteren Ecke, den Sie mit dem Mauszeiger fassen (auch hier ändert sich spezifisch dessen Form) und mit gedrückter linker Maustaste hin – und herbewegen können, wodurch sich gleichzeitig die Größe des Elements ändert („Feintuning“ bei vielen Elementen über deren Eigenschaftskategorie „Größe“ möglich – Randmenü).
Weiterhin finden Sie bei fast allen Elementen (z. B. Box, Bild etc.) am linken unteren Rand einen blauen Kreis mit einem weißen Dreieck. Wenn Sie dort die Maus ansetzen, dann können Sie damit das Element nur noch vertikal verschieben, d. h. die x-Koordinate bleibt so wie sie ist. Und alle Elemente, die sich je nach Bewegungsrichtung unterhalb oder oberhalb des Elements befinden und in dieser Richtung mit diesem überlappen, werden mit verschoben. Auf diese Weise kann man leicht Platz für neue Elemente auf der Webseite schaffen, was ansonsten bei längeren Webseiten schnell in Arbeit ausarten könnte…
Wenden wir uns jetzt dem Logo zu. Es ist offensichtlich auch nur ein Template und muss deshalb durch ein Eigenes ersetzt werden. Hier ist es sinnvoll, dass man sich mit Hilfe eines Malprogramms schon vorher eine passende Bilddatei zurechtgemacht hat. Da wir hier einen transparenten Hintergrund benötigen, ist das png-Bildformat dafür am besten geeignet (übrigens, der „Fotomanager“ von Builderall ist das ideale Tool, um Bilder mit einem transparenten Hintergrund zu versehen). An dieser Stelle gehen wir jetzt einmal davon aus, dass eine derartige Datei in der richtigen Größe (ungefähr, denn die Bildgröße ist im Sitebuilder natürlich stufenlos änderbar) bereits in einem für diese Zwecke vorgesehenen Ordner auf Ihrem Computer liegt. Also klicken wir erst einmal das Logo im Webeditor an und fokussieren es auf diese Weise (ein blauer Rahmen und das Kopfmenü wird sichtbar). Im rechten Randmenü sind jetzt alle Elementeeigenschaften des „Bild-Elements“ sichtbar und können bei Bedarf geändert werden.
Hinweis: Eventuell müssen Sie zuvor im Kopfmenü auf das Stift-Symbol klicken, damit die Seite „Einstellungen“ im Randmenü aktualisiert wird. Achten Sie darauf, dass anschließend der richtige Name des Typs des fokussierten Elements (in diesem Fall „Bild“) oben im Randmenü erscheint.
Was wir jetzt als Erstes machen möchten, ist schlicht das Bild zu tauschen. Dazu gehen wir im Randmenü auf den Bereich „Allgemeine Einstellungen“ und dort zu „Bild ändern“ (wobei wir auf genau diese blaue Schaltfläche klicken). Es öffnet sich jetzt das „Builderall Image Repository“. Das ist die Stelle, in die Sie ihre eigenen Bilder hochladen bzw. auch die Stelle, in der Builderall umfangreiche Bildersammlungen (Images, Icons, Buttons und gif’s) zur Nutzung anbietet. Bevor wir hier weitermachen, sollten Sie ein wenig in diesem Fenster herumklicken, um einen kleinen Überblick darüber zu erhalten.
Hinweis: Sie sollten sich von vornherein angewöhnen, im linken Bereich unter „User files“ themen- oder webseitenbezogene Ordner anzulegen, um darin Ihre Bilder zu organisieren. So macht es beispielsweise Sinn, hier einen Ordner „Friseursalon“ anzulegen, in der Sie alle Bilder ablegen, die Sie für ihre „Friseur-Website“ verwenden.
Das „Hochladen“ eines Bildes ist denkbar einfach – Schaltfläche „Datei wählen“ anklicken und über den Dateiauswahldialog „Bild“ (bzw. Bilder, Mehrfachauswahl möglich) auswählen. Anschließend wird das oder werden die ausgewählten Bilder im Repository angezeigt. Die Bilder müssen dabei im jpg, png oder gif-Format vorliegen und dürfen nicht größer als 4 MB sein.
Wenn Sie jetzt den Mauszeiger über ein Bild bewegen, dann werden Ihnen innerhalb des Bildes vier Icons aufgeblendet, die verschiedene Funktionen repräsentieren: Dateinamen editieren – Bild in ein kleines Malprogramm laden – Bild groß anzeigen – Bild löschen.