Содержание
Облако тегов — это визуальное отображение списка элементов. Вы часто будете видеть облака тегов в блогах. Это стало популярным на таких сайтах, как 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, чтобы в списке не было маркеров и не было отступа:
