Sie sind hier: Deutsch > Die Docu > Admin > Seitenlayout

Seitenlayout

Jede in phpwcms erstellte Website basiert auf einem Seitenlayout. Ein Seitenlayout bildet das Raster indem die Höhen, Breiten sowie Abstände der einzelnen Standard-Blöcke festgelegt werden und so die Anordnung der Inhalte einer Website im Frontend steuert. Die Ausgabe erfolgt dabei anhand von HTML-Tabellen oder CSS DIV. Variationen des Layouts sind anhand von Eigenen Blöcken möglich und je nach Bedarf können Sie auch mehrere Seitenlayouts für eine Website definieren. Wir möchten nun auf die einzelnen Punkte des Seitenlayouts näher eingehen.

 

Layout Name:
Wählen Sie zunächst einen Sinnvollen Namen für Ihr Seitemlayout aus. Durch das aktivieren der Checkbox "Standard" definieren Sie diese Seitenlayout als Ausgangslayout für alle Vorlagen der Website. Ausgenommen sind Vorlagen, die explizit auf ein anderes Seitenlayout zugreifen.

Ausrichtung:
Bestimmen Sie an dieser Stelle, ob Sie ein links-, zentriert- oder rechtsbündiges Layout bevorzugen, bzw. benötigen.

Rand:
Sie können hier den Margin (Aussenabstand) der Website zum Browserrand bestimmen.
Die Angabe der Werte erfolgt in ganzen Zahlen (kein dezimal).

Hintergrund:
Bestimmen Sie in diesem Bereich die Hintergrundfarbe Ihrer Website. Zusätzlich können Sie auch eine Hintergrundgrafik definieren, indem Sie auf Ihren Grafikordner verweisen (z.B. template/ img/meinbg.gif).

Farbe:
Hier können die Farbwerte für Text und Links (Link, besucht, aktiv) definieren. Die Eingabe erfolgt als Hexadezimalwert (z.B. #FF0000).

JavaScript:
Wenn Sie z.B. im HTML Kopf ein JavaScript eingebaut haben und eine Funktion beim Seitenaufruf laden möchten, können Sie dies hier vornehmen. Der einfache Aufruf der Funktion meinScript(); genügt. Man kann dies jedoch auch in den Vorlagen vornehmen.

Seitentitel:
Ihre Kreativität ist gefragt! Bestimmen Sie hier den Titel Ihrer Seite. Dieser wird bei der Ausgabe in der Titelzeile des Browserfensters oben links angezeigt.  phpwcms bietet zudem einige Variationen zu Erweiterung des Titels unter "Titel zufügen". Probieren Sie es einfach mal aus. Sie können dabei auch eigene Trennzeichen verwenden. Als Standard ist | (Pipe) gesetzt.

Blöcke:
Wie soll Ihre Website aufgebaut sein? phpwcms bietet Ihnen die geläufigsten Boxmodelle. Sie können jedoch zusätzlich eigene Blöcke hinzufügen. Schreiben Sie dafür einen Namen Ihres gewünschten Blockes in Versalien (Großbuchstaben) in das Textfeld eigene.

Seitenaufbau:
Bestimmen Sie hier, ob Sie die Website als HTML-Tabelle oder CSS-DIV ausgeben möchten. Wenn Sie eher ein eigenes CSS-Layout (empfohlen) umsetzen möchten, müssen Sie dennoch ein Seitenlayout defienieren, dass jedoch ohne Werte für die einzelnen Spalten aufgebaut ist.

Wählen Sie dazu Eigener (aus Vorlage Haupt-Block) aus. Ihr Code muss folglich innerhalb einer später definierten Vorlage im Hauptblock untergebracht sein. Und schon können Sie Ihr eigenes CSS-Layout verwenden.

Hinweis:
Wenn Sie sich die Mühe machen und ein eigenes CSS verwenden, können Sie getrost auf alle Werte bis auf den Seitentitel verzichten und alle Angaben in Ihrer CSS-Datei vornehmen.

Definition der Standardblöcke und Platzhalter

Seitenraster von phpwcms
  1. Kopfzeile = (HEADER)
  2. links = (LEFT)
  3. Haupt = (CONTENT)
  4. rechts = (RIGHT)
  5. Fußzeile = (FOOTER)
  6. Abstand oben
  7. Abstand unten
  8. Abstand links
  9. Abstand rechts

Um den Bereich rund um die Blöcke verstehen zu können, muss man sich die Ausgabe vor Augen halten. Anhand der oben gezeigten Grafik möchten wir Ihnen die Ausgabe veranschaulichen.

Jeder Block verfügt über Textfelder für:

  • Breite
  • Farbe
  • Bild
  • Class

Die Breite erfolgt als ganze Zahl in px, der Farbwert als Hexadezimalwert. Bei Bild können Sie ein Hintergrundbild definieren. Verweisen Sie dazu auf die URL des Bildes (z.B. templates/img/meinbild.gif). Bei Class können Sie eine CSS Klasse angeben, die verwendet werden soll. Am einfachsten ist, wenn Sie Farbwerte für die einzelnen Felder vergeben und ein wenig experimentieren. Sie werden staunen, wie schnell Die den Dreh rausbekommen.

 

Weiter zu Vorlagen »



Artikel erstellt am: Montag, 29. Oktober 2007
Letzte Änderung: Dienstag, 04. Januar 2011