Hvernig á að stilla Tag Cloud

Notaðu CSS til að stilla Tag Cloud

tag ský er sjónræn lýsing á lista yfir hluti. Þú munt oft sjá merki ský á blogg. Það var gert vinsælt af síðum eins og Flickr.

Tag ský eru listi yfir tengla sem breytast í stærð og þyngd (stundum litur líka) eftir ákveðnum eiginleikum. Flestir merkjaskýringar eru byggðar á grundvelli vinsælda eða fjölda síðna sem eru merktar með tilteknu tagi. En þú getur búið til merki ský úr hvaða lista yfir hluti á vefsvæðinu þínu sem hafa að minnsta kosti tvær leiðir til að birta þær. Til dæmis:

• Listi yfir greinar í stafrófsröð með stíl sem gefur til kynna vinsældir greinar.
• Listi yfir vefsíður í stafrófsröð með stíllunum sem gefur til kynna hverjir þér líkar best.
• Listi yfir vefritendur sem eru skráðar í verðskrá með stílunum sem gefa til kynna hversu náið hver kemur til fyrirfram skilgreindrar viðmiðunar.
• Listi yfir vini með stíl sem gefur til kynna fjarlægð frá húsi þínu til þeirra.

Hvað þarftu að byggja upp Tag Cloud?

Það er auðvelt að byggja upp merki ský, þú þarft aðeins tvö atriði:

• Listi yfir hluti (eins og vefsíður, vefsíður eða vinir þínir)
• Mæling fyrir hverja hluti (eins og bls. Á dag, röðun 1-10, eða fjarlægðin í húsið þitt).

Flestir skýjurnar eru listar yfir tengla, þannig að það hjálpar ef hvert atriði hefur slóð sem tengist því. En það er ekki nauðsynlegt að búa til sjónrænt stigveldi.

Skref til að byggja upp Tag Cloud af vinsælum tenglum

Vefsíðan mín hefur greinar sem fá síðuskoðanir á hverjum degi, og þetta er auðvelt mæligildi fyrir mig að nota til að búa til merkjaský. Svo fyrir þetta dæmi munum við búa til merki ský úr lista yfir greinar, efstu 25 greinar á síðuna mína fyrir vikuna 1. janúar 2007.

1. Ákveða hversu mörg stig þú vilt í stigveldinu þínu.
   1. Þó að hægt sé að hafa eins mörg stig í skýinu þínu og þú hefur hluti í listanum þínum, þá er þetta leiðinlegt að kóðast og munurinn getur verið mjög lágmarks. Ég mæli með að hafa ekki meira en 10 stig í stigveldinu þínu.
2. Ákveða á skera stig fyrir hvert stig.
   1. Það gæti verið eins einfalt og hægt sé að klippa skoðanir þínar á dag í 1/10 sneiðar - þ.e. Ef stærsti blaðsíða á síðunni þinni fær 100 síðu skoðanir á dag, þá gætirðu sneið það eins og 100+, 90-100, 80-90, 70-80, o.fl. Ég hakaði upp áhorfunum mínum upp á þeim hátt.
3. Skráðu vörurnar þínar í röð til hliðarskoðunar og gefðu þeim einkunnina á grundvelli skref 2
   1. Ekki hafa áhyggjur ef þú hefur enga hluti í sumum rifa, sem gerir bara skýið meira áhugavert.
4. Dvalarstaður þinn listi í stafrófsröð (eða hvað sem er annað sem þú vilt nota).
   1. Þetta er það sem gerir skýið áhugavert. Ef þú skilur það raðað eftir stöðu, þá verður það bara listi með stærstu hlutunum efst niður til minnstu neðst.
5. Skrifaðu HTML þinn þannig að staðsetningin sé kennitala. class = "tag4"> Bæti á hljóðskrám

Þegar þú hefur HTML fyrir hvert einstök listatriði og röðin sem þú vilt birta þá þarftu að taka ákvörðun. Þú getur sett tenglana í málsgrein og þú vilt vera búin. En þetta myndi ekki vera merkjanlega merkt, og einhver án CSS sem kom til merkjaskýjunnar mundi bara sjá stóra málsgrein tengla. HTML fyrir þessa tegund af lista myndi líta svona út:

Bættu við hljóðskrám Grunnatriði fyrir vefsíðu Bestu vefhönnunartól Búa til vefsíðu fyrir algjörlega glatað Liturástikur

Þess í stað mælum við með að þú býrð til merkjaskýjuna með óskipuðum lista. Það eru nokkrar línur af HTML og CSS kóða en það tryggir að efnið verði læsilegt, hver sem kemur til að skoða það. HTML myndi líta svona út:

• Bættu við hljóðskrám
• Grunnatriði fyrir vefsíðu
• Bestu vefhönnunartól
• Uppbygging vefsíðu fyrir algjörlega glatað
• Litatákn

  En Hvar eru stíllin fyrir Tag Cloud

  Nú erum við að komast að skemmtilegum hlutum - CSS stílunum. Þegar þú stíll merki ský, breytir þú venjulega leturstærð og leturþyngd. Þú getur einnig breytt lit letursins eða bakgrunnsins eða öðrum stílkenndum, en stærð og þyngd eru hefðbundin.

  Þú þarft 10 stílflokka, einn fyrir hvern flokkaröð:

  #cloud a.tag1 {leturstærð: 0.7em; leturgerð: 100; } #cloud a.tag2 {leturstærð: 0.8em; leturgerð: 200; } #cloud a.tag3 {leturstærð: 0.9em; leturgerð: 300; } #cloud a.tag4 {leturstærð: 1.0em; leturgerð: 400; } #cloud a.tag5 {leturstærð: 1.2em; leturgerð: 500; } #cloud a.tag6 {leturstærð: 1.4em; leturgerð: 600; } #cloud a.tag7 {leturstærð: 1.6em; leturgerð: 700; } #cloud a.tag8 {leturstærð: 1.8em; leturgerð: 800; } #cloud a.tag9 {leturstærð: 2.2em; leturgerð: 900; } #cloud a.tag10 {leturstærð: 2.5em; leturgerð: 900; }

  Mér finnst gaman að setja nokkrar stíll í kringum skýið sjálft: miðjaðu skýtextann, stilltu línuhæð þannig að skýið sé læsilegt og ganga úr skugga um að akkerapakkarnir séu ekki með púði á þeim:

  #cloud {padding: 2px; línuhæð: 3em; text-align: miðstöð; } #cloud a {padding: 0px; }

  Að lokum, ef þú ert að nota merkingartækni (þ.e. óskráða listann) þarftu að bæta við tveimur öðrum línum af CSS þannig að listinn hefur ekki skot og er ekki innspýting:

  #cloud {framlegð: 0; } #cloud li {sýna: inline; }