Hvordan du oppretter en navigeringslinje fra en uordnet liste over lenker i Dreamweaver - dummies

Her er et flott CSS-triks for å snu en punktliste i en navigeringslinje i Dreamweaver med en enkel overgangseffekt. Ved hjelp av en punktliste for navigasjonsbjelker 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 sitt utseende dramatisk.

Kreditt: Bilder av istockphoto. com

Følg disse trinnene for å opprette en navigasjonslinje ved hjelp av CSS for å omdefinere den uordnede listen og koblingskodene:

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

2. Skriv inn teksten du vil tjene som koblingene, skille hver ved å trykke på Retur eller Enter-tasten for å opprette en avsnittreferanse.

   For å formatere linkene som en uordnet liste, skiller du hver linje med tekst som du vil koble til med en

   -kode.

3. Lag koblinger ved å velge hvert tekststykke igjen, klikk på Hyperlink-ikonet i fellesinnleggspanelet, og velg siden du vil koble til eller angi en URL.

4. Dra for å velge hele settet av lenker, og klikk deretter ikonet Uordnet liste i egenskapsinspektøren.

   Et punktpunkt vises i begynnelsen av hver lenke. Hvis en kobling ikke er avstengt med en egen kule, klikker du for å slette mellomrommet mellom linken og koblingen før den, og trykk deretter på Retur eller Enter for å skille linkene med en avtale.

   

5. Hvis du vil legge til en etikett rundt en liste over koblinger (eller annet innhold som allerede finnes på en side), velger du innholdet og klikker deretter Div-ikonet i fellesinnleggspanelet.

   Dialogboksen Sett inn div vises.

   Hvis du vil legge til formatering, er det å legge til en etikett rundt den uordnede listen over koblinger.

6. Velg Wrap Around Selection fra rullegardinlisten Sett inn.

   For mer presis kontroll over hvor du legger til en ny tagg, kan du velge alternativer fra rullegardinlisten Sett inn øverst i dialogboksen Sett inn div.

   

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

   En etikett med klassen eller ID-navnet du skrev inn, legges automatisk til siden rundt listen over lenker.

8. På bunnen av dialogboksen Sett inn Div, klikk på Ny CSS Rule-knappen.

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

9. I Egenskaper-panelet angir du de ønskede innstillingene for farge, bakgrunn, størrelse, marginer og utfylling.

   Stilsformatering brukes automatisk til innholdet i taggen fordi du brukte stilen som du opprettet den i trinn 5-7.

10. Hvis du vil opprette en sammensatt stil som bare formaterer den uordnede listen når den brukes i navigasjonslinjen, oppretter du en sammensatt stil som inneholder klassenavnet. navbar:

    1. Plasser markøren hvor som helst i punktlisten.

    2. Klikk på plustegnet (+) øverst på Selectors-panelet.

    3. Kontroller at Dreamweaver automatisk er angitt i feltet Velgernavn. navbar ul som navnet på en ny stil i Selectors-panelet.

    4. I Egenskaper-panelet angir du margene og polstring til 0.

11. Opprett en sammensatt stil for å omdefinere listen elementetiketter:

    1. Plasser markøren hvor som helst i punktlisten.

    2. Klikk på plustegnet øverst på Selectors-panelet.

    3. Kontroller at Dreamweaver automatisk er angitt i feltet Velgernavn. navbar ul li som navnet på en ny stil i Selectors-panelet.

    4. I skjermbildet Egenskaper, still inn skjermbildet til inline.

    5. Endre listestype til Ingen for å fjerne kule.

    6. Still venstre og høyre margin til 20 piksler.

       Dette trinnet skiller listepostene fra hverandre i den horisontale listen. Du kan endre innstillingen for å skape mengden mellomrom mellom koblinger som passer best for ditt design.

12. Opprett en stil for å omdefinere linketiketten:

    1. Klikk for å plassere markøren din i en lenke i navbarnavnet.

    2. Klikk på plustegnet øverst på Selectors-panelet.

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

    4. I Tekst-delen av Egenskaper-panelet, sett Tekst-dekorasjon til Ingen.

    5. Fortsett i Tekst-delen, velg en farge fra fargebrønnen for å angi farge på koblinger når de lastes på en side.

13. Opprett en ny stil for å omdefinere hover-link-taggen slik at koblingsfargen endres når en bruker ruller en markør over koblingen:

    1. Klikk plustegnet øverst på Selectors-panelet.

    2. I feltet Velgerenavn, skriv inn. navbar a: svever.

    3. I Tekst-delen av Egenskaper-panelet, sett Tekst-dekorasjon til Ingen.

    4. Fortsett i tekst-delen, velg en farge fra fargebrønnen for å angi lenkenes farge når brukerne ruller markøren over koblingen.

14. Opprett en ny stil for å omdefinere den besøkte koblingstaggen, slik at koblingsfarge endres etter at en bruker klikker en kobling:

    1. Klikk plustegnet øverst på Selectors-panelet.

    2. I feltet Velgerenavn, skriv inn. navbar a: besøkt.

    3. I Tekst-delen av Egenskaper-panelet, sett Tekst-dekorasjon til Ingen.

    4. Fortsett i tekst-delen, velg en farge fra fargebrønnen for å angi linkens farge etter at den har blitt besøkt.

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