Rahmen (Frames) Der Übersichtlichkeit halber und um die

Transcrição

Regionale Fortbildung „Kurs zum Erstellen von Internetpräsentationen“ Z-01-2-205 vom 16.-19.10.2000
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 www.boerde-gym.wzl.st.schule.de 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>
100 – 100 Pixel, 30% - 30% der Seite, * - der verbleibende Rest (wird vom Browser ermittelt)
by J. Fiebig, Fachschaftsleiter Informatik am Erzgebirgskolleg Breitenbrunn,
037756 1289 , privat:
[email protected]
Seite 1
Beispiel 1 – 3 Spalten
<HTML>
<HEAD>
<TITLE>3 Spalten nebeneinander</TITLE>
</HEAD>
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="feld1.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%,*">
</FRAMESET>
</HTML>
037756 1289 , privat:
[email protected]
Seite 2
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
037756 1289 , privat:
[email protected]
Seite 3
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, www.hausaufgaben.de ... 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
037756 1289 , privat:
[email protected]
Seite 4
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 http://www.nethero.de/ online prüfen lassen!
Schauen Sie sich diese Seite bitte an!
037756 1289 , privat:
[email protected]
Seite 5
Einbindung von Dienstleistungen:
1. Routenplaner
Gehen Sie auf http://route.web.de
Wählen Sie den gewünschten Menüpunkt - Anfahrtsskizze
Geben Sie dann Ihre (die Ihrer Schule) E-Mail-Adresse ein.
037756 1289 , privat:
[email protected]
Seite 6
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.
037756 1289 , privat:
[email protected]
Seite 7
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.
037756 1289 , privat:
[email protected]
Seite 8
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="http://route.web.de/DACH/">
<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="http://img.web.de/web/img/v4/route/napping.gif" 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="50441651">
<INPUT TYPE=HIDDEN NAME="tolon" VALUE="12748356">
</FORM>
Diesen Text können Sie nicht einfach übernehmen, sondern müssen schon die gesamten
Schritte gehen!
037756 1289 , privat:
[email protected]
Seite 9
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 www.guestbook.de!
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!
037756 1289 , privat:
[email protected]
Seite 10
3. Chatroom
Wollen Sie nicht den Freie- Presse- Chat unter www.freiepresse.de/chat benutzen, so können
Sie natürlich auch einen eigenen Chat- Raum auf ihrer Homepage anbieten.
Gehen Sie zu www.spinchat.de
und klicken Sie auf „GET IT“
... und der Rest läuft wie in den anderen beiden Beispielen!
037756 1289 , privat:
[email protected]
Seite 11
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.)
037756 1289 , privat:
[email protected]
Seite 12
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 http://counter4u.de/
oder
http://members.tripod.de/alphacomplex/webmaster/web_promo.html
Also wie auch schon drei Mal erklärt!
037756 1289 , privat:
[email protected]
Seite 13
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.
037756 1289 , privat:
[email protected]
Seite 14
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 E-Mailprogramm
Häufig sitzen Nutzer in einem Internetcafe oder einem Rechnernetz, in dem Sie über kein EMail-Programm verfügen, dann muss die Adresse notiert und ein Freemailer benutzt werden,
einfacher geht das mit einem Formular!
Bsp.:
<center>
<p>Geben Sie bitte Ihre E-Mail Adresse an und tragen Sie unten Ihre Nachricht ein.</center>
<form action=mailto:[email protected]?subject=Abfrage/Auftrag method="POST">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<tr>
<td WIDTH="20%">Ihre E-Mail:</td>
<td WIDTH="80%">
<center><input type="text" size="51" name="email" 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>
037756 1289 , privat:
[email protected]
Seite 15
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 http://www.teamone.de. 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 http://javascript.seite.net.
Schauen Sie sich die Dateien im Laufwerk G: an.
Kopieren Sie sich die Dateien ggf. auf Ihre Diskette.
Lassen Sie sich den Quelltext anzeigen!
037756 1289 , privat:
[email protected]
Seite 16
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“!
037756 1289 , privat:
[email protected]
Seite 17
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
http://www.meome.de/app/de/portal_bookmark.jsp/45823.html
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">
<!-if (document.layers)
{
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
window.onmousedown=rightclick;
window.onmouseup=rightclick;
function rightclick(e)
{
if (e.which == 3)
{
alert('Das ist alles mein !');
return false;
}
else
{
return true;
}
}
}
if (document.all)
{
function click()
{
if (event.button==2)
{
alert('Das ist alles mein !')
}
if (event.button==3)
{
alert('Das ist alles mein !')}
}
document.onmousedown=click
}
}
// -->
</script>
037756 1289 , privat:
[email protected]
Seite 18

Rahmen (Frames) Der Übersichtlichkeit halber und um die

Transcrição

Documentos relacionados

Fahrplan hier

Word Pro - html.lwp - Otto-Brenner

Pressemitteilung

Gästekarte

Matchangler-Shop Fiebig - Versandhandel für Angelgeräte und

Presse Roddy Frame Tour 2015 PDF

Küchenbox / Kitchen cabinet 715150 / 715260 / 728660

Ein verheißungsvoller Jahresauftakt Von H. Schumann Das

Fortbildung für Produktionsfachkräfte der WfbM Lebenshilfe

Termine und Kontakte im Überblick für 2016 zum herunterladen