Як створити панель навігації з неупорядкованого списку посилань у Dreamweaver

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

Авторство: фотографії istockphoto.com

Ті самі посилання все ще містяться в неупорядкованому списку, але застосування стилів різко змінює їх вигляд.

Авторство: фотографії istockphoto.com

Щоб створити панель навігації за допомогою CSS для перевизначення неупорядкованого списку та тегів посилань, виконайте такі дії:

Клацніть, щоб розмістити курсор у тому місці, де потрібно створити панель навігації на сторінці.

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

Щоб відформатувати посилання як невпорядкований список, відокремте кожен рядок тексту, який потрібно зв’язати за допомогою a

тег.

Створіть посилання, виділивши по черзі кожен фрагмент тексту, клацнувши піктограму гіперпосилання на панелі «Загальна вставка», а потім вибравши сторінку, на яку потрібно посилатися, або ввівши URL-адресу.

Перетягніть, щоб вибрати весь набір посилань, а потім клацніть піктограму Невпорядкований список в інспекторі властивостей.

На початку кожного посилання з’являється маркер. Якщо будь-яке посилання не позначено окремим маркером, клацніть, щоб видалити пробіл між ним і посиланням перед ним, а потім натисніть Return або Enter, щоб розділити посилання поверненням абзацу.

Щоб додати a

позначте тегом список посилань (або будь-який інший вміст, який уже є на сторінці), виберіть вміст, а потім клацніть піктограму Div на панелі «Загальна вставка».

Відкриється діалогове вікно Вставити Div.

Додавання a

тег навколо невпорядкованого списку посилань корисний, якщо ви хочете додати форматування.

Виберіть «Обгорнути виділення» зі спадного списку «Вставити».

Для більш точного контролю над тим, куди ви додаєте новий

Ви можете вибрати параметри зі спадного списку Вставити у верхній частині діалогового вікна Вставити Div.

Введіть ім’я в поле Class або ID.

А

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

У нижній частині діалогового вікна «Вставити Div» натисніть кнопку «Нове правило CSS».

Нове ім’я правила CSS додається до списку імен стилів на панелі вибору CSS Designer.

На панелі «Властивості» вкажіть потрібні параметри кольору, фону, розміру, полів і відступів.

Форматування стилю автоматично застосовується до вмісту

тег, оскільки ви застосували стиль, як створили його на кроках 5–7.

Щоб створити складений стиль, який буде форматувати невпорядкований список лише тоді, коли він використовується на панелі навігації, створіть складений стиль, який містить ім’я класу .navbar:

Розмістіть курсор у будь-якому місці маркованого списку.

Натисніть значок плюса (+) у верхній частині панелі вибору.

У полі «Ім’я селектора» переконайтеся, що Dreamweaver автоматично ввів .navbar ul як назву нового стилю на панелі «Вибірники».

На панелі «Властивості» встановіть поля та відступи на 0.

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

Розмістіть курсор у будь-якому місці маркованого списку.

Клацніть знак плюс у верхній частині панелі вибору.

У полі «Ім’я селектора» переконайтеся, що Dreamweaver автоматично ввів .navbar ul li як назву нового стилю на панелі «Селектор».

На панелі «Властивості» встановіть «Дисплей» на «Вбудований».

Змініть тип стилю списку на «Немає», щоб видалити маркер.

Встановіть ліве та праве поля на 20 пікселів.

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

Створіть стиль для перевизначення тегу посилання:

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

Клацніть знак плюс у верхній частині панелі вибору.

Якщо ви хочете змінити назву стилю, двічі клацніть ім’я на панелі «Селектор» і введіть назву, яку ви хочете використовувати.

У розділі «Текст» панелі «Властивості» встановіть «Декорація тексту» на «Немає».

У розділі «Текст» виберіть колір із колодязя кольорів, щоб указати колір посилань, коли вони завантажуються на сторінку.

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

Клацніть знак плюс у верхній частині панелі вибору.

У полі Ім’я селектора введіть .navbar a:hover.

У розділі «Текст» панелі «Властивості» встановіть «Декорація тексту» на «Немає».

У розділі «Текст» виберіть колір із колодязя, щоб указати колір посилання, коли користувач наведе курсор на посилання.

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

Клацніть знак плюс у верхній частині панелі вибору.

У полі Ім’я селектора введіть .navbar a:visited.

У розділі «Текст» панелі «Властивості» встановіть «Декорація тексту» на «Немає».

У розділі «Текст» виберіть колір із колодязя кольорів, щоб указати колір посилання після його відвідування.

Натисніть кнопку Live у верхній частині робочої області або натисніть кнопку Попередній перегляд, щоб переглянути сторінку у браузері та побачити ефект стилів посилань.