Zurück zur Liste
HTML EDITOR PHASE 5²
Dokumentation


1   Einleitung
    1.1   Was ist der HTML-Editor?
    1.2   Autor
    1.3   Lizenz
    1.4   Spenden
    1.5   Homepage
    1.6   Zur Anleitung

2   Einstieg für Anfänger
    2.1   HTML-Änfänger
    2.2   Die Benutzeroberfläche des HTML-Editor
    2.3   Die ersten Schritte im HTML-Editor
          2.3.1    Die erste Datei erstellen
          2.3.2    Speichern der Datei
          2.3.3    Einfügen der ersten Befehle
          2.3.4    Ansicht des Dokuments
    2.4   Wie geht's weiter?
          2.4.1    Experimentieren
          2.4.2    Weiterbilden
          2.4.3    Ein Projekt entwerfen

3   Projektbezogenes Arbeiten
    3.1   Das erste Projekt
    3.2   Projekteinstellungen
          3.2.1    Verzeichisse
          3.2.2    Vorgaben
          3.2.3    Optionen
          3.2.4    Tags anpassen
          3.2.5    Benutzermenü
          3.2.6    Schriften
          3.2.7    Datum
    3.3   Projektverwaltung
    3.4   Projektmanagment für Fortgeschrittene

4   Der Editor
    4.1   Features
    4.2   Der Cursor
    4.3   Markierungen
    4.4   Zwischenablage
    4.5   Einrückung
    4.6   Eingabemodi
    4.7   Lesezeichen
    4.8   Suchen
    4.9   Ersetzen
    4.10  HTML-Befehle einfügen

5   Dateien
    5.1   HTML-Dateien
          5.1.1    Vorschau von HTML-Dokumenten
    5.2   HTML-Sonderformate
    5.3   Graphikdateien
          5.3.1    Bildbetrachter
    5.4   Cascaded Style Sheets
          5.4.1    Was sind Style Sheets
          5.4.2    Mit Style-Sheets arbeiten
    5.5   Dateiarchive
    5.6   Skripte & Applets

6   Dateimanager
    6.1   Verzeichnisknöpfe
    6.2   Popupmenüs
    6.3   Mausbefehle
    6.4   Dateifilter

7   Werkzeuge
    7.1   Dateiübergreifendes Ersetzen
    7.2   Dateiübergreifendes Suchen
    7.3   Debugger
    7.4   Fussnotenassistent
          7.4.1    Fussnote einfügen
          7.4.2    Verweise einfügen
          7.4.3    Fussnotenformatierung anpassen
    7.5   HTML Konstruktor
    7.6   Schlüsselwörter Tagging
    7.7   Tabellenassistent
    7.8   Zeilenweise Ergänzung

8   Plugins
    8.1   Installation von Plugins
    8.2   Pluginmenü
    8.3   Programmieren von Plugins
    8.4   Verknüpfungen und Batchdateien im Pluginmenü

9   Includetechnik 
    9.1   Was sind Includes ?
    9.2   Includekonfiguration
    9.3   Includes einfügen

10  Programmeinstellungen
    10.1  Anbindungen
    10.2  Dateiendungen
          10.2.1   Dateiendungen für Filter
          10.2.2   Parser und Dateiendungen
    10.3  Optionen
    10.4  Verknüpfungen
          10.4.1   Verknüpfungen erstellen
          10.4.2   Verknüpfung im Windowsdateimanager Popupmenü

11  Tips, Tricks und Kleinigkeiten
    11.1  Benutzerdefinierte Farbpalette
    11.2  Schnelles Schliessen einer geöffneten Datei
    11.3  Dateien öffnen per Drag&Drop
    11.4  Weitere Quellen





1 Einleitung

1.1 Was ist der HTML-Editor?

Der HTML Editor Phase 5 ist ein Freewareprogramm zum Erstellen von Hypertextdokumenten (HTML) für Internet und Intranetprojekte unter Windows 9X/NT. Das Projekt wurde von mir 1996 gestartet und wird seitdem ständig weiterentwickelt. Das Programm ist allen Internet-Nutzern weltweit gewidmet, die das Netz mit Inhalt füllen wollen. Freies Publizieren im Internet ist heute und noch viel mehr in der Zukunft eine gesellschaftliche und politische Notwendigkeit. Das Programm ist in der Hoffnung geschrieben, dass es vielen Menschen dabei hilfreich ist. Die Entwicklung wird von freiwilligen Spenden der Benutzer finanziert. Das Programm ist trotzdem kostenlos, es besteht kein Zwang zu bezahlen. Dennoch werden speziell auch die gewerblichen Benutzer gebeten, das Projekt mit Geldspenden zu unterstützen.

1.2 Autor

Der Autor des Programms studiert zur Zeit Informatik mit Schwerpunkt Multimedia an der FH-Giessen. Ulli Meybohm Giessener Str. 24 35410 Hungen Germany/Europe Homepage: www.meybohm.de E-Mail : ulli@meybohm.de Tel: 06402-505777 Deweiteren haben folgende Leute zu der Entwicklung des Projektes beigetragen: H.D.Berretz, Christian Stolz (Berater und Programmierer), Thorsten Hassiepen (Internetserver), Jens Kreutschmann und Haarlequin (Spiegelserver), Markus Freitag (Backups), S.Münz (SelfHTML), Prof. T.Letschert (Rechnernetze-Vorlesung), Andrew S. Tanenbaum (Autor von Computernetze), Günter Born (Berater, Motivator, HTML-Kompendium 4) und unzählige andere, die das Programm finanziell unterstützten, Logos erstellten, Betas testeten, Dokumente korregierten, Anregungen und Ratgaben, Fehler meldeten oder mich einfach nur motiviert haben.

1.3 Lizenz

Das Programm ist Freeware! Das Programm wird verteilt in der Hoffnung, dass es für viele Anwender nützlich sein wird, aber OHNE IRGENDEINE GARANTIE, nicht einmal die Garantie auf Funktionsfähigkeit. Für mögliche durch das Programm verursachte Fehler und Schäden an Soft- und Hardware übernimmt der Autor keine Haftung! Das Copyright am Programm bleibt bei Ulli Meybohm, Hungen. Die Verteilung, der Verkauf oder sonstige kommerzielle Nutzung des Programms ist nur mit Zustimmung des Autors (ulli@meybohm.de) erlaubt. Eine Verlinkung der Internetseite www.meybohm.de bzw. www.meybohm.de/htmledit ist erlaubt und ausdrücklich erwünscht. Der Name des Programms ist Ulli Meybohms HTML EDITOR. Die Entwicklung der Programms wird in Phasen ausgedrückt. Die aktuelle Phase ist 5. Die aktuelle Version der Phase wird mit dem Releasedatum gekennzeichnet. Die Phasennummer erhöht sich, wenn grössere Änderungen am Programm vorgenommen wurden.

1.4 Spenden

Das Programm ist kostenlos, Sie können die Entwicklung des Programmes dennoch mit einer freiwilligen Spende fördern. Speziell gewerbliche Nutzer werden gebeten, das Programm zu unterstützen. Spenden können auf dem Postweg an den Autor geschickt werden oder auf folgendes Konto überwiesen werden: Ulli Meybohm, Sparkasse Laubach/Hungen Bankleitzahl: 51352227 Kontonummer: 1229111 Falls Sie es wünschen, können Sie einen Eintrag in der Supporterliste des HTML-Editors bekommen, bei höheren Spenden eventuell auch mit Werbebanner.

1.5 Homepage

Die Homepage des HTML-Editors ist www.meybohm.de. Im Internet ist immer die aktuellste Version des Programmes erhältlich. Falls Sie das Programm von irgendeiner Freeware-CD bekommen haben, schauen Sie erstmal im Internet nach, ob es nicht eine neuere Version gibt. Die Update erfolgen ca. in Monatsabständen. Diese Anleitung wird auch ständig ausgebaut, und ist auch im Internet erhältlich. Des Weiteren gibt es im Internet ein Forum, in dem Sie mit anderen Benutzern diskutieren können, und Fehlermeldungen und Anregungen aufschreiben können. Im Internet gibt es auch Plugins, die die Funktionen des HTML-Editors erweitern. Falls Sie noch nicht auf der Seite waren, sollten Sie mal vorbeischauen!

1.6 Zur Anleitung

Die Anleitung wurde mit Lyx unter Linux erstellt. Es gibt einmal die Version zum Ausdrucken in den Formaten Postscript und PDF, die auf meiner Homepage erhältlich sind. Mit dem Programm wird die Hilfe nochmal als HTML-Datei ausgeliefert, die aus Lyx exportiert wird. Das HTML-Format ist zwar zum lesen am Bildschirm besser geeignet, allerdings geht einiges an Layoutqualität durch das exportieren verloren. Es wird empfohlen, sich die Hilfe im Postscript oder PDF-Format zu besorgen und auszudrucken, wenn Sie intensiv damit arbeiten wollen.

2 Einstieg für Anfänger

Falls Sie schon Kenntnisse über HTML haben und Sie die grundlegenden Funktionen von Texteditoren beherrschen, können Sie dieses Kapitel überspringen.

2.1 HTML-Änfänger

Falls Sie kompletter HTML-Anfänger sind, sollten Sie zuerst einmal einige Grundlagen über HTML lernen. Gute Seiten dazu finden Sie im Internet in Hülle und Fülle. Die beste Einstiegsseite ist wohl SELFHTML (www.teamone.de/selfhtml). Die grundlegenden Dinge zu HTML kann man sich in ca. 1-2 Stunden anlesen. Auf meiner Homepage unter dem Punkt "Anleitungen" habe ich noch einige zusätzliche hilfreiche Quellen aufgeführt, die Ihnen beim Erlernen des Webdesigns behilflich sein könnten. Sie brauchen sich erstmal um Dinge wie Projekteinstellungen oder Programmeinstellungen nicht zu kümmern. Erstellen Sie zuerst einmal ein paar einfache HTML-Dateien, damit Sie ein Gefühl für die Struktur von HTML bekommen. HTML ist wirklich nicht schwer. Lassen Sie sich von Java-Script, CSS , Applets und anderen Ausdrücken nicht verrückt machen. Das ist alles Schnickschnack. Lernen Sie erst einmal die Grundstruktur, wie man Überschriften setzt, und die Schrift formatiert, was für Textarten es vordefiniert gibt und wie man Grafiken, Links und Tabellen einfügt. Wenn Sie dies in HTML verstanden haben, wird Ihnen die Benutzung der Befehle im Editor nicht schwerfallen. Allerdings sollten Sie sich wirklich vorher die Zeit nehmen, und ein wenig über HTML lesen. Lernen macht nun mal keinen Spass und ist anstrengend. Wer etwas anderes verspricht lügt. Allerdings werden Sie so viel schneller erste Erfolge erzielen und mehr Sicherheit bekommen, als wenn Sie einfach blind drauflos programmieren. Ich habe meine ersten Seiten auch gemacht, ohne viel nachzudenken. Das Ergebnis war miserabel.

2.2 Die Benutzeroberfläche des HTML-Editor

Bevor wir anfangen, beschaffen wir uns mal einen Überblick über die Programmoberfläche und klären einige Begrifflichkeiten. Das Hauptmenü ist die obere Leiste (Datei, Bearbeiten....). Hier können alle Befehle des Editors aufgerufen werden. Eins weiter unten ist die obere Symbolleiste, auch Shortcutleiste genannt. Hier werden häufig benutzte Befehle des Hauptmenüs als Symbole abgebildet, um die Befehle schneller aufrufen zu können. Die untere Symbolleiste ist ähnlich, bis auf den Unterschied, dass die Befehle nochmal in Gruppen unterteilt sind (Text, Tabelle...). Der untere Teil des Fensters ist vertikal aufgeteilt. Rechts befindet sich das Editorfenster, wo Sie Ihre HTML-Dateien bearbeiten. Hier sehen Sie den Quelltext der HTML-Dateien, die Sie geöffnet haben. Wenn Sie mehrere Dateien gleichzeitig geöffnet haben, dann können Sie mit der Lasche (Karteireiter) über dem Editorfenster zwischen den Dateien wechseln. Auf der linken Seite sehen Sie den Dateimanager. Hier können Sie durch die Verzeichnisse wechseln, Dateien öffnen, Grafiken einfügen, Dateien verlinken und noch vieles mehr. Detailliertere Informationen dazu finden Sie in späteren Kapiteln.

2.3 Die ersten Schritte im HTML-Editor

Ich gehe jetzt davon aus, das Sie wenigstens ein paar fundamentale Dinge über HTML wissen. Seien Sie mir nicht böse, aber ich kann hier leider nicht nochmal die komplette HTML-Sprache erklären.

2.3.1 Die erste Datei erstellen

Lassen Sie uns nun eine erste Testdatei erstellen. Wählen Sie im Hauptmenü Datei->Neu. Es erscheint nun ein Fenster, in dem Sie einige Angaben zu der Datei machen können, die Sie erstellen wollen. Lassen Sie sich nicht irritieren, Sie müssen jetzt noch nicht alles verstehen. Geben Sie einfach einen Titel ein, z.B. Testseite, und drücken Sie den Knopf Neue Datei erstellen. Nun müsste die folgende Datei im Editor erscheinen: <html> <head> <meta name="author" content="Ulli Meybohm"> <title>Testseite</title> </head> <body bgcolor="#FFFFFF" text="#000000"link="#D00000" vlink="#D00000" alink="#D00000"> Hier fügen Sie die HTML-Befehle ein </body> </html> Die Dokumente sind hierarchisch strukturiert. Sie sehen nun, dass der komplette Text sozusagen von <html>...</html> eingerahmt wird. Die nächste Unterteilung ist der <head>-Teil und der <body>-Teil. Im Head-Teil (deut.: Kopf) werden angaben zum Dokument gemacht, wie Autor, Titel und sonstige Beschreibungen, auf die wir später eingehen werden. Der Kopfteil ist erstmal nicht so wichtig. Der wichtigste Teil ist der Body-Teil (deut.: Körper). Hier wird Ihr eigentlicher Inhalt eingetragen. Die etwas kryptischen Angaben in dem <Body ...> Befehl brauchen Sie erstmal nicht zu interessieren. Das sind lediglich Farbangaben für Schrift, Hintergrund und Verknüpfungen (engl.: Links).

2.3.2 Speichern der Datei

Wir haben nun die Datei erfolgreich angelegt. Jetzt müssen wir sie noch auf Platte speichern, ihr also einen Dateinamen zuweisen. Wählen Sie dazu im Hauptmenü Datei->Speichern. Es erscheint nun der Standard-Dialog zum Speichern, den Sie auch aus anderen Programmen kennen dürften. Wählen Sie hier ein Verzeichnis Ihrer Wahl aus, und geben Sie als Dateinamen test.html ein. Nun sehen Sie auch, wie Ihre Datei farbig eingefärbt wird. Zur besseren Übersicht werden die HTML-Befehle mit einer anderen Farbe vom normalen Text abgehoben.

2.3.3 Einfügen der ersten Befehle

Gehen Sie mit dem Cursor (der blinkende vertikale Balken) im Editorfeld zwischen die Body Tags <body ....> | </body> Wir wollen nun eine Überschrift einfügen. Überschriften gibt es in 6 Grössen. 1 ist dabei die grösste und 6 die kleinste. Wir wollen eine Überschrift 1. Ordnung einfügen. Drücken Sie dazu STRG+F1, oder im Hauptmenü auf Format->Überschrift->1. Ordnung. Nun müsste Ihr Dokument folgendermassen aussehen: <body ....> <h1>|</h1> </body> Geben Sie nun zwischen <h1> und </h1> eine Überschrift ein, z.B. Testüberschrift 1. <h1> leitet die Überschrift 1, und </h1> beendet sie. Wenn bei einem Befehl ein Querstrich (engl.: Backslash [/]) vorangestellt ist, dann bedeutet das, dass der zuvor eingeleitete Befehl beendet wird, in diesem Fall, dass die Überschrift zuende ist. Nun müsste Ihr Dokument folgendermassen aussehen: <body ....> <h1>Testüberschrift 1|</h1> </body> Gehen Sie nun mit dem Cursor an das Ende der Zeile, und drücken Sie Enter, um eine neue Zeile einzufügen. Wir wollen nun unseren ersten Paragraphen einfügen. Drücken Sie dazu STRG+Enter oder im Hauptmenü Format->Paragraph. Jetzt müsste der Paragraphbefehl <p> </p> eingefügt werden. Schreiben Sie nun dazwischen einen beliebigen Text, z.B. "Dies ist mein erstes HTML-Dokument." Nun müsste Ihr Dokument folgendermassen aussehen: <body ....> <h1>Testüberschrift 1|</h1> <p>Dies ist mein erstes HTML-Dokument.</p> </body> Jetzt wollen wir den Text "HTML-Dokument" noch fett erscheinen lassen. Markieren Sie dazu den Text "HTML-Dokument" und wählen Sie im Hauptmenü Schrift->Fett. Der Text den Sie markiert haben müsste nun von dem <b>...</b> Befehl eingeschlossen sein. Ihr Dokument müsste also so aussehen: <body ....> <h1>Testüberschrift 1|</h1> <p>Dies ist mein erstes <b>HTML-Dokument<b>.</p> </body>

2.3.4 Ansicht des Dokuments

So, jetzt haben wir schon ein Dokument, das wir uns betrachten können. Drücken Sie nun auf den Knopf in der oberen Symbolleiste ganz rechts, der mit dem weissen Papier und der Lupe. Falls Sie den Microsoft Internet Explorer 4.0 oder höher installiert haben (empfohlen!), kann der HTML-Editor die Datei im HTML-Editor Fenster anzeigen. Es müsste nun die HTML-Vorschau erscheinen. Wenn Sie den Explorer nicht installiert haben, wird die Windows-Standardanwendung für HTML-Dateien gestartet (Netscape o.a.). Falls gar nichts passiert, haben Sie keinen Internet-Browser auf Ihrem System installiert. Es wird auf jeden Fall empfohlen den Microsoft Internet Explorer zu installieren, auch wenn Sie sonst mit Netscape arbeiten. Nur mit ihm haben Sie die Möglichkeit einer HTML-Editor internen Vorschau. Das ist erheblich komfortabler als immer externe Programme zu starten. Der Microsoft Explorer ist kostenlos und auf vielen Computerzeitschrift-CDs enthalten. Die Browserkonfiguration wird später genauer beschieben.

2.4 Wie geht's weiter?

Nun haben Sie die grundlegenden Kenntnisse über das Erstellen und Bearbeiten von HTML-Dateien.

2.4.1 Experimentieren

Sie können nun etwas mit den HTML-Befehlen experimentieren. Probieren Sie ein paar Befehle aus den Hauptmenüpunkten Format und Schrift aus. Spielen Sie ein bisschen mit dem Programm. Schauen Sie sich die verfügbaren Hauptmenübefehle an. Sie müssen nicht alles auf Anhieb verstehen. Testen Sie einfach einige Befehle aus, und schauen Sie was passiert.

2.4.2 Weiterbilden

Falls Sie noch über geringe HTML-Kenntnisse verfügen, lesen Sie Dokumentationen zum Thema HTML und machen Sie sich mit der Sprache besser vertraut. Es ist wirklich nicht so schwer. Schauen Sie sich auch die Quelltexte von anderen Internetseiten an. Wählen Sie in Ihrem Browser die Funktion Quelltext anzeigen. Einige Seiten sind sehr kompliziert, lassen Sie sich davon nicht entmutigen oder verwirren. Mir geht es genauso, obwohl ich mich schon seit Jahren damit beschäftige. Viele professionelle Seiten benutzten Tabellen zur Seitenformatierung. Der Quellcode wird meist durch Scripte erzeugt und ist nahezu unlesbar.

2.4.3 Ein Projekt entwerfen

Setzen Sie sich ein Ziel, wählen Sie ein Projekt, das Sie verwirklichen wollen. Dies kann eine private Homepage sein, wo Sie sich und Ihre Familie beschreiben oder eine Fanpage oder eine Seite für einen Verein oder Ihr Gewerbe. Planen Sie erst auf dem Papier, sammeln Sie Ideen, Text und Grafiken, bilden Sie Strukturen heraus. Lesen Sie dann in dieser Anleitung, wie man ein Projekt anlegt und nach seinen Wünschen konfiguriert. Nutzen Sie Ihre HTML-Kenntnisse um Ihre Ideen zu verwirklichen. Wenn Sie nicht weiterwissen, dann suchen Sie im Netz Seiten, die Ihren Vorstellungen entsprechen, und schauen Sie sich den Quelltext an, um zu sehen, wie es andere Leute hinbekommen haben. Wenn Sie bestimmte HTML-Befehle nicht verstehen, schlagen Sie in SelfHTML nach und lesen was der Befehl bedeutet.

3 Projektbezogenes Arbeiten

Der HTML-Editor bietet eine komfortable Projektverwaltung für Sie an. Sie können für jedes Ihrer Projekte eigene Einstellungen definieren. Angenommen Sie haben zwei Homepages, eine private, und eine für Ihren Fussballclub. Die beiden Projekte unterscheiden sich in vielen Dingen, zum Beispiel ist die Farbauswahl oft unterschiedlich. Die Projektdateien liegen natürlich auch in anderen Verzeichnissen. Vielleicht werden die Projekte auch von verschiedenen Autoren bearbeitet, die alle Ihre eigenen Einstellungen wollen, aber an einem Computer arbeiten. Der HTML-Editor ermöglicht Ihnen zu jedem Projekt, das Sie machen, eigene individuelle Einstellungen anzulegen. Die Befehle, die mit der Projektverwaltung zu tun haben, stehen im Hauptmenü unter dem Punkt Projekt.

3.1 Das erste Projekt

Auch falls Sie nur ein Projekt bearbeiten, z.B. Ihre private Homepage, sollten Sie sich mit den grundlegenden Dingen der Projektverwaltung vertraut machen. Es hört sich zwar kompliziert an, ist aber nicht schwierig und erleichtert Ihnen Arbeit. Wenn Sie den HTML-Editor starten, wird automatisch ein Projekt angelegt, Sie brauchen sich darum also gar nicht zu kümmern. Das Projekt heisst standardmässig Projekt1. Da der Name wenig aussagekräftig ist, geben Sie dem Projekt erst einmal einen gescheiten Namen. Wie, lesen Sie im später Abschnitt.

3.2 Projekteinstellungen

Das Fenster mit den Projekteinstellungen wird aufgerufen unter dem Hauptmenüpunkt Projekt->Projekteinstellungen. Hier erscheint ein Fenster mit allen möglichen Konfigurationsmöglichkeiten. Hier gilt wieder: lassen Sie sich nicht durch die Fülle der Optionen abschrecken oder verwirren. Anfangs werden Sie wahrscheinlich nur einen Bruchteil der Optionen benötigen. Allerdings soll das Programm auch für Profis sein, deswegen ist es schwer auf die Optionen zu verzichten. Zuerst sollten Sie im Eingabefeld Projektname dem Projekt einen Namen geben. Im folgenden werde ich nun alle Abschnitte der Projekteinstellungen genauer erläutern.

3.2.1 Verzeichisse

Bevor Sie ein Projekt anfangen sollten Sie sich vorher Gedanken über die Verzeichnisstruktur machen. Alle Projektdateien sollten in einem Unterverzeichnis stehen, das eventuell noch in untergeordnete Verzeichnisse aufgeteilt ist. Auf gar keinen Fall dürfen Sie Ihre Dateien über verschiedene Laufwerke verteilen! Am besten Sie überlegen sich ein Stammverzeichnis, wo Sie die Homepage ablegen möchten, z.B. in c:\. Das Verzeichnis, das wir erstellen wollen, um dort die Homepagedateien zu speichern, nennen wir z.B. homepage. Sie müssen nun mit dem Windows-Dateimanager das Verzeichnis homepage in Ordner c:\ erstellen. Wir haben also nun das Verzeichnis c:\homepage erstellt. Für einfache Homepages mit wenigen Dateien (etwa 1-20) reicht das vollkommen aus. Wenn Sie umfangreichere Seiten erstellen wollen, sollten Sie das Verzeichnis nochmal untergliedern, z.B. könnten Sie Verzeichnisse anlegen für Grafiken, für Style Sheets, für Include-Dateien und andere Dateitypen. Jeder Dateityp bekommt dann ein eigenes Verzeichnis, etwa so: c:\homepage Für Ihre HTML-Dateien c:\homepage\grafiken Für Ihre Grafikdateien c:\homepage\include Für Ihre Include-Dateien c:\homepage\css Für Ihre Style Sheets c:\homepage\skripte Für Ihre Skripte Wie gesagt, die Unterteilung brauchen Sie nur bei umfangreicheren Projekten. Wenn Sie nur ein paar Seiten haben können Sie alle Dateien in ein Verzeichnis speichern. Aber bedenken sie: Ihre Seite könnte wachsen! Die Verzeichnisstruktur später abzuändern ist mit vielen Mühen verbunden, also überlegen Sie sich es vorher gut, wie Sie Ihre Verzeichnisse strukturieren. Zurück zur Konfiguration. Im Abschnitt Verzeichnisse können Sie eben diese Verzeichnisse auswählen, damit der Editor weiss, wo sich Ihre Dateien befinden. Der HTML-Editor wird automatisch beim Starten in Ihr ausgewähltes Projektverzeichnis wechseln. Des Weiteren stehen Ihnen im Hauptfenster im Dateimanagerteil Knöpfe zur Verfügung, mit denen Sie zwischen den Dateien wechseln können. Im Abschnitt Verzeichnisse werden Sie auch das Eingabefeld Homepage Startseite finden. Hier können Sie die Index-Seite der Homepage angeben. Im internen HTML-Betrachter wird dann ein Knopf zur Verfügung stehen, mit dem Sie auf diese oft benötigte Seite wechseln können.

3.2.2 Vorgaben

In diesem Abschnitt können Sie bestimmte Standardwerte vorgeben, z.B. Ihren Namen als Namen des Autors und Ihr Farbschema für neu zu erstellende Seiten. Des Weiteren können Sie benutzerdefinierte Angaben für den Head-Bereich der neu zu erstellenden Dateien einfügen.

3.2.3 Optionen

Hier gibt es eine Menge nützliche Optionen, mit denen Sie das Verhalten des HTML-Editors anpassen können. Die Optionen dürften selbst erklärend sein.

3.2.4 Tags anpassen

Tags bedeutet soviel wie HTML-Befehl. Hier können einige Standardbefehle den eigenen Wünschen angepasst werden. Den Anfänger dürfte das wenig interessieren, aber Profis werden dies zu schätzen wissen.

3.2.5 Benutzermenü

Der HTML-Editor bietet Ihnen die Möglichkeit, 20 HTML-Befehle oder Textvorlagen selbst zu definieren. Die Befehle erscheinen dann im Hauptmenü unter dem Punkt Benutzermenü. Im Hauptfenster können Sie dann die einzelnen definierten Befehle in den Editor einfügen. Dies können Sie auch über die Shortcuts UMSCH+F1-F10 und UMSCH+STRG+F1-F10 tun.

3.2.6 Schriften

Hier können Sie Schriftarten auswählen, die Sie in ihrem Projekt benutzen möchten. Diese Schriftarten erscheinen dann im Hauptmenü unter Schrift->Schriftart. Wenn Sie Kenntnisse über Style-Sheets besitzen, verwenden Sie lieber StyleSheets, um die Schriftart in Ihren Dokumenten anzupassen.

3.2.7 Datum

Hier können Sie 5 benutzerdefinierte Datumsformate angeben. Des Weitern können Sie ein Format zum aktualisierten Datum angeben. Dieses wird im Hauptmenü unter Einfügen->Datum->Automatisch aktualisiertes Datum eingefügt, und bei jedem Speichern der Datei, in die es eingefügt ist, aktualisiert.

3.3 Projektverwaltung

Sie können mit dem Hauptmenübefehl Projekt->Projekt auswählen->.... zwischen den angelegten Projekten wechseln, und neue Projekte erstellen. Wenn Sie zwischen den Projekten wechseln, werden automatisch die Einstellungen angepasst, und im Dateimanager in das Verzeichnis des ausgewählten Projektes gewechselt. Welches Projekt gerade aktiv ist, sehen Sie in der Titelleiste oben im Hauptfenster und in der Statusleiste unten rechts. Mit dem Befehl Projekt->Projekt löschen können Sie Projekte entfernen.

3.4 Projektmanagment für Fortgeschrittene

Die Projekteinstellungen werden, bis auf das Benutzermenü, in der Windows-Registry gesichert. Der Schlüssel lautet HKEY_CURRENT_USER\software\meybohm\htmledit\. Sie können mit dem Windows-Registry-Editor (regedit.exe) bearbeitet, gesichert und auf andere Computer übertragen werden. Die Einstellungen können Sie in Registry-Dateien (*.reg) sichern. Sie können auch die Funktion Projekt->Projekt exportieren benutzen, um einzelne Projekte direkt mit dem HTML-Editor zu exportieren.

4 Der Editor

Im folgenden werde ich die Benutzung des Editors beschreiben, also des Eingabefeldes im Hauptfenster rechts, wo das HTML-Dokument editiert wird.

4.1 Features

Die Kapazität des Editors, also die maximale Grösse des zu editierenden Dokuments ist nur durch Ihren Hauptspeicher und die vorhandenen Systemressourcen beschränkt. Der Editor besitzt verschiedene Syntaxparser, die die Darstellung der Quelltexte verschiedener Sprachen (html,sql,perl...) durch Syntaxhighlighting erheblich verbessert. HTML-Befehle, Parameter und Text werden durch unterschiedliche Darstellungsfarben voneinander abgehoben. Reservierte Wörter werden fett dargestellt. Der Editor erlaubt weiterhin die Darstellung von Zeilennummern, was erheblich bei der Fehlersuche in Skripten und Quelltexten hilft. In der unteren Statuszeile werden Statusinformationen des Editors angezeigt, zum Beispiel Position des Cursors. Sie haben auch die Möglichkeit, bei grösseren Dokumenten Lesezeichen zu setzen.

4.2 Der Cursor

Sie können den Eingabecursor mit den Pfeiltasten bewegen, oder mit der Maus an eine bestimmte Position setzten. Die eingegebenen Zeichen werden hinter dem Cursor eingefügt. Mit der POS1 Taste springt der Cursor an den Zeilenanfang, mit ENDE an das Zeilenende. Mit den Bild-Tasten können Sie seitenweise hoch und runter scrollen. STRG+POS1 springt an den Dokumentanfang, STRG+ENDE an das Dokumentende.

4.3 Markierungen

Markierungen kennen Sie sicher aus anderen Anwendungen. Auf Markierungen beziehen sich die meisten Befehle (Ausschneiden, Löschen, HTML-Formatierungen...). Sie können Texte ganz einfach mit der Maus machen, indem Sie mit gedrückter linker Maustaste einen Bereich auswählen. Alternativ können Sie auch mit gedrückter Shift (Umschalt) Taste und den in dem letzten Teil beschriebenen Bewegungstasten einen Bereich markieren. Mit gedrückter ALT-Taste können Sie auch Bereiche innerhalb des Editors markieren, die über mehrere Zeilen gehen, aber nicht unbedingt komplette Zeilen beinhalten sollen. Ich weiss nicht, wie ich das genauer beschreiben soll, einfach ausprobieren. Wenn Sie einen Textteil markiert haben, können Sie ihn auch mit der Maus (gedrückte linke Maustaste) per Drag&Drop in dem Dokument umbewegen.

4.4 Zwischenablage

Es kommt oft vor, dass man Textausschnitte innerhalb eines Dokumentes oder zwischen zwei verschiedenen Dokumenten umbewegen muss. Hierzu können Sie die Zwischenablage benutzen. Sie können einen zuvor markierten Text auschneiden oder kopieren. Der Text liegt dann in der Zwischenablage. Nun können Sie den Cursor an die Stelle bewegen, an der Sie den Text in der Ablage einfügen wollen. Sie können auch erst ein anderes Dokument öffnen und den Text in der Ablage dort einfügen. Über die Zwischenablage kann auch Text zwischen verschiedenen Programmen ausgetauscht werden. +-----------------------------+-------------------+-----------------+ |Funktion im Menü Bearbeiten | Tastenkombination | Alternative Tk. | +-----------------------------+-------------------+-----------------+ +-----------------------------+-------------------+-----------------+ | Ausschneiden | STRG+X | Umsch+Entf | +-----------------------------+-------------------+-----------------+ | Kopieren | STRG+C | STRG+Einfg | +-----------------------------+-------------------+-----------------+ | Einfügen | STRG+V | Umsch+Einfg | +-----------------------------+-------------------+-----------------+ | Löschen | - | Entf | +-----------------------------+-------------------+-----------------+

4.5 Einrückung

Mit der Tabulatortaste (TAB, ganz links mit den 2 Pfeilen in beide Richtungen) können Sie eine Einrückungsebene weiter springen. Eine Einrückungsebene entspricht in der Regel 8 Leerzeichen. Es ist gängige Technik verschachtelte HTML-Konstrukte wie Tabellen und Listen mit Einrückungen zu strukturieren. Beispiel: <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> . . . </tr> </table> Mit TAB wechseln Sie eine Einrückungsebene nach rechts, mit SHIFT+TAB wechseln Sie eine Ebene nach links zurück. Falls Sie zuvor einen Block markiert haben, wird der ganze Block ein- bzw. ausgerückt. Sie können auch mit der Einrückhilfe (Tools) individuelle Einrückungen machen (z.B. mit Spaces oder dem HTML-Befehl &nspc;).

4.6 Eingabemodi

Es gibt 2 verschiedene Eingabemöglichkeiten, einfügen und überschreiben. Im Einfügen-Modus (Standardeinstellung) werden beim Tippen die Zeichen links vom Cursor (Eingabe-Prompt) weiter nach rechts verschoben. Beim Überschreiben wird das Zeichen rechts vom Cursor mit dem eingegebenen Zeichen überschrieben. Den Modus können Sie mit der Einfg-Taste auf der Tastatur wechseln. Der aktuelle Modus wird in der Statuszeile unten angezeigt.

4.7 Lesezeichen

Um in grösseren Dokumenten die Übersicht zu behalten und die Navigation zu erleichtern, können Sie Lesezeichen setzen. Es stehen Ihnen 10 Lesezeichen pro geöffnete Dokumente zur Verfügung. Mit STRG+UMSCH+Zahlentaste können Sie die Lesezeichen setzen. Das Lesezeichen wird in die Zeile gesetzt, in der sich der Cursor befindet. Mit STRG+Zahlentaste können Sie mit dem Cursor zu den gesetzten Lesezeichen springen.

4.8 Suchen

Das Suchen nach Textteilen ist eine oft benötigte Funktion. Mit STRG+F (oder im Hauptmenü Bearbeiten->Suchen) rufen Sie den Suchen Dialog auf. Geben Sie hier eine Zeichenfolge ein die Sie suchen wollen und drücken Sie Enter. Mit der F3-Taste springen Sie zum nächsten Suchergebnis, falls die gesuchte Zeichenfolge mehrfach vorkommt. Mit Alt-F3 können Sie zum rückwärts suchen.

4.9 Ersetzen

Es kommt oft vor, dass man Textteile ersetzen will, zum Beispiel Ihre E-Mailadresse, wenn sie sich geändert hat. Dies können Sie komfortabel ersetzen, auch wenn sie öfters im Dokument vorkommt. Rufen Sie dazu den Ersetzen-Dialog mit STRG+R oder über das Hauptmenü (Bearbeiten->Ersetzen) auf. Sie können entweder interaktiv eins nach dem anderen ersetzen, oder alles auf einmal.

4.10 HTML-Befehle einfügen

Der HTML-Editor hilft Ihnen beim Einfügen nahezu aller HTML-Befehle und Formatierungen. Ich gehe jetzt davon aus, dass Sie sich schon etwas mit den Grundlagen von HTML vertraut gemacht haben. HTML-Befehle können Sie entweder über die Hauptmenüpunkte Einfügen, Format und Schrift oder über die Knöpfe in der unteren Symbolleiste einfügen. Im Menüteil Einfügen befinden sich Befehle wie Links oder Graphiken einbinden. Im Bereich Format sind Befehle, die für das Formatieren und Strukturieren des Textes zuständig sind. Sie können hier Strukturen wie Überschriften, Paragraphen, Listen und Texttypauszeichnungen erstellen. Im Menüpunkt Schrift sind Befehle, mit der Sie das Schriftbild verändern können. Sie können unter anderem Schriftart, Grösse, Farbe und Stil verändern.

5 Dateien

Bei der Arbeit mit Internetseiten werden Sie es mit diversen Dateitypen zu tun haben. Dateitypen werden anhand der Dateiendung identifiziert, meistens ein Punkt gefolgt von 3 Zeichen, z.B "index.htm". Hier nun eine kurze Übersicht über gängige Dateitypen im Bereich HTML: +-----------------+------------------------------------------------+ | Typ | Beschreibung | +-----------------+------------------------------------------------+ +-----------------+------------------------------------------------+ | html, htm | Normale HTML-Dokumente | +-----------------+------------------------------------------------+ | gif | Graphiken im Grafic Interchange Format | +-----------------+------------------------------------------------+ | jpeg, jpg | Graphiken im Joint Picture Expert Group Format | +-----------------+------------------------------------------------+ | png | Graphiken im Portable Network Graphics Format | +-----------------+------------------------------------------------+ | css | Cascaded Style Sheet Dateien | +-----------------+------------------------------------------------+ | class, jar | Java-Applet Dateien | +-----------------+------------------------------------------------+ | js, pl, vb | Skriptdateien | +-----------------+------------------------------------------------+ | shtml,sht | HTML-Dateien mit Server-Side Includes | +-----------------+------------------------------------------------+ | asp | MS Active Server Seiten | +-----------------+------------------------------------------------+ |zip, tar.gz, rar | Dateiarchive für Downloads | +-----------------+------------------------------------------------+ | inc | HTML-Editor Includedateien | +-----------------+------------------------------------------------+ Wenn Sie nur ein kleines privates HTML-Projekt machen wollen, werden Sie es wahrscheinlich nur mit wenigen der oben genannten Dateitypen zu tun haben. Wichtig sind die html-Dateien, die die eigentlichen HTML-Daten enthalten. Weiterhin wichtig sind die beiden Graphikformate gif, png und jpeg, mit denen Sie Grafiken in HTML realisieren können. Eventuell benötigen Sie noch Zip-Dateien, wenn Sie Dateien zum Download anbieten wollen.

5.1 HTML-Dateien

HTML-Dateien enthalten die eigentlichen Seiteninformationen, also die HTML-Auszeichnungen und den Text Ihrer Seiten. Wie man HTML-Seiten erstellt und speichert habe ich schon im Abschnit "Erste Schritte" kurz beschrieben. HTML-Dateien können zusätzlich auch mit einem Linksklick auf die entsprechende Datei aus dem Dateimanager links im Hauptfenster des Programmes geöffnet werden. Sie können gleichzeitig mehrere Dateien öffnen und bearbeiten. Dateien können Sie wieder schliessen, indem Sie mit der rechten Maustaste auf den Dateinamen in der Liste über dem Editorfenster drücken oder im Hauptmenü unter Datei->Schliessen. Die ganzen anderen Dateioperationen finden Sie ebenfalls im Hauptmenü unter Datei. Der HTML-Editor besitzt auch einen eingebauten Dateimanager, der sich im Hauptfenster des Programms auf der linken Seite befindet. Die Benutzung des Dateimanagers wird hier für die einzelnen Dateitypen einzeln beschrieben.

5.1.1 Vorschau von HTML-Dokumenten

HTML-Dateien werden im HTML-Editor im Quelltext bearbeitet, das heisst, Sie sehen beim Bearbeiten nicht die fertige HTML-Seite, wie Sie im Browser aussieht, sondern Sie sehen die Seite direkt als Textdatei, mit allen HTML-Befehlen in Quelltextform. Nun will man natürlich nicht die ganze Zeit "blind" drauf los programmieren, sondern zwischendurch schon mal einen Blick auf das Ergebnis werfen. Falls Sie den Microsoft Internet Explorer 4.0 oder höher installiert haben (dringend empfohlen!), dann bietet der HTML-Editor Ihnen die Möglichkeit, die Vorschau direkt im HTML-Editor-internen Browser (für Experten: MS-Explorer als Active-X Control eingebettet) das Dokument anzusehen. Drücken Sie dazu einfach F9 und das Programm wechselt in den Browsermodus. Sie können auch über den Knopf in der oberen Symbolleiste ganz rechts die Vorschau starten. Der HTML-Editor-interne Browser ist einem normalen Browser sehr ähnlich. Es gibt vor- und zurück-Buttons, und ein Button für die Startseite, die Sie in den Projekteinstellungen definieren können. Falls Sie noch nicht den MS Internet-Explorer installiert haben, rate ich Ihnen das zu tun, wenn Sie mit dem HTML-Editor arbeiten möchten. Die interne Vorschau ist sehr komfortabel und steigert die Produktivität ungemein, indem sie Arbeitsabläufe abkürzt. Ich habe mit vielen Nutzern gesprochen, nachdem sie einmal mit der internen Vorschau gearbeitet haben, wollten sie darauf nicht mehr verzichten. Sie können den MS Explorer auch installieren, wenn Sie auch sonst mit Netscape arbeiten. Ich benutze zum surfen im Internet und zum Mail- und Newsschreiben den Netscape Communicator. Trotzdem habe ich den MS Explorer nebenbei installiert. Er ist kostenlos und auf vielen Free- und Shareware-CDs erhältlich. Er ist leider im Moment der einzige Browser der eine Einbettung in andere Programme (wie den HTML-Editor) erlaubt. Deswegen gibt es keine Alternative im Moment. Wer interne Vorschau haben will, muss den Microsoft Explorer installieren. Wer aus welchen Gründen auch immer den Microsoft-Explorer nicht installieren will, muss seine Seiten mit der Windows-Standardanwendung oder mit 2 benutzerdefinierten Browsern seiner Wahl betrachten. Die benutzerdefinierten Browser kann man in den Programmeinstellungen angeben. Gestartet wird die Vorschau in diesem Fall über den Knopf in der oberen Symbolleiste ganz rechts und dem dazugehörigen Pop-Up-menü. Das ist dann halt etwas umständlicher, weil immer ein neues Fenster geöffnet werden muss. Noch ein paar Worte zu Microsoft-Gegnern, die aus irgendwelchen rationalen oder irrationalen Gründen keine Microsoft-Software installieren wollen (aber trotzdem irrationalerweise noch mit Microsoft (!) Windows arbeiten). Warum arbeitet Sie noch auf einem Microsoft-Betriebssystem? Wenn Sie Microsoft und seine Methoden ablehnen, was durchaus nachvollziehbar ist, sollten Sie überlegen, ob Sie nicht auf ein anderes Betriebssystem umsteigen sollten! Entweder oder. Wer Microsoft ablehnt, sollte auch kein Windows benutzten. Auf jeden Fall will ich keine Meckereien hören, dass die interne Vorschau nur mit Microsoft-Software funktioniert. Meiner Meinung ist Microsoft nicht schlechter als andere Grosskonzerne auch. Wer diese Konzerne ablehnt, sollte das freie Betriebssystem Linux verwenden und mir nicht mit Anti-Microsoft Gejammer auf die Nerven gehen. Tut mir leid, wenn ich das hier etwas hart sage, aber ich habe die ständigen Kommentare zu dem Thema satt.

5.2 HTML-Sonderformate

Es gibt eine Reihe von HTML-Sonderformaten, die meistens mit speziellen Internet-Servern eingesetzt werden. SHTML Dateien werden z.B. für sogenanntes Serverside Including eingesetzt. ASP Dateien werden auf einem speziellen Microsoft Active Server ausgeführt, und erhalten in den HTML-Dokumenten eingebetteten Programmcode. Diese Formate werden in der Regel nur von Profis verwendet, weswegen ich hier auch nicht näher darauf eingehen werde. Wenn Sie das Thema interessiert besorgen Sie sich dazu Informationen aus dem Internet (Stichwort ASP, SHTML, Server Side Include, Microsoft Active Server Pages , PH3).

5.3 Graphikdateien

Graphikdateien für HTML-Seiten sollten im GIF,JPG oder PNG Format vorliegen. Graphiken können Sie mit allen gängigen Bildbearbeitungsprogrammen (Paint Shop Pro, Photoshop, Photo Paint, Gimp...) erstellen und dann in Ihre Internetseiten einbinden. Graphiken werden mit dem HTML-Befehl <img src="dateiname.xxx"> eingefügt, wobei zwischen den Anführungszeichen der Dateiname steht. Der HTML-Editor bietet Ihnen auch die Möglichkeit, die Bilder über einen Linksklick auf die Graphikdatei im Dateimanager links in Ihr Dokument einzufügen. Wenn Sie mehr über Graphikdateien lernen möchten, können Sie genauere Informationen in SelfHTML oder in anderen Internetquellen nachlesen.

5.3.1 Bildbetrachter

Der HTML-Editor besitzt weiterhin einen Bildbetrachter, mit dem Sie Dateien im GIF und JPG betrachten können. Klicken Sie dazu auf Ansicht->Bildbetrachter im Hauptmenü (Tast.: F8) oder über dem Dateimanager links oben, wenn Sie auf "Bildbetr." klicken. Sie können mit der Maus oder mit den Pfeiltasten auf der Tastatur zwischen den Bildern wechseln. Sie können mit F7 wieder zum Editor zurückwechseln.

5.4 Cascaded Style Sheets

Die Style-Sheet Technik ist eine relativ neue Technik. Sie vereinfacht das Erstellen von HTML-Seiten erheblich. Das Thema ist umfangreich, und ich kann hier nur kurz darauf eingehen. Falls Sie sich noch nicht mit Style-Sheets befasst haben, sollten Sie vorher einige Dinge darüber lernen. Dazu bietet sich z.B. auch wieder die Online-Dokumentation SelfHTML an. Sie sollten auf jeden Fall die theoretischen Grundlagen verstanden haben, bevor Sie versuchen CSS einzusetzen.

5.4.1 Was sind Style Sheets

Style Sheets sind grob gesagt Stilvorlagen, in denen Sie Formatierungsvorlagen definieren können. Diese können Sie dann mit Ihren Dokumenten verlinken, so dass diese Formatvorlagen zur Darstellung verwenden. Das verschafft Ihnen ein einheitliches Layout und die Wartung und Änderung der Dokumente was das Layout angeht wird deutlich vereinfacht. CSS-Dateien sind Textdateien, die Stildefinitionen enthalten. Die Dateiendung ist css.

5.4.2 Mit Style-Sheets arbeiten

Zuerst müssen Sie Stylesheets definieren. Legen Sie dazu eine Textdatei mit der Dateiendung css an. Darin schreiben Sie die Stilinformationen. Die Dateien sollten Sie in ihr zuvor in den Projekteinstellungen angegebenes Style-Sheet-Verzeichnis kopieren. Wenn Sie nun eine neue Datei erstellen wollen (Hauptmenü: Datei->Neu), dann erscheinen die vorhandenen Style-Sheets in der unteren Style-Sheet-Liste. Wenn Sie nun einen Style auswählen, dann wird dieser mit der neuen Datei verknüpft. Im HTML-Code sieht das konkret so aus, das dort ein <link ...>-Befehl mit dem Style-Dateinamen eingefügt wird. Diesen Link können Sie auch manuell einfügen, indem Sie im Dateimanager links im Hauptfenster auf eine CSS-Datei linksklicken.

5.5 Dateiarchive

Wenn Sie eine oder mehrere Dateien zum Download anbieten wollen, haben sich dazu bestimmt Dateiarchivformate durchgesetzt, die mehrer Dateien in eine Archivdatei packen, und die Dateigrösse durch Kompression verringern. Es haben sich dabei zwei Formate durchgesetzt: ZIP (Windows,Unix) und TAR.GZ (Unix). Es gibt eine Reihe Freeware-Programme, die Ihnen beim Erstellen dieser Archive behilflich sind. Unter Windows gibt es die Freewareprogramme Easy Zip 2000 und EnZip. Unter Unix steht Ihnen gzip und tar zur Verfügung, sowie Programme wie KZip und der Midnightcommander. Wie Sie Archivdateien erstellen, packen und entpacken lesen Sie am besten in den Dokumentationen der Archivprogramme nach. Im HTML-Editor können Sie Verknüpfungen mit den Archiven erstellen, indem Sie im Dateimanager auf das entsprechende Archiv klicken.

5.6 Skripte & Applets

Skripte und Applets sind eine Sache für Leute, die sich mit dem Thema HTML und Programmieren gut auskennen. Denen brauche ich hier nicht zu erklären, wie die Sachen funktionieren, denn sie wissen das besser als ich. Anfängern rate ich dringend ab, Skripte und Applets zu verwenden, wenn Sie nicht dem INHALT dienen. Viele unprofessionell eingesetzte Skripte und Applets gehen mir persönlich jedenfalls nur auf die Nerven, ohne dass sie irgendeinen Nutzen hätten. Nähere Informationen zu dem umfangreichen Thema finden Sie bei Sun (Stichwort Java) und bei SelfHTML (Stichwort Javascript, Perl, CGI).

6 Dateimanager

Der programminterne Dateimanager befindet sich links im Hauptfenster des Programms. Er ähnelt dem Dateimanager von Windows. In der oberen Hälfte sieht man die Laufwerke und Pfade, und unten die Dateien des ausgewählten Pfads. Der Dateimanager ist eines der wichtigsten Hilfsmittel im HTML-Editor. Mit ihm können sie z.B. Dateien öffnen, löschen oder Links erstellen.

6.1 Verzeichnisknöpfe

Über dem Dateimanger befinden sich Knöpfe, mit denen sie zwischen den Standardverzeichnissen für Homepagedaten, Grafiken, Style-Sheets, Include-Dateien und Vorlagen wechseln können. Die Standard-Verzeichnisse können sie wie oben beschrieben in den Projekteinstellungen definieren. Sie können die Standard-Verzeichnisse aber auch im Dateimanager direkt angeben. Wählen sie dazu ein Verzeichnis, dass sie zu einem Standard-Verzeichnis machen wollen und klicken sie mit gedrückter STRG-Taste den entsprechenden Button. Neben den Verzeichnisknöpfen befindet sich noch ein Knopf zum suchen von Dateien und zum öffnen des aktuellen Verzeichnisses im Windowsdateimanager.

6.2 Popupmenüs

Wenn sie mit der rechten Maustaste im Dateimanager auf eine Datei oder einen Pfad drücken, dann erscheint ein Menü mit allen Befehlen, die Ihnen für die Datei bzw. das Verzeichnis zur Verfügung stehen. Die Befehle dürften selbsterklärend sein.

6.3 Mausbefehle

Wenn sie in der Dateiliste des Dateimanagers mit der linken Maustaste auf eine Datei klicken, wird je nach Dateityp eine bestimmte Aktion ausgeführt. +--------------+--------------------------------------------------------+ | Dateityp | Aktion | +--------------+--------------------------------------------------------+ +--------------+--------------------------------------------------------+ | HTML | Öffnen der Datei in den Editor | +--------------+--------------------------------------------------------+ | Grafik | Einfügen des <img...> Befehls mit dem Grafikdateinamen | +--------------+--------------------------------------------------------+ | TXT/Vorlage | Einfügen des Vorlagetextes in die aktuelle Datei | +--------------+--------------------------------------------------------+ | CSS | Einfügen des <link...> Befehls in den Editor | +--------------+--------------------------------------------------------+ | Archiv | Downloadlink zum Dateiarchiv (zip,rar,arj...) | +--------------+--------------------------------------------------------+ | Include | Einfügen der Includedatei in die geöffnete HTML-Datei | +--------------+--------------------------------------------------------+ |Favoriten/URL | Einfügen des Links | +--------------+--------------------------------------------------------+ | Andere | Öffnen der Datei in den Editor | +--------------+--------------------------------------------------------+ Sie können alternativ zum Linksklick die Datei auch per Drag&Drop in das Editorfenster ziehen. Einziger unterschied zum Linksklick ist, das HTML-Dateien dann nicht geöffnet werden, sondern dass an der Stelle wo die Datei fallengelassen wird, ein Link zu der Datei eingefügt wird. Sie können auch Verzeichnisse per Drag&Drop in das Editorfeld ziehen, wobei ebenfalls ein Link eingefügt wird.

6.4 Dateifilter

Sie können einen Dateifilter wählen, um in der Dateiliste nur Dateien eines bestimmten Typs anzeigen zu lassen. Klicken sie dazu mit der rechten Maustaste in die Dateiliste und wählen Sie unter Filter einen Filtertyp ihrer Wahl. Es gibt die Filter Webdatei, HTML-Dateien, Grafiken und Benutzerdefiniert. Die Filter können Sie in den Programmeinstellungen beliebig Ihren bedürfnissen Anpassen.

7 Werkzeuge

Der HTML-Editor bietet Ihnen eine Reihe von nützlichen Werkzeugen und Assistenten an, die Ihnen beim Aufbau Ihrer Seiten behilflich sind. Die Assistenten können Sie über das Menü Tools im Hauptmenü aufrufen. Die dort vorhandenen Tools (deut.: Werkzeuge) werden nun kurz beschrieben.

7.1 Dateiübergreifendes Ersetzen

Hatten Sie auch schon das Problem, dass sich zum Beispiel Ihre E-Mailadresse geändert hat, und Sie in allen Ihren Dateien per Hand die Adresse ändern mussten. Dies kann bei umfangreichen Projekten schnell zum Problem werden. Dafür gibt es aber jetzt Abhilfe. Wählen Sie einfach die Dateien aus, in denen Sie ersetzen wollen, geben Sie den zu ersetzenden Text an und fertig. So einfach kann das gehen.

7.2 Dateiübergreifendes Suchen

Sie können nach Suchbegriffen (auch mehrzeiligen) in einer benutzerdefinieten Dateiliste suchen. Geben sie dazu den Suchtext ein, und drücken sie auf Dateien wählen. Wählen sie im nun folgenden Dialog die Dateien, in denen sie nach dem Suchbegriff suchen wollen. Anschliessend können sie die Suche starten. Es wird eine neue Liste aufgeführt, mit den Dateien, die den Suchbegriff enthalten. Mit einem Doppelklick auf einen Dateinamen können sie die entsprechende Datei öffnen. Der Cursor im Editor befindet sich automatisch beim Suchbegriff. Wenn sie im Editor F3 drücken, können sie zu dem nächsten Vorkommen des Suchbegriffs wechseln.

7.3 Debugger

Der Debugger (deut.: Fehlersucher) sucht nach Fehlern in Ihrem HTML-Quelltext. Er berichtet über Links, die ins Leere gehen, über nicht abgeschlossene Befehle, und über fehlerhafte Befehlsnamen.

7.4 Fussnotenassistent

Der Fussnotenassistent ermöglicht Ihnen das einfache Einfügen von Fussnoten und Verweisen. Fussnoten werden meist in wissenschaftlichen Aufsätzen verwendet. In ihnen kann man Sachen näher erläutern, die man nicht unbedingt direkt in seinem Aufsatz erwähnen will, weil das entweder den Lesefluss stören würde oder weil etwa die Information nicht so relevant ist oder nur weiterführen soll. Oft werden Fussnoten auch zu Quellenangaben oder Verweisen auf andere Texte benutzt. Häufig werden dort auch Fremdwörter übersetzt und erläutert. Die Anwendung von Fussnoten ist also vielfältig. Fussnoten werden durchnummeriert. Die Verweise im Text auf Fussnoten sind Kästchen mit einer Nummer drin ( [1] ). Fussnoten stehen am Ende des Textes und beginnen ebenfalls mit dem Kästchen, gefolgt von der Erläuterung, also der eigentlichen Fussnote ( [1] Fussnotentext hier ... ).

7.4.1 Fussnote einfügen

Geben Sie einen Fussnotentext ein und gehen Sie mit dem Cursor im Editorfenster an die Stelle, wo die Fussnote eingefügt werden soll. Normalerweise ist das am Ende des Dokumentes. Drücken Sie dann auf Fussnote einfügen.

7.4.2 Verweise einfügen

Nachdem Sie die Fussnote eingegeben haben, gehen Sie mit dem Cursor an die Position, wo Sie den Verweis auf die Fussnote einfügen wollen. Das ist meist direkt die Stelle hinter dem zu erläuterndem Wort oder Satz. Klicken Sie dann auf Verweis einfügen.

7.4.3 Fussnotenformatierung anpassen

Sie können in den Projekteinstellungen die Fussnotenformatierung ihren eigenen Bedürfnissen anpassen, wenn Sie das wollen. Die Standardformatierung ist [ 1 ]. Sie können zum Beispiel auch die Leerzeichen weglassen, wie das oft gefordert wird ([1]) oder die Zahl als hochgestellte kleine Zahl angeben (²). Die Formatierungen können Sie in den Projekteinstellungen anpassen, in dem sie das Aussehen der Zahl mit HTML-Befehlen verändern.

7.5 HTML Konstruktor

Der HTML-Konstruktor ist ein Hilfsmittel, um diverse HTML-Konstrukte zu erstellen. Er hilft Ihnen beim Erstellen von Frames (<frame>), Listen (<ol>,<ul>), Definitionslisten (<dl>) Dateilisten und horizontalen Leisten. Lesen Sie eventuell in einer HTML-Dokumentation z.B. unter SelfHTML genauer nach, was Frames, Listen und Definitionslisten sind. Ich werde hier nicht genauer darauf eingehen. Dateilisten ist eine Liste von Dateienamen aus einem bestimmten Verzeichnis, eventuell mit relativem Pfad und/oder mit Link.

7.6 Schlüsselwörter Tagging

Mit dem Schlüsselwörter-Tagging können Sie in ihrem Dokument Listen von Schlüsselwörtern mit einem Tag (HTML-Befehl) versehen. Sie können Schlüsselwörterlisten auch aus Dateien laden und in Dateien speichern. Mögliches Anwendungsgebiet ist z.B. das Formatieren von Quelltexten. Angenommen Sie wollen einen Pascal-Quelltext hübsch formatieren, ähnlich wie es Entwicklungsumgebungen tun. Es sollen alle reservierten Wörter der Programmiersprache fett dargestellt werden. Angenommen Sie haben eine Pascalprozedur in einem <PRE>-Bereich: <pre> Program Hello; uses crt; begin writeln('Hello World!'); end. </pre> Wenn Sie nun die Schlüsselwortliste von Pascal laden, und als Tag <b>,</b> für fett angeben, dann sieht Ihr Quelltext danach so aus: <pre> <b>Program<b> Hello; <b>uses</b> crt; <b>begin</b> writeln('Hello World!'); <b>end</b>. </pre> Damit sieht der Quelltext in HTML so ähnlich aus, wie in der Entwicklungsumgebung in der Sie arbeiten. Dies ist natürlich nur ein Beispiel für die Anwendung. Ihren Phantasien sind natürlich keine Grenzen gesetzt.

7.7 Tabellenassistent

Der Tabellenassistent hilft Ihnen beim Erstellen von Tabellen. Das Werkzeug dürfte selbst erklärend sein.

7.8 Zeilenweise Ergänzung

Die Zeilenweise Ergänzung hilft Ihnen bei einem Arbeitsschritt, der normalerweise viel Zeit und Mühe beansprucht: Das zeilenweise Ergänzen von Textpassagen mit ein und dem selben Ergänzungstext. Sie markieren einfach einen Textteil im HTML-Editor, in dem Sie zeilenweise ein bestimmtes Textstück ergänzen wollen. Tragen Sie nun den Ergänzungstext ein. Eine Beispiel: Sie tippen 10 Listenpunkte ein, und wollen daraus eine HTML-Liste machen. Wenn diese Funktion nicht schon im HTML-Editor implementiert wäre, könnten Sie zum Beispiel wie folgt vorgehen. Sie tippen die 10 Listenpunkte ein, und geben als Ergänzung <li> und </li> an, dann erhalten Sie folgendes Ergebnis: Vorher: Nachher: Kaffee <li>Kaffee</li> Tee <li>Tee</li> Cola <li>Cola</li> Bier <li>Bier</li> Apfelwein <li>Apfelwein</li> Wasser <li>Wasser</li> Fanta <li>Fanta</li> Saft <li>Saft</li> Schnaps <li>Schnaps</li> Sekt <li>Sekt</li> Es gibt natürlich noch viele andere Anwendungsbeispiele. Hier ist auch wieder, wie beim Schlüsselwörter-Tagging, Ihre Phantasie gefragt.

8 Plugins

Der HTML-Editor bietet Ihnen und allen Benutzern, das Programm mit eigenen Erweiterungen (ähnlich der eingebauten Werkzeuge) zu versehen. Sie können, wenn Sie eine Programmiersprache beherrschen, selbst Plugins schreiben, die Ihnen häufig benötigte Arbeitsabläufe abnehmen. Sie können auch Funktionen schreiben, die noch nicht im HTML-Editor eingebaut sind, und diese dann z.B. verkaufen oder als Freeware bereitstellen . Auch wenn Sie nicht programmieren können, sollten Sie trotzdem weiterlesen. Es gibt mittlerweile eine Reihe guter kostenloser Freewareplugins, die von verschiedenen Leuten aus ganz Deutschland geschrieben wurden, und kostenlos zur Verfügung gestellt werden. Die Plugins können im Internet auf meiner Homepage runtergeladen werden.

8.1 Installation von Plugins

Plugins sind dynamische ladbare Programmbibliotheken. Hört sich erstmal kompliziert an, ist es aber nicht. Das HTML-Editor Programm heisst htmledit.exe. In ihr ist das Grundprogramm des HTML-Editors enthalten. Zusätzliche Funktionen können in das Programm eingebunden werden, wenn die Funktionen in DLL-Dateien (*.dll) enthalten sind. Diese müssen Sie lediglich in das Pluginverzeichnis Ihrer HTML-Editor Installation (c:\programme\htmledit\plugins o.ä.) kopieren. Die Dateienendung der Plugins ist dll. Das Pluginverzeichnis können Sie auch in den Programmeinstellungen wechseln, wenn Sie das wünschen. Es sind im Internet schon einige Plugins erhältlich, darunter Assistenten zum Erstellen von Laufschriften, Farbschemen und zum Formatieren und Überprüfen des HTML-Codes und noch viele mehr.

8.2 Pluginmenü

Wenn sie Plugins installiert haben, werden diese nach dem nächsten Neustart des Programms im Hauptmenü unter Tools angezeigt.

8.3 Programmieren von Plugins

Das Programmieren von Plugins ist nicht ganz einfach, eine genaue Beschreibung würde den Rahmen dieses Handbuchs sprengen. Eine genauere Anleitung inklusive Schnittstellenbeschreibung finden Sie auf der HTML-Editor Homepage unter Plugins. Falls Sie Borland Delphi oder C++ beherrschen, können Sie sich Ihre eigenen Funktionen einbauen.

8.4 Verknüpfungen und Batchdateien im Pluginmenü

Neben Plugins in Form von DLLs können sie auch in Ihrem Pluginverzeichnis Verknüpfungen mit Windowsprogrammen oder Batchdateien erstellen. Diese werden beim nächsten Start des Editors automatisch in das Pluginmenü eingebunden. Die Verknüpfungen und Batchdateien werden mit dem Dateinamen der aktuell geöffneten Datei gestartet. Sie können so zum Beispiel die aktuell geöffnete Datei in verschiedenen Browsern betrachten, wenn sie in Ihrem Pluginmenü eine Verknüpfung zu der Programmdatei der Browser erstellen. Es gibt hunderte von anderen Anwendungsmöglichkeiten, es liegt an Ihnen und an Ihrer Phantasie, ob und wie sie diese Möglichkeit nutzen wollen

9 Includetechnik

Die Offline-Includetechnik ist im Bereich HTML eine sehr neue Technik, die meines Wissens bis jetzt nur im HTML-Editor Phase 5 implementiert ist (Stand: August 1999). Falls Sie schon Programmierkenntnisse besitzen, wird Ihnen die Sache sicher gleich vertraut vorkommen, aber auch wenn Ihnen das jetzt noch gar nichts sagt, sollten Sie sich mit der Includetechnik beschäftigen, denn sie erleichtert Ihnen, speziell bei grossen Projekten die Arbeit ungemein. Ich spreche aus Erfahrung. Bei meiner eigenen Seite benutze ich diese Technik schon eine ganze Zeit, und es spart wirklich eine Menge Arbeit.

9.1 Was sind Includes ?

"Include" ist wieder so ein Englisches Modewort denken Sie jetzt sicher. Kann sein, aber mir fällt ausser "Einschliessungen" oder "Einbeziehungen" keine sinnvolle Übersetzung ein. Ich werde es Ihnen an einem Beispiel erklären. Schauen Sie sich z.B. meine Homepage an, auf jeder Seite ist eine Titelzeile mit dem Text "Ulli Meybohms Site" und einer horizontalen Leiste. Diese Titelleiste wäre jetzt in über 50 Seiten fest verankert. Stellen Sie sich nun vor, ich wollte das Design des Titels umstellen, dann müsste ich ja in allen 50 Dateien die Änderungen vornehmen. Das wäre eine Menge Arbeit. Ich hab das so gelöst: Ich habe den Titel in einer separaten Include-Datei gespeichert. Eine Includedatei ist einfach eine Textdatei mit HTML-Quelltext drin. Die Dateiendung muss .inc sein. Ich habe nun eine Verknüpfung mit der Include-Datei in alle meine Dokumente eingefügt (Einfügen->Includedatei). Das sieht dann dateitechnisch wie folgt aus: Includedatei titel.inc im Includeverzeichnis: <b>Ulli Meybohms <font color='#FF0000'>Site</font></b> <hr noshade size=1> In meinen HTML-Dateien sieht das dann wie folgt aus: <html> <head> ... </head> <body....> <!--include:titel.inc--> <b>Ulli Meybohms <font color='#FF0000'>Site</font></b> <hr noshade size=1> <!--/include:titel.inc--> ... </body> </html> Wenn ich jetzt in allen meinen Dateien den Titel ändern wollte, dann müsste ich lediglich in der Include-Datei titel.inc die Änderungen vornehmen, und die Includebereiche in allen Dateien mit dem Hauptmenü-Befehl Projekt->Includes aktualisieren auf den neuesten Stand bringen. Das ist natürlich zugegebenermassen ein triviales Beispiel, aber Ihrer Phantasie sind keine Grenzen gesetzt. Es empfiehlt sich alle grösseren Dokumentteile, die mehr als einmal vorkommen, als Includes zu realisieren. Das spart eine Menge Arbeit. Schauen Sie sich einfach mal meine Homepage im Quelltext an, ich habe starken Gebrauch von Includes gemacht.

9.2 Includekonfiguration

Das Includeverzeichnis müssen Sie unbedingt einstellen, um die Includetechnik zu nutzen. Wählen Sie dazu in den Projekteinstellungen ein Verzeichnis Ihrer Wahl. Die Includedateien müssen die Dateiendung .inc besitzen, und im Includeverzeichnis abgelegt werden. Alternativ können Sie das Includeverzeichnis auch folgendermassen auswählen: Gehen Sie im Dateimanager links im Hauptfenster in ihr Includeverzeichnis und drücken Sie mit gehaltener STRG-Taste den Includeknopf über dem Dateimanager.

9.3 Includes einfügen

Wenn Sie erstmal eine Includedatei erstellt haben, können Sie diese auf zwei Arten einfügen, entweder über das Hauptmenü mit Einfügen->Includedatei oder über den Dateimanager links mit einem Klick auf die entsprechende Includedatei.

10 Programmeinstellungen

Die Programmeinstellungen sind etwas für fortgeschrittene Benutzer. Falls Sie nicht alles auf Anhieb verstehen, machen Sie sich keine Gedanken. Das Programm ist für die meisten Fälle gut vorkonfiguriert. Die Programmeinstellungen können Sie unter Ansicht->Programmeinstellungen aufrufen. Hier können Sie globale, projektübergreifende Einstellungen vornehmen. Es erscheint ein Dialogfenster, das in folgende Abschnitte unterteilt ist:

10.1 Anbindungen

Hier können Sie Zusatzbrowser für die Vorschau angeben, und eine HTML-Dokumentation auswählen, die an den HTML-Editor angebunden werden kann. Professionelle Webdesigner überprüfen ihre Seiten gerne mit verschiedenen Browsern, bevor sie ihre Seiten ins Netz stellen. Man sollte mindestens seine Seiten mit den aktuellen Browsern von Microsoft und Netscape testen. Vorzugsweise auch mit Opera oder älteren Netscape-Varianten.

10.2 Dateiendungen

10.2.1 Dateiendungen für Filter

Die Dateiliste im Hauptfenster rechts kann mit diversen Dateitypenfiltern arbeiten. Unterschieden wird dabei zwischen WWW, HTML und benutzerdefiniertem Filter, die Sie hier einstellen können. Diese Dateitypen werden angezeigt, wenn Sie im Dateimanager links im Hauptfenster die entsprechenden Filter aktivieren.

10.2.2 Parser und Dateiendungen

Der HTML-Editor hat Parser für das Syntaxhighlighting (Einfärben des Quelltextes im Editor) für mehrere Sprachen zur Verfügung, darunter HTML, Perl, C ,Pascal, Sql und viele mehr. Der HTML-Editor erkennt an den Dateiendungen, um welchen Dateityp es sich handelt. Die gängigen Dateiendungen sind voreingestellt. Falls Sie aussergewöhnliche Dateiendungen für Ihre Dateien verwenden, können Sie die Endungen hier manuell eintragen.

10.3 Optionen

Hier können Sie einige Standardeinstellungen ändern. Das Plugin- und das Keyword-Verzeichnis kann gewechselt werden, und es kann die Programmhilfedatei gewählt werden.

10.4 Verknüpfungen

10.4.1 Verknüpfungen erstellen

Windows bietet die Möglichkeit, zu beliebigen Dateien Verknüpfungen zu erstellen. Sie haben die Möglichkeit, Verknüpfungen zu dem HTML-Editor auf ihrem Windows-Desktop oder im Startmenü zu erstellen. Eine weitere sehr empfehlenswerte Sache ist die Verknüpfung im Senden an Verzeichnis. Damit können Sie aus dem Windows-Dateimanager beliebige Textdateien über das Senden an Menü mit dem HTML-Editor öffnen.

10.4.2 Verknüpfung im Windowsdateimanager Popupmenü

Sie kennen sicher das Popupmenü im Windowsdateimanager. Das Menü, das erscheint, wenn Sie im Windowsdateimanager mit der rechten Maustaste auf eine Datei drücken. Dort erscheinen normalerweise solche Einträge: Öffnen Drucken Bearbeiten - Ausschneiden Einfügen (...) Sie haben nun die Möglichkeit, hier einen Eintrag Bearbeiten mit HTML-Editor einzufügen. Sie können damit dann bequem beliebige Dateien aus dem Windowsdateimanager in den Editor öffnen. Die Dateiendungen, bei denen der Eintrag gemacht werden soll, können Sie frei auswählen.

11 Tips, Tricks und Kleinigkeiten

11.1 Benutzerdefinierte Farbpalette

In der Symbolleiste des Hauptprogrammes befindet sich unter "COLORS" die Farbpalette. Es sind 3 Farbpaletten vordefiniert, einmal die HTML-Editor-Standardfarbpalette, dann eine Farbpalette bei der die Farben nicht als Hexadezimalwerte sondern als Farbnamen angegeben sind. Sie können auch eigene Farbpaletten erstellen, wenn sie das wollen. Diese müssen als Bitmapdateien der Grösse 450x30 im Verzeichnis "htmledit\config\pal\" liegen. Als Beispiel habe ich dort die Datei userpal.bmp abgelegt, die die 216 Standardfarben der 8-bit Farbpalette beinhaltet. Sie können in diesem Verzeichnis beliebig viele eigene Farbpaletten definieren, in dem sie dort die Bitmapdateien mit der Farbpalette hineinkopieren. Sie können die Paletten-Bilder mit jedem beliebigen Bildbearbeitungsprogramm erstellen. Die Paletten werden dannnach dem nächsten Start des HTML-Editors verfügbar. Desweiteren können Sie auch noch zu jedem Projekt 16 benutzerdefinerte Farben erstellen, indem Sie neben der Farbpalette auf den Farbauswahlknopf drücken, und benutzerdefinierte Farben hinzufügen.

11.2 Schnelles Schliessen einer geöffneten Datei

Sie können mit einem Rechtsklick mit der Maus auf den Karteireiter mit dem Dateinamen der zu schliessenden Datei klicken, um diese zu schliessen. Die Karteireiter der geöffneten Dateien befinden sich über dem Editorfeld.

11.3 Dateien öffnen per Drag&Drop

Man kann Dateien in den Editor laden, indem man die entsprechende Datei aus dem Windowsdateimanager per Drag&Drop in das HTML-Editor Hauptfenster zieht.

11.4 Weitere Quellen

Wenn sie mehr über HTML, Webdesign und das Internet lernen wollen habe ich auf meiner HTML-Editor Homepage unter "Anleitung" eine Linksammlung zu nützlichen Quellen erstellt.
SeitenanfangSeitenanfangSeitenanfang