Benutzer-Werkzeuge

Webseiten-Werkzeuge


de:web5:layout_templates

Layoutvorlagen

Um eine einheitliche Erscheinung zu erhalten und eine einfache Navigation zu ermöglichen, sind Websites typischerweise in einem einheitlichen Design gehalten. Bei StudioLine definieren die Layoutvorlage und das Layout allgemeine Designelemente, wie z.B. den Hintergrund, Logos, Überschriften, Navigationsobjekte und Platzhalter für Bilder. Sie bestimmen auch bestimmte automatisierte Standardfunktionen, wie z.B. das Erstellen von automatischen Detailseiten und Bildverarbeitungsvorgaben.

Layoutvorlagen oder Layout

Die folgende Auflistung gibt einen Überblick zu den Unterschieden zwischen Vorlagen und Layouts bezüglich deren Reichweite, wann sie verwendet werden und wie sie interagieren.

EffektLayoutvorlageLayout
ReichweiteBetrifft alle neuen Seiten und deren Detailseiten innerhalb eines Projekts.Betrifft eine einzelne Seite und deren automatisch erstellte Detailseite.
ZeitpunktWenn die Seite erstellt wird, oder wenn die Vorlage auf eine bestehende Seite angewandt wird.
Änderungen in der Vorlage werden automatisch auf alle Seiten, denen die Vorlage zugewiesen wurde, übertragen.
Ein Layout stellt einen integralen Bestandteil einer Seite dar.
InteraktionKann auf bestehende Seiten angewandt oder als Standardvorlage für ein Projekt festgelegt werden.Kann als neue Layoutvorlage gespeichert werden.

Wenn Sie allgemeine Designelemente oder Einstellungen für eine Vielzahl von Seiten gemeinsam nutzen wollen, empfiehlt es sich, diese in einer Layoutvorlage zu platzieren. Bei nur einmaliger Verwendung auf einer Seite mit automatisch erstellten Detailseiten sollten allgemeine Designelemente und Einstellungen in einem Layout platziert sein. Sollen Designelemente nur auf eine Seite begrenzt Anwendung finden, platzieren Sie diese direkt im Seiteneditor.

Verwenden einer Layoutvorlage

Wird eine Seite neu erstellt, wird anfänglich immer die in den Projekteinstellungen definierte Standardlayoutvorlage verwendet. Um eine andere Layoutvorlage zu verwenden:

  • öffnen Sie die Seite
  • öffnen Sie den StudioLine Explorer
  • wählen Sie „Layoutvorlagen“ aus
  • legen Sie die gewünschte Vorlage fest und ziehen diese auf Ihren Arbeitsbereich.

Anmerkung: Sobald eine andere Layoutvorlage auf die Seite angewandt wird, kann dieser Schritt nicht wieder mit der „Rückgängig-Funktion“ aufgehoben werden. Vorherige Anpassungen, Standard- und Bildeinstellungen für diese Seite und Bildansichten können somit dauerhaft verloren gehen. Um Probleme zu vermeiden, verwenden Sie bitte die richtige Vorlage, bevor Sie an der Seite selbst zu arbeiten beginnen.

Der Layouteditor

Der Layout- und der Layoutvorlagen-Modus sind eine Erweiterung des Seiteneditors und bieten fast dieselben Funktionen. Man kann sich die Layouts als Kontrollebene der Seite vorstellen und die Layoutvorlage als deren Blaupause. Um sich das Layout einer speziellen Seite anzusehen und anzupassen:

  • öffnen Sie den Seiteneditor
  • wechseln Sie in den Layout-Modus

Um sich die Layoutvorlage anzusehen oder anzupassen:

  • wechseln Sie in den Layoutvorlagen-Modus
  • wählen Sie eine Vorlage aus

Objekte in das Layout übertragen

Aus kreativer Sicht ist es oftmals einfacher, zuerst eine Seite zu erstellen, ohne dabei sofort festzulegen, ob einige Objekte in das Layout gehören. Sobald der kreative Prozess abgeschlossen ist:

  • öffnen Sie die Seite im Seiteneditor-Modus
  • wählen Sie „Layoutobjekte sperren“ aus dem Bearbeiten-Menü
  • wählen Sie alle Objekte aus, die Teil des Layouts sein sollen
  • wählen Sie „Objekt ins Layout übernehmen“ aus dem Kontextmenü

Anmerkung: Dies gilt nicht für Layoutvorlagen!

Detailseiten (Bildansichten)

Mit dem Fenster „Bildansichten“ können Sie Vorlagen zur Bildanzeige für Ihre Webseite erstellen. So können Sie Effekte für alle Bilder auf einer Webseite festlegen.

Die große Stärkt von Vorlagen entsteht erst durch das Definieren von Detailseiten. Solche Vorlagen erzeugen später automatisch verlinkte Unterseiten für die einzelnen Bilder mit Navigationslinks und Textinhalten, die aus den Bildbeschreibungen geladen werden.

Normalerweise wird das „Prototypbild“ für eine Webseite relativ klein eingestellt, wie eine Miniaturansicht. Werden später Bilder der Seite hinzugefügt, erhalten diese alle Bildwerkzeuge und die Größe des Prototypbildes. Mit dem Erstellen von Detailseiten können Sie die Bilder größer darstellen lassen. Die automatisch erstellten Unterseiten enthalten dann jeweils nur ein Bild aus der eigentlichen Seite, mit den Bildwerkzeugen und der Größe des für die Detailseite angegebenen Prototypbildes. Ein Besucher der Webseite gelangt dann durch einen Klick auf eines der Bilder der Seite auf die Detailseite, oder kann über die Navigationslinks durch die einzelnen Detailseiten blättern.

Mehrere Detailseiten erstellen

Über das Fenster „Bildansichten“ können Sie Detailseiten für jede Webseite erstellen. Dort können die anzuzeigenden Bilder eigene Effekte erhalten.

Um eine Detailseite zu erzeugen, öffnen Sie das Layout oder die Layoutvorlage.

Das Fenster „Bildansichten“ ist automatisch sichtbar. Es enthält eine Liste mit den Detailseiten (anfangs „Bildansicht 1“) und der eigentlichen Webseite inklusive einer kleinen Vorschau. Durch einen Klick auf die Schaltfläche „Neue Bildansicht“ wird eine weitere Unterseite mit der Bezeichnung „Bildansicht 2“ erstellt.

Benutzen Sie bei den Texten so oft wie möglich Platzhalter anstatt statischem Text, da diese später mit den entsprechenden Inhalten aus den Bildbeschreibungen ersetzt werden.

de/web5/layout_templates.txt · Zuletzt geändert: 2021/04/26 09:27 (Externe Bearbeitung)