In dieser Anleitung beschreibe ich Ihnen, wie Sie eine Textseite Ihres Joomla-Internetauftritts bearbeiten können. In der Joomla-Terminologie wird eine Textseite „Beitrag“ genannt, deshalb wird dieser Begriff im Folgenden verwendet.

Um einen Beitrag zu bearbeiten wird er in einer speziellen Bearbeitungsansicht geöffnet. Für diese Ansicht habe ich für Sie bereits den WYSIWYG-Editor JCE (= Joomla Content Editor) installiert. Dieser Editor bietet gegenüber dem standardmäßig in Joomla integrierten Texteditor viele erweiterte und bequemere Funktionen. Mit JCE lässt sich ein Beitrag ganz ähnlich wie mit einem üblichen Textverarbeitungs­programm bearbeiten, Text einfügen und formatieren, Bilder einfügen und positionieren, Links auf andere Beiträge Ihres Internetauftritts einfügen oder auch Links auf externe Internetseiten und noch einiges mehr anstellen.

Die Bearbeitungsansicht enthält außerdem weitere Bearbeitungsoptionen, wie z.B. den Titel des Beitrags, die Kategoriezuordnung und die Zugriffsrechte. Diese Einstellungen sollen hier aber nicht weiter Thema sein.

Einen Beitrag zum Bearbeiten öffen

Je nachdem, wie Ihre Joomla-Installation eingerichtet ist, lassen sich die Beiträge  entweder nur in der Joomla-Verwaltungsansicht (im „Backend“) öffenen oder auch (nach Anmeldung) in der normalen Seitenansicht (im „Frontend“).

• Um einen Beitrag im Frontend zu öffnen, muss man sich zuerst anmelden. Anschließend wird der betreffende Beitrag — wie üblich — über das Menü aufgerufen. Nun erscheint im Beitrag (meistens oben rechts) eine Schaltfläche zum Bearbeiten des Beitrags. Durch Klicken auf diese Schaltfläche öffnet sich der Beitrag in der Bearbeitungsansicht.
  
  
• Im Backend kann ein Beitrag über die Beitragsliste (die Liste aller Beiträge) geöffnet werden. Diese ist auf zwei Wegen zugänglich:
  • Direkt nach der Anmeldung im Backend wird das „Kontrollzentrum“ angezeigt, dort klickt man auf die Beiträge-Schaltfläche:Joomla 3:
    Joomla 2.5:
    
  • Alternativ lässt sich die Beitragsliste über das horizonlale Menü ganz oben öffnen:
    Joomla 3:
    Joomla 2.5:
    

Die Beitragsliste ist duch Klicken auf die Spalten­über­schriften sortierbar nach verscheidenen Kriterien: alphabetisch nach Beitragstitel, Kategorie, Sichtbar­keits­status („Status“), Veröffent­lichungs­datum u.a.. Durch Klicken auf den Titel kann der zu bearbeitende Beitrag in der Bearbeitungs­ansicht geöffnet werden.

Joomla 2.5:

Joomla 3:

 

In der Bearbeitungs­ansicht wird der Text des Beitrags in einem großen Texteingabefeld angezeigt. Direkt darüber befindet sich eine Toolbar mit diversen grafischen Schaltflächen:

Einen Beitrag bearbeiten

Vorweg: Auch hier sollten Sie sich angewöhen, dass Sie beim Bearbeiten immer mal wieder „Speichern“. Sonst sind die Änderungen, die Sie vor der Kaffeepause eingefügt haben, hinterher weg. Dies gilt umso mehr, weil dieser Editor im Unterschied zu Textverarbeitungsprogrammen keine auto­matischen Sicherheitskopien anlegt; vielmehr wird hier der Text beim Speichern in eine Datenbank einetragen, die sich auf dem Webserver befindet.

In der Bearbeitungsansicht des Frontends finden Sie den „Speichern“-Button ganz oben.

Im Backend befindet sich bei Joomla 2.5 oben rechts eine Tool­bar mit den Schaltflächen zum „Speichern“, „Speichern & Schließen“ und „Schließen“. Beim „Speichern“ bleiben Sie in der Bearbeitungs­ansicht, beim „Speichern & Schließen“ kehren Sie nach dem Speichern in die Beitragss­liste zurück und mit „Schließen“ wird die Bearbeitungss­ansicht ohne vorheriges Speichern von etentuell vorgenommenen Änderungen geschlossen und die Beitragsliste angezeigt. Die anderen Schaltflächen sind für Sie uninteressant, auch die englischs­sprachige Hilfe wird Ihnen für unsere Zwecke wenig Informationen bieten.

Ab Joomla 3 sind haben diese Schaltflächen ein button-artiges Design bekommen:

Titel des Beitrags und Alias

Direkt unter diesen Buttons sind zwei Texteingabefelder. Bei „Titel“ wird der Beitragstitel eingetragen. In den meisten Fällen, je nach Joomla-Einstellung, wird er im „Frontend“ als Überschrift über dem eigentlichen Beitragstext angezeigt.
Neben dem Titel befindet sich der „Alias“. Er dienet der Generierung einer suchmaschinenfreundlichen Adresse der Seite des Beitrags. Sie können dieses Feld leer lassen, denn der Alias wird bei ersten Speichern eines neuen Beitrags automatisch aus dem Titel generiert.
Leider wird der Alias beim Speichern eines nachträglich geänderten Titels nicht automatisch mit geändert. Löschen Sie in diesem Fall den kompletten Alias; er wird dann wieder neu aus dem geänderten Titel generiert.

Der Editor

Er verfügt über zwei Ansichtsmodi:

• Die normale Texteingabe-Ansicht (WYSIWYG) ähnelt einem üblichen Text­verarbeitungs­programm. Mit den grafischen Schaltflächen in der Toolbar lassen sich die meisten Funktionen ausführen: So kann man z.B. ein Foto auf den Server hochladen und anschließend in den Text ein­fügen, einen vorbereiteten Text (siehe unten bei: Text einfügen) einfügen oder auch einen Link auf eine externe andere Internetseite. Die Schalt­flächen besitzen eine kurze Erklärung ihrer Funktion; diese wird als Tooltip angezeigt, wenn man die Maus über eine Schaltfläche bewegt.
• Mit der HTML-Quellcode-Ansicht kann der dem Beitrag zugrunde liegende HTML-Quelltext bearbeitet werden. Nützlich ist dies z.B. zur Korrektur von manchmal in der Texteingabe-Ansicht auftretenden unerwarteten Formatierungen, welche dort schwer zu korrigieren sind. Die Arbeit im HTML-Quellcode setzt grundlegende HTML-Kennt­nisse voraus. Wer aber über diese Kenntnisse verfügt, kann im HTML-Quellcode manche Feineinstellung vornehmen, die in der Texteingabe-Ansicht nicht möglich wäre.
  Einige Vorsicht ist hier allerdings geboten: Löscht man z.B. versehentlich eine spitze Klammer einer HTML-Anweisung, so gerät die Struktur der HTML-Elemente durcheinander. Zur Sicherheit können Sie den gesamten HTML-Quelltext in einen Text­editor kopieren, bevor Sie Änderungen vornehmen. Damit können Sie durch Zurückkopieren notfalls wieder zum vorherigen Stand zurückkehren. Verwenden Sie dafür aber einen ganz simplen Texteditor wie Notepad und nicht Word, denn beim Kopieren von Text aus Word in den JCE-Editor können eigenartige Effekte auftreten, wie Sie gleich weiter unten bei Text einfügen sehen werden.

Mit der Schaltfläche „Quellcode anzeigen” (links oben oder links unten) kann zwischen den beiden Modi gewechselt werden.

Die vielleicht wichtigste Funktion ist — wie bei jedem Textverarbeitungsprogramm — die „Rückgängig”-Schaltfläche. Alternativ ist diese Funktion auch mit STRG+Z ausuzuführen; analog ist auch „Wiederherstellen” (STRG+Y) verfügbar.

Text einfügen

Es ist empfehlenswert, den gesamten Text eines Joomla-Beitrags zuerst in einem Textverarbeitungsprogramm zu schreiben und ihn anschließend (ggf. abschnittsweise an den zutreffenden Stellen) in den Beitrag einzufügen. Beim direkten Kopieren und Einfügen aus einem Word-Dokument würden allerdings viele Word-Formatierungen übernommen, die zu einem fehlerhaften Ergebnis führen würden. Deswegen besitzt der JCE-Editor die Funktion „Einfügen ohne Format­ier­ung”: Zuerst klickt man im Text an die Stelle, an der der betreffende  Text­(abschnitt) eingefügt werden soll und anschließend auf die Schaltfläche mit dem kleinen „T”. Dies öffnet das „Einfügen ohne Formatierung”­-Fenster, in das der Text dann mit STRG+V kopiert wird. Abschließend wird er mit „Einfügen"­ in den Beitrag übernommen.

Kontextmenü

Einige der oft benötigte Funktionen können auch mit dem Kontextmenü des Texteingabefelds ausgeführt werden. Dieses Kontextmenü wird — wie üblich — durch rechten Mausklick geöffnet, wenn sich die Maus über dem Texteingabefeld befindet.

Text formatieren

Ein neuer Absatz wird mit der Eingabetaste (Enter) erzeugt, ein Zeilenumbruch ebenfalls mit der Eingabetaste und zusätzlich gedrückter Hochstelltaste (Shift).

Formatierung können auf einen Textabschnitt genau wie bei einem Textverarbeitungsprogramm zugewiesen werden, indem man zuerst den betreffenden Textabschnitt markiert und anschließend die Formatierung durch Klicken auf die entsprechenede Schaltfläche oder mit der entsprechenden Tastenkombination ausführt, sofern eine solche existiert. Die verfügbaren Tastenkombinationen werden im Schaltflächen-Tooltip angezeigt (siehe oben bei „Rückgängig” —„Wiederherstellen” ). So können z.B. Fettschrift und Kursivierung  mit STRG+B (bold = fett) bzw. STRG+I (italic = kursiv) zugewiesen werden.

Selbstverständlich sind weitere grundlegende Formatierungen anwendbar, wie z.B. Texteinzug, Textausrichtung, Untersreichung, Hoch- bzw. Tiefstellung oder farbliche Texthervorhebung.

Nummerierte Listen und Aufzählungslisten (mit Punkten o.ä.) können mit verschiedenen Nummerierungs- oder Auf­zählungsstilen angewendet werden: Auch hierfür werden zuerst diejenigen Textabsätze markiert, die als Listenpunkte formatiert werden sollen. Ein anschließender Klick auf den Pfeil direkt rechts neben der jeweiligen Listen-Schaltfläche öffnet ein Auswahlmenü, über das der gewünschte Listenstil zugewiesen werden kann.

Umlaute und Sonderzeichen

Umlaute können Sie problemlos einfügen. Für spezielle Sonderzeichen, wie z.B. Gedanken­strich oder Prozentzeichen, gibt es die Schaltfläche Sonderzeichen einfügen. Damit wird eine Tabelle geöffnet mit einem Zeichensatz von Sonderzeichen, die mit der Maus auswählbar sind.

Nicht-umbrechendes bzw. geschütztes Leerzeichen

Englisch: non-breaking space, deutsch: geschütztes Leerzeichen, HTML-Code:    — hinter diesem sperrigen Begriff verbirgt sich ein unscheinbares, aber wichtiges Zeichen: Es verhindert z.B. bei einer Preisangabe am Zeilenende einen Zeilenumbruch zwischen der Zahl und dem €-Zeichen. Mit der Schaltfläche „Ein geschütztes Leerzeichen einfügen” wird ein nicht-umbrechendes Leerzeichen gesetzt. Alternativ können Sie (ab Version 2.5.3 des JCE-Editors) die Tastenkombination „STRG + UMSCHALT + s” drücken.

Bilder in einen Beitrag einfügen

Bilder für das Web vorbereiten

Digitalfotos oder Illustrationen, die mit einem Grafikprogramm erstellt wurden, sind von der physischen Dateigröße her, wie auch von den Dimensionen (Höhe, Breite) viel zu groß, um unaufbereitet in eine Internetseite eingefügt zu werden. Allerdings ist das Bearbeiten von Bildern für das Web ein Thema für sich, das den Rahmen dieser Anleitung sprengen würde. Aber keine Angst: So schwierig ist es nun auch wieder nicht.
Folgende Seiten geben eine anschauliche Einführung in das Thema; dort finden Sie auch weiterführende Informationen:

• SELFHTML: Grafik
• Bilder komprimieren: So machst du deine Bilder federleicht, drweb.de

Zur Bildbearbeitung benötigen Sie keine teure Software-Suite; das auch mit kleinem Budget bezahlbare „Photoshop Elements” bietet einen Funktionsumfang, der weit über alles wirklich Notwendige hinaus geht. Aber auch lizenzfreie Bildbearbeitungsprogramme wie „IrfanView” oder das Online-Tool „Web Resizer” sind für durschnittliche Anforderungen vollkommen ausreichend.

Bevor ein Bild in einen Beitrag eingefügt werden kann, muss es auf den Webserver hochgeladen werden. Sie haben Zugriff auf einen Ordner auf dem Server, in den Sie Bilder und andere Dateien zur weiteren Verwendung auf Ihren Seiten hochladen können.
Bitte beachten Sie dabei: Grundsätzlich ist es empfehlenswert die Bilder kontextabhängig in Ordnern zu gruppieren. Jedes Bild auf dem Server, zumindest aber im selben (Unter-)Ordner, muss einen einmaligen Namen besitzen, sonst würde ein vorher schon im betreffenden Ordner abgelegtes Bild durch ein neu hochgeladenes und gleich benanntes Bild überschrieben werden. Webserver werden in aller Regel mit dem Betriebssystem Linux oder Unix betrieben und bei diesen muss man — anders als bei Windows — bei Dateinamen streng auf Groß-/Kleinschreibung achten. Um versehentliche Verwechslungen in der Schreibweise von vornherein auszuschließen, gewöhnen Sie sich am Besten eine konsequente Kleinschreibung der Dateinamen an; damit sind Sie auf der sicheren Seite. Vermeiden Sie Leerzeichen im Dateinamen, verwenden Sie stattdessen einen Unterstrich oder ein Minuszeichen.

Bilder in einer logischen Ordnerstruktur organisieren

Bevor Sie Ihre Bilder hochladen, sollten Sie sich dafür eine logische Ordnerstruktur überlegen. Sinnvollerweise unterscheiden Sie auf oberster Ebene entweder in Bilddateien und andere Dateiarten (wie z.B. den Seitenbesuchern zum Download angebotene Dateien: PDF, Word, Excel, Audio, Video). Alternativ kann auch eine Gliederung nach Inhaltsbereichen sinnvoll sein.

Durch Klicken auf „Bild einfügen” öffnet sich das „Bilder-Manager”-Fenster, das den Inhalt des für Sie freigegebenen Ordners anzeigt. Im unteren Bereich sehen Sie links die bereits existierenden Ordner in einer Baumansicht, in der Mitte eine Liste des sich links jeweils angeklickten Ordners und rechts eine Vorschau des in der Mitte angeklickten Bilds und seine Daten wie Dateiformat, Dimensionen und Dateigröße.

Ordnerstruktur verwalten

Um einen neuen Ordner zu erzeugen, klicken Sie zunächst links in der Baumansicht oder in der mittigen Listenansicht denjenigen Ordner an, innerhalb dessen Sie den neuen Unterordner anlegen möchten. Mit der Schaltfläche „Neuer Ordner” oberhalb der Vorschauanzeige öffnen Sie ein weiteres Fenster, in den Sie den Namen des neuen Unterordners eingeben und mit  „OK” bestätigen können.

Sie können einen Ordner nachträglich umbenennen oder einen evtl. falsch angelegten Ordner wieder löschen: Dazu setzen Sie zuerst in der mittigen Listenansicht einen Haken links neben den Ordner, damit erscheinen rechts neben der Vorschauanzeige weitere Schaltflächen zum Löschen, Um­benennen, Kopieren und Ausschneiden.

Bilder hochladen

Um nun ein Bild in einen bestimmten Ordner hochzuladen, klicken Sie zuerst diesen Ordner in der linken Baumansicht oder in der mittigen Listennansicht an. Anschließend öffenen Sie mit der Schaltfläche „Hochladen” (die sich ebenfalls oberhalb der Vorschauanzeige befindet) das „Hochladen”-Fenster. In die graue Fläche dieses Fensters lässt sich das Bild ganz einfach direkt aus dem Datei-Explorer des Betriebs­systems per Drag and Drop herüberziehen und dort ablegen: Dazu öffnen Sie zuerst wie eben beschrieben das „Hochladen”-Fenster. Dann öffnen Sie den Datei-Explorer, sofern das noch nicht der Fall sein sollte. Klicken Sie nun im Datei-Explorer das hochzuladende Bild mit der linken Maustaste an und halten Sie die Maustaste gedrückt. Ziehen Sie nun die Maus (mit weiterhin gedrückter Maustaste) in die Taskleiste des Bildschirms (die ist meistens ganz unten, sofern Sie das nicht anders eingestellt haben) und zwar auf die Schaltfläche des Browsers. Warten Sie einen kurzen Moment bis sich der Browser geöffnet hat und ziehen Sie nun das Bild in die graue Fläche. Erst dort lassen Sie die Maustaste wieder los.
Falls Ihnen dieses Drag and Drop genannte verfahren nicht gefällt, konnen Sie das Bild alternativ auch mit dem „Durchsuchen”-Button unten im „Hochladen”-Fenster aus Ihrer Ordnerstruktur aussuchen.
Beide Verfahren funktionieren übrigens auch mit mehreren Bildern auf einmal. So können Sie mehrere Bilder erst vorbereiten und anschließend in einem Schwung auf den Server hochladen, um sie dann in den Beitrag einzuarbeiten.
Mit dem „Hochladen”-Button starten Sie abschließend das Kopieren auf den Server:

 

Bilder umbenennen, löschen, kopieren, ausschneiden, einfügen

Auch Bilddateien können auf dem Server umbenannt, gelöscht, kopiert, ausgeschnitten und in einen anderen Ordner eingefügt werden. Dafür klicken Sie zuerst das zu bearbeitende Bild in der mittigen Listenansicht an. Die Schaltflächen zum Bearbeiten befinden sich dann, wie bereits oben bei den Ordnern gesehen, rechts neben der Vorschauanzeige.

Der Unterschied zur Bearbeitung von Ordnern ist, dass Sie in der Listen­ansicht ein Bild durch Anklicken auswählen und damit die Bild­bearbeitungs­funktionen aktivieren. Durch Anklicken eines Ordners in der Listen­ansicht gelangen Sie aber eine Ebene tiefer; deshalb müssen Sie zum Auswählen und Aktivieren der Bearbeitungs­funktionen für Ordner das Häkchen links neben dem betreffenden Ordner setzen (s.o.).

Für Bilder gibt es zusätzlich eine Schaltfläche, die das ausgewählte Bild in einem Vorschaufensterin Originalgröße anzeigt.

 

 

 

Bilder einfügen

Wenn Sie nun Ihr Bild glücklich in eine sinnvolle Ordnerstruktur auf dem Server hochgeladen haben, ist das eigentliche Einfügen in den Bericht ganz einfach: Klicken Sie zuerst an diejenige Stelle im Text, an der es platziert werden soll, öffnen Sie anschließend den „Bilder-Manager”, klicken Sie dort das gewünschte Bild an und fügen es zuletzt mit dem „Einfügen”-Button (ganz unten im „Bilder-Manager”-Fenster) in den Text ein.

Bilder positionieren und Textumfluss

Wenn Sie ein Bild in den Text eingefügt haben, so unterbricht es den Textfluss, d.h. der sich vor dem Bild befindliche Text steht über dem Bild, der nachfolgende Text darunter. Dieses Verhalten kennen Sie von Textverarbeitungsprogrammen; auch dort muss einem Bild eine Positionierung zugewiesen werden, wenn der Text das Bild umfließen soll (wie das z.B. in dieser Anleitung der Fall ist). In aller Regel sieht ein illustrierter Text mit Textumfluss um die Bilder ansprechender aus, als ein Text, dessen Fluss auch von kleineren Bilder immer wieder unterbrochen wird. Abgesehen vom ästhetischen Aspekt wird ein Text ohne Textumfluss kürzer, was gerade bei Internetseiten von Vorteil ist, weil Betrachter weniger scrollen müssen.

Die Positionierung eines Bilds können Sie im oberen Bereich des „Bilder-Managers” mit der Auswahlliste „Ausrichtung” einstellen. Sinnvoll sind „Links” oder „Rechts”. Die Angabe bezieht sich auf die Position des Bilds im Text, „Links” bewirkt also einen rechten Textumfuss und „Rechts” einen linken. Um die gewählte Einstellung anschaulich zu machen, werden Bild und Textumfluss in der kleinen Vorschau rechts neben den Einstellungen dargestellt.

Wird ein Bild von Text umflossen, ist es empfehlenswert auch einen Abstand zum Text anzugeben: Ist das Bild links positioniert, definiert man rechts einen (Bild)Rand, denn das ist der „Abstand” zum Text, der das Bild rechts umfließt. Bei einer rechtsseitigen Positionierung des Bilds geben Sie entsprechend einen linken Rand. Die Voreinstellung ist „alle gleich”; das müssen Sie zuerst deaktivieren, bevor Sie einen Rand eingeben können. Bewährt haben sich Werte zwischen 10 und 20. Oft ist es auch erforderlich, einen oberen bzw. unteren Rand einzugeben; das hängt ganz von ihrer Textstruktur ab. Um Ihnen eine Idee zu geben, sehen Sie im obigen Bild die Einstellungen dieses Bilds selbst.

Die „Größe” lassen Sie unberührt, dieser Wert wird automatisch bei der Auswahl des Bilds in der Listenansicht eingetragen. Aber denken Sie bei der Vorbereitung des Bilds daran, seine Dimensionen genau so zu bemessen, wie es in den Beitrag eingefügt wird. Verändern Sie die Größe des Bilds oder gar seine Proportionen, so muss der Browser beim Betrachten des Beitrags die Bildgröße neu berechnen; dabei verliert das Bild aber deutlich an Qualität.

Wenn es denn sein soll, können Sie einen „Rand” und dessen Breite, Stil und Farbe (Voreinstellung ist Schwarz = #000000) angeben. Klicken Sie dazu das Kästchen neben „Breite”an, mit dem kleinen Symbol ganz rechts in der Zeile können Sie einen Farbwähler öffnen. Aber bitte setzen Sie Bildränder sparsam ein, denn diese Art Ränder sieht oftmals nicht gut aus, zumal wenn die Ränder unterschiedlich gestaltet sind. Sollen die Bilder Ihrer Beiträge eine grafische Einfassung bekommen (so wie z.B. in dieser Anleitung) so lässt sich das gestalterisch viel eleganter — und vor allem zentral an einer einzigen Stelle — in einer Layoutdatei (für die Fortgeschrittenen: in einer CSS-Datei) einstellen. Das ist dann ein Job, mit dem Sie die technische Betreuung Ihres Internetauftritts beauftragen sollten, also mich.

Der „Alt. Text” (Alternativer Text) wird bei der Auswahl des Bilds in der Listenansicht ebenfalls automatisch eingetragen. Dieser Text ist meistens im Browser nicht sichtbar, nur wenn das Bild nicht gefunden werden sollte (weil es z.B. unbeabsichtigt auf dem Server gelöscht wurde). Dennoch ist dieser Text nicht unwichtig, denn er wird Menschen mit beeinträchtigter Sehkraft von „Screenreadern” genannten Programmen vorgelesen, damit diese sich vorstellen können, was dort zu sehen wäre. Aus diesem Grund lieben auch Suchmaschienen einen sinnvollen Alt-Text. Je sprechender dieser ist, desto besser ist das für sehschwache Seitenbesucher, aber auch für die Rangfolge Ihres Beitrags bei Suchmaschinen. Dies sind auch die Gründe, weshalb eine automatische Eintragung des Alt-Texts erfolgt; dabei wird er aus dem Bildnamen generiert. Sie sehen, dass es sinnvoll ist, von Anfang an einen sprechenden Bildnamen zu wählen, denn dann erspart man sich das Nacheditieren des Alt-Texts.

Die Einstellungen eines Bilds lassen sich jederzeit nachträglich anpassen. Dazu wird zuerst das betreffende Bild angeklickt, eine Umrandung wird sichtbar. Nun öffnet man den „Bilder-Manager” wie weiter oben beschrieben  und kann die Einstellungen des Bilds ändern.

Absatzkontrolle nach einem Textumfluss (für Fortgeschrittene)

Wenn der umfließende Text kürzer ist als die Bildhöhe (z.B. eine Bildlegende), der nachfolgende Text aber unterhalb des Bilds weiterlaufen soll, kann man sich mit eingefügten Zeilenumbruchen oder leeren Absätzen behelfen. Sofern der Beitrag im Browser eine fixe Breite hat, ist dieser Behelf meistens ausreichend.

Ist die Beitragsbreite aber flexibel (und der Trend geht in diese Richtung, um der großen Anzahl ganz unterschiedlicher Bildschirmgrößen und -auflösungen gerecht zu werden) können die eingefügten Leerzeilen zu unschönen Abständen führen, wenn die Textbreite schmal wird. Auch dieses Problem lässt sich lösen, allerdings nur im HTML-Quelltext und mit einem Griff in die CSS-Tickkiste. Wie der Beitrag in der HTML-Ansicht geöffnet wird und was dabei aus Sicherheitsgründen zu beachten ist, habe ich auf der ersten Seite dieser Anleitung beschrieben. Im zugegebenermaßen für das ungeübte Auge recht unanschaulichen und unübersichtlichen HTML-Quelltext müssen Sie nun denjenigen Absatz finden, der dem fraglichen positionierten Bild mit Textumfluss folgt. Dort finden Sie in der Regel eine Paragraph-Anweisung vor, der den Text umschließt, in etwa so:
<p>Hier steht der auf den Textumfluss nachfolgende Text</p>
Dort müssen Sie das öffnende Paragraph-Tag um die unterstrichene Anweisung ergänzen:
<p style="clear: both;" >
Dieses Verfahren funktioniert auch bei Überschriften, z.B.: <h3 style="clear: both;" >

Einen Link einfügen

Um einen Link einzufügen, fügen Sie zuerst an der gewünschten Stelle denjenigen Text, der als Link anklickbar werden soll, in den Beitragstext ein. Auch hierfür empfielt sich eine anschauliche Beschreibung dessen, was beim Folgen des Links erscheinen wird. Manchmal kann das auch die verlinkte Internetadresse  selbst sein, z.B. bei einer Liste von externen Internetseiten. Markieren Sie nun diesen Text  und öffnen Sie mit der „Link einfügen/bearbeiten”-Schalt­fläche” das „Link-Manager”-Fenster.

Eine externe Internetseite verlinken
Tragen Sie dort bei „URL” die Internetadresse der zu verlinkenden externen Seite ein, mit voran­gestelltem „http://”. Falls Sie das vergessen sollten, werden Sie vor dem „Einfügen” daran erinnert und können das fehlende Präfix gleich per Knopfdruck ergänzen lassen.

 

Wählen Sie unten im „Link-Manager”-Fenster als „Ziel” „In neuem Fenster öffnen”, damit die verlinkte Seite in einem neuen Tab geöffnet wird und nicht Ihre eigene Seite in ihrem Tab ersetzt.

 

Einen anderen Beitrag des Internetauftritts verlinken
Mit der Baumansicht im „Link-Manager”-Fenster lassen sich andere Beiträge entweder über den „Inhalt”- oder den „Menü”-Ast auswählen und durch Anklicken in das „URL”-Feld einfügen.

Als „Ziel” belassen Sie in diesem Fall die Voreinstellung „Nicht gesetzt”.

 

 

 

 

 

 

Alternativ können Sie auch mit dem „Beiträge”-Button links unter dem Editor-Text­eingabe­feld (hier in der Joomla 3-Ansicht) ...

 

 

 

 

... eine Liste aller Beiträge in einem neuen Fenster öffen.

 

Dort können die Beiträge zur besseren Übersicht gefiltert (Sucheingabe­feld und Auswahllisten) und sortiert (Spaltenüberschriften, z.B. „Titel”)  werden. Wenn Sie einen Beitrag der Liste anklicken, so wird der Titel des zu verlinkenden Beitrags an derjenigen Stelle, auf der der Mauszeiger gerade steht, eingefügt und gleichzeitig mit diesem Beitrag verlinkt.

 

Eine E-Mail-Adresse einfügen

Eine E-Mail-Adresse wird ganz ähnlich eingefügt wie ein Link: Zuerst fügen Sie die E-Mail-Adresse an der gewünschten Stelle in den Beitragstext ein, anschließend markieren Sie diese und öffnen den „Link-Manager”. Dann öffnen Sie mit der kleinen Schaltfläche „E-Mail” das Fenster zum„Erstellen einer E-Mail-Adresse”.

 
Dort geben Sie die E-Mail-Adresse bei „An” nochmals ein. Bei Bedarf können Sie weitere CC- bzw. BCC-Empfängeradressen und einen Betreff vorgeben.
Als „Ziel” können Sie beim Einfügen einer E-Mail-Adresse „Nicht gesetzt” belassen, denn das Anklicken eines E-Mail-Adressen-Links auf einer Internetseite öffnet das auf dem Rechner des Seitenbesuchers als Standard eingestellte Mailprogramm.

 

 

 

Auch für das Einfügen einer E-Mail-Adresse gibt es einen alternativen Weg: Sie können die E-Mail-Adresse auch direkt bei „URL” und „Text” eingeben; bei „URL” muss dabei ein „mailto:” vorangestellt werden. Sollten Sie dieses Präfix vergessen, werden Sie auch hier vor dem „Einfügen” daran erinnert und können es per Knopfdruck ergänzen lassen.

Ändern eines Links bzw. einer E-Mail-Adresse

Die Einstellungen eines Links können Sie jederzeit ändern, ebenso eine bereits eingegebene E-Mail-Adresse. Dafür markieren Sie den Link bzw. die E-Mail-Adresse mit der Maus per Doppelklick und öffnen den „Link-Manager”. Dort sind alle bisherigen Einstellungen in den entsprechenden Eingabefeldern voreingetragen, die Sie nun wie gewünscht ändern können.

Einen Link bzw. eine E-Mail-Adresse löschen

Auch das Löschen ist einfach: Dafür markieren Sie den Link bzw. die E-Mail-Adresse mit der Maus per Doppelklick und klicken anschließend auf die Schaltfläche „Link entfernen”.

Dateien zum Download einfügen

Vielleicht möchten Sie Seitenbesuchern Formularvordrucke, Informationsblätter oder andere Dateien zum Donwload anbieten? Dies ist ein guter Service, mit dem z.B. Vereine Beitrittsformulare für potentiellen Interessenten oder Firmen technische Anleitungen für ihre Kundschaft zur Verfügung stellen.Auf meiner Seite finden Sie z.B. kleine von mir programmierte Programme im zip-Format zum herunterladen: Den WebEncoder und einen Umsatzsteuerrechner.

Dateien für das Web vorbereiten

Achten Sie bitte auch bei herunterladbaren Dateien auf die Größe der Datei. Sie sollte am besten nur einige Hundert KB groß sein, maximal aber wenige MB. Gerade im ländlichen Raum gibt es leider immer noch viele schlechte Internetanbindungen, bitte bedenken Sie dies. Eine PDF- oder insbesondere eine WORD-Datei kann schnell recht groß werden, wenn Sie Bilder enthält, die Sie vor dem Einbetten nicht mit einem Bildbearbeitungsprogramm verkleinert hatten. Denn die Größe einer WORD-Datei wächst um die Größe eines eingebetteten Bildes, auch wenn es mit der Maus optisch verkleinert wurde. Viele Leute wundern sich, weshalb z.B. Ihr kleiner Urlaubsbericht so riesig wird, obwohl sie nur ein paar Kamerabilder eingefügt haben. Ein einziges Kamerabild hat üblicherweise eine Größe von mehreren MB, so wächst der Urlaubsbericht schnell auf eine Größe von Dutzenden MB. Als Datei zum Herunterladen oder auch zum Verschicken als E-Mail ist sie dann völlig ungeeignet. Besser ist es, die Bilder vor dem Einfügen zu Verkleinern (die Dateigröße schrumpft dabei im Quadrat). Oder konvertieren Sie eine solche Datei zumindest in eine PDF-Datei. Dies ist — wie der Name „Portable Document Format” bereits andeutet — ein für das Internet optimiertes Dateiformat, bei dem stark komprimiert wird.

Dateien hochladen

Ebenso wie Bilder müssen auch Dateien für den Download zuerst auf den Webserver hochgeladen werden, bevor sie anschließend zum Download verlinkt werden können. Wie bereits bei Bilder in einen Beitrag einfügen erwähnt, haben Sie Zugriff auf einen Ordner auf dem Server, in den Bilder und andere Dateien zur weiteren Verwendung auf Ihren Seiten hochladen werden können. Dafür gibt es den im JCE integrierten „Dateibrowser”, der die Joomla-eigene Medienverwaltung an Funktionalität weit übertrifft. Der „Dateibrowser” befindet sich allerdings nicht in der JCE-Toolbar über dem großen Texteingabefeld. Sie erreichen ihn über das Menü (hier in der Joomla 3-Ansicht). Öffen Sie zunächst das JCE-„Kontrollzentrum”.

Dort finden Sie die große Schaltfläche zum Öffnen des „Dateibrowsers”.

 

 

 

 

 

Das Fenster des „Dateibrowsers” sieht dem „Bilder-Manager” ähnlich, allerdings fehlt der obere Bereich zum Einstellen diverser Optionen.

Die Schalt­fläche zum Hoch­laden sieht im „Datei­browser” ein bisschen anders aus, befindet sich aber an der gleichen Stelle.

Auch hier können Sie Dateien über das sich öffnende „Hochladen”-Fenster per Drag and Drop hochladen.

Dateien in einer logischen Ordnerstruktur organisieren

Auch hier gilt wieder: Bevor Sie Ihre Dateien hochladen, sollten Sie sich dafür eine logische Ordnerstruktur überlegen. Sinnvollerweise unterscheiden Sie auf oberster Ebene entweder in Bilddateien und andere Dateiarten (wie z.B. den Seitenbesuchern zum Download angebotene Dateien: PDF, Word, Excel, Audio, Video). Alternativ kann auch eine Gliederung nach Inhaltsbereichen sinnvoll sein.

Dateien umbenennen, löschen, kopieren, ausschneiden, einfügen

Für das Anlegen, Löschen, Umbenennen von Ordnern und Dateien bzw. das Kopieren und Ausschneiden von Dateien gibt es wieder rechtsseitig Schaltflächen, die sichtbar werden, sobald Sie in der mittigen Dateiliste eine Datei anklicken. Es gilt das bereits für den „Bilder-Manager”  bzw. bei Bilder umbenennen, löschen, kopieren, ausschneiden, einfügen Gesagte.

Eine Datei zum Download verlinken

Ist die Datei auf den Server hochgeladen, öffnen Sie wieder den Beitrag, den Sie gerade bearbeiten. Fügen Sie an der gewünschten Stelle einen beschreibenden Text in den Beitragstext ein, der Seitenbesucher darauf schließen lässt, was ihnen an dieser Stelle zum Herunterladen angeboten wird. Anschließend markieren Sie diesen Text und öffen das „Link-Manager”-Fenster. Dort öffnen Sie mit der „Durchsuchen”-Schaltfläche wieder den „Datei­browser” und klicken dort die entsprechende Datei an. Schließen Sie den „Datei­browser” mit „Einfügen”, belassen das „Ziel” im „Link-Manager” auf „Nicht gesetzt” und bestätigen Sie abschließend nochmals mit „Einfügen”.

Weitere nützliche Funktionen und Tricks

Bedingter Trennstrich

Der Beitrag, den Sie gerade lesen, ist ein gutes Beispiel für Situationen, an denen der Platz für den Text eng werden kann: Er umfließt viele Illustrationen, was kann zu unschönen Zeilenumbrüchen führen kann. Nun existieren zwar Javascript-Hilfsmittel für die Silbentrennung, diese werden aber z.T. nicht von allen Browsern unterstützt bzw. unterstützen nicht die deutsche Sprache. Außerdem führt diese notwendigerweise auf mathematischen Algorithmen basierende Silbentrennung auch zu Trennungen an Stellen, an denen ein menschliches Lektorat andere Stellen bevorzugen würde. 
Es gibt aber eine — erstaunlicherweise weithin unbekannte — HTML-Anweisung für einen bedingten Trennstrich. Er ist leider etwas umständlich in der Handhabung, denn er muss einzeln an jede Stelle, an der er benötigt wird, in den HTML-Quelltext eingefügt werden.
Dafür wechseln Sie in die HTML-Quellcode-Ansicht. Dort müssen Sie dann zwischen den ganzen spitzen Klammern diejenige Stelle finden und anklicken, an der der bedingte Trennstrich eingefügt werden soll. Dort schreiben Sie dann die HTML-Anweisung ­ (mit vorangestelltem & und abschließendem Semikolon). Sie können auch nach Änderungen in der HTML-Quellcode-Ansicht wie gewohnt speichern.

Bereits eingefügte bedingte Trennstriche erscheinen in der HTML-Quellcode-Ansicht etwas eigentümlich: Sie werden durch einen kleinen roten Punkt angezeigt.

Seitenumbruch / Seitenindex

Wenn Sie wirklich viel mitzuteilen haben und der Beitrag sehr lange zu werden verspricht, empfiehlt es sich, diesen auf mehrere Seiten aufzuteilen –wie diese Anleitung, die Sie gerade lesen. Dafür ist die „Seitenumbruch”-Funktion da. Oben auf den einzelnen Teil-Seiten erscheint dann ein Seitenindex. Dieser muss allerdings von der Person oder Firma vernünftig gestaltet werden, die für die Gesamtgestaltung Ihres Internetauftritts verantwortlich ist. Es ist auch sinnvoll, sich eine inhaltlich schlüssige Aufteilung des Inhalts zu überlegen.

Klicken Sie mit der Maus an die Stelle, an der der Seitenumbruch eingefügt werden soll. Öffnen Sie anschließend mit dem „Seitenumbruch”-Button unter dem großen Texteingabefenster das Fenster zum „Seitenumbruch einfügen”. (Die zwei Abbildungen hier geben die Joomla 3-Ansicht wieder)

Dort geben Sie bei „Seitentitel” denjenigen Text ein, der im Seitenindex angezeigt werden soll. Das verwirrenderweise „Inhaltsverzeichnis” benannte Feld lassen Sie einfach leer.

 

 

 

 

Anschließend sehen Sie im Beitragstext einen grauen Balken als Marker, der den neuen Seitenumbruch sybolisiert.

Um einen „Seitentitel” nachträglich zu ändern, klicken Sie zuerst den grauen Marker-Balken an, der daraufhin zu hellblau wechselt. Mit der Schaltfläche „Seitenwechsel einfügen/bearbeiten” in der Toolbar können Sie dann das „Seitenumbruch einfügen”-Fenster wieder zum Bearbeiten öffnen.
Auf diesem Weg können Sie alternativ auch bereits das Einfügen vornehmen.
Zum Löschen eines Seitenumbruchs genügt es, den Marker-Balken anzuklicken und mit der„Entfernen-Taste” zu löschen.

Anker / Sprungmarke

Auch innerhalb eines Berichts können Sie Textstellen verlinken. Dafür wird zuerst eine Sprungmarke —oder etwas mehr in HTML-Sprache ausgedrückt: ein Anker — gesetzt. Klicken Sie dafür mit der Maus an die Stelle, die das Ziel des Links werden soll. Dafür bieten sich i.d.R. (Unter-)Überschriften an, der Anker würde dann am Zeilenanfang oder in der Zeile darüber gesetzt werden. Öffnen Sie dann mit der Schaltfläche „Anker einfügen/bearbeiten” des Fenster zum Benennen des Ankers.

Geben Sie dort bei „Name” eine möglichst treffende Bezeichnung für den Anker ein, damit Sie beim späteren Setzen oder Bearbeiten eines Links auf den Anker wissen welche Stelle gemeint ist. Dann wird nämlich eine Liste aller Anker angezeigt, sprechende Ankernamen sind da sehr von Vorteil. Verwenden Sie bei zusammengesetzten Bezeichnungen keine Leerzeichen, sondern Unterstriche oder Minuszeichen — sonst gibt es Fehler.

Nach dem Einfügen wird der neue Anker mit einem kleinen Symbol angezeigt. Ändern können Sie die Bezeichnung eines Ankers, indem Sie erst auf das Anker-Symbol klicken und anschließend mit der Schaltfläche „Anker einfügen/bearbeiten” das Anker-Fenster öffen. Löschen können Sie einen Anker, indem Sie erst auf das Anker-Symbol klicken und anschließend auf die Entfernen-Taste drücken oder alternativ mit der Schaltfläche „Anker einfügen/bearbeiten” das Anker-Fenster öffnen. Dort finden Sie nun einen „Löschen”-Button.

Ist ein Anker erstmal gesetzt, kann er von einer anderen Stelle aus verlinkt werden. Dafür fügen Sie zuerst denjenigen Text, der als Link anklickbar werden soll, an der gewünschten Stelle in den Beitragstext ein. Auch hier empfielt sich wieder eine anschauliche Beschreibung dessen, wohin der Link Seitenbesucher führen wird.

Dann öffnen Sie den Link-Manager mit der Schaltfläche „Link einfügen/bearbeiten” das „Link-Manager”-Fenster. Im unteren Abschnitt „Attribute” befindet sich die Auswahlliste „Anker”, in der die zuvor gesetzten Anker ausgewählt werden können.  Als „Ziel” belassen Sie in diesem Fall die Voreinstellung „Nicht gesetzt”. 

Oben im „Link-Manager” erscheint nach Auswahl des gewünschten Ankers dessen Name mit vorangestelltem #.

Grundsätzlich können auch Anker in anderen Beiträgen — oder Teil-Seiten, wenn Sie Seitenumbrüche eingefügt haben — Ihres Internetauftritts verlinkt werden. Allerdings kommt es hier auf die Eingabe der exakten URL inkl. des Ankers an und diese ist abhängig von den globalen Einstellungen Ihres Joomla für die Suchmaschinenoptimierung. In dieser Anleitung, die Sie gerade lesen, finden sich mehrere verlinkte Anker auf Teil-Seiten. Wenn Sie sich gut auskennen, können Sie sich dort Ideen abschauen, wie das Verlinken zu Ankern in anderen Beiträgen bzw. Teil-Seiten funktioniert.

„Weiterlesen”-Link

Von vielen Nachrichtenportalen bekannt sind Übersichtsseiten, die eine anzahl von Anreißertexten darstellen. Diese auch Teaser genannten kurzen Texte sollen Seitenbesucher neugierig machen auf den ganzen Beitrag, der durch einen „Weiterlesen”-Link unter den Anreißern geöffnet werden kann. Auch meine Seite beinhaltet solche Übersichtsseiten, beispielsweise Referenzen.

Selbstverständlich beinhaltet Joomla diese Funktionalität auch. Dafür müssen Sie zuerst Kategorien anlegen, die der inhaltlichen bzw. optischen Gliederung Ihres Internetauftritts entsprechen. Anschließend ordnen Sie die Beiträge den zuvor definierten Kategorien zu. Dann können Sie einen Menüpunkt vom Typ Kategorieblog anlegen und ihm die gewünschte Kategorie zuordnen. Wenn Sie den neuen Menüpunkt anwählen, sollten Sie nun alle Beiträge innerhalb der betreffenden Kategorie sehen — und zwar in deren voller Länge. Es gibt eine ganze Reihe von Einstellmöglichkeiten für die Kategorieblog-Ansicht, wie Sortierung, Spaltenanzahl etc., welche an mehreren Stellen des Systems beeinflusst werden können. Das soll an dieser Stelle aber nicht vertieft werden, Sie finden im Internet viele Hilfestellungen hierzu. Vermutlich arbeiten Sie sowieso mit einer Person oder Firma zusammen, die für die Gesamtgestaltung Ihres Internetauftritts verantwortlich ist. Dieser können Sie die Einstellungen in Absprache überlassen.

Sie steuern aber selbst den Inhalt des Anreißertextes, des Fortsetzungstextes und an welcher Stelle der „Weiterlesen”-Link steht. Schreiben Sie Ihren Text so, dass die obersten Zeilen eine spannende Intro oder eine kurze Inhaltsangabe sind.

Ist der Text vorbereitet klicken Sie an die Stelle, an der der „Weiterlesen”-Link gesetzt werden soll. Mit dem „Weeiterlesen”-Button unter dem Editor-Text­eingabe­feld (hier in der Joomla 3-Ansicht) setzen Sie dann den Marker für den Link, der im Texteingabefeld als grauer Balken erscheint.

Alternativ können Sie auch auf die Schaltfläche „Weiterlesen ... einfügen” in der Toolbar klicken, um den Marker zu setzen.

Zum Löschen eines „Weiterlesen”-Links genügt es, den Marker-Balken anzuklicken und mit der„Entfernen-Taste” zu löschen.

In der globalen Konfiguration von Joomla gibt es Einstellmöglichkeiten, die das Aussehen der „Weiterlesen”-Links beeinflussen, z.B. ob der Titel des Beitrags Bestandteil des Linktextes ist und dessen Länge. Die Funktionen werden dort als Tooltip erläutert, wenn Sie die Maus darüber halten.

Diese globalen Einstellungen können Sie außerdem in den „Optionen” eines jeden Beitrags bei Bedarf übersteuern.

Meta-Angaben für Suchmaschinen

Diese oft unterschätzten und deshalb gerne ignorierten Angaben sind wichtig, damit der Beitrag gut von Suchmaschinen gefunden werden kann.
Als „Meta-Beschreibung” tragen Sie einen Satz ein mit ca. 12 Wörtern (maximal 144 Zeichen), der den Inhalt des Beitrags in aller Kürze möglichst treffend und in Satzform beschreibt. Im Feld „Meta-Schlüsselwörter” sollten Sie maximal 20 (wenn möglich weniger) einzelne Suchbegriffe eintragen, mit denen dieser Beitrag gefunden werden soll. Diese Suchbegriff werden einfach hintereinander durch Kommas getrennt eingetragen.

Zu finden sind diese Angaben in den Optionen eines Beitrags, für Joomla 2.5. und Joomla 3 an unterschiedlichen Stellen:

Joomla 2.5: Rechts neben dem Editorbereich befinden sich diverse (aufklappbare) Abteilungen von Einstellungsoptionen des Beitrags. Die unterste Abteilung sind die „Metadatenoptionen”.

Joomla 3: Hier finden Sie die Meta-Angaben im Options-Reiter „Veröffentlichung”.

Bitte beachten Sie: Meta-Angaben können Sie in der globalen System-Konfiguration, für Kategorien, für Menüeinträge und für Beiträge angeben. Meta-Angaben überschreiben sich in genau dieser Reihenfolge, d.h. die Meta-Angaben eines Beitrags sind die letztgültige Instanz — sofern Sie dort welche eingetragen haben.
Und beherzigen Sie: Suchmaschinen lieben zum Beitragstitel, zu den Zwischenüberschriften und zum Beitragstext selbst treffende Meta-Angaben, insbesondere diejenigen von Beiträgen.

Schlussbemerkung

Mit dieser Anleitung dürften Sie in die Lage versetzt sein, die meisten Aufgaben, die die redaktionelle Arbeit mit Joomla mit sich bringt, gut zu meistern. Das Entwerfen und Anwenden des Grundlayouts ist jedoch nicht Ihre Aufgabe. Dafür ist diejenige Person oder Firma zuständig, die Sie damit beaftragt haben. Konkret bedeutet das: Wenn Sie sich beim redaktionellen Arbeiten sich immer wieder daran machen (müssen), Formatierungen im Text von Hand einzufügen, dürfen Sie das als sicheres Indiz werten, dass das Grundlayout noch nicht gänzlich ausgereift ist. Unterm Strich treffen Sie die bessere Wahl, wenn Sie die zuständige Stelle darauf ansprechen und nachbessern lassen. Ihr zeitliches und somit auch finanzielles Budget, aber auch ihre Nerven werden es Ihnen schon mittelfristig danken.

Neben den hier gezeigten Einstellungsoptionen ermöglicht das System Joomla noch eine Fülle weiterer Möglichkeiten, auch auf Ebene der Beiträge. Diese Anleitung tritt keinesfalls an als „Joomla-Anleitung light”. Dies war nicht meine Intention und der Versuch würde den hier möglichen Rahmen sprengen. Wenn Sie sich weiter in das System einarbeiten möchten oder müssen, oder auch nur zur Vertiefung der hier gezeigten Möglichkeiten,  stehen Ihnen eine Fülle guter Anleitungen im Internet und auch in Druckform zu Verfügung.

Sollte Ihnen diese Seite gefallen, dürfen Sie diese gerne weiter empfehlen und natürlich auch verlinken. Ich möchte Sie nur an die Selbstverständlichkeit erinnern, meine Inhalte nicht heraus zu kopieren und als ihre eigenen auszugeben.

Ich wünsche Ihnen viel Spaß und Erfolg beim Editieren Ihrer Joomla-Beiträge!