Startseite Sitemap

Der HTML Editor

 

Lernziele

 In diesem Kapitel lernen Sie:

 

Einführung

Wenn Sie Texte erstellen und diese formatieren (die Darstellung festlegen), müssen Sie den Text mit HTML Steuerelementen (sogenannten Tag's) kombinieren. Um Ihnen 99% dieser Arbeit abzunehmen, verwendet CONTEX einen eigenen HTML Editor, mit dem Sie wie mit Word Texte normal bearbeiten können, ohne sich über die Tags Gedanken zu machen. Trotzdem kann es vorkommen, dass wenn Sie etwas machen möchten, was der Editor nicht unterstützt Sie evtl. die HTML Tags bearbeiten müssen. Es kann also nicht Schaden sich im Internet oder mit einem guten Buch etwas in das Thema HTML einzulesen. 

Übersicht

1.

Block-Formatvorlagen bestimmen das aussehen des Textes. Diese Blockformatforlagen sind die in HTML fix definieren Vorlagen, wie Überschrift 1-6, Auflistungen etc. Das aussehen dieser Vorlagen wird im StyleSheet definiert, so das für das ganze Web ein Layout eingehalten wird. Sie sollten immer mit Formatvorlagen Arbeiten, um Ihrem Internet-Auftritt ein einheitliches aussehen zu verleihen und nur in Ausnahmefällen auf die benutzerdefinierte Textformatierung zurückgreifen.

2. Dies ist die Sprache in welcher Sie gerade den Inhalt erfassen. Die Auswahl ist nur bei Mehrsprachigen Webs von Bedeutung. Wenn in den Fremdsprachen kein Text eingegeben wurde verwendet CONTEX immer den Text der Standardsprache (verhindert, das leere Inhalte angezeigt werden).
3. "Speichern und Schliessen" speichert den Inhalt und schliesst den Editor. "Schliessen" schliesst den Editor und wenn Sie einmal zwischenspeichern möchten, können Sie auf Speichern (das Disketten Symbol) klicken.
4. Druckt den Inhalt.
5. Wechselt in den HTML Code Editor, wo der HTML Syntax zu diesem Inhalt direkt bearbeitet werden kann. Diese Funktion ist für Fortgeschrittene Benutzer.
6.

Das "Bearbeiten" Menü bietet Funktionen wie Rückgänig, Kopieren und Einfügen oder auch Suchen.

Rückgängig: Setzt die letzten Änderungen, die Sie vorgenommen haben zurück
Wiederherstellen: Stellt die letzten zurückgenommenen Änderungen wieder her
Ausschneiden: Schneidet den markierten Bereich aus und fügt ihn in die Zwischenablage ein
Kopieren: Kopiert den markierten Bereich in die Zwischenablage
Einfügen: Fügt Text aus der Zwischenablage an der aktuellen Position ein
Nur-Text aus Zwischenablage einfügen: Diese Funktion ermöglicht es, Texte aus der Zwischenablage einzufügen, die beispielsweise mit Word erstellt worden sind und unerwünschte Formatierungen enthalten.
Löschen: Löscht den aktuell markierten Bereich aus dem Inhalt
Alles löschen: Markiert den gesamten Inhalt und entfernt diesen
Suchen: Mit dieser Funktion können Sie den Inhalt nach beliebigen Zeichenketten durchsuchen.

7. Das "Einfügen" Menü lasst Sie allerlei an der aktuellen Cursor-Position einfügen, wie etwa Flash Animationen, Laufschriften, Formular-Elemente etc.
8. Bietet die Möglichkeit Bilder, Hyperlinks, Flash-Dateien und Textmarken einzufügen und zu bearbeiten.
9. Öffnet den Text-Formatierungs Dialog, zum formatieren des ausgewählten Textes.
10. Öffnet die Dialoge um Tabelle und Zellen-Eigenschaften zu definieren.
11.

Menü zum schnellen Formatieren des gewählten Textes:

Fettschrift: Setzt den aktuell markierten Textbereich in Fettschrift bzw. wieder in Normalschrift
Kursiv: Setzt den aktuell markierten Textbereich in Schrägschrift oder zurück
Unterstrichen: Unterstreicht den aktuell markierten Textbereich oder entfernt die Unterstreichung
Linksbündig: Setzt den aktuellen Absatz linksbündig
Zentriert: Setzt den aktuellen Absatz zentriert
Rechtsbündig: Setzt den aktuellen Absatz rechtsbündig
Einrücken: Vergrössert den linken Einzug des aktuellen Absatzes
Ausrücken: Verkleinert den linken Einzug des aktuellen Absatzes
Texteigenschaften: Über das Dialogfeld "Texteigenschaften" können diverse Formatänderungen am Absatz vorgenommen werden.

12.

Menü zum bearbeiten von Tabellen, z.B. Neue Tabelle erstellen, Zeile hinzufügen, Spalten löschen etc. 

Tabelle einfügen: Es erscheint das Dialogfeld für die Erstellung einer neuen Tabelle
Zeile einfügen: Fügt nach der aktuell markierten Zeile eine neue ein
Spalte einfügen: Fügt nach der aktuell markierten Spalte eine neue ein
Zelle einfügen: Fügt nach der aktuell markierten Zelle eine neue ein
Zeilen löschen: Löscht die aktuell markierten Zeilen aus der Tabelle
Spalten löschen: Löscht die aktuell markierte Spalte aus der Tabelle
Zellen löschen: Löscht die aktuell markierte Zelle
Zellen zusammenführen: Kombiniert die markierte mit der nächsten Zelle
Zellen teilen: Teilt die aktuelle Zelle entzwei
Tabelleneigenschaften: Das erscheinende Dialogfeld lässt Sie diverse Eigenschaften der Tabelle bearbeiten

13. Bietet diverse Möglichkeiten die Darstellung anzupassen wie z.B. Rahmen anzeigen, Absatzzeichen anzeigen, Lineal anzeigen oder auch die Rechtschreibung zu korrigieren.
14. Hier können sie ein spezifisches Webformat auswählen, das im StyleSheet definiert wurde. Dies sind meistens Styles, die speziel für Ihr Web ausgearbeitet wurden, wie "News", "Code" o.ä.
15. Hier können verschiedene Textformatierungen schnell durchgeführte werden (z.B. Fett, Kursive oder Text Ein/Ausrücken)
16. Der ShortCut Bereich zeigt immer abhängig davon, was Sie gerade Bearbeiten die wichtigsten Funktionen dazu an. So werden z.B. wenn sie sich in einer Tabelle befinden, die wichtigsten Tabellen Funktionen eingeblendet.

Der HTML Editor besitzt viele Dialoge für die Gestaltung des Inhaltes. Im folgenden werden die wichtigsten beschrieben.

Der Bild Dialog

Der Bilddialog dient zum einfügen/bearbeiten eines Bildes. Die Bilder kommen allesamt aus dem Ressourcen Manager (Lupe klicken zum auswählen).

Der Imagemap Name definiert der Name eines zu verwendenden ImageMaps. Imagemaps werden verwendet, wenn Sie von einem Bild aus Hyperlinks zu verschiedenen Zielen erstellen möchten.

Der Klassenname dient zur Definition des Class HTML Tags, welcher die Formatierung des Bildes aus einer CSS Datei liest.

Die Umbruchart definiert den Textfluss um das Bild herum.

Der Horizontale (Links & Rechts) und Vertikale Abstand (Oben & Unten) definiert den Abstand des Bildes zum Text oder einem anderen Element.

Der Rahmentyp, die Rahmenstärke und Farbe definieren das Aussehen des Rahmens um ein Bild herum.

Bei den Abmessungen können Sie die Grösse der Darstellung des Bildes verändern. Dabei können Sie wählen, ob die Proportionen erhalten bleiben sollen oder ob das Bild verzerrt werden soll.

Hinweis: Das Ändern dieser Grösse ändert nicht die Grösse der übertragenen Daten auf den Browser; Das Bild muss trotzdem in voller Grösse auf den Client übertragen werden, wird dann aber einfach verkleinert bzw. vergrössert dargestellt. Es ist besser, wenn Sie das Bild physikalisch skalieren z.B. durch die Funktion "Skalierte Kopie erstellen" des Ressourcen-Managers oder durch die Bildgaleriefunktion von CONTEX.

Bei "Niedrige Auflösung" (lowsrc) kann ein Bild angegeben werden, dass bei Browsern angezeigt wird, welche nur Niedrige Auflösungen unterstützen.

Tooltiptext (alt) wird einerseits bei Browsern welche keine Bilder unterstützen anstelle des Bildes angezeigt, andererseits als Tooltiptext wenn der Mauszeiger über das Bild bewegt wird.

"Lange Beschreibung" bietet die Möglichkeit weitere Beschreibungen zum Bild zu hinterlegen.

 

Der Hyperlink Dialog

Mit dem Hyperlink Dialog können Sie einzelne Seiten untereinander verknüpfen:

Interner Link dient zum erstellen eines Hyperlinks zu einer im gleichen CONTEX Web bestehenden Seite. Bei den Links auf interne Seiten müssen Sie nicht den genauen Pfad bzw. Seitennamen kennen, dieser wird von CONTEX generiert, dies hat den Vorteil, das einmal verlinkte Seiten selbst wenn Sie umbenennt oder verschoben werden noch korret verlinkt bleiben! Die Seite auf welche der Link zeigen soll können Sie durch klicken auf die Lupe auswählen:

Mit "Link auf Ressource" kann ein Hyperlink auf eine Ressource (z.B. eine Datei) erstellt werden. Durch klicken auf den Link wird die entsprechende Datei geöffnte bzw. kann heruntergeladen werden.

Mit "Externer Link" kann ein Link auf eine beliebige Internet Adresse erstellt werden. Ausserdem haben Sie die Möglichkeit Mail-Links oder FTP links zu erstellen.

Mit "Sprungmarken Links" können Sie (wenn Sie Textmarken definiert haben) innerhalb eines Dokument hin und herspringen. Beispiel: Zum Anfang dieses Dokuments springen

Wenn Sie einen Link auf einem Bild erstellen, können Sie ein MouseOver Bild definieren, welches Bild immer dann angezeigt werden soll, wenn Sie mit der Maus darüberfahren:
Diese Funktion benötigt die Scripts MM_swapImage und MM_swapImgRestore in der Scriptdatei des Webs.

"Link öffen im..." bestimmt, wo der Link geöffnet wird, wenn darauf geklickt wird:

Im gleichen Fenster Öffnet die Seite im gleichen Browser Fenster.
In neuem Fenster Öffnet die Seite in einem neuen Browser Fenster
Im Popup Fenster

Öffnet die Seite in einem PopUp Fenster. Ein PopUp Fenster ist ein Fenster fixer Grösse ohne Browser Symbolleisten:

Diese Funktion benötigt das Script openPopup (bzw. openPopup2 wenn eine Grösse definiert wird) in der Script Datei des Webs.

 

Der Tabellen Dialog

Tabellen sind in HTML eines der mächtigsten Instrumente zum formatieren von Inhalten. Durch das inneinander verschachteln von Tabellen können z.B. Bilder und Texte besser Positioniert werden. Unten abgebildet sehen Sie den CONTEX Dialog zum einfügen von Tabellen:

Die Grösse kann nur beim einfügen der Tabelle angegeben werden. Nach dem erstellen von der Tabelle sollten Sie mit den Funktionen "Zeile einfügen", "Spalte einfügen", "Spalten löschen", "Zeilen löschen" oder "Zellen löschen" im Tabellen Menü arbeiten.

Mit der Ausrichtung bestimmen Sie ob die Tabelle Links, Rechts oder zentriert im aktuellen Dokument angezeigt werden soll.

Mit der Breite und der Höhe der Tabelle haben Sie die Möglichkeit die Breite und Höhe der Tabelle zu beinflussen. Hierbei gelten folgende Grundsätze:

  • Solange die Größe nicht definiert ist, ist die Tabelle so groß wie sie sein muß um allem Daten unterzubringen.
  • Die Angaben zu Breite und Höhe einer Tabelle sind nur wirksam, wenn der Tabelleninhalt kleiner ist, so daß leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, werden die Angaben zu Breite und Höhe außer Kraft gesetzt. Die Tabelle wird in diesem Fall vom Browser so dimensioniert, daß der gesamte Inhalt angezeigt wird.
  • Die Prozentangabe bezieht sich auf das übergeordnete Element. Ist z.B. das Browserfenster 800 Pixel breit, so ist die Tabelle mit 80% 640 Pixel breit. Befindet sich in dieser Tabelle eine weitere Tabelle mit 80%, so ist diese dann 512 Pixel breit.
  • Der Vorteil der Prozentangaben ist, dass egal bei welcher Bildschirmauflösung gearbeitet wird, die Darstellung immer im gleichem Verhältnis gezeigt wird.

Der Textabstand definiert den Abstand des Textes innerhalb einer Zelle der Tabelle zum Rand. Der Zellabstand definiert den Abstand der Zelle zum Tabellenrand und untereinander.

Mit dem Klassennamen können Sie eine StyleSheet Klasse angeben, die die Formatierung der Tabelle bestimmt.

Im Abschnit Rahmen können Sie das Aussehen des Rahmens der Tabelle bestimmen. Wenn Sie z.B die Stärke auf 0 setzten wird der Rahmen ausgeblendet.

Im Abschnitt Hintergrund bestimmen Sie den Tabellenhintergrund, so können Sie z.B. eine Hintergrundbild oder eine Hintergrundfarbe festlegen.

 

 

Zellen Eigenschaften Dialog

Mit dem Zelleneigenschaften Dialog können Sie das Aussehen einzelner Zellen, ganzer Zeilen oder Spalten festlegen.

Die horizontale oder vertikale Ausrichtung bestimmt die Position des Textes (oder anderer Elemente) innerhalb der Zelle.

Die Höhe oder Breite der Zelle bestimmt dieselbe. Das definieren von Breiten- und Zellenhöhe ist wie bei der Tabelle etwas tricky und erfordert einige Übung um das gewünschte Resultat zu erreichen. Auch hier gibt es ein paar Anmerkungen:

  • Durch Angabe einer Breite von 50% hat die Zelle und damit auch die Spalte eine Breite von 50% der Tabelle. Bei Angabe unterschiedlicher Breiten in einer Spalte zählt die breiteste Zelle als Spaltenbreite. Im Konfliktfall hat die Angabe der Tabellenbreite Vorrang (z.B. Tabellenbreite 100 Pixel und Spaltenbreite 500 Pixel).
  • Die Angaben zur Zellenbreite sind Mindestwerte. Sollte der Zelleninhalt grösser sein als die angegebene Breite, wird die Zelle entsprechend vergrössert.
  • Bei Prozentangaben richten sich die Angaben der Zellen- bzw. Zeilenhöhe nach der Tabellenhöhe. Ebenso ist es bei der Breite. Jeweils wird eine eventuelle Differenz durch die Vergrößerung bzw. Verkleinerung anderer Zellen und/oder Zeilen ausgeglichen.

Die Zeilen und Spaltenerstreckung definiert, über wieviele Spalten bzw. Zeilen sich eine Zelle ausbreiten darf. Dies lässt sich am Besten anhand eines Beispiels zeigen:

Normalzustand 3 x 2 Zellen  XXXX XXXX
XXXX XXXX XXXX

 

Diese Zelle hat eine Zeilenerstreckung von 2, erstreckt sich also über 2 Zeilen. XXXX XXXX
XXXX XXXX XXXX

 

Diese Zelle hat eine Spaltenerstreckung von 3, erstreckt sich also über 3 Spalten. XXXX XXXX
XXXX XXXX XXXX

Der Abschnit "Rahmen" definiert das aussehen des Rahmens der Zelle, während im Abschnitt "Hintergrund" der Zellenhintergrund definiert werden kann.

Mit Übernehmen für bestimmen Sie, ob die gemachten Einstellungen nur für die einzelne Zelle angewendet werden soll, oder für die ganze Spalte, Zeile oder Tabelle.

[Nach Oben]