Styles und Formate

Wie erhalten wir das einheitliche Layout unserer Homepage ?
Ein paar Grundregeln, Hinweise und eine Hilfestellung zur Handhabung

 

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Normaler Text

1. Text im MODx-Editor

Im MODx-Editor gibt es folgende Formatierungsmöglichkeiten für Text:

 

Grün erscheinender Text ist unformatiert. Damit sollte grundsätzlich begonnen werden. Danach ist der Text mit der Maus zu markieren und über FORMAT entsprechend den Wünschen zu formatieren.

Der Standardtext erhält das Format NORMAL

Die im Backend einer Seite angelegte SEITENüberschrift erscheint im Editor nicht. Sie hat automatisch die fest vorgegebene Größe und das Format

ÜBERSCHRIFT 2 (diese Seite: Styles und Formate)

 

Die Standardüberschrift innerhalb einer Seite sollte demnach das nächstkleinere Format ÜBERSCHRIFT 3 erhalten.  Sie rückt vom Seitenrand weg, bildet unterhalb einen dünnen Trennstrich und oberhalb einen etwas  dickeren Absatzstrich.

 

 

ÜBERSCHRIFT 4 hat zwar die gleiche Größe wie Überschrift 3,  ist aber so formatiert, dass sie links am Seitenrand beginnt. Sie bildet keinen Trennstrich und keinen Absatzstrich ober- bzw. unterhalb der Überschrift.

Die Überschrift 4 findet hauptsächlich Anwendung bei:
Überschriften, die keinen Absatz wie bei Überschrift 3 bilden sollen, also

• z.B. bei Aufzählungen (Beispiel)
  oder
• in Kombination mit Bildern (Beispiel)
  

ACHTUNG: Wer aus Textverarbeitungsprogrammen (z.B. Word) Texte in den MODx-Editor kopiert, nimmt unfreiwillig Formatierungen mit, die im Editor nicht zu sehen sind. Als Zwischenschritt sollte daher stets zunächst in den Windows-Editor kopiert werden und von diesem weiter in den MODx-Editor.

Alternativ kann das Symbol des Radiergummis im MODx-Editor gewählt werden. Dazu den einkopierten Text mit der Maus markieren und anschließend den Radiergummi "betätigen". Diese Methode führt aber nicht in allen Fällen zu einer Entfernung von "übertragenen" Formatierungen. Dies kann nur bei Kenntnissen im Quellcode überprüft und geändert werden. Nicht zu verwechseln: Die Anwendung des Radiergummis führt NICHT dazu, dass die Schrift im MODx-Editor wieder unformatiert/grün wird. Es werden "nur" zusätzliche unsichtbare Formatierungbefehle entfernt.

Die Seiten sollen nach XHTML valide sein. Andere Textformatierungen als die hier erwähnten führen zwangsläufig zu Problemen bei der Validierung.

Die Texteingabe erfolgt fortlaufend, d.h. insbesondere an der Seitenbegrenzung des Editors wird KEINE Worttrennung vorgenommen. Das tatsächliche Erscheinungsbild der Homepage ist von der Monitorgröße und Monitorauflösung des Betrachters abhängig und daher verschieden.

2 . Bilder im MODx-Editor

Für Bilder stehen folgende Styles zur Verfügung

Die Bildstyles sind grundsätzlich selbsterklärend, Bild links, rechts, zentriert.

Besonderheiten:

• Bild links führt zu einem Einrücken des Bildes

Bild mit Style BILD LINKS

Bild ohne Style
 

• Bild zentriert ist nur bei EINEM Bild möglich, nicht bei mehreren Bildern nebeneinander.

3 . Kombinationen von Text und Bild im MODx-Editor

Man beginnt mit der Eingabe des Textes, erst danach werden die Bilder an der gewünschten Stelle eingebaut.

Die Standardvarianten sollten grundsätzlich sein:

 

• Als Überschrift 3 MIT Absatzbildung:
  

BILD LINKS mit ÜBERSCHRIFT 3, dabei Bildgröße 100 x 75 Pixel. Das sieht dann wie folgt aus:

Überschrift 3

Das Bild ist mit Style BILD LINKS ausgezeichnet und wird direkt neben der ÜBERSCHRIFT 3 platziert. Dadurch kommt die Überschrift "nach oben". Weiterer Text beginnt dann hier rechts vom Bild und wird nach weiter unten auf die gesamte Breite der Seite ausgedehnt, wenn der Text nur ausreichend lang dafür ist........

Eine alternative Variante:

Das Bild wird nicht neben der ÜBERSCHRIFT 3 eingefügt, sondern bei dem beginnenden fortlaufenden Text. Dies sieht dann wie folgt aus:

Überschrift 3

Das Bild ist ebenfalls mit Style BILD LINKS ausgezeichnet. Hier steht die Überschrift 3 oberhalb des Bildes, der laufende Text beginnt aber ebenfalls hier rechts neben dem Bild.

• Als Überschrift 4  OHNE Absatzbildung:

 

Überschrift 4

Das Bild hat den Style BILD LINKS und wird neben der Überschrift platziert, darunter beginnt dieser Text im Format NORMAL. Die ÜBERSCHRIFT 4 macht hier im Gegensatz zur Überschrift 3 keine Trennstriche über oder unterhalb des Textbereichs. Dies lässt sich im direkten Vergleich zu vorstehendem Beispiel mit Überschrift 3 unschwer erkennen. Die waagrechten dünnen Trennlinien sind bei Überschrift 4 nicht vorhanden.

Wie bei der Überschrift 3 ist auch bei Überschrift 4 folgende Variante möglich:

Überschrift 4

Das Bild wird wieder mit Style BILD LINKS ausgezeichnet. Hier wird das Bild nicht neben der ÜBERSCHRIFT 4 platziert, sondern am Anfang des beginnenden fortlaufenden Textes.

Und wenn der Text lang genug ist, ragt das Bild auch nicht in den nachfolgenden Beitrag hinein ........

• Als reine Überschrift 4, ohne oder mit Aufzählung:

 

Wichtig

Wichtig

Wichtig

 

1. Wichtig 1

2. Wichtig 2

3. Wichtig 3

• Als Bilderverwendung  innerhalb eines Textes:
  

BILD ZENTRIERT oder BILD LINKS, maximale Bildgröße 200 x 150 Pixel - von Ausnahmen abgesehen.

Das Bild ist mit BILD ZENTRIERT ausgezeichnet und hat die vorgenannte Größe. Im Editor erscheint es nicht zentriert, aber davon nicht beeinflussen lassen.

Wie dieses Beispiel zeigt, ist das Bild mit Style BILD LINKS  eingerichtet. Dadurch beginnt der Text neben dem Bild und nicht unterhalb.

 

Beispiel mit Bildgröße 200 x 150 Pixel

 

 

 

In diesem Fall steht mehr Platz für den seitlichen Text zur Verfügung, das Bild hat die Größe 100 x 75 Pixel. Style des Bildes ebenfalls BILD LINKS

 

 

Zu "Anleitung"

Joachim Klemm, letzte Änderung: 02.10.2007 09:44, Dokumenten-ID: 166