Beispiel Detailseite

Die Detailseite („Inhaltsseite“) ist der Standard-Seitentyp. Ihr Zweck ist die übersichtliche und strukturierte Darstellung von Informationen, Fakten und komplexen Inhalten für die verschiedenen Zielgruppen der LMU. Optional kann hier noch ein Bild hinterlegt werden. Auf dieser Seite zeigen wir Ihnen Beispiele der Absatzmodule.

Tipp
Alle Anleitungen zur Nutzung der Module finden Sie im WCMS Wiki

Standard-Inhalt mit (nur) Text

Dieses Modul ist das wichtigste Modul auf Detailseiten, um ausführliche und strukturierte Informationen darzustellen.

Setzen Sie sinnvolle Zwischenüberschriften

Um den Text gut zu struktuieren und schneller und leichter erfassbar zu machen.

Nutzen Sie Formatierungen

Sie haben auch die Möglichkeit den Text zu formatieren, indem Sie Texte fetten oder kursiv stellen. Oder hoch oder tief stellen.

Besonders wichtige Informationen können Sie mit der integrierten Infobox hervorheben

Sie haben verschiedene Möglichkeiten für Aufzählungen

  • Um kurze Texte ..
  • visuell schnell erfassbar zu machen
  1. Zahlen zur Darstellung von Schritten
  2. die nacheinander erfolgen müssen
  3. ...
  1. Alphabetische Kleinbuchstaben
  2. ....
  3. ...
  1. Alphabetische Großbuchstaben
  2. ...
  3. ..
  1. Römische Ziffern mit Kleinbuchstaben
  2. ...
  3. ..
  1. Römische Zifern mit Großbuchstaben
  2. ....
  3. ...

Sie können alle Varianten der Verlinkung nutzen

Zum Beispiel können Sie einen Interner Link auf eine Seite innerhalb Ihres Webauftritts setzen. Dabei können Sie auch einen konkreten Absatz auswählen, auf den Sie verlinken oder auch auf die andere Sprachversion der Seite. Dies ist hilfreich, falls Sie zum Beispiel eine Seite nur in einer Sprache vorhanden haben.

Falls Sie auf Websites außerhalb Ihres eigenen Webauftritts verlinken, können Sie den Externer Link verwenden. Hier sollte sich ein neues Browserfenster öffnen, sodass Ihre Nutzenden verstehen, dass Sie Ihren Webauftritt nun verlassen.

Außerdem können Sie auch aus dem normalen Fließtext heraus Links auf Dateien wie PDFs (PDF, 9 KB) setzen oder direkt auf Datenquellen wie Newsartikel oder Eventartikel oder einzelne Personenkontaktseiten.

Standard-Inhalt (mit Bild)

Eine Studentin liest in einem Arbeitsbereich des Philologicums

© LMU

Das Bild ist optional und kann links oder rechts ausgerichtet werden.

Tipp: Falls Sie mehrere Bilder im Text verwenden wollen, so teilen Sie den Text auf mehrere Standardmodule auf.

Standard-Inhalt (mit Teaser)

Der Teaser ist optional. Sie können ihn verwenden, um auf Seiten zu verlinken, die besonders relevant sind und die Ihre Besucherinnen und Besucher schnell finden sollen. Genauso können Sie auch auf Datensätze (Personenseiten, News-, Eventseiten) sowie Downloads (z.B. PDFs) im Teaser verlinken. Eine weitere Variante ist der Videoteaser, bei dem Sie ein Youtube, Vimeo oder LMUcast verlinken können.

Teaser können, links oder rechts platziert werden. Eine abwechselnde Gestaltung von untereinander angelegten Standardmodulen mit Bildern oder Teasern (links, rechts, links) kann auflockern, wirken. Bei mehr als 3 Standardmodulen dieser Art kann dies aber auch schnell unruhig wirken.

Tipp: Falls Sie mehrere Teaser im Text verwenden wollen, so teilen Sie den Text auf mehrere Standardmodule auf.

Die Ankündigung (Information)

Die Ankündigung gibt es in drei verschiedenen Varianten: Information, Hinweis und Warnung. Sie können Sie nutzen, um den normalen Lesefluss zu unterbrechen und um mit unterschiedlicher Intensität auf Besonderheiten hinzuweisen.

Die hier gezeigte Variante der Information ist dabei am unauffälligsten und ist nur ein zusätzlicher Hinweis, der sich relativ gut in das restliche Design der Website einfügt. und so auch längerfristig auf der Website vorhanden sein kann.

Die Ankündigung (Hinweis)

Die Ankündigung in der Variante Hinweis ist schon deutlicher und kann zum Beispiel genutzt werden, um auf typische Fehler bei einem Anmeldeprozess hinzuweisen. Sie weicht vom restlichen Design ab und sollte daher nur in wohlüberlegten Fällen dauerhaft auf Websites eingesetzt werden.

Die Ankündigung (Warnung)

Die Ankündigung in der Variante Warnung stört das restliche Design der Seite deutlich. Sie sollte nur für sehr kritische Hinweise genutzt werden, wie zum Beispiel der unerwartete Ausfall einer Vorlesung. Sie sollte im Regelfall nur temporär verwendet werden.

Akkordeon

... nur bei Bedarf (wenn man darauf klickt) die genaueren Details darzustellen.

Dies ist immer dann sinnvoll, wenn nicht alle Detailinformationen für alle Besucherinnen Ihrer Webseite gleichermaßen relevant sind und die Besucherinnen sich so gezielt die Details zu den Themen anschauen können, die sie betreffen.

Typisches Anwendungsbeispiel: Häufige Fragen (FAQs)

Jedes Element braucht eine Überschrift, die immer sichtbar ist.

Jedes Element muss einen Text enthalten, der nach dem Aufklappen sichtbar wird.

Im Dialog zu Bearbeitung der Akkordeon-Elemente werden diese in einer Liste dargestellt. Bei Mouseover erscheinen Icons, u.a. ein Drag&Drop Icon sowie Pfeile nach oben oder unten. Mit diesen Steuerelementen lässt sich die Reihenfolge im Akkordeon ändern.

Jedes Element braucht eine Überschrift, die immer sichtbar ist.

Hier noch ein Tipp:

Akkordeons können auch ohne Überschrift verwendet werden und so an einen Standardinhalt gehängt werden um...

...darstellen zu können

Steckbrief

Begriff
Beschreibung
Wird gern verwendet für:
Details zu Lehrveranstaltungen die strukturiert dargestellt werden sollen
Barrierefreie Darstellung auf mobilen Geräten
--> Gute Alternative zu klassischen Tabellen
Optional: Ab dem 5. Begriff muss man die Tabelle aufklappen
...
...
um die weiteren Einträge lesen zu können
Alternativ kann man wählen:
"Alle Inhalte anzeigen"

Tabelle

Optionale Tabellenbeschriftung
Tabellenkopf:.....kann oben oder links eingestellt werden
Geben Sie hier ihren Text einJede Spalte braucht eine Überschrift
In jeder Zelle muss Text stehenTabellenzellen dürfen nicht verbunden werden
Tabellen dürfen nur für tabellarische Daten verwendet werden, nicht zur Anordnung von Texten auf einer Seiteim Zweifelsfall lieber keine Tabellen verwenden. Lieber Listen oder Steckbriefe
Verschmelzen Sie keine Zeilen, da diese dann nicht mehr barrierefrei sind!

Video/Audio-Player

Videoplayer

Wenn Sie die Anzeige des Videos aktivieren, werden Ihre personenbezogenen Daten an YouTube übertragen und möglicherweise auch Cookies auf Ihrem Gerät gesetzt. Wir haben keinen Einfluss auf eine etwaige Datenübertragung und deren weitere Verwendung.

Weitere Informationen: Datenschutzerklärung der LMU, Datenschutzinformationen von YouTube / Google

Hier können Sie Video- oder Audiofiles, die von YouTube, Vimeo oder von LMUcast gehostet werden, einbinden. Das Modul funktioniert sowohl auf der Übersichtsseite als auch auf der Detailseite. Rechtlich notwendige Datenschutzinformationen werden automatisch eingeblendet.

3:33 | 28.11.2022 | ©LMU

LMUcast Playlist

Sie können auch direkt ein LMUcast Playlist einbinden, bei der alle Videos übersichtlich angezeigt werden. Da der Inhalt einer Playlist in der Regel sehr umfangreich ist, lohnt es sich in der Regel hierfür eine gesonderte Detailseite anzulegen. Ein Beispiel einer Playlist des CAS haben wir Ihnen hier verlinkt.

Bilderslider - mit Bildern aus dem LMU Bilderpool (Forschung)

Der Bilderslider kann genutzt werden um eine Vielzahl von großen Bildern zum Beispiel eines Events darzustellen.

Der Text über dem Slider ist optional, max. 320 Zeichen. Der Slider wird direkt in die Seite eingebettet. Es müssen mindestens 2 Bilder verlinkt werden, maximal 32.

Hier im Beispiel sehen Sie Bilder zum Thema Forschung aus dem LMU Bilderpool den alle Redakteurinnen und Redakteure für ihre Webauftritte nutzen können.

  1. Proben in Reagenzgläsern werden unter einem Mikroskop betrachtet
  2. Wissenschaftler in einem Labor
  3. Bücherregale im Philologicum
  4. Ein paar kleine Reagenzgläser stehen nebeneinander und haben Flüssigkeiten in sich.
  5. Probenflüssigkeit wird mit einer Pipette auf eine Metallplatte aufgetragen.
  6. Nahaufnahme von einem experimentellen Aufbau mit einem Laser in einem Labor
  7. Nahaufnahme eines Laboraufbaus mit einem roten Laser
  8. Eine Person mit Laborkittel und Gummihandschuhen sieht durch ein Mikroskop
  9. Zwei Forscher betrachten etwas durch ein Mikroskop
  10. Eine Person mit blauen Schutzhandschuhen ordnet Plastikträger ein
  11. Flüssigkeit wird mit einer Pipette auf einen Träger aufgetragen.
  12. Drei gefüllte Pipetten in einer Halterung
  13. Mehrere verschlossene Probenbehälter nebeneinander
  14. Eine Glaswand des Philologicums der LMU
  15. Petrischalen, befüllt mit Flüssigkeit
  16. Bücherreihen in auf Regalen in einer Bibliothek
  17. Eine Hand hält eine mit Flüssigkeit gefüllte Probe
© LMU / Jan Greune
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Arne Trautmann
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© Matthias Firmke
© LMU

Bilderslider - mit Bildern aus dem LMU Bilderpool (Gebäude)

Hier im Beispiel sehen Sie Bilder zum Thema Gebäude aus dem LMU Bilderpool den alle Redakteurinnen und Redakteure für ihre Webauftritte nutzen können.

  1. Die Gebäude des Campus Oberschleißheim aus der Vogelperspektive 2019
  2. Wegweiser mit Blindenschrift
  3. Blick in den Lichthof der LMU im Hauptgebäude.
  4. Die große Aula im LMU Hauptgebäude
  5. Wanduhr in der großen Aula im LMU Hauptgebäude
  6. Glasfassade des Historicums am Abend.
  7. Schräge Sicht auf das Nanoinstitut an der Königinstraße
  8. Studierende vor dem Brunnen auf dem Geschwister-Scholl-Platz
  9. Außenansicht des Biozentrums im Winter mit zwei Personen im Vordergrund
  10. Die Gebäude des Campus Martinsried von oben
  11. Blick vom Dach des Campus an der Oettingenstraße in den Innenhof
  12. Hauptgebäude und Geschwister-Scholl-Platz von oben
  13. Lichthof im LMU Hauptgebäude
  14. Schneebedecktes Gebäude und Baum auf dem Geschwister-Scholl-Platz
  15. Statue von König Ludwig I. von Bayern im Lichthof der LMU
  16. Der Campus Martinsried in Großhadern im Winter
  17. Grüne Flagge mit dem Logo der LMU an einem Gebäude
  18. Brunnen am Geschwister-Scholl-Platz in winterlicher Stimmung
  19. Gebilde auf dem Campus Martinsried von oben
  20. Laterne vor dem Hauptgebäude der LMU
  21. Langer Flur mit Fenstern
  22. Geländergriff mit Blindenschrift
  23. Philologicum von außen mit den zwei Türmen der Ludwigskirche im Hintergrund
  24. Statue von Prinzregent Luitpold von Bayern im Lichthof der LMU
  25. Terrasse des Biozentrums mit zwei roten Sonnenschirmen.
  26. Treppenhaus im Hauptgebäude der LMU
© LMU / Jan Greune
© LMU
© Katharina Vukadin
© LMU
© LMU
© LMU
© LMU
© Peter Martner / LMU
© LMU
© LMU
© Philipp Thalhammer / LMU
© LMU
© LMU
© Kai Wengler
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© LMU
© Katharina Vukadin
© LMU

Bilderslider - mit Bildern aus dem LMU Bilderpool (Studium)

Hier im Beispiel sehen Sie Bilder zum Thema Studium aus dem LMU Bilderpool den alle Redakteurinnen und Redakteure für ihre Webauftritte nutzen können.

  1. Großer Hörsaal gefüllt mit Studierenden während einer Vorlesung
  2. Eine Vorlesung im Audimax des LMU Hauptgebäudes mit zahlreichen Studierenden.
  3. Mehrere Personen draußen vor einem Brunnen auf einer Wiese
  4. Studierende in einer Beratungssituation
  5. Zwei Personen im Gespräch bei Sonnenuntergang
  6. Mehrere Personen draußen auf dem Geschwister-Scholl-Platz mit Brunnen im Hintergrund
  7. Studierende an einem Tisch in der Mensa
  8. Arbeitsbereich mit lernender Person
  9. Eine Studentin liest in einem Arbeitsbereich des Philologicums
  10. Studierende in Beratungssituation
  11. Studierende in einem Arbeitsbereich auf dem Campus Großhadern/ Martinsried
  12. Studenten im Arbeitsbereich der Bibliothek
  13. Lernende Studierende in der Lesehalle der medizinischen Fachbibliothek
  14. Studierende in der Mensa im Gespräch
  15. Studierende am Campus Großhadern/Martinsried
  16. Drei Studierende im Gespräch
  17. Eine Glaswand des Philologicums der LMU
© Katharina Vukadin
© Katharina Vukadin
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© LMU
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Matthias Firmke
© LMU
© Jan Greune / LMU
© Jan Greune / LMU
© Jan Greune / LMU
© LMU

Großes Bild

Dieses Module ermöglicht es große Bilder und Grafiken komplett darzustellen.

Für Screenshots für Anleitungen, ist dieses Format ebenfalls geeignet. Verwenden Sie dann die Einstellung "Flexibles Bildformat" und "Originalauflösung verwenden"

Wanduhr in der großen Aula im LMU Hauptgebäude
© LMU

Personenliste (automatisch)

Die Personenliste (automatisch) stellt alle Personen nach einer Filterregel dar, die Sie vorher auswählen. Sie können das Layout und die dargestellten Kategorien anpassen.

Name E-Mail Telefon Raum Funktion

Personenliste (manuell)

Hier können die Personen manuell ausgewählt werden. Dies ist zum Beispiel bei Forschungsteams aus unterschiedlichen Bereichen hilfreich. Hier sehen Sie das "Visitenkarten" Layout

Christoph Zehetleitner

Referat VI.5 Internetdienste

Referatsleitung

Koordination

Eckhard Sedlmayer

Referat VI.5 Internetdienste

Stellvertretende Referatsleitung, Design

Corporate Design im Web, Webdesign

Elizabeth Forster

Referat Internetdienste VI.5

Kundenbetreuung

Koordination und Kundenbetreuung | Webseiten-Konzeption | Beratung und Schulung

Steffen Kube

Referat Internetdienste VI.5

Technik

CMS-Betreuung (Technik)

Newsboard (manuell) Kann nur von Projektadmins integriert werden

Webform (Formular zur Abfrage von Informationen)

Es können Webformulare in FirstSpirit integriert werden um einfache und strukturierte Abfragen von Informationen zu erfassen und an eine Mailadresse schicken zu lassen. Hierfür sind gesonderte Rechte notwendig, die Sie über den zentralen Support erhalten können.

Da Webformulare meist sehr umfangreich sind, lohnt es sich in der Regel diese auf eine gesonderte Detailseite auszulagern. Wir verlinken Ihnen hier ein Beispielformular

Anny Widget (Buchungen)

Die LMU hat das Ressourcenbuchungstool Anny lizensiert. Buchungen für Veranstaltungen, Sprechstundentermine, Arbeitstische in Räumen, Ressourcen die ausgeliehen werden können, können Sie über Anny organisieren. Eine Anny-Buchung können Sie mit dem FirstSpirit Anny Widget auf einer Seite einbetten.

Da Annybuchungen visuell meist sehr umfangreich sind, lohnt es sich in der Regel hierfür eine gesonderte Detailseite anzulegen. Wir haben Ihnen hier ein Beispiel einer Annybuchung auf den Seiten des IT-Servicedesk verlinkt.

Publikationsliste über LMU OpenAccess (Beispiel)

Kooperationspartner (mit Logos) werden meist am Ende der Seite dargestellt