Gestaltungsbeispiele für Webseiten
Sie haben Fragen, wie Sie ein Thema auf Ihrer Seite am besten visuell darstellen können. Sie überlegen, welche Darstellungsoption in Ihrem Fall geeignet ist oder wollen sich erst einmal orientieren, was für Gestaltungsmöglichkeiten überhaupt möglich sind? Auf dieser Seite finden Sie einige Beispiele, die Ihnen dazu einen ersten Überblick verschaffen sollen.
Zu allen Anwendungen finden Sie in der Typo3-Online (Video-)Anleitungen.
Erscheinungsbild einer Seite
Wenn Sie eine Seite erstellen, können Sie diese entweder im 2- oder 3-Spalten-Layout anlegen. Das 3-Spalten-Layout bietet allerdings den Vorteil, dass die rechte Spalte, in der oftmals wichtige Informationen stehen, angezeigt wird.
Hier finden Sie die Anleitung zum Seitenlayout.
Beispiel
Überschrift als Banner-Bild
Ein Banner kann Themen auf einer Webseite einleiten oder von einander abgrenzen. Gerade bei Seiten mit viel Inhalt und Text ist ein Banner von Vorteil, da es visuell hilft, einen Überblick zu erhalten, ohne die Leser*innen zu überfordern.
Außerdem ist es möglich, Überschriften als Banner-Bild darzustellen. Dieses Feature ist ebenso hilfreich, um einen Themenwechsel ansprechend einzuleiten.
Die Anleitung zum Überschrift-Banner finden Sie hier.
Beispiel
Unterstützungsangebote
Kurz-Profil
Kurz- Profile sind besonders gut dazu geeignet, Personen oder auch ein Thema kurz und kompakt vorzustellen. So erhalten Leser*innen auf einen Blick alle Informationen und einen ersten Überblick.
Die Anleitung zu Kurz- Profilen finden Sie hier.
Beispiel
Lehreinheit
Rasterelemente (Container)
Um mehrere Inhaltselemte nebeneinander darzustellen, nutzen Sie am besten das Rasterelement. Dabei können Sie entweder zwei oder drei Container nebeneinander platzieren. Um zusätzlich das Layout noch ansprechender zu gestalen, können Sie die einzelnen Elemente auch mit einem farbigen Hintergrund versehen (Funktion „Farbcontainer"), um z. B. Inhalte voneinander abzugrenzen. Sie können auch unterschiedliche Längen der einzelnen Container auf eine einheitliche Länge einstellen.
Die Anleitung zum Rasterelement finden Sie hier.
Beispiel
Kacheln
Kacheln sind eine gute Möglichkeit, Informationen kompakt und visuell ansprechend darzustellen. Die Leser*innen finden so alle Informationen auf einen Blick und können bei weiterem Interesse auf die Kachel klicken, um so mehr zu erfahren. Sie können entweder zwei oder drei Kacheln nebeneinander platzieren, in der mobilen Ansicht werden diese untereinander angezeigt.
Die Anleitung zu den Kacheln finden Sie hier.
Beispiel
Button
Um visuell ansprechend auf eine andere Seite, Medien wie Podcasts, Dateien oder ähnliches hinzuweisen sowie auf diese zu verlinken, eignet sich das Plug in „Button". Die Besucher*innen der Seite brauchen das Element nur anklicken und kommen dann direkt zu weiteren Informationent. Falls gewünscht, können Sie den Button auch farblich gestalten.
Die Anleitung für den Button finden Sie hier.
Beispiel
Slider
Um mehrere Bilder anzeigen zu können, nutzen Sie am besten einen Slider. Die Nutzer*innen können selbstständig, mithilfe der unterhalb eingeblendeten Leiste, durch die verschiedenen Blider klicken.
Die Anleitung zum Slider finden Sie hier.
Beispiel
Akkordeonelement
Um viele Informationen auf einer Webseite anzeigen zulassen, ohne dabei die Leser*innen mit zu viel Text auf einmal zu überfordern. empfehlen wir das Akkordeonelement. (Weiterführende) Informationen, die nicht auf den ersten Blick sichtbar sein müssen, können so einfach "wegklappt" werden. Anhand der Überschriften der Elemente können sich die Leser*innen zunächst einen Überblick verschaffen und dann entscheiden, ob und welche Informationen für sie relevant sind, um diese dann zu aufzuklappen.
Die Anleitung für das Akkordeonelement finden Sie hier.
Beispiel
| Veranstaltungskalender der Internationalen Orientierungswochen von 30.09. bis 13.10.2024 | ||||
| Stand: 01.10.2024 | ||||
| Wochentag | Datum | Uhrzeit | Treffpunkt/ Veranstaltungsort | Veranstaltung |
| Dienstag | 24.09.2024 | 10:00 | Zoom | Wissenswertes für Erstsemester (auf Deutsch) |
| 15:00 | Zoom | Wissenswertes für Erstsemester (auf Englisch) | ||
| Samstag | 28.09.2024 | |||
| Sonntag | 29.09.2024 | |||
| Montag | 30.09.2024 | 08:00 | HS 13 IM | Beginn der Orientierungswochen der Fachschaft Informatik für die Bachelor Studiengänge an der Fakultät für Informatik und Mathematik |
| 13:00 | Hybrid: HS 10 AM und per Zoom | Begrüßung und Beginn der Orientierungswochen (Stud.IP Veranstaltung 992425) | ||
| 16:00 | HS 10 AM | Campusführung mit AEGEE | ||
| 17:00 | Innwiese (neben PHIL) | Speed Friending & Kühberg mit AEGEE | ||
| Dienstag | 01.10.2024 | 09:00 - 12:00 | AOK; TK; Barmer GEK; DAK | Besuch der Krankenkassen zur Beschaffung des für die Immatrikulation notwendigen Formulars |
| 10:00 | Zoom-Meeting | Tutorenbüro | ||
| 11:00 - 12:30 | HK 14b SR 002 | Sharing is caring - Ausgabe Küchenutensilien von AEGEE | ||
| 14:00 | Zoom-Meeting | Einführung in die IT-Dienste (auf Englisch) | ||
| 15:00 | ITZ Raum 004 oder per Zoom | Für Master-Studierende der Fakultät für Informatik und Mathematik (FIM): Study Basics & Pizza (auf Englisch) | ||
| 16:00 | Oberer Torbogen NK | Stadtführung mit AEGEE | ||
| 18:00 | Innwiese (neben PHIL) | Flunkyball mit AEGEE | ||
| Mittwoch | 02.10.2024 | 11:00 | Hybrid: 002 ITZ und per Zoom | Informationen zu aufenthaltsrechtlichen Fragen (Anmeldung in der Stadt & Aufenthaltstitel) - wichtig für alle internationalen Studierenden! |
| 11:00 | Zoom | Wissenswertes für Erstsemester | ||
| 14:00 | Zoom-Meeting | Tutorenbüro | ||
| 16:00 | Großer Rathaussaal (Eingang in der Schrottgasse) | Empfang beim Oberbürgermeister der Stadt Passau | ||
| 19:00 | Oberer Torbogen, NK | Kneipentour mit AEGEE | ||
| Donnerstag | 03.10.2024 | Tag der deutschen Einheit - Feiertag, die Universität und alle Geschäfte sind geschlossen | ||
| 12:30 | Zoom-Meeting | "How to survive in Germany" AEGEE (auf Englisch) | ||
| 16:00 | Innwiese (neben PHIL) | Ausflug zum Mostbauern mit AEGEE | ||
| 19:00 | FIM-Wiese (neben FIM) | Grillen mit der Fachschaft FIM | ||
| Freitag | 04.10.2024 | 09:00 | 005 ITZ | Wellbeing Workshop "Make it in Passau" |
| 10:00 | Zoom-Meeting | Tutorenbüro | ||
| 12:00 | Mensa | Mensa Gang mit AEGEE | ||
| 14:00 | Innwiese (neben PHIL) | Gaudi Olympics mit AEGEE | ||
| Samstag | 05.10.2024 | 08:30 | Hauptbahnhof | Ausflug nach München mit AEGEE |
| 12:00 | Rathausplatz | Ilztalwanderung mit AEGEE | ||
| Sonntag | 06.10.2024 | 11:00 | oberer Torbogen, Nikolakloster | Sonntagswanderung zum Café-Restaurant Blaas mit AEGEE |
| Montag | 07.10.2024 | 10:00 | Siehe Website der Fachschaft | Fachschaft WiWi: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Wirtschaftswissenschaftlichen Fakultät (WiWi) |
| 10:00 | Zoom-Meeting | Tutorenbüro | ||
| 10:00 | Siehe Website der Fachschaft | Fachschaft SoBi: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Sozial- und Bildungswissenschaftlichen Fakultät (SoBi) | ||
| 10:00 | Siehe Website der Fachschaft | Fachschaft GeKu: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Geistes- und Kulturwissenschaftlichen Fakultät (GeKu) | ||
| 12:00 | Siehe Website der Fachschaft | Fachschaft Jura: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Juristischen Fakultät | ||
| 16:00 | Oberer Torbogen NK | Campusführung mit AEGEE | ||
| 18:00 | HS 9 AM | Informationsveranstaltung des Sprachenzentrums zu den Deutschkursen | ||
| 20:30 | Shamrock (Rosstränke 5) | Karaoke-Abend im Shamrock mit AEGEE | ||
| Dienstag | 08.10.2024 | 10:00 | Zoom-Meeting | Tutorenbüro |
| 10:00 | 005 ITZ | Informationsveranstaltung für Austauschstudierende aus Spanien, Portugal und Lateinamerika an der der Geistes- und Kulturwissenschaftlichen Fakultät (GeKu) und der Fakultät für Sozial- und Bildungswissenschaften (SoBi) | ||
| 10:00 | Siehe Website des Sprachenzentrums | Beginn Einstufungstests Deutsch, Italienisch und Spanisch (bis 10.10.24 um 22:00 Uhr) | ||
| 10:00 | HS 13 FIM | Einführungsveranstaltung in die IT-Dienste der Universität Passau (auf Deutsch) | ||
| 11:00 | Siehe Website des Sprachenzentrums | Beginn Einstufungstests Englisch und Französisch (bis 10.10.24 um 22:00 Uhr) | ||
| 11:00 | Haupteingang Zentralbibliothek | Einführung in die Bibliotheksnutzung (auf Englisch) | ||
| 14:00 | LU8 206 | Tackling your studies with confidence (workshop for international students) | ||
| 14:00 | Zoom-Meeting | Einführung in die IT-Dienste (auf Englisch) | ||
| 15:00 | Sportzentrum | Fußball-Turnier mit AEGEE | ||
| 20:30 | Kapfinger Kneipe (Dr. Hans-Kapfinger-Str. 13) | Spieleabend mit AEGEE | ||
| Mittwoch | 09.10.2024 | 09:00 | NK 312 | Deutsch-Workshops am Sprachenzentrum (Nachnamen beginnend mit Buchstaben A bis L) |
| 10:00 | Hybrid: 011 ITZ oder Zoom | Für Master-Studierende der Fakultät für Informatik und Mathematik (FIM): (Virtual) Tutors' Office | ||
| 14:00 | Zoom-Meeting | Tutorenbüro | ||
| 16:00 | Innwiese (neben PHIL) | Quidditch und Chill mit AEGEE | ||
| 19:00 | Rio Cultural Bar (Lederergasse 50) | Interkultureller Abend mit AEGEE | ||
| 22:00 | Zauberberg (Franz-Stockbauer-Weg 1) | Semester Opening Party mit der Fachschaft Jura | ||
| Donnerstag | 10.10.2024 | 09:00 | NK 312 | Deutsch-Workshops am Sprachenzentrum (Nachnamen beginnend mit Buchstaben M bis Z) |
| 10:00 | Zoom-Meeting | Tutorenbüro | ||
| 11:00 - 12:30 | HK 14b SR 002 | Sharing is caring - Ausgabe Küchenutensilien von AEGEE | ||
| 12:00 | Siehe Website der Fachschaft | Campusführung mit der Fachschaft GeKu | ||
| 14:00 - 17:00 | AOK; TK; Barmer GEK; DAK | Besuch der Krankenkassen zur Beschaffung der für die Immatrikulation notwendigen Formulare | ||
| 15:00 | Zoom-Meeting | Informationsveranstaltung für die Austauschstudierenden der Juristischen Fakultät | ||
| 16:00 | Zoom-Meeting | Informationsveranstaltung für die Studierenden des Masters „Deutsches Recht für ausländische Studierende" | ||
| 18:30 | AM HS 10 | Empfang des Präsidenten für die internationalen Studierenden | ||
| 22:00 | Ende Einstufungstests Englisch, Französisch, Deutsch, Italienisch und Spanisch | |||
| 22:00 | Zauberberg (Franz-Stockbauer-Weg 1) | Erasmus Party mit AEGEE | ||
| Freitag | 11.10.2024 | 10:00 | Zoom-Meeting | Tutorenbüro |
| 10:00 | HS 13 FIM | Einführungsveranstaltung in die IT-Dienste der Universität Passau (auf Deutsch) | ||
| 12:00 | Siehe Website der Fachschaft | Ausflug zur Veste Oberhaus mit der Fachschaft FIM | ||
| 14:00 | Hybrid: 011 ITZ oder Zoom | Für Master-Studierende der Fakultät für Informatik und Mathematik (FIM): (Virtual) Tutors' Office | ||
| 16:30 | Hybrid: NK 205 und Zoom | Infoveranstaltung zur Reise nach Budapest, anschließend Wanderung auf die Veste Oberhaus mit AEGEE | ||
| 18:00 | Siehe Website der Fachschaft | Cook and run mit der Fachschaft Jura | ||
| Samstag | 12.10.2024 | 09:00 | Hauptbahnhof | Ausflug nach Regensburg mit AEGEE |
| 11:00 | Innwiese (neben PHIL) | Wanderung zum Restaurant Mosthäusl in Wernstein mit AEGEE | ||
| 16:00 | Oberer Torbogen NK | Stadtführung mit AEGEE | ||
| Sonntag | 13.10.2024 | 11:00 | Gmoa (Kleiner Exerzierplatz 15a) | Bayerisches Frühstück mit AEGEE |
| 13:00 | Oberer Torbogen NK | Stadtführung mit AEGEE | ||
| Montag | 14.10.2024 | Erster Vorlesungstag im Wintersemester 2024/25 | ||
| Wichtige Termine nach den Orientierungswochen: | ||||
| Mittwoch | 16.10.2024 | 14:00 - 17:00 | Mensavorplatz (bei gutem Wetter) | Hochschulgruppennachmittag |
| Mittwoch | 23.10.2024 | 17:00 - 22:00 | ZBiB | Abends in der Uni (Stud.IP Veranstaltung 66666) |
| Montag | 04.11.2024 | Late Arrival Day | ||
| 13:00 | vor AM (Innstr. 31) | Campusführung mit AEGEE | ||
| Dienstag | 12.11.2024 | 18:00 | HS 6 WiWi | The Essentials for Your Career in Germany (Stud.IP 65202) |
Flipbook
Um eine pdf-Datei als eine Art Magazin zum Durchblättern anzubieten, eignet sich das „Flipbook"-Plug-In. Die Ansicht auf der Seite ist schöner als ein pdf nur per Link zum Download verfügbar zu machen.
Die Anleitung für das Flipbook finden Sie hier.
Beispiel
Slideshare
Das Plug-In "Slideshare" eignet sich dazu, eine PDF-Datei übersichtlich und ansprechend darzustellen. Auf der Webseite wird die Datei dann wie eine Präsentation dargestellt, durch die sich die Leser*innen selbstständig durchklicken können.
Die Anleitung zum Slideshare finden Sie hier.
Beispiel
Dekoratives Bewegtbild
Das dekorative Bewegtbild sorgt dafür, dass Ihre Webseite lebendiger und interaktiver wirkt. Sie können so im wahrsten Sinne des Wortes Bewegung auf Ihre Seite bringen.
Die Anleitung für das dekorative Bewegtbild finden Sie hier.
Diese Seite teilen
