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