Voeg visuele aanwijzingen toe aan uw site

Sep 12, 2025

Procedures

Het is vervelend voor websitegebruikers om alleen op een link te klikken om te ontdekken dat de webpagina niet interessant is, hun tijd verspilt. Het gebruik van een foto op de pagina Achtergrond is een geweldige manier om gebruikers een indicatie te geven van wat u kunt verwachten van een link voordat u de pagina plaatst om de pagina te laden. Je kunt een geweldig voorbeeld van deze techniek in gebruik zien op de Ivan Aivazvsky Life Site

Het gebruik van de pagina-achtergrond kan ook dyslectische lezers helpen of degenen die Engels spreken als een extra taal. In deze gevallen kunt u aanvullende informatie aan de gebruiker communiceren zonder ze te overbelasten met te veel tekst.

10 stappen om een boeiende gebruikerservaring te maken

Zoals met elk effect dat tekst met achtergrondafbeeldingen combineert, moet u ervoor zorgen dat uw tekst te allen tijde leesbaar blijft. Dit kan worden bereikt door een semi-transparante kleur op uw navigatielinks te plaatsen. Overweeg ook UX-leesbaarheid voor problemen zoals kleurblindheid die van invloed zijn op hoe gebruikers gekleurde tekst kunnen interpreteren.

Hier zullen we u laten zien hoe u een interactief navigatiedisplay maakt met nuttig en beschikbaar visuele aanwijzingen.

Download de bestanden voor deze tutorial hier

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — De Life Site van Ivan Aivazvsky verandert de achtergrondafbeeldingen als u boven links hangt (klik op de afbeelding om naar de website te gaan)

01. Maak het HTML-document aan

Maak de hoofd HTML-documentsjabloon, die bestaat uit de HTML-container die het hoofd- en lichaamsdeel opbergt.

De hoofdsectie slaat om beschrijving informatie, zoals de documenttitel, evenals links naar externe bronnen - dwz CSS en JavaScript.

Het lichaam slaat het documentinhoud op. Een significant kenmerk van het lichaam is het kenmerk 'Data-thema' dat het heeft toegepast - te wijzigen door Javascript om CSS-presentatiewijzigingen te activeren.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& LT; TITEL & GT; Navigatie Achtergrond & LT; / TITLE & GT;
& LT; LINK REL = "Stylesheet" Type = "Tekst / CSS" HREF = "Styles.css" / GT;
& LT; Script Type = "Tekst / Javascript" SRC = "Code.js" & GT; & LT; / Script & GT;
& LT; / HOOFD & GT;
& LT; Body Data-Theme & GT;
*** STAP 2
& LT; / BODY & GT;
& LT; / HTML & GT;

02. Voeg navigatie HTML toe

De pagina-inhoud bestaat uit een navigatiecontainer met links. De ID van de navigatie en de titels van de kindverbindingen worden door JavaScript gebruikt om te luisteren naar interacties en het kenmerk 'Data-thema' wijzigen gedefinieerd als onderdeel van de bodycontainer.

 & LT; NAV ID = "MAINNAV" & GT;
& LT; A HREF = "#" titel = "Page 1" & GT; Pagina 1 & LT; / A & GT;
& LT; A HREF = "#" titel = "Page 2" & GT; Pagina 2 & LT; / A & GT;
& lt; een href = "#" titel = "Page 3" & GT; Pagina 3 & LT; / A & GT;
& LT; / NAV & GT;

03. Start het CSS-bestand

De HTML-inhoud is nu voltooid, dus maak een nieuw bestand met de naam 'Styles.css'. Dit bestand slaat de CSS-formatteerregels op die de visuele presentatie besturen. Start dit bestand met regels om het HTML-document en het lichaam te presenteren om op het volledige scherm te verschijnen met behulp van een witte achtergrond en zwarte tekst.

 HTML, lichaam {
  Weergave: blok;
  Breedte: 100%;
  Hoogte: 100%;
  marge: 0;
  Vulling: 0;
  Font-familie: Helvetica, Sans-Serif;
  Kleur: # 000;

04. Stel regels voor visuals in

Een belangrijk onderdeel voor het effect is het gebruik van het kenmerk 'Data-thema' toegepast op het documentlichaam. Een regel is ingesteld om het standaardgedrag van de gegevens te definiëren - dat we zullen gebruiken voor achtergrondpositionering en veranderen van overgang.

Dit vermijdt de noodzaak om deze regeldefinities voor elk afzonderlijk thema te herhalen, waardoor uw webpagina's gemakkelijker te onderhouden zijn.

 [Data-thema] {
  Overgang: achtergrond 1s;
  Achtergrond: NO-REPEER CENTER CENTER;
  Achtergrondformaat: dekking; }

05. Ontwerp het thema

Het ontwerp van elk thema wordt ingesteld met behulp van de waarde van het attribuut voor data-thema.

Om het gewenste effect te bereiken, stellen we een andere achtergrondafbeelding in voor elke versie van het thema. De vorige stap zorgt voor alle standaardinstellingen die deze thema's erven.

 [Data-thema = "Pagina 1"] {
  Achtergrond-afbeelding: URL (beeld1.jpg);

[Data-thema = "Pagina 2"] {
  Achtergrond-afbeelding: URL (afbeelding2.jpg);

[Data-thema = "Page 3"] {
  Achtergrond-afbeelding: URL (afbeelding3.jpg);
}

06. Voeg een navigatiecontainer toe

De navigatiecontainer wordt gebruikt om ervoor te zorgen dat links worden gepresenteerd met een consistente breedte die in het midden van het scherm wordt geplaatst. Een breedte van 50% en automatische berekening die wordt gebruikt voor horizontale marinering wordt toegepast. Deze aanpak biedt een garantie voor consistentie, ongeacht de schermresolutie / grootte van de gebruiker.

 #MainNAV {
  Weergave: blok;
  Breedte: 50%;
  Marge: 0 Auto 0 Auto; }

07. Style Navigation Links

De koppelingen in de navigatiecontainer moeten worden weergegeven als blokken die worden ingesteld om aan te passen aan de breedte van de container. Dit betekent dat hun 100% breedte wordt gedefinieerd door de breedte van de container. Vulling, grenzen en achtergrondkleuring worden ook toegepast om ervoor te zorgen dat ze opvallen van de achtergrondafbeeldingen.

 #MainNAV A {
  Weergave: blok;
  Breedte: 100%;
  Achtergrond: RGBA (255,255,255, .3);
  Kleur: # 000;
  Vulling: 1em;
  marge-top: .5em;
  Grens: 1px solide;
#MainNAV A: Hover {
  Achtergrond: RGBA (0,0,0, .5);
  Kleur: #fff; }

08. Link-gebeurtenisluisteraars

De CSS is nu voltooid, dus maak een nieuw bestand met de naam 'Code.js' voor het JavaScript.

Het effect vereist elke link in de navigatie om te luisteren en reageren op een mouseover-evenement waar de gebruiker over een link zweeft. Deze luisteraar past de 'titel'-waarde van de link naar het gegevensthema-attribuut van het documenthuis - vandaar triggeert stijlen in de CSS.

Nadat het bladvenster was geladen, worden de Navigation Link-knooppunten in een array geplaatst, waarop een voor lus wordt gebruikt om de gebeurtenisluisteraar toe te passen.

 Window.AddeventListener ("Load", functie () {
  var-knooppunten = document.QuerySelectectorAlle ("# MAINNAV A");
  voor (var i = 0; i & lt; knooppunten.lengte; i ++) {
  knooppunten [i] .ADDEVENTLISTENER ("mouseover", functie () {
  Document.body.Setattribute ("Data-thema", dit.Getattribute ("titel"));
  
  
});

Dit artikel verscheen oorspronkelijk in Web Designer-nummer 262. Koop het hier

Gerelateerde artikelen:

10 Website-navigatietrends voor 2017
10 stappen om een boeiende gebruikerservaring te maken
Léonie Watson op waarom toegankelijkheid een integraal onderdeel moet zijn van de webontwerpprocessen

Voeg visuele aanwijzingen toe aan uw site

01. Maak het HTML-document aan

02. Voeg navigatie HTML toe

03. Start het CSS-bestand

04. Stel regels voor visuals in

05. Ontwerp het thema

06. Voeg een navigatiecontainer toe

07. Style Navigation Links

08. Link-gebeurtenisluisteraars

Procedures - Meest populaire artikelen

Maak je eigen stylus met slechts 4 huishoudelijke artikelen (serieus)

Hoe een Apple Watch-app te maken

Aan de slag met Redux Thunk

Hoe een 3D-object met three.js smelten

Een video toevoegen aan interactieve PDF's

Maak perfecte berichten in alle e-mailclients

Verf een harig huisdierportret

Maak gemengde inkten met InDesign

Categorieën