| Якщо обраний перемикач This document only, стиль буде поміщений у внутрішню таблицю стилів цієї Web-сторінки,
Як завжди, ввівши потрібні дані, необхідно натиснути кнопку OK або Cancel. Перша кнопка виконує створення стилю, друга - скасовує.
Ми хочемо створити стиль перевизначення тега <ні> і помістити визначення цього стилю в поки ще не існуючу зовнішню таблицю стилів styles.css. Спочатку виберемо перемикач Tag, потім - пункт hi спливаючого списку Tag, далі - верхній перемикач в групі Define in, простежимо, щоб в списку правіше за цей перемикач був обраний пункт (New Style Sheet File), і натиснемо кнопку ОК. У діалоговому вікні збереження файлу виберемо папку нашого сайту, введемо ім'я файлу повинна містити таблиця стилів styles.css і натиснемо кнопку збереження. Все, сам файл зовнішньої таблиці стилів нами створено.
Після цього ми помітимо три речі:
| Заголовок Web-сторінки default.htm виявився вирівняним по центру;
| Dreamweaver відкрив ще одне вікно документа, що містить CSS-код створеної нами таблиці стилів;
| В ієрархічному списку вже створених стилів, що займає верхню
154
Курс 2. Більш складний текстовий дизайн
(Якщо ви не маєте доступ до цього списку, перевірте, чи включена кнопка-перемикач AM, що знаходиться у верхній частині панелі, над усіма списками.) Вони означають, відповідно, створену нами зовнішню таблицю стилів і знаходиться в ній єдиний стиль перевизначення тега.
Тепер сторінка default.htm хизується відцентрувати заголовком, але як же інші сторінки? Давайте відкриємо одну з них, скажімо, passions.htm. Що таке - її заголовок вирівняний по лівому краю (т. Е. Задано вирівнювання за замовчуванням). Чому?
Так, ми створили зовнішню таблицю стилів. Ho це тільки півсправи. Нам ще потрібно прив'язати її до Web-сторінці, яка буде її використовувати. До сторінці default.htm прив'язувати її НЕ потрібно-Dreamweaver сам зробив це за нас. Ho ось прив'язку до інших сторінок нашого сайту доведеться виконувати нам самим.
Збережемо тільки що створену таблицю стилів, переключившись на вікно документа, в якому вона відкрита, і натиснувши комбінацію клавіш . Після цього перемкнемося на вікно зі сторінкою passions.htm і подивимося на панель CSS Styles. У нижній її частині є кнопка Attach Style Sheet (І). Вона-то нам і потрібна. Натиснемо її, і на екрані з'явиться діалогове вікно Attach External Style Sheet, показане на рис. 7.3. (Ми також можемо скористатися пунктом Attach Style Sheet контекстного або додаткового меню панелі CSS Styles.)
Мал. 7.3. Діалогове вікно Attach External Style Sheet
Натиснемо кнопку Browse цього вікна, в який з'явився на екрані діалоговому вікні Select File виберемо файл нашої таблиці стилів і натиснемо кнопку відкриття, Після цього ім'я обраного файлу з'явиться в полі введення File / URL. Включимо перемикач Link, щоб прив'язати цю таблицю стилів до Web-сторінці, і натиснемо кнопку ОК. (Перемикач Import змушує Dreamweaver помістити все певні у зовнішній таблиці стилів у внутрен-
Заняття 7. Використання стилів CSS
Чудово! Як тільки Dreamweaver на нашу вказівкою прив'язав таблицю стилів на сторінку passions.htm, все певні в цій таблиці стилі автоматично застосуються до цієї сторінки. І заголовок її сам вирівняється по центру.
Тепер перемкнемося на сторінку default.htm і ще поекспериментуємо зі стилями. Давайте створимо внутрішню таблицю стилів, що містить один-єдиний стиль, який буде фарбувати текст в зелений колір. Це буде стильовий клас, який ми зможемо прив'язати до будь-якого тегу.
Знову натиснемо кнопку New CSS Rule панелі CSS Styles. У діалоговому вікні New CSS Rule включимо перемикач Class і введемо в комбінованому списку Name ім'я нашого стильового класу-.green. Зауважте, що ім'я стильового класу обов'язково повинно починатися з точки! Після цього включимо перемикач This document only в групі Define in і натиснемо кнопку ОК.
Ми відразу ж зауважимо, що в списку стилів панелі CSS Styles з'явиться ще одна "гілка"