Antworten auf deine Fragen:
Neues Thema erstellen

Frage an die erfahrenen Webdesigner

Zaolat

Aktives Mitglied

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

Aktives Mitglied

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:



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

leveler

00110100 00110010

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

Aktives Mitglied

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.
 
P

Pixelverwender

Guest

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

Aktives Mitglied

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?
 
P

Pixelverwender

Guest

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.
 

Zaolat

Aktives Mitglied

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

Aktives Mitglied

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

Aktives Mitglied

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

Hat es drauf

AW: Frage an die erfahrenen Webdesigner

Das geht mit Javascript.
HTML:
<area onmouseover="javascript:hoverFunc();[...] />

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

L. G.
 
D

dirtdiver2010

Guest

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

Hat es drauf

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_

Noch nicht viel geschrieben

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

Aktives Mitglied

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_

Noch nicht viel geschrieben

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 :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben