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 самовчитель по веденню бізнесу в інеті
Каталог
дать бесплатное объявление в Краматорске | https://loveprint.com.ua індивідуальні наклейки на упаковку.
 

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

 

 

 

 

 

 

дать бесплатное объявление в Краматорске | https://loveprint.com.ua індивідуальні наклейки на упаковку.

4.2. Визначення стилів в спеціальній таблиці

Читаючи попередній розділ, деякі, швидше за все, кілька разів череню малі: “Ну і де ж тут обіцяна зручність? Невже зручніше написати <SPAN STYLE="text-style: italic;">, чем просто <I>?”

Мал. 4.4. Веб-сторінка написана з елементарним застосуванням CSS

Все вірно, в деяких випадках Сівба-запис дійсно трохи довша, але ми і не стверджували, що тепер потрібно використовувати тільки CSS ~ в деяких випадках можна скористатися і старими тегамі, нічого в цьому негожого немає. Проте за допомогою CSS ми маємо, по-перше, набагато ширші можливості, а по-друге, отримуємо зручність роботи над власне стилями. У попередньому розділі ви це зручність відчути не могли, оскільки в учбових цілях ми записували всі властивості стилів як значення атрибуту STYLE=. Цей спосіб широко застосовується, але лише в тих випадках, коли потрібно застосувати який-небудь стиль до окремо взятого фрагмента. А в більшості випадків використовують так звані таблиці, стилів.

Ви, напевно, звернули увагу на те, що в попередньому прикладі є багато повторень стильових властивостей. Властивості, що повторюються, можна визначити для кожного тега HTML заздалегідь, і вони згодом застосовуватимуться до нього автоматично.

Стилі елементів

Таблиця стилів зазвичай розташовується в заголовку HTML-документа, в розділі <HEAD> . Вона займає місце між тегамі <STYLE> і </STYLE> . Синтаксис таблиці стилів такий. Ви пишете ім'я елементу HTML, для якого визначаєте стиль, а після нього слідує блок визначення стилю, ув'язнений у фігурні дужки. Наприклад, в нашому прикладі можна написати так:

<STYLE> BODY { background-color: #ВАВААО; color: rgb(29,29,24); }

</STYLE>

Пропуски тут не мають ніякого значення, так само, як і переклади рядків. Після цього в самому тексті HTML-документа досить вказати тег <BODY>, і до нього автоматично будуть застосовані дані кольори фону і тексту.

Поки що ми начебто не отримали ніякої видимої економії, хоча скоро ви побачите, що має сенс розташовувати стильові властивості <BODY> саме в таблиці стилів. Щоб продемонструвати економію, підемо далі. У нашому прикладі ми три рази вирівнювали заголовки по центру (ще добре, що три, а не п'ятдесят шість). Натомість можна просто написати в таб обличчі стилів:

Н1,Н2 { text-align: center; }

і після цього просто указувати в документі теги <Н1 > або <Н2>, місти моє яких автоматично центруватиметься. Звернете увагу на те, що в таблиці стилів, щоб визначити стиль відразу для декількох елементів, ми перерахували їх через кому.

Якщо ви пам'ятаєте, у нас ще залишалися в теге <BODY> три “відмінені” атрибути: LINK=, ALINK= і VLINK=. Замість них рекомендується визначити стилі для різних псевдокласів елементу <А>. Це робиться так:

A:link,A:visited { color: #634438; } A:active { color: black; }

Як бачите, для елементу <А> визначено три псевдокласи (імена кото рих відділяються двокрапкою): link - для гіперпосилань, visited - для посе щенних гіперпосилань і active - для активних. Крім того, в другій версії CSS (CSS Level 2) для тега <А> визначені ще псевдокласи hover (гіперпосилання, над яким знаходиться покажчик миші) і focus (вибраний

ная гіперпосилання). Проте в броузере Internet Explorer версії 5 підтримується тільки перший з них. Наприклад, якщо написати

A:hover { color: white; }

то при наведенні покажчика миші на посилання вона підсвічуватиме білим кольором. Це вже схоже на динамічну взаємодію з користувачем!'

Далі, в нашому прикладі ми двічі визначали однаковий стиль для горизонтальної лінії. Простіше, звичайно, написати в таблиці стилів:

HR { margin-top: 24px; width: 75%; }

і потім в текст документа вставляти тільки тег <HR>, і тоді, якщо не вказане інше, лінія вийде такій, якою потрібно.

Стилі класів

Все це добре, звичайно, але як бути далі? Адже в тексті нашого прикладу кілька разів (в даному випадку два, але могло б бути і значно більше!) визначається один і той же стиль для тексту епіграфа, інший стиль для основного тексту і третій для підпису до епіграфа... Добре б теж визначити їх в таблиці стилів, проте в нашому HTML--документі всі вони розташовані усередині елементів <DIV>, тому треба визначити декілька різних стилів для одного елементу. Виявляється, це теж можна зробити! Для цього, правда, доведеться використовувати декілька довший запис, проте це все одно зручніше і коротше, ніж всякий раз визначати атрибут STYLE= або задавати інші атрибути.

Отже, у нас повинні бути три різні стильові варіанти для елементу <DIV> . У CSS вони називаються класами. Щоб відрізнити ці елементи один від одного, у них доведеться встановити атрибут CLASS=, приблизно так:

<DIV CLASS="epig">...</DIV> <DIV CLASS="pdps">...</DIV> <DIV CLASS="ab">...</DIV>

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

DIV.epig { text-align: justify; font-size: smaller; width: 130; }

DIV.pdps { font-style: italic;

text-align: right; }

DIV.ab { text-align: justify;

text-indent: 2em; }

Між іншим, інші елементи (причому практично все) також можуть мати атрибут CU=. Якщо треба, щоб визначення класу було доступне всім елементам, його можна визначити так:

pdps { font-style: italic;

text-align: right; }

Тобто, при визначенні не указується ім'я конкретного елементу HTML, а указується тільки ім'я класу, яке у будь-якому випадку починається з крапки (але тільки в таблиці стилів, а при зверненні до класу в тексті документа крапка не ставиться). У даному прикладі ми визначали класи тільки для елементу <DIV>. Більш того, в такому визначенні передбачається (тобто ми як би пам'ятаємо), що елемент класу pdps буде вкладений в елемент класу epig. Хоча, з іншого боку, наше визначення pdps годиться не тільки для підпису під епіграфом, але і для будь-якої іншої, якщо її раптом буде потрібно.

До речі, окрім стильових властивостей елементів HTML і класів, ми можемо визначати властивості так званих ідентифікаторів. Річ у тому, що у кожного елементу HTML може бути атрибут ID= - його унікальне ім'я в даному документі (цей атрибут грає велику роль при динамічній взаємодії з користувачем, так що з ним нам ще доведеться не раз зіткнутися). Якщо ви хочете визначити в таблиці стилів властивості для елементу, що має певний ідентифікатор ID=, це можна зробити так:

#соо1 { color: white; background-color: black; )

Тоді елемент на ім'я cool (наприклад <DIV ID="cool"> ) буде наділений вказаними властивостями (в даному випадку білим кольором символів на чорному фоні). Тільки не забувайте, що в кожному HTML-документі кожен ідентифікатор ID= повинен бути унікальним, тобто не може бути два і більш за елементи з однаковим значенням атрибуту ID=.

Гаразд, це ми трохи відвернулися, так що давайте подивимося на новий варіант сторіночки Сергея Сергєєва цілком.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТITLE>Домашняя страница Сергея Cepreeвa</TITLE>

<STYLE>

<!--

BODY { background-color: #BABAAO;

color: rgb(29,29,24);

}

H1,H2 { text-align: center;

} A:link,A:visited { color: #634438;

} A:active { color: black;

} HR { margin-top: 24px;

width: 75%; ) DIV.epig { text-align: justify;

font-size: smaller;

width: 130; } DIV.pdps { font-style: 'italic;

text-align: right;

} DIV.ab { text-align: justify;

text-indent: 2em; }

-->

</STYLE>

</HEAD>

<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>

<DIV STYLE="text-align: center;"><A HREF="#skazka">CKА3KА &1аquо;Иван-царевич и серый зaяц&raquo;</A>&nbsp;

<А HREF="#rasskaz">PaccKa3 &laquo;МОЛОТОK&raquo;</A>

</DIV>

<BR>

<DIV STYLE="font-size: larger;">

<SPAN STYLE="font-weight:

bold;">Сергей Сергеев</SPAN> Smdash; писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.<ВR>

<ВR>

Некоторые его рассказы вы можете прочитать прямо здесь.</DIV>

<HR>

<Н2><А NAME="skazka">ИBAH-ЦAPEВИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>

<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2>

<DIV STYLE="text-align: right ;">

<DIV CLASS="epig">

Ну, погоди!..

<DIV CLASS="pdps">(Из мультфильма)</DIV>

</DIV>

</DIV> <BR>

<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>

<DIV CLASS="ab">Дoлгo ли, коротко ли, ...</DIV>

<DIV CLASS="ab">...И они жили долго и счастливо и умерли в один день.</DIV>

<HR>

<Н2><А NAME="rasskaz">МОЛOTOK</A>

<BR>

<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>

</H2>

<DIV STYLE="text-align: right;">

<DIV CLASS="epig"> Мы кузнецы, и дух наш молод. <DIV CLASS="pdps">(Из песни)</DIV>

</DIV>

</DIV>

<BR>

<DIV CLASS="ab">Этo случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>

</BODY>

</HTML>

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

Напевно, ви звернули увагу на дивні поєднання <!-- і -->, які з'явилися в нашому прикладі біля тегов <STYLE> . Взагалі кажучи, в такі символьні поєднання (це, до речі, теж теги) в HTML-докумен-тах укладають коментарі. Тобто все, що знаходиться між цими тегамі, ігнорується броузером. Але в даному випадку ми користуємося тим, що усередині STYLE -блока діють закони синтаксису не HTML, а CSS. Отже ті броузери, які “розуміють” тег <STYLE> і, отже, CSS, “зрозуміють” і те, що в даному випадку це не символи коментаря, і проінтерпретують таблицю стилів, як годиться. А ті броузери (в основному, старі), які CSS не розуміють, сприймуть вміст таблиці стилів як коментар. (Якщо не поставити теги коментарів, то ці броузери, проігнорувавши тег <STYLE> як незрозумілий їм, швидше за все стануть виводити на екран весь вміст таблиці стилів.) Таким же чином ми “одурюватимемо” старі броузери при використанні тега <SCRIPT>.

Зовнішні стильові таблиці

Ще одна чудова властивість стильових таблиць полягає в тому, що за допомогою однієї таблиці, що знаходиться в окремій файлі, можна задавати стилі для цілого набору веб-сторінок. Це, до речі, дуже важливо при розробці великих сайтів, оскільки, по-перше, сприяє сохра ненію єдність стилю, а по-друге, надає можливість швидко змінити що-небудь відразу в багатьох файлах проекту. Для цього слід просто написати всю таблицю стилів (без тегов <STYLE> і </STYLE> ) в окремому файлі з розширенням .css, а потім “підключити” її у всіх HTML- документах, які повинні її використовувати. Наприклад, якщо файл таблиці стилів називається mainstyle.css, то в розділ <HEAD> кожного з HTML-документів, що використовують її, потрібно вставити такий рядок:

<LINK REL="Stylesheet" HREF="mainstyle.css" TYPE="text/css">

Атрибут TYPE= указувати не обов'язково, але краще це зробити (до речі, це можна робити і в теге <STYLE> ). По-перше, це ознака хорошого тону, а потім хіба мало що - раптом користувачеві, наприклад, попадеться який-небудь божевільний броузер, що використовує для стильових таблиць за умовчанням не CSS, а, допустимий, JASS.

Є і інший спосіб “підключення” стильової таблиці із зовнішнього файлу - директива @import. Вона уживається таким чином:

<STYLE TYPE="text/css"> @import url (mainstyle.css) ; </STYLE>

Як бачите, ця директива винна знаходиться між тегамі <STYLE> і </STYLE>, оскільки вона не є елементом мови HTML (як тег <LINK> ). Її використання менш переважно, оскільки броузери можуть інтерпретувати її по-різному.


 


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

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


:: Реклама ::


:: Ссилки ::

-


:: Баннери ::

 

 

 


Copyright © r8-project.xyz, 2008 - 2021