Einführung in FRONTPAGE 2002

Transkript

1 Einführung in FRONTPAGE 2002 Frontpage ist ein so genannter HTML-Editor, also ein Programm, dass html-seiten erzeugt. Der Vorteil für den Benutzer liegt darin, dass er keine html-kenntnisse haben muss, die Arbeit wird von Frontpage erledigt. Trotzdem ist es von Vorteil, wenn man zumindest ein gewisses Grundverständnis von html mitbringt. 1) Erstellen eines Webs Klicke auf Datei Neu Seite oder Web Oder wähle gleich in der Aufgabenleise (siehe rechts) den Befehl Mit Vorlage beginnen - Webvorlagen Wähle hier Standardweb aus! Gib hier einen Namen für dein Web ein, z. B. Homepage Frontpage Seite 1 von 17 SC 2003

2 In Frontpage erscheint nun folgender Bildschirm: Name und Speicherort deines Webs In den Ordner images solltest du künftig deine Bilder speichern. Noch ist er aber leer. Die Datei index.htm ist die Startseite deines Webs. Manche Provider verlangen als Startseite default.htm. Dann musst du diese Datei einfach umbenennen. Durch Doppelklick auf die Datei index.htm öffnet sich diese und du kannst deine erste Internetseite bearbeiten. Noch ist die Seite allerdings leer. Bevor du in Frontpage Internetseiten gestaltest, ist es aber wichtig, dass du dir ein paar Gedanken über das Aussehen deiner zukünftigen Website machst. Je genauer du dies planst, desto weniger Arbeit hast du dann bei Erstellung deines ersten Internet-Auftritts. Auf der folgenden Seite findest du einige Anregungen, worauf du bei der Planung achten solltest. Lies dir diese Tipps bitte genau durch, du ersparst dir dadurch einige unliebsame Überraschungen. Frontpage Seite 2 von 17 SC 2003

3 2) Planung eines Webs Mache dir schon vor der Erstellung deines Webs Gedanken, wie deine Website aussehen soll: - Design: Welche Farben möchtest du verwenden? Willst du einen farbigen Hintergrund oder ein Hintergrundbild? Wo möchtest du deine Navigationschaltflächen anbringen (oben, seitlich)? Tipp: gerade am Anfang ist man versucht, möglichst viele Effekte auszuprobieren. Weniger ist aber mehr. Gestalte deine Site möglichst übersichtlich und verwende durchgehend durch alle Seiten dasselbe Design. - Schriften: Du kannst zwar jede auf deinem PC installierte Schrift in Frontpage verwenden, doch der Besucher deiner Website sieht deinen Internetauftritt nur genauso, wenn er diese Schrift ebenfalls installiert hat. Verwende daher lieber Schriften wie Arial oder Times New Roman, diese sind auf jedem PC installiert. Wenn du trotzdem eine spezielle Schrift verwenden willst, dann löse das mithilfe von Bildern. - Inhalt: Was möchtest du den Besuchern deiner Website mitteilen? Wie viele Seiten soll deine Website haben? Tipp: Hilfreich ist dabei z. B. ein Mindmap, dass du jederzeit um zusätzliche Seiten erweitern kannst. Ein Bild sagt mehr als tausend Worte Suche dir also passende Bilder für deine Homepage zusammen, aber denke daran, Bilder sind das geistige Eigentum eines anderen, also verwende nur Bilder, von denen du dir absolut sicher bist, dass du damit keine Rechte verletzt. Oder mach sie gleich selbst mit (d)einer Digitalkamera. Frontpage Seite 3 von 17 SC 2003

4 3) Die erste Seite mit Frontpage Sinnvollerweise nimmst du auf der ersten Seite ( index.htm ) alle Grundeinstellungen vor, dann musst du später nur noch diese Seite kopieren und hast bereits ein einheitliches Layout. Lediglich den Inhalt musst du dann der jeweiligen Seite anpassen. a) Zielgruppe: Unsere erste Überlegung gilt der PC-Ausstattung zukünftiger Betrachter. Mache ich meine Homepage auch für jene, die noch einen 15 Monitor besitzen oder setze ich einfach mindestens einen 17 Monitor voraus? 15 -Monitor: Auflösung 800 x 600 Pixel 17 -Monitor: Auflösung 1024 x 768 Pixel Wir entscheiden uns in unserem Beispiel für die Auflösung 800 x 600 Pixel b) Grundlayout: Klicke doppelt auf die Datei index.htm. Wähle in der Symbolleiste das Symbol Tabelle und wähle 1 x 3 Tabelle (siehe Abbildung unten). In deiner Seite erscheint nun eine Tabelle mit einer einzigen Zelle. Das sieht dann etwa so aus: Klicke nun mit der rechten Maustaste in die Tabelle und wähle im Kontext- menü den Befehl Tabelleneigenschaften. Hier legst du nun die Grundein- stellungen fest (siehe nächste Abbildung): Frontpage Seite 4 von 17 SC 2003

5 Die Rahmenstärke setzen wir auf 0. Dadurch wird unsere Tabelle unsichtbar. Wir benötigen sie auch nur als Layouthilfe. Nun klickst du mit der rechten Maustaste in die mittlere der 3 Zellen und wählst Zelleneigenschaften Lege die Breit der mittleren Zelle auf 700 Pixel fest, die Höhe auf 550 Pixel. Frontpage Seite 5 von 17 SC 2003

6 Nun musst du noch die Werte für die erste und die dritte Zelle angeben. Hier wählen wir aber keine Pixelwerte, sondern Prozentwerte. Für beide Zellen sehen die Einstellungen folgendermaßen aus: Zur Erklärung: Mit diesen Einstellungen bewirken wir, dass unsere Homepage auch auf einem 15 Monitor komplett zu sehen ist, auf einem größeren Bildschirm haben wir eben rechts und links etwas mehr Rand. Wenn dir die Ausrichtung am Bildschirm später nicht gefallen sollte, kannst Du durch Änderung der %-Werte in der ersten Spalte das Aussehen deiner Website immer noch nachträglich verändern. Wichtig ist nur, dass die Werte der mittleren Spalte in Pixel angegeben werden. Klicke mit der Maus in die mittlere der drei (unsichtbaren) Zellen. Drücke nun dreimal + Enter. Mit der Cursortaste gehst du nun eine Zeile nach oben und fügst wieder mit dem Symbol Tabelle einfügen eine Tabelle ein. Doch diesmal wähle 5 Spalten: Frontpage Seite 6 von 17 SC 2003

7 Klicke nun mit der Maus irgendwo in den weißen Bereich der unsichtbaren Tabelle. Achte darauf, dass sich der Cursor nicht in der geraden 5 spaltigen Tabelle befindet, sonst funktioniert es nicht. Klicke mit der rechten Maustaste und wähle Zelleneigenschaften. Bei vertikale Ausrichtung wähle oben. Nun sollte die 5spaltige Tabelle nach oben gesprungen sein, falls über der Tabelle und der unsichtbaren Umrandung noch ein Platz sein sollte, musst du diese Zeilen mit entfernen. Klicke nun auf das Symbol Browservorschau. Eventuell wirst du aufgefordert, zuerst deine Seite zu speichern, anschließend öffnet sich dein Webbrowser und du kannst sehen, wie deine Seite im Internet aussehen wird. Noch sieht unsere Seite etwas langweilig aus, doch das werden wir im Anschluss gleich ändern. Wenn du statt dem Symbol auf Datei Browservorschau klickst, kannst du testen, wie deine Seite auf verschiedenen Monitoren bzw. in unterschiedlichen Browsern aussieht: Hier kannst du einen anderen Browser hinzufügen, sofern du einen weiteren installiert hast. Hier kannst du die Bildschirmauflösung festlegen! Frontpage Seite 7 von 17 SC 2003

8 Markiere nun die 5spaltige Tabelle wie in der Abbildung: Klicke nun mit der rechten Maustaste in die markierte Tabelle und wähle Tabelleneigenschaften. Die Rahmenstärke lässt du auf 1, aber die Rahmenfarbe änderst du in weiß. Die Hintergrundfarbe änderst du in dunkelblau! Klicke mit der rechten Maustaste irgendwo in deine Seite und wähle Seiteneigenschaften. Klicke auf den Reiter Hintergrund. Lege hier die Farben für Hyperlinks, besuchte Hyperlinks und aktive Hyperlinks fest. Achte darauf, dass die Farben zusammen passen. Frontpage Seite 8 von 17 SC 2003

9 Nun kannst du die dunkelblaue Tabelle mit Text füllen: Schriftart: Arial Schriftgrad: 12 Pkt Schriftfarbe: weiß Ausrichtung: zentriert Nun brauchen wir noch eine Überschrift und zwei Zeilen unter der Überschrift eine unsichtbare Tabelle mit 3 Spalten und etwa 5 Zeilen. Die erste Seite deiner Website sollte nun etwa so aussehen: Jetzt brauchen wir allerdings noch 3 zusätzliche Seiten, damit wir mit dem verlinken anfangen können. Am leichtesten geht das, in dem wir die bestehende Seite einfach kopieren. Wie das geht, erfährst du im nächsten Abschnitt. Frontpage Seite 9 von 17 SC 2003

10 4) Seiten miteinander verlinken Da unsere erste Seite bereits die wichtigsten Elemente unserer Website enthält, können wir sie einfach als Kopiervorlage verwenden. Klicke zunächst in der Ordnerliste mit der rechten Maustaste auf die Datei index.htm und wähle Eigenschaften. Als Titel gibst du nun z. B. Meine Homepage ein oder Homepage von xxxxx Anschließend klickst du auf OK. Nun klickst du noch einmal in der Ordnerliste die Datei index.htm mit der rechten Maustaste an und wählst den Befehl Kopieren. Anschließend klickst du noch einmal mit der rechten Maustaste irgendwo in den weißen Bereich der Ordnerliste und wählst Einfügen. Es wird nun eine neue Datei mit dem Namen index_kopie(1).htm erzeugt. Klicke diese Datei mit der rechten Maustaste an und wähle Umbenennen. Gib als neuen Namen Steckbrief an. Achtung: eine Frontpage-Seite darf keine Umlaute enthalten und auch keine Sonderzeichen (z. B. ß usw.) Willst du die Seite z. B. übermich nennen, so musst du uebermich eingeben, oder soll die Seite fußball heißen, musst du fussball eingeben. Klicke nun noch einmal mit der rechten Maustaste auf die Datei Steckbrief und gib unter Eigenschaften den Titel Steckbrief ein! Wiederhole die Schritte um weitere Dateien mit den Namen Hobbys und Links zu erstellen. Frontpage Seite 10 von 17 SC 2003

11 Nun müssen wir die einzelnen Seiten miteinander verlinken. Beginne mit der Seite index.htm. Markiere zunächst in deiner Navigationsleise das Wort Home. Da wir uns bereits auf dieser Seite befinden, macht es wenig Sinn, dieser Seite einen Link zuzuweisen, stattdessen wählen wir eine andere Farbe, damit unser Besucher sieht, dass er sich gerade auf dieser Seite befindet. Als nächstes markierst du das Wort Steckbrief und klickst mit der rechten Maustaste. Wähle den Befehl Hyperlink. Wähle die Seite aus, auf die der Link verweisen soll. Dann klicke auf OK. Auf dieselbe Art erstellst du nun einen Link für Hobbys und Links. Bei Kontakt wollen wir nicht auf eine Seite verlinken, sondern auf eine - Adresse. Klicke dazu bei Hyperlinks einfügen auf -Adresse. Gib deine -Adresse ein: Frontpage Seite 11 von 17 SC 2003

12 Speichere die Seite index.htm und teste im Browser, ob die Verlinkungen funktionieren. Nun musst du auch für alle anderen Seiten die Links anlegen. Vergiss nicht, dass die jeweils aktuelle Seite keinen Link bekommt, sondern eine eigene Farbe (siehe Abbildung): Nun kannst du noch auf den einzelnen Seiten die Überschrift ändern, wie ich es in der oberen Abbildung bereits gemacht habe. Wenn du alle Seiten verlinkt hast, teste noch einmal, ob auch wirklich alle Seiten funktionieren. Wechsle nun wieder auf die Seite Steckbrief und fülle die Seite mit Inhalt, zum Beispiel so: Eventuell brauchst du noch zusätzliche Tabellenzeilen. Diese erhältst du, in dem du eine Tabellenzeile markierst und im Menü Tabelle auf Einfügen Zeilen oder Spalten. Frontpage Seite 12 von 17 SC 2003

13 Als letzten Schritt peppen wir nun deinen Steckbrief mit einem Foto von dir auf. Markiere zunächst auf der Seite Steckbrief die 3. Spalte deiner Tabelle, so wie in der Abbildung: Klicke nun im Menü Tabelle auf Zellen verbinden Dadurch werden die neun Zellen aus der oberen Abbildung zu einer einzigen Zelle zusammengefasst. In diese Zelle wollen wir nun ein Bild einfügen. Falls du kein Foto von dir haben solltest, kannst du stattdessen vorübergehend auch irgendein ClipArt einfügen. Das Prinzip ist dasselbe. Klicke im Menü Einfügen auf Grafik Aus Datei und suche nach der Grafik auf deiner Festplatte. Nachdem du auf OK gedrückt hast, wird das Bild eingefügt. Möglicherweise ist das Bild aber noch viel zu groß. Entweder verkleinerst du das Bild, indem du es an den Eckpunkten anfasst und kleiner ziehst, oder du klickst mit der rechten Maustaste in das Bild und wählst Bildeigenschaften. Im Register Erscheinungsbild kannst du die Größe deines Bildes ändern. Achte dabei unbedingt darauf, dass die Option Seitenverhältnisse beibehalten aktiviert ist (siehe Abbildung nächste Seite). Wenn du mit der Größe des Bildes zufrieden bist (überprüfe einfach die Seite in der Browservorschau), klicke unbedingt in der Grafikleiste sie befindet sich am unteren Bildschirmrand auf das Symbol Erneut einlesen. Frontpage Seite 13 von 17 SC 2003

14 Speichere nun die Seite. Es erscheint dadurch folgender Dialog: Achte darauf, dass deine Bilder immer im Ordner images gespeichert werden. Falls dies nicht der Fall ist, musst du nur auf die Schaltfläche Ordner wechseln klicken. Nun musst du nur noch die restlichen Seiten mit Inhalt, Bildern, ClipArts füllen und fertig ist deine erste Homepage! Frontpage Seite 14 von 17 SC 2003

15 5) Dynamische Effekte in Frontpage Bisher haben wir unsere Website statisch gestaltet. Der Vorteil liegt darin, dass jeder Betrachter, unabhängig von seinem Browser, in etwa dasselbe zu sehen bekommt. Wir können unsere Website allerdings auch noch mit einigen dynamischen Effekten ausstatten. a) MouseOver-Effekte: Öffne zunächst die Seite index.htm. Markiere in der Navigationsleiste das Wort Steckbrief. Klicke nun auf das Menü Format Dynamic HTML-Effekte. Wähle bei EIN Mouseover, bei ÜBERNEHMEN Formatierung und im dritten Auswahlfenster Schriftart wählen. Lege fest, was passieren soll, wenn man mit der Maus über den Link fährt. Ich habe mich für eine andere Farbe entschieden! Wiederhole diesen Schritt für alle Hyperlinks und natürlich auf allen Seiten. Betrachte das Ergebnis im Browser. Frontpage Seite 15 von 17 SC 2003

16 b) Einfliegen -Effekte: Öffne zunächst die Seite steckbrief.htm. Markiere das Foto. Klicke nun auf das Menü Format Dynamic HTML-Effekte. Wähle diesmal Laden der Seite Einfliegen von oben Speichere die Seite und betrachte nun die Seite in der Browservorschau. Eine andere Möglichkeit wäre, ein zweites Bild von dir (das aber exakt gleich groß sein muss wie das erste) einzufügen und einen MouseOver-Effekt festzulegen, d. h. wenn man mit der Maus über das Bild fährt, dann wird das zweite Bild angezeigt, verlässt man mit der Maus das Bild, wird wieder das erste Bild angezeigt. Probiere einfach einige Effekte aus. Denk aber immer daran, dass es sich dabei um JavaScript handelt und diese Effekte daher in verschiedenen Browsern unterschiedlich angezeigt werden, oder wenn der Betrachter JavaScript deaktiviert hat gar nicht angezeigt werden. Frontpage Seite 16 von 17 SC 2003

17 6) Web veröffentlichen a) Woher bekomme ich Webspace? Du benötigst einen ISP (Internet Service Provider). Entweder stellt dir dein Internetprovider ohnehin Webspace zur Verfügung (z. B. VOL oder AON) oder du suchst dir im Internet einen Gratisanbieter (z. B. 8ung.at usw.). Bei den Gratisanbietern muss dir allerdings klar sein, dass sich diese Angebote über Werbung finanzieren, die beim Aufrufen deiner Site angezeigt wird. In beiden Fällen erhältst du per Mail oder Post Zugangsdaten, die du benötigst, um deine Site ins Web zu stellen. b) Veröffentlichen Klicke im Menü Datei auf Web veröffentlichen Hier gibst du die Adresse des Webservers an. Die Daten erhältst du von deinem ISP. Du wirst nach einem Benutzernamen und einem Kennwort gefragt. Auch diese Daten bekommst du von deinem ISP. Anschließend erscheint ein Fenster mit allen deinen Dateien. Du musst nur noch auf klicken, fertig! Frontpage Seite 17 von 17 SC 2003