 |
|
 |
Siteua.info - створи собі сайт безкоштовно! |
|
||||
|
|
|||||||
|
|
|
3. Графіка на веб-сторінці
3.1. Основні способи застосування графіки
У попередньому розділі ми розглянули декілька прикладів створення веб-сторінок. Ви, очевидно, вже звернули увагу, що всі вони виглядають досить “строго”. А вся річ у тому, що в них не використовувалися графічні елементи. Зараз, взагалі кажучи, в Інтернеті залишилися не так багато сторінок без графічних елементів, оскільки за допомогою графіки можна не тільки проілюструвати пропонований матеріал, але і небагато “пожвавити” загальне оформлення, про що мова піде в цьому розділі.
Фонове зображення
Отже, давайте розберемося, яким же чином можна використовувати графічні елементи на веб-сторінці. Розглянемо такий приклад. Допустимо, ми хочемо, щоб читачі дізналися достоїнства нашого коханого електронного піаніно - клавінови. Ми вже написали відповідний текст, але хочемо його оформити не дуже строго. І тут найпростішим рішенням буде розмістити цей текст не на одноколірному, а на тематичному фоні.
Допустимо, що у нас заготовлено відповідний фоно вий малюнок (про те, як це зробити, див. в розділі 3.5) - він записаний у файлі під ім'ям back1 .jpg (мал. 3.1). Якщо при окремому перегляді цього малюнка він вам подобається, це ще нічого не означає. Щоб визначити, чи підходить малюнок як фон до тексту, його потрібно перевірити “в справі”.
Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в теге <BODY> атрибут BACKGROUND= із значенням, що містить ім'я файлу малюнка.
<BODY BACKGROUND""Images/back1.jpg">
Якщо малюнок менше вікна броузера, то він повторюватиметься по горизонталі і по вертикалі. Це відбувається автоматично, і до недавнього часу це не можна було відмінити. Тепер же, якщо ви не хочете повторення
Мал. 3.1. Фоновий малюнок.
Можна вказати або відносне місцеположення файлу малюнка (тобто шлях доступу до нього відносне розташування початкового HTML-файлу), або його повну URL-адресу. Тут і далі ми припускаємо, що ви розмістили в тій же теці, що і HTML-файл, теку , у яку складаєте всі графічні файли.
Повернемося до нашого малюнка. Ясно, що на такому сіруватому фоні чорні букви читатимуться погано, тому відразу визначимо для тексту білий колір (або майже білий). Гіперпосилань у нас поки немає, але про них все одно треба поклопотатися заздалегідь. Поки давайте визначимо для них жовтий колір. Подивимося, що у нас виходить:
<HTML>
<HEAD>
<TITLE>Клавинова</TITLE>
</HEAD>
<BODY BACKGROUND="3.1.jpg" TEXT="#F8F8F8" LINK="Yellow" VLINK="Yellow" ALINK="Yellow">
<H1><DIV ALIGN="center">Клавинова</DIV></H1>
<P ALIGN="justify">
Инструменты серии
<BIG>Клавинова</BIG>
, выпускаемые компанией Yamaha, являются достойной заменой
<I>обычных</I>
пианино для массового пользователя. Во-первых,
<BIG>KJIABHHOBA</BIG>
стоит
<В>дешевле</В>
маломальски хорошего пианино или тем более рояля, а во-вторых, ее звук и исполнительские ощущения зачастую не хуже, а
<U>лучше</U>
, чем на «живых» инструментах того же (или даже чуть более
<SUP>высокого</SUP>)
ценового диапазона.
</Р> </BODY> </HTML>
Результат показаний на мал. 3.2. До речі, звернете увагу, що тут ми трохи “попрацювали” з елементами тексту, щоб трохи пожвавити їх: назва “клавінова” виділена крупним шрифтом, достоїнства - де підкреслені, де виділені напівжирним шрифтом, слово “звичайних” для підкреслення іронії виділене курсивом, а слово “високого” підняте над основним текстом за допомогою тега <SUP>.
Все це добре задумано, але вся сторіночка виглядає не дуже привабливо. По-перше, фон має яскраво виражену “клітинну структуру”. По-друге, текст читається не дуже добре: для його сприйняття доводиться напружувати зір, особливо при великих екранних дозволах.
Мал. 3.2. Не найвдаліше застосування фонового малюнка
Спробуємо вирішити ці проблеми. По-перше, трохи зменшимо розмір фонового малюнка, щоб залишити в нім тільки кольори приблизно одній яскравості. По-друге, оскільки текст білий, потрібно для улучше нія його читаності підвищити контрастність тексту з фоном. У будь-якому графічному редакторові знизимо яскравість нашого малюнка, що зробить його темніше.
Крім того, згідно загальному правилу, світлий текст на темному фоні краще завжди робити трохи більше. Тому укладемо наш текст в теги <BIG>...</BIG>.
Графічні ілюстрації
І, нарешті, проілюструємо наш текст, вставивши перед описом фотографію клавінови. Припустимо, що фотографія у нас вже готова і лежить в палиці під ім'ям clavi.gif. Вставити її в текст можна з помо щью тега <IMG>, наприклад, от так:
<IMG SRC="Images/clavi.gif">
В принципі, це вже достатньо - на місці цього запису броузер відобразить нашу картинку. Проте краще вказати в теге <IMG> ще декілька атрибутів.
По-перше, треба пам'ятати, що картинки завантажуються з мережі завжди набагато повільніше, ніж звичайний текст. Це я говорю не до того, що сам файл картинки повинен бути не дуже великого об'єму (це вірно, але це питання ми обговоримо окремо), а до того, що при такому записі, як вище, багато броузери, почавши завантажувати картинку, припинять завантаження подальшого тексту до тих пір, поки картинка не буде завантажена повністю. Але для читача було б зручніше, якби текст продовжував завантажуватися араллельно з картинкою: поки вона довантажується, можна було б щось вже читати. Щоб броузер міг це зробити, йому потрібно явно вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і HEIGHT=:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200">
Взагалі кажучи, за допомогою цих атрибутів можна задати які завгодно розміри картинки, “розтягнувши” або стиснувши її як душі завгодно. Проте зазвичай цього не роблять, і ось чому. Представляти картинку меншою, ніж вона є, недоцільно, оскільки навіщо тоді вантажити великий файл? Адже файли для картинок великого розміру мають великий розмір і вантажаться з Інтернету, відповідно, набагато довше. Краще вже зробити малень кий файл для картинки маленького розміру і швидко завантажити його. А якщо представити картинку більшою, ніж вона є, то, як правило, вона виглядатиме малопрівлекательно за рахунок появи “ступінчастості” як у формах, так і в кольорі.
Далі, хорошим тоном є наявність так званого альтернативного тексту для тих випадків, коли в броузере відключено проглядання графіки. Тоді на місці нашої картинки буде виведений прямокутник соответ ствующего розміру, який супроводжується поясненням, що за картинка на цьому місці повинна бути. Альтернативний текст вводиться як значення атрибуту ALT:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова">
Нарешті, навколо малюнка можна відобразити рамку. Товщина цієї рамки задається як значення атрибуту BORDER=. Якщо ми, як в даному випадку, не хочемо відображати рамку навколо малюнка, то можемо нічого і не указувати, оскільки більшість броузеров за умовчанням рамку не малюють. Але деякі броузери все ж таки це роблять, і “для вірності” непогано б вказати і відсутність рамки теж:
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0">
Чого ще не вистачає нашому HTML-файлу? Звичайно ж, гіперпосилань! Без них будь-який документ в Інтернеті сприймається набагато нудніше, оскільки відвідувач відразу бачить, що зайшов в безвихідь. Тому обов'язково додайте гіперпосилання скрізь, де це тільки можна. В даному випадку, наприклад, слово “Yamaha” просто проситься стати гіперпосиланням на сайт відповідної компанії. Зробимо це:
<A HREF="http://www.yamaha.com">Yamaha</A>
До речі, картинки теж можуть містити гіперпосилання. Ми можемо, напри заходів, точно так, як і із словом “Yamaha”, поступити і з нашим тегом картинки. Тоді клацання на зображенні клавінови також відведе користувача на сайт компанії Yamaha.
Давайте подивимося, що у нас виходить.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>KJIABHHOBA</TITLE>
</HEAD>
<BODY BACKGROUND="Images/back4.jpg" TEXT="#F8F8F8" LINK="Yellow" VLlNK="Yellow" ALINK="Yellow" BGCOLOR="#OBOBOB">
<H1><DIV ALIGN="center">KJIABHHOBA</DIV></Hl>
<DIV ALIGN="center">
<A HREF="http://www.yamaha.com">
<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" ALT="KJIABHHOBA" BORDER="0"></A></DIV>
<BIG>
<P ALIGN="justify">Инструменты серии
<BIG>KJIABMHOBA</BIG>
, выпускаемые компанией
<А HREF="http: //www.yamaha.com">Yamaha </A>
, являются достойной заменой
<I>обычных</I>
пианино для массового пользователя. Во-первых,
<ВIG>КЛАВИНОВА</ВIG>
стоит
<В>дешевле</В>
мало-мальски хорошего пианино или тем более рояля, а во-вторых, ее звук и исполнительские ощущения зачастую не хуже, а <U>лучше</U>, чем на &lаquо;живых» инструментах того же (или даже чуть более
<SUP>Bыcoкoro</SUP>
) ценового диапазона.
</Р>
</BIG>
</BODY>
</HTML>
Результат наших праць представлений на мал. 3.3. Звернете увагу на те, що для розташування картинки по центру ми поступили так само, як і при центруванні звичайного тексту - використовували конструкцію <DIV ALIGN="center">.
Текст тепер дійсно сприймається набагато краще. Правда, із-за використання слів різного розміру і тега <SUP> наші строчки вийшли різної висоти, що не дуже красиво. Проте поки не будемо цим займатися - гнучко управляти висотою рядків можна за допомогою каскадних таблиць стилів, про що піде мова в наступному розділі.
Ще слід відмітити, що ми не дарма визначили в нашому прикладі колір фону (за допомогою атрибуту BGCOLOR=). Адже якщо у користувача в броузере відключено завантаження графіки, то наш білий текст у нього відображатиметься на заданому за умовчанням білому фоні, і в результаті нічого не буде
Мал. 3.3. Приклад сторіночки з фоновим малюнком і ілюстрацією
видно! Та і взагалі, фоновий малюнок може завантажитися і промальовуватися не відразу, адже це графічний файл, що має набагато більші розміри, чим текст! Тому завжди незайве явно вказати потрібний колір фону, бажано близький по відтінку до фонового малюнка.
До речі, тег <IMG> може мати власний атрибут ALIGN=, який управляє розташуванням малюнка щодо тексту. У нашому прикладі це було не актуально, оскільки малюнок знаходився в окремому блоці <DIV> . Але якщо малюнок “вбудований” в текст, тобто декілька варіантів його розташування:
ALIGN="left" - текст обтікає малюнок, який розташовується зліва;
ALIGN="right" - текст обтікає малюнок, який розташовується справа;
ALIGN="top" - малюнок розташовується усередині текстового рядка, і його верхня межа співпадає з верхньою межею букв тексту (можна також застосовувати значення "texttop");
ALIGN="middle" - малюнок розташовується усередині текстового рядка, який вертикально вирівнюється по центру малюнка (можна також при міняти значення "absmiddle");
ALIGN="bottom" - малюнок розташовується усередині текстового рядка, і його нижня межа співпадає з нижньою межею букв тексту (можна також застосовувати значення "absbottom" або "baseline").
Крім того, щоб малюнок не дуже “притискався” до тексту, можна залишити між ними трохи “повітря”. Для цього в теге <IMG> використовують атрибути HSPACE= і VSРАСЕ=, значення яких задають відповідно горизонтальне і вертикальне “поля” малюнка.
І ще невелике зауваження: броузер Internet Explorer (версія 4
і вище) дозволяє за допомогою тега <IMG> завантажувати і проглядати також
відеофрагменти у форматі AVI (Video for Windows). Для цього можна встановити
атрибут DYNSRC=, як значення якого вказати ім'я AVT-файлу. При цьому можна
додатково вказати в атрибуті START=, коли слід починати програвання відео:
"FILEOPEN" - відразу після завантаження файлу або "MOUSEOVER" - після наведення
покажчика миші на зображення. Атрибут LOOP= дозволяє встановити кількість
програвань: "О" означає нескінченне повторення, алюбоє інше число указує точна
кількість повторів.
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © , 2008 |