|
||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||
|
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> </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> . У 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;">«Ну, погоди!..» — что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<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%;"> «Hy, погоди!..» — что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<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 крапок (замість процентного позначення), а то при дуже великому дозволі екрану короткий текст дуже сильно відірветься від підпису. Абзацний відступ Далі, в основному тексті розповідей у нас були абзацні відступи, зроблені за допомогою серії нерозривних пропусків ( ), - спосіб не найвитонченіший. За допомогою стильової властивості 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А «Иван-царевич и серый зaяц»</A> <A HREF="#rasskaz">PАССKА3 «МОЛОТОК»</A> </DIV> <BR> <DIV STYLE="font-size: larger;"> <SPAN STYLE="font-weight: bold;,>Сергей Сергеев</SPAN> — писатель-авангардист, автор 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, що надаються.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||
|