|
Bei uns stimmen Preis und Leistung...
|
Index 5 ••• Information
Navigation
In der Seitenleiste haben wir ein Menü mit 3 Rubriken erstellt und ein Menü mit 2 Rubriken. Die Links dort sind rechtsbündig angeordnet, wohingegen die Rubrik-Überschriften linksbündig platziert sind. Die Anzahl der Menüs, die Anzahl der Rubriken und die Anzahl der Links sind erweiterbar bzw. verkürzbar. Auch das obere Menü ist erweiterbar je nach Link-Anzahl bzw. Länge der Textlinks. Einstellungen zum Menü tätigen Sie in der Datei menue.css
Bereits verlinkt
Konstanter Link nach Klick. Wir haben bereits fünf Seiten für Sie als Beispiel angelegt (Seiten-Menü unter "In General"). Es sind die Links index, index2, index3, index4 und index5. Bitte klicken Sie das genannte Menü und Sie sehen dann auch sehr schön, das der aktuell angewählte Link konstant in anderer Formatierung angezeigt wird, (d.h. der Link wechselt den Platz von rechts nach links und rastet dort ein, mit einem kleinen Pfeil versehen plus einer unterstrichenen Linie, welche sich jetzt von rechts nach links ausblendet), während alle anderen Links den Ausgangsschalter beibehalten. Somit weiß man immer sehr genau, auf welcher Seite man sich gerade befindet.
So funktioniert der konstante Link
Wir haben für alle Menüs diesen konstanten Link bereits in der Datei menue.css angelegt, in dem wir dort eine CSS-Klasse (#aktuell) dafür geschrieben haben.
Sie müssen jeweils nur eine kleine Änderung in der HTML-Datei wie nachstehend beschrieben, vornehmen. Und zwar müssen Sie im HTML-Bereich die CSS-Klasse (id="aktuell") auf das entsprechende Listenelement (li) setzen.
Wir geben Ihnen ein Beispiel (HTML-Datei):
<div id="beispiel_menu">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="london.html" >London</a></li>
<li id="aktuell"><a href="berlin.html" >Berlin</a></li>
<li><a href="rom.html" >Rom</a></li>
<li><a href="madrid.html" >Madrid</a></li>
</ul>
</div>
Hier wurde also in der HTML-Datei der Link namens Berlin konstant gesetzt.
Verlinkung der Fotos
Auch einige der kleinen Fotos haben wir im Beispiel verlinkt. Auf der Seite index.html aus, verlinken die ersten 5 kleinen Fotos in der Seitenleiste unterhalb des Menüs auf die Seiten index.html bis index5.html. Sie werden es bemerken, wenn Sie die genannten Fotos klicken.
Transparenz-Einstellungen
Bei den Felder scheint ja der Hintergrund halbtransparent durch. Die Stärke (Deckkraft) diesbezüglich läßt sich verändern.
Anbei sind verschiedene Transparenz-Grafiken mit unterschiedlichen Transparenz-Stufen, mit denen Sie bei Bedarf epxerimentieren können. Je nachdem ob Sie das Hintergrundfoto wechseln wollen und welche Farben dieses hat. Vielleicht wollen Sie ja auch unser Foto beibehalten und trotzdem die Dichte der Transparenz erhöhen oder erniedrigen.
Die 9 Transparenzgrafiken heißen "weiss_10.png" bis "weiss_90.png", die Grafiken sind von uns so benannnt, damit wir die abgespeicherte Transparenzstufe erkennen können. "weiss_10.png" bedeutet hier, das bei der Farbe Weiss der Hintergrund nur zu 10% durscheint, wobei dieser bei "weiss_90.png" eben zu 90% transparent ist.
Weitere 9 Grafiken in der Farbe Schwarz sind ebenfalls für Sie mit anbei, diese sind mit "schwarz_10.png" bis "schwarz_90.png" benannnt.
Anlegen von Links bzw. HTML-Seiten:
So legen Sie Links bzw. HTML-Seiten an: Die Datei "index.html" (oder eine der anderen HTML-Dateien) ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. Überschreiben Sie unsere Beispiel-Links mit Ihren Links. Erweitern Sie ggfls. die Menüs.
Aufzählungen - Liste
Nachfolgend als Beispiel einige verlinkte Seiten für eine Liste im Text. Hier mit eigenem Aufzählungszeichen. Klicken Sie die Links in der Liste.
Der letzte Link (Suchmaschine) ist ein Beispiel für eine Verlinkung zu einer externen Seite, welche sich vorteilhafterweise in einem neuen Browserfenster öffnet. Hier im Beispiel zur Google-Webseite. Das Öffnen eines neues Browserfensters geschieht durch den "target-Befehl". Somit bleibt Ihre Seite immer im Hintergrund erhalten bzw. innerhalb des anderen Browserfensters leicht anwählbar
Zurück
Beispiel-Verlinkungen
Sie befinden sich auf der Seite index5.html.
Hier geht es zu den Seiten index.html, index2.html, index3.html und index4.html.
|
|
|
