Пошукова робота

на тему:

Використання зображень

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

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

У Microsoft FrontPage передбачені не тільки засоби, які дозволяють
отримати доступ до будь-яких методів розміщення графічних файлів на
Web-сторінці, але й засоби інтегрованого перегляду зображень, а також (в
дещо обмеженому варіанті) засоби редагування зображень.

Розміщення зображень на Web-сторінці

Найпростіший спосіб помістити зображення на Web-сторінку — це його
перетягнути. На мал. 1 показано, як ви можете перетягнути малюнок зі
списку Folder List в режимі Page View прямо на Web-сторінку, що
редагується. При перетягненні зображення буде розміщене в тому місці, де
на сторінці знаходиться курсор вставки. Вставляти зображення можна й
іншими способами, наприклад:

перетягнути зображення з Windows Explorer;

перетягнути зображення з Internet Explorer;

скопіювати зображення в буфер обміну з будь-якої іншої програми і потім
вставити її у FrontPage;

перетягнути зображення з однієї відкритої Web-сторінки на іншу;

перетягнути зображення з місця на місце на відкритій сторінці.

Зображення можна вставляти і за допомогою меню Insert. Виберіть Picture,
а потім — From File. У результаті відкриється діалогове вікно Picture,
яке наведено на мал. 6.2.

Переміщення зображення з іншої програми програми (нanpиклад, Windows
Explorer) – це завжди копіювання

Мал. 1. Переміщення зображення на сторінку

Мал. .2. Для вставки зображень у FrontPage використовується діалогове
вікно Picture

Спочатку в діалоговому вікні Picture відкривається папка поточного
FrontPage Web. Щоб відкрити будь-яку вкладену папку, можна просто
клацнути по її назві, а щоб перейти на рівень вище, скористайтеся
кнопкою Up One Level в панелі інструментів.

Як вибрати зображення за допомогою браузера

Для пошуку зображень для вставки за допомогою Web-браузера виконайте
наступні дії:

У діалоговому вікні Picture натисніть кнопку Use Your Web Browser To
Select А Page Or File. Відкриється вікно браузера.

Відкрийте зображення в браузері. Пересвідчіться, що в браузері відкрите
саме зображення, а не сторінка, на якій це зображення розміщене (в рядку
адреси в браузері назва файла повинна закінчуватися на JPG, JPEG або
GIF).

Поверніться у FrontPage. Шлях до файла зображення буде автоматично
вміщений в поле URL діалогового вікна Picture.

Крок 3 простіше виконати, коли на Web-сторінці є прямі посилання на
зображення (наприклад, через значки попереднього перегляду). Якщо прямих
посилань немає, буває простіше скопіювати адресу URL зображення і
вставити її в діалогове вікно Picture. У Internet Explorer можна
скористатися полем Address (URL) у властивостях зображення (клацніть
правою кнопкою миші по зображенню і виберіть Properties) В Netscape
Navigator можна клацнути правою кнопкою миші по зображенню і в
контекстному меню вибрати Copy lmage Location.

Ще простіше (але це спрацьовує тільки в Internet Explorer) клацнути
правою кнопкою миші по зображенню, вибрати Copy і вставити малюнок прямо
на Web-сторінку.

Вставка кліпарта

У FrontPage можна скористуватися загальною для всіх додатків Microsoft
Office бібліотекою кліпарта, розширеною за рахунок набору зображень,
спеціально призначених для Web. Для вставки зображення з бібліотеки
кліпарта слід у меню Insert вибрати Picture, а потім — Clip Art.

В результаті відкриється діалогове вікно Insert Clip Art (мал. 3).

Мал. 3. Вставка зображень з бібліотеки кліпарта Office 2002

В бібліотеці зображень Clip Art зображення зберігаються відповідно
ключовим слова. Тому процес вставки зображення з цієї бібліотеки полягає
в пошуку в ній малюнків відвовідаючих відповідній темі або
слову(словосполученню). В поле Search text слід ввести текст, якому
буде відповідати малюнок. В випадаючому списку Search in: вибрати де
шукати малюнки (мал. 3.1), а в випадаючому списку Result should be:
вибрати необхідний тип файлу (мал.3.2)

Якщо обрати посилання Clip Organizer…, то запуститься додаток
Microsoft Clip Organizer. Вікно якого наведено на мал. 4. Яке нагадує
програму «провідник», яле в якому відображаються тільки графічні файли.

Мал. 4. Вікно додатку Microsoft Clip Organizer.

Клацнувши на будь-яке зображення в бібліотеці кліпарта, можна відкрити
наступне меню:

Copy- поміщує зображення в буфер обміну.

Delete from.. — видаляє відповідний малюнок к колекції.

Delete from Clip Organizer — вилучає з Clip Organizer .

Open Clip in… — відкриває малюнок в відповідному додатку.

Tools on the Web… — звертається за допомогою браузера за
інструментарієм на Web — вузлі.

Copy to Collection… — вставляє файл в колекцію.

Move to Collection… — переміщує з однієї колекції до іншої.

Edit Keywords… — дозволяє відредагувати слова, які відносяться до
цього файлу.

Preview/Properties — відкриває вікно з властивостями файла (мал. 5) та
відображає текстовий опис для вибраного вами зображення, категорії, до
яких воно відноситься, і задати або відредагувати ключові слова. Ви
можете змінити будь-який з цих атрибутів або створити свої власні.

Мал. 5. Вікно Preview/Properties

Багато зображень, які входять до складу бібліотеки кліпарта, що
поставляється разом з FrontPage, — це файли у форматі WMF (Windows
Metafile). Зображення в цьому форматі складаються не з крапок -пікселів,
а з ліній, кривих і форм. WMF — це чудовий формат з точки зору кліпарта,
оскільки він дозволяє як завгодно збільшувати, зменшувати або змінювати
форму зображення і при цьому зображення не програють через недостатнє
вирішення. Однак, графічні файли в форматі WMF використовувати напряму в
Web-сторінках не завжди зручно, оскільки цей формат підтримують не всі
браузери. Тому FrontPage при збереженні Web-сторінки конвертує файли WMF
в формат GIF або JPEG.

Головний висновок, який з цього слідує, — змінюйте розмір або форму
зображення перед збереженням Web-сторінки. Це дозволить вам досягти
потрібного ефекту без будь-яких проблем з вирішенням.

Вставка відсканованих зображень

Зображення в Web-сторінку можна вставляти напряму зі сканера або
цифрової камери. Для цього призначено пунк меню Scan в меню Insert
Picture. Зображення можна вставляти з використанням сканера, цифрових
камер або іншого TWAIN-сумісного пристрою.

Збереження зображень

FrontPage зберігає зображення при вставці в пам’яті до моменту
збереження Web-сторінки. При збереженні Web-сторінки FrontPage відкриває
діалогове вікно Save Embedded Files, в якому вам надається можливість
уточнити деталі, пов’язані із зображеннями, що зберігаються. Це
відноситься як до зображень, вставлених з буфера обміну, отриманих з
Інтернету, так і взагалі до всіх зображень, які ще не вміщені у ваш Web.

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

Додання файлів мультимедіа

FrontPage дозволяє використовувати на Web-сторінках відеокліпи. Для
вставки відеокліпа виберіть в меню Insert пункт Picture, а потім —
Video. Відкриється діалогове вікно Video, яке дуже схоже на вікно
Picture, за винятком того, що в ньому будуть відображатися відеокліпи у
форматі AVI. Крім того.

Фоновий звук для Web-сторінки настроюється з властивостей Web-сторінки.

Анімовані GIF-файли не відносяться до мультимедіа. Їх вставка
здійснюється за допомогою того ж діалогового вікна Picture, що і вставка
звичайних зображень.

Зміна властивостей зображення

Дуже часто вставка зображення на Web-сторінку — це тільки початок
роботи. Необхідно також настроїти особливості її розміщення і
представлення. У HTML (і, природно, у FrontPage) передбачені засоби для
настройки показу зображення в браузері.

Відкрити діалогове вікно Picture Properties можна трьома способами:

Виділити зображення і в меню Format вибрати Properties.

Виділити зображення і натиснути Alt+Enter.

Клацнути по зображенню правою кнопкою миші і в контекстному меню вибрати
Picture Properties.

У цьому діалоговому вікні передбачені три вкладки: General, Video і
Appearance. Розглянемо окремо кожну з цих вкладок.

Вкладка General властивостей зображення

Основні властивості зображення настроюються з вкладки General (мал. 6).

У залежності від особливостей зображення деякі його атрибути можуть бути
недоступні. Ось повний список всіх атрибутів, що настроюються.

Picture Source. У цьому текстовому полі відображається повна або
відносна адреса URL і ім’я файла зображення. У залежності від ситуації
це поле може бути доступним тільки для читання.

Мал. 6. Вкладка General властивостей зображення

Browse. Значення атрибута Picture source можна змінювати (простіше
кажучи, якщо можна вибрати інше зображення), ця кнопка дозволить вам
вибрати нове зображення.

Edit. Натиснення на цю кнопку запускає редактор за умовчанням в
залежності від типу зображення. Цим редактором може бути, наприклад,
Microsoft Image Composer або Microsoft PhotoDraw.

Type. Цей розділ дозволяє змінювати тип зображення. Спочатку встановлені
існуючі настройки.

GIF. При установці цього перемикача FrontPage збереже зображення в
форматі GIF.

Jpeg. FrontPage збереже файл в форматі JPEG

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

Low-Res. Це зображення (звичайно меншого вирішення і, відповідно,
розміру) браузер буде відображати під час завантаження основного
зображення.

Text. Рядок тексту, який буде відображатися на місці малюнка в тих
браузерах, які не можуть їх відобразити. Деякі браузери, які цілком
можуть відобразити малюнок, покажуть цей рядок тексту під час
завантаження зображення або коли покажчик миші розміщений над малюнком.

Default hyperlink. У цьому розділі настроюється гіперпосилання за
умовчанням для зображення (та адреса, по якій перейде відвідувач, якщо
клацне по зображенню). Гіперпосилання за умовчанням використовується,
якщо в тому місці на сторінці, в якому розміщене зображення, більше не
помічені ніякі активні області (hotspots).

Location. Адреса URL для гіперпосилання за умовчанням.

Target Frame. Це поле дозволяє вказати фрейм, в якому буде відкрита
сторінка, що вказана в полі Location.

Style. Ця кнопка дозволяє відкрити стандартне діалогове вікно Modify
Style для настройки властивостей CSS поточного зображення.

Вкладка Video властивостей зображення

Вкладка Video діалогового вікна Picture Properties призначена для
настройки властивостей цифрових відеокліпів, наприклад, в форматі AVI.

Мал. 7. Вкладка Video властивостей зображення

Список атрибутів, які настроюються для цієї вкладки:

Video source. У цьому полі вказується шлях до файла відеокліпа. Можна
вказувати шлях до файлів, які знаходяться в поточному Web, на локальному
жорсткому диску, на файл-сервері або в Інтернеті.

Loop визначає кількість показів відеокліпа браузером.

Forever відміняє настройки поля Loop і дає вказівку браузеру показувати
відеокліп безперервно.

Loop delay визначає паузу між показами відеокліпа. Значення вказується в
мілісекундах, за умовчанням використовується значення 0. Наприклад, щоб
вказати п’ятисекундную затримку, введіть значення 5000.

On file open — відеокліп буде показаний відразу ж після закінчення його
завантаження.

On mouse pointer — відеокліп буде показуватися при проходженні над ним
курсора миші.

Вкладка Appearance властивостей зображення

Вкладка Appearance діалогового вікна Picture Properties призначена для
настройки розміру зображення і його розміщення на сторінці Ця вкладка
наведена на мал. 8.

Мал. 8. Вкладка Appearance діалогового вікна Picture Properties

Ось список атрибутів, які можна задати на цій вкладці.

Група Layout. Ця група елементів управління дозволяє настроїти
розміщення зображення на сторінці.

Alignment. Цей випадаючий список визначає взаємне розташування
зображення і тексту. Можливі значення для цього поля і їх пояснення
наведені в табл. 2. Приклади використання різних варіантів на
Web-сторінці показані на мал. 9.

Мал. 9. Приклади розміщення зображень на сторінці з використанням
засобів HTML

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

Horizontal spacing. Це поле дозволяє настроювати відстань (в пікселях)
між зображенням та іншими елементами рядка.

Vertical spacing. Дозволяє настроювати відстань між зображенням і іншими
елементами сторінки по вертикалі (наприклад, між зображенням і рядками
зверху і знизу).

Size. Ця група елементів управління визначає розмір графічного
зображення, що відображається.

Specify size. При установці цього прапорця будуть використовуватися не
початкові розміри зображення, а вказані вами.

Width. Визначає розмір простору по горизонталі, який браузер зарезервує
під зображення. Значення можна вказувати як в пікселях, так і в
процентах (встановивши відповідний перемикач).

Height. Визначає розмір простору по вертикалі, який браузер зарезервує
під зображення. Значення можна вказувати як в пікселях, так і в
процентах (встановивши відповідний перемикач).

Keep aspect ratio. При установці цього прапорця зміна ширини зображення
приведе до зміни висоти, і навпаки (так, щоб пропорції зображення були
збережені).

Проблеми звичайно виникають з розміщенням зображення на сторінці. Як
видно на мал. 8, більшість варіантів розміщення зображення, при якій
зображення розташовується на рядку, приводить до того, що відстань між
рядками спотворюється. Це рідко приводить до поліпшення сприйняття
сторінки. Тому на практиці частіше за все використовуються значення Left
і Right. Вони принаймні прив’язують зображення до абсолютного орієнтира
(лівому чи правому кордону вікна) і дозволяють зберегти звичайну
відстань між рядками.

Щоб розмістити зображення по центру, його потрібно вмістити в окремий
абзац. Після цього можна буде скористатися будь-яким з наступних
способів:

можна виділити абзац і скористатися кнопкою Center в панелі інструментів
Text;

можна клацнути по абзацу правою кнопкою миші, в контекстному меню
вибрати Paragraph Properties, а потім в полі Paragraph Alignment вибрати
Center.

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

при використанні підходу до розміщення зображення за умовчанням браузер
не може надати область під зображення, поки він не отримає досить
інформації про зображення для визначення його розмірів. У результаті
затримується розміщення (і відображення) й інших елементів сторінки.
Якщо ж ви вказуєте розмір зображення в коді HTML, відображення інших
елементів сторінки буде проводитися швидше;

іноді вам може знадобитися зробити зображення більшим або меншим від
його початкового розміру. У цьому випадку розміщення зображення за
умовчанням використовується рідко по очевидних причинах. Коли ви
вміщуєте зображення більшого розміру в меншу за розмірами область
сторінки, на завантаження цього зображення і потім на зміну його
розмірів йде значно більше часу, ніж якби змінили його початкові
розміри. Розтягнення ж невеликого зображення звичайно приводить до
проблем з вирішенням. Однак, останнім часом, як не дивно, такий підхід в
Інтернеті можна зустріти все частіше;

браузери старих версій стикаються з проблемами при роботі з
Web-сторінками, на яких одночасно розміщені скрипти і зображення без
вказаних вручну розмірів. Звичайно проблеми виникають тоді, коли скрипт
запускається на виконання ще до точного визначення розміщення всіх
елементів сторінки. Тому настійно рекомендується вказувати для сторінок,
що містять скрипти, розміри зображень в пікселях вручну.

FrontPage автоматично підставляє початкові розміри зображення в поля
Height і Width вкладки Appearance.

Використання спеціальних засобів FrontPage для роботи із зображеннями

У FrontPage передбачений цілий набір корисних засобів для редагування
зображень. Звичайно, ці засоби не замінять повноцінний редактор
графічних файлів, однак в багатьох випадках вони зекономлять вам безліч
часу. Цими засобами можна скористатися за допомогою панелі інструментів
Picture. Кнопки цієї панелі інструментів і їх призначення наведені в
табл. 3.

Додавання написів у зображення

Web-дизайнерам часто доводиться стикатися з необхідністю додати
текстовий напис в зображення. Самий простий приклад — додавання напису
на малюнок кнопки. У FrontPage для цього передбачений спеціальний засіб,
який називається Text On GIFs. Приклади його використання приведені на
мал. 10. Скористатися цим засобом дуже просто.

Якщо ви ще не розмістили зображення на Web-сторінці, зробіть це.

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

Мал. 9. Лівий малюнок — це початкове зображення. Малюнок з написом —
результат застосування засобу Text On GIFs

У панелі інструментів Picture виберіть Text.

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

Виділивши текст, ви зможете скористатися для нього будь-якими
можливостями форматування, як за допомогою пункту Font в меню Format,
так і за допомогою кнопок на панелі інструментів Format

Після закінчення роботи з текстом на малюнку клацніть мишею в будь-якому
місці сторінки за межами малюнка. Редагування буде завершене.

Один з можливих способів гарантувати, що текст в браузере відвідувача
буде відображатися саме так, як ви задумали (незалежно від встановлених
на комп’ютері відвідувача шрифтів), — створити повністю прозорий файл
GIF і розмістити на ньому текст. Головна перевага засобу Text On GIFs в
порівнянні з обробкою зображення в спеціалізованих редакторах — значна
економія часу.

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

Розтягування зображення не приводить до збільшення кількості пікселів в
ньому. В результаті може вийти так, що на малюнку просто не вистачить
пікселів, щоб відобразити поміщений на нього текст з потрібним
вирішенням. Тому краще не розтягувати зображення, а скористатися
властивістю зміни розміру (resampling), що описаний нижче в даній главі.

Пам’ятайте про те, що колір тексту повинен відрізнятися від кольору,
вибраному у вихідному файлі GIF в якості прозорого. В протилежному
випадку ваш текст також стане прозорим. Легше за все для перевірки на
певний час відключити властивість прозорості (для цього клацніть правою
кнопкою по зображенню, виберіть Picture Properties і зніміть прапорець
Transparency).

Створення значків для попереднього перегляду зображень

Завантаження зображень часто займає багато часу. Поширений підхід до
вирішення цієї проблеми – розмістити на Web-сторінці невелике зображення
для попереднього перегляду (thumbnail) з гіперпосиланням на зображення
вихідного розміру. Таким чином, велике зображення вихідного розміру буде
завантажуватися лише за бажанням користувача. Для створення значків
попереднього перегляду у FrontPage передбачені спеціальні засоби.

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

Виділіть це зображення.

Виберіть в панелі інструментів Picture пункт AutoThumbnail (чи натисніть
Ctrl+T). В результаті FrontPage в автоматичному режимі знищить
зображення великого розміру зі сторінки, розмістить на його місці значок
попереднього перегляду і створить гіперпосилання від цього значка до
вихідного зображення.

Якщо є необхідність, настройте розмір значка за допомогою звичайної
рамки з квадратиками.

При збереженні Web-сторінки FrontPage відкриє діалогове вікно Save
Embedded File, в якому ви зможете змінити імена іконки та вихідного
файла зображення.

Точне позиціювання зображень

На панелі інструментів Picture є три кнопки, які дозволяють настроювати
абсолютне позиціювання зображення на сторінці. Звичайно абсолютне
позиціювання означає, що ви повинні вказати точні координати x-y від
верхнього лівого кута вікна браузера. FrontPage дозволяє вам забути про
виміри, виконуючи за вас всю чорнову роботу.

Для того, щоб виконати абсолютне позиціювання зображення на
Web-сторінці, проведіть наступні операції:

Виберіть зображення.

Натисніть кнопку Positioned Absolutely на панелі інструментів Picture.

Перетягніть зображення в потрібне місце.

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

Зображення, позиціоновані з використанням абсолютних значень, можна
розміщувати шарами, один над одним. Той же прийом можна використати не
тільки для двох, але і для невизначеної кількості зображень. Вмістити
зображення над іншими (на передньому плані) можна за допомогою кнопки
Bring Forward, а відправити його на задній план можна кнопкою Send
Backward.

Наприклад, мішень на мал. 10 знаходиться на передньому плані, а черепаха
— на задньому.

Мал. 10. Зображення у FrontPage можна накладати одне на одне. Зображення
мішені розміщене над зображенням черепахи

Для накладення зображень одне на одне використовується позиціонування
CSS2. Перший браузер, який підтримує CSS2 — це Internet Explorer 4.
Netscape Navigator версії 4 не підтримує накладення зображень. У
результаті малюнок з мішенью і черепахою в ньому буде виглядати так, як
показано на мал. 11.

Мал. 11. Позиціонування CSS2 не підтримується Netscape Navigator 4

Поворот і обертання зображень

У панелі інструментів Picture передбачені чотири кнопки для поворотів та
обертання зображень: дві з них здійснюють поворот зображення на 90
градусів, і ще дві дозволяють перевернути зображення справа наліво або
зверху вниз. Результат показаний на мал. 12.

Мал. 12. Приклад застосування засобів роботи із зображеннями у FrontPage

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

діалогове вікно Save Embedded Images

Зміна контрасту і яскравості

У FrontPage передбачені чотири кнопки для зміни контрасту і яскравості
зображення (див. табл. 3). Результат із застосування показаний на мал.
12 (другий набір зображень). Одну і ту ж кнопку для настройки контрасту
або яскравості можна застосувати до одного зображення декілька разів. У
результаті яскравість або контраст зміниться пропорціонально числу
натиснень.

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

Як при будь-якій іншій зміні зображення, після зміни яскравості
FrontPage при збереженні відкриє діалогове вікно Save Embedded Images,
надаючи тим самим можливість зберегти модифіковане зображення під іншим
ім’ям.

Заміна цілого зображення його частиною і зміна розміру зображення

Заміна цілого зображення його частиною (Cropping) — це процес, в ході
якого початкове зображення замінюється вибраною вами його частиною. У
результаті всі зайві пікселі відкидаються і все зображення стає меншим.
Ось як виглядає ця операція у FrontPage.

Виділіть зображення.

Натисніть кнопку Crop в панелі інструментів Picture (див. табл. 3).

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

Натисніть кнопку Crop ще раз. Початкове зображення буде замінено
виділеною вами частиною.

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

Зміна розміру зображення (resizing) проводиться дуже просто. Виділіть
зображення і перетягніть оточуючу виділене зображення рамку з
квадратиками. Перетягнення з використанням кутових квадратиків дозволяє
зробити пропорційну зміну розмірів зображення. Будь-який інший спосіб
означає, що розміри зображення зміняться тільки в одному вимірі.

Зверніть увагу, що при такій операції не змінюється ні початкове
зображення, ні його розмір. Змінюється тільки розмір простору, що
виділяється браузером для показу зображення. Тому в багатьох випадках
краще змінити розмір початкового зображення. Далі в цьому розділі буде
розглянуто, як це можна зробити засобами FrontPage.

Настройка прозорості

Всі зображення в форматі GIF і JPEG мають прямокутну форму. Однак,
більшість об’єктів, з якими ми маємо справу в реальному житті, мають
зовсім інші форми. Можна спробувати вирішити цю проблему, помістивши
малюнки в спеціальні фрейми зображень, однак в більшості випадків вас
навряд чи влаштує результат. Результат буде набагато кращим, якщо ви
помітите часгини зображення, що вами не використовувалися, як прозорі
(тобто співпадаючі із загальним фоном Web-сторінки в браузері). У
результаті вийде так, неначе видима частина зображення наклеєна на
шматок абсолютно прозорого скла. Приклад використання такого прийому
показаний на мал. 13.

Мал. 13. Зліва для зображення використовується білий фон, а справа —
прозорий

Настроїти прозорість можна з більшості спеціалізованих редакторів
зображень, що підтримують формат GIF. Однак те ж саме можна зробити і з
допомогою FrontPage.

Виділіть зображення на Web-сторінці.

Натисніть на кнопку Make Transparent в панелі інструментів Picture (див.
табл.3).

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

Якщо вам знадобилося зробити прозорим інший колір, повторіть кроки 2 і
3.

Для відключення прозорості зображення відкрийте його властивості і на
вкладці General зніміть прапорець Transparent.

Перетворення зображення в чорно-біле

Для перетворення зображення в чорно-біле достатньо просто виділити його
і натиснути кнопку Black and White в панелі інструментів Picture.
Повторне натиснення цієї кнопки дозволяє знову повернути кольори
зображенню (якщо ви ще не встигли його зберегти).

Освітлення зображення

FrontPage дозволяє освітлити (“відмити”) зображення. Це зручно,
наприклад, якщо ви плануєте зробити це зображення фоновим і переживаєте
про те, щоб воно не заважало сприйняттю тексту.

Висвітлення зображення проводиться за допомогою кнопки Wash Out.
Результат показаний на мал. 12 (нижній ряд). Цікаво, що ви можете
висвітлити зображення необмежену кількість разів, але перед кожним
наступним натисненням кнопки Wash Out необхідно зберігати зображення.

Надання зображенню “випуклості”

При застосуванні ефекту “випуклості” (beveling) верхній і лівий краї
зображення робляться світлішими, а нижній і правий краї – темнішими. В
результаті зображення здається випуклим.

Фізична зміна розміру вихідного зображення

Для того, щоб фізично змінити розмір зображення у FrontPage, спочатку
змініть його розміри звичайним чином (шляхом переміщення рамки навколо
зображення), а потім натисніть кнопку Resample на панелі інструментів
Picture. В результаті буде створений новий файл, який по розміру буде
відрізнятися від вихідного.

На відміну від звичайної зміни розмірів зображення (коли фактично
змінюється тільки простір, що відводиться під зображення браузером),
фізична зміна розміру приводить до реальної зміни файлу. Тому при
збереженні Web-сторінки буде відкрите діалогове вікно Save Embedded
Files.

Відновлення зображення

Поки ви не зберегли зображення, FrontPage дозволяє вам повернутися до
його початкового вигляду. Для цього досить виділити малюнок і
скористатися кнопкою Restore в панелі інструментів Picture. Якщо ж вам
треба відмінити щойно внесені вами зміни, скористайтеся командою Undo в
меню Edit або клавіатурною комбінацією Ctrl+Z.

Поради Web-дизайнеру: робота із зображеннями

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

Вибір колірної палітри

Якщо будь-яке зображення виглядає цілком нормально саме по собі
(наприклад, в спеціалізованому редакторі зображень), а в браузері воно
виглядає набагато гірше (звичайно зернистим), спробуйте перетворити його
палітру. Палітра — це набір кольорів в зображенні. Більшість редакторів
графічних файлів можуть зберігати палітри, як разом із зображеннями, так
і у вигляді спеціальних файлів. Якщо відкрити одночасно графічний файл і
спеціалізовану палітру, в більшості редакторів передбачена можливість
перетворення кольорів в графічному файлі відповідно до цієї палітри. При
цьому колір кожного пікселя зображення буде перетворений в найближчий
колір, який присутній в палітрі. Якщо використати спеціалізовану
палітру, що складається з 216 безпечних кольорів, все зображення буде
перетворене таким чином, щоб у ньому були тільки безпечні кольори. Цим
ви забезпечите себе як від змішання, так і від підстановки кольорів по
розсуду браузера.

Tе, що в браузерах використовується палітра з 216 безпечних кольорів,
приводить до проблем у двох поширених випадках.

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

Екранні скріншоти Windows також не завжди виглядають правильно. Це
пов’язано з тим, що в безпечній палітрі присутні тільки 8 з 20
стандартних кольорів Windows. Ці 8 кольорів раніше були присутніми в
фіксованій 16-кольоровій палітрі перших адаптерів VGA, і відтоді вони
залишилися в палітрі Windows. Ось їх перелік.

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

Управління часом завантаження зображень

Час завантаження Web-сторінок завжди важливий для тих, хто працює в
Інтернеті. Час завантаження можна розрахувати, розділивши загальний
розмір всіх елементів сторінки в байтах на доступну смугу пропуску
мережевого з’єднання в байтах на секунду. Тому управління часом
завантаження Web-сторінок зводиться до управління кількістю байт на
сторінці, а враховуючи те, що зображення мають набагато більший розмір,
ніж текст HTML, в кінцевому результаті все зводиться до управління
розміром графічних файлів.

FrontPage проводить оцінку швидкості завантаження Web-сторінки в
автоматичному режимі. Наприклад, в правому нижньому куті мал. 10 ви
можете помітити напис «4 seconds over 28.8».

При оцінці швидкості завантаження сторінок необхідно також враховувати
деякі додаткові чинники.

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

Просто використовує файл з кеша, не ставлячи ніяких запитань.

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

У деяких випадках ви можете істотно скоротити час завантаження
Web-сторінок, правильно організувавши посилання на графічні файли. Якщо
шлях до одного і того ж графічного файлу, розміщеного одночасно на двох
Web-сторінках, співпадає (звичайно це відбувається, якщо всі зображення
вміщені в одну загальну папку Images), то браузер при перегляді другої
сторінки скористається кешованим графічним файлом. Якщо ж адреса URL до
одного і того ж файлу на різних сторінках відрізняється, браузер буде
завантажувати один і той же графічний файл два рази.

Пошук шляхів скорочення загального часу завантаження часто приводить до
необхідності використати декілька зображень меншого розміру замість
одного великого. Але тут важливо не допустити виникнення ситуація, яка
називається перевантаженням з’єднання (connection overhead). Спробуємо
пояснити, в чому справа.За винятком ситуації, коли і браузер і
Web-сервер використовують засіб під назвою постійні з’єднання
(persistent connections), протокол HTTP вимагає, щоб на кожний файл, що
завантажується, відкривалося (і по закінченні завантаження закривалося)
окреме з’єднання між браузером і Web-сервером. Наприклад, якщо
Web-сторінка містить 10 зображень, буде встановлено 11 з’єднань: одне на
окремий1 файл HTML і ще 10 — по одному на кожне з’єднання. Однак при
кожному встановленні або закритті з’єднання генерується, по-перше,
додатковий службовий мережевий трафік, а по-друге, відволікаються
ресурси як системи, на якій працює Web-браузер, так і Web-сервера. Тому
завжди необхідно оцінювати, чи не займе встановлення додаткових з’єднань
більше часу, ніж економиться в порівнянні із завантаженням графічних
файлів більшого розміру. У будь-якому випадку використання дуже великої
кількості маленьких графічних файлів не практикується.

У файлах GIF пікселі добре стискуються тільки по горизонталі. Наприклад,
замість того, щоб окремо записувати інформацію про кожного із 100
послідовно розташованих на рядку пікселях білого кольору, в файлі
зберігається запис типу: відобразити 100 пікселів білого кольору.На
відміну від файлів GIF в JPEG стиснення файлів проводиться як у
вертикальному, так і в горизонтальному напрямі. Тому напрям ліній і
дільниць має для цього формату менше значення. Пам’ятайте про те, що в
будь-якому випадку дільниці зображення однакового кольору стискуються
набагато краще, ніж дільниці з переходами. Крім того, в файлах JPEG
можна регулювати міру стиснення (і відповідно, якість зображення).

Формати графічних файлів

Більшість браузерів можуть відображати графічні файли тільки двох
форматів: Graphic Interchange Format (GIF) і Joint Photographic Expert
Group (JPEG). Деякі браузери також підтримують формат Portable Network
Graphics (PNG) — новий формат, в якому передбачено безліч функцій.
Інформація про відмінності різних форматів наведена в табл. 4.

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

У файлах GIF використовується такий алгоритм компресії, при якому ніяка
інформація про зображення не втрачається. Таким чином, стиснення
проводиться без втрат (lossless). Інший механізм компресії передбачений
в форматі JPEG. З одного боку, він забезпечує різні міри стиснення за
бажанням автора, з іншого — в багатьох випадках після стиснення JPEG
повернутися до початкового файла стає неможливим. В залежності від
настройок зображення може втратити частину інформації про колірну
палітру, контури і контраст. Такий підхід називається компресією із
втратами (lossy). Чим більша кількість втрат є допустимою, тим меншим є
підсумковий розмір графічного файла.

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

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

Тому найкращий вихід — привласнити одному з кольорів зображення
властивість прозорості. У цьому випадку браузер замість цього кольору
буде відображати те, що повинно знаходитися під ним (як правило, фон).

Ще більш сильний засіб — використати так званий альфа-канал (alpha
channel), який дозволяє задавати до 256 степенів прозорості.

Анімація. Формат GIF дозволяє зберігати в одному і тому ж файлі декілька
зображень і настроювати час показу кожного з них. Це – найпростіший
засіб використання анімації без установки додаткового програмного
забезпечення в браузерах відвідувачів Web-сайту.

Гамма. У різних системах передбачені різні співвідношення між
яскравістю, яка визначена в графічному файлі, і тим, як ця яскравість
буде відтворюватися на апаратному рівні (крім того, ця залежність є
нелінійною). Для розв’язання цієї проблеми у файлах PNG передбачена
можливість запам’ятовування гамми на одному комп’ютері для відтворення
її з максимальною точністю на інших комп’ютерах.

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

Новітній формат графічних файлів PNG (Portable Network Graphics)
забезпечує повну підтримку 32-бітного кольору з використанням
альфи-каналу, множинні методи компресії, збереження інформації про гамму
і додаткові можливості, які дозволяють згладити відмінності між різними
платформами. На жаль, формат PNG підтримується не всіма браузерами. Крім
того, звичайно файли у форматі PNG є більшими, ніж зображення GIF і
JPEG.

Пам’ятайте, що насправді файли HTML не можуть містити в собі графіку.
Замість графічних зображень в них зберігаються посилання на графічні
файли, які завантажуються браузером окремо.

Додаткові можливості прироботі із зображеннями

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

Прозорість і альфа-канали

Ось деякі ситуації, коли вам можуть знадобитися властивості прозорості і
напівпрозорості зображень:

коли зображення має неправильну форму (відмінну від прямокутної);

коли частина зображення повинна бути напівпрозорою;

коли зображення має плавно перейти в фон.

Зображення неправильної форми

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

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

Мал. 14. Порівняйте суцільний білий фон зображення зліва і прозорий —
зображення праворуч

Усунення контурних нерівностей

Використання прозорості дозволяє досягти хороших результатів і в
ситуації, коли вам треба зробити усунення контурних нерівностей
(antialiasing). Усунення контурних нерівностей — це боротьба з ефектом
незграбності, який виникає, коли криві лінії відображаються за допомогою
пікселів монітора комп’ютера.

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

Реалізація прозорості

Ефекти, які були розглянуті вище, — безумовно корисні, але при їх
реалізації на практиці виникає безліч проблем.

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

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

Єдиний вихід з цих ситуацій — використати різну ступінь прозорості для
різних ділянок нашого зображення.

Для збереження додаткової інформації про прозорість різних пікселів
призначений так званий альфа-канал. Для кожного пікселя, крім звичайної
інформації про кількість червоного, зеленого і синього, також
зберігається 8-бітне альфа-значення прозорості. У результаті 24-бітная
колірна палітра (по 8 біт на червоний, зелений і синій) перетворюється в
32-бітну (додаткові 8 біт на альфу-значення прозорості).

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

У форматі JPEG прозорість взагалі не передбачена.

У форматі GIF може зберігатися інформація тільки про дві степені
прозорості: повна прозорість або повна відсутність прозорості. Це краще,
ніж нічого, але все-таки гірше, ніж повноцінна підтримка альфа-каналу,
реалізована в файлах PNG.

Корекція гамми

У досконалому світі яскравість, яка відображається на екранах
комп’ютерних моніторів, напряму відповідала б значенням, що задаються в
графічних файлах. Наприклад, піксель з RGB-значенням 200-200-200 був би
в два рази яскравішим, ніж піксель з RGB-значенням 100-100-100.
Відповідно, яскравість, вказана програмно, була б прямо пропорційною
апаратній яскравості (Лінійна залежність в графічному файлі).

Ви, напевно, вже здогадалися, що в реальному житті не все так просто.
Монітори опромінюють люмінофор пучок електронів. Чим більше електронів,
тим більша яскравість, але залежність, що вийшла звичайно далека від
лінійної. Для більшості моніторів яскравість рівна напрузі, зведеній в
степінь 2,5:

Яскравість=Напруга25

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

Експонента 2,5 називається гамою-коефіцієнтом (gamma coefficient) Іноді
значення може і відрізнятися в залежності від особливостей апаратури,
але типове значення дорівнює 2,5

Корекція гамми (gamma correction) — це спеціальне коректування, яке
змінює яскравість зображення для компенсації спотворень, що вносяться
монітором

Корекція гами може проводитися на рівні додатку, операційної системи,
відеодрайвера, відеоадаптера або навіть в моніторі Однак в світі PC і
UNIX прийнято проводити коректування тільки на рівні додатку Деякі
додатки дозволяють настроювати корекцію гамми.

Гама-корекція в PC і Macintosh

У Macintosh передбачена вбудована апаратна корекція зі значенням 1,4.
Оскільки розподіл 2,5 на 1,4 дає 1,8, нормальний рівень корекції гами
для комп’ютерів Macintosh — 1,8. В реальності виходить так, що
зображення, створені на Macintosh, в PC виглядають дуже темними, а
створені на PC в Маках — навпаки, дуже яскравими, висвітленими.

Вимірювання колірної гамми конкретного монітора, відеоадаптера, принтера
або іншого пристрою називається калібруванням кольорів (color
calibration) Калібрування здійснюється за допомогою спеціального
апаратного і програмного забезпечення, і його розгляд виходить за наши
плани. Однак, якщо ви збираєтесь стати професіоналом в дизайні, можливо,
вам знадобляться відомості в цій області.

Похожие записи