3. Розроблення веб-сторінок

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

Розробляти веб-сторінку в FrontPage можна або з «чистого аркуша», або, якщо було використано один із шаблонів програми — з шаблона сторінки.

Для того щоб відкрити веб-сторінку вузла для редагування, потрібно двічі клацнути її мишею в поданнях Папки, Переходы чи Гиперссылки.

Після відкривання сторінки бачимо стандартну заготовку з підказками, яку саме інформацію і де потрібно розмістити. Зрозуміло — цей текст слід видалити і ввести на його місце потрібну інформацію.

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

Редагування тексту веб-сторінки мало чим відрізняється від редагування тексту в інших додатках Microsoft Office. Інструменти форматування тексту розміщені на панелі інструментів Форматирование, а також у меню Формат. Слід остерігатися використання «екзотичних» шрифтів при оформленні сторінок, адже формування сторінки у вікні браузера при перегляді відбуватиметься з використанням шрифтів, які встановлені в системі кінцевого користувача. Якщо шрифту, який був використаний при розробленні сторінки, немає, то його замінено, внаслідок чого сторінка може відображатися некоректно. Водночас при розробленні сторінок доцільно використовувати кольорове оформлення, яке за умови вдалого підбору кольорів надаватиме сторінці естетичного оформлення.

Гіперпосилання є одним із обов'язкових елементів веб-сторінки. Вони дають змогу переходити до іншої веб-сторінки або до іншої частини відкритої сторінки. Гіперпосиланням може бути текст або графічне зображення. Для створення гіперпосилання потрібно виділити текст (малюнок) і натиснути кнопку Добавление гиперссылки панелі інструментів Стандартная, або скористатися командою меню Вставка/Гиперссылка...

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

Таблиці є одним з найважливіших інструментів при побудові веб-сторінок. Крім розміщення інформації в табличній формі таблиці активно застосовують для правильного позиціонування тексту й графіки. При цьому потрібні блоки тексту й графіки розміщують у клітинах таблиці, а її межі роблять невидимими. Інструменти для роботи з таблицями зосереджено на панелі інструментів Таблицы. Більша частина інструментів, розміщених на цій панелі, дублюється командами меню Таблица. Для створення таблиці на сторінці слід скористатися командою Таблица/Вставить/Таблица. При цьому відкривається діалогове вікно Вставка таблицы, де потрібно задати параметри таблиці: кількість рядків та стовпчиків, вирівнювання, обтікання тощо.

Проте крім прямої вставки таблицю можна намалювати. Для цього використовують команду Таблица/Нарисовать таблицу або однойменну кнопку панелі інструментів Таблицы. Після виконання цієї команди курсор набирає форму олівця, яким можна просто намалювати таблицю.

Фрейми дають можливість у межах одного вікна переглядати одночасно кілька документів. Фрейм — це місце на сторінці, де відображується інший НТМL-документ. Сам фрейм є ніби відособленим вікном перегляду, що містить свої смуги прокручування. Межі фреймів за замовчуванням користувач може змінити у процесі перегляду веб-сторінки. Природно, немає рації вставляти у вихідний документ усього один фрейм. Як правило, їх не менше ніж два, але рідко на сторінці розміщується більш як чотири фрейми відразу, оскільки вікна перегляду кожного документа, вставленого у фрейм, стають маленькими і працювати з ними незручно. Якщо з'явилася потреба помістити більш як чотири фрейми на сторінці, найчастіше це означає, що структуру сайта спроектовано неграмотно.

На веб-сторінці можуть бути специфічні саме для веб-сторінки компоненти:

Оголошення на сторінках (Вставка/Объявление на странице) — дають змогу швидко додавати заголовки веб-сторінок. Якщо на поточній сторінці використовується тема, то в оголошеннях на цій сторінці використовуються стилі й малюнки з теми; в іншому випадку в оголошенні відображується тільки текст;

Панель посилань (Вставка/Панель ссылок) — набір графічних або текстових кнопок, що містить гіперпосилання на веб-сторінки;

Колекція фотографій — це веб-сторінка, що містить колекцію фотографій, розташованих відповідно до певного макета.

Для вставки цих та інших об'єктів потрібно скористатися командами меню Вставка; для настроювання їхніх властивостей слід за допомогою контекстного меню викликати властивості потрібного об'єкта.

Оптимізація коду. Чим менший розмір сторінки, тим швидше вона завантажуватиметься у вікні Інтернет-браузера, тим менше часу користувач витрачатиме при перегляді. Для того щоб оптимізувати код створеної сторінки, потрібно скористатися командою Сервис/ Оптимизировать HTML-код... FrontPage дає можливість прибрати з коду сторінки примітки, порожній простір, автоматично створений код, за рахунок чого можна зменшити розмір сторінки.

Властивості сторінки. У FrontPage можна змінювати властивості як окремих елементів, так і веб-сторінки в цілому. Для відкриття діалогу зміни параметрів сторінки потрібно скористатися командою меню Файл/Свойства... або командою контекстного меню Свойства страницы…

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

4. Веб-графіка

Створення і оптимізація графіки — складне й примхливе завдання. Безумовно, можна створити веб-сторінки без використання графіки — за допомогою шрифтів, скриптів і таблиць стилі» (CSS) — це буде красиво й стильно. Проте остаточний вигляд документа залежить від великої кількості різних чинників, таких як: ширина вікна браузера, попередні настроювання браузера, прийняті за замовчуванням розмір шрифту, його ім'я, колір. До того ж браузери підтримують не всі стилі. Якщо буде використано графіку, то відвідувач вашої сторінки побачить її точно такою, якою зробили й бачите ви.

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

Популярними є такі редактори графіки:

Microsoft Paint — редактор, що входить у стандартну поставку операційних систем Microsoft. Він має набір функцій (пензлик, олівець, гумка та ін.), які дають змогу створювати прості малюнки. На жаль, для оброблення веб-графіки він практично не придатний;

Adobe Photoshop — нині це найпотужніший пакет для професійного оброблення растрової графіки. Це цілий комплекс, що має численні можливості модифікації растрового малюнка, величезний набір різних фільтрів і ефектів, причому є можливість підключати інструменти незалежних виробників. Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки можна уявити. Загалом потенціал цього пакета величезний. Починаючи з версії 5.5, у пакет входить програма Adobe ImageReady, що надає дуже великі можливості з оброблення графіки під WEB (оптимізація зображень, створення анімованих gif, «розрізування» картинок на дрібніші тощо);

Adobe Illustrator — пакет дає можливість створювати, обробляти й редагувати векторну графіку. За потужністю він еквівалентний растровому редактору Adobe Photoshop: має аналогічний інтерфейс, дає змогу підключати різні фільтри й ефекти, розуміє багато графічних форматів, навіть таких, як .cdr (CorelDraw) і .swf (Flash); a

CorelDraw — безумовно, такий відомий графічний пакет не міг обійтися без засобів для оброблення векторної графіки. Пакет за потужністю практично не поступається графічним редакторам Adobe Photoshop і Illustrator. Крім оброблення векторної графіки у цьому пакеті існують редактори растрової графіки (Photo Paint), шрифтів, підготовки текстур і створення штрихкодів.