Lektion 7 - Navigation mit Schaltflächen

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

Lektion 7 - Navigation mit Schaltflächen

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

Das war die Linkliste mit Hintergrundgrafik. Gehen wir einen Schritt weiter:

Du möchtest, dass die Schaltflächen abgeschlossen sind. Dies kannst du mit Rahmeneffekten machen oder aber du setzt Grafiken ein - also Buttons.

Für die Links benötigst du zwei Zustände:

den Link-Zustand <a> und den Hover-Zustand <a:hover>

Diese Zustände kannst du entweder durch einen Schrifteffekt erreichen, oder durch zwei Grafiken, die sich per Hover austauschen.
Bild
Bild

Solche Buttons kannst du mit jedem Grafikprogramm erstellen. Du kannst auch Online-Button-Generatoren dafür nutzen ... Wie auch immer. Ich habe dir einige Buttons in den Übungsordner gelegt.

Verwendest du unbeschriftete Grafiken, verwendest du für jeden Link das gleiche Set.

Hier ein Beispiel:

Schaltflächen

Das sieht richtig schick aus, achte aber darauf, dass die Buttons zu deiner Seite passen.

Ich habe noch weitere Buttons im Ordner hinterlegt. Die jedoch jeweils zusammengesetzt sind. Diese Buttons werden schneller geladen.

Der Trick dabei ist, dass man die gleiche Hintergrundgrafik für a und a:hover verwendet, nur dass die Position der Hintergrundgrafik bei a oben links ist und bei a:hover unten links.

Möchtest du nun aber beschriftete Buttons verwenden, weil du deine Linkliste in einer Schriftart darstellen möchtest, die nicht jeder auf seinem Rechner installiert hat, wird es ein bisschen schwieriger, da du für jeden Link ein eindeutiges Set, also je eine ID oder Klasse benötigst.

Dann musst du noch die Linkschrift verschwinden lassen. Du brauchst also ein weiteres Element.

Übung

Übungsdateien

Zuerst benötigst du wieder eine Liste. Bevor du den Link setzt musst du jedoch erst das Element <em> einfügen. Markiere hierzu die Linkbeschriftung und klicke auf das einzelne Ausrufezeichen in der Formatsymbolleiste.

Erst jetzt markierst du noch einmal jede Linkbeschriftung und fügst einen Link ein.

[anmerk]Bild|Achtung!
Es ist wichtig, dass du diese Reihenfolge einhältst, da sich sonst das <em>-Element um das <a> Element legt und du dann nicht nur die Beschriftung, sondern auch den Link ausblendest.[/anmerk]

Dein Code sollte nun so aussehen:

Code: Alles auswählen

<div id="navi">
    <ul>
        <li><a href="#"><em>Start</em></a></li>
        <li><a href="#"><em>Hobby</em></a></li>
        <li><a href="#"><em>Galerie</em></a></li>
        <li><a href="#"><em>Infothek</em></a></li>
        <li><a href="#"><em>Feedback</em></a></li>
    </ul>
</div>
Mit dem Element <em> schaffst du wie auch schon bei dem grafikschen Template die Möglichkeit den Text auszublenden, ohne das der Link davon betroffen ist.
  • Start
  • Hobby
  • Galerie
  • Infothek
  • Feedback
Jetzt legst du zu jedem Link eine ID und die dazu gehörige Hover-ID an.
  • #start a
    #start a:hover

    #hobby a
    #hobby a:hover

    #gal a
    #gal a:hover

    #info a
    #info a:hover

    #feedback a
    #feedback a:hover

Weise die IDs den jeweiligen Listenpunkten <li> zu.

Code: Alles auswählen

<div id="navi">
    <ul>
        <li id="start"><a href="#"><em>Start</em></a></li>
        <li id="hobby"><a href="#"><em>Hobby</em></a></li>
        <li id="gal"><a href="#"><em>Galerie</em></a></li>
        <li id="info"><a href="#"><em>Infothek</em></a></li>
        <li id="feed"><a href="#"><em>Feedback</em></a></li>
    </ul>
</div>
Weise nun die Styles den IDs zu:

#navi
  • Lege in deinem Navigations-div nur die Breite der Liste zu.
#navi ul
  • entferne die Listenpunkte und alle Abstände links.
#navi li
  • lege hier die Größe der Buttons fest. In meinem Beispiel sind das 150px x 30px
#navi em
  • Stelle die em auf unsichtbar.
#start a
  • Größe 150px x 30px, Anzeige: block, Hintergrund: start.jpg, Position links unten, Texteffekte - keine
#start a:hover
  • Hintergrund: start.jpg, Position: links oben
Wiederhole diese Formatierung für alle weiteren Buttons. Tausche lediglich die Grafiken aus.

Fertig ist deine Liste: Beispiel Liste mit beschrifteten Buttons

Weitere Buttons zum Ausprobieren dieser Listenform findest du im Übungsordner.

Deine Lösungen könnten so aussehen: Lösung mit verschiedenen Buttons

Viel Spaß!


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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von anke » So 7. Sep 2014, 20:44

Hallo Kurt

sieht super aus :)

ein paar kleine Anmerkungen habe ich aber doch ;)

Im ersten Link werden die Links nach dem Impressum noch seltsam angezeigt.
Im letzten Link ist die Beschriftung vertikal sehr hoch angelegt. Das kannst du über die Zeilenhöhe steuern.

Viele Grüße

Anke

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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von kp2709 » Mo 8. Sep 2014, 06:09

guten morgen anke,
ich verstehe nicht, was du mit "seltsam angezeigt" meinst? :? :?
der zweite link ist erledigt
http://reikuma27.reikuma.bplaced.de/web ... ttons.html
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 7 - Navigation mit Schaltflächen

Beitrag von anke » Mo 8. Sep 2014, 06:19

Hallo Kurt

ich habe mal einen Screenshot gemacht.
kurt-7.jpg
kurt-7.jpg (176.69 KiB) 598 mal betrachtet

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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von kp2709 » Mo 8. Sep 2014, 07:48

hallo anke,
tut mir leid das ich dich nochmal bemühte. habe danach den fehler auch gesehen, hier die korrektur. ich hoffe es stimmt :D

http://reikuma27.reikuma.bplaced.de/web ... ttons.html

lg
kurt
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 7 - Navigation mit Schaltflächen

Beitrag von anke » Mo 8. Sep 2014, 07:56

perfetto ;)

weiter gehts :D

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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von Hellriders » Fr 23. Okt 2015, 10:27

Hallo,
da ergeben sich schöne möglichkeiten fürs navi, werd mich mal bei nem gimp kurs anmelden. :)

mein ergebnis übung1

gruß micha

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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von camouflage1984 » Fr 23. Okt 2015, 20:07

Hallo Micha

Ist das so gewollt im Navi 2 ?
test.jpg
test.jpg (16.64 KiB) 542 mal betrachtet
Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

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

Re: Lektion 7 - Navigation mit Schaltflächen

Beitrag von Hellriders » Fr 23. Okt 2015, 22:32

ich hab es nochmal überarbeitet :o

übung 1

gruß micha

Antworten