Frage an die erfahrenen Webdesigner

[Zaolat]

Moin Moin,

Welche Technik macht in der Praxis mehr Sinn für eine Navigation: Flash, JavaScript oder mittels Spry zum Beispiel?
Ich mache für eine Tanzschule eine Webseite. Die Buttons sollen die Schritte einer Tanzfolge sein; daher sind diese etwas anders angeordnet, als eine normale Navibar. Möchte natürlich auch Hover effekte mit einbauen.

Schöne Grüße aus dem Hohen Norden.

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Vielleicht mag mir einer auf die Sprünge helfen, wie ich am vorteilhaftesten eine Navigationsbar hinbekomme, die wie auf dem folgenden Bild aussehen soll:

Bitte kostenlos registrieren, damit du die Links siehst.

Die Fußabdrücke sollen die Buttons werden, welche ich mit einem Hover Effekt versehen möchte.

 

[leveler]

AW: Frage an die erfahrenen Webdesigner

Mach´s mit Html ,CSS (und wenn notwendig Javascript bzw.Jquery)...unter dem Aspekt SEO auf jeden Fall ein Muss....

und hier findest Du ein paar nette Navisbeispiele:

 

[Joerg_0609]

AW: Frage an die erfahrenen Webdesigner

Spry ! Wenn's direkt eigenes geschriebenes Javascript sein soll, würde ich über ein framework nachdenken, z.B. jquery. Macht das Ganze ein wenig einfacher und ist zudem Open Source.

 

[Pixelverwender]

AW: Frage an die erfahrenen Webdesigner

Javascript in der Navigation wäre imho nach wie vor so ziemlich die letzte Wahl.
HTML/CSS - es gibt mehr als genug Möglichkeiten damit.
Ein inspirierender Link dazu:

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Vielen Dank für die Anregungen,

wenn ich das über CSS mache, ist mein erster Gedankengang, dass ich ein Div positioniere; in diesem ordne ich dann mit weiteren DIV's die verschiedenen Button an dessen Position an.
Ist der Gedankengang sschon auf dem richtigen Weg oder bin ich total auf dem Holzpfad?

 

[Pixelverwender]

AW: Frage an die erfahrenen Webdesigner

Holzpfad. "Liste" ist das Zauberwort.
Schau Dir mal meinen Linktipp näher an und auch den jeweils zugehörigen Quelltext der dort gezeigten Menüs/Navis.

 

[Herr_D]

AW: Frage an die erfahrenen Webdesigner

im Zeifelsfall geht auch noch

Bitte kostenlos registrieren, damit du die Links siehst.

...dann kannste wirklich die Füße verklickern

ob das hier was taugt kann ich nicht beurteilen...

Bitte kostenlos registrieren, damit du die Links siehst.

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Zunächst einmal Danke für Eure Antworten. Ich schaue mir den Link und die Idee des IMagemaps mal an und bastel daran herum.
Vielen Dank nochmal!

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Juhu. Leider habe ich keine passende navigation unter dem link gefunden.Auch wenn es sehr viele Vorschläge sind,gab es keine Navigation mit unterschiedlich angeordneten Buttons,wie ich mir das vorstelle (siehe obiges Bild). Dann scheint es mit,als bliebe nur der Weg mich in jquery reinzufuchsen. Kennt einer ein gutes Tutorial? Wie ist Eure Erfahrung mit den Tutorials von Video2brain?

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Moin Moin,

ich habe die Buttons nun mithilfe des Maptools bei Dreamweaver erstellt. Wie kann ich diesen Buttons nun Hover Effekte zuteilen?

<map name="Tanzen" id="Tanzen">
<area shape="poly" coords="5,122" href="#" />
<area shape="poly" coords="8,164,16,168,32,166,40,166,54,168,61,172,95,172,109,167,119,159,124,151,116,142,105,136,89,136,70,139,50,144,35,140,20,137,6,141,3,151" href="#" alt="ueberuns" />
<area shape="poly" coords="218,123,228,126,240,125,254,122,264,120,278,122,290,127,313,128,327,123,336,116,337,108,323,98,309,94,284,92,269,94,249,98,229,98,219,105,216,113" href="#" alt="formation" />
<area shape="poly" coords="359,148,360,154,366,165,381,168,397,166,411,168,422,172,438,172,456,172,476,162,482,148,472,138,458,135,436,136,422,142,406,142,393,140,375,138,364,140" href="#" alt="kontakt" />
<area shape="poly" coords="372,75,388,75,406,74,418,80,437,80,457,78,471,73,482,58,476,51,460,45,445,42,424,48,404,51,382,46,366,48,362,60,364,69" href="#" alt="Kurse" />
<area shape="poly" coords="365,35,379,36,401,33,413,31,427,35,444,40,461,40,474,33,480,26,480,19,464,9,445,3,425,5,407,9,384,9,368,13,361,26" href="#" alt="bilder" />
</map>

 

[Myhar]

AW: Frage an die erfahrenen Webdesigner

Das geht mit Javascript.

<area onmouseover="javascript:hoverFunc();[...] />

function hoverFunc(){
//do awesome hover-stuff here! unbelieveable :-D
}

L. G.

 

[dirtdiver2010]

AW: Frage an die erfahrenen Webdesigner

Wenn du das mit einer Liste nicht hinbekommst hätte man auch drei Listen machen können... nur so eine Idee.
Dann ist das mit html/css lösbar und der hover auch.

 

[Myhar]

AW: Frage an die erfahrenen Webdesigner

Drei Listen wären aber semantischer Unsinn. Also vergiss das lieber sofort und bleibe bei deiner imagemap. Das ist zwar auch nicht wirklich korrekt, meiner Meinung nach jedoch besser als 3 HTML Elemente für ein einziges Element zu verwenden.

L. G.

 

[GaMbIt_]

AW: Frage an die erfahrenen Webdesigner

Mein Tipp wäre ebenfalls eine Liste ...
Das ist für die Dokumentenstruktur die beste Lösung. Für Suchmaschinen ohnehin. Ganz simpel halten.
Für die Optik darfs dann auch gern ein Bisschen mehr sein.
Die in der Liste enthaltenen Anchors erhalten verschiedene Hintergrundbilder, inkl. hover Effekte in CSS, die einzelnen Listenelemente werden per CSS absolut positioniert damit Du die Schrittfolge abbilden kannst.
So ist das Ganze ohne Flash und auch ohne Javascript gelöst.
Eine Imagemap ist denkbar ungeeignet wenn Du für einzelne Schritte auch eigene Hover Effekte haben willst. Mit Javascript lässt sich das gesamte Bild zwar austauschen, aber Du müsstest für jeden einzelnen Effekt ein eigenes Hintergrundbild laden was wiederum die Geschwindigkeit ziemlich nach unten zieht.

 

[Zaolat]

AW: Frage an die erfahrenen Webdesigner

Vielen Dank GaMbIt,

also Listenelemente und die einzelnen Elemente mittels css im DIV absolut positionieren. Ich werde mich da mal ran trauen.

 

[GaMbIt_]

AW: Frage an die erfahrenen Webdesigner

Ja genau .. wichtig ist dass das übergeordnete Element eine relative Position hat .. dann kannst Du das in Abhängigkeit zum übergeordneten Element positionieren ..
Bei Fragen einfach wieder posten .. wenn ich die Zeit hab antworte ich auch .. ansonsten gibts sicher einige hier die das ebenso können