Редагування таблиць стилів в Topstyle Lite

У попередньому підрозділі було сказано, що залежно від контексту виконуваної операції додаток Topstyle Lite може бути відкрито в одному з двох форматів:

• розширеному - для редагування CSS-файла;
• скороченому - для створення або редагування параметрів атрибуту STYLE конкретного елементу сторінки.

Крім того Topstyle Lite може бути відкритий з вікна Homesite для створення нового CSS-файла (в цьому випадку також використовується розширений формат). Для цього досить клацнути на кнопці Style Editor розташовану на панелі інструментів головного вікна Homesite (мал. 4.43).

Мал. 4.43. Кнопка Style Editor дозволяє відкрити Topstyle Lite для створення нового CSS-файла

При виклику Topstyle Lite для редагування CSS-файла вікно додатка виглядає, як показано на рис, 4.44.

Мал. 4.44. Розширений формат вікна Topstyle Lite

У розширеному форматі вікно містить наступні основні елементь: управління:

• рядок меню; розділи меню є досить стандартними для всіх Windows-приложений; основні команди зі всіх розділів мснк винесені на панель інструментів у вигляді відповідних кнопок;
• панель інструментів; винесені на неї кнопки мають наступне призначення:
  • New File (Створити файл) - створення нового CSS-файла; оскільки Topstyle Lite не використовує багатодокументний інтерфейс, то перел створенням нового файлу слід зберегти редагований (правда. Topstyle Lite про це нагадає);
  • Open File (Відкрити файл) - завантаження існуючого CSS-файла;
  • Save File (Зберегти файл) - запис CSS-файла на диск у вказаний каталог;
  • New Selector (Створити селектор) - створення нового стилю; в даному випадку розробники Topstyle Lite під селектором розуміють ім'я стилю; детальніше процедура створення стилю буде описана нижчим;
  • Word wrap (Перенесення рядка) - включення режиму форматування рядків по ширині вікна;
  • Style Inspector (Інспектор стилів) - відкриття підвікна Style Inspector, яке містить інструменти редагування і перегляду параметрів стилів; підвікно розташоване в правій частині вікна Topstyle Lite;
  • Preview (Попередній перегляд) - відкриття підвікна Preview, яке забезпечує перегляд результату вживання стилів до елементів сторінки; як інтерпретатор стилів використовується броузер, який на вашому комп'ютері має статус використовуваного за умовчанням;
  • Order Topstyle Pro (Порядок здобуття Topstyle Pro) - відкриття в онлайновому режимі Web-страницы з інформацією про те, як отримати професійну версію Topstyle;
  • Help Content (Вміст довідки) - виклик довідкової системи.

Тепер розглянемо детальніше інтерфейс основного і додаткових вікон додатка.

Вміст CSS-файла відображується в основному вікні - вікні редагування. При цьому для підвищення наочності використовується колірне підсвічування елементів таблиці стилю. Технологія редагування файлу така ж, як і в будь-якому текстовому редакторові: ви можете вводити інформацію з клавіатури, видаляти фрагменти тексту, використовувати буфер обміну і так далі Крім того, в Topstyle Lite є можливість відміни внесених змін (функція Undo).

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

• для представлення стилю класу виводиться рядок Class <ім'я стилю>;
• для представлення стилю конкретного елементу сторінки виводиться рядок ID <ім'я стилю>;
• для представлення стилю перевизначеного тега виводиться рядок Element <ім'я тега>.

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

Ефективність редагування стилів істотно підвищується за рахунок використання інструменту Style Inspector. Його вікно складається з двох вкладок: Properties (Властивості) і Selectors (Селектори).

Вкладка Properties містить перелік параметрів, які можуть бути використані при створенні стилю. При виборі у вікні редагування деякого стилю (а точніше, при установці покажчика на будь-який його параметр) у вікні Style Inspector виводяться значення, встановлені для даного стилю. Наприклад, на мал. 4.44 у вікні Style Inspector вказані значення параметрів, встановлені для стилю tl (колір символів - silver зсув від верхнього краю вікна броузера - 70 пікселів і т. д.). Зразок вживання цього стилю виводиться в додатковому вікні перегляду, розташованого нижче списку параметрів (за допомогою слова Sample).

У верхній частині вікна Style Inspector є список, що розкривається, який містить перелік версій CSS, підтримуваних Topstyle Lite.

На вкладці Selectors вміст CSS-файла представлений у вигляді дерева, в якому наявні у файлі стилі впорядковані по категоріях (мал. 4.45):

• Elements - стилі, переопределяющие теги HTML;
• Classes - стилі класів;
• Ids - індивідуальні стилі.

Мал. 4.45. Представлення стилів на вкладці Selectors

Аби додати в CSS-файл новий стиль, необхідно:

1. 1. Клацнути на кнопці New Selector на панелі інструментів вікна редагування;
2. 2. У діалоговому вікні (мал. 4.46), що відкрилося, виконати наступні дії:
   1. 2.1. Вказати категорію стилю, встановивши відповідний переключа тель (Class або ID), або вибравши перевизначуваний тег в списку HTML Element.
   2. 2.2. Якщо створюється стиль Class або ID, ввести його ім'я в поле списку, розташованого під перемикачами; при введенні імені з префікс (. або #), що відповідає, буде вставлений автоматічес ки; ім'я стилю відображується також в полі Current Selector (Поточний селектор).
   3. 2.3. Якщо потрібно створити декілька стилів з однаковими параметрами, то необхідно внести поточний стиль (селектор) до списку Selectors клацнувши на кнопці «>» (мал. 4.47) і потім повторити п.п. 2.1,
3. 3. Клацнути на кнопці ОК.

Мал. 4.46. Діалогове вікно для створення нового стилю

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

• встановити курсор після відкриваючої фігурної дужки і натискувати клавішу <Spacebar> (пропуск); після невеликої затримки на екрані з'явиться список параметрів, які можуть встановлені для даного стилю (мал. 4.48, вгорі); вибрати потрібний параметр і натискувати <Enter>; потім аналогічним чином вставити значення параметра (мал. 4.48, внизу);
• встановити курсор після відкриваючої .фігурной дужки, і у вікні Style Inspector у списку параметрів клацнути на необхідному вічку; потім або ввести з клавіатури, або вибрати із списку, що розкривається, потрібне значення.

Мал. 4.48. Введення параметрів стилю за допомогою спливаючих списків

Скорочений формат вікна Topstyle Lite використовується в тому разі, ecj; додаток відкривається з вікна редактора тегов (за допомогою кнопки Style, Editor)].

Цей формат відрізняється від розширеного наступними параметрами:

• відсутній рядок меню, оскільки в даному випадку відсутній нсобхс дімость роботи з CSS-файлами;
• у панелі інструментів відсутня кнопка New Selector оскільки для одного елементу не може бути задано більш за один стиль; з цієї ж причини відсутні кнопки для роботи з файлом і вікно перегляду Preview: аби оцінити створений стиль, сповна досить області перегляду, що входить до складу вікна Style Inspector
• на панелі інструментів присутньо дві нові кнопки:
  • Done (Готово)яка дозволяє вставити опис стилю у вікно редактора тегов і закрити Topstyle Lite;
  • Cancel (Відмінити)яка закриває Topstyle Lite без збереження результатів роботи;
• у вікні Style Inspector відсутня вкладка Selectors (причина все та ж - для одного стилю немає сенсу будувати дерево).

Останні елементи вікна мають те ж призначення, що і при використанні розширеного формату Topstyle Lite. Відповідно, для установки параметрів стилю елементу необхідно:

1. 1. Усередині фігурних дужок ввести параметри і їх значення (або за допомогою спливаючих списків, або з допомогою Style Inspector).
2. 2. Оцінити отриманий результат, скориставшись областю перегляду.
3. 3. Якщо стиль відповідає задуму, клацнути на кнопці Done.