Eine Webseite mit Joomla aufbauen – Teil 1

Grau ist alle Theorie. Deutlich wird das auch und gerade im Umgang mit Content Management Systemen. Wer sich einmal die zahllosen Veröffentlichungen zu Joomla! ansieht, wird eines feststellen: Oftmals gehen Workshops und Tutorials nicht über reine Funktionsauflistungen hinaus. Und in der Tat: Sind diese kurz und knackig, kann man sie in der täglichen CMS-Arbeit durchaus gebrauchen. Was aber gerade Joomla!-Neueinsteigern erfahrungsgemäß fehlt, ist eine Beschreibung, wie man eine Joomla!-Webseite strukturiert. Genau das ist das Ziel dieses und der nächsten Tutorials.

Wir empfehlen:
Joomla!-Training

Stellt sich zunächst natürlich die Frage, anhand was für eines Beispiels sich das Ganze am besten beschreiben lässt. Da Sie sich ohnehin schon auf http://www.psd-tutorials.de/ befinden, bietet es sich ja geradezu an, eine Tutorial-Seite nach dem gleichen bzw. einem vergleichbaren Muster aufzubauen.

Die Tutorial-Seite wird ähnlich wie PSD-Tutorials strukturiert. (Der Übersichtlichkeit halber aber natürlich mit deutlich weniger Menüpunkten.) Das bedeutet Folgendes:

  • Es wird ein Menü existieren, in dem die verschiedenen Tutorial-Themen aufgeführt sind. Das Menü wird aus den vier Einträgen Joomla!, TYPO3, Drupal und Andere Systeme bestehen.
  • Folgt der Besucher einem dieser Links, wird er zur Übersichtsseite des ausgewählten CMS weitergeleitet.
  • Auf dieser Seite werden zunächst einmal einige Tutorials zu dem entsprechenden CMS angezeigt. Zusätzlich erscheint unterhalb des allgemeinen CMS-Menüs nun noch eins, in dem die Themen des gerade ausgewählten Content Management Systems zu sehen sind.
  • In diesem neuen Menü sind dann die Themen aufgeführt, die für die CM-Systeme relevant sind. Bei Drupal sind das beispielsweise die Themes, während sich bei Joomla! recht viel um Templates drehen wird.
  • Hat man sich dann für eines der angezeigten Tutorials entschieden, wird der entsprechende Artikel eingeblendet.

Die Funktionsweise ist so gehalten, dass sie auch auf andere Webseiten anwendbar ist. Wichtig an diesem und den nächsten Tutorials ist lediglich, dass Sie ein Gefühl dafür bekommen, wie man eine Joomla! basierte Webseite am besten aufbaut. Ob Sie dann später eine eigene Tutorial-Seite anlegen, oder eine Firmen-Webseite online stellen wollen, spielt keine Rolle.
Selbstverständlich ist die Struktur noch ausbaufähig. So könnte man später zum Beispiel einzelne Bereiche der Seite nur bestimmten Benutzergruppen zur Verfügung stellen. Ausführliche Informationen dazu dann in späteren Tutorials. Am Anfang gilt die volle Konzentration der Grundstruktur der Seite.

Die Bereiche anlegen

Die Struktur der Webseite wird in Joomla! über Bereiche und Kategorien festgelegt. Vor allem, wer sich bereits mit anderen CM-Systemen beschäftigt hat, wird hierin einen Unterschied sehen. Denn in anderem Content Management Systemen werden die Seiteinhalte oft in Seitenbäumen hinterlegt und angezeigt. Für Joomla! bzw. Sie bedeutet das, dass Sie die Seite zunächst in Bereich aufteilen und diese anschließend kategorisieren müssen.
Die Bereiche für die geplante Tutorial-Seite sehen folgendermaßen aus:

  • Drupal
  • Joomla!
  • TYPO3
  • Andere Systeme

Lassen Sie sich bei der Auswahl der Bereiche ruhig etwas Zeit. Es ist immer besser, sich im Vorfeld ausführlich der Planung zu widmen. Je detaillierter man nämlich alle Eventualitäten bedenkt, umso einfacher fällt der Aufbau der Seite. Später die Struktur der Seite zu ändern, ist viel schwieriger, ja oftmals gar unmöglich.
Um einen neuen Bereich anzulegen, rufen Sie Inhalt/Bereiche auf.

Dort sind alle bislang innerhalb der Joomla!-Installation vorhandenen Bereiche zu sehen. Um einen neuen Bereich anzulegen, ruft man über die Werkzeugleiste Neu auf. Für den Drupal-Bereich könnten die Einstellungen folgendermaßen aussehen:

Innerhalb des Bereiche-Dialogfensters stehen zahlreiche Optionen zur Verfügung, die einer genaueren Betrachtung verdienen.

  • Titel – Der in dieses Feld eingetragene Wert wird später u.U. im Menü angezeigt. Das gilt allerdings nur, wenn Inhalte der Bereiche direkt eingeblendet werden.
  • Alias – Der sogenannte Alias-Name wird von Joomla! intern verwendet, sollte aber der Übersichtlichkeit halber beschreibend und logisch gewählt werden. Im Drupal-Fall können Sie dort also ruhig Drupal eintragen.
  • Freigegeben – Legen Sie fest, ob der Bereich veröffentlicht werden soll.
  • Reihenfolge – Über dieses Auswahlfeld legt man die Reihenfolge der einzelnen Bereiche fest. Beachten Sie, dass dieses Feld erst aktiv wird, wenn der Bereich mit Speichern oder Anwenden angelegt wurde. Es handelt sich dabei nicht um die Reihenfolge der Bereiche im Menü, sondern um die in der Administrationsoberfläche.
  • Zugriffsebene – Hierüber legt man fest, wer auf den Bereich zugreifen darf. Mögliche Werte sind Öffentlich (jeder), Registriert (registrierte User) und Spezial (erlaubt detailliertere Zugriffsrechte). Mehr zur Thematik der Zugriffsrechte dann in einem späteren Tutorial.
  • Bild – Sie können über dieses Auswahlfeld ein Bild einstellen, dass bei jedem Inhalt dieses Bereichs angezeigt wird.  Welche Bilder zur Verfügung stehen, hängt davon ab, welche im Verzeichnis images/stories liegen. Verwaltet wird dieses Verzeichnis wiederum über Seite/Medien. Im aktuellen Beispiel wird kein Bild verwendet.
  • Bildposition – Wenn ein Bild eingeblendet wird, dann kann hierüber die Ausrichtung bestimmt werden. Dabei wird dem <img>-Tag des Bilds intern das align-Attribut mit dem entsprechenden Wert (left, align, center) zugewiesen.
  • Beschreibung – Wenn der Bereich direkt im Menü angezeigt wird, erscheint die in das Textfeld eingetragene Beschreibung.

Mit Speichern werden die Einstellungen übernommen. Wiederholen Sie die gezeigten Schritte anschließend noch für die drei Bereiche Joomla!, TYPO3 und Andere Systeme. Insgesamt sollte das Bereiche-Dialogfenster dann folgendermaßen aussehen:

Anhand dieser Abbildung wird deutlich, dass nun noch Bereiche vorhanden sind, die für die spätere Version der Webseite nicht mehr benötigt werden. Diese können Sie löschen oder deaktivieren. Für den Anfang sollten Sie auf die Deaktivieren-Variante zurückgreifen. So können Sie, sollte doch mal etwas nicht wie gewünscht funktionieren, den alten Zustand der Webseite im Handumdrehen wiederherstellen.
Um einen Bereich zu deaktivieren, klicken Sie auf den grünen Pfeil innerhalb der Freigegeben-Spalte.

Jetzt sollte noch die Reihenfolge der Bereiche angepasst werden. Das geht ganz einfach über die Pfeile innerhalb der Reihenfolge-Spalte.

Sorgen Sie dafür, dass alle aktiven Bereiche oberhalb der deaktivierten Einträge stehen.

Sie sollten es sich von Anfang an angewöhnen, Ordnung innerhalb des Bereiche-Fensters zu halten. Das gilt übrigens umso mehr, je zahlreicher die Bereiche werden. Wenn Sie sich vorstellen, dass anstelle der diesem Beispiel zugrundeliegenden vier, gleich 30 oder 50 Bereiche benötigt werden, sehen Sie, dass hier Ordnung tatsächlich das halbe Leben ist.


(Ein erstes) Fazit

Die Grundstruktur der Webseite steht. Auch wenn bislang optisch noch nichts passiert ist, wurde doch bereits der Grundstein für die Tutorial-Seite gelegt. Im nächsten Tutorial wird die Seite weiter ausgebaut. Dann geht es um die Kategorisierung der Bereiche.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training