Tilføj visuelle signaler til dit websted

Sep 16, 2025
hvordan

Det er irriterende for webstedets brugere at klikke på et link kun for at finde ud af, at websiden ikke er af interesse, spilder deres tid. Brug af et billede på siden Baggrund er en fantastisk måde at give brugerne på en indikation af, hvad de kan forvente fra et link, før du forpligter sig til at indlæse siden. Du kan se et godt eksempel på denne teknik i brug på Ivan Aivazvsky Life Site .

Brug af sidens baggrund kan også hjælpe dyslektiske læsere eller dem, der taler engelsk som et ekstra sprog. I disse tilfælde kan du kommunikere yderligere oplysninger til brugeren uden at overbelaste dem med for meget tekst.

  • 10 trin til at oprette en engagerende brugeroplevelse

Som med enhver effekt, der kombinerer tekst med baggrundsbilleder, skal du sørge for, at din tekst forbliver læsbar til enhver tid. Dette kan opnås ved at placere en halvgennemsigtig farve på dine navigationslinks. Overvej også UX læsbarhed for problemer som farveblindhed, der påvirker, hvordan brugerne er i stand til at fortolke farvet tekst.

Her vil vi vise dig, hvordan du opretter en interaktiv navigationsdisplay med nyttige og tilgængelig Visuelle signaler.

Download filerne til denne vejledning her .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website)

IVAN AIVAZVSKY LIFE-webstedet ændrer baggrundsbillederne, når du svæver over links (klik på billedet for at gå til hjemmesiden)

01. Opret HTML-dokumentet

Opret den vigtigste HTML-dokumentskabelon, som består af HTML-beholderen, der lagrer hoved- og kropsdelen.

Hovedafsnittet gemmer Beskrivelse oplysninger som dokumentets titel, samt links til eksterne ressourcer - dvs. CSS og JavaScript.

Kroppen gemmer dokumentindholdet. Et væsentligt træk ved kroppen er 'Data-tema' -attribut, den har anvendt - at blive ændret ved JavaScript for at udløse CSS-præsentationsændringer. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; navigation baggrund & lt; / titel & 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; / Head & GT;
& lt; kropsdata-tema & gt;
*** Trin 2.
& lt; / body & gt;
& lt; / HTML & GT;

02. Tilføj navigation HTML

Sideindholdet består af en navigationsbeholder, der indeholder links. Navigationens ID og titlerne på barnet links vil blive brugt af JavaScript for at lytte til interaktioner og ændre 'Data-tema'-attributten defineret som en del af kroppens beholder. 

 & LT; NAV ID = "MAINNAV" & GT;
& lt; a href = "#" titel = "side 1" & gt; side 1 & lt; / a & gt;
& lt; en href = "#" title = "side 2" & gt; side 2 & lt; / a & gt;
& lt; en href = "#" titel = "side 3" & gt; side 3 & lt; / a & gt;
& lt; / NAV & GT;

03. Start CSS-filen

HTML-indholdet er nu komplet, så opret en ny fil kaldet 'Styles.css'. Denne fil gemmer CSS-formateringsreglerne, der styrer den visuelle præsentation. Start denne fil med regler for at præsentere HTML-dokumentet, og dets krop skal vises på tværs af hele skærmen ved hjælp af en hvid baggrund og sort tekst. 

 HTML, krop {
  Display: Blok;
  Bredde: 100%;
  Højde: 100%;
  Margin: 0;
  Padding: 0;
  Font-familie: Helvetica, Sans-Serif;
  Farve: # 000; }

04. Indstil regler for visuelle

En vigtig komponent for effekten er brugen af ​​'Data-tema'-attributten, der anvendes til dokumentlegemet. En regel er indstillet til at definere dataens standardadfærd - som vi bruger til baggrundsplacering og ændring af overgang.

Dette undgår behovet for at gentage disse regel definitioner for hvert enkelt tema, hvilket gør dine websider lettere at opretholde. 

 [Data-tema] {
  Overgang: Baggrund 1S;
  BAGGRUND: NO-REPEAT CENTER CENTER;
  Baggrundsstørrelse: Dæk; }

05. Design temaet

Designet af hvert tema er angivet ved hjælp af værdien af ​​datatemaattributten.

For at opnå den ønskede effekt sætter vi et andet baggrundsbillede for hver version af temaet. Det foregående trin tager sig af alle de standardindstillinger, som disse temaer vil arve. 

 [Data-tema = "side 1"] {
  Baggrundsbillede: URL (image1.jpg);
}
[Data-tema = "side 2"] {
  BAGGRUND-billede: URL (image2.jpg);
}
[Data-tema = "Side 3"] {
  BAGGRUND-billede: URL (image3.jpg);
}

06. Tilføj en navigationsbeholder

Navigationsbeholderen bruges til at sikre, at links er præsenteret med en ensartet bredde placeret i midten af ​​skærmen. En bredde på 50% og autoberegning, der anvendes til vandret margining, påføres. Denne tilgang giver en garanti for sammenhæng uanset brugerens skærmopløsning / størrelse. 

 #mainnav {
  Display: Blok;
  Bredde: 50%;
  Margin: 0 Auto 0 Auto; }

07. Style Navigation Links

Linkene inde i navigationsbeholderen skal vises som blokke indstillet til at tilpasse sig bredden af ​​beholderen. Det betyder, at deres 100% bredde er defineret af beholderens bredde. Padding, grænser og baggrundsfarvning anvendes også for at sikre, at de skiller sig ud fra baggrundsbillederne. 

 #mainnav a {
  Display: Blok;
  Bredde: 100%;
  Baggrund: RGBA (255.255.255, .3);
  Farve: # 000;
  Padding: 1em;
  Margin-top: .5em;
  Border: 1px fast; }
#mainnav A: Hover {
  Baggrund: RGBA (0,0,0, .5);
  Farve: #fff; }

08. Link event lyttere

CSS er nu komplet, så opret en ny fil kaldet 'CODE.JS' for JavaScript.

Effekten kræver, at hvert link inde i navigationen for at lytte og reagere på en mouseover-begivenhed, hvor brugeren svæver over et link. Denne lytter anvender "titel" -værdien af ​​linket til datatemaattributten til dokumentlegemet - dermed udløser stilarter i CSS.

Når sidevinduet var indlæst, placeres navigationslinknuderne i en matrix, hvorpå A til sløjfe bruges til at anvende hændelseslytteren. 

 Window.AddeventListener ("Load", funktion () {
  VAR NODES = DOCUMENT.QUERYSELECTORALL ("# MAINNAV A");
  for (var I = 0; I & lt; nodes.længde; i ++) {
  noder [i] .AddeventListener ("mouseover", funktion () {
  Dokument.Body.Setattribute ("Data-tema", denne.getattribute ("titel"));
  });
  }
});

Denne artikel optrådte oprindeligt i webdesigner problem 262. Køb det her !

Relaterede artikler:

  • 10 Website Navigation Trends for 2017
  • 10 trin til at oprette en engagerende brugeroplevelse
  • Léonie Watson om hvorfor tilgængelighed skal være en integreret del af webdesignprocesserne

hvordan - Mest populære artikler

Sådan reposter du på Instagram

hvordan Sep 16, 2025

(Billedkredit: Repost: For Instagram) Hvis du vil repostere på Instagram, finder du ikke så let som på andre socia..

Opret en old-school anaglyph effekt

hvordan Sep 16, 2025

(Billedkredit: Travis Knight) En anaglyph effekt er det rigtige navn til den klassiske 3D-stil, hvor du skal bære r�..

Sådan maler du en Elven Maiden

hvordan Sep 16, 2025

I denne vejledning styrer jeg dig gennem min proces for at skabe et fængslende fantasy portræt af en Elven Maiden. Hendes histo..

Sådan opretter du en fotorealistisk rumscene

hvordan Sep 16, 2025

Vil du vide, hvordan man skaber en realistisk 3D arkitektonisk flyvning, men er ikke sikker på, hvor du skal fokusere din indsat..

Sådan maler man realistiske bølger i Photoshop

hvordan Sep 16, 2025

Når man maler ocean scener i Photoshop CC. , som med de fleste af mine malerier, begynder jeg med at indsamle nogle marine fotoreferencer for at sikre, at jeg har en god forst..

Sådan prototype En mobil app med Origami Studio

hvordan Sep 16, 2025

I en verden, hvor brugerne har høje forventninger til deres erfaring på web- og mobilen, er prototyping og brugerevaluering nøglen. Det er nu almindeligt at progressivt iterere på prototy..

Sådan opretter du furry tegneseriefigurer

hvordan Sep 16, 2025

Side 1 af 2: Side 1 Side 1 Side 2. Tegn design. er en k..

Sådan maler man en traditionel British Village Scene

hvordan Sep 16, 2025

Middelalderlige kirker, grønne græsgange og skifer-toppede gårdhuse er synonymt med de landsbyer, der kaster det britiske land..

Kategorier