Legg til visuelle signaler til nettstedet ditt

Sep 11, 2025

hvordan

[1. 3]

Det er irriterende for nettstedbrukere å klikke på en kobling bare for å finne at nettsiden ikke er av interesse, og kaster bort tiden sin. Bruke et bilde på siden Bakgrunn er en fin måte å gi brukerne en indikasjon på hva du kan forvente fra en lenke før du forplikter deg til å laste siden. Du kan se et godt eksempel på denne teknikken i bruk på Ivan Aivazvsky Life Site .

Bruke siden Bakgrunn kan også hjelpe dyslektiske lesere eller de som snakker engelsk som et ekstra språk. I disse tilfellene kan du kommunisere ytterligere informasjon til brukeren uten å overbelaste dem med for mye tekst.

10 trinn for å skape en engasjerende brukeropplevelse

Som med hvilken som helst effekt som kombinerer tekst med bakgrunnsbilder, må du sørge for at teksten din forblir lesbar til enhver tid. Dette kan oppnås ved å plassere en halv gjennomsiktig farge på navigasjonskoblingene dine. Vurder også UX-lesbarhet for problemer som fargeblindhet som påvirker hvordan brukerne kan tolke farget tekst.

Her vil vi vise deg hvordan du lager en interaktiv navigasjonsvisning med nyttig og tilgjengelig visuelle hint.

Last ned filene for denne opplæringen 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-siden endrer bakgrunnsbilder som du svinger over koblinger (klikk på bildet for å gå til nettstedet)

01. Opprett HTML-dokumentet

Opprett den viktigste HTML-dokumentmalen, som består av HTML-beholderen som lagrer hodet og kroppsdelen.

Hoveddelen lagrer beskrivelsesinformasjon som dokumenttittel, samt lenker til eksterne ressurser - dvs. CSS og JavaScript.

Kroppen lagrer dokumentinnholdet. En signifikant funksjon i kroppen er "Data-tema" -attributtet den har søkt - for å bli endret av JavaScript for å utløse CSS-presentasjonsendringer.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; navigasjonsbakgrunn & 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; / head & gt;
& lt; body data-tema & gt;
*** STEG 2
& lt; / body & gt;
& lt; / html & gt;

02. Legg til navigasjon HTML

Sidens innhold består av en navigasjonsbeholder som inneholder lenker. Navigasjonens ID og titlene til barnelinkene vil bli brukt av JavaScript for å lytte til interaksjoner og endre "Data-tema" -attributtet definert som en del av kroppsbeholderen.

 & lt; nav id = "mainnav" & gt;
& lt; a href = "#" title = "side 1" & gt; side 1 & lt; / a & gt;
& lt; a href = "#" title = "Page 2" & gt; side 2 & lt; / a & gt;
& lt; a href = "#" title = "Page 3" & gt; Page 3 & lt; / a & gt;
& lt; / Nav & gt;

03. Start CSS-filen

HTML-innholdet er nå fullført, så opprett en ny fil kalt 'Styles.css'. Denne filen lagrer CSS-formateringsreglene som styrer den visuelle presentasjonen. Start denne filen med regler for å presentere HTML-dokumentet og dets kropp skal vises over hele skjermen ved hjelp av en hvit bakgrunn og svart tekst.

 html, kropp {
  Skjerm: blokk;
  Bredde: 100%;
  Høyde: 100%;
  margin: 0;
  polstring: 0;
  Font-Family: Helvetica, Sans-serif;
  Farge: # 000; }

04. Sett regler for visuelle

En viktig komponent for effekten er bruken av "Data-tema" -attributtet som brukes på dokumentorganet. En regel er satt til å definere dataens standardadferd - som vi skal bruke til bakgrunnsposisjonering og endring av overgang.

Dette unngår behovet for å gjenta disse regeldefinisjonene for hvert enkelt tema, noe som gjør at nettsidene dine er enklere å vedlikeholde.

 [Data-tema] {
  Overgang: Bakgrunn 1s;
  Bakgrunn: No-Repeat Center Center;
  Bakgrunnsstørrelse: Deksel; }

05. Design temaet

Utformingen av hvert tema er satt til å bruke verdien av datatemaet.

For å oppnå ønsket effekt, setter vi et annet bakgrunnsbilde for hver versjon av temaet. Det forrige trinnet tar seg av alle standardinnstillingene som disse temaene vil arve.

 [Data-tema = "Side 1"] {
  Bakgrunnsbilde: URL (image1.jpg);
}
[Data-tema = "Page 2"] {
  Bakgrunnsbilde: URL (image2.jpg);
}
[Data-tema = "Page 3"] {
  Bakgrunnsbilde: URL (image3.jpg);
}

06. Legg til en navigasjonsbeholder

Navigasjonsbeholderen brukes til å sikre at koblingene presenteres med en konsistent bredde plassert i midten av skjermen. En bredde på 50% og automatisk beregning som brukes for horisontal marginering, påføres. Denne tilnærmingen gir en garanti for konsistens uavhengig av brukerens oppløsning / størrelse.

 #mainnav {
  Skjerm: blokk;
  Bredde: 50%;
  Margin: 0 Auto 0 Auto; }

07. Stilnavigasjonsforbindelser

Lenkene inne i navigasjonsbeholderen skal vises som blokker som er satt til å tilpasse seg bredden på beholderen. Dette betyr at deres 100% bredde er definert av beholderens bredde. Padding, grenser og bakgrunnsfarging brukes også for å sikre at de skiller seg ut fra bakgrunnsbilder.

 #mainnav a {
  Skjerm: blokk;
  Bredde: 100%;
  Bakgrunn: RGBA (255,255,255 ,,3);
  Farge: # 000;
  polstring: 1em;
  margin-top: .5em;
  grensen: 1px solid; }
#Mainnav A: Hover {
  Bakgrunn: RGBA (0,0,0, .5);
  farge: #fff; }

08. Link Event Listeners

CSS er nå fullført, så opprett en ny fil kalt 'Code.js' for JavaScript.

Effekten krever hver lenke inne i navigasjonen til å lytte og reagere på en mouseoverhendelse der brukeren svinger over en lenke. Denne lytteren bruker "tittelen" -verdien av lenken til datatemaet-attributtet til dokumentorganet - dermed utløse stiler i CSS.

Etter at sidevinduet hadde lastet, er navigasjonslenknappene plassert i en matrise, hvorved A for Loop brukes til å bruke hendelseslisten.

 window.addeventlistener ("last", funksjon () {
  var noder = document.queySelectorAll ("# mainnav a");
  for (var I = 0; i & lt; noder.length; i ++) {
  noder [i] .addeventlistener ("mouseover", funksjon () {
  document.body.setattribute ("Data-tema", denne.getattribute ("tittel"));
  });
  }
});

Denne artikkelen opprinnelig oppstod i webdesignerproblemet 262. Kjøp det her !

Relaterte artikler:

10 Nettstednavigasjonstrender for 2017
10 trinn for å skape en engasjerende brukeropplevelse
Léonie Watson på hvorfor tilgjengelighet må være en integrert del av webdesignprosessene

Legg til visuelle signaler til nettstedet ditt

01. Opprett HTML-dokumentet

02. Legg til navigasjon HTML

03. Start CSS-filen

04. Sett regler for visuelle

05. Design temaet

06. Legg til en navigasjonsbeholder

07. Stilnavigasjonsforbindelser

08. Link Event Listeners

hvordan - Mest populære artikler

Hvordan bygge en blogg med Jekyll

Tegn en figur på under fem minutter

Hvordan bygge komplekse layouter ved hjelp av CSS

Nivå opp spillkarakterer med kreativ montering

Lag et tegn med en sterk pose i Photoshop

Lag perfekte meldinger i alle e-postklienter

Hvordan maling buet glass på en romhjelm

Opprett en app som samler sensordata

Kategorier