Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

Вставлення зображень на веб-сторінку



Розміщення і вирівнювання зображень

На веб-сторінках

Ілюстрації відіграють важливу роль в оформленні веб-сторінок: їх використовують як тіло, виводять на екран як окремо від тексту, так і разом із ним. Малюнки зберігаються в окремих файлах поза HTML-документами, але відображаються браузером всередині веб-сторінки.

Створення тіла веб-сторінки

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

Для формування тіла у вигляді малюнка у тегу <BODY> використовують атрибут BACKGROUND, значенням якого є URL-адреса файлу зображення. Наприклад, тег <BODY BACKGROUND="1. jpg"> визначає, що для фонового заповнення веб-сторінки буде використано файл 1.jpg.

Далі наведено приклад HTML-коду сторінки, в якої тіло оформлене у вигляді малюнка, що міститься у файлі mone.jpg.

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY BACKGROUND="mone.jpg">

<H1><A HREF="l.html">Наша продукція</АХ/Н1>

<H1><A HREF="2.html">Наші замовники</АХ/Н1>

</BODY>

</HTML>

інший приклад,

задавши в атрибуті BACKGROUND зображення невеликого розміру gorobci.jpg, яке у вигляді мозаїки заповнить екран.

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY BACKGROUND="gorobci.jpg">

</BODY>

</HTML>

У цьому прикладі на веб-сторінці немає тексту, однак на практиці так не буває. З огляду на це тіло рідко роблять у вигляді фотографій, оскільки для них непросто підібрати відповідний колір тексту.

Можливість відповідної обробки зображень для перетворення їх на фонові забезпечують багато графічних редакторів, зокрема популярний Adobe PhotoShop. Відкривши у ньому потрібний файл (командою File • Open (Файл • Відкрити)), слід вибрати команду Image • Adjustments • Hue/Saturation (Зображення • Параметри • Тон/ Насиченість) і за допомогою шкали Lightness (Освітленість) освітлити малюнок тла.

Але найчастіше підбирають рисунок, який нагадує шпалери, адже текст на тілі має виділятись і легко читатись, тобто привертати увагу відвідувача сайту.

ВправаУ програмі Adobe PhotoShop створимо і відредагуємо малюнок, призначений для заповнення тла веб-сторінки.

1. Відкрийте вікно програми. Простежте, щоб палітри Tools(Інструменти) і Swatches (Зразки) відображалися на екрані. Якщо це не так, виберіть назви цих палітр у меню Window(Вікно).

2. Створіть новий файл за допомогою коман и FileNew(Файл • Новий). У діалоговому вікні, що відкриється, задайте такі параметри зображення: Width(Ширина) — 150пікселів. Height

(Висота) — 100пікселів, IVIode(Режим) — RGB Color.

3.За допомогою інструмента Paint Bucket(Заливка) на палітрі кольорів Swatches(Зразки) виберіть бажаний колір і зафарбуйте зображення, клацнувши всередині нього.

4. Виконайте команду меню Filter > Texture > Texturizer(Фільтр • Текстура • Текстуризатор). У діалоговому вікні, що відкриється, виберіть зі списку Texture(Текстура) значення Canvas (Полотно) і настройте параметри Scaling(Шкала), Relief(Рельєф) та Light Direction(Напрям освітлення) Для корекції отриманого малюнка (надання йому блідого тону) можна скористатися командою Image • Adjustments > Hue/Saturation(Зображення • Параметри • Тон/Насиченість) і настроїти освітленість за допомогою шкали Lightness(Освітленість), як це описано раніше.

5. Збережіть цей малюнок у файлі з іменем 1.jpg,розмістивши його у папці з веб-сторінками. Закрийте програму Adobe PhotoShop.

6. Створіть HTML-документ, в якому за допомогою атрибута BACKGR0UND="1. j p g " тегу <BODY> оформіть тло сторінки.

<HTML>

<ТІТLЕ>Моя фірма</ТІТLЕ>

<BODY BACKGR0UND="1.jpg">

<Н1><А HREF="l.html">Наша продукція</А></Н1>

<H1><A HREF="2.html">Haші замовники</А></Н1>

</BODY>

</HTML>

Вставлення зображень на веб-сторінку

Для розміщення малюнків у HTML-документі використовують одинарний тег <IMG>. Він має обов'язковий атрибут SRC, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного каталогу;

при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (. . /)). Під час відкривання документа браузер завантажує малюнок і відображає його в тому місці документа, де розташований тег <IMG>. Графічний об'єкт буде показаний на веб-сторінці у своїх реальних розмірах. Якщо є потреба у їх зміні (масштабуванні об'єкта), нові розміри можна задати за допомогою атрибутів WIDT та HEIGHT, значення яких визначають відповідно ширину та висоту зображення в пікселах. При цьому необхідно зберегти пропорції малюнка, інакше він матиме вигляд розтягнутого або сплюснутого.

Слід також пам'ятати, що іноді користувачі відключають відображення графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього використовують альтернативний текст — більш-менш докладний опис зображення, який задають у тегу <IMG> як значення спеціального атрибута ALT. Якщо браузер не може показати малюнок, він замість нього виводить цей текст.

Розглянемо HTML-документ, в якому використаємо малюнок flamingo. jpg, де зображено фламінго. У тегу <IMG> задамо атрибути

WIDTH,HEIGHT та ALT.

<HTML>

<TITLE>Малюнок</TITLE>

<ВООУ BACKGROUND="flamingo.jpg">

<IMG SRC="2.jpg" WIDTH=300 HEIGHT=200 ALT="Фламінго">

</BODY>

</HTML>

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

 




Поиск по сайту:

©2015-2020 studopedya.ru Все права принадлежат авторам размещенных материалов.