Menüleiste in Dreamweaver CS5

[mauki]

Hallo zusammen,

ich möchte mir eine eigene Homepage mit Dreamweaver erstellen. Für meine Menüleiste habe ich in Photoshop buttons erstellt, da ich eine bestimmte Schriftart haben wollte. Damit alle diese Schriftart auch so lesen können, habe ich den Text geschrieben und als jpeg gespeichert und in meine Webseite eingebaut. Ich habe jetzt eine horizontale Menüleiste die schon mit hyperlinks verbunden sind. Jetzt habe ich mir gedacht, dass ich zu jedem Menüpunkt gerne eine Aufklappmenü hätte, auch mit jpegs bestückt. Wie kriege ich das hin? Ist das irgendwie möglich? Oder soll ich mir eine Spry-Menüleiste anlegen, den einzelnen Menüs keinen Namen geben und einfach mein jpeg als Hintergrundbild verwenden? Wäre super, wenn mir jemand helfen könnte. Danke.

VG
mauki

Habe gerade das mit der Spry-Menuleiste versucht, geht nicht, da muss ein Name rein.

Habe jetzt was anderes gefunden, über Verhalten auf Popup-Menü anzeigen gehen, aber diesen Punkt habe ich gar nicht. Muss ich den irgendwo runterladen?

Deine Beiträge kannst du über den bearbeiten-Button editieren und ergänzen.

 

[patrick_l]

AW: Menüleiste in Dreamweaver CS5

Damit alle diese Schriftart auch so lesen können, habe ich den Text geschrieben und als jpeg gespeichert und in meine Webseite eingebaut.

Das reicht nicht aus. Die Buttons sollten für eine barrierefreie und SEO freundliche Navigation per CSS eingefügt werden. Auch sollte für die Performance der Website und zum Reduzieren der HTTP-Requests mit CSS Sprites gearbeitet werden. Das ganze könnte dann folgendermaßen aussehen:

<!-- HTML -->
<ul id="nav">
  <li><a class="page1" href="#">Page 1</a></li>
  <li><a class="page2" href="#">Page 2</a></li>
  <li><a class="page3" href="#">Page 3</a></li>
</ul>

/* --| CSS |------------- */
#nav {}
#nav li {}
#nav a {display:block; text-indent:-99999px; background:url(pfad/zur/grafik) no-repeat;}
#nav .page1 {width:; height:; background-position:x/y;}
#nav .page2 {width:; height:; background-position:x/y;}
#nav .page3 {width:; height:; background-position:x/y;}
/* x = horizontal / y = vertikal */

Zur Erklärung: Durch das Einfügen der Grafiken über CSS kann die Navigation auch von Suchmaschinen aber auch von Screenreadern gelesen werden. Sprites sind zusammengefasste Grafiken die mit CSSeingefügt und mit position positioniert werden. So muss nur eine Grafik geladen

Ich habe jetzt eine horizontale Menüleiste die schon mit hyperlinks verbunden sind. Jetzt habe ich mir gedacht, dass ich zu jedem Menüpunkt gerne eine Aufklappmenü hätte,

Ein Dropdown-Menü wird mit Hilfe von verschachtelten ULs (unsortierten Listen) erstellt. Anschließend kann diese wie alle anderen HTML-Elemente mit CSS formatiert werden. Zusätzlich könnte auch JavaScript genutzt werden. Die Navigation sollte aber auch ohne JS funktionieren.

Liebe Grüße, Patrick

 

[mauki]

AW: Menüleiste in Dreamweaver CS5

Vielen Dank für die Infos. Das macht das ganze ja noch komplizierter. Ich habe die Bilder einfach eingefügt und dann mit CSS weiter bearbeitet, reicht das nicht? Wahrscheinlich nicht, habe ja Leerzeichen auch einfach so in den HTML Code eingegeben. Da muss ich mir wohl CSS nochmal genauer anschauen.
Eine Idee, wie ich an dieses Popup-Menü anzeigen kommen kann hast Du aber nicht?

VG
mauki

 

[patrick_l]

AW: Menüleiste in Dreamweaver CS5

Ich habe die Bilder einfach eingefügt und dann mit CSS weiter bearbeitet, reicht das nicht?

Funktionieren tut es auch so. davon kann und möchte ich dir aber abraten. Eben aus den von mir genannten Punkten. SEO muss jetzt bei einer privaten Website sicher nicht in dem Maße betrieben werden, wie es bei einer "kommerziellen" Website (Firmenauftritt etc.) der Fall ist.

Barrierefrei sollte aber auch eine private Website sein. Oder möchtest du etwa behinderte Menschen benachteiligen, in dem du den Besuch erschwerst bzw. unmöglich machst? Ich denke nicht. Daher (d)eine Navigation wie oben beschrieben aufbauen.

Da muss ich mir wohl CSS nochmal genauer anschauen.

Wie ist denn dein allgemeiner Wissenstand bezüglich HTML und CSS? Nach deinen bisherigen Worten, dem Eingangspost und dem "Homepage mit Dreamweaver" tippe ich mal nicht besonders.

Eine Idee, wie ich an dieses Popup-Menü anzeigen kommen kann hast Du aber nicht?

Ich weiß wie es geht Hier mal der Aufbau im HTML. Also das erwähnte verschachteln der ULs.

<ul id="nav">
    <li><a class="page1" href="#">Page 1</a>
      <ul id="page1">
       <li><a class="sub-page1" href="#">Sub-Page 1</a>
      <li><a class="sub-page2" href="#">Sub-Page 2</a>
    </ul>
  </li>
  <li><a class="page2" href="#">Page 2</a></li>
  <li><a class="page3" href="#">Page 3</a></li>
</ul>

Anschließend wird das ganze entsprechend mit CSS formatiert. Dazu gehört auch das "Aufklappen" beim überfahren eines Navigations/Menüpunkts. Über vergebene ID's und Klassen die einzelnen Elemente ansprechen und beliebig stylen.

Hier noch zwei Links für dich:
- Video-Training: Dropdown Navigation mit CSS
- CSS-Snippets » Drop-Down Navigation with CSS only

Liebe Grüße, Patrick

 

[mauki]

AW: Menüleiste in Dreamweaver CS5

Vielen Dank Patrick! Meine Kenntnisse sind äußerst gering. Ich habe mal einen Dreamweaver Kurs an der Vhs gemacht, da war auch etwas Html dabei und im Netz habe ich mir was zu Html angeschaut, das wars aber auch schon. Ich hätte nicht gedacht, dass man zu Dreamweaver noch so viel Zusatzwissen braucht. Ich schaue mir mal Deine Links an und werde mich dann etwas tiefer mit CSS beschäftigen, vielleicht mache ich auch einen Kurs dazu

VG
mauki