Hvernig á að búa til leiðsögustiku úr óraðaðan lista yfir tengla í Dreamweaver

Hér er frábært CSS bragð til að breyta punktalista í yfirlitsstiku í Dreamweaver með einföldum veltunaráhrifum. Notkun punktalista fyrir siglingastikur er vel viðurkennd venja fyrir vefsíður sem uppfylla gildandi aðgengisstaðla.

Inneign: Myndir af istockphoto.com

Sömu tenglar eru enn í óraðaða listanum, en beiting stílanna breytir útliti þeirra verulega.

Inneign: Myndir af istockphoto.com

Til að búa til yfirlitsstiku með CSS til að endurskilgreina óraðaða listann og tenglamerki skaltu fylgja þessum skrefum:

Smelltu til að setja bendilinn þinn þar sem þú vilt búa til yfirlitsstikuna þína á síðunni.

Sláðu inn textann sem þú vilt nota sem hlekki, aðskildu hvern með því að ýta á Return eða Enter takkann til að búa til málsgreinaskil.

Til að forsníða tenglana sem óraðaðan lista skaltu aðskilja hverja línu af texta sem þú vilt tengja með a

merki.

Búðu til tengla með því að velja hvern texta fyrir sig, smella á Hyperlink táknið á Common Insert spjaldinu og velja síðan síðuna sem þú vilt tengja á eða slá inn vefslóð.

Dragðu til að velja allt sett af tenglum og smelltu síðan á Óraðaðan lista táknið í eignaeftirlitinu.

Byssukúla birtist í upphafi hvers hlekks. Ef einhver hlekkur er ekki settur af stað með sérstakri byssukúlu, smelltu til að eyða bilinu á milli hans og hlekksins á undan honum og ýttu síðan á Return eða Enter til að aðskilja tenglana með liðsskilum.

Til að bæta við a

merktu í kringum lista yfir tengla (eða annað efni sem er þegar á síðu), veldu efnið og smelltu svo á Div táknið á Common Insert spjaldinu.

Insert Div svarglugginn opnast.

Bætir a

merki um óraðaða tenglalistann er gagnlegt ef þú vilt bæta við sniði.

Veldu Wrap Around Selection af Setja inn fellilistanum.

Fyrir nákvæmari stjórn á því hvar þú bætir nýju við

tag, getur þú valið valkosti úr Insert fellilistanum efst í Insert Div valmyndinni.

Sláðu inn nafn í reitinn Class eða auðkennisreitinn.

A

Merki með flokks- eða auðkennisnafni sem þú slóst inn er sjálfkrafa bætt við síðuna í kringum tenglalistann.

Neðst í Insert Div valmyndinni, smelltu á hnappinn New CSS Rule.

Nýja CSS regluheitið er bætt við listann yfir stílheiti í CSS Designer Selectors spjaldinu.

Í Eiginleikaspjaldinu skaltu tilgreina viðeigandi stillingar fyrir lit, bakgrunn, stærð, spássíur og fyllingu.

Stílsniðið er sjálfkrafa beitt á innihald

merkið vegna þess að þú notaðir stílinn eins og þú bjóst til hann í skrefum 5–7.

Til að búa til samsettan stíl sem mun aðeins forsníða óraðaða listann þegar hann er notaður á yfirlitsstikunni, búðu til samsettan stíl sem inniheldur flokksheitið .navbar:

Settu bendilinn þinn hvar sem er á punktalistanum.

Smelltu á plús táknið (+) efst á valmyndinni.

Gakktu úr skugga um að Dreamweaver hafi sjálfkrafa slegið inn .navbar ul sem nafn nýs stíls í valmyndinni í reitnum Heiti vals.

Í Eiginleikum skaltu stilla spássíur og fyllingu á 0.

Búðu til samsettan stíl til að endurskilgreina listaatriðin:

Settu bendilinn þinn hvar sem er á punktalistanum.

Smelltu á plús táknið efst á valmyndinni.

Gakktu úr skugga um að Dreamweaver hafi sjálfkrafa slegið inn .navbar ul li sem nafn á nýjum stíl í valmyndinni í reitnum Heiti vals.

Í Eiginleikaspjaldinu skaltu stilla Skjárinn á Inline.

Breyttu List Style Type í None til að fjarlægja byssukúluna.

Stilltu vinstri og hægri spássíuna á 20 pixla.

Þetta skref aðskilur listaatriðin hver frá öðrum í lárétta listanum. Þú getur breytt stillingunni til að búa til plássið á milli tengla sem passar best við hönnunina þína.

Búðu til stíl til að endurskilgreina tenglamerkið:

Smelltu til að setja bendilinn þinn á tengil á flakkastikunni.

Smelltu á plús táknið efst á valmyndinni.

Ef þú vilt breyta stílheitinu skaltu tvísmella á nafnið á valmyndaborðinu og slá inn nafnið sem þú vilt nota.

Í Textahlutanum á Eiginleikaspjaldinu skaltu stilla Text-Decoration á None.

Enn í textahlutanum skaltu velja lit úr litbrunninum til að tilgreina lit á tenglum þegar þeim er hlaðið inn á síðu.

Búðu til nýjan stíl til að endurskilgreina sviftenglamerkið þannig að tengiliturinn breytist þegar notandi rúllar bendilinn yfir tengilinn:

Smelltu á plús táknið efst á valmyndinni.

Í reitnum Heiti vals skaltu slá inn .navbar a:hover.

Í Textahlutanum á Eiginleikaspjaldinu skaltu stilla Text-Decoration á None.

Enn í textahlutanum skaltu velja lit úr litbrunninum til að tilgreina lit hlekksins þegar notendur rúlla bendilinn yfir hlekkinn.

Búðu til nýjan stíl til að endurskilgreina merkið sem heimsóttur tengill svo liturinn á tenglinum breytist eftir að notandi smellir á tengil:

Smelltu á plús táknið efst á valmyndinni.

Sláðu inn .navbar a:visited í reitnum Heiti vals.

Í Textahlutanum á Eiginleikaspjaldinu skaltu stilla Text-Decoration á None.

Enn í textahlutanum skaltu velja lit úr litbrunninum til að tilgreina lit hlekksins eftir að hann hefur verið heimsóttur.

Smelltu á Live hnappinn efst á vinnusvæðinu eða smelltu á Preview hnappinn til að skoða síðuna í vafra til að sjá áhrif tengistílanna.