Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

WEB - дизайн / Лабораторные работы / Лабораторная работа №8 / Лабораторна робота №8 Оформление

.doc
Скачиваний:
0
Добавлен:
30.05.2020
Размер:
5.38 Mб
Скачать

Лабораторна робота № 8

Тема: «Графіка на веб-сторінці».

Мета роботи: отримати навики по розміщенню графіки на веб-сторінках,

створенню карт зображень

Хід роботи

Приклад №1

Приклад №2

Приклад №3

Приклад №4

ЗАВДАННЯ

  1. Створіть веб-сторінку з розміщенням 6 зображень шириною 92 і висотою 114

пікселів кожне в таблиці.

  1. Створіть веб-сторінку, що містить 4 зображення різного розміру, джерелом

яких є один і той же файл. Необхідно передбачити пропорції зображення.

Зображення розташувати один від одного на відстань двох нерозривних

пропусків.

  1. Створіть веб-сторінку, що містить зображення-карту. Зображення-карта

повинна містити наступні області: «системний блок», «монітор», «клавіатура»,

«акустика». Наприклад, при наведенні користувачем покажчика миші на

системний блок повинна з'являтися спливаюча підказка «системний блок», а

після клацання мишею по області «системний блок» здійснюватися перехід на

веб-сторінку з інформацією про системний блок.

«системний блок»

«монітор»

«клавіатура»

«акустика»

Висновок: на лабораторній роботі я отримав навики по розміщенню графіки на веб-сторінках та створенню карт зображень

КОНТРОЛЬНІ ПИТАННЯ

  1. Який тег дозволяє розміщувати графіку на веб-сторінці?

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

Для вставки зображення в текст HTML-документа використовується елемент

IMG.

  1. Що таке атрибут? Який атрибут управляє місцеположенням зображення на

сторінці? Які значення він може приймати?

Атрибути тега <IMG>:

o Src — задає URI зображення;

o Alt — альтернативний текст, який відображається на місці зображення, якщо по

яких-небудь причинах само зображення не може бути показане;

o Border — задає товщину межі навколо малюнка в пікселах;

o Align — визначає вирівнювання зображення;

o Height — задає висоту зображення в пікселах;

o Width — визначає ширину зображення в пікселах;

o Vspace — задає величину вільного простору між зображенням і текстом зверху і

знизу

o Hspace — визначає величину вільного простору між зображенням і текстом

справа і зліва;

o Name дозволяє ідентифікувати зображення так, що на нього можуть посилатися

різні сценарії.