Anzeige
Tutorialbeschreibung

Ein horizontales Navigationmenue mit Photoshop und CSS gestalten

Ein horizontales Navigationmenue mit Photoshop und CSS gestalten

In diesem Tutorial werde ich euch erklären, wie man mit Adobe Photoshop CS3 und bisschen HTML/CSS ein horizontales Navigationsmenü mit Rollovereffekt basteln kann.


1. Teil - Photoshop CS3


1. Schritt:

Erstellt ein neues Dokument mit der Größe 650 x 25 Pixel 240dpi.

Bilder



2. Schritt:

Erzeugt aus der Hintergrundebene eine Ebene. Mit der rechten Maustauste auf den Ebenenname drücken und "Ebene aus Hintergrund..." auswählen, als Name "Ebene 0" belassen und mit "OK" bestätigen.

3. Schritt:

Zur "Ebene 0" einen Ebenenstil "Verlaufsüberlagerung"hinzufügen.

Bilder


Schritt 4:

Den Verlauf entsprechend Bild unten anpassen.

Bilder


Für den Punkt (1) den hexadezimalen Farbwert #595959 eingeben.
Den Punkt (2) bei 20% mit dem Wert #747474 eingeben.
Den Punkt (3) bei 32% mit dem Wert #9e9e9e eingeben.
Den Punkt (4) bei 45% mit dem Wert #747474 eingeben.
Und den Punkt (5) bei 100% mit dem Wert #595959 eingeben.

Damit erhaltet ihr folgenden Farbverlauf.

Bilder


Schritt 5:

Erzeugt eine neue Ebene über der "Ebene 0". Eine neue Ebene erzeugt ihr mit der Tastenkombination Umschalt+STRG+N oder über das Menü Ebene->Neu->Ebene.
Füllt diese Ebene mit folgende Farbe - hexadezimal #d49409, stellt die Füllmethode auf"weiches Licht" und verringert die Deckkraft auf 30%.

Bilder


Euer Balken müsste jetzt in etwa so aussehen:

Bilder


Schritt 6:

Jetzt fügt  über das Menü Ansicht->Neue Hilfslinie - vertikale Hilfslinien bei 150px, 300px, 450px und 600px ein.

Schritt 7:

Jetzt fügen wir den Text für die Button hinzu.
Für die Schriftart habe ich Microsoft Sans Serif - Größe 5px, scharf, mit Farbe hexadezimal #d8d8d8 gewählt.

Bilder


Danach fügt dem Text einen Ebenenstil "Schein nach außen" hinzu.
Dabei verwendet folgende Eigenschaften:

Füllmethode: "Negative multiplizieren"
Deckkraft: "65%"
Farbe hexadezimal #262626
Überfüllen: "5%"
Größe: "10px"

Bilder


Schritt 8:

Mit STRG+J kopiert ihr die Textebene 3mal und verschiebt diese zum 2., 3. und 4. Button. Benennt diese dann in Kontakt, Impressum und Links um.

Kleiner Tipp - haltet beim Verschieben der Textebenen die SHIFT-Taste gedrückt und die Verschiebung erfolgt auf einer Linie.

Euer Bild muss den wie folgt aussehen.

Bilder


Schritt 9:

Erstellt mit UMSCHALT+STRG+N eine neuer Ebene oberhalb der Textebene "Links" und macht diese zur aktuellen Ebene indem Ihr die neue Ebene auswählt.
Dann wählt den ersten Button mit dem "Auswahlrechteck-Werkzeug" aus und fügt über Menü Bearbeiten->Kontur füllen einen Rand von 1px mit Farbe hexadezimal #595959 Position Innen hinzu.

Bilder



Wiederholt dies für die restlichen 3 Button.

Schritt 10:

Markiert alle bestehenden Ebenen. Fügt über das Menü Ebene->Neu->Gruppe aus Ebenen... eine neue Ebenengruppe hinzu.
Benennt die Ebenengruppe "Navi" und drückt OK.

Bilder


Schritt 10:

Über das Menü Bild->Arbeitsfläche vergrößert ihr die Arbeitsfläche um 25px nach unten.

Bilder


Bilder


Schritt 11:


Kopiert mit STRG+J die Ebenengruppe und benennt die kopiert Ebenengruppe in "Navi-Hover" um.

Bilder


Schritt 12:

Über dfas "Verschieben-Werkzeug" verschiebt ihr den Inhalt der Ebenengruppe "Navi-Hover" an den unteren Bildrand.

Bilder


Schritt 13:

Weitere Veränderungen werden nur noch in der Ebenengruppe "Navi-Hover" durchgeführt, ich werde dies nicht weiter erwähnen.
Ändert den Farbverlauf der Ebene 0 Kopie wie folgt. Kehrt den Verlauf einfach um.

Bilder



Schritt 14:

Ändert jetzt die Farbe des Textes auf den Wert hexadezimal #d7d7d7. Geht in den Ebenenstil und ändert die Farbe für den Schein nach außen auf den Wert hexadezimal # 2d2d2d und die Füllmethode auf "Multiplizieren".

Bilder


Wiederholt dies für alle Farben des Textes.

Schritt 15:

Jetzt fügt  über das Menü Ansicht->Neue Hilfslinie - eine horizontale Hilfslinie bei 25px ein.

Schritt 16:

Jetzt kommt das "Slice-Werkzeug" ins Spiel.

Wählt mit dem "Slice-Werkzeug" den ersten Button aus.

Bilder


Wählt die weiteren Button ebenfalls so aus. Desweiteren wählt vom oberen Teil noch ein Stück (bei mir ist dies Slice Nr. 5) aus, diesen benötigen wir später als Hintergrund für den Navibalken.
Ich hoffe euer Bild schaut jetzt auch so aus.

Bilder


Schritt 17:

Jetzt geht ins Menü Datei und wählt "Für Web und Geräte speichern".

In der Mitte vom Bildschirm setzt ihr den Navibalken. Haltet die SHIFT-Taste gedrückt und wählt alle Slices aus.
Danach geht ihr auf "Speichern" und wählt das entsprechende Verzeichnis aus, wo ihr die Dateien speichern wollt.
Wählt als Format "png-8" aus.

Bilder


In eurem ausgewählten Verzeichnis gibt es jetzt einen Unterordner "Bilder" mit 7 Bildern. Von denen ihr nur 5 benötigt.

2. Teil - Der HTML Code

Hier der HTML Code für die Seite.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Michael Hausotte" />
    <meta name="description" content="Kalender 2008" />
    <meta name="keywords" content="Kalender, Chemnitz, Hausotte, 2008, Bilder" />
    <link rel="stylesheet" type="text/css" href="kalender.css" />
  </head>
  <body>
  <div id="seite">
      
    <div id="navoben">    
     <ul>
       <li class="link"><a class="home" href="index.html"></a> </li>
       <li class="link"><a class="kontakt" href="kontakt.html"></a></li>
       <li class="link"><a class="impressum" href="impressum.html"></a></li>    
       <li class="link"><a class="links" href="links.html"></a></li>
     </ul>   
    </div>
       
  </body>
</html>

3. Teil der CSS Code

Hie der CSS Code für die Seite.

* {
margin: 0px;
padding: 0px;
}

html {
background: #191919 url('tropfen.png') no-repeat;
}

div#seite {
width: 100%;
}

div#navoben {
height: 25px;
position: relative;
margin-top: 0px;
border: 0px ;
}

div#seite > div#navoben {
background: url('navigation05.png');
}

div#navoben ul {
left: 100px;
list-style: none;
position: absolute;
}

div#navoben li {
float: left;
height: 25px;
margin: 0px;
width: 150px;
}

div#navoben li a {
display: block;
height: 100%;
}

div#navoben .link .home {
background: url('navigation01.png');
}

div#navoben .link .kontakt {
background: url('navigation02.png');
}

div#navoben .link .impressum {
background: url('navigation03.png');
}

div#navoben .link .links {
background: url('navigation04.png');
}

div#navoben .link a:hover, div#navoben .link a:active {
background-position: 0px -25px;
}

div#navoben .link > a:focus, div#navoben .link > a:hover, div#navoben .link > a:active {
background-position: 0px -25px;
}

Bilder


Na dann wünsche euch viel Spaß beim probieren.



1. Teil der HTML Code

Der HTML Code

Ich möchte vorab nochmals den HTML Code zeigen:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Michael Hausotte" />
<link rel="stylesheet" type="text/css" href="kalender.css" />
</head>

<body>

<div id="seite">

<div id="navoben">
<ul>
<li class="link"><a class="home" href="index.html"></a> </li>
<li class="link"><a class="kontakt" href="kontakt.html"></a></li>
<li class="link"><a class="impressum" href="impressum.html"></a></li>
<li class="link"><a class="links" href="links.html"></a></li>
</ul>
</div>
</div>

</body>

</html>



1. Abschnitt - DOCTYPE:


Als erstes erfolgt die Festlegung des DOCType - habe mich hier für XHTML Version 1.0 strict entschieden. Man kann auch HTNL verwenden, für das Navigationsmenü spielt dies keine Rolle.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


2. Abschnitt - HEAD - Kofbereich:

<head>
    <title>Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Michael Hausotte" />
    <link rel="stylesheet" type="text/css" href="kalender.css" />
  </head>

Im Kopfbereich werden Angaben zum Titel, Inhalt, verwendeter Zeichensatz etc. gemacht.

Den Titel meiner Seite habe ich mit "Navigation" festgelegt - <title>Navigation</title>

In den Metadaten habe ich folgendes festgelegt:
  1. Für den Zeichensatz habe ich den Standardzeichensatz (iso-8859-1) für Westeuropa verwendet - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  2. Der Autor der Seite bin ich - <meta name="author" content="Michael Hausotte" />
Für den CSS Code habe ich mich für eine externe Datei mit dem Namen kalender.css entschieden. Kalender.css deshalb, weil ich dieses Navigationmenü auf einer Seite mit einem Kalender für 2008 verwendet habe.

Soviel zum Kopfbereich.

3. Abschnitt - BODY - der Bereich des Seiteninhalts:


<body>

  <div id="seite">
      
    <div id="navoben">    
     <ul>
       <li class="link"><a class="home" href="index.html"></a> </li>
       <li class="link"><a class="kontakt" href="kontakt.html"></a></li>
       <li class="link"><a class="impressum" href="impressum.html"></a></li>    
       <li class="link"><a class="links" href="links.html"></a></li>
     </ul>   
    </div>
    </div>
 
  </body>


Für den Inhalt meiner Seite mache ich mir einen Container namens seite auf - <div id="seite">. Über den CSS Code werde ich diesen Container entsprechende Formatierungen geben.

Das Navigationsmenü habe ich anschließend in den Container <div id="navoben"> gepackt, um diesen mit CSS zu formatieren.

Für das Navigationsmenü verwende ich eine unsortierte Aufzählungsliste - <ul> </ul>. (<ul> bedeutet hier unordered list).
Das Element <ul> leitet eine unsortierte Aufzählungsliste ein und </ul> schließt dies ab.

Mit dem Element <li> beginnt eine neuer Eintrag in der Liste - <li> </li>. (<li> bedeutet hier list item).
Da ich im DOCTYPE XHTML strict verwende, ist der Endtag </li>, um das Listenelement abzuschließen, zwingend notwendig.
Die <li>-Elemente werden wir später mit der CSS-Anweisung horizontal anordnen.
In jeden <li>-Element ist dann der Link zu der entsprechenden Seite untergebracht.

2. Teil der CSS Code

Der CSS Code


Ich möchte vorab nochmals den gesamten CSS Code zeigen:

Ich habe den Code nochmals ein bißschen optimiert. Da ich die Navigation erst ohne Bilder auf einer Seite verwendet habe, waren im Code meines  1.ten Tutorials noch ein paar Anweiungen beinhaltet, die nicht mehr benötigt werden.

* {
margin: 0px;
padding: 0px;
}

html {
background: #191919;
}

div#seite {
width: 100%;
}

div#navoben {
height: 25px;
margin-top: 0px;
border: 0px ;
background: url('navigation05.png');
}


div#navoben ul {
left: 100px;
list-style: none;
}

div#navoben li {
float: left;
height: 25px;
margin: 0px;
width: 150px;
}

div#navoben li a {
display: block;
height: 100%;
}

div#navoben .home {
background: url('navigation01.png');
}

div#navoben .kontakt {
background: url('navigation02.png');
}

div#navoben .impressum {
background: url('navigation03.png');
}

div#navoben .links {
background: url('navigation04.png');
}

div#navoben .link a:hover {
background-position: 0px -25px;
}


Nun die Erläuterungen zu den einzelnen Elementen.

1. Element:

* {
margin: 0px;
padding: 0px;
}


Weißt allen Elementen einen Außen- und Innenrand von 0 Pixel zu. Ist reine Formsache, um mit allen Browsern das gleiche Ergebnis zu erlangen.

2. Element:

html {
background: #191919;
}

Weißt dem HTML Element die Hintergrundfarbe hexadezimal #191919 (was nicht ganz schwarz ist)  zu.
Ist reine Formsache, ist für das Menü nicht unbedingt notwendig.

3. Element:

div#seite {
width: 100%;
}

Für den DIV-Container Seite wird eine Breite von 100% festgelegt. Der Container Seite wird über das ID-Element dateiweit eindeutig festgelegt.

4. Element - Hier beginnt der Teil des Navigationsmenüs:

div#navoben {
height: 25px;
margin-top: 0px;
border: 0px ;
background: url('navigation05.png');
}

Hier erstellen wir einen DIV-Container für das Navigationsmenü. Als Element verwende ich wieder ein ID-Element, da dieses Menü nur einmal in der Datei verwendet werden soll.

Mit der Anweisung height: 25px; wird dem Menü eine Höhe von 25px zugewiesen.
Ebenfalls möchte ich keinen Rand für das Navigationsmenü - border: 0px ;.
Mit der Anweisung - background: url('navigation05.png'); weise ich dem Navigationsmenü (25px hoch) eine Hintergrundgrafik hinzu. Diese Grafik hat das gleich aussehen wie meine Button.

Bilder


Man könnte noch die Anweisung repeat-x einfügen, da das Navigationsmenü aber nur 25px hoch ist und die Grafik auch 25px hoch ist, kann eine Wiederholung in y-Richtung nicht erfolgen.

5. Element:

div#navoben ul {
margin-left: 100px;
list-style: none;
}

Hier wird die unsortierte Liste <ul> formatiert.
Der Abstand zum linken Rand soll 100 Pixel betragen - margin-left: 100px; -.
Mit der Anweisung -
list-style: none; - werden die Symbole für die folgenden Listeneinträge unterdrückt. Wenn diese Anweisung weggelassen wird, seht ihr neben den Grafiken der Button kleine weiße Punkte (die Listensymbole!!!). Und das sieht unschön aus, deshalb weg damit.

6. Element:

div#navoben li {
float: left;
height: 25px;
margin: 0px;
width: 150px;
}

Hier werden die einzelnen Listeneinträge <li> formatiert.
Mit der Anweisung - float: left;  - werden die einzelnen Listeneinträge nebeneinander angeordnet. Generell wird nach jedem <li> ein Absatzwechsel eingefügt. Das liegt daran, dass das <li> Element ein Blockelement ist und immer einen eigenen Absatz erzeugt .
Die Höhe - height: 25px; - wird auf 25 Pixel und die Breite - width: 150px; - auf 150 Pixel festgelegt, genau so groß wie die Grafiken für die Button. Mit - margin: 0px; - legen wir fest, dass um die Listeneinträge ein Rand von 0 Pixel sein soll. Damit die Listeneinträge genau nebeneinander angeordnet werden.

7. Element:

div#navoben li a {
display: block;
height: 100%;
}


Diese Anweisungen sind äußerst wichtig. Mit der Anweisung - display: block; und  height: 100%; - wird dem <a> Element die Eigenschaft Block und eine Höhe von 100% (Höhe des Listenelements 25px) gegeben. Dies bewirkt, dass sich das <a> Element später über den gesamten Listeneintrag (150x25px) erstreckt und der Hovereffekt an jeder Stelle des Listeneintrages funktioniert.

8. Element:

div#navoben .home {
background: url('navigation01.png');
}

div#navoben .kontakt {
background: url('navigation02.png');
}

div#navoben .impressum {
background: url('navigation03.png');
}

div#navoben .links {
background: url('navigation04.png');
}

Mit diesen Anweisungen weisen wir den Klassen .home .kontakt .impressum .links das entsprechende Hintergrundbild zu. Das Erstellen der einzelnen Bilder habe ich in einem anderen Tutorial beschrieben (siehe Link oben).

9. Element:

div#navoben .link a:hover {
background-position: 0px -25px;
}


Mit dieser Anweisung sage ich, dass sich beim Überfahren mit der Maus des Ankers <a> im Listeneintrag mit der Klasse .link die Position des Hintergrundbildes um -25 Pixel nach oben verschieben soll. Warum?

Im 8. Element haben wir die Hintergrundbilder zugewiesen. Die Hintergrundbilder sehen wie folgt aus.

Hier das Beispiel für die Startseite:

Bilder


Am Bild ist zu sehen, dass das Bild aus 2 verschiedenen Bildern besteht. Die Gesamthöhe des Bildes beträgt 50 Pixel. Laut unserer Festlegung für die Höhe des Navigationsmenüs (siehe 4. Element) beträgt dies 25px. Somit wird nur der oberste Teil des Bildes angezeigt. Beim Überfahren des Bildes wir durch die Anweisung -

div#navoben .link a:hover {
background-position: 0px -25px;
}

Das Bild einfach um 25 Pixel nach oben verschoben und das untere Bild kommt zum Vorschein. Diese Lösung hat zum Vorteil, dass beim Laden der Seite alle Bild komplett geladen werden und beim Überfahren der Bilder einfach der Rand verschoben wird und kein weiteres Bild nachgeladen werden muß, was zu Verzögerungen führen kann.

Diese Vorgehensweise funktioniert sogar im alten IE 5.5.

Zusammenfassung:

Was habe ich gemacht?

Mit der Anweisung

div#navoben {
height: 25px;
margin-top: 0px;
border: 0px ;
background: url('navigation05.png');
}


Haben wir einen Container, genannt "navoben", ohne Rand und ohne Rahmen erstellt, der 25px hoch ist. Desweiteren bekommt er ein Hintergrundbild.

In diesem Container stellen wir eine unsortierte Liste <ul> dar. Diese unsortierte Liste wird ohne Listensymbole und mit einem Rand von 100px links angeziegt
- left: 100px; list-style: none;.
Die unsortierte Liste enthält Listeneinträge die eine höhe von 25px und eine Breite von 150px haben
- height: 25px; width: 150px;. Die Listeneinträge werden durch die Anweisung - float: left; - alle nebeneinander angeordnet.

Die Listenelement enthalten Ankerelement <a>, die als Block mit einer Höhe defienert werden, um die Grafiken anzuzeigen -
display: block; height: 100%; -. Mit den Klassen .home .kontakt . impressum .links weisen wir den entsprechenden Ankerelementen <a> die Hintergrundbilder zu.

Durch die Anweisung
div#navoben .link a:hover {
background-position: 0px -25px;
}
wird die Position des Hintergrundbilders einfach um 25 Pixel nach oben verschoben.

Das ist alles.

Ich hoffe ich habe somit die Fragen aus meinem 1.ten Tutorial beantwortet und wünsche allen viel Spaß beim ausprobieren.


Der XHTML/CSS Code wurde validiert und hat den Test des W3C bestanden.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von OJey
  • 11.07.2011 - 08:42

Gut und verständlich erklärt, lässt sich reproduzieren!

Portrait von corderx
  • 04.02.2011 - 18:15

Top erklärt, super für Einsteiger

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.01.2011 - 08:21

Besten Dank...weiter so

Portrait von sevdakusu
  • 17.12.2010 - 10:55

Vielen Dank für die Mühe.

Portrait von hurrli
  • 19.11.2010 - 11:28

Super Tut. Danke für die Arbeit!

Portrait von Beathoven
  • 17.11.2010 - 12:12

danke für das klasse tut :-)

Portrait von mikman
  • 22.08.2010 - 09:14

Danke für das ausgezeichnete tut! Ich habe es nachgeturnt und es hat sofort gefunzt. (Ist nicht immer so!) - Noch eine Anmerkung an "dreadsense". Wenn schon derartige Kritik - dann mit einem besseren Tutorial antworten. Nur rummeckern ist mir zuwenig. Das Ganze kommt mir vor, wie ein Falschfahrer auf der Autobahn. "Alle anderen fahren auf der falschen Seite - was ist denn da los?"
Ich wiederhole mich gerne, danke für das Tutorial.

Portrait von DraQ
  • 05.07.2010 - 20:44

danke, genau sowas habe ich gerade gesucht!

Portrait von madstevens
  • 01.07.2010 - 17:32

Sowas brauche ich - super!!!

Portrait von tomlin
  • 21.05.2010 - 13:13

Sehr gutes Tutorial - hat mir sehr geholfen!

Portrait von bernet
  • 13.05.2010 - 17:57

das habe ich gesucht... sehr gut beschrieben!vielen dank!

Portrait von JackAbwearts1
  • 23.04.2010 - 22:54

Genau das richtige für mich, thx!

Portrait von Sibulan1
  • 06.04.2010 - 14:10

danke, gut und einfach erklaert

Portrait von staxx78
  • 05.03.2010 - 18:14

sehr gut und ausführlich beschrieben, anschaulicher geht nicht

Portrait von Promiso
  • 03.03.2010 - 13:33

sehr hilfreiches Tutorial, Danke

Portrait von archy
  • 26.02.2010 - 14:22

da hab ich mich ja auf was eingelassen - mal sehen

Portrait von 4K2

4K2

  • 24.02.2010 - 15:17

Interessante Lösung! Erste Tests funzen.

Portrait von Ryan101
  • 20.02.2010 - 17:10

Danke hat funktioniert .....

Portrait von SimelYildirim
  • 20.11.2009 - 00:33

Sehr detalliert beschrieben und hilfreich. Vielen Dank!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.11.2009 - 22:11

Super Sache! Danke! Genau so was habe ich noch gesucht!

x
×
×