Fügen Sie visuelle Hinweise auf Ihre Website hinzu

Sep 15, 2025

wie man

Es ist ärgerlich für die Website-Benutzer, auf einen Link zu klicken, um festzustellen, dass die Webseite nicht von Interesse ist, um ihre Zeit zu verschwenden. Die Verwendung eines Bildes auf dem Seitenhintergrund ist eine großartige Möglichkeit, den Benutzern einen Hinweis darauf zu geben, was von einem Link vor dem Laden der Seite erwartet wird. Sie können ein tolles Beispiel für diese Technik in der Verwendung auf der Verwendung sehen Ivan Aivazvsky Life Site .

Die Verwendung des Seitenhintergrunds kann auch dyslexische Leser oder solche, die Englisch sprechen, als zusätzliche Sprache helfen. In diesen Fällen können Sie dem Benutzer zusätzliche Informationen mitteilen, ohne sie mit zu viel Text zu überlastet.

10 Schritte zum Erstellen einer eingreifenden Benutzererfahrung

Wie bei jedem Effekt, der Text mit Hintergrundbildern kombiniert, stellen Sie sicher, dass Ihr Text jederzeit lesbar ist. Dies kann erreicht werden, indem Sie eine halbtransparente Farbe auf Ihre Navigationsverbindungen setzen. Berücksichtigen Sie auch die UX-Lesbarkeit für Probleme wie Farbenblindheit, die sich auswirken, wie Benutzer farbiger Text interpretieren können.

Hier zeigen wir Ihnen, wie Sie eine interaktive Navigationsanzeige mit nützlicher und nützlicher erstellen zugänglich visuelle Hinweise.

Laden Sie die Dateien für dieses Tutorial herunter Hier .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Die Ivan Aivazvsky-Lebens-Site ändert die Hintergrundbilder, während Sie über Links schweben (Klicken Sie auf das Bild, um zur Website zu gelangen)

01. Erstellen Sie das HTML-Dokument

Erstellen Sie die Haupt-HTML-Dokumentvorlage, die aus dem HTML-Container besteht, der den Kopf- und Körperabschnitt speichert.

Der Kopfbereich speichert Beschreibungsinformationen wie den Dokumenttitel sowie Links zu externen Ressourcen - dh CSS und JavaScript.

Der Körper speichert den Dokumentinhalt. Ein erhebliches Merkmal des Körpers ist das Attribut "Data-Theme", das er angewendet hat - um von JavaScript modifiziert zu werden, um CSS-Präsentationsänderungen auszulösen.

 & lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Titel & GT; Navigation Hintergrund & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; Skript-Typ = "Text / JavaScript" SRC = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; Body Data-Theme & GT;
*** SCHRITT 2
& lt; / body & gt;
& lt; / html & gt;

02. Navigation hinzufügen HTML

Der Seiteninhalt besteht aus einem Navigationsbehälter, der Links enthält. Die Navigation-ID und die Titel der untergeordneten Links werden von JavaScript verwendet, um Interaktionen anzuhören und das Attribut "Data-Theme" zu ändern, das als Teil des Körperbehälters definiert ist.

 & lt; nav id = "mainnav" & gt;
& lt; ein href = "#" title = "Page 1" & gt; Seite 1 & lt; / a & gt;
& lt; ein href = "#" title = "Page 2" & gt; Seite 2 & lt; / a & gt;
& lt; ein href = "#" title = "Page 3" & AG; Seite 3 & lt; / a & gt;
& lt; / nav & gt;

03. Initiieren Sie die CSS-Datei

Der HTML-Inhalt ist jetzt abgeschlossen, sodass eine neue Datei namens 'styles.css' erstellen. Diese Datei speichert die CSS-Formatierungsregeln, die die visuelle Präsentation steuern. Starten Sie diese Datei mit Regeln, um das HTML-Dokument zu präsentieren, und sein Körper wird über den vollen Bildschirm mit einem weißen Hintergrund und schwarzem Text angezeigt.

 HTML, Körper {
  Bildschirmsperre;
  Breite: 100%;
  Höhe: 100%;
  Marge: 0;
  Polsterung: 0;
  Schriftfamilie: Helvetica, Sans-Serif;
  Farbe: # 000; }

04. Legen Sie Regeln für Visuals fest

Eine wichtige Komponente für den Effekt ist die Verwendung des Attributs "Data-Theme", das an den Dokumentkörper angewendet wird. Eine Regel wird eingestellt, um das Standardverhalten der Daten zu definieren - die wir für die Hintergrundpositionierung und Änderung der Überwachung verwenden.

Dies vermeidet, dass diese Regeldefinitionen für jedes einzelne Thema wiederholt werden, wodurch Ihre Webseiten erleichtert werden können.

 [Data-Theme] {
  Übergang: Hintergrund 1s;
  Hintergrund: No-Repeat Center Center;
  Hintergrundgröße: Abdeckung; }

05. Design das Thema

Das Design jedes Themas wird mit dem Wert des Data-Themas-Attributs eingestellt.

Um den gewünschten Effekt zu erzielen, setzen wir ein anderes Hintergrundbild für jede Version des Themas ein. Der vorherige Schritt kümmert sich um alle Standardeinstellungen, die diese Themen erben werden.

 [Data-Theme = "Seite 1"] {
  Hintergrund-Bild: URL (image1.jpg);
}
[Data-Theme = "Seite 2"] {
  Hintergrund-Bild: URL (image2.jpg);
}
[Data-Theme = "Seite 3"] {
  Background-Bild: URL (image3.jpg);
}

06. Fügen Sie einen Navigationscontainer hinzu

Der Navigationscontainer wird verwendet, um sicherzustellen, dass Links mit einer konsistenten Breite dargestellt werden, die in der Mitte des Bildschirms platziert ist. Eine Breite von 50% und die automatische Berechnung, die für den horizontalen Molgining verwendet wird, wird angewendet. Dieser Ansatz bietet eine Garantie der Konsistenzgarantie unabhängig von der Bildschirmauflösung / der Größe des Benutzers.

 #mainnav {
  Bildschirmsperre;
  Breite: 50%;
  Marge: 0 Auto 0 Auto; }

07. Navigationslinks style

Die Verbindungen im Navigationsbehälter sind als Blöcke anzuzeigend, um an die Breite des Behälters anzupassen. Dies bedeutet, dass ihre 100% Breite durch die Breite des Containers definiert ist. Die Polsterung, Grenze und Hintergrundfärbung werden ebenfalls angewendet, um sicherzustellen, dass sie sich von den Hintergrundbildern abheben.

 #mainnav a {
  Bildschirmsperre;
  Breite: 100%;
  Hintergrund: RGBA (255,255,255 ,,3);
  Farbe: # 000;
  Polsterung: 1EM;
  Margin-Top: .5em;
  Rand: 1px fest; }
#mainnav A: Hover {
  Hintergrund: RGBA (0,0,0, .5);
  Farbe: #FFF; }

08. Linkereignishörer

Die CSS ist jetzt abgeschlossen, sodass eine neue Datei mit dem Namen 'code.js' für das JavaScript erstellen.

Der Effekt erfordert, dass jeder Link in der Navigation in der Navigation anhört und auf ein Mouseover-Ereignis reagiert, in dem der Benutzer über einen Link schwebt. Dieser Listener wendet den Wert "Titel" des Links zum Data-Theme-Attribut des Dokumentenkörpers an - damit auslösende Stile in der CSS.

Nachdem das Seitenfenster geladen hatte, werden die Navigationsverbindungsknoten in ein Array gelegt, auf denen eine für Schleife verwendet wird, um den Ereignislistener anzuwenden.

 Window.AdDeventListener ("Load", Funktion () {
  VAR-Knoten = document.queryselectorall ("# Mainnav A");
  für (var i = 0; i & lt; knoten.länge; i ++) {
  Knoten [i] .addeventListener ("Mouseover", Funktion () {
  Dokument.Body.Setattribute ("Data-Theme", the.getattribute ("Titel"));
  });
  }
});

Dieser Artikel erschien ursprünglich in der Webdesignerausgabe 262. Kaufen Sie es hier. Schnitte

Zum Thema passende Artikel:

10 Website-Navigationstrends für 2017
10 Schritte zum Erstellen einer eingreifenden Benutzererfahrung
Léonie Watson, warum die Zugänglichkeit ein wesentlicher Bestandteil der Webdesignprozesse sein muss

Fügen Sie visuelle Hinweise auf Ihre Website hinzu

01. Erstellen Sie das HTML-Dokument

02. Navigation hinzufügen HTML

03. Initiieren Sie die CSS-Datei

04. Legen Sie Regeln für Visuals fest

05. Design das Thema

06. Fügen Sie einen Navigationscontainer hinzu

07. Navigationslinks style

08. Linkereignishörer

wie man - Die beliebtesten Artikel

Wie man Storyboard in Photoshop

So fügen Sie Schriftarten in Photoshop hinzu

So fotografieren Sie jemanden in ein Bild

7 Top-Tipps zum Starten Ihres eigenen Geschäfts

Wie zeichnet man realistische Figuren

So erstellen Sie eine Datei für druck

So vermitteln Sie den Ton in einem Gemälde

Die Anatomie der Karikatur: 15 Top-Tipps

Kategorien