Основи web-дизайну у програмі FrontPage
1. Шрифти й абзаци. Головним елементом будь-якої сторінки є текст, зовнішній вигляд якого визначається шрифтом, його властивостями й ефектами. Щоб задати чи змінити властивості шрифту, потрібно виконати команди Format => Font. У діалоговому вікні Font задають потрібні властивості (назву шрифту, розмір, стиль, колір), ефекти, густину символів і позиціювання їх як індексів (character spacing), після цього натискають на кнопку Apply чи Ok. Як і у програмі Word, головні властивості можна задати за допомогою панелі форматування.
Є сім розмірів шрифту. Цим розмірам відповідають такі значення (у пунктах) програми Word: розмір 1-8 пунктів, розмір 2 - 10, розмір 3 - 12, 4 - 14, 5 - 18, 6 - 24, 7 - 36. Зазначимо, що 1 см = 28 пунктів. Серед ефектів, які застосовують до символів, є такі: закреслення, надкреслення, підкреслення, миготіння, верхній чи нижній індекс тощо.
Властивості абзацу (вирівнювання на сторінці, відступи зліва, справа, у першому рядку, зверху, знизу, між рядками) можна задати, вибравши абзац і виконавши команди Format => Paragraph. На відміну від текстового редактора, наступний параграф не успадковує властивості попереднього, а створюється у стилі Normal. Для поширення властивостей абзацу на інший фрагмент тексту слід виконати копіювання формату з абзацу-зразка за допомогою кнопки Format Painter. Для цього спочатку клацають у абзаці-зразку, потім - на кнопці копіювання формату, потім - на деякому фрагменті тексту.
2. Заголовки і списки. Щоб текст зробити заголовком, до нього треба застосувати один з відповідних стилів Неаding1 (найбільший рівень), Heading2, ..., Heading6 зі списку стилів на панелі форматування.
Списки створюють за допомогою стандартних стилі Numbered List, Bulleted List, Directory List, Menu List, чи кнопок панелі форматування, чи командами з меню Format-Bullet and Numbering, чи контекстового меню. Рівні у списках можна підвищувати чи понижувати, користуючись кнопками Increase Indent чи Decrease Indent.
3. Лінії і фон. Горизонтальні лінії застосовують для відокремлення логічних частин сторінки. Для їх вставляння застосовують команди Insert-Horyzontal line. За допомогою контекстового меню лінії можна змінити її властивості (Ногуzontal Line Properties): ширину, висоту, спосіб вирівнюванні відносно сторінки, колір, стиль. Декоративні лінії вставляють із графічних файлів як картинки.
Фон створюють за допомогою команд Format-Background. Фон можна задати з файлу (Background Picture), і, скориставшись кнопкою Browse..., знайти файл на диску; можна; запозичити фон з іншої сторінки (Get background information from another page - Browse...), можна задати стандартний колір (Color) фону, тексту чи створити власну кольорову палітру. Фону можна надати властивість водяного знака (Watermark), а гіперпосиланням - задати кольори чи спеціальний динамічний ефект (Enable hyperlink rollover effects).
Корисною є команда File => Properties... На її загальній закладці General сторінці можна задати заголовок (Title) і розташування (Location), створити для сторінки звуковий фон з деякого звукового файлу (Background sound => Location => Browse), зазначити кількість повторень (Loop) звукового фрагмента чи задати звучати постійно (Forever).
Рис. 4. Вікно команди Insert Table
Рис. 5. Вікно з властивостями таблиці
4. Таблиці. Таблиці застосовують для наочного подання текстової чи графічної інформації, а також для подання матеріалів у вигляді колонок чи для поділу сторінки на логічні частини. Як і у програмі Word, таблицю можна створити чотирма способами:
вставляння таблиці командами Table => Insert => Table;
рисування таблиці командами Table => Draw Table;
вставляння за допомогою кнопки на стандартній панелі інструментів;
перетворення тексту в таблицю командами Table =>Convert => Text to Table.
Для першого способу у вікні Insert Table (рис. 4) потрібно задати кількість рядків (Rows) і стовпців (Columns), спосіб вирівнювання таблиці відносно сторінки (Alignment) і ширину таблиці (Specify width) у пікселях чи у відсотках, ширину зовнішньої рамки у пікселях (Border size), відступ тексту у клітинках від рамок (Cell padding) і відстань між клітинками (Cell spacing), Ok.
У другому способі вмикається панель інструментів Table і за допомогою інструментів олівець, гумка та інших рисуємо таблицю: спочатку зовнішню рамку, пізніше внутрішні тощо.
Властивості елементів таблиці можна змінити за допомогою команд Table-Properties-Table чи команди Table Properties... з контекстового меню таблиці (рис. 5)
Властивість Float задає спосіб обтікання таблиці текстом. Для рамок можна визначити один колір (Color) або два: Light border для верхньої і лівої меж і Dack border для нижньої і правої. Ці кольори будуть відображатися інверсно.
Можна змінити властивості окремої клітинки командами Table => Properties => Cell чи командою Cell Properties з її контекстового меню. Тут задають, зокрема, спосіб вирівнювання текстів відносно рамок клітинок, наприклад у вертикальному напрямку.
Описані команди служать для задання кольору рамкам клітинки чи таблиці, фону для клітинки чи таблиці, внесення структурних змін до таблиці тощо. Фон клітинки перекриває фон таблиці, а фон таблиці перекриває фон сторінки. Якщо колір рамок, фону таблиці і фону сторінки однаковий, то отримаємо ефект невидимої таблиці. Цей прийом застосовують для структурованого подання інформації на сторінці вигляді колонок тощо.
Клітинки можна з'єднувати. Для цього їх спочатку треба виокремити, а потім застосувати команди Table => Merge Cells. Клітинку можна поділити на дві чи більше клітинок у вертикальному чи горизонтальному напрямку, застосувавши команди Table => Split Cells.
Підпис до таблиці створюють за допомогою команд Table => Insert => Caption. За допомогою команди Caption Properties підпис розташовують над чи під таблицею.
Переміщуватись від клітинки до клітинки можна за допомогою клавіші Tab. Натискання на неї в останній клітинці таблиці додає новий рядок. Рядки чи стовпці вставляють у таблицю командами Table => Insert => Row and Columns, а зайві вибирають і вилучають командою Delete Cells.
Команди Distribute Rows (Columns) Evenly застосовують для поліпшення розподілу простору між рядками та стовпцями.
Рис. 6. Засоби для пошуку картинки
5. Графічні об'єкти і мініатюри. На сторінку можна вставляти графічні об'єкти як файли різних форматів: bmp, gif jpg тощо командами Insert => Picture => From File. Тут важливо знати заздалегідь і правильно зазначити URL-адресу до графічного файлу або скористатися у вікні Picture кнопками пошуку файлу у web-просторі чи на дисках комп'ютера (рис. 6). Можна вставляти картинки з Clip Art, а також відеофільми.
Під час роботи з картинками корисними є дві панелі: для позиціювання - Positioning, яка дає змогу правильно розташувати картинку на сторінці й організувати перекриття картинок; а також панель Pictures, що дає змогу модифікувати картинку часто до невпізнання. Ця панель містить кнопки для вставляння тексту в картинку, організації перекривань, поворотів, зміни яскравості, зняття фону, обрізання, промивання тощо. З командами цієї панелі варто проекспериментувати. Для побудови композицій важливою є можливість забирати фон навколо деякого зображення на картинці. Для цього потрібно клацнути на кнопці Set Transparent Color, а пізніше клацнути на тлі картинки, який потрібно усунути. Позвольте програмі змінити графічний формат картинки для роботи з цим інструментом.
Якщо текст має обтікати картинку, то до картинки застосовують команди Format => Position... і у діалоговому вікні position вибирають стиль обтікання і стиль позиціювання (наприклад, relative - відносний), а також відступи від картинки до тексту.
Властивість Z-order картинок визначає чергу (послідовність) прорисовування їх у броузері.
Мініатюра - це пропорційно зменшена копія великої картинки (формату jpg). Мініатюра завантажується у броузері користувача першою. Якщо користувач має намір оглянути основне зображення, потрібно клацнути мишею на мініатюрі, тобто мініатюра відіграє роль гіперпосилання на оригінал картинки.
Щоб для вибраної картинки створити мініатюру достатньо застосувати кнопку Auto Thumbnail на панелі інструментів Pictures. Важливо вдало вибрати спосіб відображення мініатюр на сторінці, що досягають за допомогою команд Tools => Page Options => Auto Thumbnail: без рамки, в рамці, у випуклій рамці (Beveled adge) і задати один з розмірів мініатюри: ширину або довжину. Інший розмір програма визначить автоматично.
6. Гіперпосилання. Вибраний фрагмент тексту чи графічний об'єкт можна перетворити у гіперпосилання за допомогою команди Insert => Hyperlink чи кнопки на стандартній панелі. У вікні Create Hyperlink потрібно задати адресу папки з сайтом і вибрати конкретну сторінку сайту чи задати URL-адресу потрібної сторінки вручну або використовуючи наступні кнопки (рис. 7):
броузер для пошуку сторінки у web-просторі,
посилання на файл на власному комп'ютері,
гіперпосилання для відправляння листа,
гіперпосилання на сторінку, яка тільки буде створюватися. Якщо є фрейми, потрібно зазначити, в якому фреймі броузер має відображати сторінку.
Якщо посилання виконуватиметься на закладку (Bookmark), то зазначають назву закладки. Закладки бажано створити на сторінках заздалегідь. Для цього потрібно клацнути у потрібному місці сторінки чи вибрати деякий об'єкт і виконати команди Insert => Bookmark, дати назву закладці, Ok.
Рис. 7. Вставляння гіперпосилань
Внести зміни до існуючого гіперзв'язку можна за допомогою команди Hyperlink Properties.
Правильність функціонування гіперпосилань можна відстежити у режимі Normal, клацаючи на них із натиснутою клавішею Ctrl. Однак зазвичай цю перевірку виконують у режимі попереднього перегляду Preview або безпосередньо у броузері.
Інші можливості програми FrontPage
1. Динамічні ефекти. Динамічні (рухомі, анімаційні) ефекти застосовують з метою привертання уваги відвідувачів сайту до окремих елементів сторінки: тексту чи картинки або для наповнення їх новим змістом.
Щоб створити ефект, вибирають елемент і виконують команди Format => Dynamic HTML Effects. На екрані з'явиться панель інструментів Dynamic HTML Effects, за допомогою якої потрібно вибрати деяку подію. Після настання цієї події у вікні броузера почне діяти ефект. Подіями можуть бути відкривання сторінки або клацання мишею над елементом, або подвійне клацання, або наведення укажчика миші на елемент. Відповідні події називаються On Page Load, On Click, On Double Click, On Mouse Over. Коли подія вибрана, вибирають ефект: миготіння, вилучення, політ, заміни тощо (рис. 8).
Рис. 8. Панель інструментів для динамічних ефектів
До картинки можна застосувати ефект вилучення-відлітання (Apply: Fly Out) чи ефект заміни її іншою картинкою (Apply: Swap Picture), після чого треба задати шлях до іншої картинки командою Choose Picture. Для ефекту відлітання треба задати також напрямок польоту з багатьох можливих: вгору-ліворуч, вниз-праворуч тощо.
Рис. 9. Меню команд Вставити і Компоненти (справа)
До тексту можна застосувати ефекти польоту чи форматування Apply: Formatting. Є такі ефекти форматування: взяти текст у рамку (Choose Border), вибрати колір рамки і колір заливки тла, а також змінити шрифт (Choose Font) тексту.
Для сторінки можна задати ефекти-способи їх появи чи закриття подібно до способів зміни кадрів у програмі PowerPoint. Для цього виконують команду Format => Page Transition, вибирають ефект зі списку, задають його тривалість три-чотири секунди і натискають на кнопку Ok.
Ефект рухомого тексту задають командою Marquee.
Вилучити ефект можна командою Remove Effect, що є на панелі Dynamic HTML Effects.
2. Компоненти. Урізноманітнити сторінку можна за допомогою компонент. Компоненти вставляють командою Insert => Insert Component. Список компонент подано на рис. 9.
Командою Insert => Comment текст, важливий для дизайнера сторінки, перетворюють у коментар, який відвідувач у броузері не побачить. Компонент Hit Counter веде підрахунок відвідувань сторінки. Він враховує повторне перезавантаження сторінки відвідувачем чи автором у броузері, що робить відповідний підрахунок не об'єктивним. Цього недоліку не мають спеціальні лічильники, які можна отримати у web-дизайнерів чи на спеціалізованих серверах Spylog тощо. Зауважимо, що чутки проте, що відвідування сайтів, на яких є лічильники типу Spylog, небезпечне для вашого комп'ютера через їхню шпіонську активність, дещо перебільшені.
Компонент Include Page дає змогу вставити деякий текст, наприклад заголовок сайту тощо, у верхню частину кожної сторінки. Такий текст має бути заздалегідь оформлений як окрема сторінка. Зміни до такого тексту у разі потреби дизайнер вноситиме лише у цю сторінку. Подібного ефекту можна дибитися командами Format => Shared Borders. У спільну область можна вставляти, наприклад, навігаційну панель командою Insert => Navigation Bar.
Компоненти Sheduled Include Page і Sheduled Picture дають змогу відображати у броузері деяку сторінку чи картинку у зазначений термін.
Компонент Date and Time вставляє дату останньої модернізації сайту.
Компонент Table of Contents автоматично створює навігаційну таблицю зі змістом сайту, яку він створює із заголовків сторінок. Такий зміст автоматично поновлюватиметься під час внесення структурних змін до сайту: приєднання чи вилучення сторінок, зміни їхніх заголовків тощо.
Компонент Search Form вставляє на сторінку форму для пошуку заданого відвідувачем тексту на всіх сторінках сайту.
Компонент Marquee призначений для створення ефекту рухомого тексту.
Зауважимо, що деякі компоненти, такі як Hit Counter чи Search Form, функціонуватимуть лише після публікації сайту на сервері, що підтримує Microsoft FrontPage Extensions.
3. Карти і гарячі області. Карта - це графічний об'єкт, що містить декілька гіперпосилань на ресурси сайту чи web-простору, Для створення карти на сторінку потрібно заздалегідь вставити графічний об'єкт-картинку і нарисувати на ній гарячі області. Кожній гарячій області слід поставити у відповідність гіперпосилання на деякий ресурс. Для рисування використовують такі інструменти панелі Pictures: прямокутна гаряча область (Rectangular Hotspot), кругова гаряча область (Circular Hotspot), гаряча область неправильної форми (Polygonal Hotspot).
Рисують так: спочатку клацають на кнопці-інструменті, а потім створюють контур у межах картинки. Зауважимо, що область-полігон утворюють, клацаючи у потрібних точках, а після повернення у стартову точку клацають двічі. Коли контур гарячої області створено, автоматично відкривається вікно Create Hyperlink, яке потрібно заповнити адресою ресурсу і натиснути на кнопку Ok. На етапі конструювання гарячих областей варто вимкнути відображення картинки (кнопка Highlight Hotspots), щоб візуально простежити за правильністю побудов, оскільки контури гарячих областей не повинні перетинатися.
Графічні карти застосовують для створення навігаційних панелей. Карта відображається у броузері як звичайна картинка, але коли над нею провести мишею, укажчик миші перетворюватиметься на долоню, а у рядку стану відображатиметься адреса вибраного ресурсу. Рисунками для карти можуть слугувати фотографії, картинки з бібліотеки Clip Art чи малюнки, створені власноруч за допомогою редактора Paint, або зображення географічних карт, якщо це доцільно. Не рекомендують застосовувати громіздкі рисунки, обсяг яких перевищує 30 Кбайт. Окрім цього, графічні навігаційні панелі варто дублювати текстовими, оскільки завантаження графіки у своєму броузері клієнт може відмінити.
4. Фрейми. Щоб створити сайт із фреймами, потрібно запустити програму FrontPage без автозавантаження останнього сайту і виконати команди File => New => Page. На закладці Frames Pages вибираємо шаблон сторінки з фреймами, наприклад, Contents — шаблон сторінки з двома фреймами (рис. 10). Буде створено файл new_page_2.htm, що міститиме структуру фреймів. Якщо цей файл має відкривати домашньою сторінкою сайту, то пізніше його перейменовують на index.htm. Для заповнення фреймів користуємося кнопками Set Initial Page (зв'язати фрейм з існуючою сторінкою) чи New Page (створити у фреймі нову сторінку).
Рис. 10. Шаблони сторінок з фреймами
Розглянемо головні етапи створення сайту з використанням двох фреймів. Зазвичай лівий фрейм використовують як навігаційний, а всі інформативні сторінки сайту переглядають у правому. На лівій сторінці створимо зміст сайту, а права сторінка (main) спочатку буде головною домашньою сторінкою. Заповнюємо сторінки текстами і картинками згідно сюжетом сайту, задаємо їм властивості за допомогою контекстового меню. Для кожної сторінки зазначаємо заголовок, інакше перше слово на сторінці автоматично стане її заголовком. Закриваємо сторінки і зберігаємо їх у файлах, ввівши назви файлів у діалоговому вікні. Зазначаємо також, у якому фреймі має відкриватися кожна сторінка. Тексти у лівому фреймі перетворюємо у гіперпосилання і зв’язуємо їх з існуючими сторінками на диску у web-просторі створюємо для них нові сторінки. Стежимо, щоб усі нові сторінки відображалися у правому фреймі.
Межі фреймів можна переміщати, а можна не відображати зовсім. Можна задати відстань між фреймами, а також відстань текстів від меж фреймів тощо. Для задання чи зміни властивостей фреймів варто користуватися командою Frame Properties з контекстового меню фрейми. Фрейми можна редагувати, вилучати, поділяти на частини за допомогою пункту Frames з головного меню програми FrontPage.
5. Форми. Для створення інтерактивних сторінок, тобто сторінок, що дають змогу вести двосторонній обмін даними між клієнтом-відвідувачем і сервером чи прямо з господарем сайту, на сторінку вставляють форми командою Insert => Forms. Форми застосовують під час створення сайтів фірм для отримання відгуків від клієнтів про товари, для реєстрації клієнтів з метою автоматизації розсилання додаткових матеріалів, отримання замовлень на товари через Інтернет, ведення форумів, дискусій, пошуку додаткової інформації тощо.
6. Каскадні таблиці стилів. Є такі елементи web-сторінки:
абзаци тексту (що є в body) з властивостями: назва шрифту (font-family), колір тексту (color), колірфону (background-color);
гіперпосилання (а), які поділяють на звичайні(a:link), відвідані (a:visited), активізовані у даний момент (a:active);* таблиці (table) з різними власними властивостями, зокрема, світлими і темними кольорами рамок;
заголовки шести рівнів (hi, h2, ..., h.6) з властивостями color, font-family тощо.
У дужках наведено англійські назви елементів сторінки згідно з правилами мови HTML, а також назви деяких властивостей.
Відповідно до правил web-дизайну елементи на сторінках і навіть у цілому сайті повинні бути виконані одним стилем. Стиль елемента - це сукупність конкретних значень властивостей елемента. Каскадна таблиця стилів (css) - це сукупність стилів різних елементів сторінки.
Каскадні таблиці стилів дають змогу автоматизувати процес створення web-сторінки і сайту в цілому. Суть їх використання полягає в тому, що сторінку можна створювати не задумуючись над її зовнішнім виглядом, тобто над дизайном. Після створення сторінки до неї чи до сайту застосовують каскадну таблицю стилів, яку можна списати з шаблонів, що є на закладці Style Sheets, чи створити самостійно, чи знайти на інших сайтах у web-просторі з дотриманням правил етикету і без порушення прав авторів. Сторінка набуде такого вигляду, як, наприклад, після застосування до неї концепції тем.
Каскадні таблиці стилів бувають зовнішні і внутрішні. Зовнішні знаходяться у файлах з розширенням css, а внутрішні — це описи стилів засобами мови CSS, які вставляються у html-код сторінки і мають локальну дію, тобто їхня дія поширюється лише на дану сторінку, чи навіть лише на окремі її елементи. На практиці частіше застосовують зовнішні таблиці стилів, безплатні чи умовно безплатні бібліотеки яких можна знайти у web-просторі, їх не потрібно копіювати на свій комп'ютер, достатньо зв'язати свій сайт із відповідною таблицею в мережі Інтернет командою Format => Style Sheet Links.
Отже, робота з каскадними таблицями стилів складається з двох етапів: створення і використання. На першому етапі слід знайти адресу потрібної таблиці стилів у web-просторі чи створити свою таблицю, наприклад, на основі шаблону. Для цього застосовують команди File => New => Page відкривають закладку Style Sheets і вибирають один з шаблонів (Arcs, Bars, Blocks, Downtown, Poetic, Street, Sweets чи інший) і натискають на Ok. Тепер можна ознайомитися з описом стилю, внести власні зміни або доповнення вручну чи за допомогою команди Format => Style. Останній спосіб особливо зручний і ми рекомендуємо його для початківців. Після створення таблицю стилів слід зберегти у файлі з розширенням css у папці сайту командою File => Save as.
На другому етапі відкривають сайт чи сторінку і з'єднують їх з існуючою таблицею стилів за допомогою команд Format => Style Sheet Links => Add => зазначають шлях до потрібної таблиці стилів на диску чи у web-просторі => натискають на кнопку Ok — отримують результат. Якщо таблицю стилів вибрано невдало, то її вилучають і застосовують іншу.
7. Теми. Ще один спосіб автоматизації процесу створення сайту полягає у застосуванні тем. Тема - це сукупність таблиці стилів і графічних елементів. Тем є декілька десятків, серед яких виокремимо такі: Arcs, Automotive, Blends, Cactus, Canvas, Chalkboard, Classic, ClearDay, Corporate, Cypress, Downtown, Highway, Kids, Laverne, Leaves, Nature, Safari, Sunflower, Sweets, Tidepool.
Тему застосовують до окремих сторінок чи до всіх командою Format => Theme на початку створення сайту або наприкінці. Вибирають зі списку потрібну тему, модифікують її (часто до невпізнання) за допомогою кнопки Modify і натискають на кнопку Ok. Теми можна змінювати. Щоб вилучити тему, серед назв вибирають фразу No Theme.