Uporabite CSS za oblikovanje oznake oblakov
tag oblak je vizualni prikaz seznama predmetov. V blogih boste pogosto videli oblike oznak. To je bilo priljubljeno s strani, kot so Flickr.
Oblaki oznak so seznam povezav, ki se spremenijo glede na velikost in težo (včasih tudi v barvi), odvisno od nekaterih merljivih atributov. Večina oblikov oznak temelji na priljubljenosti ali številu strani, ki so označene z določeno oznako. Vendar lahko obliko oznake ustvarite iz katerega koli seznama elementov na vašem spletnem mestu, ki imajo vsaj dva načina prikaza. Na primer:
- Seznam člankov v abecednem vrstnem redu s slogi, ki označujejo priljubljenost člankov.
- Seznam spletnih mest po abecednem vrstnem redu s slogi, ki označujejo tiste, ki vam najbolj ustrezajo.
- Seznam spletnih urednikov, naštetih v cenovnem vrstnem redu s slogi, ki kažejo, kako blizu je vsak vnaprej določen niz meril.
- Seznam prijateljev s slogi, ki kažejo na razdaljo od vaše hiše do njih.
Kaj potrebujete za izgradnjo oblačila z oznako?
Obliko oznake je enostavno, potrebujete samo dve stvari:
- Seznam elementov (na primer spletnih člankov, spletnih mest ali vaših prijateljev)
- Merjenje za vsakega predmeta (npr. Ogledi strani na dan, vaša razvrstitev 1-10 ali razdalja do vaše hiše).
Večina oblikov oznak je seznam povezav, zato pomaga, če ima vsak element URL, povezan z njim. Toda to ni potrebno ustvariti vizualne hierarhije.
Koraki za ustvarjanje priljubljenega spletnega nabora oznak
Moje spletno mesto ima članke, ki vsak dan dobivajo oglede strani, in to je enostavna metrika, ki jo lahko uporabim za ustvarjanje oblačka oznake. Torej bomo v tem primeru ustvarili obliko oznake s seznama člankov, top 25 člankov na moji spletni strani v tednu 1. januarja 2007.
- Določite, koliko ravni želite v svoji hierarhiji.
- Čeprav je v vašem oblaku mogoče imeti toliko ravni, kot imate elemente na seznamu, to postane dolgotrajno kodiranje, razlike pa so lahko zelo majhne. Priporočam, da v svoji hierarhiji ne boste imeli več kot 10 ravni.
- Odločite se za odrezane točke za vsako stopnjo.
- Morda je tako enostavno, kot je razrezanje pogledov strani na dan v 1/10 rezine - tj. če največja stran na vašem spletnem mestu dobi 100 ogledov na dan na dan, bi jo lahko rezali kot 100 +, 90-100, 80-90, 70-80 itd. S tem sem si narezal pogled moje strani.
- Navedite elemente v vrstnem redu prikaza strani in jim dajte oceno, ki temelji na 2. koraku
- Ne skrbite, če v nekaterih režah nimate elementov, ki naredijo oblaku še bolj zanimivo.
- Odkrijte svoj seznam po abecednem vrstnem redu (ali karkoli drugega želite uporabiti).
- To je tisto, zaradi česar je oblak zanimiv. Če ga pustite razvrščeni po razredu, potem bo le seznam z največjimi predmeti na vrhu navzdol do najmanjšega na dnu.
- Napišite svoj HTML, tako da je razred številka razreda. class = "tag4"> Dodajanje pretočnih avdio datotek
Ko imate HTML za vsak posamezen element seznama in vrstni red, ki ga želite prikazati, morate sprejeti odločitev. Povezave lahko postavite v odstavek in bi jih bilo treba storiti. Toda to ne bi bilo semantično označeno, in vsakdo brez CSS-ja, ki prihaja v vašo obliko oznake, bi videl samo velik odstavek povezav. HTML za to vrsto seznama bi bil takšen:
Dodajanje pretočnih zvočnih datotek Osnovne oznake za spletno mesto Najboljša programska oprema za spletno oblikovanje Oblikovanje spletne strani za popolnoma izgubljen Barvni simbolizem a> Namesto tega vam priporočam, da ustvarite obliko oznake z neurejenim seznamom. To je še nekaj vrstic kode HTML in CSS, vendar zagotavlja, da bo vsebina berljiva, ne glede na to, kdo jo prikaže. HTML bi bil takšen: Zdaj pridemo do zabavnega dela - stilov CSS. Ko oblikujete oblak oznake, ponavadi spremenite velikost pisave in težo pisave. Lahko tudi spremenite barvo pisave ali ozadja ali kateregakoli drugega atributa sloga, vendar sta velikost in teža tradicionalni. Potrebujete 10 razredov slogov, po eno za vsako oznako oznake: Všeč mi je, da vključim nekaj stilov okrog samega oblaka: osredotočite besedilo oblaka, nastavite višino vrstice, tako da je oblak berljiv in poskrbite, da sidrne oznake nimajo oblazinjenja na njih: Nazadnje, če uporabljate metodo semantičnega stila (tj. Neurejen seznam), boste morali dodati še dve vrstici CSS, tako da seznam nima oznak in ni zamaknjen:
Toda kje so slogi za oblaček Tag