Symbolschaltflächen

img117_6
Ein Klick auf diese Symbolschaltfläche löscht alle im Texteingabefeld gemachten Eingaben.
-------------------------------
img118_6

Diese drei Symboldschaltflächen dienen der Formatierung des Schriftschnitts.
B steht für bold=fett, I steht für italic=kursiv, U steht für underline=unterstrichen.

Dabei gilt: Sie müssen natürlich den zu formatierenden Text zuvor markiert haben.

-------------------------------
img119_6
Mit diesem Listenfeld können Sie die in den CSS-Dateien festgelegten Schriftgrößen für Ihren markierten Text überschreiben.
-------------------------------
img120_6
Mit diesen Schaltflächen können Sie zuvor markierten Text tief- bzw. hochstellen.
-------------------------------
img121_6
Mit diesen Symbolschaltflächen legen Sie die Textausrichtung zuvor markierten Textes fest (linksbündig, zentriert, rechtsbündig, Blocksatz).
-------------------------------
img122_6
  • Diese beiden Schaltflächen dienen dazu
  1. zuvor markierten Text als Aufzählung zu formatieren.
Hinweise zum Umgang mit Aufzählung/Nummerierung
Ein Aufzählungszeichen wird pro Absatz erzeugt. Einen Absatz erhalten Sie, indem Sie eine Texteingabe mit der Enter (Return)-Taste abschließen.
Wenn Sie innerhalb eines mit einem Aufzählungszeichen markierten Absatzes einen Zeilenumbruch einfügen möchten, müssen Sie diesen mit gleichzeitigem Drücken der Shift (Hochstell)-Taste und Enter-Taste setzen.
Sie beenden den Aufzählungsmodus, indem Sie zweimal hintereinander die Enter-Taste drücken.
-------------------------------
img123_6
Diese Schaltflächen dienen für den Texteinzug von zuvor markiertem Text.
Die Schaltfläche für den Linkseinzug wird erst aktiv, wenn Sie einen nach rechts eingezogenen Text markiert haben.
-------------------------------
img124_6

Copy and Paste

Diese Schaltflächen dienen dazu, zuvor markierten Text auszuschneiden (Cut) oder zu kopieren (Copy) und an der Stelle, an der Sie Ihren Cursor dann positionieren wieder einzufügen (Paste).
Die Schaltfläche mit symbolisiertem Ordner und T dient dazu, zuvor in einer anderen Anwendung markierten unformatierten Text (Plain Text) einfügen zu können.
Die Schaltfläche mit symbolisiertem Ordner und W dient dazu, zuvor in MS Word markierten Text einfügen zu können.

Tipp
Nutzen Sie für Copy and Paste Tastenkombinationen:

  • mit Strg + a markieren Sie einen Text gesamt
  • mit Str + c wird der markierte Text kopiert
  • mit Strg + x wird der markierte Text ausgeschnitten
  • mit Strg + v wird der ausgeschnittene oder markierte Text eingefügt
-------------------------------
img125_6

Mit dieser Schaltfläche fügen Sie eine Tabelle ein. Nach dem Einfügen werden alle rechts davon stehenden Schaltflächen die Tabellenbearbeitung betreffend aktiv. Alternativ können Sie eine eingefügte Tabelle auch mit dem Kontextmenü bearbeiten.

Kontextmenü
Setzen Sie den Cursor in die eingefügte Tabelle und klicken Sie auf die rechte Maustaste.

Optionen zur Tabellenbearbeitung/Begriffe

Wenn Sie eine Tabelle bearbeiten, öffnet sich jeweils ein Dialogfenster, bestehend aus den Registerkarten General und Advanced. Schauen Sie einfach jeweils auf den Registerkarten nach, welche Möglichkeiten Ihnen für eine Zeile/Spalte/Zelle zur Verfügung stehen. So finden Sie auf der Registerkarte Advanced u.a. die Option, denTabellenrahmen oder auch den Hintergrund von Zeilen/Spalten/Zellen farbig zu gestalten.

  • Properties = Eigenschaften
  • Colum = Spalte
  • Row= Zeile
  • Cellspacing = Abstand zwischen den Tabellenzellen
  • Cellpadding = Innenabstand eines Zellinhaltes zur Zellbegrenzung
  • Alignment = Ausrichtung der Tabelle auf der Seite
  • VerticalAlignement = Ausrichtung des Zellinhaltes
    empfohlen: top
  • Border = Rahmen der Tabelle, 0 = kein Rahmen
  • Width = Tabellen-/Spaltenbreite*
    alle Spalten zusammengenommen müssen den Wert 100% ergeben, es sei denn das die Breite in Pixel angegeben wird
    mögliche Angaben: in Prozent; Bsp.: 25%... oder in Pixel; Bsp. 25px
  • Height = Tabellen-/Zeilen-/Zellenhöhe*
    mögliche Angabe: in Prozent; Bsp.: 25%...oder in Pixel; Bsp. 25px
  • Split = eine Tabellenzelle teilen (aus eins mach zwei...)
  • Merge = Tabellenzellen miteinander verbinden (aus zwei mach eins...)

*Bitte entscheiden Sie sich für eine Maßeinheit: entweder Prozent oder Pixel. Ein Mix wird in Browsern nur zufallsbedingt sauber dargestellt.

-------------------------------
img137_6

Mit diesen Schaltflächen erstellen Sie für einen zuvor markierten Text einen Link bzw. löschen Sie einen hinterlegten Link .

Wenn Sie einen Link erstellen, öffnet sich ein Dialogfenster bestehend aus den Registerkarten General, Popup, Events und Advanced.

img140_6

Registerkarte General

  • Link URL

    Hier tragen Sie entweder eine http-URL ein wie beispielsweise http://www.google.de (immer mit führendem http://)
    oder Sie referenzieren einen zuvor von Ihnen gesetzten Anker, Beispiel:

    zum Seitenanfang

    Ein Anker ist eine Marke, die explizit im HTML-Code hinterlegt wird und als Ziel eines Links innerhalb von HTML-Seiten dient. Für das Beispiel habe ich einen Anker zu Beginn des ersten Abschnitts dieser Seite gesetzt, um ihn hier referenzieren zu können. Dazu habe ich mit einem Klick auf die HTML-Symbolschaltfläche des Editors in den HTML-Modus gewechselt und an den Anfang den Befehl
    <a name="top"></a>
    geschrieben. Der Name eines Ankers ist wahlfrei, darf jedoch weder Umlaute noch Leerzeichen beinhalten.
    Die Referenzierung im Link URL auf der Registerkarte General lautet dann #top . Die Systematik ist also schlicht: Raute+Ankername.

    Ein Ankername darf auf einer Seite genau einmal vorkommen (Es kann nur einen geben... ;-) ), jedoch auf einer anderen Seite selbstverständlich wieder verwendet werden. Mit dieser Option können Sie dann in einem Text auch einen Link auf eine andere Seite innerhalb Ihrer Lerneinheit setzen. Beispiel:

    zum Abschnitt Hilfe, Kapitel Menüleiste

    Hier habe ich im Abschnitt Hilfe, Kapitel Menüleiste im HTML-Modus zum Textbeginn den Anker #top gesetzt.
    Die Referenzierung im Link URL auf der Registerkarte General lautet jetzt menleiste.html#top. Die Systematik ist also: Dateiname.html+Raute+Ankername .
    Damit sehen wir auch gleich, wie sich der Dateiname ableitet. eXeLearning setzt die von Ihnen vergebenen Kaptiel- bzw. Abschnittsnamen als Dateinamen. Sofern ein Umlaut enthalten ist, wird dieser unterdrückt.

  • Anchors

    Dieser Befehl ist in der dem Kompendium zugrunde liegenden Version nicht verfügbar.
    Standard wäre, dass im Listenfeld alle die von Ihnen manuell eingetragenen Anker aufgelistet würden.

  • Target

    Hier wählen Sie aus, in welchem Fenster der von Ihnen eingetragene Link geöffnet werden soll:

    Open in this window/frame
    öffnet den Link im selben Fenster

    Open in new window (_blank)*
    öffnet den Link in einem neuen (zusätzlichen) Fenster

    Open in parent window/frame (_parent)
    öffnet den Link im selben Fenster

    Open in top frame (replaces all frames) (_top)*
    öffnet den Link im selben Fenster

    Wer sich für die Unterschiede der Anweisungen im Detail interessiert, findet auf der Seite http://de.selfhtml.org/html/verweise/definieren.htm genaue Angaben.
    Empfohlen sind die mit einem Sternchen (*) gekennzeichneten Optionen. Dabei sollten Sie die Option ...(_blank) für Links verwenden, die eine neue URL aufrufen, also http://... . Die Option ...(_top) sollten Sie für Links verwenden, die einen Anker innerhalb Ihrer Lerneinheit referenzieren. Alle anderen Option arbeiten in der diesem Kompendium zugrunde liegenden Version nur zufallsbedingt richtig.

  • Title

    Hier tragen Sie den Text ein, der beim Anfahren des Links mit der Maus eingeblendet werden soll.

  • Class

    Diese Option ist in der dem Kompendium zugrunde liegenden Version nicht verfügbar.
    Normalerweise kann hier auf sogen. CSS-Klassen, die Sie selbst erstellt haben, Bezug genommen werden. Informationen zu CSS-Klassen erhalten Sie u.a. auf der Seite http://de.selfhtml.org/css/formate/zentrale.htm .
img141_6

Regsiterkarte Popup

Auf dieser Registerkarte legen Sie fest, dass Ihr Link sich in einem Popup, also aufspringenden Fenster öffnet. Bei dieser Variante haben Sie mehrere Optionen, um die Bildschirmposition des sich öffnenden Fensters und das Aussehen des Fensters zu bestimmen.

Damit diese überhaupt eingestellt werden können, müssen Sie als erstes ein Häkchen vor Javascript popup setzen.

  • Popup URL

    Hier geben Sie gewohnt die gewünschte URL http://... ein.

  • Window name

    bei einem Popup-Fenster müssen Sie dem Fenster einen Namen geben. Der name darf weder Umlaute noch Leerzeichen enthalten. Üblicherweise werden Namen wie desktop1, desktop2... verwendet.

  • Size

    Hier legen Sie die Größe des Popup-Fensters in Pixel (px) fest. Im ersten Feld legen Sie die Breite fest, im zweiten Feld legen Sie die Höhe fest. Bedenken Sie dabei bitte, dass die Mehrheit der Anwender trotz immer größer werdender Bildschirme eine Auflösung von 800 x 600 px eingestellt hat. Aufgrund dessen sollte die Größe eines Popup-Fensters maximal diese Größe einnehmen.
    Achten Sie außerdem darauf, dass der im Popup-Fenster zu zeigende Inhalt zur Breite passt, sonst müssen Anwender querscrollen - eine Todsünde!

    Hinweis
    Testen Sie Ihre Sizeangaben in unterschiedlichen Browsern: MS Internet Explorer, Mozilla Firefox und Netscape oder Opera. Die Browser berechnen die Sizeangaben unterschiedlich.

  • Position

    X/Y sind die Koordinaten. Die Position wird mit einem Zahlenwert bestimmt, der Pixeln entspricht. Die Angabe 100 100 würde bewirken, dass sich das Popup-Fenster 100 Pixel vom linken Bildschirmrand entfernt und 100 Pixel unterhalb vom oberen Bildschirmrand entfernt öffnet. Berücksichtigen Sie bei einer Positionsangabe Ihre vergebene Bildschirmgröße, sonst muss das Fenster vom Anwender zur gesamten Ansicht erst einmal manuell verschoben werden.
    Sofern Sie c c eintragen, wird das Fenster immer zentriert auf dem Bildschirm geöffnet.

  • Options

    Hier legen Sie das Aussehen des des Fensters fest.

    Show location bar
    Das Fenster hat eine Adresszeile.

    Show menu bar*
    Das Fenster hat eine Menüleiste.

    Show toolbars*
    Das Fenster hat Symbolschaltflächen.

    Show status bar*
    Das Fenster hat eine Statusleiste, in der u.a. sichtbar ist, ob der Seiteninhalt des Fensters vollständig geladen ist.

    Show scrollbars*
    Das Fenster hat Scrollleisten
    Falls der Inhalt nicht in der vorgesehenen Fenstergröße vollständig angezeigt wird, kann der Anwender mit Scrollleisten 'weiterblättern'.

    Make window resizable
    Damit erlauben Sie dem Anwender, die Fenstegröße zu verändern (maximieren, minimieren).

    Dependent (Mozilla/Firefox only)
    Das Popup-Fenster ist nur für den Browser Mozilla/Firefox verfügbar.

    Insert 'return false'*
    Mit dieser Angabe stellen Sie sicher, dass es nicht zu einem Browserabsturz kommt, wenn das Popup-Fenster oder dessen Inhalt nicht ordnungsgemäß geladen werden konnte.

    Die mit einem Sternchen (*) gekennzeichneten Optionen sollten Sie in jedem Fall setzen, wenn Sie sich für ein Popup-Fenster entscheiden.

    Die beste Entscheidung: Verzichten Sie auf Popup-Fenster!

    Weshalb? Popup-Fenster sind barrierefreiheit-unfreundlich. Sie erschweren es Menschen mit Handicaps Zugang zum Fensterinhalt zu bekommen. Eine Vertiefung der Barrierefreiheit von Internetseiten würde den thematischen Rahmen des Kompendiums sprengen. Wer mehr Informationen möchte, kann z.B. folgende Seiten besuchen: http://www.behindertenbeauftragter.de , http://www.einfach-fuer-alle.de , http://www.barrierefreies-webdesign.de .
img143_6

Registerkarte Events

Auf dieser Registerkarte können Sie festlegen, was die Maus in Verbindung mit einem Link auslösen kann. Eine der bekanntesten Events (Ereignisse) ist das Wechseln der Linkfarbe beim Überfahren mit der Maus. So könnten Sie einen in Blau angezeigten Link beim Überfahren die Farbe Rot zuordnen. Dazu tragen Sie in der Zeile mouseover den Farbwert als Hexadezimalangabe ein, Beispiel: #cc0000. Probieren Sie es einmal bei diesem blind Link: Farbwechsel . (Ein blind Link ist ein Link, der tatsächlich nicht auf eine andere URL verweist. Um einen solchen Link zu setzen, wird in der URL einfach nur die Raute # eingetragen.)

Angaben zu Farbwerten entnehmen Sie der Seite http://de.selfhtml.org/helferlein/farben.htm .

Was welches Event genau bewirkt entnehmen Sie detailliert der Seite http://de.selfhtml.org/javascript/sprache/eventhandler.htm .

Hinweis
Bitte verwenden Sie folgende Events immer gemeinsam:

  • onclick - onkeypress
  • onmousedown - onkeydown
  • onmouseup - onkeyup

Damit ermöglichen Sie Menschen, die keine Maus nutzen können, die Seite auch mit der Tastatur zu bedienen.

img145_6

Regsiterkarte Advanced

Diese Registerkarte wird nur erfahrenen CSS-Anwendern empfohlen.
Wer sich Kenntnisse in CSS aneignen möchte oder vorhandene Kenntnisse vertiefen möchte, kann u.a. die Seiten http://www.css4you.de , http://www.css-technik.de , http://www.csshilfe.de und http://css.fractatulum.net/ besuchen.

Aufmerksam machen möchte ich Sie hier auf das Feld

Accesskey

Accesskeys sind sogen. Tastaturkürzel, siehe auch http://de.selfhtml.org/html/verweise/tastatur.htm . Sie können eine Ziffer oder einen Buchstaben eintragen. Mit der Tastenkombination [Alt] + Ziffer od. Buchstabe wird dann der Link geöffnet! Ein Beispiel hierzu: http://www.google.de .
Beim MS Internet Explorer muss nach der Tastenkombination zusätzlich die Enter-Taste gedrückt werden, beim Opera zusätzlich Umschalt + Strg.

Die Vergabe von Tastaturkürzeln erleichert es Anwendern, die keine Maus nutzen können, auf einer Seite navigieren zu können.

Achten Sie bitte darauf, keine Kürzel zu vergeben, die bereits von Browsern verwendet werden. Sie setzen diese sonst außer Kraft.
Üblicherweise verwendete Tastaturlürzel können Sie hier nachlesen: http://2bweb.de/accesskey/index.html .

-------------------------------
img148_6
Mit diesen Schaltflächen machen Sie im Texteditor einen Befehl rückgängig bzw. stellen ihn wieder her.
-------------------------------
img151_6
Ein Klick auf diese Symbolschaltfläche öffnet eine Dialogbox, in der Sie Sonderzeichen auswählen können, die nicht auf der Tastatur sind, wie zum Beispiel das Copyright-Zeichen ©.
-------------------------------
img153_6
Mit diesen Symbolschlatflächen löschen Sie Formatierungen.
-------------------------------
img155_6

Mit dieser Symbolschaltfläche wechseln Sie in den HTML-Bearbeitungsmodus.

Tatsächlich ist es in der dem Kompendium zugrunde liegenden Version so, dass nicht alle HTML-Anweisungen übernommen werden. eXeLearning hat Prüfroutinen integriert, die vor dem Speichern bestimmte HTML-Anweisungen als unzulässig löscht. Welche dies im Einzelnen sind, konnte ich nicht umfassend feststellen. Vorgehensweise: Versuch und Irrtum...

-------------------------------
img156_6
Ein Klick auf diese Symbolschaltfläche gibt Ihnen Informationen zum verwendeten Editor.