Navigointipalkin luominen järjestämättömästä linkkiluettelosta Dreamweaverissa

Tässä on loistava CSS-temppu, jolla voit muuttaa luettelomerkityn luettelon navigointipalkiksi Dreamweaverissa yksinkertaisella rollover-tehosteella. Luettelomerkeillä varustetun luettelon käyttäminen navigointipalkeissa on hyvin hyväksytty käytäntö verkkosivustoille, jotka täyttävät nykyiset esteettömyysstandardit.

Luotto: Kuvat istockphoto.com

Järjestämättömässä listassa on edelleen samat linkit, mutta tyylien soveltaminen muuttaa niiden ulkoasua dramaattisesti.

Luotto: Kuvat istockphoto.com

Voit luoda navigointipalkin CSS:n avulla määrittääksesi uudelleen järjestämättömän luettelon ja linkkitunnisteet seuraavasti:

Napsauta sijoittaaksesi kohdistimen kohtaan, johon haluat luoda navigointipalkin sivulla.

Syötä teksti, jota haluat käyttää linkkeinä, erottamalla ne toisistaan ​​painamalla Return- tai Enter-näppäintä luodaksesi kappaleen palautuksen.

Jos haluat muotoilla linkit järjestämättömäksi luetteloksi, erota jokainen linkitettävä tekstirivi a:lla

tag.

Luo linkkejä valitsemalla kukin teksti vuorollaan, napsauttamalla Hyperlinkki-kuvaketta Common Insert -paneelissa ja valitsemalla sitten sivu, johon haluat linkittää, tai kirjoittamalla URL-osoitteen.

Valitse koko linkkijoukko vetämällä ja napsauta sitten Järjestämätön luettelo -kuvaketta ominaisuusasetukset-ikkunassa.

Luettelomerkki näkyy jokaisen linkin alussa. Jos jotakin linkkiä ei ole erotettu erillisellä luettelomerkillä, napsauta poistaaksesi välilyönnin sen ja sitä edeltävän linkin väliltä ja paina sitten Return- tai Enter-näppäintä erottaaksesi linkit kappaleen palautusmerkillä.

Lisätäksesi a

linkkiluettelon ympärille (tai muuhun sivulla olevaan sisältöön), valitse sisältö ja napsauta sitten Div-kuvaketta Common Insert -paneelissa.

Insert Div -valintaikkuna avautuu.

Lisätään a

-tunniste järjestämättömän linkkiluettelon ympärillä on hyödyllinen, jos haluat lisätä muotoilua.

Valitse avattavasta Lisää-luettelosta Wrap Around Selection.

Tarkempi hallinta siitä, minne lisäät uuden

-tunnisteen avulla voit valita vaihtoehtoja Lisää-valintaikkunan yläreunassa olevasta Lisää-pudotusvalikosta.

Kirjoita nimi Class- tai ID-kenttään.

A

-tunniste, jossa on antamasi luokan tai tunnuksen nimi, lisätään automaattisesti linkkiluetteloa ympäröivälle sivulle.

Napsauta Lisää Div -valintaikkunan alareunassa Uusi CSS-sääntö -painiketta.

Uusi CSS-säännön nimi lisätään tyylinimien luetteloon CSS Designer Selectors -paneelissa.

Määritä Ominaisuudet-paneelissa haluamasi väri-, tausta-, koko-, marginaali- ja täyteasetukset.

Tyylimuotoilu otetaan automaattisesti käyttöön sisällössä

-tunnistetta, koska käytit tyyliä sellaisena kuin loit sen vaiheissa 5–7.

Jos haluat luoda yhdistelmätyylin, joka muotoilee järjestämättömän luettelon vain, kun sitä käytetään siirtymispalkissa, luo yhdistelmätyyli, joka sisältää luokan nimen .navbar:

Aseta kohdistin mihin tahansa luettelomerkkiluetteloon.

Napsauta plusmerkkiä (+) Valitsimet-paneelin yläosassa.

Varmista Selector Name -kentässä, että Dreamweaver syötti automaattisesti .navbar ul uuden tyylin nimeksi Selectors-paneeliin.

Aseta Ominaisuudet-paneelissa reunuksiksi ja täytetyksiksi 0.

Luo yhdistelmätyyli määrittääksesi luettelokohteen tunnisteet uudelleen:

Aseta kohdistin mihin tahansa luettelomerkkiluetteloon.

Napsauta plusmerkkiä Valitsimet-paneelin yläosassa.

Varmista Selector Name -kentässä, että Dreamweaver syötti automaattisesti .navbar ul li uuden tyylin nimeksi Selectors-paneeliin.

Aseta Ominaisuudet-paneelissa Display-asetukseksi Inline.

Muuta luettelotyylityypiksi Ei mitään poistaaksesi luettelomerkin.

Aseta vasen ja oikea marginaali 20 pikseliksi.

Tämä vaihe erottaa luettelon kohteet toisistaan ​​vaakasuuntaisessa luettelossa. Voit muuttaa asetusta luodaksesi linkkien väliin suunnitteluasi parhaiten sopivan tilan.

Luo tyyli määrittääksesi linkkitunnisteen uudelleen:

Napsauta siirtääksesi kohdistimen navigointipalkin linkin sisään.

Napsauta plusmerkkiä Valitsimet-paneelin yläosassa.

Jos haluat muuttaa tyylin nimeä, kaksoisnapsauta nimeä Valitsimet-paneelissa ja kirjoita nimi, jota haluat käyttää.

Aseta Ominaisuudet-paneelin Teksti-osiossa Tekstin koristelu -asetukseksi Ei mitään.

Valitse silti Teksti-osiossa värivalikon väri määrittääksesi linkkien värin, kun ne ladataan sivulle.

Luo uusi tyyli määrittääksesi hover-link-tunnisteen uudelleen siten, että linkin väri muuttuu, kun käyttäjä vie kursorin linkin päälle:

Napsauta plusmerkkiä Valitsimet-paneelin yläosassa.

Kirjoita Valitsimen nimi -kenttään .navbar a:hover.

Aseta Ominaisuudet-paneelin Teksti-osiossa Tekstin koristelu -asetukseksi Ei mitään.

Valitse edelleen Teksti-osiossa värivalinnasta väri määrittääksesi linkin värin, kun käyttäjät vievät osoittimen linkin päälle.

Luo uusi tyyli määrittääksesi uudelleen vieraillun linkin tagin, jotta linkin väri muuttuu, kun käyttäjä napsauttaa linkkiä:

Napsauta plusmerkkiä Valitsimet-paneelin yläosassa.

Kirjoita Valitsimen nimi -kenttään .navbar a:visited.

Aseta Ominaisuudet-paneelin Teksti-osiossa Tekstin koristelu -asetukseksi Ei mitään.

Edelleen Teksti-osiossa valitse väri värivalosta määrittääksesi linkin värin, kun linkissä on vieraillut.

Napsauta työtilan yläreunassa olevaa Live-painiketta tai napsauta Esikatselu-painiketta nähdäksesi sivun selaimessa nähdäksesi linkityylien vaikutuksen.