Regionale Fortbildung Kurs zum Erstellen von Internetpräsentationen Z vom

Transkript

1 Rahmen (Frames) Der Übersichtlichkeit halber und um die Navigation auf den Seiten zu vereinfachen, arbeitet man mit Rahmen, deren Inhalt fest bzw. veränderlich ist. Im angegebenen Beispiel wäre der Rahmen oben links (Inhalt) und ganz unten (Impressum) fest. Das Inhaltsverzeichnis (links) ist zu lang, um mit der Überschrift in einem Rahmen angezeigt zu werden, deshalb steht es mit dem Scrollbalken in einem eigenen Rahmen. In dem großen Fenster rechts werden dann die verschiedenen Inhalte angezeigt. Sie können sich das Beispiel unter anschauen. Der Editor vom Netscape Communicator kann keine Frames gestalten. Dies muss von Hand geschehen. Man muss ein Frame-Set anlegen: z.b.: <FRAMESET ROWS= 20%,30%,50% > </FRAMESET> würde drei Rahmen erzeugen, die als Spalten 20%, 30% bzw. 50% der Seite einnehmen. Da natürlich auch etwas angezeigt werden soll, müssen für den Rahmeninhalt HTML-Seiten angegeben werden. Sollen Zeilen erzeugt werden, so lautet der Befehl: <FRAMESET COLS= 100,30%,* > </FRAMESET> Pixel, 30% - 30% der Seite, * - der verbleibende Rest (wird vom Browser ermittelt) by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 1

2 Beispiel 1 3 Spalten <HTML> <HEAD> <TITLE>3 Spalten nebeneinander</title> </HEAD> <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="feld1.html"> <FRAME SRC="feld2.html"> <FRAME SRC="feld3.html"> </FRAMESET> </HTML> sieht so aus: für drei Zeilen würde man das Frame- Set wie folgt abändern: <HTML> <HEAD> <TITLE>3 Rahmen untereinander</title> </HEAD> <FRAMESET ROWS="100,30%,*"> <FRAME SRC="feld1.html"> <FRAME SRC="feld2.html"> <FRAME SRC="feld3.html"> </FRAMESET> </HTML> by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 2

3 was wie folgt aussieht: Wir wollen nun zwei Frame- Sets schachteln, so dass oben eine Titelzeile bleibt und darunter zwei Spalten entstehen. Also müssen wir zuerst die beiden Zeilen festlegen, den Inhalt der ersten Zeile und als Inhalt der zweiten Zeile wiederum ein Frame Set von zwei Spalten sowie deren Inhalt: <HTML> <HEAD> <TITLE>Titel und zwei Spalten</TITLE> </HEAD> <FRAMESET ROWS="80,90%"> ** <FRAME SRC="feld1.html" NAME="Titel"> * <FRAMESET COLS="120,800"> * <FRAME SRC="feld2.html" NAME="Inhalt"> < <FRAME SRC="feld3.html" NAME="Seite"> < </FRAMESET> * </FRAMESET> ** </HTML> ** Blau das Frame- Set für die beiden Zeilen. * Rot der Inhalt dieses Frame- Sets einmal die Seite feld1.html und das zweite Frame- Set < Schwarz der Inhalt des zweiten Frame- Sets by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 3

4 Aufgabe: Erstellen Sie eine Inhaltsübersicht der Fotos in H:\Bilder\Photos! Erstellen Sie dazu eine Startseite index.html, die ein Frame- Set der obigen Form enthält. Erstellen Sie die Seiten titel.html und inhalt.html. Titel.html soll eine Überschrift ihrer Wahl zum Thema enthalten und in inhalt.html sollen alles Bilder des Verzeichnisses aufgeführt werden. Diese hinterlegen Sie dann mit einem Link auf das jeweilige Bild im Verzeichnis H:\Bilder\Photos. Denken Sie daran, dass auch zu Beginn, wenn noch kein Foto gewählt wurde, irgendwas angezeigt werden sollte! Damit nun das Bild auch dort (und nicht im Inhaltsverzeichnisrahmen) angezeigt wird, müssen Sie den Link noch ergänzen! Statt <A HREF="file:///H /bilder/photos/apples.jpg"> &Aumlpfel</A> müssen Sie <A HREF="file:///H /bilder/photos/apples.jpg" TARGET="Seite">&Aumlpfel</A> wählen, denn die Äpfel sollen ja im Rahmen mit dem Namen Seite angezeigt werden! Weitere Feinheiten: Im TAG <FRAME SRC=... können noch weitere Einstellungen getroffen werden! z.b.: <FRAME SCR= leer.html NAME= Inhalt Name des Frames BORDER=8 Breite des Rahmens (0 = keine Umrahmung) BORDERCOLOR= blue Farbe des Rahmens FRAMESPACING=10 Platz um den Rahmen herum in Pixeln MARGINWIDTH=20 linker und rechter Randabstand des Frames MARGINHEIGHT=20 oberer und unterer Randabstand des Frames NORESIZE Ränder können im Browser nicht verschoben werden SCROLLING=YES die Bildlaufleiste wird immer angezeigt (NO, AUTO) > Erstellen Sie nun die Startseite Ihrer zukünftigen Schulhomepage!... und dazu ein Inhaltsverzeichnis, einige Inhalte und... Fremde Inhalte Sollten Sie Links zu fremden Webseiten auf Ihrer Homepage unterbringen (Bildungsserver, Angebote von Schulbuchverlagen, etc.), so sollten Sie diese NICHT innerhalb eines Frames Ihrer Seite darstellen sondern als neues Browserfenster! Dazu dient im Link der Zusatz : TARGET=_new bzw. TARGET=_blank by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 4

5 Browser, die keine Frames darstellen können Ältere Browser oder textbasierende Browser können keine Frame- Sets darstellen. Deshalb ist es günstig, auf die Verwendung von Frames hinzuweisen. a) durch ein Startseite ohne Frames, auf der man ein Frameversion und eine Frame- lose Version der Homepage auswählen kann oder b) durch einen Hinweis, der bei solchen Browsern angezeigt wird: Bsp.: <HTML> <HEAD> <TITLE>Titel und zwei Spalten</TITLE> </HEAD> <FRAMESET ROWS="80,90%"> <FRAME SRC="feld1.html" NAME="Titel"> <FRAMESET COLS="120,800"> <FRAME SRC="feld2.html" NAME="Inhalt"> <FRAME SRC="feld3.html" NAME="Seite"> </FRAMESET> <NOFRAMES> <BODY> Dieses Dokument kann nur mit einen Frame- fähigen Browser angezeigt werden. </BODY> <NOFRAMES> </FRAMESET> </HTML> Tests von Webseiten! Die fertigen Webseiten dürfen keine Links enthalten, die auf lokale Dokumente (File://...) verweisen. Die Groß- und Kleinschreibung wird unter Linux unterschieden, so dass alle Datei- und Verzeichnisnamen generell klein geschrieben werden sollten! Kopieren Sie Ihre Webseite nach H:\www-pub\ Nun können Sie sie im Netscape unter www/~fbxx betrachten (xx Ihre Rechnernummer) Schon veröffentlichte Seiten können Sie unter online prüfen lassen! Schauen Sie sich diese Seite bitte an! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 5

6 Einbindung von Dienstleistungen: 1. Routenplaner Gehen Sie auf Wählen Sie den gewünschten Menüpunkt - Anfahrtsskizze Geben Sie dann Ihre (die Ihrer Schule) -Adresse ein. by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 6

7 Sollten Sie straßengenau auswählen, müssen Sie Straße und Ort eingeben, leider kennt der Routenplaner nicht alle Strassen, wie Sie gleich sehen werden. Er findet Ihren Ort, sollte es mehrere gleichnamige geben, so erscheint das Ausklappsymbol neben dem Ort. Vor der Klammer für das Land steht das KfZ-Kennzeichen. by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 7

8 Sie können nun den richtigen Ort auswählen, danach wählen Sie die Straße aus. Leider kennt der Routenplaner in meinem Beispiel die Schachtsstraße nicht. Dann sollte man die nächstgelegene wählen, bzw. von vorn beginnen und den Menüpunkt von Ort zu Ort auswählen. by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 8

9 Sie erhalten eine Vorschau und den Text, den Sie in Ihre Homepage einbauen müssen. Diesen markieren Sie mit der Maus (bis zum Schluss, es geht unten noch weiter) und kopieren ihn dann mit <STRG><C> in den Editor oder in eine Textverarbeitung zum Zwischenspeichern. In meinem Fall würde er so aussehen: <FORM TARGET="_blank" ACTION=" <TABLE BORDER=1 CELLPADDING=4 CELLSPACING=0> <TR BGCOLOR="#CC510A"> <TD ALIGN=LEFT><FONT FACE=ARIAL SIZE=-1 COLOR="#FFFFFF"> <B>WEB.DE Routenplanung:</B><BR> Ihr Weg nach <B>Breitenbrunn Asz (D), Preißhausstraße</B> </FONT></TD> </TR> <TR> <TD ALIGN=CENTER> <TABLE BORDER=0 CELLPADDING=2 CELLSPACING=1 WIDTH=100%> <TR> <TD ALIGN=LEFT BGCOLOR="#FFD8BF"> <FONT FACE=ARIAL SIZE=-2> <B>Ort:</B> </FONT> </TD> <TD BGCOLOR="#EFEFEF"> <FONT FACE=ARIAL SIZE=-1 > <INPUT TYPE="text" NAME="fromcity" VALUE=""> </FONT> </TD> <TD ALIGN=CENTER ROWSPAN=2 VALIGN=MIDDLE BGCOLOR="#EFEFEF"> <INPUT TYPE=IMAGE SRC=" WIDTH=144 HEIGHT=40 BORDER=0 ALT="Routenplanung starten"> </TD> </TR><TR> <TD ALIGN=LEFT BGCOLOR="#FFD8BF"> <FONT FACE=ARIAL SIZE=-2> <B>Straße:</B> </FONT> </TD> <TD BGCOLOR="#EFEFEF"> <FONT FACE=ARIAL SIZE=-1 > <INPUT TYPE="text" NAME="fromstreet" VALUE=""> </FONT> </TD> </TR> </TABLE> </TD> </TR> </TABLE> <INPUT TYPE=HIDDEN NAME="tocity" VALUE="Breitenbrunn Asz (D)"> <INPUT TYPE=HIDDEN NAME="tostreet" VALUE="Preißhausstraße"> <INPUT TYPE=HIDDEN NAME="tolat" VALUE=" "> <INPUT TYPE=HIDDEN NAME="tolon" VALUE=" "> </FORM> Diesen Text können Sie nicht einfach übernehmen, sondern müssen schon die gesamten Schritte gehen! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 9

10 2. Gästebuch Viele Internetseiten enthalten ein Gästebuch, damit ein Besucher der Seite seine Meinung hinterlassen kann. Allerdings können die Nutzer auch viel Unsinn hineinschreiben! Gehen Sie zu und klicken Sie auf Get your own free guestbook now! Nun müssen Sie sich registrieren und ein Passwort einrichten... Danach erhalten Sie wiederum einen Quelltext, den Sie in Ihre Seite einbinden können. Englischkenntnisse sind beim Surfen und bei der Gestaltung von Internetseiten nie verkehrt! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 10

11 3. Chatroom Wollen Sie nicht den Freie- Presse- Chat unter benutzen, so können Sie natürlich auch einen eigenen Chat- Raum auf ihrer Homepage anbieten. Gehen Sie zu und klicken Sie auf GET IT... und der Rest läuft wie in den anderen beiden Beispielen! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 11

12 Sie wählen das Layout wählen die Einstellungen, dabei beachten Sie aber unbedingt die Erklärungen in dem grünen Feld! Vor allem die Systemvoraussetzungen (Javafähiger Browser, Sicherheitseinstellungen beim Provider und im lokalen Netz etc.) by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 12

13 4. Counter Auf vielen Startseiten befinden sich Zähler, die die Anzahl der Zugriffe auf die Seite registrieren. Auch hier gibt es einige Anbieter. Allerdings ist es deprimierend, wenn die Zahl sehr niedrig bleibt. Andererseits lassen viele Webmaster ihre Schüler die Seite immer als erstes aufrufen und immer wieder neu laden, so dass die Aussagekraft dieser Zähler nicht überwertet werden darf. Allerdings zählt das Schulweb auch die Zugriffe mit und zeigt eine dementsprechende Rangfolge an. Gehen Sie zu oder Also wie auch schon drei Mal erklärt! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 13

14 Es gibt zwei verschiedene Typen zur Auswahl, mit mehr oder weniger Werbung. Die Anmeldung ging nur im IE im Netscape kam ein Java-Script-Error: Wieder werden die Angaben abgefragt. by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 14

15 So sehen die Counter prinzipiell aus. Man kann also auch den mit dem Werbebild (links) nehmen! Das Aussehen der Zahlen kann variiert werden, es stehen an die 100 verschiedene Möglichkeiten zur Verfügung. Mail ohne programm Häufig sitzen Nutzer in einem Internetcafe oder einem Rechnernetz, in dem Sie über kein E- Mail-Programm verfügen, dann muss die Adresse notiert und ein Fre er benutzt werden, einfacher geht das mit einem Formular! Bsp.: <center> <p>geben Sie bitte Ihre Adresse an und tragen Sie unten Ihre Nachricht ein.</center> <form method="post"> <center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 > <tr> <td WIDTH="20%">Ihre </td> <td WIDTH="80%"> <center><input type="text" size="51" name=" " value=""></center> </td></tr> <tr> <td WIDTH="20%">Ihre Nachricht:</td> <td WIDTH="80%"><textarea name="kommentar" rows="5" cols="50"></textarea> </td></tr> <tr> <td WIDTH="20%"> </td> <td COLSPAN="2"> <center><input type="submit" name="abschicken" value="abschicken"></center> </td></tr> </table> </center> </form> by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 15

16 Das Ergebnis sieht dann ungefähr so aus: Leider sind die Ergebnisse im IE, Netscape, Opera, StarOffice, Mosaik,... unterschiedlich, so dass Sie sich Ihre Seiten immer in mehreren Browsern und mit mehreren Bildschirmauflösungen anschauen sollten! Java-Script Informationen und Beispiele finden Sie unter Dort gibt es neben SELFHTML auch SELFJAVAS mit vielen Beispielen. Sehr gut ist auch Kakao und Kekse: Kakao & Kekse finden Sie im World Wide Web unter Schauen Sie sich die Dateien im Laufwerk G: an. Kopieren Sie sich die Dateien ggf. auf Ihre Diskette. Lassen Sie sich den Quelltext anzeigen! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 16

17 Sie können also auch Programmierkurse in JavaScript statt Pascal oder VisualBasic durchführen. Allerdings benötigt man dann noch einen Debugger! und eine Fehlermeldung sähe dann so aus: Nicht sehr schülerfreundlich! by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: Seite 17

18 Sie finden den Netscape JavaScript Debugger 1.1 auf der Netscape-Homepage unter developer er muss online installiert werden und ist nur englisch verfügbar! Für den IE gibt es ebenfalls Programme, die ich aber noch nicht ausprobiert habe! Weitere Hinweise finden Sie auf Neben diesen Spielereien kann man auch das Menü, dass beim rechten Mausklick erscheint, abschalten, um Rahmen im neuen Fenster öffnen oder Quelltext anzeigen zu verhindern! <script LANGUAGE="JavaScript" TYPE="text/javascript">  </script> } } if (event.button==3) { alert('das ist alles mein!')} } document.onmousedown=click by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn, , privat: JFiebig@frennet.de Seite 18