Розмітка Web-сторінки по зображенню-зразку

Можна виконати розмітку створюваної Web-сторінки по зразку-ескізу, який використовуватиметься як візуальний орієнтир при створенні макета Web-сторінки. Зображення-зразок, створений в будь-якому графічному редакторі (формат файлу повинен бути JPEG, GIF, PNG, WMF або BMP), потрібно встановити на сторінці так, щоб воно служило фоном вікна документа. Слід підкреслити, що це зображення буде видне тільки в представленні Конструктор і не видне при перегляданні Web-сторінки в оглядачі.

Щоб використовувати наявний зразок макета Web-сторінки, слід виконати наступні дії:

1. Вибрати ВиглядЗображення-зразокНастройка.

2. В діалоговому вікні, що відкрилося, Зображення-зразок натиснути кнопку Огляд.

3. В діалоговому вікні, що відкрилося, Малюнок вказати розміщення файлу зразка і натиснути кнопку Вставити.

4. В діалоговому вікні Зображення-зразок встановити непрозорість на рівні 30-40%, а також (при необхідності) зсув малюнка відносно початку координат (лівого верхнього краю сторінки).

5. Закрити вікно Зображення-зразок, натиснувши кнопку ОК.

Для того, щоб зображення-зразок стало невидимим, слід зняти прапорець в меню ВиглядЗображення-зразокПоказати малюнок.

Щоб видалити зображення-зразок з Web-сторінки, слід вибрати пункти меню ВиглядЗображення-зразокНастройка, натиснувши кнопку Очистити зображення і закрити вікно, натиснувши кнопку ОК.

При створенні Web-сторінки можна також скористатися готовими шаблонами макетних таблиць в панелі Макетні таблиці і комірки. В розділі Макети є одинадцять варіантів макетних таблиць, які відображають типові схеми розмітки Web-сторінок. Щоб використати готову макетну таблицю, слід вибрати відповідну розмітку сторінки і натиснути по її зображенню. Макетна таблиця з’явиться у вікні документа.

Щоб прибрати із сторінки створену розмітку, потрібно в розділі Макети натиснути на зразок Без макета. Для видалення макетних комірок і таблиць виділіть їх і натисніть клавішу Delete.

Використання шарів

Програма FrontPage 2003 має могутні засоби для створення складних елементів Web-сторінки за допомогою шарів. Шар – це деяка область на Web-сторінці, що містить текст, малюнки, Web-компоненти. Шари можна вставляти в Web-сторінку і видаляти із сторінки. Шари, разом з елементами що знаходяться на них, можна переміщати на сторінці, накладати один на інший, змінювати порядок їх накладання. Можна включати і вимикати видимість шару і, відповідно, елементів, розташованих на ньому. Шари також можна анімувати, використовуючи область задач Поведінка.

Розглянемо можливості використання шарів. Щоб на відкриту у вікні документа Web-сторінку додати новий шар, слід вибрати ВставитиШар. На сторінці у вікні документа з’явиться шар у вигляді квадратного поля розміром 100x100, а в області задач відкриється панель Шари.

Панель Шари містить дві кнопки команд (Вставити шар і Намалювати шар), таблицю шарів, два посилання в розділі Властивості шару (Межа і заливка і Положення), а також посилання Поведінка.

Вставлений шар у вікні документа має ярличок з ім’ям шару - layer1. Спочатку новий шар виділений, його межа забарвлена в синій колір. В центрі кожної з меж шару, а також в його кутках знаходяться маркери, що дозволяють за допомогою курсору змінювати розміри шару. При наведенні на ярличок або на межу шару зовні маркера курсор перетворюється на хрестоподібну стрілку для зміни положення шару в межах сторінки. При натисканні курсором в межах шару зникають маркери, колір меж залишається синім. В цьому стані шар готовий до розміщення в ньому елементів сторінки, наприклад набору тексту або вставці малюнка.

Якщо розмір елемента, що вставляється, перевищує розміри шару, межі останнього розсуваються. Аналогічно поводяться межі при наборі тексту.

Кнопка Вставити шар в панелі Шари виконує команду Вставити Шар. За допомогою кнопки Намалювати шар курсор перетворюється на олівець, яким можна намалювати межі шару довільних розмірів.

Створимо за допомогою описаних способів ще два нові шари і вставимо послідовно у всі три шари по картинці з колекції малюнків (Вставка  Малюнок  Картинки).

Таблиця шарів відображає список всіх створених шарів відкритої Web-сторінки з вказівкою видимості кожного шару (включена або вимкнена) і глибини. Виділення рядка конкретного шару в таблиці шарів приводить до виділення відповідного шару і у вікні документа. В графі Видимість можна включати і вимикати відображення шару разом з його вмістом на сторінці.

Управляти відображенням шару у вікні документа можна за допомогою контекстного меню, яке викликається натисканням правої кнопки миші по виділеному рядку в таблиці шарів.

Положення шару по глибині можна змінювати за допомогою кнопок Перемістити вперед і Перемістити назад в панелі інструментів Малюнки. Кожне натискання по кнопці переміщає шар на один рівень, при цьому значення глибини в таблиці шарів змінюється на одну одиницю: Глибина може приймати як позитивні, так і негативні значення. Чим більше значення глибини, тим ближче шар до спостерігача і навпаки.

Інший спосіб зміни глибини «залягання» шару полягає в тому, щоб вказати конкретне значення глибини в таблиці шарів. Для цього потрібно двічі натиснути в полі глибини вибраного шару і ввести нове значення.

Таким же способом можна змінювати ім’я шару.

Щоб змінити порядок накладення шарів, достатньо курсором зачепити в таблиці рядок виділеного шару і перетягнути його в нове місце.

Спочатку вставлений або намальований шар є прозорим. Додавання тільки тексту не змінює властивість прозорості шару. Тому при накладенні шарів, що містять тільки текст, буде видний вміст всіх шарів (для яких включена видимість в таблиці шарів).

Використовуючи команду Межа і заливка з панелі Шари, можна шару додати кольорову межу заданої товщини, а також задати колір фону і тексту. Вказані установки здійснюються в діалоговому вікні Межі і заливка, що розглядалось раніше. Після надання кольорового фону або розміщення графічних елементів шар стає непрозорим, і при накладенні шарів якісь частини зображення будуть приховані. Поміщаючи в шар малюнок з файлу або картинку з колекції кліпів, можна використовувати редагування малюнків і задати прозорий шар.

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

Можна створювати різні візуальні ефекти за допомогою меню Поведінка на панелі Шари. В цьому меню запропонований список різних дій, який відкривається за допомогою кнопки Вставити.

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