інформатіка

Дата: 19.01.2021 12:07

Кількість переглядів: 118

Створення елементів для веб-сторінок.

Графічні елементи оформлення веб-сторінок

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

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

Звичайно, можна багато чого досягти, використовуючи стильове оформлення сторінки за допомогою каскадних таблиць стилів. Проте є ще один спосіб “пожвавити” веб-сторінку. Він полягає у використанні невеликого числа дрібних графічних елементів як елементи оформлення. Звернете увагу на те, що ці елементи повинні бути дрібними. Це важливо по двох причинах: по-перше, вони не відволікають на себе увагу, а тільки надають веб-сторінці кращого зовнішнього вигляду, і по-друге, малі за розміром малюнки завантажуються з Мережі досить швидко.

Лінійки і буквиця

Які ж графічні елементи можливо застосовувати як таку «прикрасу»? Тут треба проявити фантазію. Якщо ви придумаєте що-небудь оригінальне, ваша веб-сторінка виглядатиме незвично, «не як інші», і запам'ятається відвідувачеві.

Традиційні варіанти застосування графіки:

графічні роздільники
кнопки
маркери списків
буквиці.

Різні графічні роздільники, зазвичай горизонтальні, вживані замість горизонтальної межі (<HR>). Хоча тег <HR> і піддається налаштуванню, графічний роздільник часто виглядає кращим.

Застосування графічних елементів оформлення - різні кнопки і маркери списків.

Можна також застосувати графічний елемент як буквицю. Взагалі-то, незабаром підтримка буквиці передбачається і в HTML, але ця буквиця виконана об'ємною, з тінню і навіть як би з віддзеркаленням світла (хоча палітра цього GIF-файлу для зменшення розміру містить всього 16 пікселів). Неважко здогадатися, яким чином вона вставлена в текст:

<IMG SRC="bukv.gif" WIDTH="52" HEIGHT="61" BORDER="0" ALIGN="LEFT" АLТ="Д"> <i>авним-давно жив-був на білому світі цар Горох. І були у нього поля горохові, і ліси горохові, і...</i>

Установка атрибуту ALIGN="left" забезпечує обтікання текстом малюнка (буквиця). Про всяк випадок як альтернативний текст дається буква “Д”, щоб користувачеві з відключеною графікою не доводилося будувати здогадки щодо першої букви.

Для завершення оформлення можна ще створити градієнтний фон . Не забувайте тільки обов'язково вказувати значення атрибуту ALT= у всіх тегах <IMG>.

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

Графічні маркери

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

Маркером може бути все що завгодно - від просто кольорових і трохи опуклих кружків і квадратів до витончених мініатюрних художніх робіт. Проте пам’ятайте, що саме мініатюрних, маркери списків мають за розміром якось відповідати висоті текстового рядка. Прагніть створювати подібні зображення відразу у натуральну величину.

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

Приклад коду:

<h1>Пори року

<li>Весна</li>

<li>Осінь</li>

</ul></h1>

Оформлення кнопок

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

Навчимося створювати кнопки і використовувати в них елементи графіки.

Щоб створити кнопку, досить помістити деякий текст між тегамі <BUTTON> і </BUTTON>, наприклад, от так:

<BUTTON>Це моя кнопка</BUTTON>

Правда, при натисненні на цій кнопці поки що нічого не відбудеться. Проте кнопка буде цілком повноцінною і навіть «вдавлюватиметься» при натисненні.

Між тегами <BUTTON>...</BUTTON> можна помістити не тільки текст, а все, що завгодно. Якщо ми помістимо туди тег <IMG>, то отримаємо кнопку з графічним зображенням. Можна помістити на кнопку і текст, і зображення (тільки не треба забувати про форматування - наприклад, треба вставляти теги <BR> для перенесення рядків і т. д.). Нарешті, можна помістити на кнопку взагалі будь-який блок НТМL.

Наприклад:

<TITLE>KHOПKИ</TITLE>

<STYLE>TD {color: white;} </STYLE>

</HEAD> <BODY>

<BUTTON>ЦЕ - ПРОСТО КНОПКА</BUTTON><br><br>

<BUTTON>Internet Explorer<BR><IMG SRC="123.png" WIDTH="62" HEIGHT="61" BORDER="0"><BR> 4.0 </BUTTON><br><br>

<BUTTON><H1> А це - велика кнопка</Н1>

<TR>

<TD ALIGN="center" BGCOLOR-"#400040">Вона містить</ТD>

<TD ALIGN="center">цілу таблицю</ТR> </TR> <TR>

<TD ALIGN="center">з різнокольоровими</ТD>

<TD ALIGN="center" BGCOLOR="#400040">клітинками</TD> </TR>

</TABLE>

<BR>І горизонтальну пряму<HR WIDTH="150" SIZE="10" COLOR="red"> </BUTTON> </BODY></HTML>

Створена кнопка з конвертом цілком підійде для відсилання повідомлення електронної пошти

<TITLE>KHOПKИ</TITLE>

<STYLE>

TD {color: white;} </STYLE>

</HEAD> <BODY>

<BUTTON>Пишіть мені<br><img SRC="конверт.png" BORDER="0" WIDTH="57" height="57" ALT=""></BUTTON>

</BODY></HTML>

Залишилося тільки додати посилання на поштову скриньку.

Підготовка малюнків в програмі Adobe Photoshop

Розглянемо деякі прийоми підготовки зображень в графічному редакторі Adobe Photoshop, що найчастіше зустрічаються при підготовці зображень для веб-сторінок.

Приклад 1. Створення градієнтного фону

У програмі Adobe Photoshop виберемо з меню Файл (File) пункт Новий (New). З'явиться діалогове вікно створення нового файлу. В ньому нас більше зараз цікавить завдання розміру майбутнього зображення, його ширини і висоти. У списках, що розкриваються, слід вибрати одиниці вимірювання - пікселі, оскільки нас цікавить саме екранний розмір зображення.

За умовчанням на веб-сторінках фоновий малюнок повторюється по вертикалі і горизонталі. Оскільки наш градієнтний перелив буде горизонтальним, ми можемо вказати будь-який вертикальний розмір: чим менше - тим краще. Менше буде розмір малюнка - фон швидше завантажуватиметься з Інтернету. Візьмемо, наприклад, 2 пікселі. Розмір по горизонталі повинен бути таким, щоб зайняти всю ширину екрану, інакше на веб-сторінці малюнок повториться по горизонталі, що не дуже красиво.

Рідко хто дивиться веб-сторінки в розширенні, більшому, ніж 1024х768, тому для більшості випадків розміру 1024 точки по горизонталі буде достатньо.

Отже, визначаємо ширину малюнка: 1024 і висоту: 2 піксела. Решта параметрів нам зараз не важливі. Після клацання на кнопці ОК відкриється вікно малюнка. Щоб краще бачити результати своїх дій, бажано збільшити масштаб зображення, натиснувши кілька разів комбінацію клавіш CTRL++.

Тепер треба вибрати кольори для створюваного градієнта, наприклад, зелений і ясно-зелений. Для вибору першого кольору двічі клацніть на значку Основний колір (Foreground Color) - відкриється вікно вибору кольору (Color Picker), в якому можна візуально вибрати необхідний колір. Для вибору другого (кінцевого) кольору градієнта двічі клацніть на значку Колір фону (Background Color).

Вибравши кольори, можна визначити характер градієнта. Для цього виберіть інструмент Градієнт (Linear Gradient Tool) на Панелі інструментів. Далі, утримуючи в натиснутому положенні клавішу SHIFT, проведіть лінію від лівого краю малюнка до приблизно 200-ої зліва крапки. Коли кнопка миші буде відпущена, ви побачите градієнтну заливку. Залишилося тільки зберегти малюнок, у вікні збереження вам буде запропоновано безліч форматів, з яких слід вибрати формат JPEG. Далі потрібно вибрати якість стиснення за десятибальною шкалою. В даному випадку для прийнятного результату досить вибрати значення 3 або 4.

І ще декілька зауважень з приводу першого прикладу. По-перше, вибраний нами розмір 1024 пікселі по горизонталі явно надмірний, адже намальований нами градієнтний перелив закінчується вже на 200-ому пікселі. Якщо ви використовуєте каскадні таблиці стилів (CSS) на веб-сторінці, у вас буде можливість НЕ повторювати фоновий малюнок по горизонталі. Тоді можна спокійно створити малюнок шириною 200 крапок і запам'ятати кінцевий колір градієнта (зрозуміло, не на око, а в цифровому виражені - у вікні вибору кольору відображаються значення R, G, В, тобто красного, зеленого і синього складових). А потім крім фонового малюнка визначити на веб-сторінці колір фону, співпадаючий з кінцевим кольором градієнта. Далі можна таким же способом призначити вертикальний градієнт, проте робити це слід тільки якщо використовуються каскадні таблиці стилів CSS, оскільки лише в цьому випадку можна не повторювати фоновий малюнок по вертикалі.

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

Звичайно, не забути додати до коду веб-сторінки вказівку про підключення вашого фону

Приклад 2. Підготовка круглої фотографії

У нас є звичайна фотографія.

На панелі інструментів виберіть інструмент простого виділення (Rectangular Marquee Tool). Натисніть і утримуйте на його значку ліву кнопку миші, поки не з'явиться невелике меню з декількох подібних значків. Ці інструменти називаються альтернативними. Виберіть з набору альтернативних інструментів інструмент круглого або овального виділення (Elliptical Marquee Tool). Виділіть на малюнку потрібну частину, а потім натисніть комбінацію клавіш SHIFT+CTRL+І або виберіть в меню Виділити (Select) пункт Inverse. При цьому на малюнку буде виділено все, крім обведеної області. Потім в меню Правка (Edit) виберіть пункт Очистити (Clear). Не забудьте зняти виділення (Ctrl+D). Збережіть утворене зображення.

Накладання зображень

За допомогою програми Adobe Photoshop можна робити і цікавіші маніпуляції - колажування. Накладання зображень є основою для створення колажів для веб-сторінки. Роботою зі створення колажу ми займалися на попередніх уроках.

Завдання для самостійного опрацювання у Photoshop