3. Графіка на веб-сторінці | Site.ua - створи сайт безкоштовно!

r8-project.xyz - створи сайт безкоштовно!

:: Меню ::

	Головна
Новости 1. Як створюють веб-сторінки 1.1 Як створюють веб-сторінки 1.2. Як розмістити веб-сервер-сторіночку на сервері 1.3. Як написати веб-сторінку 1.4. Огляд програм для проглядання веб-сторінок 1.5. Огляд програм для створення веб-сторінок 1.6.(Частина-I) Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion 1.6.(Частина-II)Автоматизація введення 2. Основні засоби мови htmL 2.1. Просте форматування тексту 2.2. Найголовніше на будь-якій веб-сторінці - гіперпосилання 2.3. Як створити списки на веб-сторінці 2.4. Створення таблиць 3. Графіка на веб-сторінці 3.1.(Частина-I) Основні способи застосування графіки 3.1.(Частина-II)Зображення-карта 3.2. Графічні формати Інтернету 3.3. Графічні елементи оформлення веб-сторінок 3.4. Графічні маркери 3.5. Підготовка малюнків в програмі Xara Webstyle 3.6.(Частина-I)Підготовка малюнків в програмі Adobe Photoshop 3.6.(Частина-II)Прикраса зображення дрібними деталями 4. Оформлення веб-сторінки з використанням стилів 4.1. Оформлення за допомогою атрибуту STYLE 4.2. Визначення стилів в спеціальній таблиці 4.3. Огляд інших можливостей стильових таблиць 5. Використання звуку на веб-сторінці 5.1. Додавання звукового оформлення 5.2. Програми для стиснення звукових фрагментів 5.3. Маленькі хитрощі 6. Динамічні веб-сторінки на основі JavaScript 6.1. Прості приклади 6.2. Як писати власні функції 6.3. Динамічна зміна зовнішнього вигляду сторінки 6.4. Інші можливості мови JavaScript 7. Веб-сторінки, що реагують на дії користувача 7.1. Введення даних користувачем у форми htmL 7.2.(Частина-I)Сторінка, керована за допомогою миші 7.2.(Частина-II)Динамічне управління позиціонуванням елементів 7.3. Сторінка, керована з клавіатури 7.4.(Частина-I)Динамічне відображення тексту веб-сторінки 7.4.(Частина-II)Використання інших властивостей при роботі з текстом 7.5. Динамічна зміна графічних елементів веб-сторінки 8. Розміщення елементів на веб-сторінці і навігація по сайту 8.1. Використання структури фреймів 8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць 9. Додаткові можливості формування веб-сторінок 9.1. Приклад використання елементу управління Tabular Data 9.2. Приклад простого серверного сценарію Цікаві сайти! Карта сайту xml Карта сайту htm
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
	Контакти

	Додати у вибране

:: Друзі:

Biz-nes.info самовчитель по веденню бізнесу в інеті

Каталог

:: Статистика ::

3. Графіка на веб-сторінці

3.1. Основні способи застосування графіки

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

Фонове зображення

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

Допустимо, що у нас заготовлено відповідний фоно вий малюнок (про те, як це зробити, див. в розділі 3.5) - він записаний у файлі під ім'ям back1 .jpg (мал. 3.1). Якщо при окремому перегляді цього малюнка він вам подобається, це ще нічого не означає. Щоб визначити, чи підходить малюнок як фон до тексту, його потрібно перевірити “в справі”.

Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в теге <BODY> атрибут BACKGROUND= із значенням, що містить ім'я файлу малюнка.

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

Мал. 3.1. Фоновий малюнок.

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

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

<HTML>

<HEAD>

<TITLE>Клавинова</TITLE>

</HEAD>

<H1><DIV ALIGN="center">Клавинова</DIV></H1>

Инструменты серии

<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> ще декілька атрибутів.

По-перше, треба пам'ятати, що картинки завантажуються з мережі завжди набагато повільніше, ніж звичайний текст. Це я говорю не до того, що сам файл картинки повинен бути не дуже великого об'єму (це вірно, але це питання ми обговоримо окремо), а до того, що при такому записі, як вище, багато броузери, почавши завантажувати картинку, припинять завантаження подальшого тексту до тих пір, поки картинка не буде завантажена повністю. Але для читача було б зручніше, якби текст продовжував завантажуватися араллельно з картинкою: поки вона довантажується, можна було б щось вже читати. Щоб броузер міг це зробити, йому потрібно явно вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і HEIGHT=:

Взагалі кажучи, за допомогою цих атрибутів можна задати які завгодно розміри картинки, “розтягнувши” або стиснувши її як душі завгодно. Проте зазвичай цього не роблять, і ось чому. Представляти картинку меншою, ніж вона є, недоцільно, оскільки навіщо тоді вантажити великий файл? Адже файли для картинок великого розміру мають великий розмір і вантажаться з Інтернету, відповідно, набагато довше. Краще вже зробити малень кий файл для картинки маленького розміру і швидко завантажити його. А якщо представити картинку більшою, ніж вона є, то, як правило, вона виглядатиме малопрівлекательно за рахунок появи “ступінчастості” як у формах, так і в кольорі.

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

Нарешті, навколо малюнка можна відобразити рамку. Товщина цієї рамки задається як значення атрибуту BORDER=. Якщо ми, як в даному випадку, не хочемо відображати рамку навколо малюнка, то можемо нічого і не указувати, оскільки більшість броузеров за умовчанням рамку не малюють. Але деякі броузери все ж таки це роблять, і “для вірності” непогано б вказати і відсутність рамки теж:

Чого ще не вистачає нашому 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>

<H1><DIV ALIGN="center">KJIABHHOBA</DIV></Hl>

<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= дозволяє встановити кількість програвань: "О" означає нескінченне повторення, алюбоє інше число указує точна кількість повторів.

:: Наша кнопка ::

Отримати код:

:: Реклама ::

:: Ссилки ::

:: Баннери ::