Kā veidot tagu mākoni

Izmantojiet CSS, lai izveidotu tagu mākoņu

tag mākonis ir priekšmetu saraksta vizuāls attēlojums. Jūs bieži redzēsit tagu mākoņus par emuāriem. Tas bija populārs vietnēs, piemēram, Flickr.

Tag mākoņi ir saišu saraksts, kas mainās pēc lieluma un svara (dažreiz arī krāsa), atkarībā no dažiem izmērāmiem atribūtiem. Lielākā daļa tagu mākoņu tiek veidoti, pamatojoties uz popularitāti vai to lapu skaitu, kuras ir atzīmētas ar konkrēto tagu. Bet jūs varat izveidot tagu mākoņu vietni no jebkuras vietnes vienumu saraksta, kam ir vismaz divi to parādīšanas veidi. Piemēram:

• Rakstu saraksts alfabētiskā secībā ar stiliem, kas norāda uz rakstu popularitāti.
• Tīmekļa vietņu saraksts alfabētiskā secībā ar stiliem, kas norāda, kuri no jums vislabāk ir.
• Cenu secībā uzskaitīto Web redaktoru saraksts ar stiliem, kas norāda, cik tuvu katram nāk iepriekš definēts kritēriju kopums.
• Draugu saraksts ar stiliem, kas norāda attālumu no jūsu mājas uz viņu.

Kas jums ir nepieciešams veidot tag mākonis?

Ir viegli izveidot tagu mākoņu, jums ir nepieciešamas tikai divas lietas:

• Vienumu saraksts (piemēram, Web raksti, tīmekļa vietnes vai jūsu draugi)
• Mērījums par katru vienumu (piemēram, lapas apmeklējumu skaits dienā, jūsu vērtējums 1-10 vai attālums no jūsu mājas).

Lielākā daļa tagu mākoņu ir saites saraksti, tāpēc tas palīdz, ja katram vienumam ir URL saistīts URL. Bet tas nav nepieciešams, lai izveidotu vizuālo hierarhiju.

Pasākumi, lai veidotu populāru saišu tagu mākoni

Manā vietnē ir rakstus, kas katru dienu saņem lapu apskatus, un tas ir viegli metriski, ko es varu izmantot, lai izveidotu tagu mākoņu. Tādēļ šajā piemērā mēs izveidosim tagu mākoni no rakstus saraksta, kas ir 25 jaunākie raksti manā vietnē 2007. gada 1. janvāra nedēļā.

1. Nosakiet, cik daudz līmeņu jūs vēlaties savā hierarhijā.
   1. Lai gan jūsu mākonī var būt tik daudz līmeņu, ka jums ir sarakstā iekļautie priekšmeti, tas kļūst garlaicīgs, lai kodētu, un atšķirības var būt ļoti minimālas. Es iesaku jūsu hierarhijā izmantot ne vairāk kā 10 līmeņus.
2. Nosakiet punktu skaitu katram līmenim.
   1. Tas var būt tikpat vienkāršs kā lapas apmeklējumu samazināšana dienā 1/10 šķēlēs - ti. ja lielākā jūsu vietnes lapa katru dienu saņem 100 lapas apmeklējumu, varat to sagriezt kā 100+, 90-100, 80-90, 70-80, utt. Es to sasmalcināja, skatot manu lapu.
3. Ierakstiet savus vienumus lapas skatījumu secībā un piešķiriet viņiem rangu, pamatojoties uz 2. darbību
   1. Neuztraucieties, ja dažās laika nišās nav neviena objekta, kas tikai padara mākoni interesantāku.
4. Izcenojiet savu sarakstu alfabētiskā secībā (vai jebkuram otrajam veidam, ko vēlaties izmantot).
   1. Tas padara mākoni interesantu. Ja jūs to atstāsit pēc kategorijas, tas būs tikai saraksts ar lielākajiem elementiem no augšas uz leju līdz mazākajam apakšā.
5. Uzrakstiet savu HTML, lai rangs būtu klases numurs. class = "tag4"> Plūsmu audio failu pievienošana

Kad jums ir HTML katram atsevišķam saraksta vienumam un pasūtījumam, kuru vēlaties parādīt, tad jums jāpieņem lēmums. Jūs varat ievietot saites punktā, un jums būs jādara. Bet tas nebūtu semantiski atzīmēts, un ikviens, kam bez CSS nonāk jūsu tagu mākonī, vienkārši redzētu lielu saites daļu. Šāda veida saraksta HTML izskatās šādi:

Streaming audio faili Pamata vietnes tagi Labākā Web dizaina programmatūra Tīmekļa lapas izveide pilnīgi zaudētajiem Krāsu simbolisms

Tā vietā es iesaku jums izveidot tagu mākoņu, izmantojot neierobežotu sarakstu. Ir vēl dažas HTML un CSS koda rindiņas, bet tas nodrošina to, ka saturs būs lasāms neatkarīgi no tā, kurš to apskatīs. HTML izskatās šādi:

• Streaming audio faili
• Tīmekļa vietnes galvenie tagi
• Labākā Web dizaina programmatūra
• Tīmekļa lapas izveide pilnīgi zaudētajiem
• Krāsu simbolisms

  Bet kur ir tagu mākoņa stili

  Tagad mēs nokļūstam jautrā daļā - CSS stilos. Kad veidojat tagu mākoņu, parasti maināt fonta lielumu un fonta svaru. Varat arī mainīt fonta krāsu vai fonu vai kādu citu stila atribūtu, bet izmērs un svars ir tradicionāli.

  Jums ir nepieciešamas 10 stila klases, katrai tagu rangai:

  #cloud a.tag1 {font-size: 0.7em; fonta svars: 100; } #cloud a.tag2 {font-size: 0.8em; fonta svars: 200; } #cloud a.tag3 {font-size: 0.9em; fonta svars: 300; } #cloud a.tag4 {font-size: 1.0em; fonta svars: 400; } #cloud a.tag5 {font-size: 1.2em; fonta svars: 500; } #cloud a.tag6 {font-size: 1.4em; fonta svars: 600; } #cloud a.tag7 {font-size: 1.6em; fonta svars: 700; } #cloud a.tag8 {font-size: 1.8em; fonta svars: 800; } #cloud a.tag9 {font-size: 2.2em; fonta svars: 900; } #cloud a.tag10 {font-size: 2.5em; fonta svars: 900; }

  Man patīk iekļaut dažus stilus ap mākoņu sevi: centrā mākoņa tekstu, iestatīt līnijas augstumu tā, lai mākonis būtu lasāms, un pārliecinieties, ka enkura tagiem nav uzliktas uz tām:

  #cloud {padding: 2px; līnijas augstums: 3em; teksta izlīdzināšana: centrs; } #cloud a {padding: 0px; }

  Visbeidzot, ja jūs izmantojat semantisko stilizācijas metodi (ti, neierobežotu sarakstu), jums būs jāpievieno vēl divas CSS rindiņas, lai sarakstā nebūtu lodes un nav atdalīts.

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