Използвайте CSS за оформяне на облак от маркери
маркер облак е визуално изображение на списък с елементи. Често ще виждате облаци от маркери в блогове. Той е направен популярен от сайтове като Flickr.
Таговете облаци са списък с връзки, които се променят по размер и тегло (понякога и цвят), в зависимост от някои измерими атрибути. Повечето облаци от маркери са създадени въз основа на популярността или броя страници, които са маркирани с този конкретен маркер. Но можете да създадете тагове облак от всеки списък от елементи на вашия сайт, които имат най-малко два начина за показването им. Например:
- Списък на статиите в азбучен ред със стилове, показващи популярността на статиите.
- Списък на уеб сайтове по азбучен ред със стилове, показващи кои от тях ви харесват най-добре.
- Списък на уеб редакторите, изброени в ценовата поръчка, със стилове, показващи колко близко се достига до предварително определен набор от критерии.
- Списък на приятелите със стиловете, показващи разстоянието от дома ви до тяхната.
Какво трябва да направите, за да създадете табло за облак?
Лесно е да се изгради тагове облак, имате нужда само от две неща:
- Списък с елементи (като уеб статии, уеб сайтове или ваши приятели)
- Измерване за всеки от елементите (например показвания на страници на ден, класиране 1-10 или разстоянието до къщата ви).
Повечето облаци от маркери са списъци с връзки, така че помага, ако всеки елемент има свързан с него URL адрес. Но това не е необходимо за създаване на визуална йерархия.
Стъпки за изграждане на Tag Cloud от популярни връзки
Сайтът ми има статии, които всеки ден получават изгледи на страници и това е лесен показател, който да използвам, за да създам клауд за тагове. Така че, за този пример, ще създадем клауд за тагове от списък с статии - първите 25 статии в моя сайт за седмицата от 1 януари 2007 г.
- Определете колко нива искате в йерархията си.
- Докато е възможно да имате толкова много нива в облака си, колкото имате елементи в списъка си, това става досаден за кодиране и разликите могат да бъдат много минимални. Препоръчвам да нямате повече от 10 нива в йерархията си.
- Решете точките за отрязване за всяко ниво.
- Тя може да е толкова просто, колкото да намалите броя на показванията на страниците си на ден на 1/10 резена - т.е. ако най-голямата страница на сайта ви получи 100 изгледа на страници на ден, можете да го изрежете като 100+, 90-100, 80-90, 70-80 и т.н. Нарязах моите страници по този начин.
- Посочете елементите си в реда на показване на страницата и им дайте ранг, основан на стъпка 2
- Не се притеснявайте, ако нямате елементи в някои от слотовете, което просто прави облака по-интересен.
- Поставете списъка си по азбучен ред (или каквото и да е втори сорт, който искате да използвате).
- Това прави облака интересен. Ако го оставите сортиран по ранг, то той просто ще бъде списък с най-големите елементи отгоре надолу до най-малките в дъното.
- Напишете своя HTML код, така че рангът е номер на класа. class = "tag4"> Добавяне на поточни аудио файлове
Щом имате HTML за всеки отделен елемент от списъка и реда, който искате да се покаже, трябва да вземете решение. Можете да поставите връзките в абзац и ще бъдете готови. Но това нямаше да се маркира семантично и всеки, който нямаше CSS, идващ в облака на маркерите, просто щеше да види голям раздел от връзки. HTML за този тип списъци ще изглежда така:
Добавяне на поточни аудио файлове Основни маркери за уеб сайт Най-добър софтуер за уеб дизайн Цветови символизъм а> Вместо това ви препоръчвам да създадете облак маркери, като използвате нерегистриран списък. Това е още няколко реда HTML и CSS код, но гарантира, че съдържанието ще бъде четимо, независимо кой ще го види. HTML ще изглежда така: Сега стигаме до забавната част - стиловете на CSS. Когато подсказвате облачен маркер, обикновено променяте размера на шрифта и теглото на шрифта. Можете също да промените цвета на шрифта или фона или друг атрибут на стила, но размерът и теглото са традиционни. Нуждаете се от 10 класа стил, по един за всеки маркер ранг: Обичам да включа някои стилове около самия облак: центрирайте текста в облака, задайте височина на линиите, така че облакът да може да се чете и се уверете, че етикетите на котвата нямат тампон върху тях: И накрая, ако използвате метода за семантичен стил (т.е. неорганизирания списък), ще трябва да добавите още два реда CSS, така че списъкът да няма куршуми и да не е отмерен:
Но къде са стиловете за Tag Cloud