Eigene HP 5 - Navi
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:
1. Standard:
http://success4you.de.tl/standardbuttons.htm
2. Im Vista-Style:
http://success4you.de.tl/Navivorlagen.htm
3. Mit Animation - die eignen sich am besten für untendrunter -
http://success4you.de.tl/anibutton.htm
4. Vista-Buttons und viele andere
http://service-von-andybabe27.de.tl/Iceblue-Buttons.htm
5. Buttons ohne Ende
http://coolplace.de.tl/buttonice.htm
Was heißt für untendrunter?
Der Hover-Effekt läßt beim darüberfahren mit der Mouse den unteren Button sichtbar werden - dadurch leuchtet der button, weil der Button navdown heller ist - so erreicht man einen Effekt wie bei einem Flash-Button. Dieser Effekt mit Firefox und Opera, sowie Internet Explorer 7 zu sehen.
Auf meiner Hompage kann man den Effekt in der Navigation sehen.
Jetzt suchen wir uns zwei Buttons aus einen der sichtbar ist und zu unserer Seite paßt 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 mit Bildern ausführlich beschrieben:
http://coolplace.co.ohost.de/hpforum/viewtopic.php?t=64
Jetzt machen wir den ersten css - code - am besten erst auf unserem Rechner in einem schreibprogramm - ich verwende Microsoft OneNote 2003 - weil man da sehr schön für die einzelnen Themen Mappen erstellen kann, die dann oben im Programm angezeigt werden, wie Karteikartenreiter. Nun zum Code:
Für den sichtbaren Button:
td.nav{background-image: url(Adresse eures Buttons);}
Für den Hover Effekt:
td.nav:hover{background-image: url(Adresse eures Hoverbuttons);}
Zusammen sieht das dann so aus:
Diesen Code geben wir jetzt bei Design einstellen - bei Text über dem Design ein - vorher müssen wir noch die Einstellungen kontrollieren - das ist aber alles hier genau beschrieben:
http://coolplace.co.ohost.de/hpforum/viewtopic.php?t=36
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 nochmal kontrollieren. So muß es jetzt nach der Bearbeitung aussehen:
geht doch - so werden wir jetzt jedes einzelne Teil des vorhandenen Designs verändern.
