Koristite CSS za stil tag oblaka
tag oblak je vizuelno prikazivanje liste stavki. Često ćete videti oblake oznaka na blogovima. Bilo je popularno na sajtovima poput Flickr-a.
Oblici oznaka su lista veza koje se menjaju u veličini i težini (ponekad iu boji) u zavisnosti od nekog mjerljivog atributa. Većina tag oblaka je napravljena na osnovu popularnosti ili broja stranica koje su označene sa određenom oznakom. Ali možete napraviti oblak oznaka iz bilo koje liste stavki na vašoj web lokaciji koje imaju najmanje dva načina prikazivanja. Na primjer:
- Lista članaka po abecednom redu sa stilovima koji ukazuju na popularnost članaka.
- Spisak Web lokacija po abecednom redu sa stilovima koji ukazuju na one koji vam najviše vole.
- Spisak urednika Weba koji su navedeni u redosledu cena sa stilovima koji ukazuju na to kako se svaki bliski prijelaz unaprijed definiše skup kriterijuma.
- Spisak prijatelja sa stilovima koji ukazuju na udaljenost od kuće do njih.
Šta treba da napravite cloud oblak?
Jednostavno je napraviti oblak oznake, potrebne su vam samo dvije stvari:
- Spisak stavki (kao što su Web članci, veb lokacije ili vaši prijatelji)
- Merenje za svaku od stavki (kao što su prikazi stranice dnevno, vaš rang 1-10, ili rastojanje do kuće).
Većina oblaka oznaka su spiskovi veza, pa pomaže da svaka jedinica ima URL vezan za njega. Ali to nije potrebno za stvaranje vizuelne hijerarhije.
Koraci za izgradnju tag cloud popularnih veza
Moja stranica sadrži članke koji dobijaju prikaze stranica svakog dana, a ovo je jednostavna metrika za korištenje za kreiranje oblaka oznake. Tako ćemo u ovom primeru kreirati cloud tag sa liste članaka, top 25 članaka na mom sajtu za sedmicu 1. januara 2007. godine.
- Odredite koliko nivoa želite u vašoj hijerarhiji.
- Iako je moguće imati toliko nivoa u vašem oblaku kao što imate stavke u vašoj listi, ovo je dosadno kodiranje, a razlike mogu biti vrlo minimalne. Preporučujem da imate više od 10 nivoa u vašoj hijerarhiji.
- Odlučite o prekinutim tačkama za svaki nivo.
- Možda će biti jednostavno kao i smanjenje prikaza vaših stranica dnevno na 1/10 komada - tj. ako najveća stranica na vašoj stranici dobije 100 stranica pregleda dnevno, mogla bi da je rezimirate na 100+, 90-100, 80-90, 70-80 itd. Na taj način sam iseckala pogled moje stranice.
- Navedite svoje stavke u redosledu prikazivanja stranica i dajte im čin na osnovu koraka 2
- Ne brinite ako u nekim slotovima nemate ni jednu stavku, što samo čini oblaku interesantnijim.
- Spustite svoju listu po abecednom redosledu (ili bilo koja druga vrsta koju želite koristiti).
- To je ono što čini oblak interesantnim. Ako ga ostavite sortiran po rangu, onda će biti samo lista sa najvećim stavkama na vrhu do najmanjih na dnu.
- Napišite svoj HTML tako da je čin broj klase. class = "tag4"> Dodajanje Streaming audio datoteka
Kada imate HTML za svaku pojedinačnu stavku liste i redosled kojim želite da ih prikažete, onda morate doneti odluku. Možete postaviti veze u paragrafu i bićete urađeni. Ali ovo ne bi bilo semantički označeno, a svako bez CSS-a koji bi došao na vaš tag cloud samo bi vidio veliki stav linkova. HTML za ovu vrstu spiska bi izgledao ovako:
Dodavanje audio fajlova sa streamingom Osnovne oznake za web lokaciju Najbolji softver za web dizajn Izgradnja web stranice za potpuno izgubljen Color Symbolism a> Umesto toga, preporučujem vam da kreirate svoj tag tag koristeći neuređenu listu. To je još nekoliko linija HTML i CSS koda, ali on obezbeđuje da sadržaj bude čitljiv bez obzira ko dolazi da ga pogleda. HTML bi izgledao ovako: Sada dođemo do zabavnog dela - CSS stilova. Kada oblikujete cloud tag, obično promenite veličinu fonta i težinu fonta. Takođe možete promijeniti boju fonta ili pozadine ili bilo kojeg drugog atributa stila, ali veličina i težina su tradicionalni. Treba vam 10 klasa klase, po jedan za svaki tag tag: Želim da uključim neke stilove oko samog oblaka: srediram tekst oblaka, podesite visinu linije tako da se oblak može čitati i uverite se da oznake sidra nemaju nikakav pad na njima: Konačno, ako koristite metod semantičkog stajlinga (tj. Neuređenu listu), morate dodati još dvije linije CSS-a tako da lista nema metke i nije udaljena:
Ali gde su stilovi za oblak oznaka