Hvordan lage en navigasjonslinje fra en uordnet liste over koblinger i Dreamweaver

Her er et flott CSS-triks for å gjøre om en punktliste til en navigasjonslinje i Dreamweaver med en enkel rollover-effekt. Å bruke en punktliste for navigasjonslinjer er en godt akseptert konvensjon for nettsteder som oppfyller gjeldende tilgjengelighetsstandarder.

Kreditt: Bilder av istockphoto.com

De samme koblingene finnes fortsatt i den uordnede listen, men bruken av stilene endrer utseendet dramatisk.

Kreditt: Bilder av istockphoto.com

Følg disse trinnene for å lage en navigasjonslinje ved å bruke CSS for å omdefinere den uordnede listen og lenkekodene:

Klikk for å plassere markøren der du vil opprette navigasjonslinjen på siden.

Skriv inn teksten du vil tjene som lenker, og separer hver ved å trykke på Retur- eller Enter-tasten for å lage en avsnittretur.

For å formatere koblingene som en uordnet liste, skiller du hver tekstlinje som du vil koble til med en

stikkord.

Opprett koblinger ved å velge hver tekstdel etter tur, klikke på Hyperlink-ikonet i Common Insert-panelet, og deretter velge siden du vil koble til eller skrive inn en URL.

Dra for å velge hele settet med koblinger, og klikk deretter på ikonet Uordnet liste i egenskapsinspektøren.

Et punkt vises i begynnelsen av hver lenke. Hvis en kobling ikke er satt av med et eget punkt, klikker du for å slette mellomrommet mellom den og koblingen før den, og trykker deretter på Retur eller Enter for å skille koblingene med en avsnittretur.

For å legge til en

tagg rundt en liste over koblinger (eller annet innhold som allerede er på en side), velg innholdet og klikk deretter på Div-ikonet i panelet Felles innsetting.

Dialogboksen Insert Div åpnes.

Legger til en

tag rundt den uordnede listen over koblinger er nyttig hvis du vil legge til formatering.

Velg Wrap Around Selection fra Sett inn-rullegardinlisten.

For mer presis kontroll over hvor du legger til en ny

tag, kan du velge alternativer fra rullegardinlisten Sett inn øverst i dialogboksen Insert Div.

Skriv inn et navn i feltet Klasse eller ID-feltet.

EN

taggen med klassen eller ID-navnet du skrev inn legges automatisk til på siden rundt listen over lenker.

Klikk på knappen Ny CSS-regel nederst i Insert Div-dialogboksen.

Det nye CSS-regelnavnet legges til listen over stilnavn i CSS Designer Selectors-panelet.

I Egenskaper-panelet angir du ønskede innstillinger for farge, bakgrunn, størrelse, marger og utfylling.

Stilformateringen brukes automatisk på innholdet i

tag fordi du brukte stilen slik du opprettet den i trinn 5–7.

For å lage en sammensatt stil som vil formatere den uordnede listen bare når den brukes i navigasjonslinjen, oppretter du en sammensatt stil som inkluderer klassenavnet .navbar:

Plasser markøren hvor som helst i punktlisten.

Klikk på plusstegnet (+) øverst i Velgere-panelet.

Kontroller at Dreamweaver automatisk skrev inn .navbar ul som navnet på en ny stil i Selectors-panelet i feltet Selector Name.

I egenskapspanelet setter du margene og utfylling til 0.

Lag en sammensatt stil for å omdefinere listeelement-taggene:

Plasser markøren hvor som helst i punktlisten.

Klikk på plusstegnet øverst i Velgere-panelet.

Kontroller at Dreamweaver automatisk skrev inn .navbar ul li som navnet på en ny stil i Selectors-panelet i feltet Selector Name.

I egenskapspanelet setter du Display til Inline.

Endre listestiltypen til Ingen for å fjerne kulen.

Sett venstre og høyre marg til 20 piksler.

Dette trinnet skiller listeelementene fra hverandre i den horisontale listen. Du kan endre innstillingen for å skape den mengden plass mellom lenker som passer best til designet ditt.

Lag en stil for å omdefinere koblingstaggen:

Klikk for å plassere markøren i en lenke i navigasjonslinjen.

Klikk på plusstegnet øverst i Velgere-panelet.

Hvis du vil endre stilnavnet, dobbeltklikker du på navnet i Selectors-panelet og skriver inn navnet du vil bruke.

I Tekst-delen av Egenskaper-panelet, sett Text-Decoration til Ingen.

Fortsatt i tekstdelen, velg en farge fra fargebrønnen for å spesifisere fargen på lenker når de er lastet inn på en side.

Opprett en ny stil for å omdefinere hover-link-taggen slik at lenkefargen endres når en bruker ruller markøren over lenken:

Klikk på plusstegnet øverst i Velgere-panelet.

I feltet Velgernavn skriver du inn .navbar a:hover.

I Tekst-delen av Egenskaper-panelet, sett Text-Decoration til Ingen.

Fortsatt i tekstdelen, velg en farge fra fargebrønnen for å spesifisere koblingens farge når brukere ruller markøren over lenken.

Opprett en ny stil for å omdefinere den besøkte lenke-taggen slik at koblingsfargen endres etter at en bruker klikker på en lenke:

Klikk på plusstegnet øverst i Velgere-panelet.

I feltet Velgernavn skriver du inn .navbar a:visited.

I Tekst-delen av Egenskaper-panelet, sett Text-Decoration til Ingen.

Fortsatt i tekstdelen, velg en farge fra fargebrønnen for å spesifisere koblingens farge etter at den har blitt besøkt.

Klikk Live-knappen øverst i arbeidsområdet eller klikk Forhåndsvisning-knappen for å vise siden i en nettleser for å se effekten av lenkestilene.