Урок "Графіка для веб-середовища"

Тема уроку: Графіка для веб-середовища

Мета уроку:

Навчальна. Сформувати знання учнів щодо графіки для веб-середовища; сформувати в учнів поняття про типи графічних файлів для веб-середовища; формувати науковий світогляд та діалектичне мислення.

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

Виховна. Виховувати уважність, зібраність, спостережливість.

Тип уроку: Урок засвоєння нових знань.

Хід уроку

І. ОРГАНІЗАЦІЙНИЙ ЕТАП

II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ ТА ВМІНЬ

Дайте відповідь на запитання:

1) Що таке кросбраузерність?

2) Які браузери ви знаєте?

3) Яким чином досягається кросбраузерність сайта?

4) Що таке CMS? Назвіть функції систем керування вмістом.

5) Що таке шаблон сторінки?

6) Що таке адміністрування сайту?

7) На які види поділяється робота з адміністрування сайту?

IІІ. ВИВЧЕННЯ НОВОГО МАТЕРІАЛУ

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

Загалом у веб-дизайні використовують чотири основні формати графічних файлів.

1) Формат JPEG (Joint Photographic Experts Group), або JPG, - це 16-бітовий формат растрових зображень, популярний для зберігання цифрових фотографій, які мають дрібні деталі та яскраві кольори. Завдяки тому, що зображення у форматі JPEG швидко завантажуються, його вибирає більшість веб-дизайнерів для своїх сайтів. Проте JPEG не підтримує прозорість, і його не має сенсу використовувати для логотипів і піктограм.

2) Формат GIF (Graphic Interchange Format) - це формат, обмежений 256 кольорами, дуже ефективний для зберігання логотипів, піктограм, таблиць. Проте GIF абсолютно не підходить для цифрових фотографій із тисячами відтінків. На відміну від формату JPG, він підтримує прозорість зображення та дозволяє створювати різноманітну анімацію.

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

4). Формат SVG (Scalable Vector Graphics) - найбільш поширений векторний формат, попит на який збільшується завдяки адаптивному дизайну у веб-розробці. Геометрична природа файлів SVG дозволяє легко адаптувати векторну графіку до потрібних параметрів. Розмір файла залежить від його складності, так, для простих зображень SVG-файл матиме менший розмір, ніж будь-який растровий аналог (JPEG, PNG). Формат ідеально підходить для зберігання значків, логотипів, діаграм. Серед його переваг - швидкість завантаження, чудове відображення на highDPI дисплеях, гнучкість і масштабованість тощо.

Елемент <img> є стандартним тегом для додавання графічних елементів на веб-сторінку. Цей тег вставляє зображення на сторінку в тому місці, де воно має з’явитися. Тег <img> є непарним тегом. Обов’язковим атрибутом є src (англ. source - джерело), який містить шлях до зображення. Зазвичай зазначається або URL-адреса, або відносна адреса щодо місця розташування веб-сторінки, яка містить посилання на зображення. Для додавання зображень слід використовувати тег <IMG>, всередині якого обов’язково записується атрибут SRC, що вміщує адресу зображення.

Формат запису: <IMG SRC=адреса зображення>.

Вирівнювання зображень задається параметром ALIGN тегу <IMG>:

Розміри зображення задаються параметрами WIDTH (ширина) та HEIGHT (висота) тегу <IMG> в пікселях або відсотках. Формат запису: <IMG SRC=адреса зображення WIDTH=число HEIGHT=число> або <IMG SRC=адреса зображення WIDTH=число%  HEIGHT=число%>.

Відділення зображення від тексту задається параметрами HSPACE (відступ по горизонталі) та VSPASE (відступ по вертикалі)тегу <IMG> в пікселях. Формат запису: <IMG SRC=адреса зображення HSPACE =число VSPASE = число>.

Зображення можна помістити в рамку різної товщини, яка задається параметром BORDER тегу <IMG> в пікселях. Формат запису: <IMG SRC=адреса зображення  BORDER =число>.

Альтернативний текст до зображення визначає параметр ALT тегу <IMG>. Формат запису:  <IMG SRC=адреса зображення  ALT=”пояснюючий текст”>.

Приклади кодів розміщення фото на сайтах:

<img src="/uploads/files/3452838/333695/374962_html/images/02.jpg" alt="Розміри зображення не вказані">

<img src="/uploads/files/3452838/333695/374962_html/images/02.jpg" alt="Вказана ширина зображення" width="600">

<img src="/uploads/files/3452838/333695/374962_html/images/02.jpg" alt="Вказані ширина та висота зображення" width="500" height="500">

Параметр border дозволяє створити рамку для зображення. Причому можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів: border-width; border-color; border-style. Додатково можна налаштовувати ці властивості для кожної сторони: top (верхня), left (ліва), right (права), bottom (нижня).

Наприклад, у CSS файлі вкористовують ще такі параметри:

а) border-left-width, border-bottom-color, border-rightstyle. padding - внутрішні відступи між зображенням та рамкою;

б) margin - задає відступи від зображення від усіх чотирьох краї.

Можна задавати відступ від конкретного краю. Наприклад, margin-top - відступ від верхньої сторони; margin-right - відступ від правого боку; margin-bottom - відступ від нижньої сторони; margin-left - відступ від лівого боку. Аналогічно можна задавати внутрішні відступи: padding-top, padding-left, padding-right, padding-bottom.

ІV. ЗАКРІПЛЕННЯ НОВИХ ЗНАНЬ І ВМІНЬ

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

Результат надішліть на електронну пошту вчителю.

V. ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Бесіда за питаннями:

1) Які графічні формати та якими командами мови розмітки відображаються?

2) Що таке скрін-рідер? Для чого він призначений?

3) Які обов’язкові атрибути має тег для відображення графічних об’єктів на веб-сторінці?

4) Які стилі використовують для відображення графічного об'єкта на веб-сторінці?

5) Обґрунтуйте використання атрибутів ширини та висоти зображення.

6) Який вид комп'ютерної графіки краще використовувати для фотографій?

VI. Домашнє завдання

Опрацювати § 11.12 (сторінки 186-189) підручника Інформатика для 11 класу (автори Руденко В. Д, Речич Н. В., Потієнко В. О.)

Список використаної літератури для складання уроку:

1. Пасічник О.Г. Основи веб-дизайну: [пос.] / О.Г. Пасічник, О.В. Пасічник, І.В. Стеценко. - К.: BHV, 2009. - 333 с.

2. Руденко В. Д. Інформатика (профільний рівень): підруч. для 11 кл. закл. загал. серед. освіти / В. Д. Руденко, Н. В. Речич, В. О. Потієнко. - Харків: Вид-во «Ранок», 2019. - 256 c. : іл.

3. Слюсаренко В. В. Інтернет-технології та веб-дизайн: Навчально-методичний посібник. - Кропивницький: Видавництво ТОВ «КОД», 2018. - 104 с.

4. Томашевський О.М. Інформаційні технології та моделювання бізнеспроцесів: [навч. посіб.] / О.М. Томашевський, Г.Г. Цегелик, М.Б. Вітер, В.І. Дубук. - К.: Центр учб. л-ри, 2012. - 296 с.