Lektion 6 - Navigation mit Hintergrundgrafiken

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 6 - Navigation mit Hintergrundgrafiken

Beitrag von Admin » Di 19. Aug 2014, 11:29

Die Navigation ist wieder einer der Bereiche im Template, bei dem man sich kreativ so richtig austoben kann. Bedingt dadurch, dass die Navigation aus so vielen ineinander verschachtelten Elementen besteht, gibt es wieder 1001 Möglichkeiten diese Elemente zu gestalten.

[col]Schauen wir uns noch einmal den Aufbau der Navigation an:

Code: Alles auswählen

<div id="navi">
    <ul>
        <li><a href="#">Start</a></li>
        <li><a href="#">Hobby</a></li>
        <li><a href="#">Galerie</a></li>
        <li><a href="#">Infothek</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Wegbeschreibung</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</div>
Mehrere Elemente, die ineinander verschachtelt sind:
  • Im <div> Element steckt das <ul>
    im <ul> Element stecken die einzelnen <li> Elemente
    in den <li> Elementen stekcen die <a> Elemente.
Diesen Aufbau, der Navi, musst du beachten, wenn du sie mit Grafiken formatieren möchtest. Je flexibler die Navigation wird, desto aufwendiger wird die Formatierung.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Übung

Übungsdateien


Wir fangen einmal leicht an: etwas, was du schon aus der Lektion Grafische Templates kennst:

Beispiel1: Hintergrundgrafik in fester Größe

Solch eine Grafik kannst du sehr gut als Linkliste verwenden.

Lege eine Übungsseite an.

Erstelle einen Div und lege wie gewohnt deine Navigationleiste an. Überlege dir selber eine Linksbeschriftung, denke aber dabei daran, dass die Beschriftung auf die Navigation passen muss. Als Linkinhalt habe ich hier einfach eine Raute genommen.

Starten wir mit den Styles. Du benötigst 4 Styles:

Code: Alles auswählen

#navi1
#navi1 ul
#navi1 li
#navi1 a
#navi1 a:hover
Formatierung:

#navi1
  • Hier fügst du dein Hintergrundbild ein. Verwende linkliste.png aus den Übungsdateien. Stelle die Größe auf die Größe des Bildes sein: 165px x 465px
#navi ul
  • Stelle den oberen Innenabstand so weit nach unten, dass die Linkliste unter dem Schriftzug "Linkliste" beginnt.
#navi a
  • hier machst du die üblichen Textformatierungen.
#navi a:hover
  • Erstelle hier mit Schrifteigenschaften einen Hover-Effekt. Achte darauf, dass die Schrift beim hovern nicht zappelt. Vermeide also die Schriftgröße oder den Schriftschnitt zu verändern.
Hintergrundgrafik mit dynamischer Höhe
Um nun eine Navigationsleiste zu bekommen, die "mitwächst", musst du zunächst die Grafik für die Navigation zerschneiden. Öffne das Bild mit Gimp. Füge zwei Hilfslinien ein und führe den Filter "Guillotine" aus.[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion6-3.png[/popup]
Schon hast du 3 Grafiken. Speichere sie als oben.png, mitte.png und unten.png. Du fragst dich bestimmt, warum als PNG. Nun das Nilpferdchen sitzt auf einem transparenten Hintergrund. Deshalb sollte es in PNG gespeichert sein. Du kannst auch GIF verwenden, nur achte darauf, dass die Grafik keine zackigen Ränder bekommt.

So, nun legen wir los mit der zweiten Navigation.

#navi2
Lade in den div die Hintergrundgrafik unten.png und richte sie unten links aus.
#navi2 ul
Hier lädst du die Grafik oben.png. Richte die Grafik oben links aus und stellst einen Innenabstand-oben in Höhe der Grafik ein.
Wie gewohnt stellst du auch hier als Listenpunkte keine ein und regelst den Außen- und Innenabstande links.
#navi2 li
Stelle eine Höhe der Listenpunkte ein und lade die Grafik mitte.png als Hintergrundgrafik.
#navi2 a
in dieser Anweisung legst du einen Abstand links zum Rand an. Stelle die Anzeige auf Block, so dass das Element die <li> ausfüllt.
#navi2 a:hover
achte darauf, dass beim Texteffekt die Liste nicht zappelt.

Beispiel 2: Navigation mit flexibler Höhe

Ich wünsche dir viel Spaß beim Nachbasteln. Weitere Listen findest du im Übungsordner.

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 6 - Navigation mit Hintergrundgrafiken

Beitrag von kp2709 » So 7. Sep 2014, 10:40

Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 6 - Navigation mit Hintergrundgrafiken

Beitrag von anke » So 7. Sep 2014, 11:49

Hallo Kurt

die Navigationen sind super geworden :)

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 6 - Navigation mit Hintergrundgrafiken

Beitrag von Hellriders » Mi 21. Okt 2015, 09:36

Hier nun meine Ergebnisse :)

übung1
übung2

gruß micha

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 6 - Navigation mit Hintergrundgrafiken

Beitrag von camouflage1984 » Mi 21. Okt 2015, 14:20

Hallo Micha

Das passt alles.
Weiter gehts

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten