Käytä CSS Style Tag Cloud -työkalussa
tag-pilvi on visuaalinen kuvaus kohteiden luettelosta. Näet usein blogien tunnistekilvet. Se on suosittu sivustot, kuten Flickr.
Tunnuspilvet ovat luettelo linkkeistä, jotka muuttuvat koosta ja painosta (joskus myös väristä) riippuen joistakin mitattavista ominaisuuksista. Useimmat tunnistepilvet rakennetaan suosion perusteella tai niiden sivujen lukumäärän perusteella, jotka on merkitty kyseisellä tagilla. Voit kuitenkin luoda tunnistepohjan mistä tahansa sivustosi kohteiden luettelosta, jolla on vähintään kaksi näyttötapaa. Esimerkiksi:
- Luettelo artikkeleista aakkosjärjestyksessä, jossa tyylit osoittavat artikkeleiden suosion.
- Luettelo verkkosivustoista aakkosjärjestyksessä ja tyylit osoittavat, mitkä pidät parhaiten.
- Luettelo Web-toimittajista, jotka on lueteltu hintatilauksessa, ja tyylit, jotka osoittavat, kuinka lähellä kukin tulee ennalta määriteltyihin kriteereihin.
- Luettelo ystävistä, joiden tyylit osoittavat etäisyyttä talosi heidän.
Mitä sinun tarvitsee rakentaa Tag Cloud?
Tunnistepilviä on helppo rakentaa, tarvitset vain kaksi asiaa:
- Luettelo kohteista (kuten verkkosivustoista, verkkosivustoista tai ystävistäsi)
- Mittaus jokaiselle kohteelle (kuten sivunäkymät päivässä, sijoituksesi 1-10 tai etäisyydet talosi kanssa).
Useimmat tunnistepilvet ovat linkkien luetteloja, joten se auttaa, jos jokainen kohde sisältää URL-osoitteen. Mutta sitä ei tarvitse luoda visuaalista hierarkiaa.
Vaiheita rakentaa Tag Cloud suosittuja linkkejä
Sivustossani on artikkeleita, jotka saavat sivun näkymiä päivittäin. Tämä on helppokäyttöinen metriikka, jonka avulla voin luoda tag-pilvi. Joten tässä esimerkissä luodaan tag-pilvi artikkelistoluettelosta, joka on sivustossani 25 parasta viikkoa 1. tammikuuta 2007.
- Määritä, kuinka monta tasoa haluat hierarkiassa.
- Vaikka pilvessäsi on niin monta tasoa kuin sinulla on listan kohteet, se on tylsiä koodaamaan ja erot voivat olla hyvin vähäisiä. Suosittelen, että sinulla on korkeintaan 10 tasoa hierarkiassa.
- Päätä kunkin tason leikkauspisteistä.
- Se voi olla niin yksinkertainen kuin leikkaamalla sivunäkymät päivässä 1/10 viipaleeksi eli ts. jos sivustosi suurin sivu saa 100 sivun näyttökertaa päivässä, voit jakaa sen 100+, 90-100, 80-90, 70-80, jne. Olen silputtanut sivunäkymääni siinä muodossa.
- Luettele kohteet sivunäkymän järjestyksessä ja anna heille sijoitus, joka perustuu vaiheeseen 2
- Älä huolestu, jos sinulla ei ole kohteita tietyissä lähtöpaikoissa, mikä tekee pilvestä mielenkiintoisemman.
- Aseta luettelo aakkosjärjestyksessä (tai mitä tahansa toista lajia haluat käyttää).
- Tämä tekee pilvestä mielenkiintoisen. Jos jätät sen lajiteltuna lajin mukaan, se tulee olemaan vain luettelo suurimmista kohteista ylhäältä alaspäin pienimpään alareunaan.
- Kirjoita HTML niin, että sijoitus on luokan numero. class = "tag4"> Streaming-äänitiedostojen lisääminen
Kun sinulla on kunkin yksittäisen luettelokohteen HTML ja tilaus, jonka haluat näyttää, niin sinun on tehtävä päätös. Voit sijoittaa linkit kappaleeseen ja olet valmis. Mutta sitä ei ole merkitty semanttisesti, ja kenelläkään ei ole CSS: tä, joka saapuu tag-pilviisi, näkisi vain suuren linkkikohdan. Tämän tyyppisen luettelon HTML näyttää tältä:
Streaming-äänitiedostojen lisääminen Web-sivuston peruskutsut Paras web-suunnitteluohjelma Täysin kadonnut Web-sivu Värisymbolismi Sen sijaan suosittelen, että luot tag-pilvisi käyttämättömän luettelon avulla. Se on muutamia viivoja HTML- ja CSS-koodeista, mutta se varmistaa, että sisältö on luettavissa riippumatta siitä, kuka tulee katsomaan sitä. HTML näyttää tältä: Nyt saamme hauskan osan - CSS-tyylit. Kun tyylität tag-pilvi, muutat yleensä fontin kokoa ja fontin painoa. Voit myös muuttaa fontin väriä tai taustaa tai muuta tyyliominaisuutta, mutta koko ja paino ovat perinteisiä. Tarvitset 10 tyyliluokkaa, yksi jokaisesta tagista: Haluan sisällyttää joitain tyylejä pilven ympärille. Keskitä pilvitietokanta, määritä rivin korkeus niin, että pilvi on luettavissa, ja varmista, että ankkurintunnisteilla ei ole pehmusteita: Lopuksi, jos käytät semanttisen tyylintämenetelmää (eli järjestämättömää luetteloa), sinun on lisättävä kaksi muuta CSS-riviä niin, että luettelossa ei ole luettelomerkkejä eikä se ole sisennetty:
Mutta missä ovat Tag-pilven tyylit