Der Bildeditor ist ein Werkzeug, mit dem Sie Bilder in Ihre Webseite einbinden können.
Abb. 2, Icon Bildeditor.
Um den Bildeditor aufzurufen, müssen Sie in den Texttools das entsprechende Icon (siehe oben) anwählen.
Abb. 2, Bildeditor.
Das Bedienfeld des Bildeditors ist folgendermaßen aufgebaut: Das Bedienfeld besteht aus vier Reitern sowie einem Datei-Browser [3], der ähnlich wie ein Windows-Browser funktioniert. Die für Sie relevanten Reiter sind Bild [1] und Erweitert [2].
Hinweis: Im Folgenden soll auf die für Sie relevanten Funktionen eingegangen werden. Falls Sie Fragen zu einer hier nicht behandelten Funktion haben, wenden Sie sich bitte an das Referat Neue Medien unter Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!Alternativ kontaktieren Sie Ralph Kampmann unter Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! oder Telefon +49 641 309-6800.
So laden Sie ihr Bild im Datei-Browser [3] hoch:
Wählen Sie im Datei-Browser [3] den Ordner aus, in dem sich das Bild befindet, das sie in Ihren Text einbinden möchten.
Haben Sie ihr Bild angewählt, sehen Sie eine Bildvorschau im Fenster Details [5]. Hier sehen Sie Informationen zum Dateiformat, zur Datei- und Bildgröße sowie wann das Bild zuletzt bearbeitet wurde.
Die Werkzeugleiste [6]
Mit der Werkzeugleiste [6] rechts im Details-Fenster haben Sie die Möglichkeit, Ihr Bild zu bearbeiten. Bewegen Sie den Mauszeiger über das jeweilige Icon, wird der zugehörige Name der entsprechenden Funktion angezeigt.
Abb. 3, Werkzeugleiste.
Mit dem Icon [1] Löschen können Sie unerwünschte Bilder entfernen.
Mit dem Icon [2] Umbenennen passen Sie den Datei-Namen des ausgewählten Bildes an.
Mit den folgenden zwei Icons [3] [4] Kopieren und Ausschneiden können Sie das ausgewählte Bild zunächst in eine Zwischenablage legen und im nächsten Schritt das neu erscheinende Icon [6] Einfügen in einem gewünschten Ordner platzieren. Diese Funktion empfiehlt sich z. B. für die Erstellung von Sicherheitskopien vor der Bildbearbeitung.
Das Icon [5] Ansicht präsentiert Ihnen eine Vorschau des Bildes, wie es für den Rezipienten angezeigt wird.
Das Icon Edit Image [7] (Bild bearbeiten) in der Werkzeugleiste
Das Icon [7] Edit Image (Bild bearbeiten) ermöglicht Ihnen die Bearbeitung des Bildes in einem gesonderten Untermenü (z. T. englische Begriffe).
Hinweis: Das Bearbeiten von Bildern im Bildeditor beeinträchtigt die Bildqualität. Daher sollten Sie Ihr Bild im Bildeditor idealerweise gar nicht oder geringfügig bearbeiten. Bearbeiten Sie Ihre Bilder für die Webseite vorrangig in einem externen Bildbearbeitungsprogramm. Wichtig dabei ist, das Bild auf das Webformat anzupassen. Legen Sie hierzu die Bildmaße in einem externen Bildbearbeitungsprogramm fest.
Orientieren Sie sich an folgenden Richtwerten:
Querformat: ca. 800 Pixel in der Breite
Hochformat: ca. 700 Pixel in der Höhe
Speichern Sie das Bild abschließend in einem der von Joomla unterstützen Dateiformate ab: jpg, png, gif.
Abb. 4, Edit Image.
Im Reiter "Transform" (Verändern) können Sie mit dem ersten Dropdown-Menüpunkt "Resize" [1] (Größe ändern) die Größe des Bildes anpassen. Wählen Sie hierfür die gewünschten Werte manuell oder mit "Presets" (vorgegebene Größen) automatisch aus. Alternativ können Sie in der Bildvorschau der linken Menühälfte die Bildmaße direkt mit gedrückter linker Maustaste auf den Bildrand und gleichzeitigem Bewegen der Maus anpassen.
Ist die Klammer rechts neben den Eingabefeldern Breite und Höhe geöffnet, können Bildbreite bzw. Höhe unabhängig voneinander verändert werden, was jedoch ggf. zu Bildverzerrungen führen kann. Daher sollte die Klammer geschlossen bleiben, so dass sich die Bildmaße proportional zueinander verhalten.
Bestätigen Sie die neuen Bildmaße mit "Anwenden" oder machen Sie die Bildänderungen mit "Zurücksetzen" rückgängig.
Der mittlere Menüpunkt Crop [2] (Zuschneiden) funktioniert nach selbigen Prinzip wie die Funktion Resize (Größe ändern).
Mit dem dritten und letzten Menüpunkt Rotate [3] (Drehen) können Sie das Bild auf verschiedene Art drehen.
Bildänderungen können Sie mit "Revert to Save" [3a] auf den vorherigen Zustand zurücksetzen oder mit "Undo" [3b] (Rückgängig) einzelne Operationen am Bild rückgängig machen. Sind sie mit den vorgenommenen Änderungen zufrieden, speichern Sie diese mit "Speichern" [3c].
Die Funktionen [4] im Datei-Browser:
Rechts oben im Datei-Browser gibt es vier Funktionen:
Abb. 5, Funktionen im Datei-Browser.
Mit dem ersten Icon [1] Switch View Mode (Ansicht ändern) ändern Sie die Ansicht der Bilder im Datei-Browser. Sie haben die Möglichkeit, sich die Bilder als Datei oder als Bild anzusehen.
Mit dem Icon [2] Neuer Ordner legen Sie einen neuen Ordner an.
Mit dem Icon [3] Hochladen laden Sie eine Bilddatei hoch, die sich nicht im Datei-Browser befindet, von Ihrem lokalen Computer etwa.
Mit dem Fragezeichen-Icon [4] gelangen Sie zu dem englischsprachigen Hilfemenü des Bildeditors.
Die Reiter Bild [1] und Erweitert [2]
Der Reiter Bild
Ist ein Bild im Datei-Browser angeklickt, so sehen Sie im Reiter Bild die Bildeigenschaften.
Abb. 6, Bildeigenschaften.
Im Feld [1] URL sehen Sie den entsprechenden Dateipfad, also wo sich da Bild auf Ihrem Rechner befindet.
Passen Sie die Bildeigenschaften folgendermaßen an:
Das Feld [2] Alt. Text steht für Alternate Text. Dies ist barrierefreier Text und für Blinde bestimmt. Der Inhalt dieses Felds wird Blinden mittels einer speziellen Software vorgelesen, sodass Sie wissen, um welches Bild es sich handelt. Tragen Sie bitte Text in dieses Feld ein, um eine möglichst barrierearme Webseite zu gestalten. Tragen Sie hier den Dateinamen oder beschreibenden Text ein.
Bestimmen Sie die Größe [3] des Bildes in Pixeln. Ist das Häkchen im Kasten Proportional gesetzt, so wird die Proportionalität des Bildes beim Ändern einer der beiden Werte beibehalten.
Bestimmen Sie mit Ausrichtung [4] die Position des Bilds im Text. Wählen Sie, ob das Bild links, mittig oder rechts neben dem Fließtext gesetzt werden soll. Die Vorschau auf der rechten Seite des Bildeditor-Menüs gibt Ihnen eine Vorstellung, wie das Bild in den Text eingebunden wird.
Hinweis: Haben Sie noch keinen Text eingefügt, so erscheint ein Platzhalter-Text im Vorschau-Fenster. So erhalten Sie eine Vorschau, wie das Bild in den Text eingefügt wird.
Bestimmen Sie mit der Funktion Abstand [5] den Abstand zwischen Bild und Text. Dieser wird in Pixeln angegeben. Geben Sie einen Wert (Richtwert 20) ein und bestätigen Sie mit der Return-Taste, um sich die Vorschau anzeigen zu lassen. Ist das Häkchen im Kasten alle gleich aktiviert, so ist ihr Wert von oben, rechts, unten und links gültig.
Rahmen Sie das Bild mit Rand [6] ein, indem Sie das Häkchen setzen und die Breite, den Stil und die Farbe mittels Farbcode angeben. Um eine einheitliche Präsentation Ihrer Webseite zu gewährleisten, sollte diese Funktion nur sparsam oder gar nicht eingesetzt werden.
Der Reiter Erweitert
Die für Sie relevanten Funktionen im Reiter Erweitert sind folgende:
Abb. 7, Der Reiter Erweitert.
Der Inhalt im Feld Titel [2] wird auf der Webseite angezeigt, wenn man mit dem Mauszeiger über das Bild fährt. (Das ist hilfreich, wenn das Bild im Browser der Anwender womöglich nicht angezeigt wird und stattdessen nur ein thumbnail erscheint.)
Die Klasse ibp – die Popup-Version des Bildes:
Wenn Sie „ipb“ in das Feld Klassen [1] eintragen, passiert folgendes: Das Bild wird in quadratischer Form (als Crop) in den Text eingebunden. Fährt man im Editor mit dem Mauszeiger über das Bild, wird es in seiner Originalgröße angezeigt. Zudem erscheint der Text, den Sie im Feld Titel eingetragen haben. Das ist beispielsweise hilfreich bei besonders detailreichen Bildern.