Siteua.info - створи собі сайт безкоштовно!

:: Меню ::

Головна

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. Приклад простого серверного сценарію
Цікаві сайти!
+

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

:: Друзі:

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

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

каталог сайтів

 

 

 

 

 

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>, який був ненароком використаний в даному прикладі для того, щоб швидшим способом відобразити білими буквами текст в елементах таблиці.

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

 

Всё про путешествия | Все о здоровом образе жизни


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

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


:: Реклама ::

+setl

:: Ссилки ::

+


:: Баннери ::

 

 

 


Copyright © Siteua.info, 2008