Workshop: Dynamische Navigation mit JavaScript

ff-webdesigner

ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

Freelancer
 
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
   
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang

Webdesign-Tutorial: Dynamische Navigation mit JavaScript

Dieser Workshop erklärt, was man alles beim Erstellen einer dynamischen Navigation mit JavaScript beachten sollte. Dynamische Navigation erfordert teils umfangreiche JavaScript-Vorkenntnisse. Daher richtet sich dieses Tutorial an Webdesign-Profis.

Warum ist Javascript gefährlich? Eigentlich bin ich zwecks der Suchmaschinenoptimierung kein großer Fan von Javascript-Navigation. Das hat mehrere Gründe: Der automatische Linkchecker von Dreamweaver funktioniert nicht in Java-Script-Bereichen. Links müssen von Hand angepasst werden, wenn Sie Dateinamen ändern wollen. Zweitens kann Javascript in manchen Browsern ausgeschaltet werden; Besucher, die diese Einstellung in ihrem Browser verwenden, können auf Ihrer Website nicht mehr navigieren. Ihre Website ist dann vollkommen wertlos. Genauso wertlos ist sie, weil Google die Links in Ihrer Javascript-Aktionen nicht verfolgt. Beachten Sie das Tutorial "Suchmaschinenoptimierung".

Trotzdem gibt es einige Fälle, in denen der Einsatz von Javascript-Navigation durchaus sinnvoll zum Einsatz kommen kann. Neben den zahlreichen Nachteilen bietet Javascript-Navigation auch zwei Vorteile: Zum einen kann man wunderbar dynamische Effekte verwirklichen, die in reinem HTML unmöglich sind. Bei Kunden, die viel über das Design transferieren wollen, kann solch eine Javascript-Navigation punkten. Der zweite Vorteil betrifft die Usability der Seite. Gute Javascript-Navigation ist dynamisch: Unterpunkte werden hierarchisch ausgefahren. Die Zuordnungen der Seiten werden begreifbar, und der Platzanspruch ist trotz Erfüllung der Vorgabe, jede Seite von jeder aus erreichen zu können nicht so groß wie bei statischer HTML-Navigation.

Browserweiche Damit eine Javascript Navigation eine gute Usability aufweist, müssen Sie immer zweigleisig fahren. Die Navigation muss auch für User ohne Javascript-Unterstützung benutzbar sein. Sie können entweder eine Browserweiche in Javascript programmieren, oder verwenden die dynamische .js-Navigation in einer absolut positionierten <div>. Hinter der <div> liegt die statische HTML-Navigation versteckt. Bei der Browserweiche positionieren Sie im Kopfbereich Ihrer Index-Datei einen kleinen Javascript-Redirect-Befehl:

<script type="text/javascript">
<!-- top.location.href="index-js.html"; //-->
</script>

Falls Javascript beim betreffenden Benutzer ausgeschaltet ist, funktioniert diese Browserweiche nicht. Die Navigation muss auf dieser Seite als statisches HTML vorliegen. Ist Javascript beim Benutzer eingeschaltet, so leitet es weiter auf die Seite "index-js.html". Dort integrieren Sie die Navigation dynamisch als Javascript. Nachteil dieser Methode mittels Browserweiche ist, dass Sie jede Seite doppelt haben müssen: eine mit statischer HTML-Navigation und eine mit dynamischer Javascript-Navigation.

Freilich: man kann die Navigation ja in einen extra Frame legen, dann braucht man nur eine Navigationsseite doppelt. Beachten Sie jedoch, dass durch den Einsatz von Frames weitere Probleme entstehen: Sie benötigen einen Framecheck. Jeder Inhaltsframe muss "schauen", ob auch der Navigationsframe anwesend ist. Dazu gibt es noch Probleme die Regeln für gute Suchmaschinenoptimierung betreffend.

Javascript und HTML Ich ziehe aus diesen Gründen die zweite Methode vor. Sie besteht zum einen aus einem fertigen dynamischen Javascript-Menü (Beispielsweise cool menus von www.dhtmlcentral.com), zum anderen auf einer darunter versteckten statischen HTML-Navigation. Voraussetzung, um solch eine doppelte Navigation konstruieren zu können, ist die Möglichkeit der absoluten Positionierung der Javascript-Navigation. Nicht alle Javascript-Navigationen lassen sich aufgrund ihrer Programmierweise absolut positionieren. Verwenden Sie am besten Cool Menus, es ist sehr zuverlässig, einfach zu konfigurieren, bietet ein gutes Supportforum und läuft auf praktisch allen Browsern.

Legen Sie sich eine normale HTML-Seite an, in einer Zeile oben mit statischer HTML-Navigation versehen. Konfigurieren Sie die dynamischen Menüs unter Cool Menus Ihren Bedürfnissen entsprechend und positionieren sie die Ausgabe der Navigation absolut. Eine genaue Anleitung zu Cool Menus finden Sie unter
dhtmlcentral.com/projects/coolmenus/reference.asp?m=35. A
Dle zur Installation benötigten Dateien von Cool Menus finden Sie unter
www.dhtmlcentral.com/projects/coolmenus/coolmenus4_beta1_06.zip

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesigner Downloadbereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf-Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop-Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sie haben noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial? Mailen Sie uns Ihren Kommentar! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot HVU :
Verbesserung der Usability Ihrer Homepage.
Unser Preis: ab 177 € 210,63 € incl. MwSt.
Für wen? Besucher kennen sich auf Ihrer Homepage nicht aus? Die ff-webdesigner sorgen für maximale Benutzerfreundlichkeit, W3C-valides HTML und Barrierefreiheit.

Die ff-webdesigner Analysieren Ihre Homepage auf Usability-Fehler und eliminieren diese. Das Angebot zur Verbesserung der Benutzerfreundlichkeit beinhaltet:
  • Analyse Ihrer Homepage auf Usability-Fehler betreffend Sitestruktur, Linkbenennung, Lesbarkeit, Farbkombinationen und technische Fehler wie Frames und Javascript-Effekte
  • Vebesserung der Usability durch Restrukturierung der Site, Vereinfachung und Umgestaltung der Navigation und entfernen/vereinfachen überflüssiger Techniken
  • Validierung des Quellcodes nach W3C. Eliminierung aller Fehler.
  • Eingehende Beratung zu den ggf. vorhandenen Möglichkeiten der Umstellung auf semantisch korrekten Code nebst Verbesserung der Suchmaschinenoptimierung ihrer Homepage
  • Layouttest in alle gängigen Browsern (aktuelle Versionen von Firefox, Google Chrome, Opera, Safari) sowie Internet Explorer 7 / 8 / 9 / 10
Sie erhalten die optimierte Site inclusive aller Dateien als zip per Email. Das Angebot beihaltet 3 Arbeitsstunden, was i.d.R. für eine Usability-Verbesserung von kleinen Homepages bis 15 Seiten ausreicht. Größere Seiten gegen Aufpreis laut unseren allgemeinen Stundensätzen. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot WDEpro :
Webdesign-Entwurf + HTML
Unser Preis: ab 354 € 421,26 € incl. MwSt.
Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:
  • saubere Umsetzung des grafischen Entwurfs in HTML
  • semantisch korrekter HTML-Code, W3C-valide, barrierefrei
  • CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
  • Anordnung Dummy-Überschriften / Texte / Bilder
  • Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
  • ausgeführte Meta-Angaben für Eingangsseite
  • Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
  • Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email
Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot HPK :
Komplette Homepage-Erstellung mit Layout, 10 Seiten
Unser Preis: 590 € 702,10 € incl. MwSt.
Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Komplettangebot aus den unter WDEpro, WEA und HUT aufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration - Sparen Sie bis zu 350 € gegenüber den Einzelpaketen!
  • Homepage-Erstellung mit 10 HTML-Seiten incl. Impressum und Kontakt
  • Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
  • Individuelles überzeugendes Layout mit Ihrem Firmenlogo
  • 10 HTML-Seiten mit Text/CSS-Navigation
  • Homepage-Erstellung unter Einsatz semantisch korrekten validem HTML
  • Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
  • Saubere Suchmaschinenoptimierung auf relevante Keywords
  • Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
  • Upload auf Server Ihrer Wahl oder Übergabe auf CD
  • Anmeldung bei den wichtigsten Suchmaschinen
  • Einrichtung aller Email-Adressen
Bei mehr als 5h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

 
Der Mensch hat dreierlei Wege, klug zu handeln: erstens durch Nach-denken; zweitens durch Nachahmen, das ist der leichteste; und drittens durch Erfahrung, das ist der bitterste. Konfuzius Webdesign-Tutorial: Dynamische Navigation mit JavaScript
Einträge aus dem ff-Webdesign Lexikon:

JavaScript ist eine von Netscape entwickelte objektbasierte Programmiersprache, die in erster Linie zur Dynamisierung von Webseiten verwendet wird. Javascript wird nicht auf dem Server, sondern auf dem Rechner des Betrachters ausgeführt und ist die einzige Möglichkeit zur Verarbeitung zahlreicher ... [ Mehr lesen ]

Navigation Die Navigation ist der Hauptunterschied zwischen Internet und klassischen Printmedien. Durch die Navigation hat der Benutzer die freie Auswahl bei seiner Bewegung auf einer Homepage. Die Navigation einer Webseite wird in der Regel in einem Block zusammengefasst und kann bei größeren Homepages mehrere hierarchisch aufgebaute Ebenen beinhalten. Eine schlechte Navigation ist der Hauptgrund für den Misserfolg bestimmter ... [ Mehr lesen ]

DHTML ist ein Oberbegriff für alle Techniken, die HTML-Seiten dynamisch machen. Dynamic HTML besteht aus drei Technik-Arten: HTML für die Webseiten, eine clientseitige Scriptsprache und eine Schnittstelle zur Steuerung und Überwachung des DOM (Document Object Model, hierarchische Struktur aller Seitenelemente). DHTML wird eingesetzt für alle Effekte, bei denen der Benutzer mittels Bewegen ... [ Mehr lesen ]

Usability Eine gute Nutzbarkeit ist die wichtigste Grundlage für den Erfolg einer Homepage. Usability bedeutet Gebrauchstauglichkeit: eine Homepage so zu gestalten, dass ein Maximum an Nutzern die Homepage mit minimalem Wissen einfach bedienen kann. Die kritischen Teilbereiche für gute Usability sind vor allem Navigation, Farben, Aufteilung, Mehr lesen ]

Browser Der Browser ist das Programm auf Ihrem Computer, mit dem Sie gerade diese Definition lesen. Der derzeit weitverbreitetste Browser ist der Internet Explorer von Microsoft mit einem Marktanteil von ca. 75% (sinkend). Weitere wichtige Browser sind Netscape (jetzt von AOL weiterentwickelt), Opera ... [ Mehr lesen ]

HTML ist die Kurzform von "Hyper Text Markup Language" und ist die jeder Webseite zugrundeliegende Programmiersprache im Web. HTML wurde 1989 von Tim Berners-Lee in Genf zur Übermittlung wissenschaftlicher Daten entwickelt. Seine heutige Bedeutung erhielt HTML erst durch den Boom im Internet ab ca. 1995. HTML regelt den Aufbau und das Aussehen der in den HTML-Tags enthaltenen Texte. ... [ Mehr lesen ]
 
  ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]
 
 
 
 
 
Business-HomepagesFreelancer Webdesigner