Jak stylovat tag Cloud

Použijte CSS ke stylování cloud tagů

tag cloud je vizuální zobrazení seznamu položek. Často se na blogu objeví mraky značek. To bylo populární na stránkách, jako je Flickr.

Značky mraků jsou seznam odkazů, které se mění ve velikosti a hmotnosti (někdy i v barvě) v závislosti na měřitelném atributu. Většina oblaček značek je postavena na základě popularity nebo počtu stránek, které jsou označeny příslušnou značkou. Můžete však vytvořit cloud tag z libovolného seznamu položek na vašem webu, které mají alespoň dva způsoby zobrazení. Například:

• Seznam článků v abecedním pořadí se styly označujícími popularitu článků.
• Seznam webových stránek v abecedním pořadí se styly, které označují, které z nich se vám líbí nejlépe.
• Seznam webových editorů uvedených v cenovém řádu se styly, které ukazují, jak blízké přicházejí k předem definovanému souboru kritérií.
• Seznam přátel se styly udávajícími vzdálenost od domu k jejich.

Co potřebujete k vytvoření Tag Cloud?

Je snadné vytvořit tag cloud, potřebujete pouze dvě věci:

• Seznam položek (například články z webu, webové stránky nebo přátelé)
• Měření pro každou z položek (například zobrazení stránek za den, vaše hodnocení 1-10 nebo vzdálenost k vašemu domu).

Většina oblaček značek je seznam odkazů, takže pomáhá, pokud má každá položka s sebou přidruženou adresu URL. Není však nutné vytvořit vizuální hierarchii.

Kroky pro vytvoření Tag Cloudu populárních odkazů

Můj web obsahuje články, které denně získají zobrazení stránek, a to je pro mě jednoduché metrika pro vytvoření cloud tagů. Takže pro tento příklad vytvoříme cloud tagů ze seznamu článků, což je 25 nejlepších článků na mém webu pro týden 1. ledna 2007.

1. Určete, kolik úrovní chcete ve své hierarchii.
   1. I když je možné mít ve vašem oblaku tolik úrovní, kolik máte položky ve svém seznamu, je to nudné kódování a rozdíly mohou být velmi minimální. Doporučuji, abyste ve své hierarchii neměli více než 10 úrovní.
2. Rozhodněte o bodech pro každou úroveň.
   1. Mohlo by to být stejně jednoduché jako řezání zobrazení stránek za den na 1/10 řezů - tj. pokud největší stránka na vašem webu dostane 100 zobrazení stránek denně, můžete jej rozřezat jako 100+, 90-100, 80-90, 70-80 atd. Roztříšil jsem tak zobrazení stránek.
3. Seznamte své položky v pořadí zobrazení stránek a dejte jim hodnost podle kroku 2
   1. Nedělejte si starosti, pokud nemáte v některých slotech žádné položky, a to jen dělá oblak zajímavější.
4. Umístěte svůj seznam v abecedním pořadí (nebo jakýkoli druh, který chcete použít).
   1. To dělá mrak zajímavý. Pokud ho ponecháte roztříděné podle pořadí, pak to bude jen seznam s největšími položkami v horní části dolů k nejmenším v dolní části.
5. Napište svůj HTML tak, aby hodnost byla číslo třídy. class = "tag4"> Přidání streamovaných audio souborů

Jakmile budete mít HTML pro každou jednotlivou položku seznamu a pořadí, které chcete zobrazit, musíte se rozhodnout. Odkazy můžete umístit do odstavce a měli byste být hotovi. Ale to by nebylo sémanticky označeno, a kdokoliv bez CSS přichází do vaší značky oblačnosti by prostě viděl velký odstavec odkazů. HTML pro tento typ seznamu by vypadal takto:

Přidání streamovaných audio souborů Základní tagy pro webové stránky Nejlepší webový designový software Vytvoření webové stránky pro zcela ztracené Symbolismus barev a>

Místo toho doporučuji vytvořit cloud tagů pomocí neuspořádaného seznamu. Je to několik dalších řádků kódu HTML a CSS, ale zajišťuje, že obsah bude čitelný bez ohledu na to, kdo ho přijde podívat. HTML by vypadal takto:

• Přidání streamovaných audio souborů
• Základní tagy pro webové stránky
• Nejlepší webový designový software
• Vytvoření webové stránky pro zcela ztracené
• Barevný symbol

  Ale kde jsou styly pro Tag cloud

  Nyní se dostaneme do zábavné části - stylů CSS. Při vytváření cloud tagů obvykle změníte velikost písma a váhu písma. Můžete také změnit barvu písma nebo pozadí nebo jiný atribut stylu, ale velikost a váha jsou tradiční.

  Potřebujete 10 tříd stylů, jednu pro každou pozici značky:

  #cloud a.tag1 {font-size: 0,7; velikost písma: 100; } #cloud a.tag2 {velikost písma: 0,8em; velikost písma: 200; } #cloud a.tag3 {velikost písma: 0,9em; velikost písma: 300; } #cloud a.tag4 {velikost písma: 1.0em; hmotnost písma: 400; } #cloud a.tag5 {velikost písma: 1.2m; velikost písma: 500; } #cloud a.tag6 {velikost písma: 1.4em; velikost písma: 600; } #cloud a.tag7 {velikost písma: 1.6m; velikost písma: 700; } #cloud a.tag8 {velikost písma: 1,8; velikost písma: 800; } #cloud a.tag9 {velikost písma: 2.2em; velikost písma: 900; } #cloud a.tag10 {velikost písma: 2.5m; velikost písma: 900; }}

  Ráda mám obsahovat některé styly kolem samotného oblaku: centrum textu v oblacích, nastavte výšku řádku tak, aby byl cloud čitelný, a ujistěte se, že kotevní značky neobsahují žádné polštářky:

  #cloud {padding: 2px; line-výška: 3m; text-align: center; } #cloud a {padding: 0px; }}

  Konečně, pokud používáte metodu sémantického stylingu (tj. Neuspořádaný seznam), budete muset přidat další dva řady CSS tak, aby tento seznam neobsahoval odrážky a nebyl odsazen:

  #cloud {margin: 0; } #cloud li {zobrazení: inline; }}