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.3. Графічні елементи оформлення веб-сторінок

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

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

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

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

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

Які ж графічні елементи можливо застосовувати як таку “прикрасу”? Тут треба проявити фантазію. Якщо ви придумаєте що-небудь оригінальне, ваша веб-сторінка виглядатиме незвично, “не як інші”, і запам'ятається відвідувачеві. Проте перерахуємо декілька що стали вже традиційними варіантів такого застосування графіки. По-перше, це різні графічні роздільники, зазвичай горизонтальні, вживані замість горизонтальної межі (<HR>). Хоча тег <HR> і піддається настройці, графічний роздільник часто виглядає кращим.

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

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

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

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

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

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

 

 


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

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


:: Реклама ::

+setl

:: Ссилки ::

+


:: Баннери ::

 

 

 


Copyright © Siteua.info, 2008