In diesem Tutorial will ich zeigen, wie jeder mit Typo3 (hier in der Version 4.5) eine ganze Schulhomepage errichten kann, die, einmal eingerichtet, sogar von Schülern ganz ohne Programmierkenntnisse gepflegt werden kann. Die Pflege der Homepage durch Schüler hat den Vorteil, dass die Artikel und Einblicke authentischer, eben einfach näher am Schulgeschehen wirken.

Schließlich gibt es alle Dateien und Grafiken als Download, so dass jeder sofort loslegen kann.

— von Lars Ebert, www.advitum.de

Inhalt

Dieser Artikel ist der dritte Teil einer mehrteiligen Artikelserie — lesen Sie sich auch die restlichen Teile durch!

  1. Photoshop-Entwurf mit HTML & CSS umsetzen
  2. Wie wird aus einem Design eine fertige Typo3-Seite?
  3. Eine Schulhomepage mit Typo3 aufbauen

Im ersten Teil der Artikelserie habe ich gezeigt, wie man einen Photoshop-Entwurf in den Browser bringt, im zweiten Teil haben wir daraus eine funktionierende Typo3-Seite aufgebaut. Diese Typo3-Umgebung wollen wir jetzt noch ein wenig anpassen, wir brauchen schließlich eine Schulhomepage.

Ich empfehle Ihnen, die ersten beiden Teile der Artikelserie durchzuarbeiten, bevor Sie diesen Artikel lesen. Wenn Sie aber sofort mit der Schulhomepage anfangen wollen, können Sie auch den Zwischenstand beider Teile als Typo3 "out-of-the-box" downloaden.

Schritt 1: Neuigkeiten rund um die Schule

Eine Schulhomepage dient meist der Präsentation einer Schule — neben vielen Texten über die Schule, Kurse, Lehrer, AGs und Aktivitäten gehören dazu auch Neuigkeiten. Diese locken viele Besucher immer wieder auf die Schulhomepage.

Es gibt schon eine Menge fertiger Erweiterungen für Typo3, um Neuigkeiten zu schreiben. Für mich waren jedoch die, die ich getestet habe, viel zu umständlich zu bedienen, zu unflexibel oder man konnte nicht einmal Bilder einfügen. Was ich wirklich wollte, war, das ich die Neuigkeiten genau wie normale Seiten anlegen kann — so konnte ich die gesamte Rechteverwaltung, den Editor und die Mediathek von Typo3 benutzen. Ich fand jedoch kein Plugin, was das konnte, weshalb ich mich dazu durchrang, selbst eine Erweiterung zu schreiben.

Es ist jedoch ein wenig Vorarbeit nötig, um die News zu schreiben. Als erstes legen wir eine neue Seite namens »News« an, direkt unter der Seite »Herzlich Willkommen auf meiner...«.

 

Jetzt können wir für jedes neue Schuljahr eine neue Unterseite unter »News« hinzufügen und es wird immer automatisch auf die Erste — also die Neueste — verlinkt. Erstmal reicht es uns, für das aktuelle Schuljahr eine neue Seite anzulegen.

Jetzt brauchen wir ein paar Neuigkeiten. Ich habe einfach ein paar Unterseite mit Blindtext und zufälligen Bildern angelegt. Wichtig ist, dass die einzelnen News-Seiten nicht im Menü angezeigt werden sollen, dies kann man unter »Access« festlegen. Der Seitenbaum ist jetzt schon ein wenig umfangreicher.

Bis jetzt ist dieses System noch nicht wirklich clever - aber das kommt jetzt. Wir werden jetzt die Erweiterung »newslist« installieren. Diese Erweiterung habe ich geschrieben, sie macht nichts weiter als die News darzustellen, wie Sie gleich sehen werden.

Im Backend wählen wir das Modul »Extension Manager« und die Funktion »Import Extension«, hier suchen wir nach »newslist«.

Dann suchen wir aus der Liste das »News List«-Frontend-Plugin heraus und laden es mit einem Klick auf das Icon ganz vorne herunter. Anschließend installieren wir es auch.

Nach der erfolgreichen Installation steht uns ein neues Inhalts-Element zur Verfügung, welches wir auch sofort glücklich testen wollen. Also wählen wir das Seiten-Moldul auf und beabeiten die Seite »News aus dem Schuljahr 2011/2012«. Wir erstellen (in der Spalte »Normal«) ein neues Inhaltselement, aus der Liste wählen wir das Plugin »Newslist« aus.

Auf dem Reiter »Behaviour« können wir eine Seite definieren, unter welcher sich die News befinden, hier wählen wir die Seite »News aus dem Schuljahr 2011/2012« aus. Unter »Plugin« könnten wir noch einstellen, wie viele Einträge maximal angezeigt werden sollen. Das macht zum Beispiel auf der Startseite Sinn, wenn wir dort nur die drei neuesten News anzeigen wollen — für ein vollständiges Archiv, wie hier, lassen wir das Feld einfach leer.

Wir speichern also das Plugin und schauen uns die News-Seite einmal im Frontend an, dazu müssen wir nur auf News klicken, die Seite verlinkt ja automatisch auf die erste Unterseite.

Hinweis: Wenn der Punkt »News« nicht im Menü vorhanden ist, leeren Sie im Backend den Cache und überprüfen noch einmal, ob die Seite »News« auch so eingestellt ist, dass sie auf die erste Unterseite verlinkt.

Wenn alles geklappt hat, sollte auf der Seite jetzt eine Liste der Newseinträge angezeigt werden. Haben Sie in die News auch ein Bild eingefügt? Sehr gut, denn das Plugin benutzt das erste Bild eines News-Artikels als Vorschaubild für den Artikel. Leider ist das Bild in voller Größe zu sehen, wir müssen noch das Stylesheet des Templates etwas anpassen, um dies zu lösen.

Wir öffnen also erstmal die Datei »\fileadmin\templates\main\css\style.css« in dem Editor unserer Wahl und fügen am Ende folgende Zeilen hinzu:

 

ul.newslist { 	padding: 0px; 	list-style-type: none; } li.newsitem { 	margin-bottom: 2em; 	clear: left; } li.newsitem img { 	border: 0px; 	float: left; 	margin: 0px 10px 10px 0px; 	display: block; 	width: 250px; }

 

Als nächstes wollen wir den Besuchern einen News-Feed anbieten. Dazu habe ich das Plugin »subpagerssfeed« geschrieben. Dies erstellt aus den Unterseiten einer auswählbaren Seite einen RSS-Feed. Wir installieren das Plugin genau wie vorhin.

Anschließend bearbeiten wir die Seite »Testseite«, wir fügen hier ein neues Content-Element in der Spalte »Left« hinzu. Unter »Type« wählen wir »Insert Plugin« und unter »Plugin« wählen wir das neue Plugin »RSS-Feed«. Schließlich müssen wir unter »Behaviour« noch die Seite »News aus dem Schuljahr 2011/2012« als Record Storage Page auswählen.

Leider passiert jetzt nichts weiter, denn wir haben das Plugin zu der Spalte »Left« hinzugefügt. Den Inhalt dieser Spalte rufen wir aber gar nicht ab — darum kümmern wir uns jetzt.