Wir überwinden Grenzen

Navigation - Bilder

• 2.1 Element 'Bild mit Bildunterschrift'
• 2.2 Element 'Text mit Bild und Bildunterschrift'
• 2.3 Element 'Ansprechpartner'
• 2.4 Element 'Bildergalerie'

2.1 Element 'Bild mit Bildunterschrift'

(Handbuch: _____ )

• Überschrift, nur im Backend sichtbar
• Bild hinzufügen  'bild-01.jpg' (Kuala Lumpur) aus 'Dateiliste', Bildbreite 490 px
  
• Titel 'Kuala Lumpur'
  (title-Attribut) Name bzw. Beschreibung des Bildes wird angezeigt / ggf. vorgelesen --> barrierefreies Programmieren
• Alternativer Text 'Malaysia: Kuala Lumpur'
  (alt-Attribut) Text, wenn Bild nicht angezeigt wird / werden kann
• Beschreibung (Bildunterschrift) 'Malaysia-Impressionen: Kuala Lumpur'
  Text, der unter das Bild gesetzt wird
     Vorsicht: Keine " (Gansefüßchen) im Beschreibungs-Text verwenden, ' (Hochkoma) erlaubt
  
• Mit Klick vergrößern, Bild soll bei Klick in Originalgröße angezeigt werden

Beispiel

2.2 Element 'Text mit Bild und Bildunterschrift'

(Handbuch _____ )

2.2.1 Element 'Text mit Bild und Bildunterschrift' - 1/3 - links

Textumflossenes Bild

• Überschrift, 'Textumflossenes Bild - 1/3 - links', wird im Frontend angezeigt, suchmaschinenrelevant, <h3>
• Inhalt, Text, der das Bild umfließt
• Bild hinzufügen, lageplan-alt-zk-155.png, angezeigte Bildbreite 155 px
  - Titel  'Veralteter Lageplan des Zentralklinikums'
  - Alternativer Text  'Veralteter Lageplan'
  - Beschreibung (Bildunterschrift)  'Lageplan (veraltet) - Zentralklinikum'
        Vorsicht: Keine " (Gänsefüßchen) im Beschreibungs-Text verwenden, ' (Hochkoma) erlaubt
• Spaltenbreite 1/3 (155px)
• Bildposition Link
  
  

Beispiel

2.2.2 Element 'Text mit Bild und Bildunterschrift' - 2/3 - rechts

Textumflossenes Bild

• Überschrift 'Textumflossenes Bild - 2/3 - rechts'
• Inhalt: Text Text, der das Bild umfließen soll
• Bild hinzufügen bild-02.jpg (Dateiliste)
  Pulau Lankawi, Wasserfall, angezeigte Bildbreite 325 px
• Titel  Lankawi, Wasserfall
• Alternativer Text  'Pulau Lankawi'
• Beschreibung (Bildunterschrift)  'Pulau Lankawi, Wasserfall'
     Vorsicht: Keine " (Gansefüßchen) im Beschreibungs-Text verwenden, ' (Hochkoma) erlaubt
• Klick-/Vergrößern ja, Bild soll bei Klick in seiner Originalgröße angezeigt werden
• Spaltenbreite 2/3 (325px)
• Bildposition Rechts
  
  
  

Beispiel

2.3 Element 'Ansprechpartner'

(Handbuch _____ )

• Überschrift  'Ansprechpartner', wird im Frontend gezeigt, suchmaschinenrelevant, <h3>
• Bild hinzufügen, 'Mustermann-1.jpg' (Dateiliste), 100x133 px
• Titel  'M. Mustermann'
• Alternativer Text  'Max Mustermann'
• Text, der neben dem Bild angezeigt werden soll
  
     Max Mustermann
     Komiker, Musiker, Schauspieler
  
     Ostfriesland
     Am Damm 15
  
     Telefon 0201 99887
     Telefax 0201 11223
     E-Mail   max.mustermann@trommel.de

2.4 Element 'Bildergalerie'

(Handbuch _____ )

2.4.1 Element 'Bildergalerie' - 1 Bild

• Überschrift, 'Kursangebote', wird nur im Backend angezeigt
• Bild hinzufügen, 'sk-komm-color-klein.jpg' (Dateiliste), 155x115 px
  - Title  'Kursangebot Kommunikation'
  - Alternativer Text  'Kursangebot Kommunikation'
  - Beschreibung  'Kursangebote zum Thema Kommunikation'

[Dokument speichern und schließen]

Beispiel

2.4.2 Element 'Bildergalerie' - viele Bilder

[Element bearbeiten]

• Bild hinzufügen,  7 sk-Bilder einfügen (Dateiliste), 155x115 px
  jeweils
  - Title  'Schulungskatalog: Kursangebot x'
  - Alternativer Text  'Kursangebot x'
  - Beschreibung  'Schulungskatalog: Seminarbereich 'x' '

Bei doppelten Bildern ggf. eines löschen, Bilderreihenfolge verschieben usw.

[Dokument speichern und schließen]

Beispiel

2.4.3 Element 'Bildergalerie' - viele Bilder und Formate, ohne Bildunterschrift

[Element bearbeiten]

• Bild hinzufügen,  alle 9 Bilder Haus-1 ... Haus-9 Haken setzen, 'Auswahl importieren' (Dateiliste)
  - Title 
  - Alternativer Text 
  - Beschreibung 

[Dokument speichern und schließen]

Beispiel