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 самовчитель по веденню бізнесу в інеті
Каталог
 

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

 

 

 

 

 

 

4. Оформлення веб-сторінки з використанням стилів

4.1. Оформлення за допомогою атрибуту STYLE

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

- Стоп! - скажете ви. - А для чого ж ми їх тоді розглядали?

Не хвилюйтеся, по-перше, ми майже не розглядали відмінені теги, за винятком що найчастіше зустрічаються, а по-друге, відміна тегов в HTML 4.0 зовсім не означає, що всім потрібно негайно припинити їх використання. В деяких випадках все одно буває зручнішим восполь зоваться одним з цих тегов, і цього не потрібно боятися. Відмінені теги все ще підтримуються поточними версіями броузеров, принаймні для сумісності із старими веб-сторінками. Швидше за все, вони підтримуватимуться ще дуже довго (як, наприклад, до цих пір поддержіва ются теги <ХМР> і <BL>, хоча перший з них не використовується з часів HTML+, а другий зовсім ніколи не входив в його специфікацію). Та і взагалі, було б дивно, якби нова версія якого-небудь броузера раптом “відмовилася” від деяких тегов - це явно не додало б їй популяр ності. Так от, відміна тегов означає, що WWW-консорціум не реко мендуєт більш ними користуватися, оскільки CSS дійсно набагато зручніше, і можливості автора при цьому набагато ширше.

Атрибут STYLE

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

Найпримітивніший спосіб використання CSS - це ввести в код HTML атрибут STYLE= з відповідним значенням. Його можна додати практично до всіх тегам (окрім таких, як, наприклад, <HEAD> і <HTML> ). Таким чином, замість відмінених атрибутів в HTML 4.0 завжди слід застосовувати атрибут STYLE=.

Давайте розглянемо приклад. Візьмемо спершу веб-сервер-сторіночку з вто рий розділи (“Домашня сторінка Сергія Сергєєва”, див. рис.2.8), в кото рій трохи використовувалися відмінені теги і атрибути, і спробуємо “переписати” її по всіх правилах HTML 4.0, зберігши поки що старе оформлення.

По-перше, замість

<BODY BGCOLOR="#BABAAO" TEXT="#1D1D18" LINK="#634438" VLINK="#634438" ALINK="Black">

рдуєт написати так:

До речі, можливий і більш простій варіант:

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

Натомість застосуємо атрибут STYLE= замість відміненого атрибуту ALIGN= і напишемо:

<Н1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</Н1>

Цьому атрибуту відповідає властивість text-align, що приймає ті ж зна ченія, що і атрибут ALIGN=. Так само вирівняємо наступний тег <DIV>.

Заміна тегов на стильовий опис

У наступному блоці використаний відмінений тег <FONT>:

<FONT SIZE="+1"><В>Сергей Сергеев</В> - писатель-авангардист, автор 20 рассказов.<BR>

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

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

Ви можете запитати, що якщо атрибут STYLE= легко замінив відмінені атрибути, то що робити з відміненими тегамі? До чого “прикріпити” атрі бут STYLE=? В більшості випадків його можна “прикріпити” до тегу <DIV>. В даному випадку ми так і поступимо:

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

Як бачите, значення властивості font-size відрізняються від значень атрибуту SIZE= тега < FONT> . Для відносного збільшення розміру шрифту ісполь зуєтся значення larger, для відносного уменьшенія- smaller. Крім того, можна, по-перше, указувати процентну зміну величини шрифту, наприклад font-size: 120%;, або його абсолютну величину. Для цього можна використовувати або значення xx-small, x-small, small, medium, large, x-large і xx-large, або просто вказати величину шрифту в пікселах - font-size: 18px; або в інших одиницях.

Крім того, в нашому блоці присутній тег <В>, що також відноситься до оформлення, хоча чомусь і не відмінений в HTML 4.0. У CSS йому відповідає властивість font-weight: bold;. Проте ми не можемо написати замість

<В>Сергей Сергеев</В> следующее:

<DIV STYLE="font-weight: bold;">Сергей CepreeB</DIV>

оскільки в цьому випадку наступний текст буде перенесений на новий рядок. Тому замість тега <DIV> тут слід використовувати тег

<SPAN> :

<SPAN STYLE="font-weight: bold;">Сергей Сергеев</SPAN>

Цей тег, до речі, безглуздо застосовувати без атрибутів, оскільки тоді взагалі не буде ніякого ефекту. Як правило, він застосовується саме з атрибутом STYLE= (або з атрибутами CLASS=, ID=, LANG= або обробниками подій, про які мова піде нижчим).

Властивість font-weight (“жирність” шрифту), до речі, може приймати не тільки значення bold (напівжирний) і normal (звичайний), але і будь-яке числове значення від 100 900 (правда, мають сенс тільки значення, кратні 100) - тобто, від найтоншого до найжирнішого шрифту. При цьому значення 400 - це те ж саме, що normal, а 700 - те ж, що bold. Можна також вживати відносні значення bolder і lighter.

Підемо далі. Після цього текстового блоку у нас на веб-сторінці була горизонтальна лінія <HR > з відміненим атрибутом W1DTH=, замість якого слід використовувати стильову властивість width:

<HR STYLE="width: 75%;">

Крім того, якщо пам'ятаєте, для організації вертикального відступу між текстом і горизонтальною межею ми використовували не дуже красиву конструкцію <BR>&nbsp; . У CSS є властивість margin, за допомогою кото рого можна регулювати відступи (“поля”) з усіх боків елементу; а для індивідуального регулювання відступів з кожного боку можна ісполь зовать властивості margin-top (відступ зверху), margin-bottom (відступ знизу), margin- left (відступ зліва) і margin-right (відступ справа). Оскільки ми мали намір видалити горизонтальну межу від тексту на відстань, приблизно рівну одному рядку, давайте напишемо так:

<HR STYLE="margin-top: 24px; width: 75%;">

Інтервал, визначений властивістю margin-top, складає 24 піксела.

Далі центруємо заголовки розповідей за допомогою вже знайомого нам властивості text-align. Але у нас є ще підзаголовки, виділені курсивом:

<I>сказка</I>

Оскільки тег <I> теж відноситься до оформлення (хоч і не відмінений), заме ним його стильовою властивістю font-style: italic;, застосувавши вже знайомий тег <SPAN>:

<SPAN STYLE="font-style: italic;">сказка</SPAN>

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

Стильове позиціонування

Тепер виправимо конструкцію для епіграфа:

<Р ALIGN="right"XFONT SIZE="-l">Hy, погоди!.. <BR>

<I>(Из мультфильма )</I>

</FONT></P>

Замість атрибуту ALIGN=, а також тегов <FONT> і <I> застосовний вже знайомі конструкції:

<Р STYLE="text-align: right; font-size: smaller; ">Hy, погоди!.. <BR><SPAN STYLE="font-style: italic; "> (Из мультфильма) </SPAN></P>

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

<Р STYLE="text-align: right; font-size: smaller;">&laquo;Ну, погоди!..&raquo; &mdash; что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<BR><SPAN STYLE="font-style: italic;">(Из описания мультфильма) </SPAN></P>

Результат показаний на мал. 4.1. Погодитеся, що це більше схоже не на епіграф, а на якийсь ввідний текст, тому що епіграф винен оста ваться в правій частині екрану. У старому варіанті веб-сторінки з цією про блемой було б важко справитися (довелося б або малювати невидиму таблицю, або уручну розбивати текст епіграфа тегамі <BR>, що привело б до різних результатів при перегляді у вікнах різного розміру). А при використанні CSS можна просто використовувати такі властивості блоку, як width і height (ширина і висота). Друге з них нам зараз не потрібно, а ось властивість width якраз стане в нагоді:

<DIV STYLE="text-align: right;"> <P STYLE="text-align: justify; font-size: smaller; width: 35%;">

&laquo;Hy, погоди!..&raquo; &mdash; что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<BR>

<SPAN STYLE="font-style: italic;">(Из описания мультфильма)</SPAN>

</DIV>

Результат показаний на мал. 4.2. Давайте з ним розберемося. Як видно з вищенаведеного коду, просто додати властивість width: 35%; недоста точно. Дійсно, тоді текст блоку був би вирівняний по правому краю, але це вирівнювання відбувалося б усередині блоку, а сам блок шириною 35% від повної ширини вікна розташовувався б зліва. Тому важ блок, описаний тегом <Р>, довелося укласти в зовнішній блок <DIV>, а вже в нім встановити вирівнювання по правому краю (text-align:right;). Ну, а раз вже вирівнювання по правому краю узяв на себе зовнішній блок, усередині текстового блоку для кращого сприйняття ми вирівняли текст але обом краям (text-align: justify;).

Мал. 4.1. Довгий епіграф при такому, оформленні стає не схожим, на епіграф

Мал. 4.2. Вирівнювання епіграфа за допомогою вкладених блоків

Все б добре, проте підпис під епіграфом добре б вирівняти по правому краю (хоча, оскільки вона займає майже весь рядок, це не дуже помітно), як на мал. 4.3. Але оскільки тег <SPAN> “не розуміє” окремого вирівнювання, доведеться цей підпис також укласти в блок <DIV> або <Р>.

Мал. 4.3. Вирівнювання підпису під епіграфом

міліційний мотоцикл, який якраз у цей момент проїздив по дорозі. Через мить мотоцикл вже відвіз його кудись удалину.

</Р>

<Р STYLE="text-align: right; font-size: smaller; width: 35%; font-style: italic; position: relative; top:-18px;">

(Из описания мультфильма) </Р> </DIV>

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

Звернете увагу на властивість position. Воно задає тип позиціонування - відносний або абсолютний. В даному випадку визначено відносне позиціонування (relative), тобто відлік ведеться від тієї позиції, яку повинен був би займати цей елемент, якби позиціонування не було задане. А абсолютне (absolute) позиціонування означає, що відлік ведеться від верхнього лівого кута вікна броузера (точніше, його робочій області). Ще у цієї властивості може бути значення static, що означає, що елемент не позиціонується індивідуально, і значення fixed (фіксована позиція - елемент позиціонується абсолютно і не прокручується разом з рештою вмісту сторінки), яке, проте, підтримується поки тільки шостою версією Netscape.

З властивістю position тісно пов'язано ще дві властивості - top і left, які задають позицію верхнього лівого кута елементу відповідно по верти калі і горизонталей. Чим більше значення top, тим нижче розташований елі мент, і, відповідно, чим більше значення left, тим елемент правіший. В даному випадку, для того, щоб підвести текст приблизно на висоту одного рядка, нам довелося написати: top: -18px;.

Ну, гаразд, адже ми домовлялися поки що не міняти нічого на сторіночці, тому повернемося до нашого короткого тексту, проте все одно примі ним до нього вищезгадану конструкцію (з вкладеними блоками <DLV>). Між іншим, навіть з коротким текстом це все одно виходить краси вєє, чим раніше. Тільки замінимо значення width на 130 крапок (замість процентного позначення), а то при дуже великому дозволі екрану короткий текст дуже сильно відірветься від підпису.

Абзацний відступ

Далі, в основному тексті розповідей у нас були абзацні відступи, зроблені за допомогою серії нерозривних пропусків (&nbsp;), - спосіб не найвитонченіший. За допомогою стильової властивості text-indent можна визначити абзацний відступ в будь-яких одиницях. Правда, доведеться відмовитися від ділення на абзаци за допомогою тега <BR>, оскільки він “не зрозуміє” вказівок зробити відступ. Можна ділити текст на абзаци “офіційним” способом - <Р>, проте, щоб уникнути пропуску рядка, ми скористаємося тегом <DIV> :

<DIV STYLE="text-align: justify; text-indent: 2em;">

Тут ми визначили абзацний відступ, рівний двом символам максимальної ширини в даному шрифті.

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

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

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>

</HEAD>

<BODY STYLE="background-color: #BABAAO; color: rgb(29,29,24);" LINK="#634438" VLINK="#634438" ALINK="Black" >

<H1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</Н1>

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

<A HREF="#skazka">CKА3KА &laquo;Иван-царевич и серый зaяц&raquo;</A>&nbsp;

<A HREF="#rasskaz">PАССKА3 &laquo;МОЛОТОК&raquo;</A>

</DIV>

<BR>

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

<SPAN STYLE="font-weight: bold;,>Сергей Сергеев</SPAN> &mdash; писатель-авангардист, автор 20 рассказов.<BR>

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

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

<HR STYLE="margin-top: 24px; width: 75%;">

<Н2 STYLE="text-align: center;"XA NAME="skazka">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>

<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2> <DIV STYLE”"text-align: right;">

<DIV STYLE="text-align: justify; font-size: smaller; width: 130;">

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

<DIV STYLE="font-style: italic; text-align: right;">(Из мультфильма)</DIV>

</DIV> </DIV>

<BR>

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

<DIV STYLE="text-align: justify; text-indent: 2em;"> Долго ли, коротко ли, ...</DIV>

<DIV STYLE="text-align: justify; text-indent: 2em;"> ...И они жили долго и счастливо и умерли в один день.</DIV>

<HR STYLE="margin-top: 24px; width: 75%;">

<Н2 STYLE="text-align: center;"><A NAME="rasskaz">МОЛОТОК</A> <BR>

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

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

<DIV STYLE="text-align: justify; font-size: smaller; width: 130;">

Мы кузнецы, и дух наш молод.

<DIV STYLE="font-style: italic; text-align: right;">(Из песни) </DIV>

</DIV>

</DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2ет;">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>

</BODY>

</HTML>

Результат показаний на мал. 4.4. Ви можете відмітити, що він практично не відмітний від веб-сторінки, представленої на мал. 2.8, якщо не рахувати трохи “виправлених” епіграфів і абзацних відступів.

Таким чином, ми переписали сторіночку відповідно до вимог HTML 4.0, а попутно розглянули ще деякі додаткові віз можності, CSS, що надаються.


 



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

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


:: Реклама ::


:: Ссилки ::

-


:: Баннери ::

 

 

 


Copyright © r8-project.xyz, 2008 - 2021