Tag bulutini qanday tarbiyalash kerak

CSS-dan Tag Cloud-ni ishlatish

taglar buluti elementlarning ro'yxatini ingl. tasviri. Ko'pincha Bloglardagi bulutli bulutlarni ko'rasiz. Flickr kabi saytlar mashhur edi.

Tag bulutlari o'lchami va vazni (ba'zan rang) da o'zgarib turadigan ulanishlar ro'yxati bo'lib, ba'zi o'lchovli xususiyatlarga bog'liq. Ko'plab bulutli bulutlar ommaboplikka yoki ushbu yorliq bilan belgilangan sahifalar soniga qarab quriladi. Lekin siz ularni saytdagi kamida ikkita usulga ega bo'lgan narsalarning biron-bir ro'yxatidan yorliq buluti yaratishingiz mumkin. Masalan:

• Maqolalarning mashhurligini ko'rsatadigan uslublar bilan alifbo tartibidagi maqola ro'yxati.
• Qiziqarlilari Alifbo tartibida navbatdagi veb-saytlar ro'yxati, ularning qaysi biri sizga yoqqanligini ko'rsatadigan uslublar.
• Har bir predmetning oldindan belgilangan mezonlarga qanchalik yaqin bo'lishini ko'rsatadigan uslublar bilan tartiblangan tartibli veb-muharrirlar ro'yxati.
• Sizning uyingizdan o'zgacha masofani ko'rsatadigan jihozlar bilan do'stlar ro'yxati.

Tag bulutini yaratish uchun nima kerak?

Teglar bulutini yaratish oson, faqat sizga ikki narsa kerak bo'ladi:

• Elementlar ro'yxati (veb-maqolalar, veb-saytlar yoki do'stlaringiz kabi)
• Har bir element uchun o'lchov (masalan, kunlik sahifa ko'rinishi, 1-10 tartibida yoki uyingizdagi masofa).

Ko'p taglik bulutlar havolalar ro'yxati, shuning uchun har bir elementning u bilan bog'langan sanasi bo'lsa yordam beradi. Biroq, bu vizual ierarxiya yaratish uchun talab qilinmaydi.

Ommaviy Linklardan Tag Cloud yaratish uchun qadamlar

Mening saytimda har kuni sahifa ko'rinishini olgan maqolalar mavjud va bu men uchun taglik bulutini yaratish uchun ishlatiladigan oson metrika. Shunday qilib, biz misol uchun, 2007 yil 1 yanvardan iborat bo'lgan haftada saytimizdagi eng yaxshi 25 ta maqola maqolasidan taglar bulutini yaratamiz.

1. O'zingizning ierarxikingizda qancha daraja kerakligini aniqlang.
   1. Ro'yxatdagi narsalaringiz bo'lgani kabi, bulutdagi ko'plab darajalar bo'lishi mumkin bo'lsa-da, bu kodni zerikarli bo'ladi va farqlar juda kam bo'lishi mumkin. Men sizning ierarxikingizda 10dan ortiq darajaga ega emaslikni tavsiya qilaman.
2. Har bir darajadagi kesish nuqtasida qaror qabul qiling.
   1. Har kuni sahifa ko'rinishlarini 1/10 tilimga aylantirish kabi oddiy bo'lishi mumkin - ya'ni. agar saytingizdagi eng katta sahifa kuniga 100 ta sahifa ko'rsatsa, uni 100+, 90-100, 80-90, 70-80 va boshqalar sifatida kesib olishingiz mumkin. Bu sahifada mening sahifani ko'rdim.
3. Ob'ektlaringizni sahifa ko'rinishi tartibida ro'yxatlashtiring va ularga 2-bosqichga asoslangan daraja bering
   1. Ba'zi uylarda hech narsa yo'q bo'lsa tashvishlanmang, bu faqat bulutni yanada qiziqarli qiladi.
4. Ro'yxatni alfavit tartibida (yoki siz xohlagan ikkinchi turdagi) dam oling.
   1. Bu bulutni qiziqarli qiladi. Agar siz uni martabaga ko'ra ajratib qo'ysangiz, unda yuqoridagi eng katta narsalarni pastki qismidagi eng kichik ro'yxatga ega bo'lgan ro'yxat bo'ladi.
5. Raqamingiz sinf raqami bo'lgani uchun HTMLni yozing. class = "tag4"> Streaming audio fayllarini qo'shish

Har bir alohida ro'yxat elementi uchun HTMLni va ularni ko'rsatmoqchi bo'lgan tartibni olganingizdan so'ng, qaror qabul qilishingiz kerak. Siz xatlarni havolaga joylashtirishingiz mumkin va siz bajarishingiz mumkin. Lekin, bu ma'no jihatidan belgilanmaydi va sizning CSS-ingizda hech kimga kirish bulutiga kelmagan har qanday havolalarning katta xatboshini ko'rasiz. Ushbu turdagi ro'yxat uchun HTML quyidagicha bo'ladi:

Streaming audio fayllarini qo'shish Veb-sayt uchun asosiy yorliqlar Eng yaxshi veb-dizayn dasturlari Umuman yo'qolgan veb-sahifa yaratish Rangli ramziylik a>

Buning o'rniga, tartib belgilanmagan ro'yxat yordamida tagingizdagi bulutni yaratishni tavsiya etaman. Bu HTML va CSS kodlarining bir nechta satrlari bo'lib, lekin uni ko'rish uchun kim bo'lishidan qat'i nazar kontentni o'qiy olish mumkinligini ta'minlaydi. HTML shunday bo'ladi:

• Streaming audio fayllarini qo'shish
• Veb-sayt uchun asosiy yorliqlar
• Eng yaxshi veb-dizayn dasturlari
• butunlay yo'qolganligi uchun veb-sahifa yaratish
• Rangli ramziylik

  Lekin Tag Cloud uchun uslublar qaerda

  Endi biz qiziqarli qismga - CSS uslubiga ega bo'lamiz. Bir teg bulutini taratganingizda, odatda shrift o'lchamini va shrift hajmini o'zgartirasiz. Bundan tashqari, shriftning rangi yoki fonini yoki boshqa uslubiy xususiyatlarini o'zgartirishingiz mumkin, ammo hajmi va vazni an'anaviy hisoblanadi.

  Har bir taglik darajasiga bittadan stil klassi kerak:

  # choud a.tag1 {font-size: 0.7em; harflarning og'irligi: 100; } #kloud a.tag2 {font-size: 0.8em; shriftning o'lchami: 200; } #kloud a.tag3 {font-size: 0.9em; harflarning og'irligi: 300; } #kloud a.tag4 {font-size: 1.0em; harflarning og'irligi: 400; } #kloud a.tag5 {font-size: 1.2em; harflarning og'irligi: 500; } #kloud a.tag6 {font-size: 1.4em; harflarning og'irligi: 600; } #kloud a.tag7 {font-size: 1.6em; harflarning og'irligi: 700; } #kloud a.tag8 {font-size: 1.8em; harflarning og'irligi: 800; } #kloud a.tag9 {font-size: 2.2em; harflarning og'irligi: 900; } #kloud a.tag10 {font-size: 2.5em; harflarning og'irligi: 900; }

  Bulutning o'zida bir nechta uslublar qo'shishni yoqtiraman: bulut matnini markaziga qo'ying, bulutni o'qib chiqishi uchun chiziq balandligini o'rnating va zanjir teglaridagi bo'shliqlar yo'qligiga ishonch hosil qiling:

  #top {padding: 2px; line-height: 3em; matnni aylantirish: markaz; } #cloud a {padding: 0px; }

  Nihoyat, siz semantik uslub uslubini (tartibga solinmagan ro'yxat) foydalanayotgan bo'lsangiz, ro'yxatda o'q yo'q va shunday qilib indented bo'lmagan yana ikkita qo'shimcha satr qo'shishingiz kerak bo'ladi:

  # Kechirma {margin: 0; } #cloud li {displey: inline; }