Kuidas luua Dreamweaveris järjestamata linkide loendist navigeerimisriba

Siin on suurepärane CSS-i nipp täpploendi muutmiseks Dreamweaveris navigeerimisribaks lihtsa ümberlülitusefektiga. Täpploendi kasutamine navigeerimisribade jaoks on praegustele juurdepääsetavuse standarditele vastavate veebisaitide jaoks hästi aktsepteeritud tava.

Krediit: fotod saidilt istockphoto.com

Järjestamata loendis on endiselt samad lingid, kuid stiilide rakendamine muudab nende välimust dramaatiliselt.

Krediit: fotod saidilt istockphoto.com

CSS-i abil navigeerimisriba loomiseks järjestamata loendi ja lingimärgendite ümberdefineerimiseks toimige järgmiselt.

Klõpsake kursori asetamiseks kohta, kuhu soovite lehel navigeerimisriba luua.

Sisestage tekst, mida soovite linkidena kasutada, eraldades need lõigu tagastuse loomiseks klahvi Return või Enter klahviga.

Linkide vormindamiseks järjestamata loendina eraldage iga tekstirida, mille soovite linkida, tähega a

silt.

Looge linke, valides kordamööda iga tekstiosa, klõpsates paneelil Common Insert ikooni Hüperlink ja seejärel valides lehe, millele soovite linkida, või sisestades URL-i.

Lohistage, et valida kogu linkide komplekt, ja seejärel klõpsake atribuutide inspektoris ikooni Järjestamata loend.

Iga lingi alguses kuvatakse täpp. Kui mõni link ei ole eraldi täppjaotisega, klõpsake selle ja selle ees oleva lingi vahelise tühiku kustutamiseks ja seejärel vajutage klahvi Return või Enter, et eraldada lingid lõigu tagastusmärgiga.

Lisamiseks a

sildista linkide loendi (või mõne muu lehel juba oleva sisu) ümber, valige sisu ja seejärel klõpsake paneelil Common Insert ikooni Div.

Avaneb dialoogiboks Insert Div.

Lisades a

silt järjestamata linkide loendi ümber on abiks, kui soovite lisada vormingu.

Valige ripploendist Lisa valik Wrap Around Selection.

Täpsemaks kontrolliks selle üle, kuhu uue lisate

sildi, saate valida suvandid dialoogiboksi Insert Div ülaosas olevast ripploendist Lisa.

Sisestage nimi väljale Class või ID.

A

sisestatud klassi või ID-nimega silt lisatakse automaatselt linkide loendit ümbritsevale lehele.

Klõpsake dialoogiboksi Insert Div allosas nuppu Uus CSS-reegel.

Uus CSS-reegli nimi lisatakse stiilinimede loendisse CSS-i kujundaja valijate paneelil.

Määrake paneelil Atribuudid soovitud värvi, tausta, suuruse, veeriste ja polsterduse sätted.

Stiili vorming rakendatakse automaatselt sisule

sildi, sest rakendasite stiili nii, nagu lõite selle sammudes 5–7.

Liitlaadi loomiseks, mis vormindab järjestamata loendi ainult siis, kui seda kasutatakse navigeerimisribal, looge liitstiil, mis sisaldab klassi nime .navbar:

Asetage kursor täpploendis ükskõik kuhu.

Klõpsake valijate paneeli ülaosas plussmärki (+).

Väljal Selector Name veenduge, et Dreamweaver sisestas Selectors paneelil uue stiili nimeks automaatselt .navbar ul.

Määrake paneelil Atribuudid veeristeks ja polsterduseks 0.

Loo liitstiil loendiüksuse siltide uuesti määratlemiseks:

Asetage kursor täpploendis ükskõik kuhu.

Klõpsake valijate paneeli ülaosas plussmärki.

Väljal Selector Name veenduge, et Dreamweaver sisestas Selectors paneelil uue stiili nimeks automaatselt .navbar ul li.

Seadistage paneelil Atribuudid suvandi Kuva olekuks Inline.

Täpi eemaldamiseks muutke loendi stiili tüübiks Puudub.

Seadke vasak ja parem veeris 20 pikslile.

See samm eraldab horisontaalloendis loendi üksused üksteisest. Saate sätet muuta, et luua linkide vahele ruumi, mis sobib teie kujundusega kõige paremini.

Looge lingimärgendi uuesti määratlemiseks stiil:

Klõpsake kursori asetamiseks navigeerimisribal olevale lingile.

Klõpsake valijate paneeli ülaosas plussmärki.

Kui soovite stiili nime muuta, topeltklõpsake nime paneelil Selectors ja sisestage nimi, mida soovite kasutada.

Paneeli Atribuudid jaotises Tekst määrake oleku Text-Decoration väärtuseks Puudub.

Jaotises Tekst valige värvikaevust värv, et määrata linkide värv, kui need lehele laaditakse.

Looge hõljuklingi märgendi ümberdefineerimiseks uus stiil, et lingi värv muutuks, kui kasutaja kursorit lingi kohal viib:

Klõpsake valijate paneeli ülaosas plussmärki.

Sisestage väljale Valija nimi .navbar a:hover.

Paneeli Atribuudid jaotises Tekst määrake oleku Text-Decoration väärtuseks Puudub.

Jaotises Tekst valige siiski värvikaevust värv, et määrata lingi värv, kui kasutajad kursori lingi kohal liigutavad.

Looge külastatud lingi märgendi uuesti määratlemiseks uus stiil, et lingi värv muutuks pärast seda, kui kasutaja lingil klõpsab:

Klõpsake valijate paneeli ülaosas plussmärki.

Sisestage väljale Valija nimi .navbar a:visited.

Paneeli Atribuudid jaotises Tekst määrake oleku Text-Decoration väärtuseks Puudub.

Ikka jaotises Tekst valige värvikaevust värv, et määrata lingi värv pärast selle külastamist.

Klõpsake tööala ülaosas nuppu Reaalajas või klõpsake nuppu Eelvaade, et vaadata lehte brauseris ja näha linkistiilide mõju.