Деякі поведінки, що підтримуються Dreamweaver, та їх параметри
А зараз розглянемо пару поведінок Dreamweaver, які ми, найімовірніше, створюватимемо найчастіше, і параметри, які ми можемо для них вказати.
Поведінка Перехід до виконує перехід до зазначених Саме його ми зараз прив'яжемо до події onClick (клацання мишею) першого пункту смуги навігації. Відразу ж перевіримо, чи виділено його.
Оскільки ця поведінка не виконує над елементами жодних маніпуляцій, імена їм задавати не потрібно.
Dreamweaver створює таку поведінку після вибору пункту Перехід до меню кнопки плюс на панелі Інспектор тегів (див. рис. 15.2). Одразу ж після
Частина V. Створення інтерактивних
цього на екрані з'явиться діалогове вікно Перехід до показаного на мал. 15.4.
Тут нас цікавить виключно поле введення У ньому задається інтер-цільовий Також можна натиснути кнопку Огляд і вибрати потрібну сторінку в діалоговому вікні Вибрати файл .
Мал. 15.4. Діалогове вікно Перехід до
Тут треба сказати кілька слів про те, який різновид слід використовувати у цій поведінці. (Про різновиди, що застосовуються в WWW, йшлося в розділі 6.)
Але в цій поведінці найкраще застосувати абсолютні Справа в тому, що Dreamweaver не завжди "знаходить" зазначені в коді(Принаймні, у старих версіях Dreamweaver така проблема існувала.)
У діалоговому вікні Вибрати файл, який з'явиться на екрані після натискання кнопки Огляд вікна Перехід до присутній розкривний список Відносно. За замовчуванням в ньому вибрано пункт Документ , що наказує Dreamweaver створити відносний Якщо ми хочемо отримати абсолютний, то виберемо в цьому списку пункт Корінь сайту .
Задавши потрібні параметри, натисніть кнопку ОК. Відмовитись від створення поведінки нам дозволить кнопка Скасувати.
Після цього виберемо подію, до якої буде прив'язана створена нами поведінка. Це буде подія onClick (клацання мишею).
Розділ 15. Найпростіші інтерактивні елементи. Поводження Dreamweaver
Створимо таку ж поведінку для решти пунктів смуги навігації. Вкажемо для них відповідні ці пункти. Після чого збережемо шаблон і здійснимо оновлення всіх базованих на ньому Webсторінок.
Зміна значення атрибуту результуючого стилю
Поведінка Зміна значення атрибуту результуючого стилю виконує змі-
ние значення в атрибута результуючого стилю, що застосовується до элементаФактично цим створюється вбудований стиль (про них згадувалося в розділі 9), який має пріоритет над усіма іншими стилями.
Давайте нарешті зробимо так, щоб пункти смуги навігації змінювали своє оформлення при наведенні на них курсору миші, а при відведенні його поверталися до первісного вигляду. Наприклад, нехай у них змінюється колір рамки.
Почнемо, як завжди, з першого пункту у смузі навігації. Виділимо його за допомогою відповідної кнопки у секції тегів.
Оскільки ця поведінка буде змінювати параметри елемента (тобто першого пункту в смузі навігації), нам потрібно буде дати ім'я контейнеру, що формує його. Дамо йому ім'я nav1. Введемо його до комбінованого списку Div ID, розташованого на панелі Властивості.
Поведінка, що змінює значення атрибута стилю, буде створена після вибору пункту Змінити властивість меню кнопки плюс на панелі Інспектор тегів . На екрані з'явиться діалогове вікно Змінити властивість (рис. 15.5).
Мал. 15.5. Діалогове вікно Змінити властивість
Частина V. Створення інтерактивних
У списку Тип елемента, що розкривається, вибирається ім'я тега, за допомогою якого створеноЕлементний стиль ми хочемо змінити. Оскільки ми збираємося зробити це з блоковим контейнером, виберемо в ньому пункт DIV.
Список, що розкривається Ідентифікатор елемента дозволяє вказати сам цей елемент. Всі елементи, що мають імена, представляються в даному списку пунктами "
сторінки> " , а елементи, що не мають імен, пунктами не визначено. Нам слід вибрати в цьому списку пункт DIV "nav1" - блоковий контейнер з ім'ям nav1 .
Група перемикачів Властивість дозволяє вибрати спосіб вказівки атрибута стилю, значення якого потрібно змінити.
Тут слід сказати ось що. Для маніпуляції значеннями атрибутів стилю елемента використовують не самі атрибути стилю, а властивості . Кожна така властивість відповідає певному атрибуту стилю.
Якщо в групі Властивість увімкнено перемикач Вибрати , ми можемо вибрати потрібну властивість у списку, що розкривається, що знаходиться праворуч від цього перемикача. Доступні в ньому пункти та наведені ними параметри перераховані далі.
backgroundColor — колір тла.
backgroundImage — файл із зображенням, яке стане графічним тлом.
border — всі параметри рамки (стиль, товщина та колір усіх сторін).
borderStyle — стиль рамки, що застосовується для всіх сторін.
borderWidth — товщина рамки, що застосовується для її сторін.
borderColor — колір рамки, який використовується для всіх сторін.
color – колір тексту.
display — поведінка елемента (докладніше про це див.
fontFamily - шрифт тексту.
fontSize – розмір шрифту тексту.
fontStyle - "стиль" зображення для шрифту тексту (буде він звичайним або напівжирним).
fontWeight - ступінь "напівжирності" для шрифту тексту.
Оскільки нам потрібно змінити коліррамки, увімкнемо перемикач Вибрати групи Властивість і виберемо у списку, розташованому правіше, пункт borderColor .