Erzherzog Johann Jahr 2009

Transkript

1 Erzherzog Johann Jahr 2009 Der Erzherzog Johann Tag an der FH JOANNEUM in Kapfenberg Was wird zur Erstellung einer Webseite benötigt? Um eine Webseite zu erstellen, sind die folgenden Dinge nötig: 1. Ein Programm, mit dem die Webseite erstellt werden kann 2. Dateien im Format "HTML" für die einzelnen Inhalte 3. Eine Datei namens index.html oder index.htm 4. Eine Ordnerstruktur mit Dateien und Bilder, die den Inhalt der Webseite darstellen Ein Programm zur Erstellung der Webseite Es gibt viele Programme, mit denen eine Webseite erstellt werden kann. Viele davon muss man kaufen, manche kann man jedoch auch gratis aus dem Internet herunterladen. Eines dieser Gratis-Programme nennt sich KompoZer. Mit diesem werdet ihr in der heutigen Stunde arbeiten. Wenn ihr zu Hause auch damit arbeiten wollt, könnt ihr es von der URL herunterladen. Eine Datei namens index.html oder index.htm Jede Webseite muss eine Datei namens index.html oder index.htm haben. Diese Datei stellt die Startseite eurer Webseite dar und wird automatisch gestartet, wenn ihr eure Webseite im Internet Browser öffnet. Eine Ordnerstruktur für die Inhalte Die Ordnerstruktur eurer Webseite sollte zumindest einen Ordner für die Bilder haben. Er kann auch einen oder mehrere andere Ordner für die weiteren Seiten eurer Webseite beinhalten. In der folgenden Grafik seht ihr eine solche Struktur sowie die bereits erwähnte Datei index.html. Der Ordner "img" ist der Ordner für die Bilder; im Ordner "klassen" werden die weiteren Seiten abgelegt. Diese werden miteinander "verlinkt"

2 Für den heutigen Workshop haben wir so eine Struktur bereits für euch erstellt. Das heißt, ihr müsst nur noch die bereits bestehenden Seiten mit Inhalt befüllen und könnt diese gestaltsen. Wie erstelle ich eine Website? Nachdem ihr nun erfahren habt, was zur Erstellung einer Webseite alles nötig ist, haben wir euch im Folgenden zusammengefasst, wie ihr das Programm KompoZer bedienen könnt, um eure Webseite zu gestalten. Setzt euch gemeinsam an einen Computer. Dort findet ihr am Desktop 4 Symbole (im folgenden Bild blau markiert): - 2 -

3 Macht einen Doppelklick auf das Symbol. Es öffnet sich das Programm "KompoZer" (im folgenden Bild ist dargestellt, wie dieses Programm in etwa aussieht). Wie bereits erwähnt, haben wir bereits eine fertige Struktur für eure Webseite erstellt. Ihr müsst nun nur noch die entsprechende Datei öffnen und könnt diese dann anschließend bearbeiten. Welche Datei zu öffnen ist, entnehmt bitte eurem Themenzettel. Im Folgenden werden die Schritte zum Öffnen einer Datei erklärt. Datei öffnen Zum öffnen dieser fertigen Dateien klickt bitte auf das Symbol. Im folgenden Dialog könnt ihr angeben, welche Datei ihr öffnen wollt. Klickt dazu auf das Feld "Look in" und wählt das Laufwerk "Y" aus (ersichtlich in der nächsten Abbildung)

4 Doppelklickt anschließend den Ordner "klassen" oder markiert diesen und wählt "Open": Doppelklickt auf den Namen eurer Schule oder markiert diesen und wählt "Open": - 4 -

5 Wählt nun die Datei, die zu dem von euch ausgewählten Thema passt (der Name der Datei ist auch auf dem ausgeteilten Themenzettel aufgeschrieben), aus, und klickt auf "Open": Ihr habt nun erfolgreich die Seite, die für euer Thema erstellt wurde, geöffnet. Ihr könnt diese nun mit Inhalt befüllen und entsprechend euren Wünschen gestalten. Webseite gestalten Text schreiben Um eigenen Text zu schreiben, könnt ihr einfach den Mauscursor in dem im folgenden Bild rot markierten Bereich platzieren und den gewünschten Text tippen: - 5 -

6 Text von einer Webseite kopieren und einfügen Um Text von einer Webseite, die ihr angesurft habt, zu kopieren und auf eurer Webseite einzufügen, markiert den gewünschten Text und klickt anschließend mit der rechten Maustaste darauf. Wählt "Copy" aus: Wechselt nun wieder zurück zu KompoZer. Klickt mit der rechten Maustaste an der Stelle, an der der Text eingefügt werden soll, und wählt "Einfügen" aus: Bilder von einer Webseite speichern und einfügen Um ein Bild von einer Webseite in eure Webseite zu übernehmen, klickt mit der rechten Maustaste darauf und wählt "Save Image as": - 6 -

7 Es öffnet sich ein eigenes Fenster, in dem ihr auswählen könnt, wo das Bild abgespeichert werden soll. Wählt dazu das Laufwerk "Y" und wählt anschließend den Ordner "klassen" aus. Wählt den Ordner mit dem Namen eurer Klasse, und anschließend den Ordner "img". Nun könnt ihr auf "Save" klicken. Um das gespeicherte Bild in eurer Webseite einzubauen, wechselt wieder zu KompoZer und klickt auf das Symbol Es öffnet sich ein Fenster; klickt in diesem auf "Durchsuchen" (im folgenden Bild rot markiert)

8 Dadurch öffnet sich ein weiteres Fenster, in dem ihr das Bild auswählen könnt. Doppelklickt dazu auf den Ordner "img" (oder markiert diesen und wählt "Open"): Öffnet nun euer Bild, indem ihr es markiert und auf "Open" klickt: Dieses Fenster schließt sich nun, und ihr gelangt zurück zum ursprünglichen. Hier müsst ihr nun noch etwas im Feld "Alternativtext" eintragen: - 8 -

9 Klickt abschließend auf "OK". Das Bild wurde nun in eure Seite eingefügt: Überschriften einfügen Um einen Text als Überschrift zu definieren, markiert den gewünschten Text. Klickt anschließend auf den Pfeil in dem Bereich, der im folgenden Bild rot markiert ist, und wählt die gewünschte Überschrift aus. "Überschrift 1" ist die größte verfügbare Überschrift, "Überschrift 6" hingegen die kleinste

10 Textfarbe ändern Um die Farbe eines Textes zu ändern, markiert den gewünschten Text. Klickt anschließend auf das im folgenden Bild rot markierte Symbol, und wählt die gewünschte Textfarbe aus. Dieses Symbol ändert sich nun entsprechend der Farbe, die ihr ausgewählt habt! Hintergrundfarbe ändern Um die Hintergrundfarbe der Seite zu ändern, markiert einen beliebigen Text. Klickt anschließend auf das im folgenden Bild rot markierte Symbol, und wählt die gewünschte Hintergrundfarbe aus. Dieses Symbol ändert sich nun entsprechend der Farbe, die ihr ausgewählt habt!

11 Text-Schriftart ändern Um die Schriftart eines Textes zu ändern, markiert den gewünschten Text. Klickt anschließend auf den Pfeil in dem Bereich, der im folgenden Bild rot markiert ist, und wählt die gewünschte Schriftart aus. Textgröße ändern Um die Größe eines Textes zu verändern (Kleiner und Größer), markiert diesen Text und klickt auf eines der beiden rot markierten Symbole in der nächsten Abbildung. Fett, Kursiv, Unterstrichen Um einen bestimmten Text fett, kursiv und/oder unterstrichen darzustellen, markiert diesen Text und klickt auf die gewünschten Symbole: B für Fett, I für Kursiv, und U für Unterstrichen (diese sind in der nächsten Abbildung rot markiert). Es ist auch möglich, einen Text fett UND unterstrichen darzustellen; dazu muss einfach nur B und U angeklickt werden

12 Tabellen einfügen Tabellen sind nützlich, um zb Text und Bilder nebeinander darstellen zu können. Um eine Tabelle einzufügen, klickt auf das Symbol Es öffnet sich ein Fenster, in dem ihr festlegen könnt, wie viele Spalten und wie viele Zeilen die Tabelle haben soll: Die Anzahl der Zeilen kann im Nachhinein leicht geändert werden, indem ihr die Maus einfach in die letzte Zelle (= letzte Spalte/letzte Reihe) platziert und auf der Tastatur den Knopf "Tabulator" drückt ( ) Es wurde nun eine Tabelle in eure Seite eingefügt, in deren Zeilen und Spalten ihr nun auch Text schreiben und Bilder einfügen könnt: Seiten miteinander verlinken Im heutigen Workshop müsst ihr zwar keine Seiten miteinander verlinken, da dies bereits in der Vorbereitung geschehen ist. Um zwei Seiten miteinander zu verlinken, klickt auf das Symbol. Es öffnet sich ein eigenes Fenster

13 Wenn ihr einen Link zu einer anderen Seite legen wollt, z.b. zu dann tippt diesen Link direkt im Feld "Link-Adresse" ein (dieser Bereich ist in der folgenden Grafik blau markiert). Wenn ihr zwei eurer Seiten miteinander verknüpfen wollt, klickt dort auf das Symbol, das in der folgenden Grafik rot markiert ist: Es öffnet sich ein weiteres Fenster, in dem ihr einen Doppelklick auf die gewünschte Datei machen könnt, oder diese Auswählen und auf "Open" klicken könnt. Danach schließt sich das Fenster wieder. Nun müsst ihr noch einen Text eingeben, der als Link angezeigt werden soll. Diesen könnt ihr im rot markierten Bereich im nächsten Bild angeben

14 Der Text, den ihr eingegeben habt, ist nun blau und unterstrichen. Dies kennzeichnet, dass es ein Link ist: