E-Books zu WordPress, Joomla, Bildbearbeitung und Suchmaschinenoptimierung (SEO)

    Einführung in die grundlegende Arbeit mit Drupal

    Einführung in die grundlegende Arbeit mit Drupal

    Die aktuelle Version dieser Anleitung als E-Book (pdf-Format, 30 Seiten) und viele andere ausführliche Anleitungen finden Sie hier.

    Inhalt

    Vorwort

    In diesem E-Book geht es um die grundlegende Bedienung des Content-Management-Systems Drupal. Erklärt werden das Anlegen von Artikeln, das Einfügen von Bildern und die Bearbeitung der Menüstruktur.

    Die Beschreibung setzt einige zusätzlich installierte Module voraus, die in den Standardinstallationen für meine Kunden vorhanden sind. Im Einzelnen sind dies die Module Views, Wysiwyg, IMCE, Media, CKEditor Image und der WYSIWYG-Editor CKEditor.

    Wer eine nicht von mir installierte Version von Drupal nutzt, sollte alle vorgenannten Module und den Editor installieren, um alle Schritte identisch nachvollziehen zu können.

    Schreibweisen

    Falls ein Button geklickt oder ein Menüpunkt ausgewählt werden muss, ist dies im Folgenden durch unterstrichene und kursiv gestellte Wörter dargestellt. Mehrere Klicks nacheinander werden mit Pfeilen verbunden.
    Beispiel: Struktur -> Menüs bedeutet erst auf Struktur klicken und danach Menüs anklicken.

    Glossar

    Backend:Das Backend ist der Teil der Internetseite, in dem die Einstellungen für den sichtbaren Bereich vorgenommen werden (z. B. die Menüstruktur).
    CMS:Content-Management-System. Software zur einfachen Verwaltung von Inhalten.
    Frontend:Als Frontend bezeichnet man die sichtbare “Vorderseite“ der Webseite, also den normalen Internetauftritt, den alle Besucher zu sehen bekommen.
    Open Source:Bezeichnet Software, deren Lizenzbestimmungen fordern, dass der Quelltext öffentlich zugänglich ist und – je nach entsprechender Lizenz – frei kopiert, modifiziert und verändert wie unverändert weiterverbreitet werden darf.
    WYSIWYG:What you see is what you get. Wird für Editoren verwendet, bei denen die Bearbeitungsansicht identisch mit der endgültigen Ansicht ist.
    URL:Uniform Resource Locator. In diesem Text: Die Internetadresse einer Webseite.

    Was ist Drupal?

    Drupal ist ein Content-Management-System (CMS) mit dem man Webseiten mit einfach veränderbaren Inhalten erstellen kann, die von mehreren Personen ohne tiefere Kenntnisse über Webseitenerstellung bearbeitet werden können.

    Dabei wird innerhalb von Drupal zwischen drei Ebenen unterschieden,

    • der funktionellen Struktur,
    • den eigentlichen Seiteninhalten und
    • dem Layout.

    Die Einrichtung der funktionellen Struktur ist aufwändig und setzt weitreichende Kenntnisse des Drupal-Frameworks voraus. In der Regel wird mit der Anlage der grundlegenden Struktur ein Webdesigner beauftragt.

    Die Seiteninhalte, auf Englisch der content, können durch eine fast beliebige Anzahl von Autoren über einen leicht bedienbaren WYSIWYG-Editor bearbeitet werden. Der Editor hat Funktionen, die ähnlich wie ein normales Textverarbeitungssystem, z. B. Word, funktionieren.

    Der Editor im Backend von Drupal wird direkt in einem Browser aufgerufen, so dass die Autoren die Inhalte der Webseite von jedem beliebigen Ort bearbeiten können, solange dort ein Internetzugang vorhanden ist. Über eine in Drupal integrierte Benutzerverwaltung lassen sich dabei vom Administrator für jeden Autor und jeden Inhalt individuelle Zugriffs- und Schreibrechte festlegen. Dadurch ist es möglich, dass beispielsweise manche Benutzer nur die Inhalte, andere auch die zugrunde liegende funktionelle Struktur beeinflussen können.

    Das Layout wird durch sogenannte Themes definiert, welche bei der Webseite, unabhängig von Struktur und Inhalt, das optische Erscheinungsbild festlegen. Die Themes können durch den Administrator einfach ausgewechselt werden. Dadurch ändert sich das komplette Aussehen der Webseite, ohne dass die Inhalte verändert werden. Die Erstellung von Themes ist sehr komplex und wird meistens durch einen spezialisierten Webdesigner vorgenommen.

    Die Vorteile von Drupal sind:

    • Einfache und benutzerfreundliche Bedienung
    • Vielseitig erweiterbar durch individuelle Module
    • Flexibles und dadurch leicht modernisierbares Design
    • Valides HTML und CSS

    Drupal steht als Open Source zur Verfügung und wird inzwischen weltweit für zehntausende Websites eingesetzt. Drupal ist mit knapp 5 % Marktanteil auf Platz 3 im Ranking der Webseiten, die ein CMS verwenden*.
    Bekannte Organisationen, die bei ihrer Webseite auf Drupal setzen, sind beispielsweise Amnesty International (amnesty.org) und das Weiße Haus (whitehouse.gov).

    * W3Techs – World Wide Web Technology Surveys Mai 2016 

    Aktuelle Versionen von Drupal

    Die aktuellsten Drupal Versionen (Stand Mai 2016) sind 7.43 und 8.1.1.

    Version 7

    Die neueste 7er-Version von Drupal ist die 7.43. Der 7er-Zweig von Drupal wird voraussichtlich noch bis Ende 2017 gepflegt. Zurzeit hat die 7er-Version die meisten verfügbaren Erweiterungen. Diese Version wird im Moment am aktivsten unterstützt.

    Version 8

    Am 19. November 2015 wurde die erste stabile Version von Drupal 8 veröffentlicht. Unter der Haube arbeitet jetzt nicht mehr das alte PHP-System, sondern Symfony 2. Durch die objektorientierte Architektur bringt dieses Framework eine höhere Flexibilität und Stabilität mit sich und die Entwicklung und Programmierung von Modulen und Erweiterungen wird dadurch erleichtert. Ebenfalls neu ist die Template-Engine Twig.

    Die für den Benutzer offensichtlichsten Änderungen sind ein Backend, das responsive ist, ein integriertes Migrationswerkzeug und endlich ein vorkonfigurierter WYSIWYG-Editor.

    Drupal Webseite

    Aktuelle Informationen zu Drupal gibt es auf der Webseite der Entwickler: http://www.drupal.org/

     

    Weiterführende Literatur

    Das vorliegende E-Book gibt nur einen kurzen Einblick in die grundlegende Bedienung von Drupal. Wer sich eingehender mit den vielfältigen Möglichkeiten von Drupal befassen möchte, sollte sich folgende Bücher ansehen:

    Praxiswissen Drupal 7Drupal 8 in der Praxis: Site-Building, Theming, Modul-Entwicklung. Für Einsteiger und Fortgeschrittene

    Einloggen in das Backend

    Zum Einloggen in das Backend an die Adresse der Webseite /?q=user dranhängen (http://www.meineseite.de/?q=user).

    Anmeldedialog Drupal 7

    Anmeldedialog – Drupal 

    Benutzername und Passwort eingeben und auf Anmelden klicken.
    Dadurch kommt man auf die Startseite des Backends.

    Startseite Backend Drupal

     Startseite Backend – Drupal 

    Erstellen eines neuen Artikels

    Am oberen Rand des Bildschirms findet man die Navigationsleiste mit den Funktionen des Backends.

    Navigationsleiste Drupal

    Navigationsleiste – Drupal 

     

    Auf den Menüpunkt Inhalt klicken. Dadurch gelangt man auf die Seite mit der Übersicht aller bisher erstellten Artikel. Zum Bearbeiten eines bereits erstellten Artikels auf den Button Bearbeiten in der rechten Spalte klicken.

    Beitragsübersicht Drupal

    Beitragsübersicht – Drupal 

    Um einen neuen Artikel zu erstellen, auf den Link Inhalt hinzufügen klicken.

    Inhalt hinzufügen Drupal

     

    Auf der nachfolgenden Seite legt man fest, welche Art Inhalt man erstellen möchte. Page ist der richtige Typ für statische Seiten, diese Seite wird immer komplett angezeigt. Der Typ Story erstellt Artikel in einer Blogansicht. Hier wird nur der Einleitungstext des Artikels angezeigt, auf den gesamten Artikel gelangt man erst nach einem Klick auf den „Weiterlesen“-Link. Wir erstellen eine statische Seite und klicken dafür auf Page.

    Editorfenster Drupal

    Editorfenster – Drupal 

    In das Editorfenster können wir jetzt unseren Text für die neue Webseite schreiben.

    Editorfenster mit Inhalt Drupal

    Editorfenster mit Text – Drupal 

     

    Bilder einfügen

    Vorhandenes Bild einfügen

    Vorhandenes Bild einfügen

    Vorhandenes Bild einfügen – Drupal 

    Den Cursor an die Stellen setzen, an der das Bild eingefügt werden soll. Schon auf dem Server vorhandene Bilder können mit dem Button Image eingefügt werden.

    Bild einfügen Drupal

    Bild einfügen – Drupal 

    Auf den Button Browse Server klicken.

    Bildauswahldialog 1 Drupal

    Bildauswahldialog 1 – Drupal 

    Bild auswählen, auf das Bild klicken und den nachfolgenden Dialog mit einem Klick auf OK schließen.

    Bildauswahldialog 2 Drupal

    Bildauswahldialog 2 – Drupal 

     

     Neues Bild (oder Anhang) einfügen

     Media Browser Drupal

    Media Browser – Drupal 

    Auf den Button Media Browser klicken.

    Media Browser Uploaddialog Drupal

    Media Browser Upload-Dialog – Drupal 

    Die entsprechende Datei durch Klicken auf den Button Datei auswählen auswählen. Die Datei mit  Hochladen und  Weiter auf den Server transferieren.

    Bilddialog Media Browser Drupal

    Bilddialog Media Browser – Drupal 

    Bei Bildern Alt Text (wichtig für Suchmaschinen und Sehbehinderte) und Title Text (Text der als Mouseover erscheint) eingeben und Speichern.

    Bilddialog Media Browser 2 Drupal

    Bilddialog Media Browser – Drupal 

    Auch im nächsten Fenster Speichern.

    URL Alias einstellen

    URL-Alias einstellen – Drupal 

    URL-Alias-Einstellungen anklicken und in das Feld rechts eine vernünftige (Keywords, SEO …) URL eingeben. Diese URL für die Verlinkung im Menü merken.

    Textformat Drupal

    Textformat – Drupal 

    Unser Artikel ist jetzt fertig. Falls nicht automatisch eingestellt, das Textformat auf Full HTML setzen und mit einem Klick auf Speichern sichern.

    Artikel speichern Drupal

    Artikel speichern – Drupal 

    Menü bearbeiten

    Der neue Artikel soll jetzt als zusätzlicher Menüpunkt in einem vorhandenen Menü verlinkt werden.

    Navigationsleiste Drupal

    Navigation Backend – Drupal 

    Auf Struktur klicken.

    Struktur Drupal

    Struktur – Drupal 

    Menüs anklicken. Danach erscheint eine Übersicht über alle auf dieser Webseite vorhandenen Menüs.

    Übersicht über alle vorhandenen Menüs Drupal

    Übersicht über alle vorhandenen Menüs – Drupal 

    In diesem Beispiel ist das Menü mit der Bezeichnung Hauptmenü die obere Hauptnavigation der Webseite und das Menü Main menu das Footermenü.

    Wir wollen den neuen Artikel als Menüpunkt in das Footermenü einfügen. Dazu auf Links auflisten rechts neben Main menu klicken.

    Links im Main menu Drupal

    Links im Main menu – Drupal

    Auf den Button Link hinzufügen klicken.

    Neuen Menüpunkt anlegen Drupal

    Neuen Menüpunkt anlegen – Drupal 7

    Unter Linktitel des Menüpunkts die Bezeichnung eingeben, die später im Menü erscheinen soll. Als Pfad den vorhin vergebenen URL-Alias eingeben und auf Speichern klicken.

    Menüreihenfolge festlegen Drupal

    Menüreihenfolge festlegen – Drupal

    Die Reihenfolge kann per Drag-and-Drop angepasst werden. Unterpunkte erzeugt man durch Einrücken des Untermenüpunktes nach rechts.

    Untermenüpunkte Drupal

    Untermenüpunkte – Drupal

    Neuer Menüpunkt Drupal

    Neuer Menüpunkt – Drupal

    Fertiger Artikel Drupal

    Der Artikel ist jetzt fertig und als neuer Menüpunkt verlinkt.

    Viel Spaß mit Ihrer Drupal-Webseite

    Diese kleine Anleitung gibt Ihnen einen ersten Eindruck von Drupal und hilft dabei, Ihre ersten Schritte mit Ihrer neuen Webseite zu gehen. Sollten Sie weitere Fragen haben oder professionelle Hilfe bei Ihrer Website benötigen, können Sie mich gerne kontaktieren. Meine Kontaktdaten finden Sie hier.

     

    Webdesign

    Hier bekommen Sie Ihr persönliches Rundum-sorglos-Paket:
    • Design Ihrer neuen Webseite
    • Optimierung Ihrer bestehenden Internetseite
    • Suchmaschinenoptimierung (SEO)
    • Webhosting
    • Social-Media-Integration
    • Hilfe bei allen technischen Fragen

    Rückrufservice

    *=Pflichtfeld

    Fotografie

    Ich fotografiere die Produkte für Ihren Onlineshop, Gebäudeansichten Ihrer Firma, Sie und Ihre Mitarbeiter oder alles andere, was auf Ihrer Webseite gezeigt werden soll. Natürlich inklusive professioneller Bildbearbeitung.
    Sie erhalten bei mir:
    • Produkt-/Objektfotos
    • Food-/Naturfotos
    • individuelle Hintergründe und Banner