Tilføj visuelle signaler til dit websted

Feb 3, 2026
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 tilføjes animation til SVG med CSS

hvordan Feb 3, 2026

[Billede: Web Designer] Når det kommer til at animere med SVGS, kan en stor slukning være ideen om at blive skruet ..

Sådan kombineres 3D og komisk kunst i Zbrush

hvordan Feb 3, 2026

Side 1 af 2: Side 1 Side 1 Side 2. 3D-specialist Glen Southern..

Sådan oprettes et app-ikon på Illustrator

hvordan Feb 3, 2026

Side 1 af 2: Sådan oprettes et app-ikon på Illustrator: trin 01-11 Sådan oprettes et app-ikon på Illustrator: trin 01-11 ..

Sådan vælges med Photoshop's Lasso Tools

hvordan Feb 3, 2026

Valg er en af ​​de mest vitale opgaver, du lærer at mestre i Photoshop CC. . Et godt udvalg vil give realisme til et billede, for ikke at nævne renhed. Men med så mange ..

Sådan oprettes glasur med akvarel

hvordan Feb 3, 2026

For denne workshop tager jeg dig trin for trin gennem en af ​​mine malerier - dækker alt fra konceptskitsering til a..

Sådan maler du et bybillede med farveblokke

hvordan Feb 3, 2026

Storslået udsigt, fantastiske skyliner og smukke bybilleder gør gode fotografier, men kan være ret skræmmende fra kunstnerens..

5 måder at styre cashflow effektivt

hvordan Feb 3, 2026

Kontrol af din cash flow er nøglen til freelance succes, og der er nogle hårde og hurtige regler for at sikre, at du gør det e..

Oplev stil og stof af typografi

hvordan Feb 3, 2026

Afgørelser, beslutninger, beslutninger ... Hvis der er et centralt aspekt til processen med at arbejde med type, er det, at designeren eller typografen skal gøre en lang række beslutninger..

Kategorier