1.6. Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion

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

Проте перш за все необхідно відзначити, що використання програми Homesite має на увазі знання користувачем мови HTML (а також, за бажанням, JavaScript і ін.) Програма автоматизує введення коду, перевіряє помилки і т. д., але вона не в силах допомогти, якщо користувач не уявляє собі, що таке HTML.

У цьому розділі ми оперуватимемо поняттями і тегамі, значення яких пояснюються в розділах 2-8 цієї книги. Тому, якщо ви зараз ще не дуже добре уявляєте, що означає той або інший тег, не хвилюйтеся - прочитайте цей розділ нашвидку, а потім поверніться до нього після прочитання всієї книги (якщо, звичайно, захочете використовувати в своїй роботі програми Homesite/ColdFusion).

На момент написання цих рядків останньою версією програми Homesite є версія 4.5. На неї ми і орієнтуватимемося надалі.

Отже, давайте почнемо. Основне вікно програми Homesite представлене на мал. 1.20. Як бачите, воно розділене на дві панелі. Ліва панель називається Resource Tab (Панель ресурсів) - вона призначена для різних допоміжних функцій. На правій панелі (Панелі редагування) відбувається власне редагування тексту HTML.

Спочатку давайте розглянемо ліву панель (Resource Tab). На ній розташовуються шість вкладок, позначених наступними значками (зліва направо): Files (Файли), Projects (Проекти), Site View (Схема сайту), Snippets (Уривки), Help (Довідка) і Tag Inspector (Засіб проглядання тегов). Якщо чого-небудь образи значків здаються неочевидними, їх можна замінити на текстові позначення командою Options > Settings > General > Tab Style (Параметри > Установки > Загальні > Стиль ярликів вкладок).

Робота з файлами

Перша вкладка - Files (Файли) - найочевидніша у використанні. На ній представлений каталог файлів, що є на комп'ютері. Подвійне клацання миші на значку файлу відкриває його на панелі редагування. Для HTML-файлів окрім значків і імен на цій вкладці представляються також заголовки їх веб-сторінок.

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

Звернете увагу на те, що крім файлів, розташованих на локальному комп'ютері, засоби вкладки Files (Файли) дозволяють також відкривати і редагувати файли, розташовані на видаленому сервері, використовуючи доступ по протоколу FTP. Робиться це таким чином.

1. При установці програми Allaire Homesite 4.5 в системну теку /Мой комп'ютер автоматично додається елемент під назвою Allaire FTP & RDS. У верхній частині вкладки Files (Файли) замість імені диска можна вибрати цей елемент. При цьому пункт Allaire FTP & RDS з'явиться також в середній частині вкладки.

2. Клацніть на цьому пункті правою кнопкою миші і виберіть з контекстного меню пункт Add FTP Server (Додати в сервер FTP). При цьому відкриється діалогове вікно Configure FTP Server (Настройка сервера FTP), в якому треба ввести наступні параметри видаленого сервера.

• Назва сервера (будь-яке - це робиться для вашої зручності).

• Повна мережева адреса без префікса ftp://. Наприклад, для сторіночки, розташованої в співтоваристві Geocities, це буде ftp. geocities. corn.

• Ім'я робочого каталога. В більшості випадків це просто символ “/”. При цьому не забудьте встановити прапорець Relative from server-assigned directory (Щодо каталога, виділеного сервером). Без цього символ “/” означатиме не ваш призначений для користувача каталог, а кореневу теку всього сервера, куди, як правило, заборонений доступ всім, окрім адміністратора сервера.

• Своє реєстраційне ім'я і пароль для доступу на видалений сервер.

• Повна http-адреса своїй веб-сервера-сторіночки (той, який ви набираєте в броузере для її перегляду).

• Деякі додаткові дані.

3. Після натиснення на кнопку ОК в середній частині вкладки Files (Файли) з'явиться символ теки, розташованої на видаленому комп'ютері. Якщо з'єднання з Інтернетом встановлене, то її можна відкрити і оперувати з її файлами практично так само, як і з файлами, що знаходяться на локальному комп'ютері.

Такий підхід дуже зручний для внесення незначних виправлень у веб-сторінці. Якщо ж треба внести багато змін або створити веб-сторінку “з нуля”, краще всю роботу провести на локальному комп'ютері, а у ж потім завантажити на сервер всю сторінку цілком за допомогою якої-небудь FTP-програми

Робота з проектами

Друга зліва вкладка панелі Resource Tab називається Projects (Проекти). Вона дуже схожа на вигляд на попередню, але дозволяє зібрати файли, фізично розміщені в різних місцях, в одну або декілька “віртуальних тек”. Гак можна забезпечити собі зручніший доступ до файлів, щоб не шукати кожного разу потрібну теку на диску.

У верхній частині вкладки можна швидко вибрати свій проект із списку, що розкривається, точно так, як і на попередній вкладці ми вибирали диск. Поряд розташовано три командні кнопки: Open Project (Відкрити проект, New Project (Створити проект) і Deployment Wizard (Майстер доставки). Перші дві кнопки пояснень не потребують, а за допомогою третьої можна відкрити Майстер доставки. З його допомогою можна відправити веб-сторінку на один або декілька серверів через локальну мережу або Інтернет. Є навіть можливість генерації сценарію, який буде через певні проміжки часу автоматично проводити доставку оновлених версій вашої сторіночки на видалений сервер.

Схема сайту

Засоби третьої вкладки - Site View (Схема сайту) - призначені для проглядання схеми веб-сайту, що розробляється. Зв'язки між HTML- документами, малюнками і іншими об'єктами на схемі показані пунктирними наочно побачити зв'язки між елементами. Клацання миші на якому-небудь елементі схеми приводить до виділення відповідного елементу у вікні редагування.

Виділивши який або елемент, HTML-, що є, документом, можна перейти до його редагування на правій панелі вікна програми. Для того клацніть на даному елементі правою кнопкою миші і виберіть в контекстному меню команду Edit (Правка). Схему сайту можна проглянути як у вигляді діаграми, так і у вигляді звичайного дерева каталогів. Для перемикання з одного вигляду на іншій, потрібно клацнути правою кнопкою миші і будь-якому місці вкладки Site View (Схема сайту), вибрати в контекстному меню пункт View Style (Метод перегляду) і встановити прапорець або Tree (Дерево), або Chart (Діаграма).

Інші вкладки

Наступна вкладка. Snippets (Уривки), призначена для створення коротких шаблонних текстів для ваших веб-сторінок, їх каталогізації і швидкої вставки в документи.

Потім йде вкладка Help (Довідка), яка, швидше за все, коментарів не потребує - це прекрасний довідник по використанню програми Homesite, а також мові HTML і різним додатковим програмам, які можна безкоштовно отримати в Інтернеті.

І, нарешті, остання вкладка - Tag Inspector (Засіб проглядання тегов). Вона дозволяє проглянути теги, наявні в HTML-документі, у вигляді ієрархічної структури. Виділивши який-небудь тег в цьому “дереві”, можна отримати в нижній частині вкладки повний список доступних атрибутів і подій цього тега. Список організований у вигляді таблиці, в яку можна додати які-небудь значення. Всі зроблені зміни тут же відображаються на панелі редагування документа (але не відразу у момент введення, а після переходу на інше поле таблиці).

Такі можливості, коротко, надає панель Resource Tab. До речі, за допомогою клавіші F9 її можна швидко прибрати з екрану, якщо захочеться розвернути панель редагування у всю ширину вікна програми. Повернути панель Resource Tab на екран можна повторним натисненням клавіші F9.

Панель редагування

Тепер давайте стисло розглянемо основну частину вікна програми - панель редагування. Вкладки:

Edit (Правка), Browse (Перегляд) і Design (Оформлення). На першій HTML- документ представлений у вигляді початкового тексту. При цьому відбувається автоматичне підсвічування тегов. Посилання і якорі виділяються темно-зеленим кольором, графічні теги - бордовим, решта теги - темно-синім. Теги вбудованих сценаріїв виділяються коричневим кольором, а вбудовані функції і інші зарезервовані слова і елементи мови сценаріїв - напівжирним зображенням. Різними квітами підсвічують також і стильові блоки, що набагато полегшує сприйняття і дозволяє “ на льоту” усувати випадкові помилки. Всі кольори можна змінити за бажанням, вибравши в меню Options (Параметри) команду Settings (Настройки) і, далі, натиснувши кнопку Edit Scheme (Правка колірної схеми) у вікні Editor > Color Coding (Змінити > Колірна маркіровка).

При ручному введенні HTML-тексту, відбувається автоматична перевірка правильності введених тегов (якщо цього не відбувається, її можна включити, встановивши прапорець Options > Settings > Validation > Tag validation (Параметри > Настройки > Перевірка > Перевірка тегов). При введенні завершального обмежувача тега (>) програма перевіряє правильність тега. Якщо тег правильний, в рядку стану відображається запис Tag validated (Тег перевірений). Інакше рядок стану підсвічує червоним кольором і у супроводі одного з системних звуків Windows в рядку стану з'являється напис, що пояснює, що такий тег не існує або його використання не рекомендоване в поточній версії HTML. Якщо естетичність коду вас не дуже турбує, то можна сміливо ігнорувати повідомлення про нерекомендовані тегах.

Проте абсолютно не обов'язково вводити теги уручну. Для полегшення роботи можна використовувати функцію Tag Insight (Будівник тегов). Якщо вона вимкнена, включите її установкою прапорця Options > Settings > Editor > Tag Insight > Enable Tag Insight (Параметри > Настройки > Редактор > Будівник тегов > Задіювати будівника). В цьому випадку через дві секунди

після введення символу почала тега (час можна змінити в тому ж розділі настройок Options > Settings > Editor > Tag Insight) відкриється той, що розкривається

список доступних тегов. Залишається тільки вибрати потрібний. Цей же механізм можна використовувати при введенні функцій сценаріїв JavaScript.

Крім того, в програмі передбачена можливість автоматично додавати закриваючі теги при введенні першого з “парних” тегов. Зазвичай функція за умовчанням вимкнена, але її можна включити за допомогою прапорця Options > Settings > Editor > Tag Completion (Параметри > Настройки > Редактор > Завершення тегов). В цьому випадку при введенні, наприклад, тега BODY>, відразу разом з ним автоматично вводиться тег </BODY>. Можна також включити функцію Options > Settings > Editor > Auto Completion (Параметри > Настройки > Редактор > Автозавершення) для автоматичного закрита лапок, коментарів HTML і ін.

Окрім цього в програмі передбачена можливість автопідстановки для спритного введення елементів коду, що часто повторюються. Кожному такому елементу відповідає коротка комбінація символів, при наборі якої і натисненні комбінації клавіш CTRL+J автоматично вводиться повний текст елементу. Наприклад, при наборі

Аналогічно, набравши

і натиснувши комбінацію CTRL+J, можна отримати наступний блок:

Погодитеся, що автопідстановка економить немало часу, особливо коли ми можемо самі задати потрібні “скорочення” для часто використовуваних фрагментів коду. Завдання скорочень виконують командою Options > Settings > Editor > Code Templates > Add (Параметри > Настройки > Редактор > Шаблони коду > Додати).

Більшість клавіатурних скорочень, знайомих користувачам по інших програмах, наприклад текстовим процесорам, у веб-сервері-редакторові Homesite дають очікуваний результат. Наприклад, традиційне застосування до виділеного фрагмента напівжирного зображення шрифту за допомогою комбінації клавіш CTRL+B, або курсивного зображення комбінацією CTRL+I, а також підкреслення тексту комбінацією CTRL+U, тут також працює. При цьому виділений фрагмент обрамляється відповідними тегамі.