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 enthält eine solche Seite ein paar Überschriften, Text und Bilder.

Statischer vs. dynamischer Inhalt

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).

cocoate.com/de/node/10448Abb 1. Beiträge

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. Haupteintrag (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. Das ist auch in Joomla! 2.5 noch so, aber die einzelnen Begriffe sind leicht mißverständlich. Wählen Sie Nein. Im Editorfenster können Sie jetzt Ihren Text eingeben. Joomla! bringt als Standard den TinyMC-Editor mit (siehe Abbildung 2).

cocoate.com/de/node/10448Abb 2. Beitrag Eingabeformular

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.staticflickr.com/1198/89825... (Figure 3)

Hagen FitouHagen Fitou

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).

cocoate.com/de/node/10448Abb 4. Bild einfügen

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, das ist 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. Wir brauchen einen Link, damit er erscheint.

Gehen Sie also in den Menümanager des Top-Menüs (Menüs - Top), und klicken Sie auf das Neu-Icon.

Hinweis: Top ist der Name der Position im Standardtemplate. Wenn Sie nicht das Standardtemplate und die Beispieldaten benutzen, dann existiert das Top Menü nicht oder hat einen anderen Namen.

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).

cocoate.com/de/node/10448Abb 5. Menütyp Auswahl

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. You will see a search box with all articles. 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).

cocoate.com/de/node/10448Abb 6. Menütyp Auswahl - Suche

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).

cocoate.com/de/node/10448Abb 7. Die 'Über uns' Seite

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).

cocoate.com/de/node/10448Abb 8. Bild Dialog

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.

Um dieses Problem zu beheben, lesen Sie Brian Teemans Blog: Making Joomla Idiot Proof . Vielleicht ist FBoxBot ja dann auch für Joomla! 2.5 verfügbar wenn Sie diesen Artikel lesen.

Kommentare

Hallo Hagen,

der Link zu Brian Teemans Blog: Making Joomla Idiot Proof funktioniert leider nicht!

Gruß,
Casima