Урок 20

Ніколи не соромся запитувати про те, чого не знаєш.

Арабське прислів’я

Практична робота

«Розміщення графічних об’єктів на веб-сторінці»

Мета.

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

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

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку. Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

Основи створення комп’ютерних презентацій: Навч. посіб. / О.М. Левченко, І.В. Коваль, І.О.Завадський. - К.: Вид. група BHV, 2009. - 368.

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

Редактор сайтів Weebly

Редактор сайтів Ucoz

Редактор сайтів Narod.ru

Редактор сайтів GoogleSites

План

Організація початку уроку.
Актуалізація опорних знань.
Правила ТБ при роботі в кабінеті Інформатики.
Практична робота.
Запитання до уроку.
Домашнє завдання.

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

4. Практична робота «Розміщення графічних об’єктів на веб-сторінці»

!!! Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.!!!

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

Завдання

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

Візьміть за зразок сайт «Домашні улюбленці». Для роботи використайте текстове і графічне наповнення веб-сайту

Порядок роботи

Створіть папку site_home_pets та розмістіть у ній файли малюнків про тварин.(рис. 3.21)

Збережіть у папці site_home_pets зображення, показані на рис. 3.22, які будуть використані як гіперпосилання навігаційної панелі.

Відкрийте програму Adobe PhotoShop і створіть п'ять зображень тла — для сторінки навігаційної панелі та кожної сторінки розділу (рис. 3.23). Збережіть їх у файлах із відповідними іменами.

t1.jpg

t2.jpg

t3.jpg

t4.jpg

t5.jpg

За допомогою програми Гифовина на основі малюнка.jpg створіть зображення 41.jpg та 42.jpg, подібні до наведених на рис. 3.24. Вони будуть використовуватися для анімації.

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

Створіть GIF-анімацію на основі малюнків 41.jpg, 42.jpg, 43.jpg. Збережіть її у файлі 4.gif.
Створіть HTML-документи для сторінок про папужку (richi. html), кролика (bonya.html), амадінів (amadiny.html) та рибку (frosya.html).

Файл richi.html:

<HTML>

<TITLE>Папужка</TITLE>

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

і має друзів серед інших пташок.

</BODY>

</HTML>

Файл bonya.html:

<HTML>

<TITLE>Кролик</TITLE>

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

</BODY>

</HTML>

Файл amadiny.html:

<HTML>

<TITLE>Амадіни</TITLE>

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

</BODY>

</HTML>

Файл frosya.html:

<HTML>

<TITLE>Рибка</TITLE>

У цьому куточку природи/акваріумі дуже часто змінюються мешканці. Але зараз у ньому живе 4 рибки, найголовніша серед них — рибка Фрося.

<Р>Подивіться, як вона плаває:

</BODY>

</HTML>

Для кожної веб-сторінки у тегу <BODY> за допомогою атрибута BACKGROUND задано своє зображення тла. На сторінці про рибку Фросю розміщена GIF-анімація.

Створіть файл np.html для навігаційної панелі, в якій малюнки будуть гіперпосиланнями.

<HTML>

<TITLE>Звірята</TITLE>

<А HREF="richi.html" TARGET="framel"><IMG SRC="1.jpg"> </A>

</A>

</BODY>

</HTML>

У тегу <A> використаний атрибут TARGET, значенням якого є ім'я фрейму, в якому відображатимуться сторінки сайту.

Створіть головну сторінку index.html, поділену на два фрейми. Після першого завантаження цієї сторінки відвідувач побачить зображення-гіперпосилання у лівому фреймі, а правий буде порожнім доти, доки він не вибере певне посилання. <HTML>

<TITLE>Домашні улюбленці</TITLE>

< FRAME NAME ="framel">

</FRAMESET>

</HTML>

3a бажанням для першого завантаження у правий фрейм можна помістити спеціально створену для цього веб-сторінку.

Відкрийте у вікні браузера файл index.html і перевірте, як діють гіперпосилання. На рис. 3.25 показано головну сторінку сайту «Домашні улюбленці», коли вибрано посилання на сторінку про кролика.

5. Підбиття підсумків уроку

Оцінювання робіт учнів.

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

Повторити теоретичний матеріал.
Підготуватися до тестування.

Тест

1. Зробити малюнок тлом веб-сторінки можна за допомогою тегу:

а) <BODY BACKGROUND="URL-aдpeca графічного файлу">;

б) <IMG SRC=”URL-адреса графічного файлу">;

в) <BODY IMG SRC=”URL-адреса графічного файлу">;

г) <IMG BACKGROUND="URL-anpeca графічного файлу">;

д) <BODY BGCOLOR="URL-aдрeсa графічного файлу">.

2. Розмістити на веб-сторінці малюнок можна за допомогою тегу:

а) <BODY BACKGROUND="URL-aдрeсa графічного файлу">;

б) <IMG SRC="URL-aдрeсa графічного файлу">;

в) <BODY IMG SRC="URL-aдрeсa графічного файлу">;

г) <BODY BGCOLOR="URL-aдрeсa графічного файлу">;

д) <IMG BACKGROUND="URL-aдрeсa графічного файлу">.

URL-адресу файлу зображення задають за допомогою атрибута:

а) SRC;

б) HREF;

в) IMG;

г) BACKGROUND;

Д) BODY.

Висоту та ширину графічного об'єкта, розміщеного на веб-сторінці, можна задати:

а) у дужках після URL-адреси файлу зображення;

б) за допомогою атрибутів WIDTH та HEIGHT у тегу IMG;

в) за допомогою атрибута ALT;

г) за допомогою атрибута SRC;

д) за допомогою атрибутів WIDTH та HEIGHT у тегу BODY.

Малюнок 1.jpg можна перетворити на гіперпосилання на веб-сторінку 1.html за допомогою коду:

а) <А HREF="1.html"><IMG SRC = "1.jpg"></A>;

б) <А HREF="1.jpg"><IMG SRC = "1.html"></A>;

в) <A HREF="1.jpg"><IMG SRC="1.html" NAME="1.jpg"></A>;

г) <A HREF="1.jpg"><IMG SRC="1.jpg" NAME="1.html"></A>;

д) <A HREF="1.jpg"><IMG NAME="1.html"></A>,

Графічна карта посилань — це:

а) зображення карти певної місцевості на веб-сторінці;

б) схема розміщення всіх гіперпосилань на сторінках вебсайту;

в) велике зображення, повністю поділене на області-гіперпосилання;

г) веб-сторінка, поділена на комірки певної конфігурації;

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

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

а) задає URL-адресу зображення для використання його як карти посилань;

б) визначає ім'я карти посилань;

в) задає адресу для гіперпосилання, пов'язаного з областю карти;

г) визначає тип області карти гіперпосилань;

д) має збігатися зі значенням атрибута NAME у тегу <МАР>.

Гарячі області карти посилань — це:

а) ділянки визначеної форми у зображенні карти, що є гіперпосиланнями;

б) веб-сторінки, пов'язані з картою гіперпосилань;

в) пояснювальний текст під картою посилань;

г) частини малюнка, пов'язані з іншими веб-сторінками;

д) назви інших веб-сторінок, що пов'язані з картою гіперпо- силань.

Атрибутами тегу <AREA> є:

а) HREF, SHAPE, COORDS;

б) RECT, POLYGONE, CIRCLE;

в ) USEMAP , NAME;

г) SHAPE, RECT, POLYGONE, CIRCLE;

д) HREF, USEMAP, NAME.