Cookies helfen uns bei der Bereitstellung des IMT HilfeWikis. Bei der Nutzung vom IMT HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.Weitere Informationen

TYPO3 Inhaltselemente für Inhaltsspalten: Unterschied zwischen den Versionen

IMT HilfeWiki - das Wiki
Wechseln zu:Navigation, Suche
Zeile 6: Zeile 6:
 
|hasdisambig=Nein
 
|hasdisambig=Nein
 
}}
 
}}
<!-- Entweder draft mit fertigem Inhalt -->
+
Die folgende Anleitung zeigt Ihnen, wie Sie verschiedene Inhaltselemente zu Ihrer Typo3-Seite hinzufügen können.
{{draft}}
 
 
 
 
 
 
 
== Was ist zu tun? ==
 
* Stichpunktartige Auflistung
 
* aller Arbeitsschritte
 
  
 
== Schritt für Schritt Anleitung ==
 
== Schritt für Schritt Anleitung ==
Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht "Seite" auf den Seitentitel - hier "Probe" - und füllen Sie anschließend die Spalten - hier "Inhalt" und "Rechte Spalte" - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.
+
Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht '''"Seite"''' auf den Seitentitel - hier "Probe1" - und füllen Sie anschließend die Spalten - hier '''"Inhalt"''' und '''"Rechte Spalte"''' - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 1.jpg|Abbildung 1|left]]
+
[[Datei:TYPO3 Inhaltsspalte1.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen "Text mit Bild" und "Accordion" gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit Hinweisboxen, also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - Chat", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".
+
Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen '''"Text mit Bild"''' und '''"Accordion"''' gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit '''Hinweisboxen''', also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - Chat", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 2.jpg|1072px|Abbildung 2|left]]
+
[[Datei:TYPO3 Inhaltsspalte2.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich "Kontaktbox", "Bereichskontaktliste" und "Personenbox".
+
Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich '''"Kontaktbox"''', '''"Bereichskontaktliste"''', '''"Personenbox"''', '''"Bereichskontaktbox"''' und '''"Kontaktliste"'''.  
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 3.jpg|1072px|Abbildung 3|left]]
+
[[Datei:TYPO3 Inhaltsspalte3.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
'''Inhaltselement "Text mit Bild"'''
+
=== Inhaltselement "Text mit Bild ===
  
Benutzen Sie das Inhaltselement "Text mit Bild", um - längere - Texte und Bilder einzufügen. Sie können und sollten eine Überschrift vergeben, deren Typ - vorgegeben ist "Standard" - Sie bei Bedarf ändern können. Den Fließtext können Sie - in Maßen - im Editor formatieren. Auch - einfache - Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll. Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird. Vergessen Sie nicht, die Seite vorher zu speichern.
+
* Benutzen Sie das Inhaltselement '''"Text mit Bild"''', um längere Texte und Bilder einzufügen.  
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 4.jpg|1072px|Abbildung 4|left]]
+
* Sie können und sollten eine Überschrift vergeben, deren Typ Sie bei Bedarf ändern können (vorgegeben ist "Standard").  
 +
* Den Fließtext können Sie im Editor formatieren.  
 +
* Auch (einfache) Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll.  
 +
:: Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird.
 +
* Vergessen Sie nicht, die Seite vorher zu '''speichern'''.
 +
[[Datei:TYPO3 Inhaltsspalte4.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Beim Inhaltselement "Text mit Bild" können Sie ein Bild oder mehrere Bilder einfügen, die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht. Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: [http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf]). Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
+
* Beim Inhaltselement "Text mit Bild" können Sie '''ein Bild oder mehrere Bilder einfügen''', die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht.  
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 5.jpg|Abbildung 5|left]]
+
:: Laden Sie das Bild über die Schaltfläche '''Bild hinzufügen''' hoch. Es öffnet sich ein neues Fenster, in dem Sie das entsprechende Bild auswählen.
 +
* Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: [http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf]).  
 +
* Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
 +
[[Datei:TYPO3 Inhaltsspalte5.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Bei jedem Bild, das Sie einfügen, können Sie "Titel", einen alternativen Text - z. B. für Blinde -, eine Bildunterschrift und gegebenenfalls einen Link angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen. Falls dem Bild in Typo3 zuvor bereits entsprechende Metadaten hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden. Sie können über "Bild hinzufügen" mehrere Bilder hintereinander einfügen.
+
* Bei jedem Bild, das Sie einfügen, können Sie '''Titel''', einen '''alternativen Text''' (z.B. für Blinde), '''eine Bildunterschrift''' und gegebenenfalls einen '''Link''' angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 6.jpg|1072px|Abbildung 6|left]]
+
* Falls dem Bild in Typo3 zuvor bereits entsprechende '''Metadaten''' hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden.  
 +
* Sie können über '''"Bild hinzufügen"''' mehrere Bilder hintereinander einfügen.
 +
* '''Speichern''' Sie anschließend Ihre Eingabe.
 +
[[Datei:TYPO3 Inhaltsspalte6.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Vergessen Sie nicht, das Dokument zu speichern, wenn Sie mit der Bearbeitung fertig sind. Bei einem Klick auf das Disketten-Symbol mit Auge wird Ihnen das Dokument außerdem als Webseite angezeigt.
+
Mit einem Klick auf markierte Symbol wird Ihnen das Dokument außerdem als Webseite angezeigt.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 7.jpg|1072px|Abbildung 7|left]]
+
[[Datei:TYPO3 INhaltsspalte7.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
'''Inhaltselement "Accordion"'''
+
=== Inhaltselement Accordion ===
  
Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch z. B. auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder jedenfalls das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.
+
Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder zumindest das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 8.jpg|1072px|Abbildung 8|left]]
+
[[Datei:TYPO3 Inhaltsspalte8.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels "Seiteninhalt neu erstellen". Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild".
+
Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels '''"Seiteninhalt neu erstellen"'''. Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild". '''Speichern''' Sie anschließend Ihre Eingabe.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 9.jpg|1072px|Abbildung 9|left]]
+
[[Datei:TYPO3 Inhaltsspalte9.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt:
+
So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt. Sie können die jeweiligen Seiteninhalte auch wieder löschen, verschieben usw.:
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 10.jpg|1072px|Abbildung 10|left]]
+
[[Datei:TYPO3 Inhaltsspalte10.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
 
Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:
 
Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 11.jpg|1072px|Abbildung 11|left]]
+
[[Datei:TYPO3 Inhaltsspalte11.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
 
Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:
 
Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 12.jpg|Abbildung 12|left]]
+
[[Datei:TYPO3 Inhaltsspalte12.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>

Version vom 7. Februar 2020, 10:49 Uhr

Anleitung
Allgemeine Informationen
Informationen
Betriebssystem Alle
Service TYPO3
Interessant für Angestellte, Bereiche und Studierende
HilfeWiki des IMT der Uni Paderborn

Die folgende Anleitung zeigt Ihnen, wie Sie verschiedene Inhaltselemente zu Ihrer Typo3-Seite hinzufügen können.

Schritt für Schritt Anleitung

Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht "Seite" auf den Seitentitel - hier "Probe1" - und füllen Sie anschließend die Spalten - hier "Inhalt" und "Rechte Spalte" - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.

TYPO3 Inhaltsspalte1.png



Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen "Text mit Bild" und "Accordion" gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit Hinweisboxen, also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - ChatTextbasierte Kommunikation zwischen zwei oder mehreren Nutzern in Echtzeit.", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".

TYPO3 Inhaltsspalte2.png



Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich "Kontaktbox", "Bereichskontaktliste", "Personenbox", "Bereichskontaktbox" und "Kontaktliste".

TYPO3 Inhaltsspalte3.png

Inhaltselement "Text mit Bild

  • Benutzen Sie das Inhaltselement "Text mit Bild", um längere Texte und Bilder einzufügen.
  • Sie können und sollten eine Überschrift vergeben, deren Typ Sie bei Bedarf ändern können (vorgegeben ist "Standard").
  • Den Fließtext können Sie im Editor formatieren.
  • Auch (einfache) Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll.
Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird.
  • Vergessen Sie nicht, die Seite vorher zu speichern.
TYPO3 Inhaltsspalte4.png



  • Beim Inhaltselement "Text mit Bild" können Sie ein Bild oder mehrere Bilder einfügen, die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht.
Laden Sie das Bild über die Schaltfläche Bild hinzufügen hoch. Es öffnet sich ein neues Fenster, in dem Sie das entsprechende Bild auswählen.
  • Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf).
  • Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
TYPO3 Inhaltsspalte5.png



  • Bei jedem Bild, das Sie einfügen, können Sie Titel, einen alternativen Text (z.B. für Blinde), eine Bildunterschrift und gegebenenfalls einen Link angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen.
  • Falls dem Bild in Typo3 zuvor bereits entsprechende Metadaten hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden.
  • Sie können über "Bild hinzufügen" mehrere Bilder hintereinander einfügen.
  • Speichern Sie anschließend Ihre Eingabe.
TYPO3 Inhaltsspalte6.png



Mit einem Klick auf markierte Symbol wird Ihnen das Dokument außerdem als Webseite angezeigt.

TYPO3 INhaltsspalte7.png

Inhaltselement Accordion

Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder zumindest das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.

TYPO3 Inhaltsspalte8.png



Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels "Seiteninhalt neu erstellen". Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild". Speichern Sie anschließend Ihre Eingabe.

TYPO3 Inhaltsspalte9.png



So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt. Sie können die jeweiligen Seiteninhalte auch wieder löschen, verschieben usw.:

TYPO3 Inhaltsspalte10.png



Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:

TYPO3 Inhaltsspalte11.png



Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:

TYPO3 Inhaltsspalte12.png



Bei Fragen oder Problemen wenden Sie sich bitte telefonisch oder per E-Mail an uns:

Tel. IT: +49 (5251) 60-5544 Tel. Medien: +49 (5251) 60-2821 E-Mail: imt@uni-paderborn.de

Die Kontaktstellen auf H1, N5 und I0 bleiben geschlossen