Ako štýlovať Tag Cloud

Použite CSS na štýl označenia Cloud

tag cloud je vizuálne zobrazenie zoznamu položiek. Na blogoch často uvidíte mraky značiek. To bolo populárne stránky, ako je Flickr.

Značky mrakov sú zoznam odkazov, ktoré sa menia vo veľkosti a hmotnosti (niekedy aj v farbe) v závislosti od merateľného atribútu. Väčšina oblakov značiek je postavená na základe popularity alebo počtu stránok, ktoré sú označené touto konkrétnou značkou. Môžete však vytvoriť cloud tagov z ľubovoľného zoznamu položiek na vašom webe, ktoré majú aspoň dva spôsoby zobrazenia. Napríklad:

• Zoznam článkov v abecednom poradí so štýlmi označujúcimi popularitu článkov.
• Zoznam webových stránok v abecednom poradí so štýlmi označujúcimi tie, ktoré sa vám páčia najlepšie.
• Zoznam webových editorov uvedených v cenovom poradí so štýlmi naznačujúcimi, ako blízka prichádza k vopred definovanému súboru kritérií.
• Zoznam priateľov so štýlmi udávajúcimi vzdialenosť od vášho domu až po ich.

Čo potrebujete na vytvorenie značky Cloud?

Je ľahké vytvoriť cloud značky, potrebujete iba dve veci:

• Zoznam položiek (ako sú webové články, webové stránky alebo vaši priatelia)
• Meranie pre každú položku (napríklad počet zobrazení stránky za deň, vaše poradie 1-10 alebo vzdialenosť od vášho domu).

Väčšina oblačok značiek je zoznam odkazov, takže pomáha, ak má každá položka s nimi priradenú adresu URL. Nie je však potrebné vytvoriť vizuálnu hierarchiu.

Kroky na vytvorenie značkového oblaku populárnych odkazov

Moja stránka obsahuje články, ktoré denne získavajú zobrazenia stránok, čo je jednoduchá metrika, ktorú môžem použiť na vytvorenie cloud tagov. Takže pre tento príklad vytvoríme oblak značiek zo zoznamu článkov, prvých 25 článkov na svojich stránkach pre týždeň 1. januára 2007.

1. Určte, koľko úrovní chcete vo svojej hierarchii.
   1. Aj keď je možné mať vo vašom oblaku toľko úrovní, ako máte položky vo vašom zozname, stáva sa to únavné pri kódovaní a rozdiely môžu byť veľmi minimálne. Odporúčam, aby ste vo svojej hierarchii nemali viac ako 10 úrovní.
2. Rozhodnite o bodoch prerušenia pre každú úroveň.
   1. Možno to bude jednoduché ako strihanie zobrazenia stránok za deň na 1/10 rezov - tj. ak najväčšia stránka na vašom webe dostane 100 zobrazení stránok denne, mohli by ste ju rozdeliť ako 100+, 90-100, 80-90, 70-80 atď.
3. Uveďte položky v poradí zobrazenia stránok a dajte im poradie podľa kroku 2
   1. Nebojte sa, ak nemáte žiadne položky v niektorých slotoch, čo robí oblak zaujímavý.
4. Umiestnite svoj zoznam v abecednom poradí (alebo akýkoľvek druh, ktorý chcete použiť).
   1. To je to, čo robí oblak zaujímavý. Ak ho ponecháte triedené podľa poradia, bude to len zoznam s najväčšími položkami v hornej časti až po najmenší v dolnej časti.
5. Napíšte svoj HTML tak, aby hodnosť bola číslo triedy. class = "tag4"> Pridávanie streamovaných audio súborov

Akonáhle budete mať HTML pre každú jednotlivú položku zoznamu a poradie, ktoré chcete zobraziť, potom musíte urobiť rozhodnutie. Odkazy môžete umiestniť do odseku a mali by ste byť hotoví. Ale toto by nebolo sémanticky označené, a ktokoľvek bez CSS prichádza do vášho oblaku značiek, uvidí len veľký odsek odkazov. HTML pre tento typ zoznamu by vyzeral takto:

Pridávanie streamovaných audio súborov Základné tagy pre webové stránky Najlepší webový softvér Vytvorenie webovej stránky pre úplne stratené Symbolizmus farieb a>

Namiesto toho vám odporúčame vytvoriť cloud tagov pomocou neusporiadaného zoznamu. Je to niekoľko ďalších riadkov kódu HTML a CSS, ale zabezpečuje, že obsah bude čitateľný bez ohľadu na to, kto príde na to. HTML bude vyzerať takto:

• Pridávanie streamovaných zvukových súborov
• Najlepší webový dizajnový softvér
• Vytvorenie webovej stránky pre úplne stratenú
• Symbolizmus farieb

  Ale kde sú štýly pre tag Cloud

  Teraz sa dostaneme do zábavnej časti - štýly CSS. Pri štýle cloud tagov zvyčajne meníte veľkosť písma a hmotnosť písma. Môžete tiež zmeniť farbu písma alebo pozadia alebo iný atribút štýlu, ale veľkosť a hmotnosť sú tradičné.

  Potrebujete 10 tried štýlov, jeden pre každú pozíciu značky:

  #cloud a.tag1 {veľkosť písma: 0,7; veľkosť písma: 100; } #cloud a.tag2 {veľkosť písma: 0,8; veľkosť písma: 200; } #cloud a.tag3 {veľkosť písma: 0,9; veľkosť písma: 300; } #cloud a.tag4 {veľkosť písma: 1.0; veľkosť písma: 400; } #cloud a.tag5 {veľkosť písma: 1.2m; veľkosť písma: 500; } #cloud a.tag6 {veľkosť písma: 1,4; veľkosť písma: 600; } #cloud a.tag7 {veľkosť písma: 1.6; veľkosť písma: 700; } #cloud a.tag8 {veľkosť písma: 1,8; veľkosť písma: 800; } #cloud a.tag9 {veľkosť písma: 2.2; veľkosť písma: 900; } #cloud a.tag10 {veľkosť písma: 2.5; veľkosť písma: 900; }

  Páči sa mi zahrnúť niektoré štýly okolo samotného oblaku: centrovanie textu v oblakoch, nastavenie výšky riadkov tak, aby bol cloud čitateľný a uistite sa, že na kotvách značky nie sú žiadne výplne:

  #cloud {padding: 2px; line-height: 3m; text-align: center; } #cloud a {padding: 0px; }

  Nakoniec, ak používate metódu sémantického štýlu (tj neoradený zoznam), budete musieť pridať ďalšie dva riadky CSS tak, aby zoznam neobsahoval odrážky a nie je odsadený:

  #cloud {margin: 0; } #cloud li {zobrazenie: inline; }