User-Artikel layouten User-Artikel

Stand: 7.8.2016.

Der wichtigste Tipp vorweg: Wenn du Fragen hast, frag! GamersGlobal lebt von seiner Community, und im Matrix-Chat, per Comment unter deinem in Entstehung befindlichen Artikel oder notfalls auch per PN an die User-Artikel-Beauftragten Q-Bert und Jürgen wird dir ganz sicher geholfen.

Wenn du die erste Stufe der Schreiber-Talentklasse erworben hast (über dein User-Profil), hast du die Möglichkeit, eigene User-Artikel bei GamersGlobal.de zu veröffentlichen, siehe dazu auch unser Tutorial So schreibe ich gute Artikel. Ab Schreiber-II kannst du deine Texte umfangreich gestalten, später (ab Schreiber-IV) darst du Guides schreiben, noch später (ab Schreiber-VI) sogar redaktionelle Artikel vorschlagen und bei einem Okay der Redaktion schreiben.

Dieses Tutorial soll Schreiber-II-Usern und höher den Editor näherbringen, mit dem sich Artikel abwechslungsreich gestalten lassen – der aber etwas Einarbeitungszeit benötigt. Zu beachten ist bei der folgenden Beschreibung, dass sich die Benutzung des Editors in den verschiedenen Browsern teilweise ein wenig unterscheidet.
 

Inhalt dieses Tutorials

• 1. Text in den Editor einfügen
• 2. Formatierungen
• 3. Der Dateibrowser
• 4. Upload und Einfügen eines Screenshots in einem Schritt
• 5. HTML im Editor nutzen
• 6. Inhaltsverzeichnis erstellen
• 7. Löschen von Inhalten
• 8. Weitere „So könnte es aussehen“-Beispiele
• 9. Die verschiedenen Thumbnail-Größen im Überblick

 

1. Text in den Editor einfügen

Es ist wichtig, dass dein Text beim Einfügen in den GamersGlobal-Editor keine Formatierungen enthält. Werden Texte aus Microsoft Word oder anderen Schreibprogrammen kopiert und in das Textfeld des Editors eingefügt, werden oft zahlreiche Formatierungen aus diesen Programmen übernommen – diese können jedoch von unserem Editor nicht dargestellt werden, oder sie scheinen zwar korrekt dargestellt zu werden, bringen aber unsichtbare Formatierungen mit, die anderswo für Probleme sorgen. Verschiedene Möglichkeiten stehen dir dafür zur Verfügung:

• Du kannst deinen kopierten Text beispielsweise in das Windows-Notepad einfügen, erneut kopieren und anschließend in unseren Editor einfügen (wahrscheinlich die sicherste Methode).
• Im GamersGlobal-Editor kannst du die Schaltfläche „aus MS-Word einfügen“ nutzen und im dazugehörigen PopUp-Fenster deinen Text einfügen, zudem steht der Button „Formatierungen entfernen“ zur Verfügung.
• Natürlich kannst du deinen Artikel auch direkt im Editor schreiben und ihn zwischenspeichern. Bedenke aber, dass dir durch einen versehentlichen Klick auf ein Lesezeichen oder ähnliches viel Arbeit verlorengehen kann. Zudem ist die Rechtschreibkorrektur eines Schreibprogramms eine nicht zu verachtende Hilfe.

2. Formatierungen

Wie bei den News auf GamersGlobal.de, sollte auch bei einem Artikel mit Formatierungen sparsam umgegangen werden. Daher bietet der GamersGlobal-Editor nur eine Handvoll Formatierungsmöglichkeiten – wie zum Beispiel „Fett“ und „Kursiv“ sowie Aufzählungen und das Setzen von Verlinkungen – , die jedoch vollkommen ausreichen. Die meisten davon sollten selbsterklärend sein; wir stellen im Folgenden drei spezielle vor:
 

Page Break (Seitenumbruch)		Mit dieser Schaltfläche fügst du einen oder mehrere Seitenumbrüche in deinen Artikel ein. Auf diese Weise werden lange Texte auf mehrere Seiten verteilt, was das Lesen deutlich angenehmer macht. Einfach den Cursor an die Stelle setzen, an der du einen Seitenumbruch einfügen möchtest, und die entsprechende Schaltfläche anklicken.
Zwischenüberschrift		Mittels dieses Buttons zeichnest du markierten Text als Zwischenüberschrift aus. Diese sind nicht nur für die Struktur deines Artikels wichtig, sondern auch entscheidend für das Inhaltsverzeichnis.
Tabelle einfügen/ editieren		Manchmal kann es übersichtlicher sein, umfangreiche Informationen oder Daten in einer Tabelle darzustellen. Mit Klick auf den entsprechenden Button hast du die Möglichkeit, solch eine Tabelle ganz nach deinen Wünschen anzupassen: Du kannst zum Beispiel die Anzahl der Zeilen und Spalten angeben oder die Breite der Tabelle und deren Ausrichtung festlegen. Möchtest du eine bereits eingefügte Tabelle nachträglich bearbeiten, kannst du dies beispielsweise über den Tabellen-Button tun (Tabelle vorher markieren). Durch einen Rechtsklick auf die Tabelle über das Kontextmenü gelangst du genauso zu den Tabelleneigenschaften.

Generell gilt: Möchtest du Text formatieren, musst du ihn vorher markieren (zum Beispiel um Text als Zitat einzurücken). Sollen mehrere Inhalte als Liste dargestellt werden, kannst du alle entsprechenden Elemente auf einmal markieren und anschließend den Button für das Erstellern der Liste nutzen.
 

3. Der Dateibrowser

Ab Schreiber-II steht dir auf GamersGlobal.de ein eigenes User-Verzeichnis zur Verfügung, in das du deine Screenshots oder Grafiken ablegen kannst. Zu diesem Verzeichnis gelangst du, indem du dein Profil aufrufst, dort auf der linken Seite über dem Textfeld für deinen GG-Status auf das Zahnrad klickst und den Link „Dateibrowser“ auswählst.

Auf der nun angezeigten Seite hast du unter anderem die Möglichkeit, Screenshots auf den Server zu laden, Dateien zu löschen oder Unterverzeichnisse zu erstellen. Wir beschränken uns in diesem Abschnitt auf den Upload, da der Rest selbsterklärend sein sollte.

Folgende Schritte sind nötig, um einen Screenshot hochzuladen:

• Im Dateibrowser den Link „Upload“ drücken.
• Mit „Durchsuchen“ die entsprechende Datei auf deinem PC auswählen.
• Wenn gewünscht, automatisch Thumbnail erstellen lassen (siehe auch folgender Absatz).
• Mit der Schaltfläche „Upload“ das Hochladen der Datei ausführen.

Die Screenshots oder Grafiken für deinen Artikel befinden sich nun auf unserem Server und können von dir in den Editor eingearbeitet werden.

Wie eben bereits erwähnt, hast du bereits beim Upload – und auch im Nachhinein – die Möglichkeit, für deine Bilder entsprechende Thumbnails beziehungsweise Vorschaubilder erstellen zu lassen. Werden diese später im fertigen Artikel angeklickt, öffnet sich der eigentliche Screenshot im Original-Format. Folgende „PC breit“ und „HD“-Varianten stehen für die Thumbnails derzeit zur Verfügung:

• 600er (PC breit, 600x375)
• 600er (HD, 600x338)
• 300er (PC breit, 300x188)
• 300er (HD, 300x169)
• 200er (PC breit, 200x125)
• 200er (HD, 200x113)
• 960er (PC breit, 960x600)
• 960er (HD, 960x540)
• 455er (PC breit, 455x284)
• 455er (HD, 455x256)
• 303er (PC breit, 303x189)
• 303er (HD, 303x170)

Die automatisch erstellten Thumbnails erkennst du im Dateibrowser daran, dass sie über einen Zusatz wie „_303hd“ oder ähnliches verfügen. Um auch einen bildhaften Überblick zu bekommen, findest du die Thumbnail-Größen im Anhang dieses Tutorials als Grafiken, beginnend mit der kleinsten Größe.
 

4. Upload & Einfügen eines Screenshots in 1 Schritt

Das Einbetten von Grafiken und ähnlichem sowie einer passenden Bildunterschrift könnte beim ersten Mal eventuell etwas kompliziert sein. Wenn du es jedoch zwei, drei Mal gemacht hast, wird auch diese Sache zum Kinderspiel.

Auch für das Einfügen der Screenshots gibt es verschiedene Möglichkeiten. Die folgenden zwei Beispiele verknüpfen den Upload eines Screenshots mit dem gleichzeitigen Einfügen in den Editor. Sollte der Upload bereits vorher getätigt worden sein, entfallen die entsprechenden Schritte natürlich.

Einfügen eines Bildes ohne Bildunterschrift und Thumbnail-Funktion:

• Cursor im Body an die gewünschte Stelle setzen.
• Die Schaltfläche „Bild einfügen/editieren“ anklicken.
• Im PopUp-Fenster auf „Server durchsuchen“ klicken; auf diese Weise gelangst du in deinen persönlichen Dateibrowser.
• Hier klickst du auf „Upload“ und wählst das entsprechende Bild auf deinem PC aus (wichtig: das Bild sollte nicht breiter als 960 Pixel sein).
• Wurde die Datei übertragen, markierst du sie durch einmaliges Anklicken.
• Anschließend klickst du bei den Links im oberen Menü „Insert File“ an oder klickst direkt einmal in das unter der Dateiliste angezeigte Bild, wodurch der Dateibrowser geschlossen und das Bild an den Editor gesendet wird.
• Du befindest dich nun wieder bei den Bild-Eigenschaften; der Pfad zu deinem Bild wurde übernommen, ebenso wie Breite und Höhe.
• Optional kannst du noch einen Alternativ- oder Title-Text eingeben. Letzteres wird angezeigt, wenn ein User mit dem Mauszeiger über das Bild fährt.
• Nach dem Klick auf „OK“ wird dein Screenshot im Artikel angezeigt.

Ein Beispiel für einer 303 Pixel breite Box.

Einfügen eines 303 Pixel breiten Bildes mit Bildunterschrift und Thumbnail-Funktion, rechts ausgerichtet:

• Cursor im Body an die entsprechenden Stelle setzen.
• HTML-Schaltfläche anklicken.
• Schaltfläche „303er Box Rechts“ anklicken; der entsprechende Code wird in der HTML-Ansicht angezeigt.
• Auf „OK“ klicken; die ausgewählte Box wird im Editor angezeigt.
• Im Editor das Dummy-Bild mit einem Klick markieren, in der Symbolleiste die Schaltfläche „Bild“ sowie im darauffolgenden PopUp „Server durchsuchen“ anklicken; auf diese Weise gelangst du in deinen persönlichen Dateibrowser.
• Hier klickst du auf „Upload“ und wählst das gewünschte Bild von deinem PC.
• Da dieses Beispiel ein Thumbnail beinhaltet, lassen wir zudem durch Auswahl eines entsprechenden Kästchens ein Vorschaubild erzeugen (in diesem Fall: „303er (HD) (303x170)“.
• Wurde die Datei mit Klick auf „Upload“ übertragen, markierst du das erzeugte Vorschaubild durch einmaliges Anklicken.
• Anschließend klickst du bei den Links im oberen Menü „Insert File“ an oder klickst direkt in das angezeigte Bild, wodurch der Dateibrowser geschlossen und das Bild an den Editor gesendet wird.
• Wieder zurück im Editor schließt du die Bild-Eigenschaften mit Klick auf „OK“.
• Das eingefügte Thumbnail ist noch markiert, durch Klick auf „Link einfügen/editieren“ fährst du fort.
• In den Link-Eigenschaften erneut auf „Server durchsuchen“ klicken.
• Im Dateibrowser nun das Originalbild auswählen und es durch Klick auf „Insert File“ an den Editor senden; du befindest dich wieder bei den Link-Eigenschaften, die du noch nicht schließt.
• Nun folgt etwas Wichtiges: Bei den Link-Eigenschaften den Reiter „Erweitert“ auswählen und unter „Stylesheet Klasse“ den Wert „thickbox“ eintragen (nur dadurch funktioniert später das Zoomen bei Klick auf das Vorschaubild). Standardmäßig ist diese Eigenschaft bereits eingetragen, prüfe jedoch für alle Fälle dennoch.
• Wenn dies getan ist, PopUp mit Klick auf „OK“ schließen.
• Abschließend die Bildunterschrift im Editor anpassen – fertig; im gespeicherten Artikel (Achtung, nicht in der Vorschau-Ansicht) wird bei Klick auf das Thumbnail nun das Originalbild mithilfe der Zoom-Funktion angezeigt (siehe das Beispiel auf der rechten Seite).

Möchtest du hingegen eine Grafik mit Bildunterschrift aber ohne Zoom-Funktion für deinen Artikel nutzen, entfallen solche Schritte wie das Erstellen des Vorschaubildes, die Verlinkung auf das Originalbild und das Eintragen der „thickbox“-Angabe.
 

5. HTML im Editor nutzen

Der Editor bietet dir die Möglichkeit, ein wenig HTML (Hypertext Markup Language; Auszeichnungssprache für die Darstellung von Dokumenten im Internet) für deine Artikel zu nutzen. Aber keine Bange: Du musst kein HTML erlernen, sondern kannst bereits vorgefertigte HTML-Schnipsel nutzen.

Wichtig ist, dass du HTML nicht in das Body-Feld schreiben kannst, in dem sich der Inhalt deines User-Artikels befindet. Setzte stattdessen den Cursor im Body-Feld an die Stelle, an die du HTML einfügen möchtest und klicke anschließend auf die Schaltfläche „HTML“ (ganz rechts über dem Body). Es wird ein PopUp-Fenster angezeigt, in dem sich oben drei Reiter befinden: „Neuer Artikelstil“, „Alte User-Artikel“ und „HTML“: Der erste Reiter bietet dir vorgefertigte HTML-Schnipsel, die du nur anzuklicken brauchst, damit deren Code für die weitere Bearbeitung übernommen wird (dazu kommen wir gleich). Gleiches trift für „Alte User-Artikel“ zu – wie die Bezeichnung jedoch bereits deutlich macht, sind einige diese Gestaltungsmöglichkeiten veraltet. So empfiehlt es sich nicht mehr, die 600er Boxen zu nutzen, da die Artikel derzeit über eine Breite von maximal 960 Pixeln verfügen.

Der Reiter „HTML“ ist dagegen eine leere Fläche, in die du einige der erlaubten HTML-Befehle sowie den zu formatierenden Text eingeben kannst. Welche HTML-Tags du nutzen darfst, kannst du auf dieser Seite nachlesen.

Wie erwähnt, kannst du bereits fertigte HTML-Codes nutzen und auf diese Weise unter anderem Zitate entsprechend darstellen oder dem Leser Blöcke mit zusätzlichen Informationen anbieten. Zur Verdeutlichung folgen zwei Beispiele:

Einfügen eines Zitates, das innerhalb des Textes rechts ausgerichtet ist:

• Cursor im Body an die entsprechende Stelle setzen
• HTML-Schaltfläche anklicken
• Schaltfläche „Zitat rechts“ wählen; der entsprechende Code wird in der HTML-Ansicht angezeigt
• den Text „ZITAT TEXT“ durch das einzufügende Zitat ersetzen (Grafiken nicht verändern)
• mit „OK“ bestätigen; das Zitat wurde in den Text eingefügt (siehe den Abschnitt mit den Beispielen)

Einfügen einer 303 Pixel breiten Info-Box auf der rechten Seite des Artikels:

• Cursor im Body an die entsprechende Stelle setzen
• HTML-Schaltfläche anklicken
• Schaltfläche „Info 303 Rechts“ anklicken; der entsprechende Code wird in der HTML-Ansicht angezeigt
• den Text „Überschrift“ durch eine eigene passende Überschrift ersetzen
• den Text „Text-Inhalt“ durch eigene Informationen ersetzen
• mit „OK“ bestätigen; die Info-Box wurde in den Artikel eingefügt (siehe die Tipps in diesem Tutorial)

 

6. Inhaltsverzeichnis erstellen

Artikel, die sich über mehrere Seiten erstrecken, benötigen ein Inhaltsverzeichnis. War es zu einem früheren Zeitpunkt noch notwendig, die einzelnen Seiten für diese Inhaltsübersicht manuell zu benennen, so entfällt dieser Schritt inzwischen.

Um ein Inhaltsverzeichnis für euren Beitrag zu erstellen, braucht ihr folglich nur auf den Text-Link „TOC generieren“ zu klicken, der sich rechts oben befindet. Entscheidend für die Erzeugung des TOCs (Table of Content) sind bestehende Zwischenüberschriften, die mit der H-Schaltfläche ausgezeichnet werden und die sich durch den höheren Schriftgrad vom restlichen Text abheben. Anders formuliert: Kommen in eurem Artikel keine Zwischenüberschriften vor – wovon vor allem in längeren Texten auch aus strukturellen Gründen abzuraten ist – kann auch kein Inhaltsverzeichnis erstellt werden.

Wir empfehlen, das TOC erst dann zu erstellen, wenn ihr die Arbeiten am Text und der Gestaltung abgeschlossen habt.
 

7. Löschen von Inhalten

Normaler Text oder Bilder, die sich nicht in einer Tabelle oder einem Block befinden, können in allen Browsern problemlos mit der Entfernen-Taste gelöscht werden. Gleiches ist im Internet Explorer auch mit Tabellen und Blöcken möglich (nach deren Markierung).

In Firefox und Opera dagegen funktioniert die „Entf“-Taste bei Tabellen nicht, weshalb du dafür das Kontextmenü nutzen kannst:

• Zu löschende Tabelle durch Einfach-Klick markieren
• Durch Rechtsklick Kontextmenü aufrufen
• „Tabelle löschen“ wählen

Auf die gleiche Weise – über das Kontextmenü – können auch einzelne Zellen oder Spalten hinzugefügt oder entfernt werden (auch hier wieder den Cursor vorher an die entsprechende Stelle setzen). Auch die erwähnten Zitat- oder Info-Boxen müssen in Firefox oder Opera anders aus dem Artikel entfernt werden, als es im Internet Explorer der Fall ist, da sie nicht im Gesamten markiert werden und mit der Entfernen-Taste gelöscht werden können. Folgende Möglichkeiten hast du zum Beispiel im Firefox:

• Zuerst Inhalt der Box mit Entfernen-Taste löschen
• Anschließend leere Box entfernen

oder

• Rechtsklick in die Box und „Entferne Div Block“ wählen
• Anschließend den noch übrigen Text löschen