Website-Entwicklung
Sommeruniversität 2005

Phase 5 – Der Editor im Kurs: Einige Hinweise

Grundlegende Funktionen

Die Programm-Oberfläche

Die Programm-Oberfläche besteht aus mehreren Kopf-Zeilen und einem Arbeitsbereich. Der Arbeitsbereich besteht aus einem wegklappbaren Dateimanager (links) und dem eigentlichen Editorfenster (rechts), in das die zu bearbeitenden Dateien geladen werden.

Die Kopf-Zeilen

Eine Beschreibung des Befehls hinter einem Icon wird angezeigt, wenn man den Mauszeiger einen Augenblick über dem Icon schweben läßt. – Probier's einfach mal aus!

  1. Zeile: ausklappbare Menüs mit Befehlen zur Dateibearbeitung und für Einstellungen
  2. Zeile: Doppelzeile mit Reitern und zugehörigen Befehlen für die Erstellung von HTML- und CSS-Dateien: Ist z.B. der Reiter zur Tabellen-Bearbeitung im Vordergrund, dann erscheinen Befehle für Tabellen
  3. Zeile (dunkelblau): Name des aktiven Projekts (wenn der Dateimanager sichtbar ist) und der aktiven Datei (müssen nicht zusammengehören!)
  4. Zeile:
    • über dem Dateimanager: Befehle für das Wechseln zwischen den Verzeichnissen
    • über dem Editorfenster: Befehle zum Öffnen und Speichern sowie zum Rückgängig-Machen; Auswahlfeld für die Syntax-Hervorhebung; Knopf für den Wechsel zwischen Vorschau und Quelltext

Der Arbeitsbereich

Hier werden alle Dateien erstellt. Wenn der Dateimanager unsichtbar ist, dann kann er mit der Taste "F2" wieder sichtbar gemacht werden.

Projekte

Zu einem Web-Auftritt gehören in der Regel mehrere Dateien: die Startseite, von der aus man über Links zu verschiedenen Nebenseiten kommt, Bild-Dateien, usw. Es ist daher sinnvoll, alle Dateien eines Web-Auftritts zu einem Projekt zusammenzufassen. Beim Start von Phase 5 befindest Du Dich automatisch in dem Projekt "Projekt 1". Jedes Projekt hat einen Stammordner, in dem alle HTML-Seiten gespeichert werden. Den Pfad zu diesem Ordner findest Du im Menü Projekt > Einstellungen > Reiter: Verzeichnisse. Wenn Du alle Dateien, die Du in diesem Kurs erstellst, unterhalb dieses Verzeichnisses speicherst, kannst Du Dir Deine Arbeitsergebnisse ganz bequem auf einer Diskette oder einem Stick abspeichern – und alle Links werden auch bei Dir zuhause funktionieren (wie Du diese Dateien in Phase 5 importieren kannst, steht in den Tipps).

Die Startseite eines Projekts

Die Startseite eines Web-Auftritts heißt in der Regel "index.html": Wenn in dem Verzeichnis, auf das eine WWW-Adresse verweist, eine Datei mit diesem Namen ist, dann wird diese Datei automatisch geöffnet.

Eine HTML-Seite erzeugen und in der Vorschau prüfen

Mit Phase 5 kann man das Gerüst einer HTML-Seite automatisch erzeugen:

  1. Erzeugungsfenster öffnen: Klick auf den Button "Neues HTML-Dokument erstellen" (oben links über dem Editorfenster) oder Auswahl des entsprechenden Eintrags im Datei-Menü.
  2. Titel der Seite eingeben (erscheint später in der Titelzeile des Browsers), als HTML-Version "!doctype html public -//W3C//DTD HTML 4.01 Transitional//EN" auswählen und dann mit "Erstellen" abschließen.
  3. Datei speichern: der Name muß auf ".html" enden (diese Endung wird automatisch angehängt, wenn als Dateityp "HTML Dateien" gewählt wird).
  4. Seiteninhalt schreiben: Texte, Überschriften, Tabellen, Listen, ... im "Body", d.h. zwischen "<body>" und "</body>" schreiben. Jedes Seitenelement besteht aus einem Inhalt (z.B. dem anzuzeigenden Text) und einer Beschreibung, um welche Art von Inhalt es sich handelt. Diese Beschreibung umrahmt den eigentlichen Inhalt: mit "<h1>" wird zum Beispiel der Anfang einer Überschrift 1. Ordnung, und mit "</h1>" das Ende einer solchen Überschrift markiert. Alle schließenden "Tags" beginnen mit einem "/" und bestehen im Übrigen aus demselben Schlüsselwort wie das zugehörige öffnende Tag. In Phase 5 kannst Du Tag-Paare für Textabschnitte ganz einfach erzeugen, indem Du den Reiter "Text" aktivierst, den Eingabecursor an die gewünschte Stelle im Quelltext stellst und auf die entsprechenden Schaltflächen klickst. – Hinweise:
    • Achte auf ein übersichtliches Layout des Quelltextes: Setze den Eingabecursor so, daß Phase 5 Dich mit automatischem Einrücken der ersten Zeile von untergeordneten Textabschnitten unterstützt. Die Beschreibung von Blockelementen wie Absätzen, Tabellen, Tabellenzeilen, Tabellenzellen usw. beginnt immer auf einer neuen, gegebenenfalls eingerückten Zeile.
    • Umlaute und Sonderzeichen können direkt eingegeben werden (Phase 5 konvertiert diese beim Speichern und Laden in die korrekten HTML-Zeichenketten)
    • HTML-Steuerzeichen müssen umschrieben werden: "&lt;" für "<", "&gt;" für ">", "&amp;" für "&", "&quot;" für die Anführungszeichen ("). Die Umschreibung von "<" ist besonders wichtig, da der Browser sonst immer aus dem Tritt kommt.
  5. Seite in einem Browser prüfen (Vorschau): linker Button oberhalb des Editorfensters schaltet zwischen Quelltext und erstem Vorschaubrowser hin- und her bzw. öffnet ein Browserfenster (für die übrigen Browser, wenn mehrere Vorschaubrowser eingerichtet sind); mit dem kleinen Pfeil kannst Du verschiedene Browser auswählen, wenn auf der Karteikarte "Browser" im Menü Einstellungen > Programm mehrere Browser eingetragen sind.

Eine CSS-Datei erzeugen

Mit Phase 5 können auch CSS-Dateien erstellt werden.

  1. Öffne das Fenster zum Erstellen eines neuen (HTML-)Dokuments und wähle dann "Leeres Dokument erstellen".
  2. In dem Feld für die Syntaxhervorhebung (oberhalb des Editorfensters) wähle "CSS, level 2" aus und speichere die Datei mit einem Namen, der auf ".css" endet (diese Endung wird automatisch angehängt.
  3. Stilelemente zur Formatierung können über ein Dialogfenster erzeugt werden: den Reiter "CSS" aktivieren und "Neues Style Element" auswählen.

Installieren und Einrichten von Phase 5

Die Installation von Phase 5 ist ganz einfach:

  1. das Installationsprogramm (phase5.exe) und die zugehörige (externe) HTML-Dokumentation (phase5help.zip) herunterladen (www.qhaut.de),
  2. das Installationsprogramm laufen lassen (keine Administratorrechte erforderlich!; bei Mehrbenutzersystemen sinnvoll: Installation in ein gemeinsames Programmverzeichnis, z.B. in eines unterhalb von "All Users"),
  3. Dokumentationsdateien auspacken (sinnvoll: in den Installationsordner); die Datei muss unter Einstellungen > Programm > Reiter: Dateiendungen und Hilfe verlinkt werden; nur diese Dokumentation ist komfortabel durchsuchbar, die eingebaute Hilfe nicht
  4. Einstellungen anpassen, z.B. so, wie wir die Voreinstellungen im Kurs gewählt haben

Tipps

Aufgabe / Problem Lösungsweg
Hilfe zu einem Thema suchen Hilfe > Dokumentation (in der "Hilfe zum HTML-Editor" kann man nur mit der Suchfunktion des Browsers suchen!)
Dateimanager (linke Seite) ist verschwunden [F2]-Taste blendet ihn wieder ein!
Zeilenumbruch am Bildschirmrand Einstellungen > Editor: Reiter "Editor", rechte Spalte
Umlaute und Sonderzeichen werden beim Speichern und laden automatisch konvertiert (einstellbar unter: Projekt > Einstellungen: Reiter "Optionen")
mehrere Vorschau-Browser Einstellungen > Programm: Reiter "Browser" (Pfad zur Browser-Programm-Datei muß bekannt sein; Reihenfolge ändern: mit Pfeiltasten rechts)
unklar: CSS-Dateien von Mozilla / Firefox bei Vorschau nicht richtig eingebunden?
Änderungen in der Vorschau nicht sichtbar Überprüfen, ob "automatisch speichern vor dem Browseraufruf" eingeschaltet ist (Projekt > Einstellungen: Reiter "Optionen" (ganz unten)). Eine geänderte Seite, die über einen Link in einer anderen Seite aufgerufen wird, muß vorher per Hand gespeichert werden.
das schließende Tag wird nicht erzeugt Wenn der Eingabecursor unmittelbar vor einem Buchstaben steht, funktioniert die automatische Tag-Ergänzung nicht immer.
Projekte importieren
  • neuen Ordner anlegen (im Windows Explorer oder im Phase 5-Dateimanager: im Kontextmenü des Elternordners "Neuen Ordner erstellen" auswählen) – des wird der Stammordner des Projekts
  • die Dateien und Ordner des zu importierenden Projekts hineinkopieren (im Windows Explorer)
  • in Phase 5 ein neues Projekt mit Links auf die entsprechenden Ordner erzeugen
  • falls die Dateien des Stammordners im Dateimanager noch nicht angezeigt werden: im Kontextmenü der Dateiliste "Dateiliste aktualisieren" wählen (sobald Phase 5 eine Datei in diesen Ordner speichert, wird die Dateiliste automatisch aktualisiert)
Änderungen sollen nach dem Speichern rückgängig gemacht werden können auf der Karteikarte "Optionen" im Menü "Einstellungen" > "Programm" das entsprechende Kontrollkästchen (unten links) aktivieren; zu beachten ist, daß nur eine begrenzte Anzahl von Schritten rückgängig gemacht werden kann
immer wiederkehrende Zeichenfolgen eintippen, z.B. <span class="quelltext"> ... </span> dafür bieten sich die Tastaturvorlagen an (im Menü "Einstellungen") – einmal wohl überlegt definiert sparen sie enorm viel Tipparbeit und Zeit bei der Suche nach Tippfehlern ...