|
|
|
Letzte Aktualisierung
28.07.2005
Inhalt
Es gibt viele Editoren zum Erstellen von HTML-Seiten, grafische und textbasierte. Für uns der beste Editor, mit auch wir unsere Seiten erstellen, ist der HTML-Editor Phase 5, zurzeit in der Version 53vorliegt.
Da immer wieder nach einigen Grundeinstellungen gefragt wird und Phase 5 einige Besonderheiten bietet, wie Projektarbeit und Arbeiten mit Includes, sind hier die Anleitungen vom Download bis zum Arbeiten mit Includes.
Diese Anleitungen sind für Anfänger gedacht, wie immer gilt auch hier, erst wer wirklich mit einer Anwendung arbeitet, lernt sie kennen. Die Texte hier sind nur für den Einstieg gedacht.
Phase 5 ist Freeware und wohl einer der besten, deutschsprachigen HTML-Editoren. Das Programm wird ständig weiter entwickelt und kann sowohl als einziger Editor genutzt werden, als auch als Editor für Feinarbeiten, wenn vorher zum Rohentwurf mit einem grafischen Editor gearbeitet wurde.
Hier einiges zur Geschichte von Phase 5. Auf das HTML-Portal für Phase 5 wird später noch genauer eingegangen.
Als Uli Meybohm 1996 den HTML-Editor entwickelte, konnte er wohl nicht ahnen, wie groß seine Verbreitung werden würde. Heute wird das Programm vom Co-Autor Dieter Berretz als alleinigem Autor weiterentwickelt und immer wieder verbessert.
Zitat aus der Hilfe des Editors: "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."
Phase 53 ist nicht nur ein hervorragender Editor, Phase 53 beinhaltet auch viele Feature oder kleine Tools, die das Erstellen von HTML-Seiten und ganzen Projekten erleichtert.
Erwähnt seien hier zunächst das dateiübergreifende Suchen und Ersetzen in einem Projekt, die sog. Include-Dateien oder auch die Möglichkeit mit wenigen Mausklicks CSS-Layouts zu verwirklichen.
Für Phase 5 gibt es zwei Download-Adressen. Zunächst einmal die Webseite des Autors Dieter Berretz, der seit 2003 auch das Copyright für Phase 5 hat. Auf dieser Seite findet man auch den FTP-Uploader, der eine sehr gute Ergänzung zu Phase 5 ist und viele Tools, die zur Erstellung einer Website nützlich sein können.
Die 2. Downloadadresse findet sich beim HTML-Portal für Phase 5 von Lars Meyer. Dieses Portal ist auch die 1. Adresse, wenn man Hilfe rund um den Editor braucht. Näheres zu dem HTML-Portal finden sie auf unserer Seite unter den HTML-Links.
Wichtig für das Erstellen einer Webseite sind auch Tutorials für HTML. Hier sollen nur 2 (aber es sind unserer Meinung nach die wichtigsten, wenn man mit Phase 5 arbeitet) vorgestellt werden.
1. Selfhtml von Stefan Münz
Selfhtml ist wohl das umfassendste Nachschlagewerk zu HTML und wird auch von allen Profis benutzt und empfohlen. Diese Hilfe kann in Phase 5 eingebunden werden.
2. Die Phase5-Hilfe von Joachim Poppschötz
Joachim Poppschötz hat zur neuesten Version von Phase 5 eine sehr gute Hilfe geschrieben, auch diese kann in Phase 5 eingebunden werden. Die Anleitung dazu findet man in einem Thread im Forum des HTML-Portals.
Wir werden hier den Download von der Seite des Autors beschreiben.
Klicken Sie den Download-Link zum Editor an.
Es öffnet sich der Speicherdialog. Klicken Sie hier auf die Schaltfläche "Speichern".
Erstellen Sie einen eigenen Ordner für den Download, öffnen Sie ihn und bestätigen Sie dann den Dateinamen mit der Schaltfläche "Speichern".
Ist die Datei vollständig geladen, können Sie die Installation des Editor mit einem Doppelklick auf die Datei im Explorer beginnen.
Den Willkommenbildschirm der Installation bestätigen Sie nach dem Lesen mit "Weiter".
Lesen Sie die Lizenzbestimmungen aufmerksam durch, bevor Sie sie anerkennen und auf "Weiter" klicken.
Standardmäßig wird Phase 5 im Ordner Programme installiert. Wenn das auch Ihre Wahl ist, klicken Sie hier wieder auf "Weiter".
Jetzt beginnt die eigentliche Installation.
Klicken Sie nach der Installation auf die Schaltfläche "Beenden".
Sie können jetzt den Editor über das Icon auf dem Desktop oder über das Startmenü öffnen.
Sie werden hier keine ausführliche Hilfe für Phase 53 finden, die hat sehr viel besser Joachim Poppschötz erstellt. Sie finden hier nur einige Anmerkungen über Einstellungen und es werden einige Besonderheiten erklärt, die Phase 53 zu einem der besten textbasierten Editor machen.
Wer Seiten mit Phase 5 erstellt, sollte sich im HTML-Forum anmelden. Das Forum ist die beste weiterführende Hilfe für alle Fragen rund um HTML. Aber hier gilt, erst einmal Selfhtml, Joachim Poppschötz, die FAQs von Andreas Edler und die Suche im Forum befragen. Wer da dann nicht fündig wird, wendet sich an das Forum direkt.
Phase 5 ist im oberen Teil wie ein herkömmliches Windowsfenster aufgebaut. Sie finden hier die Programm-Titelleiste, die Menüleiste und einige Registerkarten unter denen als Symbole gängige Formatierungen stehen. Der untere Teil sieht dann eher wie der Windows-Explorer aus, auch er hat ja ein geteiltes Fenster. Hier finden sie noch mal eine Titelleiste, eine Symbolleiste, den Dateimanager und den Editor.
Titelleiste:
Menüleiste:
Registerkarten:
Titelleiste:
Symbolleiste:
Dateimanager:
Editor:
Ausführlich beschrieben werden die Symbole für den Editor bei J. Poppschötz im Kapitel "Allgemeine Funktionen des Phase 5 --> Das Editorfenster", die für den Dateimanager im Kapitel "Der Dateimanager --> Die Werkzeugleiste".
Der interne Dateimanager von Phase5 befindet sich links oder rechts (einstellbar über das Menü Ansicht) im unteren Teil des Programms. Er ist mit der Taste F2 ein- oder auszublenden.
Im oberen Teil finden Sie die Ordnerstrukturen, die allerdings manchmal etwas undurchsichtig sind, oft ist der eigentlich geöffnete Ordner nicht zu sehen. Im unteren Teil finden Sie die im geöffneten Ordner befindlichen Dateien, die je nach Einstellung mit einem Doppel- oder einfachen Mausklick im Editor geöffnet werden können.
Im Editor können viele HTML-Seiten gleichzeitig geöffnet sein. Sie können über Register zu den einzelnen Dateien wechseln. Diese befinden sich oberhalb des Textfensters.
Am rechten Rand sind Zeilennummern, die das Arbeiten im HTML-Text erleichtern. Im Text selber sind HTML-Befehle farblich hervorgehoben, auch das erleichtert die Arbeit im Quelltext sehr.
Vieles ist in Phase 5 voreingestellt und muss auch nicht verändert werden, einige Einstellungen sind Geschmackssache, andere wiederum sind früher oder später nötig. Deswegen folgen nun einige Tipps, wie Phase 5 für den eigenen Bedarf eingestellt werden kann.
Ausführlicher geht J. Poppschötz in seiner Hilfe auf die Einstellungen ein (Einstellungen --> Programmeinstellungen und Einstellungen --> Editor).
Sie rufen die Einstellungen über Einstellungen --> Programmeinstellungen in Phase 5 auf.
Im Register Browser können Sie externe Browser in Phase 5 einbinden. Das ist nötig, da Sie Ihre Seiten mit mindestens 2 unterschiedlichen Browsern testen sollten (Internet Explorer und Netscape in den neuesten Versionen). Besser allerdings ist es, die Seiten auch mit älteren Browserversionen (Netscape 4.78) und mit Opera und Mozilla zu testen, da Sie nie wissen können mit welchen Browsern Ihre Seiten besucht werden.
Ganz wichtig ist es, beim Netscape 7.1 die Parameterübergabe im unteren Bereich zu löschen, da sonst beim Aufruf die Dateien nur unvollständig geladen werden.
Außerdem können Sie in dieser Registerkarte festlegen, ob Sie die interne Browservorschau benutzen möchten (Internet Explorer) und ob Seiten mit Frames grundsätzlich extern geöffnet werden sollen.
Sollten Sie vorhaben, auch mit *.php Dateien zu arbeiten, so ist es angebracht hier diese Endung bei der oberen Liste hinzuzufügen.
Im Register Dateiendungen und Hilfe können Sie eine externe HTML-Dokumentation einbinden. Dafür bietet sich das HTML-Kompendium selfhtml von Stefan Münz an, das Sie in der neuesten Version von seiner Seite laden können. Wir haben hier die Downloadadresse der Version im Windows-Hilfe-Format angegeben, bei der auch schon Fehler ausgemerzt wurden, die in der html-Version noch zusätzlich installiert werden müssen.
Klicken Sie im unteren Teil des Registers auf Durchsuchen und fügen Sie den Pfad zum Ordner, in dem Sie selfhtml entpackt haben, oder rufen Sie im Explorer den Ordner auf, kopieren Sie den Pfad aus der Adressleiste und fügen Sie ihn hier ein.
Das Register Optionen enthält die Einstellungen für das Verhalten von Phase 5 während des Starts und für das Schließen von Phase 5.
Außerdem stellen Sie hier noch einiges ein, was den Editor selber betrifft. Ganz wichtig ist hier einzustellen, dass die Rückgängig-Funktion auch nach dem Speichern aktiv bleibt (gespeichert wird eine Datei automatisch, wenn Sie die Browservorschau benutzen. Das gewährleistet, dass Sie nach einer Vorschau noch Änderungen zurücknehmen können.
Ob Sie nach jedem eingefügten Zeilenumbruch eine neue Zeile möchten, ist Geschmackssache, wer aber wie wir, ganze Texte erst nachträglich formatiert, wird das ausschließen.
Im Register Sondereinstellungen können Sie entscheiden, ob Sie die Dateien im Dateimanager mit einem einfachen oder einem Doppelklick öffnen wollen. Sie können auch festlegen, ob Sie bei den Registern der geöffneten Dateien über dem Editorfenster ein Kontextmenü anzeigen wollen oder ob Sie mit der rechten Maustaste die Datei schließen wollen. Hier legen Sie auch die Anzahl der Einträge im Menü Datei --> History fest.
Außerdem passen Sie auf dieser Registerkarte die Farben des Editors Ihren Bedürfnissen an. Die Schaltfläche Default stellt den ursprünglichen Zustand wieder her.
Im Register Arbeitsverzeichnis können Sie ein anderes Arbeitsverzeichnis erzwingen, das kann jedoch dazu führen, dass weder die farbliche Hervorhebung der Syntax noch die Hilfedatei in Phase 5 funktioniert.
Die Editor-Einstellungen rufen Sie ebenfalls über das Menü Einstellungen auf.
Im Register Editor sollten Sie den Zeilenumbruch und die farbliche Syntaxhervorhebung einstellen.
Außerdem sind 8 Spaces (Leerzeichen) pro Tab (Tabulatorsprung) ein wenig zuviel, 4 sind unserer Meinung nach genug.
Im Register Anzeige sollten Sie den Haken beim Anzeigen der Sonderzeichen entfernen. Dieses Anzeigen macht den Quelltext unübersichtlich.
Hier werden wir das Arbeiten mit Phase 5 beipielhaft an einer verschachtelten Tabelle demonstrieren. Im Laufe dieser Schritt für Schrittanleitung wird dann klarer, wie sehr der Editor das Arbeiten mit HTML-Tags erleichtert
.
Obwohl im Forum von Phase 5 immer wieder zu lesen ist, dass Tabellen nicht das richtige Mittel zu Layouten von HTML-Seiten sind, weil der Quelltext zu sehr aufgebläht ist und es inzwischen durch Stylesheets in CSS möglich ist, das weitestgehend zu vermeiden, soll hier ein Tabellenlayout entstehen, wie man es vielfach im Internet vorfindet.
Es ist unserer Meinung nach, die einfachste und schnellste Art ein funktionierendes Layout zu erstellen.
Es wird ja hier in erster Linie darum gehen, das Arbeiten mit Phase 5 zu zeigen.
Es soll eine Tabellenvorlage für eine Webseite mit Menüführung links und einer Menüführung am unteren Ende der Seite erstellt werden. Die beiden Menüstrukturen sollen in eigenständige Tabellen stehen.
Es werden also 3 Tabellen ineinander verschachtelt:
Erstellen Sie zunächst in Phase 53 eine leere Seite. Gehen Sie folgendermaßen vor:
Auf den Kopf des HTML-Dokumentes können wir in diesem Fall verzichten, weil die Seite nur als Vorlage für andere Dokumente dienen soll.
Jetzt fügen Sie die Haupttabelle in das Dokument ein. Die Tabelle soll 3 Spalten und 4 Zeilen haben. Wechseln Sie dazu über die Register zum Register Tabelle.
Der Tabellenassistent von Phase 5 macht es Ihnen leicht Spalten und Zeilen einzufügen. Das erste Eingabefeld ist für die Spalten (3), das zweite dann für die Zeilen(4). Haben Sie beide Felder gefüllt, klicken Sie auf die Schaltfläche "Einfügen".
Als nächstes speichern Sie die Seite als tabellenvorlage.html. Klicken Sie dazu auf den Pfeil neben dem Icon der Diskette. Klicken Sie dann auf "Speichern unter".
Wählen Sie im darauf folgenden Dialogfenster den Ordner, in den Sie speichern möchten und geben Sie dann den Namen der Datei (tabellenvorlage) ein. Bestätigen Sie Ihre Eingaben mit der Schaltfläche "Speichern".
Jetzt soll die Haupttabelle formatiert werden.
Klicken Sie in den table-TAG und drücken Sie dann F10. Es erscheint ein Kontextmenü mit den dazu gehörigen Attributen. Für die Haupttabelle brauchen Sie die Attribute width und border.
Tragen Sie als Wert für width 760 (Das ist die richtige Größe für eine Webseite, wenn man eine Bildschirmauflösung von 800 mal 600 zugrunde legt) und als Wert für Border eine 1 (damit der Tabellenrahmen zu sehen ist) ein.
Füllen Sie jetzt die Zellen der Tabelle und legen Sie die Attribute für die Zellen fest:
| 1. Zeile | <td align="left" width="150">Logo</td> | Hier soll später ein Logo stehen |
| <td align="center">Firmenname</td> | Hier steht später der Firmenname | |
| <td width="150" align="right">Logo</td> | Hier soll später ein Logo oder die Firmenadresse stehen | |
| 2. Zeile | <td width="150">Platz für das Menü</td> | Hier wird das linke Menü eingefügt |
| <td>Inhalt der Seite</td> | Hier steht später der Seiteninhalt | |
| <td width="150">Leerraum für 2. Menü oder Anmerkungen</td> | Leerraum | |
| 3. Zeile | <td width="150"> </td> | Inhalt der Zelle ein erzwungenes Leerzeichen |
| <td>Platz für das Menü</td> | Hier wird das untere Menü eingefügt | |
| <td width="150"> </td> | Inhalt der Zelle ein erzwungenes Leerzeichen | |
| 4. Zeile | <td width="150">Datum der letzten Aktualisierung </td> | Datum |
| <td>Emailadresse</td> | Platz für den Link der Emailadresse | |
| <td> </td> | Inhalt der Zelle ein erzwungenes Leerzeichen |
Damit alle Zellen zu sehen sind, müssen Leerzellen ein erzwungenes Leerzeichen ( ) beinhalten. Sie erzeugen es bei Phase 5 am schnellsten mit der Tastenkombination STRG + Leertaste.
Auch die Zellenbreite (width="150") der äußeren Zellen muss festgelegt werden, damit die Zellen nicht dynamisch größer werden, wenn mehr Text in der Zelle steht.
Der erzeugte Quelltext in Phase 5
So sieht die Haupttabelle im Browser aus.
Als nächstes soll die linke Menütabelle eingefügt werden. Gehen Sie mit dem Cursor in den 1. Zellentag der 2. Zeile.
Damit die Menütabelle am oberen Rand der Zelle steht, geben Sie hier noch das Attribut valign="top" ein.
Markieren Sie "Platz für das Menü" in der Zeile 2 der Haupttabelle. Geben sie in den Tabellenassistenten 1 Spalte und 10 Zeilen ein und fügen Sie die Tabelle dann ein.
Die eingefügte Menütabelle im Quelltext
In den table-TAG müssen zunächst wieder die beiden Attribute border und width eingefügt werden. Die Werte sind für border wieder 1, für das Attribut width 100%, da die Tabelle die ganze Zelle ausfüllen soll.
Die Zellentags sehen alle wie folgt aus:
<td align="center">menübutton</td>
Hier können später auch Menübutton als Grafik eingefügt und verlinkt werden.
So sollte die Tabelle jetzt im Browser aussehen.
Als nächstes wird die untere Menütabelle in die 2. Zelle der 3. Zeile eingefügt.
Markieren Sie auch hier "Platz für das Menü" und fügen Sie dann mit dem Tabellenassistenten eine Tabelle mit 10 Spalten und 1 Zeile ein.
Die untere Menütabelle im Quelltext.
Auch für die untere Menütabelle gilt width=100%" und border="1".
Die Zellen werden ebenfalls alle gleich formatiert:
<td width="46"><font size="-2">menü</font></td>
Da nur 46 Pixel pro Zelle zu Verfügung stehen wird hier die Schrift mit dem Tag <font size="-2"<</font< verkleinert. Die 46 Pixel ergeben sich aus der Rechnung 760 - 150 - 150 = 460 für die mittlere Spalte der Haupttabelle. Da 10 Zellen aufgeteilt werden müssen, ergeben sich 46 Pixel, die im Zellentag mit dem Attribut width eingefügt werden müssen.
Die fertige verschachtelte Tabelle im Browser
Der HTML-Editor Phase5 bietet eine komfortable Projektverwaltung an. Sie können für jedes Ihrer Homepage-Projekt eigene Einstellungen definieren.
Die Vorteile von projektbezogenem Arbeiten liegen auf der Hand.
Für jedes Projekt gibt die gleichen Seiteneinstellungen, ein einheitliches Layout und dadurch dass alle Dateien in einem Hauptverzeichnis mit Unterordnern liegen, fehlen beim Übertragen auf den Server keine Dateien, die zum Aufbau der Seiten gebraucht werden.
Zunächst muss das Projekt angelegt werden. Das geschieht über Projekt --> Neues Projekt.
Es öffnet sich ein Dialogfenster mit mehreren Registern. Im Register Verzeichnisse geben Sie Ihrem Projekt zunächst einmal einen Namen.
Dann legen Sie den Hauptordner und die Unterordner fest.
Es hat sich bewährt, diese zunächst im Windows Explorer anzulegen. Der Hauptordner sollte durch das Projekt identifizierbar sein. Die Unterordner können "css", "grafik", "include" und "vorlagen" heißen. Sie können sie aber auch anders benennen.
Wechseln Sie in das Register Optionen.
Hier können Sie mit einer Ausnahme die voreingestellten Optionen übernehmen. Wichtig ist "Datei speichern bevor der Browser (intern/extern) aufgerufen wird" zu aktivieren.
Im Register Vorgaben können Sie einige Angaben zum Layout machen.
Für diesen ersten Test suchen Sie für den Text die Farbe weiß, für den Hintergrund die Farbe schwarz aus.
Für alle drei Link-Arten nehmen Sie ebenfalls die Farbe weiß.
Im Register Tags können Sie u.a. persönliche Angaben für die Homepage und für die Emailadresse angeben.
Die restlichen Register brauchen wir hier nicht, nähere Angaben zu ihnen finden Sie in der Hilfe von J. Poppschötz.
Bestätigen Sie Ihrer Angaben mit OK.
Um eine Seite im Projekt zu erstellen, klicken Sie auf das Icon für eine neue Seite.
Es erscheint zunächst ein Dialogfenster. Hier können Sie den Titel der Seite und die Schlüsselwörter eintragen. Beides können Sie später auch manuell eintragen.
Klicken Sie dann auf "Erstellen".
Die Seite die jetzt geöffnet ist, enthält schon das Grundgerüst und der Header ist mit Metatags und Titel ausgefüllt.
Speichern Sie diese erste Seite als index.html.
So sieht die erste Seite Ihres Projekts jetzt in Phase 5 aus.
Öffnen Sie jetzt die Datei tabellenvorlage.html, die Sie im vorigen Kapitel erstellt haben. Markieren Sie den gesamten Quelltext und kopieren Sie ihn mit STRG + C.
Wechseln Sie wieder zur Seite index.html und fügen Sie den kopierten Quelltext mit der Tastenkombination STRG + V unterhalb des body-Tags ein.
Mit sog. Includes in Phase 5 kann man einiges beim Erstellen von Webseiten automatisieren. Sie erleichtern das Einfügen von immer wiederkehrenden Passagen auf der Seite.
Includes sind Code-Schnipsel, die sich auf jeder Seite wiederholen und sich selten, aber doch ab und zu für alle Seiten ändern können, z.B. wenn ein neuer Menüpunkt eingefügt werden soll.
Diese Includes werden bei Phase 5 als im Includeordner mit der Endung *.inc gespeichert.
Der größte Vorteil der Includes ist aber wie schon erwähnt, dass bei einer Veränderung, z.B. im Menü, einer Telefonnummer, der Firmenadresse usw. nur die Include-Datei geändert werden muss.
Da keine Verschachtelungen von Includes möglich sind, werden immer nur Teilbereiche gespeichert.
Rufen Sie die index.html aus dem vorigen Kapitel auf und löschen Sie 5 Menüeinträge inschließlich der Tabellenzeilen/spalten aus beiden Menüs und erstezen Sie das Wort Menübutton und Menü durch:
Schauen wir uns die index.html jetzt einmal darauf hin an, welche Teile der Seite auf allen Seiten gleich sein müssen. Und da gibt es einige Teilbereiche:
Auf den ersten Blick bietet sich auch der mittlere Teil der Haupttabelle an. Der jedoch eignet sich nicht, da der Inhalt der Seite ja auf jeder neuen HTML-Seite ein anderer ist. Um sich die Arbeit auch im mittleren Teil zu erleichtern, benutzt man hier den Vorlagenordner.
Um eine Include-Datei aus einem HTML-Dokument heraus zu speichern, markiert man den Teil des HTML-Textes, der als Include gespeichert werden soll, für den oberen Teil der Haupttabelle also:
Danach klicken Sie auf den schwarzen Pfeil neben der Diskette in der Symbolleiste und dann auf den Befehl "Als Include speichern".
Phase 5 wählt automatisch den Include-Ordner eines Projektes und den richtigen Dateityp aus. Geben Sie der Datei einen eindeutigen Namen in unserem Fall haupttabelle_oben und bestätigen Sie Ihre Eingaben mit der Schaltfläche "Speichern".
Um diese neuen Dateien zu testen und das Menü vor dem Abspeichern als Include verlinken zu können, erstellen in Ihrem Projekt jetzt 4 neue Seiten. Klicken Sie dazu einfach wieder auf das Icon Neues HTML Dokument erstellen oder benutzen Sie die Tastenkombination STRG + N. Geben Sie den Seitentitel ein und klicken Sie auf OK. Speichern Sie die so erstellen Seiten als erste_seite.html, zweite_seite.html, dritte_Seite.html und impressum.html.
Verlinken Sie nun beide Menüs. Sie brauchen den Tag nicht zu schreiben. Markieren Sie im Menü zum Beispiel 1. Seite und klicken Sie dann mit der rechten Maustaste im Dateimanager auf die Datei erste_seite.html. Wählen Sie aus dem Kontextmenü Einfügen --> Link <a ref=> und schon umschließt die Verlinkung den Menüeintrag.
Speichern Sie jetzt die HTML-Texte aus der index.html für das linke und untere Menü und für die letzte Tabellenzeile als Include-Dateien (Namen für die Dateien: menue_links, menue_unten und haupttabelle_unten).
Den mittleren Bereich der Tabelle (haupttabelle_mitte) speichern Sie als Vorlagendatei, indem Sie ihn ebenfalls markieren und dann statt "Als Include speichern" auf "In Vorlagendatei speichern" klicken. Dieser Teil wird dann als Textdatei (*.txt) im Vorlagenordner gespeichert.
Öffnen Sie den Include-Ordner im Dateimanager, dann werden im unteren Teil Ihre Include-Dateien angezeigt.
Um die gespeicherten Includes in Seiten einzufügen, öffnen Sie jetzt z.B. die Datei erste_seite.html. Setzen sie den Cursor unter den einleitenden body-Tag. Klicken Sie dann im Menü Einfügen auf Includedatei.
Es öffnet sich der Includeordner, suchen Sie hier die richtige Datei (haupttabelle_oben.inc) und bestätigen Sie Ihre Auswahl mit der Schaltfläche "Öffnen".
Fügen Sie dann das Include für die linke Menütabelle ein.
Als nächstes muss der mittlere Tabellenteil eingefügt werden, der im Vorlagenordner als Textdatei vorliegt. Hierzu gehen Sie wieder über das Menü Einfügen, wählen aber jetzt "Text aus anderer Datei". Wechseln Sie in den Vorlagenordner und fügen Sie die Datei haupttabelle_mitte.txt ein
.Fügen Sie jetzt die restlichen Includes in die Seite ein und kontrollieren Sie dann die Seite im Browser.
Da die anderen erstellten Seiten noch keine Inhalte haben, können Sie jetzt den gesamten Text zwischen den body-Tags kopieren und auf den anderen Seiten einfügen. Vergessen Sie nicht, auch die Datei index.html abzuändern, aus der Sie die Includes gespeichert haben, damit auch diese, wenn nötig, aktualisiert werden kann.
Die vorliegenden Seiten sollen jetzt so verändert werden, dass die Logos als Grafiken eingefügt werden und der Platzhalter "Firmenname" durch Ihren eigenen Namen ersetzt werden soll.
Gäbe es die Includes nicht, müssten Sie das auf jeder Seite tun (bei evtl. 100 oder mehr Seiten ein etwas mühseliges Unterfangen).
Da für das Logo eine Grafik gebraucht wird, sollten Sie eine Grafik, die nicht breiter als 150 Pixel ist, in den Grafikordner des Projektes kopieren.
Öffnen Sie dann im Include-Ordner die Datei haupttabelle_oben.inc. Markieren Sie in der ersten Zelle das Wort Logo. Wechseln Sie in den Grafikordner und klicken Sie mit der rechten Maustaste auf die gewünschte Grafikdatei. Im Kontextmenü wählen Sie dann Einfügen --> Bild <img scr= >. Als alternativen Text geben Sie Logo ein.
Da Phase 5 den Pfad ("../grafik/logo.jpg) zur Datei so einträgt, als wäre die Include-Datei eine HTML-Seite muss der Pfad noch etwas korrigiert werden. Löschen Sie den Pfad einschließlich des ersten Slash, also "grafik/logo.jpg".
Tragen Sie in die zweite Zelle Ihren Namen ein und formatieren Sie in als Überschrift (h1). In die dritte Zelle platzieren Sie wieder den Grafiklink.
Speichern Sie die veränderte Include-Datei und schließen Sie sie.
Noch eine Include-Datei sollten Sie verändern, nämlich die untere Zeile der Haupttabelle.
In Phase 5 haben Sie die Möglichkeit, das aktuelle Datum der letzten Speicherung einzufügen und zwar über Einfügen --> Datum/Zeit --> Automatisch aktualisiertes Datum. Markieren Sie in der Datei haupttabelle_unten.inc "Datum der letzten Aktualisierung" und schreiben Sie dafür Letzte Aktualisierung dafür, danach fügen Sie das Datum ein. Das sollte dann so aussehen:
Außerdem fehlt in dieser Include-Datei noch Ihre Emailadresse. Löschen Sie das Wort "adresse" in der 2. Zelle und markieren Sie dann "Email". Im Menü Einfügen finden Sie den Eintrag "eigene Emailadresse". Wenn Sie darauf klicken, wird automatisch ihre Emailadresse verlinkt, wenn Sie sie bei den Projekteinstellungen eingegeben haben.
Das sollte dann so aussehen:Speichern Sie auch diese Include-Datei und schließen Sie sie. Schließen Sie jetzt auch alle anderen Dateien.
Jetzt können alle Includes aktualisiert werden.
Rufen Sie über Projekt --> Includes aktualisieren… das Dialogfenster für die Aktualisierung auf.
Im Dialogfenster lassen Sie jetzt nach Dateien mit Include suchen.
Markieren Sie die gefundenen Dateien und klicken Sie dann auf "Includes aktualisieren".
Schließen Sie das Dialogfenster nach dem Aktualisieren über die Schaltfläche "Beenden".
Speichern Sie alle Dateien.
Das können Sie bei Phase 5 schnell und einfach, wenn Sie auf den Pfeil neben der Diskette klicken (sie kennen ihn ja schon) und dort dann auf "Alle geänderten Dateien speichern" klicken.
Überprüfen Sie jetzt Ihre Dateien im externen Browser, indem Sie eine der Dateien aufrufen und dann mit Hilfe des Menüs auf die anderen Seite wechseln.
Das war nur ein Beispiel für Includes, der Phantasie zum Einsetzen von Includes sind keine Grenzen gesetzt. Testen Sie es einfach aus.
25381