Tag Cloud-г хэрхэн загварчлах

Tag Cloud-г Style дээр CSS ашиглах

tag үүл бол зүйлийн жагсаалтуудын дүрслэл юм. Та ихэнхдээ блог дээр шошны үүлийг харах болно. Flickr шиг сайтууд алдартай байсан.

Tag үүл нь хэмжигдэхүйц шинж чанараас хамаарч хэмжээ, жинг өөрчлөх (заримдаа өнгөөрөө) холбоосуудын жагсаалт юм. Ихэнх шошго үүл нь түгээмэл хэрэглэгддэг эсвэл тухайн шошготойгоор бичигдсэн хуудсын тоо дээр тулгуурлан бүтээгдсэн байдаг. Гэхдээ та тэдгээрийг үзүүлэхэд хамгийн багадаа хоёр аргаар өөрийн сайт дээр байгаа зүйлсийн жагсаалтаас хаяг үүсгэх боломжтой. Жишээлбэл:

• Нийтлэлүүдийн нэр хүндийг харуулсан загвар бүхий цагаан толгойн үсгийн дарааллын жагсаалт.
• Вэбсайтуудын жагсаалтыг цагаан толгойн үсгийн дарааллаар жагсаан бичсэн загварууд нь хамгийн сайн дуртайг нь зааж өгнө.
• Үзуулэлтэнд жагсаасан вэбсайтуудын жагсаалтыг хэр ойрхон байгааг нь тодорхойлсон шалгууруудаар ирдэг болохыг харуулсан загваруудтай.
• Найз нөхдийн жагсаалтыг байшингаас хол зайд харуулсан загвартай найзууд.

Та Tag Cloud байгуулах хэрэгтэй юу?

Танд үүл үүсгэх нь амархан бөгөөд танд зөвхөн хоёр зүйл хэрэгтэй:

• Нийтлэлүүдийн жагсаалт (Вэбийн нийтлэл, Вэб сайт, эсвэл найз нөхөд гэх мэт)
• Өгөгдөл тус бүрт зориулсан хэмжилт (өдрийн хуудас харах, таны зэрэглэл 1-10, эсвэл танай байшингийн зай гэх мэт).

Ихэнх лабораторийн үүлнүүд нь холбоосуудын жагсаалт бөгөөд хэрэв зүйл тус бүртэй холбоотой URL байвал тусалдаг. Гэхдээ энэ нь харааны шатлалыг бий болгох шаардлагагүй юм.

Алдартай холбоосуудын хаягийг бүтээх алхмууд

Миний вэбсайт хуудсуудын үзэл бодолыг өдөр бүр олж авсан нийтлэлүүд байдаг бөгөөд энэ нь намайг үүлний үүсгэх үүл үүсгэхэд хялбар хэмжүүр юм. Энэ жишээний хувьд 2007 оны 1-р сарын 1-ний долоо хоногийн долоо хоногт манай вэбсайтын шилдэг 25 нийтлэл, өгүүллийн жагсаалтаас шошго үүсгэх болно.

1. Таны шаталсан түвшинд хичнээн түвшин шаардагдахыг тодорхойл.
   1. Таны үүл дээр олон давхрагатай байх боломжтой ч гэсэн кодыг өөрчлөхөд маш хэцүү байдаг. Таны шаталсан түвшинд 10-аас илүүгүй түвшинд байхыг зөвлөж байна.
2. Түвшин бүрийн хувьд таслалтын цэг дээр шийдвэрлэ.
   1. Өдөр бүр хуудасны үзлийг хайчилж 1/10 зүсмэл рүү өөрөөр хэлбэл өөрөөр хэлбэл. Хэрэв таны сайт дээрх хамгийн том хуудас нь 100 хуудас үзсэн бол 100+, 90-100, 80-90, 70-80 гэх мэтчилэн зүсэж болно.
3. Хуудсыг харах дарааллаар жагсаасан зүйлсийг жагсаан, 2-р шатанд үндэслэн жагсаах
   1. Хэрэв та ямар нэг зүйл байхгүй бол санаа зовох хэрэггүй. Энэ нь үүл илүү сонирхолтой болгодог.
4. Өөрийн жагсаалтыг цагаан толгойн үсгийн дарааллаар (эсвэл ямар ч хоёр дахь төрлийн ашиглахыг хүсч байгаа бол).
   1. Энэ нь үүлийг сонирхолтой болгодог. Хэрвээ та үүнийг эрэмбээр эрэмбэлэх юм бол, хамгийн дээд тал нь хамгийн доод тал нь хамгийн доод тал нь жагсаалтанд байх болно.
5. Хичээлээ бичээрэй. Ингэснээр тушаалын ангилал нь ангийн дугаар юм. class = "tag4"> Аудио файлыг нэмэх

Жагсаалтын зүйл бүрийн HTML, захиалга өгөх захиалга өгсөн бол шийдвэр гаргах хэрэгтэй. Та догол мөр дэх холбоосуудыг байрлуулж, хийгдэх болно. Гэхдээ энэ нь хожим тэмдэглэгдсэн байх болно, таны CSS хаяггүйгээр хэн нэг нь холбоосын том догол мөрийг харах болно. Энэ төрлийн жагсаалтанд HTML дараах байдалтай байна:

Аудио файлуудыг нэмэх Вэбсайтны үндсэн хаягууд Хамгийн шилдэг вэб дизайн програм Нийт хуудас алдагдсан вэб хуудас бүтээх Color Symbolism

Харин оронд нь, та андройдын жагсаалтыг ашиглан өөрийн үүлийг үүсгэхийг санал болгож байна. Энэ бол HTML болон CSS кодын хэд хэдэн мөр юм. Гэхдээ хэн үүнийг үзэх гэж байгаагаас үл хамааран агуулга нь уншигдах боломжтой гэдгийг баталгаажуулдаг. HTML нь иймэрхүү харагдах болно:

• Аудио файлуудыг нэмэх
• Вэбсайтын үндсэн хаягууд
• Шилдэг Вэб дизайн Програм хангамж
• Алга болсон вэб хуудас бүтээх
• Color Symbolism

  Гэхдээ Tag Cloud-ийн хэв маягууд хаана байна

  Одоо бид CSS-ийн хэв маягийг сонирхолтой хэсэг болгон авч байна. Та шошгоны үүлийг хэвлэдэг бол та ихэвчлэн үсгийн хэмжээ, үсгийн хэмжээг өөрчлөх боломжтой. Мөн та фонтын өнгө, дэвсгэр эсвэл бусад загварын шинж чанарыг өөрчилж болно, гэхдээ хэмжээ, жин нь уламжлалт.

  Танд 10 төрлийн хэв маяг хэрэгтэй.

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

  Би cloud-ээр тойрсон зарим загварыг дуртай болгохыг хүсч байна. Үүлний текстийг байрлуул, үүлийг уншиж болохуйц мөрийн өндрийг тогтоож, зангуугийн шошгонууд нь дээр нь ямар ч бөглөөгүй эсэхийг шалгаарай:

  #cloud {padding: 2px; мөрийн өндөр: 3em; текст-шугам: төв; } #cloud a {padding: 0px; }

  Эцэст нь хэлэхэд хэрэв та семантик хэлбэрийн арга хэрэглэж байгаа бол (өөрөөр хэлбэл unordered list) бол CSS гэсэн хоёр мөрийг нэмж оруулах хэрэгтэй бөгөөд ингэснээр жагсаалт нь сумгүй бөгөөд таблет хийлгүйгээр:

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