Облако тегов - это визуальное изображение списка элементов. Вы часто увидите облака тегов в блогах. Он был популярен на таких сайтах, как Flickr.
Облака тегов - это список ссылок, которые изменяются по размеру и весу (иногда также цвет) в зависимости от некоторого измеряемого атрибута. Большинство облаков тегов построены на основе популярности или количества страниц, помеченных этим конкретным тегом. Но вы можете создать облако тегов из любого списка элементов вашего сайта, которые имеют как минимум два способа их отображения. Например:
- Список статей в алфавитном порядке со стилями, указывающими на популярность статей.
- Список веб-сайтов в алфавитном порядке со стилями, указывающими, какие из них вам больше всего нравятся.
- Список веб-редакторов, перечисленных в ценовом заказе, со стилями, указывающими, насколько близко каждый из них подходит к заранее определенному набору критериев.
- Список друзей со стилями, указывающими расстояние от вашего дома до их.
Что вам нужно для создания облака тегов?
Легко построить облако тегов, вам нужно всего две вещи:
- Список элементов (например, веб-статей, веб-сайтов или ваших друзей)
- Измерение для каждого из предметов (например, просмотр страниц в день, ваш рейтинг 1-10 или расстояние до вашего дома).
Большинство облаков тегов - это списки ссылок, поэтому это помогает, если каждый элемент имеет связанный с ним URL. Но это не требуется для создания визуальной иерархии.
Шаги по созданию облака тегов популярных ссылок
Наш сайт имеет статьи, которые ежедневно просматривают просмотры страниц, и это простой показатель, который мы можем использовать для создания облака тегов. Итак, для этого примера мы создадим облако тегов из списка статей, 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, чтобы список не имел пули и не был отступом:
