Webseiten, Logodesign und Visitenkarten

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

So, 24.09.2017

Einfacher Text ohne Formatierungen. - < body >

Einfacher Text in Bold / Fett. - < b >

Headline Typ "Seiten-Ueberschrift schwarz bold" - h1

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.

Headline Typ "Themen-Ueberschrift schwarz, bold" - h2

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.

Headline Typ "Themen-Ueberschrift ohne Linie" - h3

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

Headline Typ "Themen-Ueberschrift rot ohne Linie" - h4

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.

Headline Typ "Absatz-Ueberschrift (einfach Fett)" - h5

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.

Link-Layout

Öffnet einen internen Link im aktuellen Fensterinterner Link im gleichen Fenster zu einer Unterseite (internal-link)

Öffnet einen internen Link in einem neuen Fensterinterner Link in einem neuen Fenster zu einer Unterseite (internal-link-new-window)

Öffnet einen externen Link in einem neuen Fensterexterner Link in einem neuen Fenster zu einer neuen Webseiten (external-Link-new-window)

Öffnet ein Fenster zum Versenden einer E-MailE-Mail-Link zum Öffnen des lokalen E-Mail-Programmes und Verfassen einer neuen E-Mail (mailto)

Startet das Herunterladen der DateiDownload-Link zum Download einer Datei (download-link)

Inhaltselement Text

Text: Einfache Erstellung eines Artikels ohne Bild.

spezielle individuelle Styles im Content

beispielhaft Quellangabe mit dem neuen Style "quellangaben"

 

beispielhaft Wichtig mit dem neuen Style "wichtig"

Inhaltselement Text m/Bild

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)

Inhaltselement Bild

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.

Inhaltselement "Erweiterte Tabelle"

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.

Inhaltselement "Aufzählung"

  • 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.

Inhaltselement "Aufzählung" - Layout 1

  • 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.

Listenpunkte in der HTML Area

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.

Nummerierungspunkte in der HTML Area

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.

Links mit icon

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

 
tmpl-2-textseite-ohne-grafik.html