|
Hier steht der Inhalt ... Info: » Layout:
» Technik:
3-er Frameset. - Ein Frame links (Menü) - Ein Frame rechts (Inhalt) - Ein Frame unten links (Copyright) (d.h. Menü und Copyright bleiben ständig sichtbar.) Unten kann das Copyright als Grafik oder als Text eingetragen werden.
Die Links bilden einen Halbkreis. Das wird durch folgende Technik erreicht: Per sogenanntem transparenten"1-Pixel-gif" oder auch bezeichnet als "mini-gif" oder "space-gif" o.ä. werden die einzelnen Links ausgerichtet. Und zwar, indem man das "1-Pixel-gif" mit "width" einfach auf die gewünschte Länge (d.h. den Abstand zum Link) einstellt. Ein Beispiel: <img src="images/space_trans.gif" width="30" height="1" border="0" alt=""> Diese Grafik, welche im Original nur 1 Pixel breit (width) und 1 Pixel hoch (height) ist, habe ich hier "space_trans.gif" genannt. Der erste Link (Home) hat somit einen Abstand von 10 Pixel, der mittlere Link (Gästebuch) hat einen Abstand von 70 Pixel.
Auf der Startseite ("start.html") befindet sich die Bilderschau, d.h. beim Überfahren aller Links (mouseover) werden auf der rechten Seite Bilder eingeblendet bzw. ausgetauscht. Auch die Titelgrafik (bei mouseover auf "home" und "tritt ein") wird gewechselt. Der Einfachheit halber habe ich ab Link 07 wieder angefangen, die Bilder von vorne zu tauschen. Die Bilder sind natürlich durch deine zu ersetzen. Ratsam ist es - wegen der Ladezeit - nicht zu grosse Grafiken zu benutzen. Die Startseite "start.html" ist die erste Seite, die in den Hauptinhaltsframe lädt. Die am Grafiktausch beteiligten Bilder werden vorgeladen in der Datei "links.html" wie folgt im Head-Bereich dieser Datei: <script language="JavaScript"> <!-- /* Hier alle am Mouseover beteiligten Grafiken vorladen*/ start= new Image(); start.src = "images/homepagename.gif"; start_b= new Image(); start_b.src = "images/homepagename_b.gif"; black= new Image(); black.src = "images/black.gif"; button01= new Image(); button01.src = "images/bild01.gif"; button02= new Image(); button02.src = "images/bild02.gif"; button03= new Image(); button03.src = "images/bild03.gif"; button04= new Image(); button04.src = "images/bild04.gif"; button05= new Image(); button05.src = "images/bild05.gif"; button06= new Image(); button06.src = "images/bild06.gif"; //--> </script> » Hinweis:
Der Titel (Seitenüberschrift), der Copyright-Hinweis und der "Zurück-Link" sind hier mal beispielhaft als Grafiken angeordnet und sind natürlich durch eigene Grafiken zu ersetzen. Oder diese sind auch als normaler Text bzw. Textlinks ohne Grafiken zu verwenden. Einstellungen (Schriftfarbe, Menü, Links etc. in der Datei "format.css"): So sehen z.B.die allgemeinen Links (sofern du welche einfügen willst) zur Zeit aus: (Fahre mit der Maus über den Link): Beispiel-Link |
||