Navigationbar

[Mr_BIG1893]

Hallo zusammen,

Ich möchte eine Website ins Leben rufen, mit diesem Design



Ich habe noch nicht allzuviel Erfahrung mit Webdesign, aber ich hoffe ich kriege das doch in etwa so hin, wie ich das gerne möchte.

Ich versuche mal zu beschreiben wie ich es vorhabe zu machen und wäre dann froh wenn ihr mir sagt, ob es so umsetztbar ist.

Also, das Grunddesign steht ja, das wurde im Photoshop gemacht.
Jetzt dachte ich mir, ich Slice das ganze und importiere es dann in Dreamweaver.

Soweit so gut. Ich hoffe das geht doch so oder? Ist ja eigentlich ziemlich einfach.

Jetzt hab ich nur noch eine Frage.

Krieg ich das hin, dass die Navileiste einen Rollover Effekt bekommt und Trotzdem die spezielle Schrift behalten kann?

Wenn ja, könnte mir villeicht jemand sagen wie?
Meine Idee war, die einzelnen Slices der Navileiste zu kopieren Ihnen den ensprechenden "Rollovereffekt" zu geben (zum Beispiel einen Innerglow) und dann per Dreamweaver dem "Original Navileistenbild" das "Rollover Navileistenbild" als Rollovereffekt hinzuzufügen.

 

[energie95]

AW: Navigationbar

Hallo zusammen,

Ich möchte eine Website ins Leben rufen, mit diesem Design



Ich habe noch nicht allzuviel Erfahrung mit Webdesign, aber ich hoffe ich kriege das doch in etwa so hin, wie ich das gerne möchte.

Ich versuche mal zu beschreiben wie ich es vorhabe zu machen und wäre dann froh wenn ihr mir sagt, ob es so umsetztbar ist.

Also, das Grunddesign steht ja, das wurde im Photoshop gemacht.
Jetzt dachte ich mir, ich Slice das ganze und importiere es dann in Dreamweaver.

Soweit so gut. Ich hoffe das geht doch so oder? Ist ja eigentlich ziemlich einfach.

Jetzt hab ich nur noch eine Frage.

Krieg ich das hin, dass die Navileiste einen Rollover Effekt bekommt und Trotzdem die spezielle Schrift behalten kann?

Wenn ja, könnte mir villeicht jemand sagen wie?
Meine Idee war, die einzelnen Slices der Navileiste zu kopieren Ihnen den ensprechenden "Rollovereffekt" zu geben (zum Beispiel einen Innerglow) und dann per Dreamweaver dem "Original Navileistenbild" das "Rollover Navileistenbild" als Rollovereffekt hinzuzufügen.

Vielleicht hilft dir das weiter, wenn du nicht nur den text markierst, und die Glanzebene etwas in der deckkraft senkst

 

[Mr_BIG1893]

AW: Navigationbar

Villeicht steh ich grad auf der Leitung....
Aber ich verstehe im Moment nicht, was das mit meinem Problem zu tun hat

 

[energie95]

AW: Navigationbar

Es hieß ja, ob du diesen Effekt bekommsz und die Schriftart erhalten bleibt.

So macht man es. Diese als GIF einzeln speichern und in die css / html - datei einfügen

 

[Mr_BIG1893]

AW: Navigationbar

Achso wir haben warscheindlich von zwei verschiedenen Sachen geredet.

Ich meinte den Rollovereffekt, wie zu Beispiel hier Free Adobe Photoshop, Flash, Dreamweaver, Illustrator, Fireworks, Bridge, and Golive Video Tutorials :: Welcome to Tutvid.com in der Navileiste.

also nicht ein Rollover im Text an und für sich.

 

[HansHansa]

AW: Navigationbar

Das obere Menü ist ganz einfach.
Es ist per CSS erstellt: (ID "navBar") es ist nur ein Hintergrundgrafik die nach links und rechts verschoben wird.


Die Schrift ist über eine Liste erzeugt.

<div id="navBar">
    	  <ul>
    	    <li><a href="../">HOME</a></li>
  	        <li><a href="tutorials/">TUTORIALS</a></li>
    	    <li><a href="contact/">CONTACT</a></li>
            <li><a href="resources/about">ABOUT ME</a></li>
    	    <li><a href="resources/">RESOURCES</a></li>
            <li><a href="buying/">BUY VIDEO</a></li>
    	  </ul>
        </div>

 

[Kronod]

AW: Navigationbar

ich würde vorschlagen ein zweites Bild zu machen. Dieses mit einer helleren Menüleiste zu erstellen und diese da genauso zuzuschneiden wie das normale Bild. so könntest du per hover effekt des zweite einblenden, wenn man mit der Maus drüberfährt

Gruß Kronod

 

[Mr_BIG1893]

AW: Navigationbar

Das obere Menü ist ganz einfach.
Es ist per CSS erstellt: (ID "navBar") es ist nur ein Hintergrundgrafik die nach links und rechts verschoben wird.


Die Schrift ist über eine Liste erzeugt.

<div id="navBar">
          <ul>
            <li><a href="../">HOME</a></li>
              <li><a href="tutorials/">TUTORIALS</a></li>
            <li><a href="contact/">CONTACT</a></li>
            <li><a href="resources/about">ABOUT ME</a></li>
            <li><a href="resources/">RESOURCES</a></li>
            <li><a href="buying/">BUY VIDEO</a></li>
          </ul>
        </div>

Das klingt nach einer sauberen Lösung, nur weiss ich nicht wie das mit der Liste geht... aber das ginge warscheindlich zu weit das zu erklären nehm ich an

ich würde vorschlagen ein zweites Bild zu machen. Dieses mit einer helleren Menüleiste zu erstellen und diese da genauso zuzuschneiden wie das normale Bild. so könntest du per hover effekt des zweite einblenden, wenn man mit der Maus drüberfährt

Gruß Kronod

Das wäre glaube ich ziemlich genau dass was ich gemeint habe, nur nicht ganz so kompliziert ausgedückt

 

[HansHansa]

AW: Navigationbar

Ist ganz einfach

Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

 

[temporary]

AW: Navigationbar

Hey,
kurzer Ratschlag: Das ist in PS schön kreiert. Aber bitte, bitte nimm nicht einfach die Slice-Funktion und erstelle daraus eine Webseite! Arbeite Dich erstmal ein bisschen in CSS und HTML ein, damit kannst Du den Menueeffekt genauso realisieren, und nebenbei Deine Seite weiter in Richtung SEO, Dateigröße und Features optimieren.

 

[Mr_BIG1893]

AW: Navigationbar

Vielen Dank euch allen

 

[temporary]

AW: Navigationbar

Gerne =)
Wenns weitere Fragen gibt - immer her damit!

 

[Mr_BIG1893]

AW: Navigationbar

Die werden noch kommen, keine Angst

 

[Mr_BIG1893]

AW: Navigationbar

Habe die 2 Bildervariante genommen, gefällt mir sehr gut.

Hier seht ihr was draus geworden ist:

Vielen Dank

Leider ergab sich ein nächstes Problem

 

[temporary]

AW: Navigationbar

.. ich find das Menue auf der Seite zu groß. Etwas kleiner wirkt das nochmal mehr professioneller. Und zu Deinem Problem wg. zerreissen.. hatte ich ja angesprochen, nicht einfach exportieren.. hehe