Editor-Anleitung angepasst - Yogalehrer

Yogalehrer Online Anleitung
www.yoglehrer-online.de
Der Editor
So wird der Inhalt der Homepage gemacht
Der Teil, in dem die Webseite tatsächlich gestaltet wird, ist etwas gewöhnungsbedürftig. Eigentlich
wäre es möglich gewesen, einen sogenannten "WYSIWYG"-Editor einzubauen. Damit hätte man
die Webseite beinahe so bearbeiten können, wie man es von Textbearbeitungsprogrammen im Büro
gewohnt ist. Leider haben alle diese "What You See Is What You Get"-Editoren das Problem, dass
sie Formatierungen immer nur hinzufügen können. Das Wegnehmen geschieht durch Hinzufügen
einer neuen Formatierungsanweisung. Ab einer gewissen Komplexität kommen alle diese Javascript-getriebenen Supereditoren beim Formatieren von bestimmten Zeichenfolgen in eine Fehlerzone, aus der sie nie wieder herausfinden. Die Webseite wird total zerhauen, es sind keine Editoren,
es sind "Edioten". Jeder Reparaturversuch, verschlimmert die Lage immer mehr.
Die andere Möglichkeit wäre, direkt HTML-Code eingeben zu lassen. Da gerät aber die Seitendarstellung durcheinander und irgendwann geht gar nichts mehr. Diesmal liegt das Problem in der
HTML-Technik selbst begraben, die Browser stellen den Inhalt einer <textarea> - Anweisung
nicht als zu bearbeitenden Text dar, wenn sie zu dem (Trug)Schluss kommen, die Endeanweisung
</textarea> wäre vergessen worden, weil jemand eine <div> - oder <h1> - Anweisung
eingegeben hat.
Diese Probleme kann man mit "BBCode" (Bulletin-Board-Code), den man aus Foren kennt, umgehen. Man bearbeitet eben die "So-soll-es-aussehen" Anweisungen gleich mit, mitten im Text.
Ganz früher war das die normale Art und Weise, wie die damals normalen Textbearbeitungsprogramme gearbeitet haben. Das ist aber schon lange her, das Internet hat diese eigentlich schon
ausgestorbene Art der Textformatierung nur wiederbelebt. Man kann Fehler ganz einfach sehen und
weglöschen.
BBCode ist an HTML und CSS angelehnt, wer sich mit HTML und CSS auskennt, wird gar keine
Schwierigkeiten haben, damit zurecht zu kommen.
Weiter hinten wird verraten, wie man beliebigen CSS-Code benutzen kann, um all das zu tun, was
man mit CSS machen kann. Aber das sage ich nur, um die HTML/CSS-Spezialisten zu beruhigen,
die an dieser Stelle der Anleitung normalerweise von einer leichten Panikattacke ergriffen werden:
"Oh Gott! Ich kann gar nicht alles machen!"
Doch, ihr könnt. Aber jetzt gucken wir uns erstmal an, was der Editor außer dem Textfeld noch alles
zu bieten hat. Der Editor von YO hat noch ein paar Knöpfe zum draufklicken in einer Bearbeitungsleiste und sieht von Weitem beinahe so aus, wie ein "normales" Textbearbeitungsprogramm. Na gut
- von ganz weit weg, aber immerhin. Man markiert den Text, den man formatieren möchte, und
klickt auf das gewünschte Symbol und die Textformatierungsanweisungen werden vor und hinter
dem markierten Text in den Text eingefügt.
Der Editor von YO ermöglicht es auch Nicht-Fachleuten, ansprechende Seiten zu erzeugen. Und für
den Rest, der scheinbar nicht geht, gibt es den Kummerkasten, Email und das Telefon.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Die Bearbeitung der einzelnen Seiten der
Homepage geschieht im Arbeitsbereich unter dem
Menüpunkt „Homepage“. Dort dann „Editor“
wählen.
Der Editor für die einzelnen Seiten
So sieht der Editor von YO von Weitem
aus. Wenn man frische Seiten von YO
bekommt, dann steht da schon was drin.
Der Text erzeugt bereits eine Homepage,
in der ein paar – zugegebenermaßen
erstmal unverständliche – Anleitungen
stehen.
Nach einem Klick auf „Vorschau“ kann
man sich auch schon die Seite betrachten.
Sie enthält garantiert nichts, was man
behalten möchte.
Aber alle vier Basistechniken sind schon drin.
Die neue Seite nutzt bereits alle vier Basistechniken:
1.
2.
3.
4.
eine als Überschrift 1 (Header 1 = h1) formatierte Textzeile
hervorgehobene Anfangsbuchstaben
ein Bild (allerdings ist es nicht hochgeladen, deshalb wird ein Platzhalterbild gezeigt)
einen Link, der in den Arbeitsbereich von Yogalehrer-Online zielt
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Zurück in den Editor kommt man aus der Vorschau am einfachsten
durch den Link „edit“, der sich ganz oben, in der rechten
Seitenecke befindet.
Editorbefehle - Schreibweisen
Die meisten Editorbefehle benutzen die eckigen, geraden Klammern [ und ]. Sie bestehen aus dem
Startbefehl und dem Endebefehl, dazwischen ist der zu formatierende Text.
Am Beispiel der großen Überschrift 1 (h1)
Der Startbefehl für eine große Überschrift 1 lautet: [h1]
Nach dem Text, der in eine große Überschrift 1 gewandelt werden soll, kommt der Endebefehl
[/h1] . Der Endebefehl enthält einen Schrägstrich (der ist über der Ziffer „7“ auf der Tastatur zu
finden) vor der Befehlsbezeichnung „h1“ und wird so zu [/h1] .
Es gibt zwei Schreibweisen, mit der die Überschrift realisiert werden kann:
Die normale Schreibweise
[h1] Überschrift-Text [/h1]
und die Kurzschreibweise
[h1 Überschrift-Text ]
Wenn der Editor benutzt wird, um die Befehle einzufügen, wird die normale Schreibweise erzeugt.
Die vier Basistechniken: Wie mache ich ...
Alle Basis-Techniken, die auf neu erstellten Seiten zu finden sind, werden hier erklärt.
...Überschriften
Überschriften gliedern den Text, auch im Internet. Sie sind ein guter Platz, um Schlüsselwörter
(Keywords) für Suchmaschinen im Seitentext zu wiederholen, die man bereits im Infobereich der
Seite (Lila Balken „Seitendaten: Infos zur Seite“) hinterlegt hat.
Überschriften werden bei YO in 3 Heftigkeitsgraden von 1 bis 3 realisiert. Die größte Überschrift
ist die h1-Überschrift (header 1). H3 ist die kleinste.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
In diesem Beispiel soll ein Text
zu einer Überschrift 2 formatiert werden.. Der Text wurde
vorher mit der Maus markiert.
Aus
Dieser Text soll eine Überschrift 2 werden
wird nun
[h2]Dieser Text soll eine Überschrift 2 werden[/h2]
Nach Speichern mit
„Seite speichern“ und
anschließendem Klick
auf „Vorschau“ kann
man den in eine Überschrift 2 umgewandelten
Text begutachten. Die
hier verwendete Vorlage
ist „Ähren am Strand“,
der Text sieht je nach
Vorlage immer ein wenig anders aus, weil er manchmal in eine Grafik gewandelt wird oder auch
nur in einer andere Farbe dargestellt ist. Die hier benutzte Vorlage wandelt Überschriften in Grafiken um, denn diese verschnörkelte Schriftart ist keine HTML-Schriftart. Veraltete Browser wie
IE6 (Internet Explorer 6 von Microsoft) und kleiner unterstützen diese Umwandlung noch nicht.
...hervorgehobene Anfangsbuchstaben
Ein hervorgehobener Anfangsbuchstabe - wie in diesem Absatz hier - sieht am Anfang eines Absatzes professionell aus. Der Leser der Seite bekommt einen Anhaltspunkt, der ins Auge springt.
Dadurch kann er schneller zu den für ihn interessanten Textabschnitten springen, da er sie schneller
wiederfindet.
Der Editor hat für hervorgehobene Anfangsbuchstaben keinen „Draufklickknopf“. Den hervorgehobenen Anfangsbuchstaben muss man von Hand eingeben.
So geht das:
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Vorher:
Diese Zeile bekommt einen hervorgehobenen Anfangsbuchstaben.
Nachher:
!D iese Zeile bekommt einen hervorgehobenen Anfangsbuchstaben.
Was ist passiert?
ZWEI Dinge sind passiert:
1. Direkt vor den ersten Buchstaben kommt ein Ausrufezeichen.
2. Direkt hinter den ersten Buchstaben kommt ein Leerzeichen.
So sieht das im Editor aus.
Und so sieht es nach Speichern und Klick auf
„Vorschau“ mit der Vorlage „Ähren am Strand“
aus. Andere Vorlagen zeigen den hervorgehobenen Anfangsbuchstaben zwar ebenfalls hervorgehoben, aber in einer anderen Schriftart an.
...ein Bild in die Webseite
Der Befehl, um ein Bild zu zeigen, funktioniert wieder mit eckigen Klammern. Er ist sogar im
Editor als „Draufklickbefehl“ hinterlegt.
Um ein bereits hochgeladenes Bild
anzuzeigen, wird der Befehl
[bild <bildnummer>]
benutzt. Um das erste, hochgeladene
Bild anzuzeigen, gibt man
[bild 1]
ein. Dazu kann man den Bild-Knopf
im Editor benutzen.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Wenn man eine Bildnummer benutzt, die noch nicht hochgeladen wurde, dann wird ein
Platzhalterbild angezeigt.
Der normale Bildbefehl [bild 1] stellt
das Bild als normalen Seiteninhalt dar.
Genau wie der Seitentext benötigt das
Bild seinen eigenen Platz. Der Browser
stellt das Bild auf eine Textzeile und führt
anschließend den Text auf der selben Zeile
fort.
Dieses Aussehen ist meistens nicht erwünscht. Man möchte, dass der Text das
Bild rechts oder links umfließt.
Der „Schweb-Nach-Links“ Bildbefehl
"Links-Bild" [lbild 1] nimmt das
Bild aus dem normalen Seiteninhalt
heraus. Das Bild wird nun in einigen
Browsern nicht mehr benutzt, um die Gesamtseitenlänge zu berechnen – es benötigt keinen eigenen Platz mehr. Der
Browser stellt das Bild nach links und
führt den Text auf der rechten Seite vorbei.
Den Bildbefehl [lbild 1] sollte man
nur benutzen, wenn genügend Text vorhanden ist, da sonst negative Anzeigeeffekte die Webseite für einige Browser (z.B.: Firefox)
unschön werden lassen.
Der „Schweb-nach-rechts“ Bildbefehl "Rechts-Bild" [rbild 1] funktioniert genau wie [lbild
1], nur nach rechts. Auch dieser Befehl kann die Webseite unschön werden lassen, wenn nicht genügend Text vorhanden ist. Häufiger Effekt: Das "RBild" oder "LBild" hängt nach unten hinter der
Fußzeile aus der Webseite heraus.
...eigene Bilder in die Webseite
Um ein Bild hochzuladen, klickt man unterm Editor im
Bereich „Hochgeladene Bilder „ auf „Mehr Bilder
hochladen“. Dadurch wird die Seite „Meine
Homepage“ geöffnet und dort direkt der Teil aktiviert,
mit dem man Bilder hochladen kann.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Erst auf den „Datei auswählen“ - Knopf klicken
und ein Bild von der eigenen Festplatte
auswählen.
Hinter „Text:“ einen beschreibenden Text eingeben – oder leer lassen.
Hinter „Lange Seite ist“ die gewünschte Seitenlänge in Pixel auswählen. 200 Pixel sind schon
eingestellt, das kann man auch erstmal so lassen.
Danach auf „Bild hochladen“ klicken. Man kann ein Bild mehrmals hochladen, um zum Beispiel
die Anzeigegröße mit „Lange Seite ist“ zu ändern und den Effekt zu beobachten. Das selbe Bild
wird nicht jedesmal neu hochgeladen, es überschreibt das schon vorhandene. Erst wenn ein anderes
Bild hochgeladen wird, speichert der Server es als „Neu“ ab.
Jede YO-Webseite verwaltet ihre eigenen, hochgeladen Bilder im lila Balken „Bilder: bereits
hochgeladene Bilder“. Jedes Bild ist mit dem Bildbefehl eingerahmt, mit dem es angezeigt werden
kann.
1.) Vorschaubild
2.) Sortierungsgewicht
3.) Beschreibender Text
4.) Speicher-Knopf
5.) Lösch-Knopf
6.) Original-Dateiname
7.) Aktuelle Maße
8.) Original Maße
Die Informations-I auf blauem
Kreis enthalten wichtige
Informationen, die man sehen
kann, wenn man mit der Maus
über ihnen stehen bleibt.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Zu 2.): Das Sortierungsgewicht verschiebt die einzelnen Bilder, wenn mehr als ein
Bild hochgeladen wurde. Die Bilder mit kleinem Wert kommen nach vorne, die mit
großem nach hinten. Beachte, dass sich die Inhalte aller Bilder ändern können, wenn
ein Bild gelöscht wird oder die Sortierung hier geändert wird. Das 2. Bild in der
Sortierreihenfolge heißt immer [bild 2].
Zu 4.): Beim Löschen verschieben sich alle HINTER dem Bild einsortierten Bilder um einen Platz
nach vorne. Das heißt, was vorher [Bild 4] war, wird nun [Bild 3]. Wahrscheinlich müssen nach
dem Löschen eines Bildes alle [Bild]-Bezeichner im Seitentext überarbeitet werden.
...Yogalehrer-Online Galerie Bilder in die Webseite
Wie funktionieren die Galeriebilder?
Die Galeriebilder werden ähnlich wie die selbst hochgeladenen Bilder in die Webseite eingebunden.
Der normale Befehl lautet
[gbild <Bildnummer>]
GBild für "Galerie-Bild"
also [gbild 2] für die orangene Hand.
Links- oder rechtsschwebende Ausgabe des Bildes geht mit
[lgbild <Bildnummer>] bzw. [rgbild <Bildnummer>]
Die Bilder findet man hinter dem lila Balken "Yogalehrer-Online Galerie Bilder".
Die Bildnummer und den Standard-Befehl erfährt man, wenn man mit der Maus kurz über dem
gewünschten Galeriebild stehen bleibt.
Für die nach links oder rechts schwebenden Galeriebilder gelten die gleichen Regeln wie für die
nach links oder rechts schwebenden, eigenen Bilder.
Schwebemüll? STOP!
Wenn nach links oder rechts schwebende Galerie-Bilder oder eigene Bilder plötzlich beginnen, sich
ineinander zu verhaken und die Seite gar nicht mehr so aussieht, wie man sich das gedacht hatte,
dann hilft ein gut platzierter [stop] – Befehl. Der [stop] beendet an der Stelle, wo er steht, alle
Schwebezustände und die Seite ist ab da wieder in Ordnung. Der STOP wurde eingeführt, nachdem
die Technik entdeckt wurde, mit der „Durchhänger“ nach Schwebezuständen bereinigt wurden.
Tatsächlich macht Yogalehrer-Online seit einiger Zeit am Ende jeder Seite immer einen STOPBefehl, um eventuell über die Fußzeile herausragende Schwebebilder wieder einzufangen. Dieser
Stop wurde nun auch für „unterwegs“, also mitten im Seitentext, freigegeben.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Links
Um einen Link im Editor zu erzeugen, sollte man diese Schritte gehen:
1.) Die Ziel-Webseite besuchen.
2.) Die Adresse der Ziel-Webseite in die Zwischenablage kopieren.
3.) Im Editor den Text markieren, der zu einem Link werden soll.
4.) Auf das Link-Symbol klicken und
5.) Die Adresse der Ziel-Webseite aus der Zwischenablage in das Eingabefeld des Dialogs einfügen.
6.) "OK" klicken.
7.) Auf "Seite speichern" klicken.
8.) Auf "Vorschau" klicken und nachsehen, ob es funktioniert hat.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
So sieht die Textzeile mit dem Link jetzt im Editor aus (aber ohne die blaue Farbe!):
Hier kommt mitten [url http://www.ingoknito.de/ im Text ein Link]
hin.
Ein Link besteht aus mehreren Teilen und wird in der Kurzschreibweise notiert:
[url <Linkziel> <beliebiger, freier Text>]
Die DIV-Anweisung für fast alle Fälle
Eine der häufigsten Fragen von Neukunden war überraschenderweise:
"Ja, schön. Es klappt. Aber wie zentriere ich den Text?"
Ich kam mir vor, wie der Koch, bei dem jemand nach Ketchup fürs Cordon Bleu verlangt. Warum
sollte jemand Text zentrieren wollen, sind die Vorlagen etwa nicht gut genug, so wie sie sind? Ganz
ehrlich, zentrierter Text ist OUT. Megaout. Er sieht doof aus. Aber mir glaubt ja keiner.
"Ja, die Vorlagen sind schon gut so, ehrlich, aber ich möchte den Text trotzdem sehr gerne
zentrieren."
Ich rückte dann eben doch mit der [div] - Anweisung raus. Die Div-Anweisung ist super-simpel
und benötigt einen Benutzer, der Ahnung von CSS hat. Das heißt, der Einzige, der damit zurecht
kommt, bin wahrscheinlich ich.
Die Div-Anweisung erzeugt einen HTML-Layer (<div>), der ein "style"-Attribut bekommt. Alles
was hinter "div" steht wird in das style-Attribut gepackt. Das sieht dann so aus:
[div text-align:center]
und erzeugt den HTML-Code: <div style="text-align:center">
DIV: Was kann man mit der DIV-Anweisung alles machen?
Alles. Fast alles. Die DIV-Anweisung erzeugt immer einen rechteckigen Bereich. Um Text mittendrin irgendwie anders zu färben, ginge die DIV-Anweisung zwar auch, aber der so gefärbte Text
wäre dann wieder ein eigener Absatz. DIV macht immer eigene Absätze. Es ist alles möglich, was
das CSS nur hergibt, aber es braucht immer einen eigenen Absatz.*
STYLE: Wie kriege ich Text mittendrin gefärbt?
Das geht mit der [style] - Anweisung. Die Style-Anweisung nimmt genau die selben Anweisungen entgegen, wie die [div] - Anweisung, macht aber keinen neuen Absatz. Rotgefärbten
Text "mittendrin" kann man so machen:
[style color:red] Dieser Text ist rot. [/style]
dadurch wird dieser HTML-Code erzeugt:
<span style="color:red"> Dieser Text ist rot. </span>
* Für die CSS-Spezialisten: Ja, ich weiß, es geht auch ohne neuen Absatz.
Yogalehrer Online Anleitung
www.yoglehrer-online.de
Links, Rechts und Zentriert
Irgendwann wurde es mir zu dumm, jedem neuen Kunden die [div text-align:center] Anweisung zumailen zu müssen. Ich sah ein, dass ich Unrecht hatte: YO-Kunden MÜSSEN Text
zentrieren. Also her mit dem Ketchup.
Die Textformatierungsanweisungen befinden
sich hinter einem krakeligen Symbol.
Man kann den Text zentrieren, links- oder
rechtsbündig machen oder Blocksatz haben.
Beim Blocksatz werden die rechte und die linke
Kante des Textes gerade.
So geht es:
1. Erst den zu formatierenden Text mit der Maus markieren.
2. Dann das krakelige Symbol anklicken und
3. dann einen der vier Menüpunkte auswählen.
Der Punkt "Zentriert" ist deshalb ganz oben, weil er am häufigsten verlangt wurde. Er fügt eine
neue BBCode-Anweisung "[center]" ein.
Aus "Zentrierter Text" wird [center]Zentrierter Text[/center]. Im Seitenquelltext
des Browsers wird der so formatierte Text der so erzeugten Webseite so angezeigt:
<div style="text-align: center;">Zentrierter Text</div>
Nicht vergessen:
Nach einer Änderung immer auf "Seite speichern" klicken und dann mit
"Vorschau" das Ergebnis kontrollieren.
Viel Spaß mit dem Editor und schöne Seiten wünscht Dir
Peter Klauer