Gestaltungsgrundlagen

Um Ihre Webseite mit allen Möglichkeiten zu gestalten, rufen Sie die Erweiterte Gestaltung auf. Sie bearbeiten Design und Layout in einer WYSIWYG-Ansicht, Änderungen werden sofort angezeigt.
Der Arbeitsbereich im Browser ist zweigeteilt. Im oberen Teil sehen Sie die Multifunktionsleiste . Hier werden die verfügbaren Funktionen angezeigt. Siehe dazu auch Multifunktionsleiste und Gestaltung.
Im unteren Teil sehen Sie die Seitenvorschau. Darin bearbeiten Sie direkt Design und Layout . Die Seitenvorschau zeigt Ihnen die aktuelle Webseite im Design und Layout des ausgewählten Styles, siehe dazu Eigene Styles.
Die Webseite ist prinzipiell in folgende funktionelle Bereiche eingeteilt, siehe Abbildung 8.
Abbildung 8: Struktur einer Webseite

Bereich 1:
Kopfzeile
Bereich 2:
Oben
Bereich 3:
Links
Bereich 4:
Inhaltsbereich
Bereich 5:
Rechts
Bereich 6:
Unten
Bereich 7:
Fußzeile

Dazu kommt noch der umgebende Arbeitsbereich des Browsers, in dem die Webseite angezeigt wird. Siehe dazu Seitenansicht im Browser.
Wollen Sie einen Bereich bearbeiten, klicken Sie mit der Maus darauf. Dadurch wird dieser Bereich aktiviert. Er wird durch einen Rahmen markiert und die Multifunktionsleiste zeigt die Funktionen, welche Sie in diesem Bereich ausführen können.
Von der Bearbeitung und den Einstellmöglichkeiten her lassen sich horizontale und vertikale Bereiche sowie der Inhaltsbereich unterscheiden:

Horizontale Bereiche:
Kopfzeile, Oben, Unten, Fußzeile
Die horizontalen Bereiche erstrecken sich meist über die gesamt Breite der Webseite. Sie sind breiter als hoch. Sie enthalten meistens Links und schmale Anzeigeelemente. Typische Seitenelemente für horizontale Bereiche sind unter anderen:
  • Logo
  • Name der Webseite
  • Verknüpfungen zu Startseite, Impressum, AGB, Kundeninformationen, Kategorien, Warenkorb
  • Flaggen zur Länderauswahl
Vertikale Bereiche:
Links, Rechts
Die vertikalen Bereiche sind meist zwischen den horizontalen Bereichen angeordnet und liegen parallel zum Inhaltsbereich. Sie sind höher als breit. Sie enthalten meistens Boxen mit Texten, Listen, Links oder Eingabefelder. Typische Seitenelemente für vertikale Bereiche sind unter anderen:
  • Liste der Hauptkategorien
  • Anmeldung
  • Miniwarenkorb, Warenkorbstatus
  • Produktsuche
  • Aktionsprodukte
Inhaltsbereich:
Während die anderen Bereiche hauptsächlich Funktionselemente wie Menüs und Links enthalten, werden im Inhaltsbereich die Inhalte der Seiten angezeigt, welche Sie unter Inhalt / Kategorien angelegt haben.
Die Größe des Inhaltsbereiches wird durch die Höhen- und Breitenangaben der anderen Bereiche sowie den angegebenen Innenabstand festgelegt, für den Inhalt bleibt praktisch der "Rest" des Browser-Fensters.

Die Parameter der einzelnen Bereiche ergeben erst in Kombination das fertige Design. Dabei gibt es Parameter, die sich gegenseitig beeinflussen beziehungsweise einander bedingen. Diese Wechselwirkungen müssen beachtet werden. Folgende Hinweise sollen Ihnen helfen:
Besonderheiten für Hintergrundbilder
In jeder Designvorlage sind für die Hintergrundbilder jeweils passende Vorlagen geladen. Diese können Sie durch Ihre eigenen Bilder ersetzen. Löschen Sie Ihre Bilder, wird automatische die Vorlage wieder geladen. Wollen Sie kein Hintergrundbild, müssen Sie auch diese Vorlage löschen. Klicken Sie dazu auf den Link Vorlage löschen. Nach dem Löschen der Vorlage ändert sich die Bezeichnung des Links in Vorlage wiederherstellen. Durch Klicken auf diesen Link können Sie die Standardvorlage für das Hintergrundbild wiederherstellen, ohne nach Dateinamen suchen zu müssen.
Hinweis: Wenn Sie Hintergrundbild und Hintergrundfarbe gleichzeitig eingestellt haben, überlagert das Hintergrundbild immer die Hintergrundfarbe. Wenn Sie also die Farbe anzeigen wollen, löschen Sie das Hintergrundbild. Wenn das Hintergrundbild den Bereich komplett ausfüllen soll, muss es in seiner Größe zum Bereich passen oder Sie müssen Bild kacheln aktivieren.
Bild kacheln
Hintergrundbilder können entweder einfach angezeigt oder so oft dargestellt werden, dass sie den Hintergrund der gesamten Seite ausfüllen. Dabei wird das Bild so oft neben- und untereinander angeordnet, wie es auf die Seite passt.