1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.

Größe: px

Ab Seite anzeigen:

Download "1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner."

Stephanie Scholz
vor 8 Jahren
Abrufe

1 Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen, in dem alle Dateien deines Projekts gesammelt werden. Suche dir einen sinnvollen Ort auf deinem Computer und bezeichne diesen Ordner Eisenbahn. In diesem sollen nun automatisch alle Dateien, die du mit Phase 5 erstellst, hineingelegt werden. Nun startest du Phase 5. Es erscheint das in Abbildung 1.1 dargestellte Fenster. Abbildung 1.1: Hauptfenster des Programms Phase 5 Um ein Projekt anzulegen, klickst du in der obersten Menüleiste auf Projekt und wählst den Punkt Neues Projekt aus. Es erscheint ein Eingabedialog, in den in das Textfeld Projektname den Namen Eisenbahn eingibst.

Nun startest du Phase 5. Es erscheint das in Abbildung 1.

2 Kapitel 1 Grundlagen von Phase 5 Seite 2 Abbildung 1.2: Eingabedialog Neues Projekt Nachdem du auf den Knopf ok gedrückt hast, erscheint das in Abbildung 1.3 dargestellte Dialogfenster Projekteinstellungen. Abbildung 1.3: Eingabedialog Projekteinstellungen Auf der Registerkarte Verzeichnisse suchst sowohl im Textfeld Stammordner für Homepage Dateien als auch im Textfeld Standardverzeichnis für gemeinsame Dateien (Gafiken, etc) den von dir angelegten Ordner Eisenbahn. Nachdem du alles eingestellt hast, klickst du auf den Knopf Übernehmen. Nun hast du dein Projekt eingerichtet und kannst beginnen, eine Homepage zu basteln. 1.2 Erste HTML-Seite Nachdem du jetzt ein Projekt eingerichtet hast, erstellst du eine neue leere Seite, indem du entweder oben links auf den Button mit dem weißen Blatt klickst oder Datei > Neues HTML Dokument wählst. Folgendes Fenster öffnet sich:

3: Eingabedialog Projekteinstellungen Auf der Registerkarte Verzeichnisse suchst sowohl im Textfeld Stammordner für Homepage Dateien als auch im Textfeld Standardverzeichnis für gemeinsame Dateien

3 Kapitel 1 Grundlagen von Phase 5 Seite 3 Abbildung 1.4: Eingabedialog Neues Dokument anlegen Hier gibst du in die oberste Zeile Startseite ein und klickst anschließend auf Erstellen Im großen Hauptfenster siehst du jetzt das HTML-Grundgerüst, welches der Editor von Phase 5 automatisch erstellt. Jetzt muss das Dokument zunächst abgespeichert werden. Das machst du mit "Datei" "Speichern unter..." oder wählst das Diskettensymbol. Du solltest dich jetzt im Ordner Eisenbahn befinden. Dort speicherst du die Seite mit dem Namen index. Die Endung.html vergibt der Editor automatisch. Das Grundgerüst, das der Editor automatisch erstellt hat, sieht folgendermaßen aus: Abbildung 1.5: Grundgerüst einer HTML-Seite

HTML-Grundgerüst, welches der Editor von Phase 5 automatisch erstellt. Jetzt muss das Dokument zunächst abgespeichert werden. Das machst du mit "Datei" "Speichern unter.

4 Kapitel 1 Grundlagen von Phase 5 Seite 4 Dieses Grundgerüst wird drin Informatik-Lehrer dir im Unterricht erklären. Abbildung 1.6 zeigt die erste HTML-Seite, die du nun in Phase 5 erstellen wirst. Sie enthält Schrift in verschiedener Größen, Farbe und Formatierung. Weiterhin sind drei Grafiken eingebettet. Abbildung 1.6: Deine erste HTML-Seite Textformatierung Zwischen die beiden Tags <body> und </body> schreibst du nun die Worte Meine erste Homepage. Abbildung 1.7: Erster HTML-Text Meine erste Homepage Diese 3 Worte kannst du nun bereits in der Browser-Vorschau betrachten. Dazu klickst du auf den Vorschau-Button im Editor oder auf die Taste F9. Um wieder in den Editor zu gelangen, musst du erneut F9 drücken oder das Vorschaufenster

Abbildung 1.6: Deine erste HTML-Seite 1.2.1 Textformatierung Zwischen die beiden Tags <body> und </body> schreibst du nun die Worte Meine erste Homepage. Abbildung 1.

5 Kapitel 1 Grundlagen von Phase 5 Seite 5 schließen. Da du diese 3 Worte noch nicht formatiert hast, werden sie in der Standardschriftart und -größe des Browsers angezeigt. Zuerst veränderst du die Schriftart. Dazu markierst du die 3 Worte mit der Maus Abbildung 1.8: Verändern der Schriftart und klickst oben im Menü auf Schrift, führsr den Zeiger auf Schriftart und wählsr aus dem ausklappenden Menü VERDANA,ARIAL,HELVETICA aus. Abbildung 1.9 zeigt die Veränderungen im HTML-Text. Abbildung 1.9: Die Schriftart wurde verändert In der Browser-Vorschau kannst du nun diese Veränderung betrachten. Im nächsten Schritt wirst du den Text in einer größeren Schrift darstellen. Dazu klickst du mit der rechten Maustaste in eine beliebige Stelle zwischen <font face="verdana,arial,helvetica"> Es öffnet sich ein Kontextmenü. Mit der Maus wählst du Tag <font> ergänzen > size > +2 aus. Der HTML-Text sieht nun folgendermaßen aus:

8: Verändern der Schriftart und klickst oben im Menü auf Schrift, führsr den Zeiger auf Schriftart und wählsr aus dem ausklappenden Menü VERDANA,ARIAL,HELVETICA aus. Abbildung 1.

6 Kapitel 1 Grundlagen von Phase 5 Seite 6 Abbildung 1.10: Die Schriftgröße wurde verändert Bemerkung: Wähle Ansicht > Shortcut-Leiste oder F4, so werden weitere Möglichkeiten zur Formatierung eingeblendet. Nun wirst du die Überschrift Meine erste Homepage in der Mitte zentrieren. Dazu markierst du die Überschrift mitsamt den Font-Tags davor und dahinter. Jetzt klickst du in der Registerkarte Text auf den Button.Nun sollte in der Browser-Vorschau die Überschrift zentriert dargestellt werden. Nun wirst du die nächsten beiden Zeilen schreiben. Setze den Cursor nach den Abschluss-Tag </div> und drücke auf die Return-Taste. Nun schreibe (ohne Farbe und Fett-Schrift) die nächsten beiden Zeilen wie in Abbildung 1.6 dargestellt. Untersuche dein Ergebnis in der Browser-Vorschau. Der neue Text steht direkt unter der Überschrift in einer einzigen Zeile. In HTML ist es nicht möglich, eine Leerzeile durch bloßes Drücken von "Return/Enter" zu erreichen. Damit bekommt man zwar eine Leerzeile in den HTML-Text; diese hat jedoch auf der Seite selbst keine Auswirkungen. Um zunächst einen Zeilenumbruch zu erreichen, klickst du mit der Maus direkt hinter dem Abschluss-Tag </div> und anschließend auf den Button befindet sich auf der Registerkarte Text.Dieser

Nun wirst du die Überschrift Meine erste Homepage in der Mitte zentrieren. Dazu markierst du die Überschrift mitsamt den Font-Tags davor und dahinter.

7 Kapitel 1 Grundlagen von Phase 5 Seite 7 Abbildung 1.11: Einfügen eines Zeilenumbruchs Der Editor fügt ein <br> ein. Versuche nun den Text so anzuordnen, wie die Abbildung 1.6 zeigt. Nun ist zwar deine Überschrift formatiert - der soeben eingefügte Text ist jedoch noch völlig unformatiert. Das liegt daran, dass du bereits nach der Überschrift den "Font-Tag" mit </font> abgeschlossen haben. Jetzt hättest du theoretisch die Möglichkeit, den Abschluss- Tag </font> einfach zu verschieben und hinter unseren neuen Text zu setzen. Dadurch würde der Text dann in der gleichen Schriftart und -größe wie die Überschrift dargestellt werden, da der Browser so lange die Font-Formatierung beibehält, bis sie wieder abgeschlossen wird. Du solltest aber den Text anders als die Überschrift gestalten, also lässt du den Font-Abschluss--Tag dort, wo er ist. Als erstes wird der Text in kleinerer Schrift dargestellt und die Schriftart geändert. Dazu markierst du den gesamten Text von Anfang bis Ende (ohne Überschrift) und klickst im Menü oben den Button -1 an Abbildung 1.12: Ändern der Schriftgröße Das ist eine einfachere Variante, als über das Menü Schrift > Schriftgröße usw. Jetzt verändern du die Schriftart, indem du wieder mit der rechten Maustaste in den Bereich <font size="-1"> klickst. Es öffnet sich ein Kontextmenü. Mit der Maus wählst du Tag <font> ergänzen > face > VERDANA,ARIAL,HELVETICA aus. Nun markierst du das Wort Eisenbahnen und klickst oben im Menü auf Schrift > Schriftfarbe. Es öffnet sich ein Fenster, in dem man sich eine Farbe auswählen kann. Auf eine ähnliche Weise kannst du das Wort Lokomotive auf fett setzen Grafiken einfügen Jetzt lernst du, wie man Grafiken in eine HTML-Seite einbindet. Dazu legst du zuerst ein Unterverzeichnis an, in welches die Grafiken gespeichert werden. Dieses Unterverzeichnis soll schlicht und einfach "bilder" heißen. Mit der

Das liegt daran, dass du bereits nach der Überschrift den "Font-Tag" mit </font> abgeschlossen haben.

8 Kapitel 1 Grundlagen von Phase 5 Seite 8 rechten Maustaste klickst du auf da Projekt Eisenbahn im linken oberen Fenster. Abbildung 1.13: Neues Unterverzeichnis Anschließend wählst du Neuen Ordner erstellen und gibst ihm den Namen bilder. Dieser neue Ordner erscheint nun unter dem Projekt Eisenbahn. Jetzt benötigst du noch ein paar Grafiken. Dazu holst du dir vom Schulserver alle Bilder von den Lokomotiven, Personenwagen und Güterwagen. Bemerkung: Dein Informatik-Lehrer zeigt dir, auf welchem Verzeichnis auf dem Schulserver die entsprechenden Grafiken liegen. Mit Kopieren und Einfügen solltest du diese Grafiken in den Ordner bilder einfügen.

Dieser neue Ordner erscheint nun unter dem Projekt Eisenbahn. Jetzt benötigst du noch ein paar Grafiken.

9 Kapitel 1 Grundlagen von Phase 5 Seite 9 Abbildung 1.14: Die Grafiken befinden sich im Ordner bilder Füge nun noch ein paar Leerzeilen <br>. nach dem letzten Satz in den HTML- Text ein. Mit gedrückter Maustaste kannst du nun eine Grafik nach der anderen aus dem linken Fenster in den Editor hinüberziehen. Um das Bild zu zentrieren, markierst du den alle drei img-tags gleichzeitig (mitsamt den Klammern < > ), Anschließend klickst wieder auf das Zentrieren- Symbol. Herzlichen Glückwunsch, du hast deine erste Webseite erstellt.

Mit gedrückter Maustaste kannst du nun eine Grafik nach der anderen aus dem linken Fenster in den Editor hinüberziehen.

Ähnliche Dokumente

Kapitel 3 Frames Seite 1

Kapitel 3 Frames Seite 1 3 Frames 3.1 Allgemeines Mit Frames teilt man eine HTML-Seite in mehrere Bereiche ein. Eine Seite, die mit Frames aufgeteilt ist, besteht aus mehreren Einzelseiten, die sich den