Kaip sukurti naršymo juostą iš netvarkingo nuorodų sąrašo „Dreamweaver“.

Štai puikus CSS triukas, kaip paversti sąrašą su ženkleliais naršymo juosta „Dreamweaver“ naudojant paprastą perkėlimo efektą. Naršymo juostų sąrašo su ženkleliais naudojimas yra gerai priimtas tinklalapių, atitinkančių dabartinius pritaikymo neįgaliesiems standartus, taisyklė.

Kreditas: istockphoto.com nuotraukos

Tos pačios nuorodos vis dar yra netvarkingame sąraše, tačiau stilių taikymas labai pakeičia jų išvaizdą.

Kreditas: istockphoto.com nuotraukos

Norėdami sukurti naršymo juostą naudodami CSS, kad iš naujo apibrėžtumėte nerūšiuotą sąrašą ir nuorodų žymas, atlikite šiuos veiksmus:

Spustelėkite, kad nukreiptumėte žymeklį ten, kur norite sukurti naršymo juostą puslapyje.

Įveskite tekstą, kurį norite naudoti kaip nuorodas, atskirdami kiekvieną paspausdami klavišą „Return“ arba „Enter“, kad sukurtumėte pastraipos grąžinimą.

Norėdami formatuoti nuorodas kaip nerūšiuotą sąrašą, kiekvieną teksto eilutę, kurią norite susieti, atskirkite a

žyma.

Kurkite nuorodas paeiliui pažymėdami kiekvieną teksto dalį, spustelėdami hipersaito piktogramą skydelyje Bendras įterpimas, tada pasirinkdami puslapį, į kurį norite susieti, arba įvesdami URL.

Vilkite, kad pasirinktumėte visą nuorodų rinkinį, tada spustelėkite Netvarkingo sąrašo piktogramą nuosavybės inspektoriuose.

Kiekvienos nuorodos pradžioje rodomas ženklelis. Jei kuri nors nuoroda nepažymima atskiru ženkleliu, spustelėkite, kad ištrintumėte tarpą tarp jos ir nuorodos prieš ją, tada paspauskite „Return“ arba „Enter“, kad atskirtumėte nuorodas pastraipos grįžimu.

Norėdami pridėti a

pažymėkite nuorodų sąrašą (arba bet kokį kitą turinį, kuris jau yra puslapyje), pasirinkite turinį ir spustelėkite Div piktogramą skydelyje Bendras įterpimas.

Atsidaro dialogo langas Įterpti skirstymą.

Pridedant a

žyma aplink nerūšiuotą nuorodų sąrašą yra naudinga, jei norite pridėti formatavimą.

Išskleidžiamajame sąraše Įterpti pasirinkite Apvyniokite pasirinkimą.

Norėdami tiksliau valdyti, kur pridėti naują

žymą, galite pasirinkti parinktis iš išskleidžiamojo sąrašo Įterpti dialogo lango Įterpti skirstymą viršuje.

Lauke Klasė arba ID įveskite pavadinimą.

A

žyma su įvestu klasės ar ID pavadinimu automatiškai įtraukiama į puslapį, supantį nuorodų sąrašą.

Dialogo lango Insert Div apačioje spustelėkite mygtuką Nauja CSS taisyklė.

Naujas CSS taisyklės pavadinimas pridedamas prie stilių pavadinimų sąrašo skydelyje CSS Designer Selectors.

Skydelyje Ypatybės nurodykite norimus spalvos, fono, dydžio, paraščių ir užpildymo parametrus.

Stiliaus formatavimas automatiškai taikomas turiniui

žymą, nes pritaikėte stilių taip, kaip jį sukūrėte atlikdami 5–7 veiksmus.

Norėdami sukurti sudėtinį stilių, kuris suformatuotų nerūšiuotą sąrašą tik tada, kai jis bus naudojamas naršymo juostoje, sukurkite sudėtinį stilių, kuriame būtų klasės pavadinimas .navbar:

Padėkite žymeklį bet kurioje ženklelių sąrašo vietoje.

Spustelėkite pliuso ženklą (+) skydelio Selectors viršuje.

Lauke Selector Name įsitikinkite, kad Dreamweaver automatiškai įvedė .navbar ul kaip naujo stiliaus pavadinimą Selectors skydelyje.

Skydelyje Ypatybės nustatykite paraštes ir užpildymą į 0.

Sukurkite sudėtinį stilių, kad iš naujo apibrėžtumėte sąrašo elementų žymas:

Padėkite žymeklį bet kurioje ženklelių sąrašo vietoje.

Spustelėkite pliuso ženklą skydelio Selectors viršuje.

Lauke Selector Name įsitikinkite, kad Dreamweaver automatiškai įvedė .navbar ul li kaip naujo stiliaus pavadinimą Selectors skydelyje.

Skydelyje Ypatybės nustatykite ekraną į Inline.

Pakeiskite sąrašo stiliaus tipą į Nėra, kad pašalintumėte ženklą.

Nustatykite kairę ir dešinę paraštes į 20 pikselių.

Šis veiksmas atskiria sąrašo elementus vienas nuo kito horizontaliame sąraše. Galite pakeisti nustatymą, kad tarp nuorodų sukurtumėte geriausiai jūsų dizainą atitinkantį tarpą.

Sukurkite stilių, kad iš naujo apibrėžtumėte nuorodos žymą:

Spustelėkite, jei norite perkelti žymeklį į nuorodą naršymo juostoje.

Spustelėkite pliuso ženklą skydelio Selectors viršuje.

Jei norite pakeisti stiliaus pavadinimą, dukart spustelėkite pavadinimą Selectors skydelyje ir įveskite pavadinimą, kurį norite naudoti.

Skydelio ypatybės skiltyje Tekstas nustatykite Text-Decoration į None.

Skiltyje Tekstas pasirinkite spalvą iš spalvų šulinio, kad nurodytumėte nuorodų spalvą, kai jos įkeliamos į puslapį.

Sukurkite naują stilių, kad iš naujo apibrėžtumėte pelės žymeklio žymą, kad nuorodos spalva pasikeistų, kai vartotojas užves žymeklį ant nuorodos:

Spustelėkite pliuso ženklą skydelio Selectors viršuje.

Lauke Selector Name įveskite .navbar a:hover.

Skydelio ypatybės skiltyje Tekstas nustatykite Text-Decoration į None.

Skiltyje Tekstas pasirinkite spalvą iš spalvos šulinio, kad nurodytumėte nuorodos spalvą, kai naudotojai perkelia žymeklį ant nuorodos.

Sukurkite naują stilių, kad iš naujo apibrėžtumėte aplankytos nuorodos žymą, kad nuorodos spalva pasikeistų vartotojui spustelėjus nuorodą:

Spustelėkite pliuso ženklą skydelio Selectors viršuje.

Lauke Selector Name įveskite .navbar a:visited.

Skydelio ypatybės skiltyje Tekstas nustatykite Text-Decoration į None.

Dar skiltyje Tekstas pasirinkite spalvą iš spalvų šulinio, kad nurodytumėte nuorodos spalvą po apsilankymo.

Spustelėkite mygtuką Tiesiogiai darbo srities viršuje arba spustelėkite mygtuką Peržiūra, kad peržiūrėtumėte puslapį naršyklėje ir pamatytumėte nuorodų stilių poveikį.