Eine "Über uns"-Seite erstellen

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine "Über uns"-Seite werden, auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthalten solche Seiten ein paar Überschriften, Text und Bilder.

Website vs. Seite

In der englischen Sprache unterscheidet man zwischen den Begriffen Website und Page. Website bezeichnet die gesamte "Homepage", also alle Inhalte, Benutzer und Dialoge, die sich in Ihrer Joomla!-Installation befinden. Eine Page ist eine über eine eindeutige Adresse (URL) erreichbare Seite innerhalb Ihrer Website – also so etwas wie das Impressum oder eine "Über uns"-Seite.

Der deutsche Begriff Homepage ist eine mögliche Übersetzung von Website. Firmen sprechen meist nicht von ihrer Homepage, sondern oft recht wolkig von ihrem Internetauftritt oder ihrer Internetpräsenz. Der Begriff Homepage hat in Deutschland ein "Bastel-Image". Ich bleibe im weiteren Verlauf des Buches bei den Begriffen Website (für alles) und Seite für eine Seite.

Statische vs. dynamische Inhalte

Eine "Über uns"-Seite erstellt man einmal, verlinkt sie im Menü und muss sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Charakter.

• Bei einer statischen Seite spielen das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
• Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind über Auflistungen erreichbar.

Der Plan

Auf der "Über uns"-Seite soll es die folgenden Elemente geben:

• eine Überschrift
• einen Text
• ein Bild
• Die Seite soll nicht auf der Startseite erscheinen.
• Wir wollen einen Link zur Seite im oberen horizontalen Menü (top).

Das klingt zunächst mal einfach.
Melden Sie sich im Administrationsinterface an.

Schritt 1 – Inhalt erstellen

Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Dort sehen Sie eventuell noch Ihre unveröffentlichten Beispieldaten (siehe Abbildung 1).

Abbildung 1: Beiträge

Nach einem Klick auf das Icon Neu landen Sie im entsprechenden Formular und können den Titel und den Text eintragen. Im oberen Bereich unter dem Titel wählen Sie als Kategorie "uncategorized". Diese Kategorie wurde mit den Beispieldaten angelegt, daher die englische Bezeichnung. Vorstellen (Featured) gibt an, ob der Inhalt in einem besonderen Blog-Layout angezeigt werden soll. Die Funktion wird benutzt, um Beiträge auf die Startseite zu bringen. Wählen Sie Nein. Im Editorfenster können Sie jetzt Ihren Text eingeben. Joomla! bringt als Standard den TinyMC-Editor mit (siehe Abbildung 2).

Abbildung 2: Bearbeitungsformular für Beiträge

Ein Bild von einer URL einfügen

Als erste Variante wollen wir ein bereits im Web vorhandenes Bild nehmen, zum Beispiel dieses: http://farm2.static.flickr.com/1198/898250237_78a0e75cba_m.jpg (siehe Abbildung 3).

Abbildung 3: Beispielbild

Positionieren Sie den Cursor an die Stelle im Text, an der das Bild erscheinen soll. Klicken Sie auf das Bild-Icon in der Editor-Toolbar, und fügen Sie die URL im erscheinenden Popup-Fenster ein. Positionieren Sie das Bild left, und geben Sie jeweils 10 Pixel vertical und horizontal space ein (siehe Abbildung 4).

Abbildung 4: Bild einfügen

Das Bild erscheint in Ihrem Editorfenster. Klicken Sie auf Speichern, und Ihr Artikel ist gespeichert. Zum Speichern gibt es mehrere Möglichkeiten:

• Speichern: Der Artikel wird gespeichert. Der Dialog wird nicht verlassen: gut zum Zwischenspeichern.
• Speichern & Schließen: Der Artikel wird gespeichert, und der Dialog wird verlassen.
• Speichern & Neu: Der Artikel wird gespeichert, der Dialog wird verlassen, und ein neuer Artikeldialog wird aufgerufen.

Verlassen Sie den Dialog.

Schritt 2 – Menülink erstellen

Der Beitrag ist erstellt, taucht aber nicht auf der Website auf. Gehen Sie also in den Menümanager des Top-Menüs (Menüs - Top), und klicken Sie auf das Neu-Icon. Klicken Sie neben dem Feld Menütyp auf den Button mit der Aufschrift Wählen. Ein Fenster mit verschiedenen Links öffnet sich. Klicken Sie auf den Link Einzelner Beitrag (siehe Abbildung 5).

Abbildung 5: Menütyp-Auswahl

Jetzt müssen Sie den gewünschten Beitrag auswählen. Klicken Sie dazu im rechten Bereich (Beitrag wählen) auf Auswählen/Wechseln. Sie erhalten ein Suchfenster mit allen Beitägen. Sollten Sie die Über uns-Seite nicht auf Anhieb finden, können Sie im Suchfenster nach dem Titel suchen und gewünschten Beitrag durch einen Klick auf den Titel auswählen (siehe Abbildung 6).

Abbildung 6: Menütyp-Auswahl – Suche

Geben Sie einen Titel für den Link "Über uns" ein, und achten Sie darauf, dass im Feld Menu Location wirklich top steht. Die restlichen Einstellungen können Sie zunächst beibehalten.

Schritt 3 – "Über uns" auf der Website

Wenn Sie nun Ihre Website neu laden, werden Sie den neuen Link entdecken. Durch einen Klick auf den Link landen Sie auf Ihrer ersten Seite – herzlichen Glückwunsch (siehe Abbildung 7).

Abbildung 7: Die "Über uns"-Seite

Schritt 4 – Bild-Upload

Falls Ihr Bild nicht bereits im Internet vorhanden ist, müssen Sie es von Ihrem PC hochladen. Lassen Sie uns das Beispiel durchspielen. Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Falls Sie Ihren Artikel nicht finden, suchen Sie ihn einfach über das Suchfeld. Klicken Sie auf den Titel des Beitrags. Das Formular zum Ändern öffnet sich. Löschen Sie das verlinkte Bild aus dem Text.

Unter dem Editor-Fenster befindet sich der Bild-Button. Dieser Button startet einen Dialog zum Hochladen eines Bildes. Sie können bereits vorhandene Bilder auswählen oder neue Bilder hochladen (siehe Abbildung 8).

Abbildung 8: Bild-Dialog

Nachdem das Bild im Editor eingefügt wurde, können Sie die HTML-Formatierungen über das Bild-Icon des Editors weiter bearbeiten. Diese Trennung der Funktionen ist in Joomla! bewusst gewählt, da Sie unterschiedliche Editoren benutzen können. Der Bild-Button mit dem Einfügedialog von Joomla! bleibt dabei immer derselbe, die Bildbearbeitung im Editor kann sich jedoch unterscheiden.

Achtung: Joomla! übernimmt die Bilder unverändert. Die Bilder werden nicht kleingerechnet und müssen in der richtigen Auflösung vorliegen.