Кафедра вищої математики та інформаційних технологій

ЗАТВЕРДЖУЮ

Начальник кафедри

ВМ та ІТ

к.ф-м.н., доц.,

полковник с.ц.з.

_______ І.П. Частоколенко

“___”______2013р.

Навчальна дисципліна: Інформатика та комп’ютерна техніка

1-й курс (стаціонар, курсанти).

МЕТОДИЧНА РОЗРОБКА

на проведення практичного заняття

по темі № 2.2: «Мова розмітки гіпертекстових документів HTML»

Час: 18 годин, з них 4 години лекцій, 10 годин практичних занять, 4 години самостійної роботи.

Тема 16: Використання графіки в html документах.

Мета заняття: придбати практичні навички роботи з тегом вставки зображень та засвоїти можливості його використання.

Метод проведення: практичне заняття.

Місце проведення: ауд. № 317, ауд. № 318.

Час проведення: 2 години

Матеріально-технічне забезпечення: ПК.

Методичну розробку підготував

Викладач кафедри ВМ та ІТ А.П. Марченко

Методична розробка обговорена та схвалена на засіданні кафедри

Протокол №____від “__”________2013р.

Практичне заняття

Заняття № 16. Використання графіки в HTML документах.

Мета роботи: придбати практичні навички роботи з тегом вставки зображень та засвоїти можливості його використання.

Завдання:

1. Вивчити теоретичний матеріал.

2. Доповнити сторінки, що були розроблені на попередніх практичних заняттях графічними зображеннями.

3. Результати роботи оформити у вигляді звіту.

4. Підготуватись зо захисту роботи.

Теоретичні відомості

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

Графіка, яка застосовується на web-сторінках має свої певні обмеження. В Web застосовується два основні формати файлів – GIF і JPG.

Формат GIF

• Підтримує не більш 256 кольорів;

• Використовує палітру кольорів;

• Використовує стиснення без втрати інформації з методу LZW (аналогічно до застосування в архіваторі PKZIP, отже, Gif-Файли практично не стискаються);

• Є потоковим форматом, тобто показ картинки починається під час перекачування;

• Дозволяє призначити одному з кольорів у палітрі атрибут прозорий, що застосовується при створенні так званих прозорих Gifов;

• Має можливість збереження в одному файлі декількох зображень, що знаходить своє застосування при створенні анімованих Gifов;

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

Так як GIF підтримує не більше 256 кольорів, то всі зображення, які ми зберігаємо в Gif-Форматі, явно або неявно зменшують кількість кольорів, щоб укластися в цей ліміт. Якщо у Вас фотографія із плавними переходами й ледь уловимими відтінками кольору, то після перетворення відтінки перестануть бути невловимими, і вся фотографія придбає неприродний, нереалістичний вид. Тому, якщо Ви прагнете все-таки зберегти фотографію у форматі GIF і передати всі відтінки, то до фотографії можна застосувати який-небудь художній фільтр і перетворити її в малюнок або застосувати тонування.

Формат JPEG. Даний формат:

• Дозволяє зберігати повнобарвні зображення з кількістю кольорів 16,7 млн. (або 24bpp), причому, якщо в малюнку менше кольорів, то перед збереженням файлу він однаково перетвориться в повнобарвне зображення;

• Використовує стиск із втратами інформації, за рахунок чого досягає великих ступенів стиску файлів;

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

Основне призначення JPG – зберігання зображень фотографічної якості.

Незважаючи на те, що ми зберігаємо зображення в Gif-Файлі з підтримкою 256 кольорів або в Jpg-Файлі з 16,7 млн. кольорів, працювати із зображенням потрібно в якому-небудь проміжному форматі, який дозволяє зберігати картинку без викривлень і без втрати глибини кольору (наприклад, TIFF). Справа в тому, що в процесі роботи Вам знадобиться багаторазово змінювати або спотворювати зображення, що приводить до багаторазового перезапису файлу. Багаторазовий запис у форматі GIF приведе до того, що загубляться відтінки зображення, а у форматі JPG – кожний новий перезапис файлу буде вносити нові викривлення, і через якийсь час фотографія буде виглядати жахливо. Тому всю роботу з обробки графіки робіть у проміжному форматі і тільки на самому останньому етапі перетворіть зображення в потрібний формат.

Оптимізація графіки. Для web-сторінок дуже важливим є питання розміру фотографії. Найперший етап оптимізації – виділення у фотографії головного (з відкиданням усього іншого) і акцентування на ілюстрованому елементі. Це досягається за допомогою операції кадрування й знаходження найбільш виразної частини, що передає зміст фотографії. Після цієї операції вже можна оптимізувати зображення, в цьому випадку воно буде мати найменший розмір. З розмірами фотографій потрібно дотримуватися певного компромісу – не робіть їх занадто дрібними і не робіть їх занадто величезними. Є виключення: правильно оптимізована велика фотографія може забирати час пересилання, еквівалентне часу пересилання звичайної фотографії й, навпаки, погано оптимізований маленький малюнок буде вантажитися дуже довго. Під звичайною фотографією розуміють фотографію розміром приблизно 250x300 пікселів, що займає приблизно 6-10 кілобайт. Це не значить, що всі Ваші фотографії повинні мати такі розміри, але площа фотографії повинна бути їй еквівалентна.

Послідовність виконання роботи:

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