67169

Оформлення списків та посилань

Лекция

Информатика, кибернетика и программирование

Багато елементів на Web-сторінці є в деякій мірі “великодушними” з точки зору дизайну – якщо вони не “цілком правильні”, то це не має великого значення. У випадку списків і посилань зовсім інша історія – якщо записати їх неправильно...

Украинкский

2014-09-04

631 KB

1 чел.

Тема № 6: «Оформлення списків та посилань»

ЗМІСТ

Вступ

Оформлення списків 

Базові маркери і числа

Спеціальні маркери, що використовують зображення

Поля і заповнення списків 

Використання list-style-position

Що щодо списків визначень?

Вкладені списки

Горизонтальні списки

Помилкові стовпці 

Висновок за списками

Оформлення посилань 

Розгляд стану посилань

Як еволюція браузерів задає очікування

Очікування користувачів

Використовуйте колір з обережністю

Приступимо до справи: CSS 

Приклад: відновлення значень за замовчуванням браузера Netscape 

Іконки на посиланнях

Об’єднуємо всі разом – просте навігаційне меню

Резюме

Контрольні запитання

Додаткове читання


Вступ

Багато елементів на Web-сторінці є в деякій мірі “великодушними” з точки зору дизайну – якщо вони не “цілком правильні”, то це не має великого значення. У випадку списків і посилань зовсім інша історія – якщо записати їх неправильно, то це може створювати серйозні проблеми для людей, які намагаються використовувати Web-сайт.

Посилання, зокрема, мають деякі ключові вимоги оформлення та очікування користувачів. Погано оформлені посилання можуть зіпсувати взаємодію користувачів з Web-сайтом, тому що їм доведеться зупинятися і думати про те, де зробити клацання. У гіршому випадку користувач не зможе навіть сказати, які об’єкти на сторінці є в дійсності посиланнями.

У цій темі ми розглянемо базові навички, які потрібні для створення надійного оформлення списків і посилань. Ми обговоримо також деякі способи ухилення від основних пасток цих елементів і створення результату, який буде працювати в різних браузерах і буде доступний користувачам з функціональними вадами.

У цій темі використовується кілька прикладів, які будуть розглянуті в ході викладу.

  1.  Оформлення списків

Розглянемо, насамперед, основи оформлення списків за допомогою CSS, перш ніж переходити до розгляду більш складних методів.

Базові маркери і числа

Фундаментальним питанням розгляду при створенні оформлення списку є форма маркера або спосіб нумерації, який бажано використовувати. Можна також взагалі не використовувати маркери і числа. Як було показано раніше, існує безліч різних можливостей, що задаються за допомогою властивості list-style-type.

Наприклад, щоб задати для всіх невпорядкованих списків на сайті квадратні маркери, використовуйте наступний код CSS:

ul li {

list-style-type: square;

}

який створює щось подібне зображеному на мал.1:

Мал.1. Невпорядкований список з квадратними маркерами

Кілька поширених типів списків показані на мал.2:

Мал.2. Поширені стилі списків

Існують також й інші менш поширені можливості.

Відзначимо, що маркери і цифри будуть зображуватися кольором, який задається або успадковується елементом li. Якщо потрібно, щоб маркер мав колір відмінний від тексту, потрібно використовувати зображення, або вирішити проблему за допомогою інших елементів у пунктах списку (це можна легко зробити, наприклад, коли всі пункти є посиланнями).

Спеціальні маркери, що використовують зображення

Стандартної множини маркерів достатньо для базового контенту, однак широко поширена вимога заміни їх спеціальним зображенням.

Специфікація CSS містить властивість list-style-image для додавання спеціального зображення списку. Однак ця властивість має обмежені можливості позиціонування для фонового зображення, і в деяких ситуаціях взагалі не працює в браузері IE. Тому значно більш поширеною практикою є просто завдання фонового зображення в пунктах списку.

Уявімо, що є список стрічок RSS і необхідно змінити маркер на стандартну помаранчеву іконку RSS. Ми задаємо для списку клас “rss”, щоб виділити його з інших списків:

<ul class="rss">

<li><a href="http://example.com/rss.xml">News</a></li>

<li><a href="http://example.com/rss.xml">Sport</a></li>

<li><a href="http://example.com/rss.xml">Weather</a></li>

<li><a href="http://example.com/rss.xml">Business</a></li>

<li><a href="http://example.com/rss.xml">Entertainment</a></li>

<li><a href="http://example.com/rss.xml">Funny News</a></li>

</ul>

Перш за все, визначаємо для списку відсутність list-style-type і видаляємо поле і заповнення. Потім ми додаємо просто фонове зображення для кожного пункту списку, деяке заповнення зліва, щоб змістити текст, дозволяючи вивести зображення, і якесь заповнення знизу, щоб розтягнути простір між пунктами списку:

.rss {

margin: 0;

padding: 0;

list-style-type: none;

}

.rss li {

background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;

padding: 0 0 5px 15px;

}

Це створює список із зображенням RSS замість маркерів, як показано на мал. 3:

Відзначимо, що фонове зображення позиціонується для точного розміщення за допомогою пікселів. У залежності від створюваного дизайну, можна використовувати також %, em або ключові слова.

Будьте уважні при проектуванні властивостей контенту, які можуть створювати багаторядкові пункти списків – якщо задати для фонового зображення вертикальне центрування або 50%, то це може виглядати досить дивно, як показано на мал.4:

Мал.4. Демонстрація вертикально центрованих маркерних зображень на багаторядковому пункті списку

Задаючи розміщення зображення зверху пункту списку, ми зберігаємо поведінку маркерів, які використовується за замовчуванням (коли маркер розміщується в першому рядку) – див. мал.5:

Мал.5. Демонстрація вирівняних по верху маркерних зображень на багаторядковому пункті списку

Поля і заповнення списків

Розумне використання полів і заповнення може надати списку більш професійний та бездоганний вигляд, але ви повинні знати, що робите, і пам’ятати також, що ситуація може відрізнятися для різних типів списків. У цьому розділі ми розглянемо застосування розумних полів і заповнення для двох найбільш поширених типів списків.

Невпорядковані списки

Один момент, який можна помітити досить швидко, полягає в тому, що стиль оформлення списків, який використовується за замовчуванням, робить для них відступ більше, ніж стиль для параграфів, який використовується за замовчуванням – див. мал.6:

Мал.6. Оформлені за замовчуванням списки мають відступ зліва

Якщо потрібно, щоб пункти неупорядкованого списку перебували в тій же точці вирівнювання ліворуч, що й інший контент, знадобиться задати кілька стилів для управління відступом відповідно до вимог. Різні браузери вимагають різних настроювань – деяким потрібне видалення полів, для інших потрібно видалити заповнення. Тому, щоб задовольнити всі браузери, обнуляємо обидва значення:

ul {

margin: 0;

padding: 0;

}

Це може створювати не той результат, який очікується, тому що текст буде притиснутий вліво, а маркери будуть розташовуватися за межами тексту, як показано на мал.7:

Мал.7. Маркери розташовуються ліворуч від тексту.

Тому, щоб вирівняти маркери ліворуч, тепер можна задати поле для пунктів списку, щоб все лежало на одній прямій:

ul {

margin-left: 0;

padding-left: 0;

}

ul li {

margin-left: 1em;

}

… можна по колишньому виявити відмінності на рівні пікселів між різними браузерами, але результат буде узгоджений наскільки можливо – див. мал.8:

Мал.8. Маркери вирівняні відповідно з оточуючими параграфами

Впорядковані списки

Тепер необхідно розглянути таку ж проблему в застосуванні до впорядкованих списків. Вони трохи складніші, тому що числові маркери вирівнюються згідно з пунктом списку з найбільшим числовим значенням. Наприклад, якщо є десять пунктів списку, десяткові значення будуть розміщені так, щоб можна було вивести пункт “10″, як показано на мал.9:

Мал.9. Числові маркери пунктів 1-9 мають додаткове заповнення, щоб вони вирівнювалися праворуч до пункту 10

Тому, насправді не існує способу зробити узгоджене вирівнювання ліворуч з тією ж позицією, що і навколишній текст, якщо тільки не поставити для списку list-style-type: decimal-leading-zero;, що приховує проблему, як видно на мал.10:

Мал.10. Провідні нулі заповнюють простір для пунктів 1-9

Зазвичай прийнято просто залишати різну відстань. Однак це означає, що маркери впорядкованих та невпорядкованих списків не можна без проблем узгоджено вирівняти ліворуч. Можна тільки вирівняти текст списків:

ul, ol {

margin-left: 0;

padding-left: 0;

}

li {

margin-left: 2em;

}

Потрібно як мінімум 2em лівого поля, щоб розмістити як впорядковані, так і невпорядковані списки. На мал.11 зверніть увагу на те, як текст пунктів вирівнюється в обох списках:

Мал.11. Текст вирівнюється в упорядкованому і невпорядкованому списках

Отже, що робити?

По суті, є три можливості:

  1.  Залишити розміщення списків та їх маркерів, що використовується за замовчуванням
  2.  Явно вирівняти текст списків
  3.  Задати інший стиль для ul і ol

Не існує “правильного” або “неправильного” підходу, і цілком припустимо залишити просто в звичайному контенті налаштування для списків за замовчуванням.

Використання list-style-position

Якщо потрібно, щоб текст багаторядкових пунктів списку загортався під маркер списку, необхідно задати властивість list-style-position як inside, що створює результат, який можна бачити на мал.12:

Мал.12.

Внутрішнє розміщення маркерів не особливо популярний стиль оформлення. За замовчуванням list-style-position задається як outside, що створює результати, які розглядаються в інших місцях цієї теми.

Що щодо списків визначень?

Зазвичай списки визначень не вимагають великої уваги, за винятком завдання стилю dt (зазвичай жирний текст) та управління відступом визначень:

dt {

font-weight: bold;

}

dd {

margin-left: 2em;

}

Це задає чітке і просте оформлення списків визначень, як на мал.13:

Мал.13. Оформлений список визначень

Хоча списки визначень можна реорганізувати за допомогою плаваючих елементів і позиціонування, вони будуть дуже дивними, й, звичайно, краще зберігати все простим. Вони досить корисні як вони є, просто з невеликою зміною, щоб сильніше виділити терміни визначень і зробити для визначень хороші відступи.

Вкладені списки

При створенні коду CSS необхідно бути уважним при підтримці чіткої ключової інформації, щоб показати ставлення між вкладеним списком і списком, що містить його. Безсумнівно, найбільш поширеним способом для цього є використання відступів для пунктів вкладеного списку – це, фактично, настройка за замовчуванням в різних браузерах.

Якщо ви задаєте свій власний відступ списку, базове налаштування буде просто розмножуватись. Наприклад, розглянемо наступний код CSS:

ul, ol {

margin-left: 0;

padding-left: 0;

}

li {

margin-left: 2em;

}

Кожен пункт подальшого списку нащадка в ланцюжку успадковує значення полів свого пункту списку предка, на додаток до наявних своїм власним 2em. Тому пункт списку верхнього рівня (який не має пункту списку в якості елемента предка) буде мати ліве поле 2em, а пункт списку нащадка першого пункту списку буде наслідувати 2em від свого предка, і потім додає 2em, одержуючи всього 4em … і т.д.

Горизонтальні списки

Однією з найбільш поширених змін, необхідних при роботі зі списком, є створення горизонтального списку – тобто, висновок пунктів списку поруч один з одним, а не один під іншим. Це звичайний прийом при створенні навігації сайту.

Давайте перетворимо його в горизонтальний список, як показано на мал.15:

Мал.15. Простий горизонтальний список

Щоб домогтися цього, необхідно зробити зі списком три речі:

  •  Видалити margin і padding з <ul>
  •  Поставити для пунктів списку display: inline;
  •  Поставити для пунктів списку деякий пробіл праворуч, щоб уникнути їх злипання

У цьому прикладі список має ID “mainmenu“, тому будемо використовувати його в якості контекстного селектора, щоб гарантувати, що змінюється тільки той список, який повинен бути змінений. Код CSS має вигляд:

#mainmenu {

margin: 0;

padding: 0;

}

#mainmenu li {

display: inline;

padding: 0 1em 0 0;

}

У цьому простому прикладі завдання для пунктів меню display: inline; буде достатньо; знайте також, що використання float: left; створює аналогічний вигляд. Ми познайомимося більше з плаваючими елементами пізніше в курсі.

Помилкові стовпці

Раніше ми створили список стрічок RSS. Тепер давайте уявимо, що список був поміщений в бічну панель сайту. Дизайнер хоче, щоб список виводився двома стовпцями і з кордоном навколо всієї групи, як показано на мал.16.

Мал.16. Список стрічок у двох стовпцях з іконкою RSS в якості маркера

Давайте припустимо, що список знаходиться в елементі <div>, який задає ширину і кордон. Базовий список буде виглядати приблизно як на мал.17:

Мал.17. Неоформлений список всередині кордону

Додамо спочатку іконку RSS, як було показано раніше, потім додамо поля 5px зверху, праворуч і ліворуч:

.rss {

margin: 5px 5px 0 5px;

padding: 0;

}

.rss li {

list-style-type: none;

background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;

padding: 0 0 5px 15px;

}

Нам не потрібно додавати нижнє поле, тому що останній пункт списку буде додавати правильний інтервал своїм заповненням, як видно на мал.18:

Мал.18. Півдороги пройдено – ми маємо тепер правильний інтервал й іконки маркерів

Тепер задамо для пунктів списку display: inline-block;, і задамо їх ширину як 40%, а праве поле як 2% (можна використовувати також ширину в пікселях). Необхідно також явно задати для <ul> ширину 100%, щоб гарантувати, що список правильно загортається і вимірюється:

.rss {

margin: 5px 5px 0 5px;

padding: 0;

width: 100%;

}

.rss li {

display: inline-block;

width: 40%;

margin: 0 2% 0 0;

list-style-type: none;

background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;

padding: 0 0 5px 15px;

}

У більшості браузерів цього буде достатньо для створення ефекту стовпців, але потрібно буде явно налаштувати в браузері IE зсув пунктів списку ліворуч. Давайте скористаємося умовним стильовим оформленням для всіх версій до IE7 (бо ми ще не знаємо, що будуть робити майбутні версії):

<!--[if lte IE 7]>

<style type="text/css">

.rss li {

float: left;

}

</style>

<![endif]-->

Ми маємо тепер необхідний двухстовпцевий результат, як видно на мал.19:

Мал.19. Готовий список

Успадковані браузери

Якщо потрібно створити такий дизайн для більш старих браузерів, які не підтримують рядковий блок (inline-block), то потрібно буде змістити пункти списку ліворуч у всіх браузерах і використовувати виправлення очищенням. Завдяки останньому раунду випусків браузери зробили inline-block цінною властивістю виведення, тому якщо у вас немає великої частки більш старих браузерів, таких як Firefox 2, ви зможете використовувати метод inline-block.

Висновок за списками

Ми розглянули зараз базову множину варіантів оформлення і методів для списків. Ви можете реалізувати ці приклади і об’єднувати їх для створення великого числа рішень. Так як списки дуже часто об’єднують з посиланнями, давайте перейдемо до посилань.

  1.  Оформлення посилань

Оформлення посилань може бути в деякій мірі формою мистецтва. Існує безліч різних вимог і може бути важко всі їх узгодити, створюючи при цьому естетично цікавий результат.

Тим не менш, це цілком можливо, поки ви пам’ятаєте декілька простих правил:

  •  Розуміти різні стани посилань
  •  Не відхилятися занадто далеко від очікувань користувача
  •  Використовувати кольори з обережністю

Якщо слідувати цим правилам, ви будете створювати посилання, які зрозумілі і легко використовувані.

Розуміння стану посилань

Перш ніж можна буде оформляти посилання, необхідно зрозуміти різні стани посилань. Всього існує п’ять станів: не відвідане/за замовчуванням, відвідане, фокус, під покажчиком і активне.

  •  Не відвідані (unvisited) – стан посилання за замовчуванням, коли воно не було раніше активоване або відвідане.
  •  Відвідане (visited) – cтан посилання, яке користувач вже відвідав.
  •  Фокус (focus) – застосовується, коли посилання має фокус – наприклад, курсор клавіатури користувача перебуває на посиланні. Примітка: Браузер IE не підтримує в даний час стан фокусу, і використовує просто стан active замість focus.
  •  Під покажчиком (hover) – застосовується, коли користувач “утримує” над посиланням покажчик, такий як покажчик миші, але ще не клацнув по ньому.
  •  Активне (active) – застосовується, коли користувач активує посилання– буквально в той час, коли робить по ньому клацання. У деяких браузерах цей стиль застосовується також, коли посилання відкрите в іншому вікні або вкладці.

Потрібно завжди визначати код CSS для кожного з цих станів. Кожне з них передає користувачеві інформацію про те, як він взаємодіє з посиланням. Якщо є якісь сумніви щодо focus, hover і active, можна просто оформити focus і hover однаковим чином, так як їхні функції досить схожі, так що однаковий стиль посилання не повинен викликати плутанини. Потім можна буде додати якусь просту варіацію для active, наприклад, змінюючи текст на курсив. У крайньому випадку, можна оформити всі три однаково.

Зверніть увагу, що ці стани не є взаємо виключаючими (хоча насправді посилання не може одночасно бути відвідане і не відвідане) – однак цілком можливо для посилання бути одночасно hover, active і visited.

Як еволюція браузерів задає очікування

Щоб краще зрозуміти деякі поширені очікування користувачів щодо посилань, буде корисно трохи познайомитися з історією Web.

Ви могли чути, як люди посилаються щодо посилань на “поведінка за умовчанням в стилі Netscape”, або що посилання завжди повинні бути синіми або пурпуровими. Це має відношення до найперших днів Web, коли браузери задавали кольори для контенту і автори мали не надто великі можливості по управлінню подання своїх сторінок.

Текст був чорний, фон – сірий, а всі посилання були підкреслені. Невідвідані посилання були синіми, відвідані посилання були пурпурними, а активні посилання були червоними … і це, власне, і було все. Див. мал.20 в якості ілюстрації.

Мал.20. Знімок з екрану браузера Mosaic

Хоча це було трохи одноманітно, зате було узгоджено – і це визначило базову лінію очікувань користувачів. Зокрема до сьогоднішнього дня користувачі очікують, що підкреслений текст є посиланням. Вони можуть не чекати, що всі посилання будуть підкреслені, але вони безумовно очікують, що підкреслений текст буде посиланням. Найкраще не вступати в протиріччя з цим очікуванням.

Деякі сайти все ще використовують сині й пурпурні посилання; і кольори цих посилань як і раніше використовуються за замовчуванням для нестилізованого контенту в більшості браузерів. Хоча можна завжди повернутися в минуле і дотримуватися цієї множини кольорів, користувачі, зазвичай, відчувають себе цілком комфортно з іншими варіантами – у певних межах.

Очікування користувачів

Існує кілька загальних правил для очікувань користувачів щодо посилань:

  •  Користувачі очікують, що посилання відрізняються від решти тексту, який не є посиланням
  •  Користувачі очікують, що посилання реагують, коли вони наводять на них курсор або фокус клавіатури
  •  Користувачі очікують, що посилання змінюються після того, як вони відвідали посилання
  •  Користувачі люблять узгодженість в оформленні посилань однаковими функціями, щоб знати, де треба клацнути
  •  Користувачі очікують, що підкреслений текст буде посиланням – тому не використовуйте підкреслення для чогось іншого

Ви повинні завжди дотримуватися цих базових правил, так як вони допоможуть вашим користувачам швидко визначити і використовувати посилання. Ви повинні створювати стилі, які не змусять когось зупинитися і задуматися “а що ж тут буде посиланнями?!”.

Ці очікування транслюються в кілька простих правил кодування:

  •  Задавайте оформлення для всіх станів посилань
  •  Використовуйте підкреслення тільки для посилань

Використовуйте колір з обережністю

При оформленні посилань прагніть не покладатися повністю на колір для розрізнення станів посилань. Не всі можуть бачити колір однаково (наприклад, люди дальтоніки), тому необхідно використовувати колір і оформлення, таке як різні підкреслення, іконки і протилежні кольори.

Необхідно також перевірити, що обрані кольори мають достатню контрастність – це насправді легко зробити за допомогою таких інструментів як Colour Contrast Analyser (для ПК і Mac) або Web Accessibility Toolbar for Opera (обидва інструменту компанії Paciello Group).

The Colour Contrast Analyser (див. мал.21) дозволяє використовувати спеціальний інструмент для вибору кольорів фону і переднього плану на екрані, а потім отримати просту оцінку їх контрасту:

Мал.21. Знімок з екрану Colour Contrast Analyser під час використання

Якщо всі чотири результати аналізатора контрасту показують pass, то колірна комбінація буде гарною. Не забудьте перевірити всі стани посилань. Може знадобитися ввести деякі з них вручну в “шістнадцяткове” поле для перевірки focus, hover і active.

Приступимо до справи: CSS

Тепер, після розгляду деяких базових правил для посилань, давайте звернемося до кодування – цей розділ містить всі деталі коду CSS, який може знадобитися для успішного оформлення посилань.

Оформлення стану посилань у правильному порядку

Перш за все, необхідно знати, що якщо стилі посилань будуть розміщені в неправильному порядку в таблиці стилів, налаштування будуть перевизначати один одного і стани посилань не будуть працювати. Стилі посилань завжди повинні розташовуватися в наступному порядку:

  1.  link
  2.  visited
  3.  focus
  4.  hover
  5.  active

Різні стани посилань оформляють за допомогою їх “псевдо класів” – :link, :visited, :focus, :hover, :active – які додають до селектора елемента посилання, a. Тому початковий CSS повинен виглядати наступним чином:

a:link{}

a:visited{}

a:focus{}

a:hover{}

a:active{}

Якщо ви хочете задати правило CSS для всіх посилань в усіх станах, то можна оформляти безпосередньо a. Не забудьте тільки помістити спочатку базове правило, щоб зберегти порядок:

a {}

a:link{}

a:visited{}

a:focus{}

a:hover{}

a:active{}

Це буде корисно, якщо ви збираєтеся замінити використовуване за замовчуванням підкреслення нижньою межею, що є звичайним прийомом поліпшення візуального контролю над оформленням.

Управління поведінкою за замовчуванням

За замовчуванням більшість браузерів задає для всіх посилань підкреслення, а стан фокусу клавіатури посилань має рамку, як показано на мал.22:

Мал.22. Зліва направо: використовується за умовчанням оформлення фокусу клавіатури в Opera 9, Firefox 2 і IE7

Якщо ви замінюєте ці стилі чимось іншим, можна змінити або відключити цю поведінку за замовчуванням.

Підкреслення

Підкреслення задається за допомогою властивості text-decoration :

a {

text-decoration: underline;

}

Можна відключити підкреслення, задаючи для цієї властивості значення none:

a {

text-decoration: none;

}

Навіть якщо ви зберігаєте стиль підкреслення, можливо, буде простіше відключити властивість text-decoration і використовувати border-bottom для завдання помилкового підкреслення. Ми розглянемо цей метод у прикладі нижче.

Створення рамки

Створення рамки фокусу управляється властивістю outline. Рамка майже те ж саме, що і кордон, але вона не потребує простору і не викликає при появі зміни потоку сторінки (зверніть увагу, що це не підтримується в браузері IE7 і більш ранніх версіях). Найлегше керувати рамкою за допомогою скороченої властивості:

a:focus{

outline: thick solid #000;

}

Цей приклад представить щось схоже на мал.23:

Мал.23. Приклад виведення товстої чорної рамки

Якщо ви сумніваєтеся, що робити з рамкою, залиште просто рамку у відповідності зі значеннями браузера за замовчуванням.

Приклад: відновлення значень за замовчуванням браузера Netscape

В якості простого прикладу оформлення посилань давайте відновимо значення за замовчуванням браузера Netscape для синього, пурпурного і червоного кольорів посилань. Ми збережемо підкреслення, але додамо для стану active використання курсиву. Ми збільшимо розмір тексту для цього прикладу і задамо для сторінки білий фон.

body {

color: #000;background: #fff;

font-size: 2em;

}

a {

text-decoration: underline;

}

a:link{

color: #0000CC;

}

a:visited{

color: #6D006D;

}

a:focus{

color: #CC0000;

}

a:hover{

color: #CC0000;

}

a:active{

color: #CC0000;

font-style: italic;

}

У результаті буде отримано щось схоже на мал.24:

Мал.24. Відновлення значень за замовчуванням для браузера Netscape.

Помилкові підкреслення за допомогою border-bottom

Багато дизайнерів помітили, що підкреслення є трохи товстуватим і перетинає нижні виносні елементи малих літер – тобто лінія проходить через нижню частину букв g, j, p, q і y. Це показано на мал.25:

Мал.25: Підкреслення перетинає виносні елементи малих літер.

Давайте припустимо, що людина, яка проектує сайт, погодилася і захотіла, щоб підкреслення було тонше і не стосувалося тексту. Для виконання цього звичайного запиту, ми використовуємо замість підкреслення кордон, тому він виглядає, як показано на мал.26:

Мал.26. Використання кордону замість підкреслення створює більш критичний результат

Перш за все, відключаємо підкреслення всіх станів посилань, а потім задаємо border-bottom відповідно до кольору посилання для кожного стану:

body {

background: #fff;

color: #000;

font-size: 2em;

}

a {

text-decoration: none;

}

a:link{

color: #00c;

border-bottom: 1px solid #00c;

}

a:visited{

color: #6D006D;

border-bottom: 1px solid #6D006D;

}

a:focus{

color: #c00;

border-bottom: 1px solid #c00;

}

a:hover{

color: #c00;

border-bottom: 1px solid #c00;

}

a:active{

color: #c00;

border-bottom: 1px solid #c00;

font-style: italic;

}

У результаті буде отримано щось схоже на мал.27:

Мал.27. Хибне підкреслення в дії

При використанні методу хибного кордону необхідно стежити за тим, щоб було задано досить велике значення line-height, щоб уникнути накладення підкреслення на наступний рядок тексту.

Оформлення, яке не покладається на колір

Так як приклад досі покладався повністю на колір для розрізнення чотирьох з п’яти станів посилань, ми повинні зробити наступний крок і змінити нижню межу для visited, focus і hover. Давайте задамо для відвіданого посилання (visited) точковий кордон, а для hover і active штриховий.

body {

background: #fff;

color: #000;

font-size: 2em;

}

a {

text-decoration: none;

}

a:link{

color: #00c;

border-bottom: 1px solid #00c;

}

a:visited{

color: #6D006D;

border-bottom: 1px dotted #6D006D;

}

a:focus{

color: #c00;

border-bottom: 1px dashed #c00;

}

a:hover{

color: #c00;

border-bottom: 1px dashed #c00;

}

a:active{

color: #c00;

border-bottom: 1px solid #c00;

font-style: italic;

}

У результаті буде отримано щось схоже на мал.28:

Мал.28. Зміна стилю межі для кожного стану посилання

Приймаючи focus і hover як еквівалентно оформлені стани, цей метод означає, що стани посилань розрізняються не тільки кольорами. Навіть, якщо ви бачите ці посилання чорно-білими, ви зможете визначити різні стани посилань, як показано на мал.29:

Мал.29. Стани посилань тепер розрізняються навіть в чорно-білому поданні

Іконки на посиланнях

Деякі сайти використовують іконки і символи для додавання інформації про свої посилання. Наприклад, деякі сайти використовують стрілку для вказівки, що посилання вказує на зовнішній сайт, або використовують символ “галочки”, щоб показати, що посилання було відвідано.

Такі ефекти легко створюються за допомогою фонових зображень, як показано на мал.30:

Мал.30. Приклад посилань з різними іконками

Щоб додати іконку стрілки до зовнішніх посилань, можна додати клас “external” в тег посилання:

<a href="http://example.com/" class="external">external link</a>

Потім в таблиці стилів задається фонове зображення для цього класу – не забуваючи додати заповнення для розміщення цього зображення:

a.external {

background: #fff url("icon-external.gif") center right no-repeat;

padding-right: 30px;

}

Цей приклад буде застосовувати іконку для всіх примірників відвіданих посилань у всіх станах. Якщо потрібно обмежити іконки тільки невідвідуваними зовнішніми посиланнями, можна об’єднати класи і псевдо-класи станів посилань в селекторі:

a.external:link{

background: #fff url("icon-external.gif") center right no-repeat;

padding-right: 30px;

}

Об’єднання класів і станів відкриває широкі творчі можливості для посилань. Не забудьте перевірити свої кольори, вашим єдиним обмеженням з цієї точки зору є тільки уява.

  1.  Об’єднуємо все разом – просте навігаційне меню

Для ілюстрації одного із способів об’єднання списків і посилань, нижче представлений простий приклад спадаючого навігаційного меню, показаного на мал.31. Спадаюче меню є дуже поширеною навігаційною системою.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv= "Content-Type" content="text/html; charset=utf-8"/>

<title>Styling Lists example - basic flyout list</title>

<link rel="stylesheet" href="styling-lists-example-flyout.css" type="text/css" media= "screen, projection"/>

<script type="text/javascript" src="styling-lists-example-flyout.js"></script>

</head>

<body>

<div id="page">

<h1 >Home</h1>

<!-- Зверніть увагу, що ID контейнерного списку повинен відповідати ID, заданому в Javascript. -- >

<ul id="nav">

<li><a href="http://example.com/">Home</a>

<ul>

<li><a href="http://example.com/">Nested Item</a></li>

<li><a href="http://example.com/">Nested Item</a></li>

</ul>

</li>

<li><a href="http://example.com/">About Us</a>

<ul>

<li><a href="http://example.com/">Nested Item</a></li>

<li><a href="http://example.com/">Nested Item</a></li>

</ul>

</li>

<li><a href="http://example.com/">Our Products</a >

<ul>

<li><a href="http://example.com/">Nested Item</a></li>

<li><a href="http://example.com/">Nested Item</a></li>

</ul>

</li>

<li><a href="http://example.com/">Contact Us</a>

<ul>

<li><a href="http://example.com/">Nested Item</a></li>

<li><a href="http://example.com/">Nested Item</a></li>

</ul>

</li>

</ul>

<h2>Stuff</h2>

<p>Text</p>

<p>Text</p>

</div> <!-- // #page -- >

</body>

</html>

Мал.31. Знімок з екрану прикладу спадаючого меню

  1.  Резюме

Хороші навички оформлення списків і посилань є суттєво важливими для розробників Web, так як вони використовуються повсюдно. Вони регулярно об’єднуються для створення навігації сайту; в той же час чітке оформлення посилань є критично важливим при використанні будь-якого сайту. Погане оформлення посилань може серйозно заплутати будь-кого, і може навіть зробити сайт непридатним для деяких людей.

  1.  Контрольні запитання
  •  Як вибирати оформлення базових списків, наприклад, квадратні маркери або римські цифри для впорядкованого списку?
  •  Що таке спрайт зображення і навіщо він використовується?
  •  Чому важливий колірний контраст, і як перевірити, що посилання використовують відповідні кольори?
  •  Що таке правильний порядок завдання оформлення різних станів посилань?
  1.  Додаткове читання
  •  Список виправлень WCAG Samurai для WCAG 1.0, зі спеціальним посиланням на Рекомендацію 2. Не покладайтеся тільки на колір
  •  Шрифт і колір (глава з книги “Створення доступних Web-сайтів”, Джо Кларк)
  •  Juicy Studio: Виділення посилань
  •  Max Design – Прості доступні зовнішні посилання
  •  Аналізатор контрасту 2.0 (Paciello Group)
  •  A List Apart: Спрайт CSS


 

А также другие работы, которые могут Вас заинтересовать

19435. Табличные базы данных (БД): основные понятия (поле, запись, первичный ключ записи); типы данных. Системы управления базами данных и принципы работы с ними 113.5 KB
  Табличные базы данных БД: основные понятия поле запись первичный ключ записи; типы данных. Системы управления базами данных и принципы работы с ними. Поиск удаление и сортировка данных в БД. Условия поиска логические выражения; порядок и ключи сортировки. Любой из на...
19436. Технология обработки информации в электронных таблицах (ЭТ). Структура электронной таблицы. Типы данных: числа, формулы, текст 212.5 KB
  Технология обработки информации в электронных таблицах ЭТ. Структура электронной таблицы. Типы данных: числа формулы текст. Правила записи формул. Основные встроенные функции. Абсолютные и относительные ссылки. Графическое представление данных. При работе с документ...
19437. Основные принципы организации и функционирования компьютерных сетей. Интернет. Информационные ресурсы и сервисы компьютерных сетей 102 KB
  Основные принципы организации и функционирования компьютерных сетей. Интернет. Информационные ресурсы и сервисы компьютерных сетей: Всемирная паутина файловые архивы интерактивное общение. Назначение и возможности электронной почты. Поиск информации в Интернете. В
19438. Понятие модели. Информационная модель. Виды информационных моделей (на примерах). Реализация информационных моделей на компьютере 930 KB
  Понятие модели. Информационная модель. Виды информационных моделей на примерах. Реализация информационных моделей на компьютере. Пример применения электронной таблицы в качестве инструмента математического моделирования. Человечество в своей деятельности научной ...
19439. Виды гражданских правоотношений 26.5 KB
  Виды гражданских правоотношений Классификация гражданских правоотношений может проводиться по различным основаниям: Абсолютные и относительные правоотношения – выделяют по характеру взаимосвязи управомоченного и обязанного лица; В абсолютном правоотнош...
19440. Понятие и содержание гражданской правоспособности 23 KB
  Понятие и содержание гражданской правоспособности. Правоспособность способность лица иметь гражданские права и нести гражданские обязанности признается в равной мере за всеми гражданами Содержание В соответствии со ст. 18 ГК граждане могут иметь имущество на пра
19441. Понятие и структура дееспособности. Дееспособность малолетних и несовершеннолетних. Эмансипация 26 KB
  Понятие и структура дееспособности. Дееспособность малолетних и несовершеннолетних. Эмансипация. Дееспособность граждан определяется как способность лица своими действиями приобретать и осуществлять гражданские права создавать для себя гражданские обязанности и и
19442. Ограничение дееспособности и признание граждан недееспособными 24.5 KB
  Ограничение дееспособности и признание граждан недееспособными. Гражданин который вследствие психического расстройства не может понимать значения своих действий или руководить ими признается судом недееспособным. В этом случае гражданин не вправе совершать в...
19443. Опека и попечительство. Патронаж 25 KB
  Опека и попечительство. Патронаж. Опека устанавливается над малолетними над гражданами признанными судом недееспособными вследствие душевной болезни или слабоумия. Опекун законный представитель подопечного и совершает сделки от его имени и в его интересах. Попечит