Iceblue: Navigation

Jetzt überarbeiten wir zusammen das Design mit CSS


- Schritt für Schritt und Zeile für Zeile und machen aus dem Design Iceblue ein individuelles Design, das nicht jeder hat - auch für absolut beginners müßte das in 2 Stunden zu schaffen sein:

Erst erklären wir dem Browser - was wir von ihm wollen das steht bei jeder css - Anweisung am Anfang:

Jetzt fangen wir mit der Navigation an - Dazu brauchen wir Buttons - die gibt es hier:

http://creative-design4you.de.tl/buttons4you.htm


Wir können einen Button oben sichtbar und einen untendrunter verdeckt einbauen.

Was heißt für untendrunter?

Der Hover-Effekt läßt beim darüber fahren mit der Mouse den unteren Button sichtbar werden - dadurch leuchtet der Button, wenn der Hover Button heller ist - so erreicht man einen Effekt wie bei einem Flash-Button. Man kann damit aber auch schöne Bild-Effekte erzielen. Dieser Effekt ist mit Firefox und Opera, sowie Internet Explorer 7 zu sehen.

Auf meiner Homepage kann man den Effekt in der Navigation sehen.

Jetzt suchen wir uns zwei Buttons aus einen der sichtbar ist und zu unserer Seite passt und einen zweiten der beim überfahren mit der Maus sichtbar wird. Die Buttons einfach mit Rechtsklick wählen und dann geht ein Fenster auf




das ist ein Bild vom Internet-Explorer - im Firefox funktioniert es genauso, nur heißt es dort Grafik speichern unter...

in unserem Bild klicken wir auf Bild speichern unter...

und legen es auf unserer Festplatte am besten auf dem Desktop in einem Ordner HP-Neues-Design oder ähnlich ab. Jetzt sind die Buttons auf unserem Rechner - damit sind sie aber im Internet nicht nutzbar

- damit die Welt sie sehen kann - müssen sie erst auf einem Server upgeloaded werden. Wie das geht ist hier unter der Rubrik: Bilder ausführlich beschrieben:

Bilder

Jetzt machen wir den ersten CSS - Code - am besten erst auf unserem Rechner in einem Editor - ich verwende Microsoft Frontpage man kann aber auch Alleycode verwenden, der ist kostenlos.



Nun zum Code:

Für den sichtbaren Button:

Für den Hover Effekt:

Zusammen sieht das dann in der Style- Anweisung so aus:

Diesen Code geben wir jetzt bei --> Design einstellen --> Erweiterte Einstellungen --> bei Text über dem Design ein - vorher müssen wir noch die Einstellungen kontrollieren - das ist aber alles hier genau beschrieben:
Einstellungen


Jetzt gehen wir auf unsere Seite und schauen uns das Werk an - wenn wir alles richtig gemacht haben - dann haben wir jetzt eine tolle Navigationsleiste! Wenn nicht - cool bleiben und alles Schritt für Schritt noch mal kontrollieren. So muss es jetzt nach der Bearbeitung aussehen:



geht doch - so werden wir jetzt jedes einzelne Teil des vorhandenen Designs verändern.
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM