Heute werden wir uns ansehen, wie Sie mit ein paar einfachen JavaScript-Zeilen eine Tastaturnavigation zu einer Website hinzufügen können. Zuerst erstellen wir ein einfaches Websitedesign in Photoshop und wandeln es in eine funktionierende Website um, die Tastaturfunktionen zum Wechseln der Seiten verwendet.
Hier ist ein Screenshot von dem, was wir bauen werden. Klicken Sie auf das Bild, um das Live-Beispiel zu sehen:
Photoshop-Arbeit
Öffnen Sie Photoshop und erstellen Sie ein neues 800 x 600 Pixel großes Dokument mit 72 dpi.
Radialer Farbverlauf
Als nächstes greifen Sie das Verlaufswerkzeug und strecken einen radialen Verlauf über den Hintergrund. Ihre Vordergrundfarbe sollte auf # 343636 und Ihre Hintergrundfarbe auf # 121414 eingestellt sein. Stellen Sie sicher, dass die hellere Farbe nicht in die Ränder des Dokuments gerät, oder Sie bekommen eine harte Kante, wenn Sie sie in unser CSS einfügen.
Art
Nun greifen Sie das Textwerkzeug und wählen Sie eine Schrift. Ich habe mich für Helvetica Neue entschieden. Geben Sie einen Text wie oben für Ihre Homepage ein, kopieren Sie dann die Ebene und ändern Sie den Typ in "Über mich". Wiederholen Sie diesen Schritt für "Mein Portfolio". und? Kontaktieren Sie mich.?
Inneren Schatten
Platzieren Sie nun einen inneren Schatten auf allen Textebenen, die Sie mit den obigen Einstellungen erstellt haben. Sie können den Effekt auf eine Ebene anwenden, dann mit der rechten Maustaste klicken und "Ebenenstil kopieren" wählen. Klicken Sie dann mit der rechten Maustaste auf die anderen Ebenen und fügen Sie den Ebenenstil ein.
Navigationstaste
Erstellen Sie nun eine Taste, um Benutzer über die Verwendung der Tastaturnavigationsfunktion zu informieren. Geben Sie den Text in derselben Schriftart blau ein und bringen Sie einen äußeren Schein an, um einen schönen, strahlenden Effekt zu erzielen. Schauen Sie sich die Screenshots oben für die spezifischen Einstellungen an. Achten Sie darauf, im nächsten Schritt etwas Platz zwischen den Klammern für die Pfeile zu lassen.
Pfeile
Schnappen Sie sich das benutzerdefinierte Formwerkzeug (unter dem Rechteckwerkzeug-Flyout-Menü) und wählen Sie einen Pfeil als Form aus. Zeichnen Sie vier Pfeile (nach oben, unten, links und rechts) und wenden Sie dieselbe Farbe und den gleichen äußeren Glanz wie der Typ an. Platzieren Sie nun die Pfeile in den Klammern aus dem vorherigen Schritt.
Speichern Sie die vier Versionen
Gehen Sie jetzt zu "Speichern für Web & Geräte". unter dem Dateimenü. Speichern Sie jede Version (Startseite, Info usw.) als jpg in einem Ordner mit dem Namen? Images '. Jetzt sind wir alle in Photoshop fertig, also schließen wir uns ab und wechseln zu Ihrem bevorzugten Texteditor oder Ihrer Webentwicklungs-Suite. Ich benutze die fantastische Mac-Anwendung Espresso.
Das HTML
Erstellen Sie eine index.html-Datei in demselben Verzeichnis wie den zuvor erstellten Bilderordner. Fügen Sie eine einfache HTML-Struktur hinzu, die mit einer CSS- und JavaScript-Datei verknüpft ist.
Navigationsmenü hinzufügen
Wir möchten nicht, dass unsere Website ausschließlich auf der Tastaturnavigation läuft. Daher fügen wir ein visuelles Navigationsmenü als Hauptmethode für die Navigation hinzu. Dazu erstellen wir ein? Nav? div in einem? Container? div im Hauptteil unseres HTML-Codes. Platzieren Sie im nav div eine ungeordnete Liste mit Links wie unten.
Erstellen Sie die anderen Seiten
Wie ich bereits sagte, möchten wir den HTML-Code in diesem Tutorial einfach halten, damit wir dort auf der Startseite bleiben. Duplizieren Sie diesen Code in drei weitere HTML-Dateien: about.html, portfolio.html und contact.html. Ändern Sie in jeder dieser Dateien nur den Namen des Containers div. Ändern Sie in der About-Datei den Eintrag in "AboutContainer". Folgen Sie mit? PortfolioContainer? und? contactContainer? in den anderen beiden.
CSS hinzufügen
Sie sollten jetzt vier im Wesentlichen leere Webseiten haben, die nur eine Liste nicht gestylter Links enthalten. Erstellen Sie eine style.css-Datei, und starten Sie sie mit dem folgenden grundlegenden Stil.
Hier haben wir im Wesentlichen nur eine Hintergrundfarbe (die der Hintergrundfarbe unserer PSD entspricht) und die Schriftfamilie als schöne, dünne Helvetica festgelegt. Margin auto sorgt dafür, dass unsere Inhalte zentriert bleiben.
Hintergrundbilder hinzufügen
Hier fängt alles an, richtig auszusehen. Gestalten Sie die vier Container-Divs so, dass die vier Hintergründe, die wir in Photoshop einrichten, angezeigt werden.
An dieser Stelle sollten Ihre Seiten Gestalt annehmen und in etwa wie das folgende Bild aussehen:
Gestaltung des Navigationsmenüs
Ein letzter CSS-Teil wird das Navigationsmenü beenden.
Wie Sie sehen können, habe ich etwas Padding auf den Hauptnavigationsbereich angewendet und alle Textdekorationen aus dem Linktext entfernt. Dann stelle ich die Textfarbe auf Weiß ein und fügte einen Hover-Effekt hinzu, der der Farbe des blauen Texts in der Nav-Taste entspricht. am Ende der Seite. Schließlich habe ich ein paar Zeilen hinzugefügt, um die Listenelemente gezielt anzuvisieren und ein wenig zu verteilen.
Wenn Sie mitverfolgt haben, sollte Ihre Seite mit dem folgenden Screenshot übereinstimmen:
JavaScript
Sie sollten jetzt eine grundlegende, funktionierende Seite mit vier Seiten haben! Mit den Links im Navigationsmenü können Sie relativ einfach zwischen den Seiten wechseln.Jetzt werden wir in das Herz des Projekts eintauchen: Tastaturnavigation hinzufügen. Es ist eigentlich ein ziemlich unkomplizierter Prozess und sollte höchstens ein paar Minuten dauern. Unser JavaScript wird von diesem Tutorial inspiriert, jedoch in eine andere Richtung.
Einrichten des Skripts
Erstellen Sie eine script.js-Datei und fügen Sie den folgenden Code ein:
Wie Sie sehen können, ist dieser Code recht kurz und sehr einfach. Grundsätzlich weisen wir JavaScript an, die Funktion? KeyCheck? Auszuführen. wenn der Benutzer eine Taste drückt. Die KeyCheck-Funktion ist dann an die Variable KeyID gebunden. Dadurch wird überwacht, was ein Benutzer drückt, und der Wert wird auf KeyID gesetzt. Jetzt fügen wir eine Codezeile hinzu, die angibt, was zu tun ist, wenn die KeyID einem bestimmten Kriterium entspricht.
Dieser Code ist etwas verwirrend. Wie auf unserer Navigationstaste angegeben, möchten wir die Nummern 1-4 und die Pfeiltasten programmieren, um zu bestimmten Seiten zu springen. Hier haben wir einen Fall eingerichtet, der besagt: Wenn der Code? 49? zurückgegeben wird, wechseln Sie zur Seite index.html (über window.location). Sie haben wahrscheinlich bemerkt, dass Code 49 keine intuitive Methode für das Drücken der Nummer Eins ist. Um die Tastencodes für eine bestimmte Taste zu finden, gehen Sie zu dieser Seite und scrollen Sie zu Abschnitt 3.3. Wir sehen, dass die Nummern 0-9 mit den Codes 48-57 bezeichnet werden. Scrollen Sie weiter nach unten und stellen Sie fest, dass die Pfeiltastencodes wie folgt lauten: 37 (Pfeil nach links), 38 (Pfeil nach oben), 39 (Pfeil nach rechts), 40 (Pfeil nach unten). Wenn Sie diesen Codesatz als Richtlinie verwenden, können wir jeden Tastendruck so programmieren, dass er einer Seite entspricht.
Flosse!
Das ist alles dazu! Sie sollten jetzt in der Lage sein, Ihre Website wie beim Eröffnungsbeispiel nur mit den Pfeiltasten und den Zifferntasten zu navigieren. Verwenden Sie die folgenden Kommentare, um uns mitzuteilen, ob Sie der Meinung sind, dass dies eine gute Idee ist und ob Sie Ihrer Website Tastaturnavigation hinzufügen möchten. Es gibt definitiv mehr als einen Weg, um darüber nachzudenken, also lassen Sie uns auch Ihre Ideen für eine alternative Methode zur Implementierung der Tastenkombinationen wissen.