Ü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 Drupal 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. 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 Character.

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

Der Plan

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

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

klingt zunächst mal einfach.

Schritt 1 - Inhalt erstellen (add content)

Klicken Sie auf den Link add content.

Willkommen in der Drupal Administration. In der sogenannten Layer Technik erscheint ein helles Dialogfenster vor einem dunklen Hintergrund.Diese Technik wird in allen Verwaltungsbereichen von Drupal 7 verwendet. Falls Sie versehentlich in diesem Bereich landen, klicken Sie einfach auf die Escape Taste. Das Fenster verschwindet und sie sind wieder auf Ihrer Website.

Aber zurück zum Dialog. Sie haben die Auswahl zwischen zwei verschiedenen Inhaltstypen namens Article und Basic Page (Abbildung 1). Ein Artikel wird für Inhalte genutzt, die einen zeitlichen Bezug haben, beispielsweise Neuigkeiten und Pressemeldungen. Eine Seite (Basisc page) wird dagegen für Inhalte verwendet, die keinen zeitlichen Bezug haben, beispielsweise die 'Über uns' oder die 'Anfahrt' Seite. Klicken sie auf Basic Page. 

Abbildung 1: Neuen Inhalt erstellen

Es erscheint ein Eingabeformular mit einem Titel und einem Beschreibungsfeld. Leider gibt es im Drupal Core keinen WYSIWYG Editor, so dass die Formatierung des Textes mit HTML Tags erfolgen muss (Wie Sie einen WYSIWYG Editor installieren können erfahren Sie hier TODO ). Standardmässig sind eine beschränkte Anzahl von HTML Tags erlaubt. Sie können unter dem Eingabefenster verschiedenen Eingabeformate wählen. Mehr über Eingabeformate erfahren Sie hier TODO . Im unteren Bereich des Formulars können Sie einen Menülink setzen und auf den Save (speichern) oder den Preview (Vorschau) Button klicken (Abbildung 2).

Abbildung 2: Eingabeformular

Die Seite wird erstellt und Sie landen direkt in der Website (Abbildung 3).

Abbildung 3: Über uns Seite ohne Bild

Schritt 2: Inhalttyp um ein Bildfeld erweitern.

Wir wollen ein Bild auf der Seite haben. Sie können natürlich ein schon im Internet erreichbares Bild mit dem HTML img Tag einbinden (zu diesem Zweck müssen Sie das Full-HTML Eingabeformat auswählen). Für "normale" Benutzer ist ein WYSIWYG Editor allerdings besser geeignet!

Neues Feld im Inhaltstyp erstellen

Durch die Modularität von Drupal ist es ohne Programmieraufwand sehr einfach, dem Inhalttyp Basic Page ein Feld vom Typ Bild zuzuordnen. Das bedeutet dass Sie hinterher auf jeder Seite vom Typ Basic Page ein, oder mehrere Bilder zuordnen können. Diese Bilder können dann in unterschiedlichen Grössen auf der Website dargestellt werden. Hört sich zunächst kompliziert an, ist aber sehr einfach.

Klicken Sie im Administrationsmenü auf den Link Struktur und dann auf Content types. Sie sehen die beiden Inhaltstypen Article und Basic Page. Klicken Sie auf den Link manage fields beim Typ Basic Page (Abbildung 4).

Abbildung 4: Neues Feld zuordnen

Im unteren Bereich (add exististing fields) können sie bereits bestehende Felder zuordnen. Im Drupal Core ist bereits ein Bildfeld enthalten. Wählen Sie es aus und klicken auf save. Sie landen in den Basic Page Settings in denen Sie die Parameter des Bildfeldes einstellen können. Kreuzen Sie die Checkbox für ALT und TITLE an und belassen Sie den Rest bei den Standardeinstellungen. Nach einem Klick auf Save haben Sie ein neues Feld erstellt. Ziehen Sie das Feld an die gewünschte Stelle und klicken erneut Save (Abbildung 5).

Abbildung 5: Felder sortieren

Sie haben jetzt die Struktur des Inhaltstypen verändert und können jetzt das Bild hochladen. Wenn Sie die Über uns Seite editieren sehen Sie das neue Feld (Abbildung 6).

Abbildung 6: Bildfeld

Bild hochladen

Sie können jetzt ein Bild von Ihrem PC hochladen. Die Auflösung spielt keine Rolle, das Bild darf nicht grösser als 32 MB sein. Der MB Wert ist in den Drupal Einstellungen änderbar und abhängig von Ihrer PHP Konfiguration (Siehe auch: TODO Link). Drupal zeigt nach dem Upload ein kleingerechnetes Thumbnail an. Sie können noch einen ALT und TITLE Beschreibungstext eingeben (Abbildung 7).

Abbildung 7: hochgeladenes Bild

Nach dem Abspeichern sehen Sie das Bild als Original und setellen vermutlich fest, das es zu gross ist (Abbildung 8).

Abbildung 8: Bild auf Website in falscher Grösse

Anzeigegrösse anpassen

Um die Grösse für die Anzeige zu ändern, müssen Sie im entsprechenden Inhaltstyp eine Grösse vorgeben. Klicken Sie auf Structure -> Content types -> manage display. Hier können Sie die Anzeigeeigenschaften festlegen. Verstecken Sie das Label (hidden) und wählen Sie als Format thumbnail (Abbildung 9).

Abbildung 9: Anzeigeeinstellungen für Felder

Wenn Sie nach dem Speichern zurück auf die Über uns Seite gehen, sollte das Bild kleiner werden (Abbildung 10).

Abbildung 10: Über uns Seite

Der jetzt beschriebene Weg eine Über uns Seite zu erstellen mutet ein wenig kompliziert an. Wenn Sie sich aber überlegen, was Sie gerade mit ein paar Mausklicks erstellt und verändert haben, so ist genau das einer der Hauptvorteile von Drupal. Sie können wie mit Legosteinen arbeiten.