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:
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:
- In Bereichen haben Hintergrundbilder immer Vorrang vor Hintergrundfarben. Das heißt, wenn Sie ein Hintergrundbild laden und eine Hintergrundfarbe festlegen, überdeckt das Hintergrundbild die Farbe.
- Alle Größen und Abmessungen für die Beispiele sind in Pixel (px) angeben. Sie können auch andere, für Stylesheets verwendbare Größenangaben wie zum Beispiel Prozent (%) benutzen. Welche Angaben möglich sind und wie sie verwendet werden, dazu informieren Sie sich über entsprechende Fachliteratur oder Webseiten, wie zum Beispiel http://selfhtml.org.
- Probieren Sie die verschiedenen Einstellungen aus. Denken Sie daran, dass Sie mit der Rückgängig-Funktion jederzeit wieder den Ausgangszustand wiederherstellen können. Oder duplizieren Sie Ihren aktuellen Style und testen Sie die verschieden Möglichkeiten an der Kopie. Dafür gibt es in der Tabelle Ihrer eigenen Styles die Funktion Sicherheitskopie anlegen. Siehe dazu Eigene Styles. Wenn Sie dort das gewünschte Design erstellt haben, schalten Sie diesen Style für Ihre Kunden sichtbar.
Besonderheiten für HintergrundbilderIn 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 kachelnHintergrundbilder 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.