Grafik-Design Mohr
Agentur für professionelles Grafik-Design und moderne Webseiten

Einfacher Text ohne Formatierungen. - < body >

Einfacher Text in Bold / Fett. - < b >

Layout 1 - Diese Headline wird nur als Top-Headline am Seitenanfang genutzt! Dieser Typ ist voreingestellt als Standardheadline, zur Erstellung einer Sub-Headline siehe Typ "Themen-Ueberschrift mit Linie".
>>> h1-Überschriften sind SEO relevant.

Layout 2 - Diese Headline wird genutzt, um auf einer Seite Sub-Headlines zu nutzen (z.B. bei einem neuen Inhaltsabsatz), außer bei Verwendung des Inhaltselemnts "Zweispaltig", s.u. "Themen-Ueberschrift ohne Linie / h3"!
>>> h2-Überschriften sind SEO relevant.

Layout 3 - Diese Headline kann verwendet werden um eine Sub-Headline auch in einem zweispaltigen Inhalt oder Ähnlichem einzusetzen.

Layout 4 - Diese Headline kann für besondere Auszeichungen durch ihre rote Textfarbe verwendet werden um eine Sub-Headline in etwas größer als normaler Textgröße aber kleiner als die Subheadline (Absatzueberschrift) darzustellen.

Layout 5 - Diese Headline kann verwendet werden um eine Sub-Headline in normaler Textgröße aber in Fettdruck darzustellen. Sie sollte für kleinere Hervorhebungen und als richtige Absatzüberschrift verwendet werden.

interner Link im gleichen Fenster zu einer Unterseite (internal-link)

interner Link in einem neuen Fenster zu einer Unterseite (internal-link-new-window)

externer Link in einem neuen Fenster zu einer neuen Webseiten (external-Link-new-window)

E-Mail-Link zum Öffnen des lokalen E-Mail-Programmes und Verfassen einer neuen E-Mail (mailto)

Download-Link zum Download einer Datei (download-link)

Text: Einfache Erstellung eines Artikels ohne Bild.

beispielhaft Quellangabe mit dem neuen Style "quellangaben"

beispielhaft Wichtig mit dem neuen Style "wichtig"

Erstellung eines Artikels mit Bild oder Bildern. Das Bild kann im Text ausgerichtet werden (Auswahl: im Text rechts), über oder unter dem Text (Auswahl: über/unter dem Bild rechts).  

Zur Veranschaulichung die entsprechenden Icons zur richtigen Bildausrichtung. Andere Ausrichtungen als die genannten sollten zur Wahrung des Layouts nicht genutzt werden.:

 1.) Im Text rechts

 2.) Unter dem Text rechts 

 3.) Über dem Text rechts

Wichtig: Zur Einhaltung der Gestaltungsvorlagen sollte das Bild immer zum rechten Rand ausgerichtet sein und die Auswahlbox "Rahmen" aktiviert werden. Ein Bild im Element Text m/Bild und der Ausrichtung "im Text .." wird automatisch auf eine festgelegte Breite verkleinert. Bilder über und unter dem Text sollten, um das Layout zu wahren, auf folgende Breiten festgelegt werden:

• 1 Bild in einer Zeile: max.600 px
• 2 Bilder in einer zeile: max. 300 px

Zur Wahrung des vorgesehenen Designs sollten nicht mehr als 2 Bilder in einer Reihe verwendet werden.

Beispielseiten:

Text m/Bild, Auswahl "im Text rechts":

Ansprechpartner

2 Bilder, Breite 197 px, Ausrichtung rechts: 

Leistungen  (Bilder unter dem Text)

Hier können nur Bilder ohne Text eingesetzt werden. Bilder in diesem Element können die ganze Breite des Inhaltsbereiches einnehmen. (siehe Top-Bilder) Es sollten die gleichen Konventionen wie für das Inhaltselement "Text m/Bild" eingehalten werden, sofern es sich nicht um Top-Bilder über die ganze Inhaltsbreite handelt.

Im Inhaltselement "Erweiterte Tabelle" können Tabellen mit Hintergrundfarbe und Rahmen angelegt werden. Dafür müssen in dem entsprechenden Feld "CSS-Klasse" oben ersichtliche Einträge gemacht werden.

Grundsätzlich muss in der Einstiegs-Eingabemaske im Feld "CSS-Klasse" der Wert "tablestyle" eingegeben werden. Werden die Angaben nicht gemacht, erscheint der Text unformatiert.

Zum Speichern der Änderungen oder Einträge muss zunächst übernehmen angeklickt werden und danach nochmal auf den normalen Button "Dokument sichern" am Fuß der Seite geklickt werden.

Beispielseite: Öffnungszeiten

Wichtig: In den Eingabefeldern des Elementes "Erweiterte Tabelle" dürfen keine Anführungszeichen verwendet werden.

• ohne Verwendung des Rich-Text-Editors:
• Listenpunkt1
• Listenpunkt2
• Layout "Normal"
• Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

• ohne Verwendung des Rich-Text-Editors:
• Listenpunkt1
• Listenpunkt2
• "Layout 1"
• Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

unter Verwendung des Rich-Text-Editors:

• Listenpunkt1
• Listenpunkt2
• Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

unter Verwendung des Rich-Text-Editors:

1. Listenpunkt1
2. Listenpunkt2
3. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Interner Link zu einer Unterseite auf der eigenen Webseite, der sich im aktuellen Fenster öffnet.

Ein einfacher interner Link.

Zur internen Unterseite

Externer Link zu einer anderen Webseite, der sich im aktuellen Fenster öffnet.

Zur externen Webseite  

Interner Link zu einer Unterseite auf der eigenen Webseite, der sich in einen neuen Fenster öffnet.

Zur internen Unterseite Externer Link zu einer anderen Webseite, der sich in einen neuen Fenster öffnet.

Zur externen Webseite  

E-Mail: mail@mail.de Blindtext  

Dies ist ein Beispiel für einen Link, zum „Downloaden“ von Dokumenten

Musterdokument downloaden