Regionales Hochschulrechenzentrum Kaiserslautern

Typo3 Einsteigerschulung

Auf dieser Seite können Sie Schritt für Schritt die Typo3 Einsteigerschulung in Ihrem eigenen Tempo durchlaufen / nacharbeiten.

Vorkenntnisse

  • Keine Vorkenntnisse benötigt

Nach der Schulung können Sie

  • sich im Typo3 einloggen und zurechtfinden
  • grundlegende Typo3 Elemente erstellen und bearbeiten
  • Inhalte mit Rasterelementen positionieren
  • Webseiten übersetzen

Zeitaufwand

  • Ca. 3 Stunden

Weiterführende Schulung

  • Fortgeschrittenenschulung

Hilfestellung

Was ist Typo3?

Typo3 ist ein Inhaltverwaltungssystem zur gemeinschaftlichen Erstellung, Verwaltung und Publikation der Uni-Webseiten.

Vorteile

● Keine Programmierkenntnisse erforderlich

● Zeitgesteuerte Veröffentlichung von Inhalten möglich

● Mehrere Personen können gleichzeitig arbeiten

● Umsetzung eines einheitlichen Erscheinungsbilds

Typo3 Frontend

  • Das Forntend ist die Ansicht die der Seitenbesucher sieht.
  • Die Farbgebung der Uni Webseiten, die positionierung des Uni Logos, als auch der Inhalt des Header,- und Footerbereichs sind vorgegeben und können nicht verändert werden. Das einheitliche Erscheinungsbild der Uni Webseiten bleibt somit auch bei individueller befüllung der Seiten gewährleistet.

Anmelden im Typo3 Backend

Das Typo3 Backend ist der Bereich in dem Sie neue Webseiten anlegen / bearbeiten können.

Um sich im Typo3 Backend anzumelden müssen Sie

  • sich im VPN befinden
  • am besten den Mozilla Firefox Browser verwenden
  • die URL Ihrer Website in die Adresszeile eingeben und ein /typo3 anhängen
  • Beispiel: www.mv.uni-kl.de/typo3

 Um die nachfolgenden Übungen zu machen, loggen Sie sich jetzt in unsereren Übungsbereich https://t3coach.rhrk.uni-kl.de/typo3/ ein.

Login-Daten

Benutzername: t3_sandbox

Passwort: sandbox_t3

Schwierigkeiten beim Login?

Aussehen Typo3 Backend

Kopfleiste: Die Kopfleiste bietet Ihnen einen Überblick über Lesezeichen, Verlauf, Anleitungen und Suche, zudem können Sie sich mit Klick auf Ihren Namen ausloggen.

Modulleiste: Hier wechseln Sie zwischen verschiedenen Modulen (Ansichten). Im Zuge dieser Schulung lernen Sie die Module, "Seite", "Liste" und "Dateiliste" kennen.

Seitenbaum: Im Seitenbaum werden alle Seiten angezeigt die auf Ihrer Intsalltion abliegen. Hier können Sie unteranderem Seiten hinzufügen, löschen, umbennenen und kopieren.

Bearbeitungsleiste: Hier erstellen Sie neuen Inhalt, oder bearbeiten bereits bestehenden.

Zusammenspiel zwischen Frontend und Backend

Möchten Sie vom Backend ins Frontend wechseln, klicken Sie auf das dafür vorgesehene Icon (Im Bearbeitungsbereich links oben). Die Frontend Ansicht öffnet sich daraufhin in einem neuen Tab, Sie sehen nun welcher Inhalt sich bereits auf Ihrer Seite befindet. Sie können nun zwischen beiden Tabs hinundher springen und Ihre im Backend eingefügten Änderungen im Frontend Laden.

Übungen

Seitenbaum

Um sich im Typo3 zurecht zufinden, müssen Sie zunächst wissen wie Sie im Seitenbaum neue Seiten anlegen, aktivieren, umbenennen, verschieben und löschen können. Schauen Sie sich hierzu das Video an.


Hinweis

  • Zunächst sind neu angelegte Seiten immer deaktiviert (rotes Icon), also im Frontend nicht sichtbar. Es macht also Sinn die Seite deaktiviert zulassen während Sie auf dieser arbeiten.

Überschrift

Legen Sie nun Ihr erstes Inhaltselement, in Form einer Überschrift, auf Ihrer eben angelegten Seite an. Schauen Sie sich hierzu das Video an, hier sehen Sie auch wie Sie eine Überschrift verlinken und mit einem weißen Hintergrund (empfohlen) versehen können. Eine detaillierte Schritt für Schritt Bild-Anleitung haben wir für Sie ebenfalls vorbereitet.

 

Hinweise zum Layout

Das Layout bestimmt die Größe der Überschrift, wobei Layout 1 die größte und Layout 5 die kleinste Größe darstellt. Im Typo3 ist Standartmäßig das Layout "Standard" voreingestellt, dieses entspricht Layout 2. Wenn Sie das Layout "Verborgen" auswählen, ist die Überschrift nur im Backend sichtbar und bleibt den Seitenbesuchern somit verborgen. Verwenden Sie das Layout 1 nur einmal pro Seite, dies verbessert das Suchmaschinenrankin Ihrer Seite!

Text und Medien Element

Das Text und Medien Element ist das wichtigste und am häufigsten genutztes Inhaltselement. Es Kombiniert Bilder und Texte, lässt Verlinkungen, Aufzählungen und Tabellen zu. Schauen Sie sich hierzu die Videos  oder unsere detaillierte Schritt für Schritt Bilder-Anleitung an und legen Sie selbst Ihr erstes Text und Medien Element an.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hinweise zu Tabellen

  • Verwenden Sie Tabellen sparsam, denn Sie sind nicht Barierrefrei, verwenden Sie stattdessen wenn möglich Rasterelemente (Siehe Anleitung Rasterelemente).
  • Schauen Sie sich Tabellen auch mal in der Mobilden Ansicht an (Shortcut: Strg Umschalt M).

Rasterelement

  • Rasterelemente bieten die Möglichkeit Inhaltselemente zu positionieren & fungieren als übergeordnetes Element.
  • Sie können entweder das Erscheinungsbild für das Rasterelement festlegen, oder für die einzelnen Inhaltselemente im Raster.
  • Wenn Sie das Erscheinungsbild der einzelnen Inhaltsemente verändern, können sie eine optische Trennung zwischen diesen erreichen.

Lernen Sie Rasterelemente mithilfe des Videos, oder der  Schritt für Schritt Bilder-Anleitung kennen!

Hinweise zum Kopieren von Inhaltselementen

  • Im Video sehen Sie, wie ein Inhaltselement von der linken in die rechte Spalte des Rasterelements verschoben wird. Halten Sie hierfür, während Sie das Element per Drag and Drop verschieben, die Strg Taste gedrückt, das Element wird somit nicht verschoben, sondern kopiert. Kopierte Elemente sind zunächst immer deaktiviert, aktivieren Sie das Element (Rechtsklick --> Sichtbar machen) um es im Frontend sichtbar zu machen.

Text mit Icon

Mit der Kombination von Text und Medien mit dem Rasterelement, können Sie Ihren Text mit Icon und Boxen versehen.

Das Video, als auch unsere Schritt für Schritt Bild-Anleitung hilft Ihnen dabei!

Akkordeon

  • Stellt Inhalte Platzsparend dar
  • Muss in ein Rasterelement eingebunden werden!
  • Wird meist für FAQ's genutzt

Hinweis

  • Verstecken Sie keine wichtigen Inhalte im Akkordeon. Wenn die Inhalte sowieso für alle Seitenbesucher interessant/wichtig sind, dann verzichten Sie am besten auf das Akkordeon Element.

Legen Sie ein FAQ mithilfe des Videos / unserer Schritt für Schritt Bild-Anleitung zum Akkordekon Element an!

 

 

Layouts Schachteln

Üben Sie es Layouts zu schachteln, in dem Sie z.B.:

  1.  Ein einspaltiges Rasterelement anlegen
  2.  Das Erscheinungsbild "Weißer Hintergrund" auswählen
  3.  Ein zuvor erstelltes / neues Element in das Rasterelement ziehen und diesem ein anderes/ das gleiche Erscheinungsbild vergeben

Probieren Sie sich aus! Sie bekommen schnell ein Gefühl dafür, wie Layouts vererbt werden.

Modul Dateiliste

  • Speicherort für alle Dateien auf den Webseiten
  • Maximale Dateigröße 8MB
  • Wichtig: Metadaten einpflegen

Was sind Metadaten?

  • Daten, die andere Daten ergänzen, z.B. Titel oder Beschreibung eines Bildes
  • Wichtig für die Barrierefreiheit! (Screenreader ließt Sehbehinderten Menschen die Metadaten vor)
  • Vollständige Metadaten sorgen für ein besseres Google-Listing

Wie werden Dateien hochgeladen?

  1. Wechseln Sie in das Modul Dateiliste
  2. Erstellen Sie einen neuen Ordner
  3. Laden Sie Ihre gewünschten Dateien hoch
  4. Geben Sie nun Metadaten ein

Hinweis

  • Wir empfehlen Ihnen generell alle Bilder und Dokumente die Sie auf Ihren Webseiten einbinden, in einen Ordner innerhalb der Dateiliste hochzuladen. Insbesondere gilt dies jedoch für Dateien die bspw. auf mehreren Seiten eingepflegt werden soll (z.B.über eine Downloadliste). Sie können Dateien jedoch auch manuell, im Text und Medienelement selbst, hochladen (siehe Text und Medien Anleitung Punkt 8).

Dateien hochladen

Um bspw. eine Bildergalarie oder Downloadliste erstellen zu können, müssen Sie zunächst die entsprechenden Dateien in die Dateiliste hochladen. Schauen Sie sich hierzu das entsprechende Video an.

Bildergalarie / Slidergalarie

Um eine Bilder,- bzw. Slidergalarie erstellen zu können, müssen Sie entweder bereits hochgeladene Bilder aus Ihrer dateiliste verwenden, oder zuvor selbst Bilder hochgeladen haben (Siehe Übung Dateien hochladen).

Dateilinks

Sie möchten Dateien zum Download bereitstellen? Dann schauen Sie in unsere detaillierte Dateilink Anleitung, Hier lernen Sie Schritt für Schritt wie Sie Downloadlisten erstellen. Auf dieser Seite finden Sie auch ein hilfreiches Video zu Dateisammlungen (Ordner die zum Download angeboten werden können).

Backend-Layouts

Mithilfe von Backend-Layouts können Sie Teaser Ihrer Unterseiten generieren lassen. Hierfür müssen Sie Einstellungen in den seiteneigenschaften entsprechend anpassen, welche das ist sehen Sie in dem Video.

Hinweise zu Teaser-Texten

  • Teaser machen eine Seite dynamischer uns ansprechend
  • Sie verleiten zum "weiterklicken"
  • Teaser Texte sollen die Seitenbesucher über den Inhlalt auf der Seite informieren
  • Sie sind kurze Zusammenfassungen der Seiten (3 bis 4 Sätze)
  • Aufregende Frage/Aussage
  • Text verfassen nachdem die Webseite fertig ist

Webseiten übersetzen

Bei dem Übersetzen von Webseiten sind zwei Modi wählbar

1. Translate: Enge Verknüpfung zum Ursprungselement

2. Copy: Element wird nur kopiert

Hinweise

  • Generell empfiehlt es sich eher den Modi "Copy" auszuwählen, dieser lässt eine individuellere Seitengestaltung zu (flexibler).
  • Typo3 macht eine Übersetzungsumgebung zwar möglich, die Übersetzung an sich müssen Sie jedoch selbst übernehmen.
Zum Seitenanfang