Програма MS FrontPage 2003 має в своєму арсеналі спеціальні засоби для розмітки і оформлення Web-сторінок – макетні таблиці, шари, готові шаблони, теми, таблиці стилів.
Створення макетних таблиць
Макетна таблиця є структурою, що складається з комірок і створюється користувачем при розробці Web-сторінки. Макетні комірки – це області структури, призначені для розміщення в них вмісту сторінки, включаючи текст, малюнки, Web-компоненти і інші елементи. Макетні таблиці і комірки дозволяють задати для вмісту сторінки візуальну структуру будь-якої складності. Сама макетна таблиця представляє основу або «полотно», для розробки макета.
З панелі Макетні таблиці і комірки в області задач можна викликати певні макетні таблиці, щоб прискорити створення Web-сторінки. А можна створити власну макетну таблицю, самостійно побудувавши таблицю і комірки. Також можна редагувати готову Web-сторінку, яка містить готові макетні таблиці і комірки. При роботі по створенню і редагуванню макетних таблиць доцільно показати лінійку і сітку в робочому вікні, а також задати нульовими ліве і верхнє поля сторінки, щоб розміри таблиці вимірювати по лінійці без поправки на поля. Установка полів проводиться в діалоговому вікні Властивості сторінки на вкладці Додатково, доступ до якої відкривається з панелі Макетні таблиці і комірки вибором посилання Задати поля сторінки.
Щоб створити макетну таблицю, потрібно:
Вибрати пункти меню ТаблицяМакетні таблиці і комірки. В області задач відкриється однойменна панель.
В розділі Нові таблиці і комірки вибрати посилання Вставити макетну таблицю. Макетна таблиця розміром 450*450 пікселів, що складається з одної комірки, з’явиться у вікні документа.
Нову макетну таблицю можна також просто намалювати, якщо замість вибору посилання Вставити макетну таблицю натиснути кнопку Намалювати макетну таблицю. При цьому курсор прийме вигляд олівця і можна буде просто накреслити межі таблиці в робочому вікні.
Вставлена (або намальована) макетна таблиця спочатку виділена, при цьому її межі забарвлені в зелений колір. Якщо натиснути за межами макетної таблиці, виділення буде відмінено і межі будуть зображені чорними пунктирними лініями. Такі кроки доцільні, якщо потрібно працювати не з самою таблицею, а виключно з її вмістом. Щоб виділити таблицю, потрібно натиснути по її (пунктирній) межі або спочатку натиснути в середині таблиці, а потім в рядку Швидкий вибір тегів натиснути кнопку .
В центрі кожної сторони виділеної макетної таблиці є ярлички з інформацією про ширину (стовпця) і висоту (рядка) в пікселях. Натиснення трикутної стрілки на ярличку відкриває контекстне меню, що пропонує змінити висоту рядка або ширину стовпця.
При виборі Змінити висоту рядка (ширину стовпця)відкривається вікно Властивості рядка (стовпця), в якій можна задати нове значення висоти рядка або ширини стовпця. Контекстне меню пропонує також застосувати авторозтягування. Авторозтягування полягає в тому, що вибраному стовпцю або рядку в таблиці дозволяється автоматично займати максимальний доступний простір у вікні оглядача.
Найкоротший, але не найточніший спосіб змінити розміри таблиці полягає в перетягуванні її меж. Для цього слід навести курсор на ярличок (курсор змінить вигляд) і, натиснувши на клавішу мишки, перемістити межу макетної таблиці.
Ще один спосіб змінити розміри виділеної таблиці – використовувати клавіші (стрілки) переміщення курсору. Кожне натискання клавіші-стрілки зсовує межу макетної таблиці маленьким стрибком на один піксель. Точне значення розмірів сторін таблиці легко контролювати за показниками на ярличках.
Додавання до таблиці макетних комірок
Щоб додати до створеної таблиці макетну комірку, її можна просто намалювати усередині таблиці:
Натисніть кнопкою миші усередині макетної таблиці.
В панелі Макетні таблиці і комірки натисніть кнопку Намалювати макетну комірку.
Виберіть курсором місце для одного з кутів комірки, натисніть кнопку миші і накресліть межі комірки усередині макетної таблиці.
В робочому вікні з’явиться макетна комірка усередині таблиці. Спочатку вона виділена, її межі пофарбовані синім кольором, а фон комірки – білий. Цифри на ярличку вказують розміри - ширину і висоту в пікселях.
В створені макетні комірки можна вставляти інформаційне наповнення – текст, малюнки і інші елементи Web-сторінки Для цього існує цілий ряд способів. Можна, наприклад, ввести текст безпосередньо з клавіатури, додати графічні зображення за допомогою різних параметрів меню Вставка.
Крім того, ці операції можна проводити простим перетягуванням відповідних файлів із списку папок Web-вузла (для цього необхідно, щоб дана панель була присутня на екрані: вибрати ВиглядСписок папок).
Варто звернути увагу, що простір макетної таблиці між комірками залишається забарвленим бежевим кольором. Це – комірки-заповнювачі. Вони не містять даних і існують для того, щоб доповнювати сумарну ширину стовпців таблиці до загальної ширини таблиці. Бежевий колір комірок-заповнювачів проявляється тільки в режимі конструктора і його не видно в оглядачі. При зміні положення і розмірів макетних комірок в межах макетної таблиці параметри комірок-заповнювачів автоматично підстроюються.
Прямо в робочому вікні можна змінювати розміри виділеної макетної комірки, якщо за допомогою курсору «зачепити» маркер (в середині межі комірки) і перемістити його. Можна просто навести курсор точно на межу комірки, і він перетвориться в двонаправлену стрілку для перетягування меж при натисканні миші. Якщо підвести курсор до будь-якого кута макетної комірки, він приймає форму кута і дозволить при натисканні миші змінити розмір комірки відразу по двох координатах.
Якщо наблизити курсор до лінії межі комірки, він перетворюється на хрестоподібну стрілку і дозволить переміщати виділену комірку в середині таблиці. Так само поводиться курсор при наведенні на центр ярличка. Крім того, клавіші-стрілки теж переміщають всю комірку.
Щоб зняти виділення комірки, потрібно натиснути в будь-якому місці сторінки. Якщо підвести курсор до межі невиділеної комірки, межа забарвлюється синім кольором, і натисканням миші можна знову виділити комірку. Можна також натиснути мишкою в середині макетної комірки і в рядку Швидкий вибір тегів натиснути кнопку <td>.
Якщо в панелі Макетні таблиці і комірки вибрати посилання Формат комірки, то в області задач відкриється однойменна панель, в якій проводяться настройки виділеної макетної комірки. В розділі Властивості макетної комірки задаються точні розміри, поля і вирівнювання для вмісту комірки, а також фоновий колір комірки. В розділі Межі задаються ширина (товщина) межі і її колір, причому вказані параметри можна задати різними для всіх чотирьох меж комірки. В розділі Поля задаються значення для чотирьох полів комірки.
В макетній комірці можна виділити місце для верхнього і нижнього колонтитулу, для чого в панелі Формат комірки потрібно вибрати посилання Колонтитули комірки. При цьому в згаданій панелі з’являться розділи Верхній колонтитул і Нижній колонтитул, в яких задаються необхідні параметри: висота, поля, вирівнювання, колір і ширина межі, колір фону.
Коли основна структура Web-сторінки створена за допомогою макетної таблиці і комірок, можна додати такі деталі, як колір, межі з малюнків, тіні і інші декоративні елементи. Наприклад, стилізовані кути, які роблять межі комірки схожими на межі кнопки. Так, прямокутну форму макетної комірки можна змінити, використовуючи округлення кутів.
Для здійснення операцій по «декоруванню» макетних комірок, слід вибрати посилання Кути і заливка комірки в панелі Формат комірки. При цьому відкриються розділи Кути і Тіні.
Задавши параметри кутів, кольору і тіней у відповідних полях, можна добитися бажаного вигляду макетної комірки. Слід контролювати процес створення макетних комірок і таблиць, переходячи в представлення Перегляд.
Повторивши дії по створенню макетної комірки стільки раз, скільки комірок вимагається розмістити в макетній таблиці, можна створити необхідний шаблон Web-сторінки.
Розмітка Web-сторінкипо зображенню-зразку
Можна виконати розмітку створюваної Web-сторінки по зразку-ескізу, який використовуватиметься як візуальний орієнтир при створенні макета Web-сторінки. Зображення-зразок, створений в будь-якому графічному редакторі (формат файлу повинен бути JPEG, GIF, PNG, WMF або BMP), потрібно встановити на сторінці так, щоб воно служило фоном вікна документа. Слід підкреслити, що це зображення буде видне тільки в представленні Конструктор іне видне при перегляданні Web-сторінки в оглядачі.
Щоб використовувати наявний зразок макета Web-сторінки, слід виконати наступні дії:
Вибрати ВиглядЗображення-зразокНастройка.
В діалоговому вікні, що відкрилося, Зображення-зразок натиснути кнопку Огляд.
В діалоговому вікні, що відкрилося, Малюнок вказати розміщення файлу зразка і натиснути кнопку Вставити.
В діалоговому вікні Зображення-зразок встановити непрозорість на рівні 30-40%, а також (при необхідності) зсув малюнка відносно початку координат (лівого верхнього краю сторінки).
Закрити вікно Зображення-зразок, натиснувши кнопку ОК.
Для того, щоб зображення-зразок стало невидимим, слід зняти прапорець в меню ВиглядЗображення-зразокПоказати малюнок.
Щоб видалити зображення-зразок з Web-сторінки, слід вибрати пункти меню ВиглядЗображення-зразокНастройка, натиснувши кнопку Очистити зображення і закрити вікно, натиснувши кнопку ОК.
При створенні Web-сторінки можна також скористатися готовими шаблонами макетних таблиць в панелі Макетні таблиці і комірки. В розділі Макети є одинадцять варіантів макетних таблиць, які відображають типові схеми розмітки Web-сторінок. Щоб використати готову макетну таблицю, слід вибрати відповідну розмітку сторінки і натиснути по її зображенню. Макетна таблиця з’явиться у вікні документа.
Щоб прибрати із сторінки створену розмітку, потрібно в розділі Макети натиснути на зразок Без макета. Для видалення макетних комірок і таблиць виділіть їх і натисніть клавішу Delete.
Використання шарів
Програма FrontPage 2003 має могутні засоби для створення складних елементів Web-сторінки за допомогою шарів. Шар – це деяка область на Web-сторінці, що містить текст, малюнки, Web-компоненти. Шари можна вставляти в Web-сторінку і видаляти із сторінки. Шари, разом з елементами що знаходяться на них, можна переміщати на сторінці, накладати один на інший, змінювати порядок їх накладання. Можна включати і вимикати видимість шару і, відповідно, елементів, розташованих на ньому. Шари також можна анімувати, використовуючи область задач Поведінка.
Розглянемо можливості використання шарів. Щоб на відкриту у вікні документа Web-сторінку додати новий шар, слід вибрати ВставитиШар. На сторінці у вікні документа з’явиться шар у вигляді квадратного поля розміром 100x100, а в області задач відкриється панель Шари.
Панель Шари містить дві кнопки команд (Вставити шарі Намалювати шар),таблицю шарів, два посилання в розділі Властивості шару(Межа і заливкаі Положення), а також посилання Поведінка.
Вставлений шар у вікні документа має ярличок з ім’ям шару - layer1. Спочатку новий шар виділений, його межа забарвлена в синій колір. В центрі кожної з меж шару, а також в його кутках знаходяться маркери, що дозволяють за допомогою курсору змінювати розміри шару. При наведенні на ярличок або на межу шару зовні маркера курсор перетворюється на хрестоподібну стрілку для зміни положення шару в межах сторінки. При натисканні курсором в межах шару зникають маркери, колір меж залишається синім. В цьому стані шар готовий до розміщення в ньому елементів сторінки, наприклад набору тексту або вставці малюнка.
Якщо розмір елемента, що вставляється, перевищує розміри шару, межі останнього розсуваються. Аналогічно поводяться межі при наборі тексту.
Кнопка Вставити шарв панелі Шаривиконує команду Вставити Шар. За допомогою кнопки Намалювати шаркурсор перетворюється на олівець, яким можна намалювати межі шару довільних розмірів.
Створимо за допомогою описаних способів ще два нові шари і вставимо послідовно у всі три шари по картинці з колекції малюнків (Вставка Малюнок Картинки).
Таблиця шарів відображає список всіх створених шарів відкритої Web-сторінки з вказівкою видимості кожного шару (включена або вимкнена) і глибини. Виділення рядка конкретного шару в таблиці шарів приводить до виділення відповідного шару і у вікні документа. В графі Видимістьможна включати і вимикати відображення шару разом з його вмістом на сторінці.
Управляти відображенням шару у вікні документа можна за допомогою контекстного меню, яке викликається натисканням правої кнопки миші по виділеному рядку в таблиці шарів.
Положення шару по глибині можна змінювати за допомогою кнопок Перемістити впереді Перемістити назадв панелі інструментів Малюнки.Кожне натискання по кнопці переміщає шар на один рівень, при цьому значення глибини в таблиці шарів змінюється на одну одиницю: Глибина може приймати як позитивні, так і негативні значення. Чим більше значення глибини, тим ближче шар до спостерігача і навпаки.
Інший спосіб зміни глибини «залягання» шару полягає в тому, щоб вказати конкретне значення глибини в таблиці шарів. Для цього потрібно двічі натиснути в полі глибини вибраного шару і ввести нове значення.
Таким же способом можна змінювати ім’я шару.
Щоб змінити порядок накладення шарів, достатньо курсором зачепити в таблиці рядок виділеного шару і перетягнути його в нове місце.
Спочатку вставлений або намальований шар є прозорим. Додавання тільки тексту не змінює властивість прозорості шару. Тому при накладенні шарів, що містять тільки текст, буде видний вміст всіх шарів (для яких включена видимість в таблиці шарів).
Використовуючи команду Межа і заливказ панелі Шари, можна шару додати кольорову межу заданої товщини, а також задати колір фону і тексту. Вказані установки здійснюються в діалоговому вікні Межі ізаливка, що розглядалось раніше. Після надання кольорового фону або розміщення графічних елементів шар стає непрозорим, і при накладенні шарів якісь частини зображення будуть приховані. Поміщаючи в шар малюнок з файлу або картинку з колекції кліпів, можна використовувати редагування малюнків і задати прозорий шар.
Розміщуючи шари довільним чином в межах Web-сторінок і змінюючи їх взаємне положення по глибині, можна створити складний графічний образ, керований багатошаровий колаж із наявних графічних заготівок. Оцінити вигляд створеної Web-сторінки можна в представленні Перегляд.
Можна створювати різні візуальні ефекти за допомогою меню Поведінкана панелі Шари. В цьому меню запропонований список різних дій, який відкривається за допомогою кнопки Вставити.
Наприклад, можна задати заміну зображень на окремих шарах при наведенні курсору на певні області сторінки. Для цього в списку дій потрібно вибрати Заміна зображенняі в діалоговому вікні, що відкрилося, вказати для кожного шару файл картинки, яка замінить наявне зображення.
|