Startseite  >>>  10 Schritte zum Bau der eigenen Homepage  >>> 6. Schritt
 
6. Schritt: Spezielle Link-Optionen
- Der Weg zu einer erfolgreichen Vernetzung -
 
 
Hinweis:

Ein Teil der hier beschriebenen Marken lassen sich nur mit alten Netscape-Versionen erstellen (z.B. Netscape 4.03; vgl. den Hinweis dazu). Wählen Sie als externen Editor für den Netscape-Communicator den Windows-Editor. Falls Sie nicht wissen, wie das geht, dann gehen Sie zu:

Einstellen des externen Editors
 
Links in über- oder untergeordnete Ordner
 
Bei einer großen Homepage ist es aus Übersichtsgründen ratsam, die Dateien in verschiedene Ordner abzulegen. Ich empfehle jedoch, nicht mehr als eine Unterebene anzulegen. Dabei gehen Sie folgendermaßen vor: Sie markieren den Text, auf den Sie den Link legen möchten und klicken mit der rechten Maustaste auf die Markierung. Dann wählen Sie "Verknüpfung erstellen..." und unter "Verknüpfung mit Seitenadresse oder lokaler Datei" tragen Sie eine der folgenden Adressen ein:

 
Der Link aus einer Aktionstaste
 
Wollen Sie vermeiden, dass in der unteren Leiste des Browsers die Zieladresse angegeben wird, dann benötigen Sie einen Link aus einer Aktionstaste. Durch einen Klick auf die grau markierten Tasten gelangen Sie zu der gewählten Seite. Beispiel:
 
 
Der Code für die erste Aktionstaste lautet:
 
<FORM action=Homepage.htm>
<INPUT type="submit" value="10 Schritte zur Homepage" >
</FORM>
 
Mit dem "Form action"-Eröffnungstag wird das Ziel des Links definiert, der "INPUT type"-Tag legt den anzuzeigenden Text fest. Mit Hilfe dieses Codes können Sie auch ein einfaches Quiz für Web-Benutzer erstellen. Bei einer richtigen Antwort legen Sie den Link auf die Seite der nächsten Frage. Bei falschen Antworten erscheint eine Seite mit einem entsprechenden Text (oder einem verneinenden Smiley). Um Aktionstasten - wie im obigen Beispiel - nebeneinander zu legen, müssen Sie zuerst eine dreispaltige Tabelle anlegen (Randbreite = 0 Pixel) und die drei Tags in die Zellen einfügen.
 
Hinweis: Diese Links funktionieren nicht, wenn Sie auf eine index.htm-Datei, bzw. eine Startseite einer Homepage verweisen, da der Form-Befehl ein Fragezeichen im Link hinzufügt.
 
 
Der Link aus einem Textfeld
 
Oft sehen Sie auf einer Homepage aus Platzersparnisgründen ein Textfeld in Kombination mit einer Aktionstaste. Wählen Sie im folgenden Beispiel eine der drei Adressen und betätigen Sie die GO-Taste:
 
 
Durch das Betätigen von "GO" gelangen Sie zur gewählten Seite. Der HTML-Code für diesen speziellen Link wird mit einem "Form"-Tag eröffnet und benutzt einen speziellen Java-Script. Der Tag zur Auswahl eines angegebenen Textes beginnt immer mit dem "Option"-Tag. Der gesamte Code für die obigen Aktionen lautet:

<FORM name="myForm"><SCRIPT language="JavaScript">
function loadPage(list) {location.href = list.options[list.selectedIndex].value}
// -->
</SCRIPT>
<SELECT name="directory" size="1">
<OPTION value="Homepage.htm">10 Schritte zur Homepage</OPTION>
<OPTION value="Homep2.htm">Kleines Internetlexikon</OPTION>
<OPTION value="Homedown.htm">Download von Freeware</OPTION>
</SELECT><INPUT type="button" value="Go" onclick="loadPage(this.form.elements[0])">
 
Die rot markierten URL-Adressen sind die Ziele der jeweiligen (hier absoluten) Links, die grün markierten Texte erscheinen im Textfeld. Alle farbig markierten Teile dieses Codes können Sie frei nach ihren Wünschen ändern. Die orange markierte 1 (size) gibt an, dass nur ein Textfeld im Browser angezeigt wird. Tragen Sie dort z. B. eine 3 ein, dann sind drei Zeilen gleichzeitig sichtbar. Wenn Sie nicht in einem externen Editor schreiben möchten, dann öffnen Sie einfach diese Seite im Composer. Kopieren Sie die erscheinenden, gelben Tags auf Ihre Seiten und ändern Sie die entsprechenden Einträge (mit rechter Maustaste auf den Tag klicken).
 
 
Der Link aus einem vormarkierten Bereich einer Grafik (Imagemap)
 
Beim folgenden jpg-Bild sind zwei Links auf bestimmte Bereiche der Grafik gelegt. Wenn Sie mit der Maus über mein Portrait fahren, erhalten Sie einen Link zu meiner Portrait-Seite. Das Führen des Mauszeigers auf die Schrift "Realschule Mühlheim" (im Bild) führt zum Farbenprojekt :
 

 
 
Der Quell-Code dafür sieht folgendermaßen aus:
 
<MAP name="frmap">
<AREA shape="RECT" COORDS="1,1,80,110" HREF="../Person.htm">
<AREA shape="RECT" COORDS="45,110,320,130" HREF="../Lexikon/FProj5.htm">
</MAP>
<IMG SRC="TSBild.JPG" WIDTH=354 HEIGHT=236 USEMAP="#frmap">
 
Mit dem ersten Tag ("MAP name"="frmap") können Sie den Namen der Grafikmappe angeben (grün markiert). Mit "AREA shape" legen Sie den Bereich auf der Grafik fest, wo der Link liegen soll. Die Zahlenangaben beziehen sich auf die Pixelgröße der gesamten Grafik (Die Beispielgrafik besitzt eine Breite von 354 Pixeln und eine Höhe von 236 Pixeln):

1. Zahl: Beginn des Links vom linken Rand aus (in Pixel)
2. Zahl: Beginn des Links vom oberen Rand aus
3. Zahl: Ende des Links vom linken Rand aus
4. Zahl: Ende des Links vom oberen Rand aus
 
Die rot markierte URL-Adresse gibt das Ziel des Links an. Zum Schluss müssen Sie die Grafikmappe der Grafik zuordnen. Ich empfehle, zuerst die Grafik (im Beispiel "TSBild.jpg") über "Einfügen Grafik" in den Netscape Composer zu holen und dann unter "Grafikeigenschaften" (rechter Mausklick auf die Grafik) und "HTML Spezial" folgenden Befehl einzufügen (wenn ihre Mappe "frmap" heißen soll):

USEMAP="#frmap"
 
Damit entfällt der letzte Tag (IMG SRC...) und Sie können die Mappe im externen Editor (z. B. im Windows-Editor "Notepad.exe") definieren.
 
Auf dem Sharewaremarkt sind Programme erhältlich, die das Erstellen von Imagemaps wesentlich erleichtern. Das Empfehlenswerteste heißt "Map This" (Download bei Schritt 10). Das Programm fügt Imagemaps automatisch in bestehende HTM-Seiten ein, die Zuordnung zu den Grafiken (USEMAP="#Mapname") müssen Sie allerdings nachträglich vornehmen.
 
 
Das Öffnen eines neuen Fensters
 
Sie betätigen einen Link und ein Bild erscheint in einem neuen, bildfüllenden Fenster (Beispiel). Kopieren Sie dazu den folgenden Java-Script in den Head einer Seite:
 
 
<SCRIPT language="JavaScript">
<!--
function Fenster(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</SCRIPT>
 
 
Sie wollen, dass die Datei "TSBild.JPG" in einem neuen, bildfüllenden Fenster erscheint. Erstellen Sie eine Verknüpfung und tragen Sie statt des Pfades (TSBild.JPG) folgenden Befehl ein:

javascript:Fenster('TSBild.JPG')
 
Wollen Sie Zusatzfunktionen für das Fenster definieren (z.B. Laufleisten), dann tragen Sie nur das Zeichen # ein (+ Angabe eines eventuellen Ziels, wo die ursprüngliche Seite hinspringen soll; das Ziel muss aber vorher angelegt werden). Ergänzen Sie dann unter den Verknüpfungseigenschaften des Links den Zusatzcode in "HTML-Spezial":
 
onClick="Fenster('TSbild.JPG','bc','width=370,height=260,resizable=1,left=0,top=0,
screenx=0,screeny=0,resizable=1,channelmode=0,dependent=0,directories=0,
fullscreen=1,location=0,menubar=0,scrollbars=1,status=0,toolbar=0')"
 
Bei dem Code dürfen keine Leerstellen oder Zeilenumbrüche eingefügt werden. Die Datei TSbild.JPG öffnet sich jetzt in einem neuen, definierten Fenster. Mit den Parametern können Sie das Fenster definieren:
 
width=370,height=260 gibt die Pixelgröße des zu öffnenden Fensters an
left=0 gibt die Randbreite in Pixel vom linken Rand an
top=0 gibt die Randbreite in Pixel vom oberen Rand an
scrollbars=0 schaltet die Laufleisten am Rand aus (einschalten: scrollbars=1), usw.
 
Bei den anderen Parametern geben Sie 0 oder 1 ein, um die entsprechenden Funktionen ein- oder auszuschalten. Mit folgendem Code kann das Fenster per Mausklick wieder geschlossen werden:
 
javascript:onClick=window.close()
 
 
Copyright: T. Seilnacht