|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
3.4. Графічні маркери Отже, в попередньому розділі ми згадали про можливість створення графічних маркерів списків. Вона настільки привернула творців веб-сторінок, що для їх зручності були створені спеціальні засоби. Дійсно, одна справа, коли маркерами списку є стандартні кружечки або квадратики, і зовсім інше - коли кожен сам має можливість створити маркер! Маркером може бути все що у придатно - від просто кольорових і трохи опуклих кружків і квадратів до витончених мініатюрних художніх робіт. Проте звернете увагу на те, що саме мініатюрних', маркери списків винні за розміром якось відповідати висоті текстового рядка, і турбота про це лягає на автора ще на етапі створення зображення. Прагніть створювати подібні зображення відразу у натуральну величину”. Якщо створювати спочатку крупні малюнки, а потім просто зменшувати їх, то при зменшенні вони можуть стати невпізнанними! Вся річ у тому, що комп'ютер “не знає”, які деталі малюнка важливі для нашого сприйняття. Якщо при зменшенні зникнуть важливі деталі, результат буде жахливим. Якщо зникнуть другорядні деталі, якість сприйняття погіршає, але загальне враження залишиться. Щоб проілюструвати можливість вставки в список графічних маркерів, скористаємося одним з прикладів попереднього розділу - веб-сторінкою фірми “Ледар”. Якщо пам'ятаєте, там ми створили два списки: маркірований (список послуг) і нумерований (порядок оформлення замовлення). Тепер, допустимий, ми хочемо замінити кухлі в маркірованому списку на червоні трикутники. Спочатку треба створити такий трикутник в будь-якій програмі, призначеній для роботи із зображеннями. У нашому прикладі ми теж створили такий трикутник, що навіть відкидає невелику тінь, і назвали цей файл marker1.gif. Тепер пригадаємо, як ми задавали тип маркера списку: <UL TYPE="disc"> Щоб піти далі, трохи підведемо завісу над матеріалом розділу 4 і замінимо атрибут TYPE= на атрибут STYLE= (як, до речі, і належить робити відповідно до специфікації HTML 4.0): <UL STYLE="list-style-type: disc;"> Тепер, щоб замінити кружок на графічний маркер, замінимо властивість list-style-type на властивість list-style-image і визначимо місцеположення нашого файлу-малюнка: <UL STYLE="list-style-image: url('Images/markerl.gif);"> От і все! Можна насолоджуватися списком з графічними маркерами. Звернете увагу на те, що при вказівці імені файлу ми уклали його не в звичайні подвійні лапки, а в одинарних. Це зроблено тому, що все значення атрибуту STYLE= поміщене в подвійні лапки. Тому якби ми помилково написали <UL STYLE="list-style-image: uri("Images/marker1.gif");"> то лапка перед словом Images була б сприйнята як що закриває, тобто атрибуту STYLE= було б привласнено значення "List-style-image: url(", а все, що слідує за цим, стало б ще одним, нерозпізнаним атрибутом тега <UL>. Оформлення кнопок Ще одне часте застосування графічних елементів - це оформлення кнопок. Взагалі кажучи, кнопка - це елемент взаємодії з користувачем, оскільки передбачається, що коли він на ній натисне, то що-небудь відбудеться. У цьому розділі ми не розглядатимемо методи такої взаємодії - про них мова піде нижчим. Поки ж ми тільки навчимося створювати кнопки і використовувати в них елементи графіки. Щоб створити кнопку, досить помістити деякий текст між тегамі <BUTTON> і </BUTTON>, наприклад, от так: <BUTTON>ЭТO KHОПKА</BUTTON> Правда, повторюваний, з цього абсолютно не виходить, що при натисненні на цій кнопці що-небудь відбудеться. Проте кнопка буде цілком повноцінною і навіть “вдавлюватиметься” при натисненні. Взагалі кажучи, такі кнопки можна було створити і в старих версіях мови HTML, хоча там не було тега < BUTTON > . Цікавіше той факт, що між тегамі <BUTTON>...</BUTTON> можна помістити не тільки текст, а все, що завгодно. Якщо ми помістимо туди тег <IMG>, то отримаємо кнопку з графічним зображенням. Можна помістити на кнопку і текст, і зображення (тільки не треба забувати про форматування - наприклад, треба вставляти теги <BR> для перенесення рядків і т. д.). Нарешті, як показано в наступному прикладі, можна помістити на кнопку взагалі будь-який блок НТМL! У нашому прикладі ми помістили туди цілу таблицю з різноколірними клітками. Отже, проілюструємо сказане таким файлом. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <HTML> <HEAD> <TITLE>KHOПKИ</TITLE> <STYLE> TD {color: white;} </STYLE> </HEAD> <BODY> <BUTTON>ПРОСТО КНОПКА</BUTTON> <BR><BR> <button><img SRC="Images/email_b-l.gif" BORDER="0" WIDTH="26" HEIGHT="23" ALT=""></BUTTON><BR><BR> <BUTTON>Internet Explorer<BR> <IMG SRC="Images/ie4.jpg" WIDTH="62" HEIGHT="61" BORDER="0"><>BR> 4.0 </BUTTON><BR><BR> <BUTTON><H1> Это большая кнопка</Н1> <TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="280" CELLSPACING="2" CELLPADDING="2" BORDER="3"> <TR> <TD ALIGN="center" BGCOLOR-"#400040">Oнa содержит</ТD> <TD ALIGN="center">целую таблицу</ТR> </TR> <TR> <TD ALIGN="center">c разноцветными</ТD> <TD ALIGN="center" BGCOLOR="#400040">Клеточки</TD> </TR> </TABLE> <BR>И ГОРИЗОНТАЛЬНУЮ ЛИНИЮ <HR WIDTH="400" SIZE="10" COLOR="Navy"> </BUTTON> </BODY> </HTML> До речі, другу і третю кнопку можна використовувати як шаблон для подальшої роботи: кнопка з конвертом цілком підійде для відсилання повідомлення електронної пошти, а наступна підходить для посилання на нову версію Internet Explorer (можливо, вам буде потрібно таке посилання, якщо ваш документ буде оптимізований під цей броузер). Можете поки не звертати увагу на тег <STYLE>, який був ненароком використаний в даному прикладі для того, щоб швидшим способом відобразити білими буквами текст в елементах таблиці. Отже, ми познайомилися з різними прийомами використання
графічних елементів на веб-сторінці. Проте в попередніх розділах нічого не було
сказано про те, як же ці зображення створювати. Підготовці зображень в графічних
програмах ми і присвятимо два наступні короткі розділи.
https://stol-kirov.ru/ | Что связывает фараона Ага с Нармером? Узнайте в этой статье. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|