Философия CSS-дизайна 0321303474, 0-321-30347-4, 5-477-00122-4, 985-13-4866-X, 5-477-00122-4

Citation preview

---

D a v e M o l l y

T

h

e

V i s u a l

Z

e

n

o

S h e a

E.

H o l z s c h l a g

f

C

S

S

D

E n l i g h t e n m e n t

f o r

e

s

t h e

i

g

n

:

W e b

М ол

Ф и л о с ои ф

э йД в Ш и Е . Х о л ьцш л а

и

я CSS- ди з а й н

г

а

, 

.

: 

•

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

в Ш и Е . Х о л ьцш л а эйД

М ол

Ф и л о си ф

и

г

я - ди з а й н

Шо л к

]

а Web- м асте р в

М осква

а а

N T  P r e ss ,  2005zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGF

УД ББ

К   004.738.5 К   32.973.26- 018.2 Ш5 5

П о дп и с а н «М и н и а тю р а »

о   в   п еч ат .  П е ч а т!

ь   с   г о то в ы ,  о ф с е т н а я

и  Д. , Ха л ш ц ь ло Ш

Ш 5 5  Ф и л о с о ф и П рес

х   ди а п о з и ти в о . Ус л .  п е ч

в   27.07.2005.  Ф о р м а . л . 32,76.  Т и р а ж   3000 э к з

т   84xlO8V16 .  Бму а г а   о ф с е тн а я .  Г а р н и тру а . З а к а з   1942.zyxwvutsrqponmlkjihgfedcbaZYXW

г  М . Е .

я  CSS- ди з а й н а  /   Дэй в  Ш и , М о л и  Е . Х о л ь ц ш л а ,  2005.  -   312  с .  : и л . -   (Ш к о л а   Web- м а с те р с тв а )

г   ; п е р

. с  а н г л

. А . А.   С л и н к и н а

. -   М . : Н Т

.

ISBN  5- 477- 00122- 4 В  э то л и ц   с ит л е й н и я   с ит л е й ат , ти п о гр а ф с к и CSS р а з н ы м с о в м е с ти м о с ти Эт

а  к н и г

в а ет л й И з да н и

й  к н и г . З едс , с и н атк с и

е  н а  п р и м е р ь   н аш л е  э ф е к т

и  б р азу е р а м и

е  ш и р о к о  и з в е с тн о г и   о тр а ж е н и е   та к и с  я з ы к а  CSS, п р и н ц и п ы  и  м н о г е  др гуо е ;  а в то р ы   рас к аз ы в аю

о   сай т а  CSS Zen G arden р а с м а тр и в а е тс е   воп росы , к а к  п о дг то в к а   H TML- р а з м ект ы  в ер с кт и , м е то д ы   работ ы   с  г р а ф и к о й .  Н е  о сатл ь   бе з  в н и м а н и я  п р о б л е м т   о   п р и ем ах ,  с  п о м о щ ь ю   котры

я   п р и м ен ен и и  дл я   п о с л еюду щ ег , о с о б е н н о с т а   н е о ди н а к о в г х   можн

е  каскнд ы

х   атб

-

о   п р и м ен е и  и с п о л ь з о в а н и о  ур о в н

о   д о б и ьт с

я  ц в е

я   п о де р ж к

и

я   м е ж б р а зу е р н о

й

. а  н е  я в л я е тс : о т   н о в и ч к о е  с о с т и

я  уч е б н и к о в  д о  м а с ти ты

м  п о  CSS, н о  п р есдатв л яе х   п р о фес и о н а л о в

т   и з  7 гл ав

, п р е дм е тн о г

т   н есо м н ен н ы

й  и н етр

с  дл

я  р а з л и ч н ы

х  к а етго р и

й  п о л ь з о

-

.

о   к у а з а ет л

я   и  п р и л о ж е н и я

.

Authorized  translation from the English language edition, entitled ZEN  OF CSS DESIGN, THE: VISUAL ENLIGHTENMENT FOR THE WEB, 1st Edition, ISBN  0321303474, by SHEA, DAVE and HOLZSCHLAG, MOLLY E., published by Pearson Education, Inc. publishing as Peachpit Press, Copyright © 2005. All  rights  reserved.  No part of  this book  may  be reproduced  or transmitted  in any  form  or by  any  means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Educatio n, Inc. RUSSIAN language  edition published  by NT PUBLISHING  HOUSE, Copyright  © 2005.

ДУ Б

сВ е  п рва в ма с т р д е М ре и ат л и л е ьв з с а т д в не с т о о с т

а  з ащ и щ ен ы и  бе з  п и сь м ен ог

. Лю ба

я   ч ас т

ISBN  5- 477- 00122- 4 (рс.у ISBN  985- 13- 4866- Х  (Харвсте

й  кн и г

и  н е  мжое а  аовртски

я  влеьацд

, и з ложен ы й  в  дан о о   н е  може т  гар н ит роват и  з а  воз м ож н ы й  ущ ер

ISBN  0- 321- 30347- 4 (а н гл .

ь  эот

о  раз реш ен и

) 

й  кн и ег ь   аб с о л ю н т у б  лю бог

, м н огкнрат ю   о чт н о ст о  виад , связ ан ы

т  бы т

ь   в о сп р и з не в д х  п рав

о  п рове н

а  в  ккао

о  фо рм

е  и  ккаи м

и  б ы  т о  н и  был

о

. . Н о

ь  и  п рави ль н ост й  с  п ри м ен и е

й  б ы  т о  н и  бы л

К   004.738.5 К   32.973.26- 018.2

, п оск ль

у   в е р он я т с ь  п ри вод м ы м  сржещаод си х

ь  тн ех и чески х   не с в д и й я  зсе д

. В  звся ь  сневд и й

х   ош и бо и  с  эит .

к  вс е  равн м  и левьзсатд

о  осятае о   н е  нес

, т

Copyright  © N ew  Riders, 2004

) 

©  О ф о р м л е н и ) 

©  С л и н к и

е  «Н Т  П рес » н  А .  .А ,  п е р е в о д

, 2005 ,  2005

О б а вт о р а э й вД

 Ш и

х

zyxwvutsrqponmlkjihgfedcbaZYXWVUT

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM

Дэй в   Ш и  з а н и м а е тс я   гр а фи ч ес к и з ад е т л ь   и  и едй н ы й  в донх о в и етл кот ры й   з ав о ев а л   раз ли чн ы е п ри з  Best of  Show  н а  к о н ф е р е н ц и Interactive,  п р о х ди в ш е й   в  О с ти н е ч аст о  в ы спут а е т   с  до к л а д м и  н м у  м и р у , а  ег о  р а б о т ы  ук р а ш а ю г и  и   ж ру н а л ы .

м   ди з а й н о м ,  о н   с о а  CSS Zen G arden, ,  в   то м   ч и с л е и  South by  Southwest , ш та т   Т а е хс .  Д э й в а  к о н ф е р е н ц и я х  п о  в се т  м н о г ч и с л е н н ы е  к н и -

ь   сай т   н а г р а ды

О н  так ж е  я в л я е тс я  ч л е н о м  п р о ек т а  п о  с та н да р ти з а ц и и Web  (Web  Standards  Project  -   WaSP) -   г р уп п ы   раз ра б о тч и к о в   и   ди з а й н е р о в ,  п р о п а г а н д и р ую щ и х   крос п л а тф о р м е н н ы е ,  н е п а те н то в а н н ы е   т е нх о л о г и и   Web. Дэй в  -   в л аед ц   и  ди р е к то р  н а хо дя щ е й с я  в   В ан квуер е ком п ан и и  Bright Creative,  к о т р а я  з а н и м а е тс я   в еб - ид з ай н ом , о н  п бул и к еу т   м а те р и а л ы   о  р а з л и ч н ы х   а с п ек ат х   Web  н а   сай т е   mezzoblue.com.  В   с в о б дн о е   в р ем я ег о  м о ж н о  в с тр е и т ь   н а  ф е р м е р с к и х   ры н ка х  в   В ан ку в е р е   и л и   в   к а о й - н и б ду ь   н ез ав и си м о й   к ом п ан и и  п о обж ари ван и ю  к о ф е й н ы х  з е р н .

М оли

 Е.  Хольцш лаг

в А то р   кн и г ,  п р е п о да в а те л ь   и   в е б - ди з а й н е р ,  М о л и Е . Хо л ь ц ш л а г   н ап и сал а  с в ы ш е  30 к н и г , п о с в я щ е н н ы х в е б - ди з а й н у .  О н а   в ох ди т   в  ч и с л о   25 с а м ы х   в л и я те л ь н ы х   ж ен щ и н   в  Web.  Бе з  с о м н е н и я , в  м и р е   ди з а й н а  и р а з р а б о тк и  Web  М о л и  — онд а  и з  с а м ы х  я р к и х  и  э н е р ги ч н ы х   л и ч н о с те й . К а к   ч л е н   о р г к о м и те а   п р о ек т а   Web  Standards  Project (WaSP),  М о л и , н а р я д у   с  др уг и м и   п р е да н н ы м и   свое м у  дел у  р а з р а б о тч и к а м и  и  ди з а й н е р а м и , в сяч еск и  п р о п а г н ди р еу т   р е к о м е н да ц и и   к о н с о р ц и ум а   W3C.  О н а а тк ж е   ч и та е т   к рус ы   д л я   в е б - м а с те р о в   в   н у и в е р с и те е ш та а   рА и з о н а ,  ун и в е р с и те е   Ф ен и к с а   и   к о л е дж е Pima Community  College.  Е щ е  н а  п р о тя ж е н и и   п о с л ед х   ле т   о н а   в ел а   о ч е н ь   п о п ул я р н у ю   колон к у н и х   тр е Integrated  Design  в  ж ру н а л е   Web  Techniques  Magazine, п о св ящ ен н о м  тенх и ч е с к и м  п р и е м а м , п р и м е н я е м ы м  в Web.  К р о м е  то г , о ди н  го д  о н а  б ы л а   и с п о л н и те л ь н ы м е  о  М о л р е д а к то р о м   сай т а  WebReview.com. П о др о б н е л и   можн о  п р о ч и та ь   н а  е е  с а й т е   http:/ / molly.com.

О лг а в е н и

е е  

8

а 1.ы н д о х с И

й с ке т

а  2.й а з Ди

а  

54

х  

сн е В

х   о на т

х  

а  

а  3.к т с ре В

а  

р  

92

я  

98

я  

104

о м тн Э и гл я  лил

- т е р П - а о т рп

е  

а  4.к и ф а Гр

116 ж   б н ед

о  

а  

122

131

п Яо н с и к

й   са д  

132

е в о ю Рл ц и я

! 

140

р А е тД к еБ е ро Б г в

, с . 104

110

х   Н е  т а к у

я яи лл

91

й  дво

а Мн о

а л Бе

72

84

а

а ле Б

, с . 84

78

я   п о е з кд

ин д а З

я  а к д з е о п

66

В  зынел

а н чо Н

ан чо Н

60

а  

дал аБ

13 53

у нс о л д П

Глав

т  

н   ди т н а л т А

Глав

Глав

Глав

и н е д вВ

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о   з  гр ани ц

146 ! 

й   б ри

т Ч о  та м   в  гбуинл

152 з   е  

158 166

ово гере Б

й  бзи р

, с . 158

О гл а в л ен и

а  5.и ф а р г о п и Т Глав

е

я   вД

а  онеак

175

а  

174

si6  в Д а  оеана к

180

с ир е В

, с . 174

я  оид

ыв Жи

н  

м   ли

д ж Жа

186

и  мыв тре

а   рк о в

м  

 холпь

двоение У

н  

к итл а К

а   в  м о

а г пр у У

я  лай к уж

, с . 222

^

^

^

^

^

^

^

^

^

^

^ ц

234 й  са д  

240

а  

246

_ _

я   и оз г р д

ь  

о  Zen  К   юг

о ты р к т О

е  

ы н м д те р П

й  уле таз к

. пиц

.

254

266

я  ZenWorks 

272

о  

278

а  

и н е юч л к а З

__

ы  

е  о нк М ме н о и н к

253 __

260

у  о т  грнаиц

о р К п ца и

ш ш ш я вш ш ш ш ш тя ш ш т ш я ш тш ш

228

я  

ида Р

, с . 266

216 222

_ ц

ва Жи

К  юг у  о т ы ц и н  гра

215

я  

а  7.и ц к у рт с н о ке Р Глав ^

ы  

й  

ап ь лю Т t o

208

е т к фе эф

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA riwU| бе Н о   а н д  б онс а

yo u

200 а  

Z 1П С

tes

194

и  

г у   д а г о  lay  ; а то л З я  синдре A \   '  Щ ir- specific zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Mit  and  !} в а Гл а  б . ы н альи ецп С ort ie mind of  j ру з к н ы К е jhtenment и н ео в д У е   iks to thezyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA browse r

zyxwvutsrqponm

284

290 ь  

295zyxwvutsrqp

В в едни Добр з в ан п а ти у н е

о   п ож аловат  с ф о р м и р о в а т

ь   в   кн и г ь  н о в

е у   о   п р о ек т е  п р е дс та в л е н и

,  к о т р ы е   о  В с ем и р н о

й   п ри

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB й

.

С вои м   п о яв лен и е м   эт а   кн и г а   о бяз ан а   с а й ту ,  з а п у щ ен н ом у   8 м а я  2003 го ад .  О н  и з м е н и л   с ущ е с т в о в а в ш е е  д о  те х   п о р  о т н о ш е н и е  к  в е б - ди з а й н у   и  ч е р з  н е кот ро е   в рем я   п о л уч и л   м е ж д ун а р о д н о е   п ри з н ан и е . С ай т ,  н а з в а н н ы й   CSS  Zen  G arden, я в л я е тс я   р е з лу ь та о м   с о в м е с тн о й   работ ы   м н о ги х   о да р е н н ы х   л ю де й и з   раз н ы х   с тр а н . С ай т   Zen G arden о дн о в р е м е н н то м , и  галер й ;  о н  б ы р о в а ьт , ч ег о  м о ж н о  до сит ч н ы х   та б л и ц   с ит л е й .  М п р е лд а г т ь   с о б с вт е н н ы та б л и ц   с ит л е й   и   гр а фи ч ес к и о дн о  усл о в и е : б а з о в ы й с я   о дн и м  и  те м  ж е . У  э то г к а ж од м   в ари ан т е  ди з а й н

о   я в л я е тс я   и  м а н и ф е с л  с о з да н , ч то б ы   п р о д е м о н с тр и ь  з а  сче т  п р и м е н е н и я  каскд ы   п ри з ы вае м   в се х   ди з а й н е р о в е   о р и ги н а л ь н ы е  р а б о т ы   в  в и д е х   и з о браж ен и й .  Н о   ест ь   H TM L- ф а й л  до л ж е н   о с ат в ь о  п р а в и л а  н е т  и с к л ю ч е н и й ; в а  H TML- р а з м ект а  и ден ит ч н а .

З в чу и т   н е п р а в од п о д б н о ?  М о ж ет , даж е можн о , н о  с о в е р ш е н н о  о ч е в и дн о , ч т о   в CSS н и ч е м   н е  упсут ае т   др гу и м   и н с т р му е н т а ти р о в а н и я .  В  э то й   к н и г е   м ы   п р е д с та в и рабо т ,  в ы с та в л е н н ы х   н а   с а й ет ,  и   п о др о б н к а к   и х   а в то р ы   п о дх и л и   к  п р о е к ти р о в а н и п р и   э то м   и с п о л ь з о в а л и с ь   и н с т р му е н т ы ди р о в а н и я . Ц ел а я э т о  б ы равдн о н ы х   и ед й л ю дь м м а , ка

О

еч

  кн и г а   о б   о нд о м   в еб - с а й е т л   р я до в о й   сай т , в а ш е   н е до му е н и . Н о  Zen G arden с о дер ж и , с то л ь к о   п ри ем о в , п р е дл о ж е н н ы и   с о  всег о  св еат , ч т о  п ер к  вс е  э т о  ум е с ти т ь   в  о дн о

м эт

а нк и г

?  С ер ь ез н о т   с то л ь к д   н ам й  к н и ге

  б р ое д в  ум е л ы

?  В оз х   рк у а м   п р о ек м   36  л чу ш и о   о п и ш ем ю   и  к а к и   и  м еот д ы   ко

г И Н А Ч М ИР П Е йаС

Е

т  CSS Zen Garden с о  всме и  опис наым и  в  кни г е  варинт м и   д и з йа н а  нсоидхта я  п о  арсед у  www.cs5zengarden.com.

об т Ч ы  увиетд ь  рзам укет View Source  (Тс ке View  (В и д) .

, йинадт т  HTML), корта

е  в  сеов я  об ынч

л Д я   о з н ка м л е н и я  с  тба лице й   с и ел й т м ро е л фо н  то т  ил и  ино й  врина т  дизйан с кыл у  View This Design's CSS. Н о т бь д у ын х  дизйано в  миенд ожхесант е  о эт

м  брезуа о  нсоидтха

е  фуцнки

ю я  в  мне

, с   омп щ ь ю  котр , нти дй а е  н а  сцин ар т е  вын ьимле та : л д я  рза й  с с ыкл и   р з а л и н оч .

х х , е -

?  Е сл и  б ы е   бы л о   б ы  о п о   п о ч у и те л ь х   раз н ы м и и  в сатл а   п робле .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а

М ожн о  л и  н а з в а т ь  э т у   к н и г у  до к му е н та ц и е й   и  с л о в ес н ы м   о п и сан и е м  сай т ? О чт а с ит . М о ж е т  л и  он а   с лжу и т ь р к у о в д с тв о м   п о  з а с л уж и в а ю щ и м   до в е р и я  м еот ад м  и п р и ем а м   в е б - ид з а й н а ?  О п р е д л е н н о ,  ад .  Я в л яест я  л и о н а   га л е р е й ,  дг е   м о ж н о   п о ч е р п н ут ь   и ед и   д л я   с о б с тв е н н ы х   п р о е к от в ?  Бе з  с о м н е н и я .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ю й е -

В вед ни е  н а д  э то й  к н и го й  н а П р и  работ Zen G arden з ак лю ч ен о  та к  м н о г о  соврем н о м  веб- ид з ай н е , чт н а я   к а о м - у н и дб у ь   о дн о м у   ге и сч ер п ат ь   в с е й  г л уб и н ы .  М ы ди м о   раскры т ь   вс е   о с о б е н н о с т те о р и я  ц в еат , тенх и к а  р а з м е щ е н и кн и г е  ес т ь   в се . М ож н о  л и  сч и ат н е  дл я  н а ч и н а ю щ и х яст х  в и з аул и з а ц и н у ю   ш кол у  и зин а х   и   та к п о с в ящ ен н ы М ы  рек ом ен уд е е  п а р л е ь н п р е вт о р я е ст я

м  б ы л о  яс н о , ч т о  в  сай т е о  р аз н о б р аз н ы х  з н а н и й о  лю б а я  кн и аг , п о св ящ ен о   а с п е ку т ,  н е   см огл а  б ы  п о н и м а л и , ч т о   н е о б ох и   с а й та . Т и п о г р а ф и я , я  э л е м е н то в  -   в  э то й

ь  э т у  к н и г у  уч еб н и к о м  п . Ч то б ы  с о с р еод тч и ьт с , н а м  п р и ш л о с ь  п р о п су ти  п о с тпу и т ь   сраз у   в  с р едн ю ю   можн о   н ай т и   з а м е ч а те л ь н ы е   осн ова м   с и н а тк с и а  и   гр а м а ти к м  кпу и т ь  к акю у - н и дбу ь  и з о  с  н а ш е й . Т огд а  в ы  уви д ет  в  в и з аул ь н о   п р и в л е к а ет л ь н ы

о  CSS? Да , н о я  н а  то н к о ь  н ач ль .  Н о  в   м аг е   к н и ги , и  CSS.  н и х  и  ч и ат ь , к а к  те о р и я е  о б р а з ы .

Т не х и ч е с к и е  п р и е м ы , о п и с ы в а е м ы е  в  э то й  к н и ге , при з ван ы   п оказ ат ь   в с ю   к а р ти н у   и   п р о и л ю с тр и р о в а т сп ос б ы  р е ш е н и я  з ад ч   в и з уа л и з а ц и и , н е  о с та н а в л и в а яс ь   н а  к аж од м   а с п ек т е  с п е ц и ф и к а ц и и  CSS. Т а м , гд н е о б х ди м о ,  м ы   пу о м и н а е м   о   п о ед р ж к е   CSS  в   р а з , ч то б ы   н е  о тр ы в а ть с я   о т  р е а л ь н о с ти н ы х  б р азу ер ах

о мК у п р е н д а з еч н э т а нк и г а М ы  п и сал и  н а ш з ай н о м  и  р а з р а б о кт

ь

е тл ны р еаль н

м  п р о ч и та

ь  так ж е  ка а   л и етр а е   «В  з ак лю ч ен и е» ,  ч от б ы м   и   осн овн ы м и   п о н я ти я м и , а ь   к   ч те н и ю   э то й   к н и ги , к о т р а я и  м о ж н о   п р и м ен и т ь  н а  п р ак ит к е , м  с о б с вт е н н ы м  п р о е к та м . о   сп и ск

В  ч и сл е  р а с м арт и в а ем ы х   ет м  ест ь  и  б а з о в ы е   п ри н ц и п ы   в е б - ид з а й н а , п р и м е н и м ы е  в  с ам ы х   раз н ы х , хо т я  и н е  в о  всхе , с и ауцт и ях .  С о з ад т ь   в е б - с рт а н и ц у ,  в к лю ч а ющу ю   та б л и ц ы   CSS, м о ж н о   и   с  п о м о щ ь ю   а в от м а ит ч ес к и х  и н сртму ен от в  ти п а  Macromedia Dreamweaver, н о дл я  р еа л и з а ц и и  р а с м арт и в а ем ы х   н ам и  п р и е м о в  вс е  ж е л чу ш е   п о хи д т   рчу н о е   к о ди р о в а н и е  в   к а о м - н и бду ь HTML- раекдот . Е сл и  в ы  п р и в ы к л и  к  п ер атск и в ан и ю и кон о к  с  п ан ел и  и н с тр му е н то в  в  р а б о ч у ю  о б ласьт , т о  в н ек о т р ы х   о тн о ш е н и я х   эт а   кн и г а   може т   п о к а з а ть с я не т х и ч е с к и  с л о ж н о й . В п р о ч ем , м ы  н аедм ся , ч т о  э т о  н е о тв р а ти т   ва с  о т  и с к шу е н и я  о б о гаит ь   с в о и  з н а н и я .

 по льз ват ели

 CSS

Ч и та е л и , уже   з н ак ом ы е  с о  в сем и  то н к о с тя м и  м о едл и п р я м о уг о л ь н ы х   о б л а с ет й ,  п л а в а ю щ и м   р аз м ещ ен и е м и   с е л к то р а м и ,  ет м   н е   м ен е е   н а й ду т   д л я   с еб я   м н о г о .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB п о лез н о г . Упо р  н а  в и з ау л ь н ы е  а с п е к т ы  в  с о ч е та н и и  с п р и м ер ам и   п р а к ти ч е с к о г о   п ри м ен ен и я  CSS, п р е дл о ж ен н ы м и   сам ы м и  тв о р ч е с к и м и   и   и з о б р е та е л ь н ы м и ди з а й н е р а м и  с о в р ем н н о с ит , — гар н ит я  то г , ч т о  даж е м а с ти ты е   п р о фес и о н ал ы   н а й ду т   ср ед и   м н о ж е с тв а я  вхсе , кт о  и н сетр у я  ди р а с м а тр и в а е м ы х   те м  н е м а л о  дл я  с еб я  н о в о г . .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA -

а

у   кн и г

у  дл й  сай отв

я   в и з ау л ь н ы в  те о р и

й   в о к а б лу я р и

и  и  п р а к ти к и   п о к а з а ьт , к а к  с  п о м о щ ь х  н а  сам ы х  с о в р е м н н ы о  в о з н и к а ю щ и е  з а д ч и

й   дл и  п р и м е н е н и ю   те нх о л о г и й х  сатн адр тх .

рт и П я н ы

я   о б с ж у ед н и я я  CSS, м ы  хо , о с н о в а н , м о ж н о  р еш а т ь

й  уп о р  селда н  н а  в и з аул ь н ы х   а с п е к а тх , н о  э т о н е  з н а ч и т , ч т о   в ы  до л ж н ы   о б ладт ь   чу е н о й   с ет п е н ь ю в  о б л а с т и  гр а фи ч е с к о г о  ди з а й н а . М ы  с та р л и с ь  о п р е де л я т ь   в с е  о с н о в н ы е  те р м и н ы   в  с а м о й  к н и ге , та к   ч т о адж е   ч и ат е л и ,  н е   з н а к о м ы е   с  ди з а й н о м ,  с м о гу т   из в л еч ь   п оль з у   и з  о п и с ы в а е м ы х   и ед й  и   м е от д в .

  п о л ьз в а т е л и а   и  те хн и ц и з м о , п о э то м у   боль ш а я  ч а с т е   те м ,  к т о   и м е т   ли ш ь   с м тн у о

У   яз ы к о вс е   ск аз ан н о есл и  то л ь к П ри м еч ан и р асп о л ж ен н о м

 CSS

е   ж а р го н

в   с в е дн ь  м а те р и а л

о   к  м и

-

а   д о с п ту н е   п р е д с та в л е н и

а е  о

е с о гл а ш е н и

я

К а с к нд ы е  та б л и ц ы   с ит л е й   (CSS) -   э т о  л и ш ь   о нд а  и з ш и рок г о  сп рект а  тнех о л ги й , оодбр ен н ы х  к о н с о р ц и у х м о м  World  Wide  Web  Consortium  (W3C),  п о лчу и в ш и общ е е  н аз в ан и е  «сант рд ы  Web». В  и х  ч и сл о  вяодх т  так ж е  HTML, XHTML и  XML. К дог а  го в р я т  о  п р о ек ит р о в ан и и   н а  осн ов е  сатн адротв , и м ею т   в  в и д у  все ь  н аб о р . Е лс и  веб- рсатн и ц а  саволснет а  в  со втсе и и  с о  сант рд ат м и , т о   го в р ят , ч т о   он а zyxwvutsrqponmlkjihgfedcbaZYXWV  а тсием в ос   ос и.т арм сдн

О сн овн о

а чН и н ю щ и е

 р ек о м ен еуд з  р ек о м ен едум о г   в   р а з е дл

е

рП о г а м м и с т ы

п У о рт е б л н и н и му адж

и  CSS. М ы ь   кн и г у  и ,  п р и в едн н о г о я   с  с и н атк с и с о м   ж у е   п р и с тпу и т , ка к  э т и  ие д м  ч и сл е  и  к  в а ш и

п т О ы не -

и з а Дй н е р ы П ри м ен я воп рос

ет н х о л г и кю у - н и д б у р ут ы о с в о и ьт с з а ет п о к аж ет в  то

е zyxwvutsrqponm

Н аз ван и п е ч а т ю тс 12р х

в   H TML и   XH TML  м н о г о   о б щ его .  П о э то м у е  о б   H TML  с п р а в е дл и в о   и   дл я   XH TML, о  я в н о  н е  о г о в о р е н о  п р о ти в н о е . я   и   с о в ет у   р я до м

ы   н а   п оля .

х   о тн о с я тс

я   к   ет к с ут

я  с в о й с вт , о п р е д л е н н ы х  в  CSS, и  и х  з н а ч е н и я   мон ош и ри н н ы м   ш р и ф то м ,  н а п р и м е р ,  f o n t - s i z e  и л и  # sum m ary. П р и в ед м  к р акт и

, я : й

Фи л о с о и ф

я  CCS- ди з ай н

а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и   гл а в .zyxwvutsrqponmlkjihgfed В о т   к р а тк и й  о б з о р  все х  сем у   п р и   уп о м и н а н и и п ер ч ен ь   то г ,  ч т о   и м е ст я   в   ви д Internet  Explorer:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  1.  ЙЫН ДО ИХС  т еск т л ав Г Internet Explorer -   вс е  о с н о в н ы

е  в е р с и . К  н и м  о тн о с ят я  в ер с и и  5.0,5.5 и  6.0 дл я  Windows, а  так ж е   5.2  дл Mac OS X.  В ерси и   м л а дш е   5.0  с его нд я  уж е   п р а к ит ч ес к и   н е   и с п о л ь з ю у тс я ,  ат к   ч т о   в   б о л ь ш и н с тв е   с лч у а е и х  м о ж н о  н е  п р и н и м а т ь  в о  в н и м а н и е ; Internet Explorer дл

дл

я  Windows.  В реси Internet Explorer д л ка к   п р а в и л о ,  в е р с и Windows  н е   р а с м а рт и в а ю ст я

аК это

к а с тв о з ь л п й нк и г о

У  ти п и ч н о г ч аст о   н аз ы ваю И з   н е е   можн о ди н  и з  о с н о в н ы р и  п р едс ат в л ен н о г н о г о  к о н етн т в о й   с и с те м о й с ы лк е  н гау И м ен н о  так у ги . Н ел ь з я р або т ы  с  н е ч ат ь   с  п ер в о м о ж ет е   ср аз и н ерт с у ч а в  с  л ю б о г

я в

я   Windows  -   в с е  о с н о в н ы

е  в ер с и и и  дл я   М а е  н е   р а с м а тр и в а ю тс я ; я  Mac  -   в е р с и я  5.2 дл я  Mac OS X и , я   5.1  д л я   M ac  OS.9.  В е р с и и   дл я ;

Internet Explorer x.x  -   есл

м е р  в ер си и  и л си и  н е   р а с м а тр и в а ю тс я

-

и  н ес к о л ь к

Р ас к э волю ц и с а ет д

з  о  в о з н и к н о в ен и и   п р и м ен яем ы я  ср кут

л ав Г

 2.  и заДй н

и  и ед и  сай т а  CSS Zen G arden и  о б х   в  н е м  таб л и ц   ис т л е й . Ожбсу и  и  о б щ и е  п р и н ц и п ы  ди з ай н а .

а  р аз м ект

Р а с м а тр и в а ю тс я   осн овн ы п ри м ен ен и е  в  к о н те к с т с ы   те о р и и   ц в е ат ,  п р о п о р ц и о тн о ш е н и я  м еж д у  ш р и ф т а м ж е   с о в м е с тн о е   и  г а р м о н и ч н о P hotoshop  и  CSS.

е   э лем ен т ы   ди з а й н е  Web.  З а тр а ги в а ю тс й   и  п о з и ц и о н и р о в а н и я и  и  ф о т г р а ф и я м и е   и сп оль з ован и

а   и  и х я   воп ро , , а  так е   Adobe

л ав Г  3. В е р с т ак и  уп о м я н у т   к о н к р е тн ы й  н о С о з да н и е  с л о ж н ы х   м а к е от в   с тр а н и ц  с  п о м о щ ь о  н о м е р о в , т о  о с ат л ь н ы е  в ер В ер к с т а  с  н е с к о л ь к и м и  к о л н к а м и , н а  баз е   п л а в ю щ и .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA блок в   и  п о з и ц и о н и р о в а н и я .

я

л ав Г

 4. Гиакр ф

й

П р и м ен ен и е  г р а ф и к и  в  до п о л н е н и е  к  м ак еут с о з да н и я  гр а фи ч е с к и х  и з о б р а ж е н и й . З а м ен о  сай т а  и м е ст я  о тп р а в н а я  то ч к а ,  к о т р у ю фо р м ат ы   гр а фи ч ес к и х   фай ло в .  дГ е   н а й т т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   й ьо н а л н ч   и л и  йенаш м о д   атинцйрсе. гр а фи ч ес к и й   м а те р и а л . о   п оп аст ь   в   лю бо е   м ест о   сай т ,  в ы б р а в л ав Г  5.  и Тпоягр аф х  р а з едл о в   и  слуед я  п о  с с ы л к а м  в н ту о   в  н е м  к о н те н та . Д л я   п о и с к а   н жу Вес ,  о тн о с я щ е с я   к  ти п о г р а ф и и ;  о гр а н и ч е н и а  м о ж н о  так ж е   в о с п о л ь з о в а ть с я   п ои ско п оль з ован и е   ш р и ф то в   в  Web  и  к а к  и х   о б о й ти .  А   м о ж н о   щ е л к н ут ь   п о   к а о й - н и б ду ь р аз м ер а  и  га р н и рту ы   ш р и ф та ,  гр а фи ч ес к и д  и  п о с м о тр е ь ,  д ку а   о н а   п р и в едт .

л ав Г

ю  м оедл

ь   м ы   и  в ы б р а л и   дл  ск аз ьт , ч т о  к ак о й - т о  о п р едл н н ы й  п р а в и л е н  и л и  н е п р а в и л е н й   с тр а н и ц ы   и  ч и та ь   о т   корк у   п ер й т и   к   гл а в е ,  к о т р а .  К н и г у  м о ж н о  ч и та ь   в  л ю б о о   п р и г л я н ву ш е г о с я   в ари ан т

Кн иг а  с о с т и т   и з  дв у х  к р пу н ы х   ч а с ет й •   в   п ер в о й   гл а в е   о б сж у а д е т я   су тр о й с тв G arden  и  н е к о т р ы е   осн овоп олаг ю щ и п ри м е р   с рт к у а   р а з м е тк и   и   м е от д и к рован и я , о б е с п е ч и в а ю щ а я   ги б к о с т

я  да н н о

й  к н и й   сп о с

. В ы  м о ж ет и  д о   к о р к и я   ва с   о с б ен н м   п о р я кд е а  ди з а й н а

б  н а , а о , н а -

ь  м о ди ф и к а ц и й

 6. Спец и альнеы

Н е тр и в и а л ь н о ле й   в   з ав и си м о ст ки х   сп ос бо ч ен и й   с  п о м о щ ь

л ав Г

,  м е то д а  г р а ф и к и и   и с о х дн ы

ы , й

я   н а   ис .  Eibi6op е  ш р и ф т ы .

т эк ы фе ф

е  п р и м е н е н и и   о т   б р азу е р а в   в е р с кт и   и   о б хд ю   о с т р о му н

е  CSS дл я  ф и л ь тр а ц ,  с о з да н и а   ет н х и ч е с к и о   н ап и сан н ог

и  и  сит х   ги б х   о гр а н и о  к оад .

-

я   н овы

-

 7.  еоРкнс т рцкуи я

.

: о   сай т е   те м ы а   п р о е к ти

ю   CSS. х

а   Zen , н а ;

•   в от р а я  ч асьт , з а н и м а ю щ а я  п о ч т и   в с ю   к н и гу , сост и т  и з  ш ест и  глав . В  кажод й  рас м рати васет я  п о  ш есьт в а р и а н от в  ди з а й н а  Zen G arden с  то ч к и  з р ен и я  какой ли б о  о б щ е й  тем ы , н а п р и м е р  ти п о гр а фс к и х  в о з м о ж н о с етй .  И з чу и в   раз ли ч н ы е   п р о блем ы   и   м ео т д ы  и х р еш ен и я  н а  э ти х  36 п р и м е р а х , в ы  о с в о и т е  о с н о в н ы е п ри н ц и п ы   в е б - ид з а й н а ,  а  так ж е   сп ос б ы   п р и м ен е н и я  ф о р м а ти р о в а н и я  н а  баз е  CSS.

П о с то й т ка и з н о пы н я ю тс

е  з а  с п и н о й  ш ес т к   о н и   э т о   ед л а ю т .  М  р а с м о тр е н н ы х   р ан е  о бсжуаде м   к а ж ды й ,  и з л о ж е н н ы х   в   п р е д ы д ущ и я  н а  п р а к ти к е  и

и   ди з а й н е р о ы   в о з в р ащ аем с е  в а р и а н то в  ди з а й н о   ш аг .  Н а  в а ш и х х   п ят и  да ю т  п о тр я с а ю щ и

К а к  в и д ет , м ы  п о с та р л и с ь  в ти с н ту си м у м   воз можн ог о   д л я   от г , ч то б п олн ы м   и с то ч н и к о м   п о   со в р ем ен н о м осн ован н ом у   н а   с ат н д а р т х . Н а ед м с я , ч т о  ч и та к а к  н а м  б ы л о   п р и я тн э Дй

в  Ш

ь   кн и г о  п и с а т и  и  М ол

у  в а м  бед у ь  ее . и  Хагл шц оьл

в   и  п о с м о тр и те я   к  н е к о т р ы в  и  далеть   гл а з х  п р и н ц и   гл а в х ,  п р и м е й  э ф е к т

ь   в  э т у  к н и г у  м ак ы   с е дл а т ь   е е  с а м ы у   в е б - ид з а й н у

т  та к  ж е  п р и я тн о ,  авсгу

, м . м ,

, т  2004 г .

В в ед н и

л Б а о гд р н с т э й вД

 Ш и у   ск аз т ь   сп аси б о   свое й  ж е н е  Э й п П р еж д е   в с е го , хоч р и л  з а  то , ч т о  о н а  до л г и м и  в е ч р а м и  м и р и л а с ь  с  м о и о ст у в и е м ,  к огд а  я  р а б о ат л   н а д  э то й  к н и г о й  в  м ест н о й   к о фей н е . Бе з  е е   п о де р ж к и , п о н и м а н и я  и  те р п е н и я  я  б ы  н е  с п р а в и л с я .

К о н еч н о и  Ли н де п р и тв о р я л и с ь

ю  п ерсон а о   ет р п е л

, я  б л а го д р е ,  и  б р а ть я , бтду

л  к о фе й н и   п арн я , и  п о и л

н  так ж м   М эт о  п о н и м а ю

е  с в о и у   и  Д ж е р м

м -

и  Starbucks з а  то , , п р и м о сит в ш его с я  в и  ег о  к о ф е  с  м о л к о м . ) м  р о ди те л я м

и   з а   то т  вс е  н а п и с а н н о е

, Г орд , ч т о   о н .

а   о дг а   н а з а д , кодг а   я  то л ь к о   н ач и н а л   з а мд у ы в а т ь с н а д  п р о е к то м  Zen G arden, я  да ж е   п р е д с та в и т ь   с еб мог ,  ч т о   в о к р у г   н е г о   о б р а з еу т с я   та к о е   с о б щ е с тв о Д р зу ь я ,  в а с   с л и ш к о м   мн ог , ч то б ы   я   м о г   п о б л а го д р и т ь  к а ж од г , н о  в ы - т о  с а м и  з н а ет е  о  с в о и х   з а с л г ау х Т о , ч т о  в ы  дела т  р а д и  п р о ц в е та н и я  Web,  в до нх о в л я е т  и  в о шду е в л я е т   м ен я .

М оли

о м к . к

у и

э й вД

я е  н е

О гр о м н о е  сп аси б о  м о ем у  со ав тр у  М о л и  з а  то , ч т о  он щ е др о  дел и л ас ь  с в о и м и  и едям и  и  о п ы то м  и  п обдар и вал а  м ен я . Е е  п ер у  п р и н а дл е ж и т  к н и га , к о т р а я  п р и в е л а  м ен я  в  э т у  о рт а с л ь  м н о г о  ле т  н аз д ; а  с о в м еснт а я  ра бо т а  н а д  э то й  к н и г о й  б ы л а  и с ти н н ы м   до у в л ь с в т и е м

. . а .

 Хольцш лаг

дУ и в и т е л ь н о   р а б о та ь  в т ы   та к   б ы с т р о   с та н о в я тс н а ш  тру д  м о ж е т  в  м г н о в е н и лен и е  о  Web.  И м е н н о  т а к и с о в м е с тн о е  с  Д э й в о м  Ш и м н е  ш а н с  ув и де ть ,  к а к  м о н ови л а  др уг о г о  ч е л о в е к а ок аз а л   вли ян и е   н а   ц ело з ай н еров .  Т о ,  ч е м у   я   н а уч и л а с

у   ск аз ат ь   сп аси б о   М ай к лу ,  к о т р о г Ли ч н о   ж е   я   ох ч лю блю , а  так ж е  с в о е й  с ем ь е  и  др уз ь я м , к о т р ы х  я  в ы с о к о  ц е н ю  и  к о т р ы е  м и р я тс я  с  м о и м  п е р е м е н ч и в ы н равом :  с п ас и б о   з а   ваш у   п омощ ь   и   п о де р ж к у .  К а а в д с ге , благо др ю  Д э в и д а  Ф ь ю гей ат , с в о ег о   л и ет р а ут н о г о  а ген т а   и  л и ч н о г о  др гуа , к о то р ы й  н и к о гд а  н е  о с та в л я л   м ен я   св о е й   о п ек о й   и   м уд р ы м   р ку о в о д с т в о м И , к о н е ч н о , с п а с и б о  м о и м   ч и та е л я м   и   в с е м   п о с е ит те л я м  м о е г о  с а й т а  -  з а  п о де р ж к у   и  о б о др е н и е , э т о  та мн ог о  з н а ч и т  дл я  м е н я .

-

В ы раж а ю   п р и з н а те л ь н о с т ь   комп ан и и   D ream F ire Studios  (www.dreamstudios.com)  з а  то , ч т о   о н и  п р еод с та в и л и   о х с ти н г   дл я   с а й т а  Zen G arden и   п р о д л ж а ю т п о де р ж и в а т ь   его , хот я  с а й т  с и л ь н о  р а з р о с я . Дв

zyxwvutsrqpon

д р уг и х  д и з а й н е р о в , в н е с ш и х  с в о ю  л е п т у   в  р а з р а б о т к у   сай т а   Zen G arden, п о з в о л и л о   м н е  л уч ш е   п о н я ть , ч т о   та к о е   CSS, б о л е е   э ф е к ти в н о   п р е п о да в а т ь   эт у т е хн о л о г и ю   и   со в ерш ен н о   п о- н овом у   в з г л я н ту ь  н а Web.  П о э т о м у   п р еж д е   в сег о   я   б л а г о да р н а   Дэй ву ,  а з а те м  уж е   в с е м  п р о ч и м  уч а с тн и к а м   п р о е к та , м н о г и е и з   кот ры х   -   м о и   д р уз ь я   и   уч и т е л я .  О н и   п о м о г л и м н е   реали з оват ь   о ди н   и з   сам ы х   з н ачи м ы х   в   и с то zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA р и и   в е б - п р о е к то в .

и

(И , киатс , благодр ч т о   о н и  та к  до лг лг у у  с о  св о и м  н бкоту м

е

  о б л а с ти ,  гд е   н а ш и   с де ут н я   н аш и м и   уч и т е л я м и ,  дг е е  о к а  и з м е н и т ь  п р е дс та в м  о п ы т о м   с та л о  дл я  м е н я  н а п и с а н и е  к н и г и . Э т о   да л о я  с о б с тв е н н а я  р а б о т а  в од х ,  к о т о р ы й , в  с в о ю   о ч е р е дь , е   н ово е   п о к о лен и е   в е б - ди ь   у   Дэй в а   и   м н о ги х

 и  М о ли В ес

м  п р и н и м а в ш и

 вм е с т е

м  учасит е   в  п о дг то в к е  э то й  к н и г и о гр о м н о е   сп аси бо ! Ч е р и л   И н гл а н д  -   н е   п р о с т о   з ам е ч а ет л ь н ы й  р еадк от р , о н а  п р е в р а ти л а  р а б о т у  в  уод в л ь с вт и е !  Бл а го да р и м   Шо н   И н ма н  з а   ус и л и я   п о   те н х и ч ес к о м у  о ф о р м л е н и ю  р ку о п и с и  и  Э л и з у  Р а б е л и н о  з а тщ а те л ь н у ю  к о р е к рту . М ы  так ж е  п р и з н а те л ь н ы  в ы п су к а ю щ и м  р е да к то р а м   (Ш а р л и н  Уи л , К и м  С к о т т  и иХ л а л   С ал ) , б л а го д р я   и м  тек с т   са т л   г о р а з д о   л уч ш е . И , н а к о н е ц , в ы р а ж а е м  б л а го да р н о с т ь   Н эн с и  Р ю н ц е л ь и   К ли ф у   К олб и   з а   то , ч т о   о н и   п о в е р и л и   в   и ед ю   и п о м о гл и  н а м  в о п л о ти т ь   е е  в  ж и з н ь .

CSS Zen Garden, с .  14

• 

• 

: ' ! -

; 

; •

•

 

ре теВ

, с . 18

:

: '.

4zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPON

т i

м Шр о т

, с . 19 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA р ы т Че е  аи кр , с . 19

Ы Н СХ О Д

Й

се к т Плавлены

й ы с р  с м е с о с о л

З а  оечн ь  ко р кот е  вр ем я  в е б - ди з ай н ул с я   о ечн ь   д а л е ко .  иД з а й н е р а п р и хо д и л о с ь   чи а т ь   и с хо д н ы с вто а ь   м е от д м   про б   и  о ш и б о гат ь  п р ед л ы   в о з м но ж г о . Эт ны й  и  з ахв ыт аю щ и й   про цес

, с . 19

Од н а к о   с о   врем ен м   с а лт м ос т ь  вы р аб окт и  с атнд ро м у ю   с в яз ан о   с   с ам о й   нв оа ж гр ам м о й   -   в е б - б р ауз е р о м п о з н а к о м и те с ь   с о   вс ем , чт и де о л ги , п р о ц едур а х  и  м еотда н о г о   в е б - ди з ай н а . •   Th e  Ha i l b y  Michael

Вариан

ip e c if ic

та н й а з  ди

, с . 50

т н  п р о д в и м   б у в к а нл ь е   те к с ты

о , д е й

-

к   и  р а з д в и о  б ы л   с п о н та .

-

а   яс н а   н е о б хо д и в  Web.  тЭ о  н ап р я й   дл я   на с   п р о .  В   э то й   г л ав е  в ы о   н уж о   з н ат ь  о б х  с о в р е м е н -

В   ко н ц е   1990- х   г о д о в   Вс ем ирна б ыл а  д и ки м  и  о п ас н ы м   р оф н ти р о м •   We n t  &  Tld> н яло с ь , и  вс е  б ыл о  в о з м но ж . То гд b y  OH  Dale  . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA на с  ещ е  н е  з н ал , чт о  и з  в с е г о  э то г с я . И  ка к  э т о  час т о  б ы в ае т   с  н о в о й м ы   с тр е м и л с ь   «р аз дв и нут ь   гр ан и ц дан о г » .

я   п а у ти н .  Вс е  м е а  н и кт о  и о   п о л у чи т  и г р у ш ко й ы   изве

а з , -

И с ох д н ы

й  тсек

инево к з В

т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

е

И  м ы  и х  р а з дв и га л и дл я  р а з м е тк и и   гр а фи ч е с к и в е р с кт и , с  п р ез р ен и е о гр а н и ч ен и й  и  та б л и ц дл я  к о т р ы х О сн овн ы то

в  и н а ч е о ч ен в ы г л я ед р ту

ь  к о н к р ент о ы   п л ев ал

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

en G a r d e n zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQ

. HTML в о з н и к  к а к  п р о с то й  я з ы к  н ачу н ы х  сатей . П о с та в щ и к и  б р азу е р о в е  ди з а й н е р ы , н е   н а й д я  та м   ср едвт   дл я м  о тв ер гл и   его . Д л я  п р е о д л е н и я   п о яв и ли с ь  в с я к и е  ухи щ р е н и я  ти п а   е тг а , вс е  э т о  ш л о  в р а з р е з  с  те м и  ц е л я м и ,   HTML п е р в о н а ч а л ь н о   р а з р а б ты в а л с я .

е  э л е м н т ы  п р и м е н я л и с , ч е м  э т о  з а мду ы в а л о с ь е  н аз н ач ен и е и   н е в ы р а з и те л ь н о и  в  угод у  в и з ау л ь н о м

ь  дл ; э л е м е н ты

я  с о з да н и

я  м а к е , и м е ю щ и

, игн о р и р о в а л и с ь . Н а   п р а в и л ь н о с т у   ук р а ш е н и

The  Road 

to 

Enlightenment

U ttering a  dark  m d  dreary  road  by  ihe рЯ я

 relict o* im wvr

zyxwvutsrqponmlkjihgfedcbaZY

• penile Ь од.и яп фц й Ы

е   КП

Д   and   I M I M   CfS  vippott.

Tudiy,  we  «iii!,i  dtjc  tb«  niitx!  tt*  < | w «mipletF  and  lota! owtrol  H  

 (iie. Vet, r*»2y,

thr  style Ы  a  Kyptrtrii  ilorwncul  П а   only • г у'я ,'

\ x  illmlratwl  in  i  rr*v ibil  gi- U  ptcyla  «xated  ii  by  ieinunslnitiim  wh»l iicui  iruiybt.»

rf  m  are  uWal  ш  tht !к г Ьд

'Ы

^ erf ihtae  able  In create t№>ut> ' frcm  vtruiturc. Tn (Liu, nv^H  ex.

  tieat  triria  *(id  hati»  have  been  detiujinlraled  Ь «у *п и 1и п аЛ (1и *1в»г

.  Ifeitgiienbiw

tH&v tlwir  tiiaik. iliU ntcilr. todj4nЈr.

Р а з м у е с тя б р за у е о с и а у тц и и гр о к с а т н ад р н т о рду ция з а ш уд и т п о держ и в ат онд ны

,  в   т о   в р е м я   о т   осн овн ы в   п омощ и   бы л о   н е  до ж адьт с я т   от л ь к о   шд у х а ь т с я я   е д бу а  -   Microsoft  H.Netscape -   н а гр о м о ж да л е   р асш и р ен и е   н а  дргуо е г  дргу а   в  з н а м е н и то й  В ой н е  Бр азу ер о в ,  к о н еч н о , сп о с б вету т   и н н о в ац и ям ь   и х   н а  к о р н ю ; в еб- м асерт ь   н еск о ль к о   верси й а  и  т а  ж е  раз мкет а  ркед о  вы елгяд х  бзрауе х ,  сел и  в о б щ е  хот ь   ка -

х   п р о и з в о д и те л .  К аз лось .  Дв а   к р пу н е й ш и

й

, ч т о х и   о нд о  н е ,  срт ем яс ь   об й т и . К о н круен , н о   м о ж е т  и а   бы л и   в ы н ж у ед н ы   с а й та ,  п о с к о л ь к у а  оид н ак о в о  в  раз т о  оотбраж лась .

Purttcipati&l Uiaphic wtiiM ooiy flmm  VUM  а и —n j-   that п о r

п  C 0  utivicn  car.  iuc  tlvtn  11 Awt i^ (• *• •»

  fix  tdfMMHl lurijriaUand  t.pj «.1 w*- ki(^  wLiix Q K

GfW  if  yoti'v»  « v «  workrti  thi*  и в у   Ь тй ю

,  bill Ailkiw  «he  lirftii  liiiU diicarii

Ittntr  filf  41*1 vm  fits U> suhiuil  Ь |Г Я л 1 *т

«41)'  bmBy.  U M i v™  lxavnvu>|>lrt.«

е «1 m ialwl  1тця *

irilt b* pWrd  ж   our «ervet.

. I- IIMI ibmiiii

Benefits

Why  piutiopiiie?  KJT  reouiiiriiiou,  hiitpicilim am  fa  CS8- b»ud Лпщ ч

 П Ы к

llir  leap, liul  т м   .ч и «^

H o  - • mli  № k W

Ц  

a  teujuiv*  we «iniil itiex Wwhcii «t*i.i- ^  1

w  l«b>'  M BraanJniurTuufwwlwaro  uiir

и ш

jl  wiB  bo 1  bklwical  Н ш Ци

1  have.  One  day  tint

ц   llutt  ау Л

 и

м

«  much  i".S;- 'i  «  pm ible.  tX4i  riiouLI  be  Hinit

В  о б щ е м , б ы л  с п л о ш н о й  к а в р да к . Н о  о г р о м н ы е  сму м ы ,  б есп еч н о   в ы бро ш ен н ы е   н а   в ет р   в о   в р ем я   бму а и н ет р н е -т к о м п а н и й , вс е  ж е  с п о с б свт о ал и  рост у   Web, н е с м о тр я  н а  и м е ю щ и е с я  п р о б л е м ы . О б о с н о в а т ь   р ас х  в ер с и й  сай т а  в  усл о в и я х  н ео одх ы   н а  п о едр ж к у   вд у гр а н и ч е н н о г о  ф и н а н с и р о в а н и я  б ы л о  н ертдну о . О нд аtb tlut ym • tal l ari^Mil и к о   н а   р уб е ж е   ты с я ч е л е ти я   и   а в то р ы   к о н те н та ,  и >  > Ы т г ч и н в е с то р ы  р е ш и л и , ч т о  с  н и х   вх а ти .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA el:niBDt> oUy. 'lbs  п и   'UJO  CiutStn i»  abutu  finwhwit  р г . т

etg«  iriJs  viewable by  u% Ы  (be lirtMnint  (ш ЬсК

Ы   C S  uul  not  the  bt

. Tlw  only m l  Д ц Д м м

*  "i W

V  ifoctunatfty,  ilesisnic*  tiiii  wiy  hifthlithtt  liw  fla»t  In  the  varioa»  im plan fcu t iau  4  С It- .lteicnt  Ь к м к м

»  ilitplay  Jliftunliv,  c t t u  annptetciy  >alidC»*S  ai  tirn n ,  and  tlili  b a a »i

middming  wlien  a  fix  fut   м м   Iradi  tu  bieabge  in  jiiotiur.  V U > l i t w w i  [и.ц >  Ь UfcnwwJM  on н  

rfiht  h M  jtvvkbk. f uit hrowM- r и т р К ш к

е  U «iB wni№ iiic t в  pip  w v r v ^

(ttpl

• «ПЙ А

We»

>ч, Ц ; i»rtrfnl  ш

lU t

t wm si!  IU  «- uB ** a  itrntMUiratiuu  Vim  rfU и   fuS  o n ffU *  wiyuur  *га^ |

Umitcd  м «

о пе ре м е

h t la «, ( V»e k e e l . 0t . fr i t 1 O , a . 1 у   J4 *tV4T")Ul'fe.  EAI^i^hl fXK

im iWiiim

C a n vt  toraoiM

а чл Н

..i, .o   R u«iefti«!»),  but « («A», il .1»•• И ..aiuu и • •. «In - ». , * - ^. ™

Ш Рис

с Ри

.  5  - f Раи н

й и  пт о т о р

п  Zen Garden, ве т е

р

с Ри

.  6  • •  Раи н

й и  пт о т о р

п  Zen Garden, вд о

а

.en

G a r d e n zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP id  ( o 

л  demornt ration ofu- hat

Ы Н ^ Д

р  

tag*, inoumpatibfc  DOM*,  «ml  brukcn  CSS

am  be accomplishedt'juatiy through CSS- bused щ  

must d«r the mnid of put prxticco. Web t hu been ndievnJ thank» t o tlie tireie»

design, select апуиЫ ihivt from the  liiualixtlii

г И Н А Ч М И РЕ П

Е

оП с к ль нево зм н о ж з м р а к ет

у  изм енит , аорвт и  и  тсекат

н у ы и ла ь м к ын о ч т пз с а у к о р ыт к о б  эо т

с Ри

Enlightenment

dork  and  d r t u y  nwJ  by  the  p u  к   Iks  rf

is  d  loft  Ike  tfw  WjC,  № 5

P  «nd  It»  awjur  braw*cr

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA into  (!йл   {ю.ес

The  и »  Zen  Oanlen  invite* yui  to isU » »iiJ nic4iute i»  ihr

Download  1 he

ь  HTML- й фа л   в п о с еидл т и  уж е   был о  б ы ы   и л тра по и   м е лн а о   в р ем ен и   н а   вы ер к у , смре тся ь  к  том у , чоб т ы   исч л о  эмело тн в  с и  с войс т в  c l a s s  и  i d  лыб о  доса т и   с  пом ощ ь ю  тбаил ц   с и тле й . Псло е ь   н о е к тр ы е  промебл ы  с  рзам окйет ,   бл ы о   т е ив п д р ь   зран е , -   м ы  погв ри м

imptrtiint  letKni  uf  thr  in atten .  В ч > htmiJtU-   and 4 # B i  

1ллл

,  И ни

 

»  f>  «*

w i

*  (Wily.

-  fiic (yet  io b*> lime- bewrial  tr.- hnir Xntfhic «Till». Tiie  Zen ( iirjru  «m i  to

и   з н е ча и ям extiii',  intpio',  и х !  enroiiiafy- -   |wrtiri|uti«n.  It)  begin, view ю т *  nf Bus sxi«tingdesign» in  lh« KM. CBddng an  any  m  wE  Imd  Ihr style ih wt into this МЦ 1 |Ug*.  1>w «d p  renuin*  the  u m r , м   л д я   м ци а к о д ф the «uly thin« ii.j.1 h »  li i u i ^ J i» Ac  r.iten ul «м   (On, Г « Ь  icnlty. а   йт с а а   в ы яи л с (MS nlkw« nwiplrie ana  total central orci  the  и у к   of*  hypcrteit  cb>nun«nl. The  tmfy w»y  thit е   з ь лен я м  не и ж . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA с Ри . 7 •   # 001, Б тс о н ж е т мяз е ь

. 8 •   #002, Плавы н е л

й  сы

р   с е с о  л

м

си Р

. 9 •   #003, Шр то

м ; n r n m u  CT

En l i g h t e n m e n t Littof 1119/ d*»ii  and

brokwi  CSS  t up p or t 1

 

• 

C

:

0

^

^

Today,  w «m u Xc l M r l h i mind  o l  M * t  pr«cHc*» .  Wab  «nligntwimtnt  MM b**n *chi«v«d t t unks  n. th« t ir aiM * «flort*  or  lot Ilk* № •  W3C, MSP  and t h * major  bfow«a

zyxwvutsrqpo

F

с Ри

. 10  - f  #004, Четыр

е к ар

и

иР с

a u — " •

.  11  •   #005, Жд ж а

а в  ко р

и

И с хо н д ы

й т ес к

о н с вО

й ва р и а н

т

т ди з а й н а »zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

«Бе зм тя еносжт ь

х   п я т и  в а р и а н то в  ди з а й н оХ т я   к а ж ыд й  и з  п е р в ы х   п р о е к та ,  о дн а к о   то л ь к важ н ы й   в к ла д   в  усп е вари ан т   од л ж е н   бы л  п о с то я н н о  о с ат в ьт с ет ч н и е   д л и те л ь н о г о   в р ем ен и .  В  к ач есвт е в ари ан т а   бы л а  в ы б р ан а  уто н ч е н н а я , м и н и м а л и с т к а «Без м яетж н о сьт » ,  отх я  н а  э т у  р о л ь   п р е т н до в а ри ан т  002 «П лав ен ы й  с ы р  с  ло с ем »  и з - з к о й   о б р а з н о с ти ;  к  с ч а с ть ю ,  п р е дп о ч те н и бы л о   о да т н о   «Без м яетж н о сит » .

а  в н е с о   о ди н я   н а  в и д у  в   осн овн ог о я л   и  ва а  б о л е е  я р е   в с е - та к и AB C D E F C H I J KLM

т  в  о с н о в н о м  в а р и а н т е  ди з а й сВ е  и з о б р а ж е н и я  и  тек с н а , з а  и с к л ю ч е н и е м   ет к с т а   в   сам о м   те л е   с т р а н и ц ы бы л и   н ари сован ы   в  Adobe  Photoshop.  С н ач л а   п р ед п о лаг ло сь ,  ч т о  тек с т ы   з а го л в к о в   у дб т   со тя ь  и н ари сован н ы х   в р чу н у ю   к а л и гр а фи ч ес к и х   ш т р и хо в н о , п о тр а ти в  ч а с  н а  р а б о т у   с  к и с то ч к о й  и  тшу ь ю , Ш реш и л ,  ч т о  ш р и ф т   C alligraphic  421 о т   к о м п а н и Bitstream  п о хди т   го р а з д о   л уч ш е   (р и с . 12). К и та й с к и в н т ру е н н я бя ти п и ч н о ны ти ли ф кра и ед н е о з н ач ю

м   и ер о гл и фа я   к р асо т

,

N O P Q R S TU VWXyZ

-

a bc de fg hijklm

з ,

n o p q r s t u vwx y z

и и

. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH  12 •  Образц ы т  шиф р а  Calligraphic 421 Рис

а   з а м ы с л о в а то с т ь  и е  ди з а й н е р ы  л ю т   до п о л н я т ь   им й   з ам ы сел .  П ы та я с ь   уй т и   о т й  з а п а дн о и  в с та в л я т ь   б ес м ы с л ен й   н або р   и ер о гл и фо в   дл я  п р и да н и я   та и н с тв е н н о с , Ш и  п о тр а и л   н ек о т р о е  в р е м я  н а  то , ч то б ы   и ер о г ы   н а  в е р ти к а л ь н о м   с в и тк е , и дщу е м   в од л ь   лев о г о я   с тр а н и ц ы ,  и м ел и   о п р ед лен н ы й   см ы сл .  И  хот я я  б ы л а   ох р ш а , н о  р ез луь ат т   вс е  р а в н о   п о л чу и л с я  с л и ш к о м  в р а з ум и те л ь н ы м : в ы б р а н н ы е  и е р о г л и ф ы » и  «умен и е» . т  «н ачло» ,  «п олн ы й »  и л и  «ц елы й

П о м н и ет , ка к  деьт м л и с т   б ел о й   мб у а г и В  резльату е   п оч л ау с к о тр у ю   м ожн о   бы л п р се а д т в и ь   ка к  ц воетк с рт а н и ц ы  -   э т о  дан Н а  р и с . 13 показ н о С н ач л а  п р о сыт м и к и з , а  з еат м  добавлен

с л о те и П в д

-

м   п р и с ущ

,  п о э то м и  с в о й  п р и в ы ч к

у   м н о ги

и  в ы  развлек ал и с ь   и  ду я  н а  клякс ь   ч ер н а о   п ер в с т . Дер в о ь   в о сп о м и н ан и я , ч т о  он о  п р о ш л  ц в еатм и  б ы о  н еск о ль к

, к ап

я  тшу ь з   со л м и н к у я   ф и р г ук а а  м яут ю   с а к л фе т м  венрх е м м  о  так и х   з аб в х о  н есколь к о  э атп о в н  грбуы в  с  деатлям и

ю  н а

у   ч ер я   рд е в о и нд а и  н  в  п р ав о

л  нари со в а о  слое

? , у  и  улг

у . .

й  э с .

.1Рис

3 • апно т  Поэ

е ани в  рисо

е  дерев

а

я

ж У е   ч ер з   н ес к о л ь к о  дн е й   сатл и   п р и охд т й  сай т ; з а  перву ид з а й н а  о т  п осиетл фи к   в ы ро с   д о  н ес к о ль к и х   ты с я ч   п о с е ит л е юЛ д и  в ы з ы в али с ь  до б р о в л ь н о  п ервст к и  дргиу х  яз ы к о в . С раз у  салт о  п о н янт о м е су л  уодвлет ри т ь   од л г о  н ак п л и в а ш и й с о  н и к а и х  дргиу к о тр г о  в  Web н е  бы л

ь   в ари ан т ы ю  ж е  нелд ю  тра й   в  ден ь . и  сай т  н а  дтсяе , ч т о  Z en G arden я  сп рос , дл я х  п релдо ж ен и й .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH

В о з н и к н о в ен и С  тех  п о р  с ай т  Zen G arden уп о м и н а л с н алов , и з да в е м ы х   в  р а з н ы х кн и г , та к  ч т о   ег о  к а н о н и ч е с к и ди з а й н а   можн о   с ч и та ь   з афи к си р о в ан н ы м с в ет а  п р и ох дя т  б л а го да р с тв е н н ы р о в  и  р а з р а б о тч и к о в , к о т р ы т а   а д лу о с ь   б у е ди т ь   свои х   р а б о т д а те л й кол е г  в  ц е н н о с т и  ди з а й н а  н ехт ,  к т о   п р и с л а л  с в о и  р а б о ты р ен и е  в  св о е м  к а р ь е р н о м  р о с ет д е й с вт и е  сай т а  Zen G arden. оХ т ч ело в ек о м ти в н ы за н сво и , хот д е м о н с тр а ц и н ег то и н с тв а

е я  в  дес якт а , и  в о   м н о ж ес вт с  в  и с то р и

  с рт а н а х й  сату

х   ж ру

е

. С о е  п и с ь м а  о т  ди з а й н е м  с  п о м о щ ь ю  э то г ,  к л и е н то а  о с н о в е  CSS. А  м н о ги , и с п ы та л и   р ез к о е , о щ ути в   мощ н о

и  в еб   в с ег

о -

о  сай

-

в  и е  и з  уск о е  в о з -

я  с ай

т  Zen G arden с о з ад н  и  п о де р ж и в а е тс я  о дн и м , о н  те м   н е  м ен е е  я в л я е тс я  п л о д м   к о л ек х  ус и л и й  до б р о в о л ь ц е в . С в о и м  усп еох м   о н  о б я   м н о ги м   та л а н тл и в ы м   ди з а й н е р а м ,  п р и с л а в ш и м и  р а б о ты . К аж ыд й  н аохид т  в  Zen G arden ч от - т о  св о е я  э то т  сай т  з а дму ы в а л с я   гл а в н ы м   образ о м   р ад и и   ц ен н о ст и  CSS дл я   ц ел й  ди з а й н а , н о  у о  о б н а р жу и л и с ь   и  дргуи е ,  з а р н е е  н е в до м ы е  до с .

•   Д и з ай н ер ам ес т к о гд чт о ад ч е й ны в е р с кт

, р е ш а ю щ и ь   д ку а   о б р а т и т ь с я а   в  о дн о м  м ес т   к от - т о  р а н ь ш , в есь м а   вы соки е  н а  сай т е  та б л и ц и  до п су ти м

•   Т а м  ж CSS  и р о я тн о себ я  ч то -

м  п р о б л е м и   ч то - т е  с о б р а н ы  с о тн е  уж е   с та л к и в а л с . И с п о л ь з о в а т ы  сит л е й  в  к ач есвт о   и  даж е  п о щ р я е тс я

е   можн о   н ай т и   н овы е  с п о с о б   с о з да н и я   раз ли ч н ы х   э ф е к то в , ч т о   ср ед и  с о ет н  в а р и а н то т о  н о в е н ь к о е .

•   Э т о   з а м е ч а те л ь н ы й   сп осо б р аз у е р а .  Все ь   к о д   з а в е до м с ве т у т  с та н да р т м , та к  ч т до л ж н ы   о ди н а к о в о   в ы г л я де т (Н а  п р а к ит к е  та к  о б сот и т бо к  и  о ству и я  п о едр ж к то в   в  к о н к р е тн о м  б р азу ер с я   уч и т ы в а т ь   воз можн ы в и ед , п р и м е н я я  дл я   э то г и   л уо в к и . ) •   И м ен н к о гд с та н д а р то в •   Эт Н и ч ег в ен и я

о  сю д а  хо тя

а  п р и в о дя

е   л е к а р с тв

о   н е   в ы о х ид т . а  тдру

?  З а г л я н и т

ы  п р и м е н е н и . В п о лн в  в ы   н ай едт

е  ди з а й н

а  ка к  дл я  высок в а л и фи ц и р о в а н н ы , та к  и  дл я  н ач и н аю щ и

я я

й   и  к л и е н то в а  н а  о с н о в

о   о т   тв о р ч е с к о г е   в   п ои ска

ь ; ,

е   ве е  дл я

б   п ро в ери т ь   п о в ед н и о   к о р ек т н   и   с о вт е о  те о р е ти ч е с к и  с тр а н и ц ь   в   лю бо м   б р а зу е р  дел о  н е  васдег . И з - з а  о ш и и  дл я  н е к о т р ы х  э л е м н е   ди з а й н е р а м   п р и ох д и т е   раз ли чи я   в о   вн еш н е о   в с яч ес к и е  CSS- фи л ь тр

т  р а б о т да те л ь   и х  в  п о л ь з

т  уб е ди т .

о   п р ек р асн о

+   Э т о  би рж п р о фе с и о н а л о в

у  в е р с тк и , теп ер о   н е   п о л ч у а е тс я и  р а б о т , ш а н с ы я  с  п о д б н о й  з а ь   п р е д с та в л е н е  о б р а з ц а  дл .

,  ес л

е ы . м ы , е

о   з а с то я х   в до н х о

. х

х  ди з а й н е р о в

.

И с ох н ы д Р а б о т да е л н о  о б р а щ а ю тс п р е лд о ж е н и е н о й  р а б о ты с тр а н и ц а •   П р е п о д а в те л р м у е н то ди з а й н а

З а л ео ж н и Ещ р е д л и ьт с ч и ат е ни и ед н а можн т ру и р о в а н н о м н о

й т ес к и   и  п о те н ц и а л ь н ы я   к  а в то р а м  в р е м н н о г . И х  п р о и з в е д н и х   кн и г  и   ж ру н а л о в м  дл .

и   н ао х я д я  о бчуен и

т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA е   к ли ен т м   п о н р а в и в ш и хс о  к о н рт а к т я  ч а с т . т   э то я  с о в р е м е н н ы

т   сай

ы   р е лг у я р я   рабо а  и л и  п о с т ян о  п о я в л я ю тс

т   п о лез н ы м  м еотад

т  с я  н а

м   и н ст м   в еб

е у н ад м ф е н т

-

а

е  д о   с о ат в л ен и

я   та б л и ц ы   с ти л е й   н е о б х ди м я   с   р а з м е тк о й   свое й   в е б - с тр а н и ц ы е   э т у   к н и гу ,  то , н а в е р н о е , с л ы ш а л и  о и  с тр ку ы   о т  п р е дс та в л е н и я . Д л я  те х  ж е я  в н о в е , с к аж ем , ч т о   о с н о в н о е  до с то и н с тв   н а  о с н о в е   CSS с о с т и т   в  то м ,  ч т о   та б л и ц о   п р и с о е ди н и т ь   к   и м е ю щ е м су я   хо р о ш у   д о к м у е н ут ,  да б ы  с дел а т ь   ег о   п р и в л е к а те л ь н ы м .

о   оп .  Р а з   в ы б   е о лд т , к о м у  э т а о   ди з а й ы   с ит л е й о   с рт к у   в и з ау л ь -

П о д   ф о р м а ти р о в а н и е м   в е б - с тр а н и ц   до л г о   п он и ма л и   вы бо р   н жу н ы х   баз овы х   э л е м е н то в   H TML в  з а в и си м ост и   о т   то г ,  к а к  о н и zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  .ютяс тасвл депр   Е сл и   ва м н жу е н   бы л   абз а ц   с   о т с уп о м ,  с л е до в а л о   п о м е с ти т ь етк с т  в н тру ь  тег а  < b l o c k q u o t e > , ч то б ы   с о з ад т ь  п о л я г И Н А Ч М ИРЕ П Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTS с   о беи х   с то р о н .  У   э л е м е н т а   < b l o c k q u o t e > ,  о дн а , каок й   эм е л н т  изсотвапьл ь  в  ко нрк ето й об т Ч ы   п о ин м ь т а к о ,  е с т ь   в п о л н е   к о н к р е тн о е   н аз н ач ен и е   -   п о дч е р к с и уац т , нн уж о  зтан ь  о с но в ы  язык а  HTML. В  квесчта е  прак н ут ь ,  ч т о   ф р а г м е н т   те к с т а   я в л я е тс я   ц и та о й ;  о тс ю и т че с о к г о  рокув дс т а  п о  рзам кет е  рын ь л ае х  домук еонт в  м ы д а   и   н аз ван и е .  П р и м е н е н и е   э то г о   э лем ен т а   дл я о м к ре у д н м  кни г у  Дэн а м ь  Сло хре ди а  «ше иРн я  н а  бза е  сна т в ы де л е н и я   те к с та ,  н е  я в л я ю щ е г о с я   ц и та о й ,  п р о с т о о тр а д в  Web: с прваонич к  п о  рмзак те е  и  смяил т » (Web Standards р а д и   с о з да н и я  о тс пу а ,  о з н а ч а е т   н еверн ы й   п о дх д  к Solution: Markup and Style Handbook. Friends of ED, 2004). з адч е ;  в ед ь   CSS  п о з в о л я е т   с де л а т ь   о тс у п   дл я   л ю б о г о   э л е м е н та . П рави ль н о е   с т р ук т р и р о в а н и т с у и   е лд а ,  в ы б о р   п о дх я щ и ш ен и е  до л ж н о  о с н о в ы в а ть с п р е дн а з н а ч е н , а  н е  н а  то м

е   д о к му е н т х   э л е м е н то в я  н а  то м , дл , к а к  о н   в ы гл я ди т

а   -   э то ,  п о , п р и ч е м   ре я  ч его  э л е м е н т .

Т еп ер ь   ц ель ю   с та н о в и тс я   п ер н о ван и я   в   CSS- фай л   и   и сп оль з ован и то л ь к о   дл я   о п и с а н и я  с тр ку тр ы з ай н а ,  к о т р ы й   н а к л а ды в а е тс с т р ук т ур у   и   п оз воляе т   в и з уа л и з и р о в а т HTML бо ле е   н е  селуд т  и с п о л ь з о в а т

с   в с ег о   ф о р м а ти р о е   H TML- р а з м ект и .  CSS -   э т о   я з ы к   ди я   н а   с ущ е с т в ую щ у ю ь   е .  Я з ы к ь   дл я   д и з а й н а .

Н у  а  в се- атк и  -   ч т о  м ы  в ы и г р ы в а е м м ан и е   п рави ль н ост и   с рт к у ы к о н е тк с е  о з н ач е т   слов о   «сркау» т

?  В о б щ е

, уедл я

я  так о е  в н и ,  ч т о   в   э то ?

м

З а е л но и ж

е  фундам ент

Се м а нт и е ч с а к Р аз н и ц к о ди р о в а н и ван и воль н щи р а з м е тк о й

а

я ра зм е т к а   м еж д е  р ад о   то н к о й й   фр агм ен

у   д в ум е  р а д и   п рави ль н о

а

я   и де о л о г и ч е с к и м и   н жу н о г

и   п о дх а м и я   и  к о ид р о и  -   м о ж е т   бы т м   п р и м ер .  С л еюуд ь   п р е з е н та ц и о н н о

о   п р е д с та в л е н и й   с е м а н ти к у   п р и в ед о   н аз ват

, п о э то м т   можн

zyxwvutsrqpo

: ь   од

й

: < brxbr>

г   И Н А Ч М ЕИ Р П

а   с ем ь ж / fo n t x/ k » < b x f o n t  s i z e = " 2  ">Н а ш < b r x b r > zyxwvutsrqponmlkjihgfedcbaZYXWVUTS Ha фифаргот и  Мэт т   и   Джер ми . а К к   обычн ,  Мэт т   корчи т   рожи .  У  на с   н е   ат к мног о  фотграфий ,  дг е   б ы   о н  этог о  н е   дела .< / font>

Е

ак К я   зин р ц а а   д м же у   о ег т ор м  см слы е  о н и  об оюзанч ли ч е . Т е г - э т о   о к н р е ты < d i v >  и   < / b o d y >  -   св р ы ю вк а щ е г о   и  зркаывющ ег с о и д хт н а я   н о е к рт ы й   ок н е т п р и м ер , те г  < b r  / > , о дно врем ен щ и м  и  зркаывющ и м , вр тну

м   < р >  и  эмоелтн м  р т  онд о  и  т о  же , н о  ест ь й  рле ит дза ь   в  язы к е е  э т о   те г и .  мен л Э т   с о ит о  теаг , мд еж у   о к рт ы м ;  и с люкечни е   с е то я в л а о   в яю л щ и й с я и   ген о  коент а   б ыт ь

?  В  неокт  тонк е  рза А  в о т  то т  ж е  тек с т , р а з м е ч е н н ы й   с е м а н ти ч е с к и :  HTML; < p > ,

т   и з  от З шаН а   семьж/ЬЗ > и   о б ны ч о Н а  фифаргот и  Мэт т   и  Джерми .  аК к   обычн , ,  на о Мэт т   ичрок т   рожи .  У  на с   н е  та к   мног   ро к ы т в а ю фот гра ий ,  дг е   б ы   о н  этог о  н е  дела.   н е  мет о ж . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Г рб у те г - л и ш оп и сат

о  го в о р я

, э л е м н

т  -   э т о  ч а с т я  к о н с тр ку ц и я

ь   с и н а тк с и ч е с к а ь   с рт к у

, тогд

а  к а к

, п о з в о л я ю щ а

я

.

В   п ер в о м   п р и м ер е   вс е  тег те л ь н о   дл я   ф о р м а т и р о в а н и я в с ат в к и  п соутг о  м есат  м еж д о т браж ен и я   ет к с а   п о л уж и р н ы   -   дл я  з а д н и я  р а з м е р В о  в то р о м   п р и м ер л я е ст я  н и к а о г к о   хо р о ш о   э лем н т к а ж од г о   фр а гм ен т с о б с вт е н н о   етк с кот ры й  в  к о н етк с

ь  с тр ку ы

и   п р е дн а з н а ч е н .  Т ег у  с тр о к а м и

ы   и ск лю ч и и   < b r >  н жу н ы   дл я , тег и   -   дл я м   ш р и ф то м ,  а   те г и а   ш р и ф та .

е  в н е ш н е м

у   в и д у   с тр а н и ц ы  н е   ед у ; уп о р  седла н  н а  то , н а с к о л ь ы   h 3  и   р   о п и с ы в а ю т   н аз н ач ен и е а   н а  с тр а н и ц е . Э л е м е н т  р   с о дер ж и т ,  а  э л е м н т   h 3  о п и с ы в а е т   з а го л в о к , е  все й  с тр а н и ц ы  и м е т  ур о в е н ь   3.

о  в н и м а н и я

Г лав н о е  в о  в от р м  п р и м ер е  -  э т о  то , ч т о  в н еш н е е  п р ед с та в л е н и е  э л е м е н то в  н а  да н н о м  э та п е  н е с щу е с тв е н н о м ы  вс е  р а в н о  п е р о п р е д л и м  ег о  с  п о м о щ ь ю  CSS. Э ле м ен т ы   вы бран ы  то л ь к о   и сох д я   и з  с о б р а ж е н и й   еак д в а тн о г о   оп и сан и я  к о н етн ат . И м е н н о  в  э то м  и  с о с т и с е м а н ти к а   HTML -   в ы б и р а т ь   э л е м е н ты ,  о с н о в ы в а я с н а  и х  п р е дн а з н а ч е н и , а  н е  в н е ш н е м   в и де . У   с е м а н ти ч е с к о г о   ф о р м а ти р о в а н и я   д о к му е н т а   ес т в есо м ы е   п р е и м ущ е с т в а ,  к о т р ы е   м ы   о б с д иу м   ч ту н и же . А   п о к а  и м е й т е   в  в и уд , ч т о   п р и м е н я т ь   та б л и ц т  к  п р а в и л ь н о м у , хо р о ш о   с е м а н ти ч е с к с ит л е й  селуд с т р ку т р и р о в а н н о м у   д о к м у е н ту .

; т ь ь ь ы и

И с о х дн ы

й  тс ек

т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

е п о ех д щ я

а о Сз д и н ра зм е т к и

Н е  сщу есвт у м е н то в с тр ку т и р о в а ть с н ек о т р ы ж е  м о ж н

й

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т  ун и в е р с а л ь н ы , п о с к о л ь к е  о б щ и о   в ы с к а з а ьт

х   п рави л  с о з да н и я  док у у   вс е  с тр а н и ц ы  р а з л и ч н ы   и  до л ж н ы я   с  уч е то м   свои х   о с б е н н о с те й . Н о е  с о б р а ж ен и я  п о  H TML- р аз м ект е  вс е .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

И с п о л ьз й у т е

 DOCTYPE

В к лю ч и в   в  н ач л о   р а з м е тк и  те г  DOCTYPE  (ти п  док у м е н та ) , в ы  с о б щ и т е   б р аз у е р у   и л и  и н о м у   п оль з ова етл ь с к о м у   а ге н у т , к ак о й  я з ы к  п р и м е н я е тс я  дл я  р аз м ет к и  до к му ен ат .  К ак и м  б ы  я з ы к о м  в ы  н и  п о л ь з о в а л и с ь , о   D OCTYPE  -   п р и з н а к   хо р о ш е г о п о м ещ ат ь   в   н ач л г   И Н А Ч М ЕИ Р П Е то н а .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA о н е л б у л Уг е и н е  од ж усб е  со р по в а  о б и н е л е д  от и р у  ст к ур т ы П е р ми :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA о т и н е л в  па тс д е р я  см . в ь т са т е р е  ж д Ро а  н ос н а х о Й а  (Roger Johansson) «Developing with Web Standards», о о н а во ки лб у п й

За в й д т е кУ а з а н и важ н о в с рт е ч а т мо ил о х ди т ровку н ы о т к и кова робн е гл а в

 язкы

 и  наб о р

 с и м во л

о   яз ы к а   д о к ум е н т е  DOCTYPE. Е сл и  в а ы  с  «к р о к о з я б р а м и » м  дел ы  н а  я п о н с к о м , гр е ч с к о м и  к а к о м - т о  дргуо м  я з ы к е , т о  в ы  з н а е т , к огд а   а в то р  до к му е н т а   з абы вае е  п о и с к о в ы .  П о с к о л ь к у   G oogle и  др гуи  ф и л ь тр ую т   р е з л у ь ат ы   п о- раз н ом   яз ы к а   з ап роса ,  т о  п р а в и л ь н о е   ук а з а н и   о к п у а е тс я   и  то гад ,  к о гд а   в ы  хо ти те я   м аш и н а   воз вращ ал а   с ы лк у  н а е  о  к о ди р о в к а х   си м воло в  м ы  п о г о в о р и е   н и же . , ч е

ы Пе р м и

е   е с те с тв е н н о г м  з а д н и ь   с тр а н и ц е  н а п и с а н

а   н е   м ен е м  п р и ох ди л о с ,  к о т р ы

е ь

е  н а  са ,  сауих л и , ч т о  п р о и с т   ку а з а т ь   к о ди е   м аш и у  в  з а в и с и м о с т и е   к о ди р о в ,  ч то б ы   п ои с  в а ш  с а й т . Под м   в  э то й

:

Г ов ри т ISO- к о д

,  ч т о  да н н ы м   en, т о  ест

й   до к м у е н ь  н а  а н гл и й с к о м

т   с о ат в л е

н   н а  я з ы к

е  с

.

О п р е дл я н о м  счлуа

т   к о ид р о в к е  U TF- 8.

у  с и м в о л

в  дл

я  од кму ен ат

, в  дан

-

З ае л н о и ж

е ун дам ф ент

а

. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE   рП и с ва и й т е   з а го л и в к Н а   к а ж од й   с рт а н и ц е   од л ж е с  с о едр ж аетл ь н ы м   з а го л в к о м о п и сан и я  ссы лки , н а  котру ю к а дл , а  п ои сковы е  м а ш и н ы ч ев ы х  слов , врсетч аю щ ис х я  в г и х   с л чу а я х   д о к ум е н т   о к а з ы в а е тс н а й е нд ы х . П о  в о з м о ж н о ст и е уд т  п р и п и сы в ат ь  ун и к а л ь н ы сы в ае т   и м ен н о  дан н у ю  сртан и ц у

н   бы т

ь   э лем ен

т   < title> и   с жл у а т  дл я е  усатн о в лен а  з а т  п р и о р и ет т  клю , п о э тм у  в о  м н о е я   вы ш е   в   сп и ск  к ажод й  сртан и ц е  сай т а  сел й  з аго л в о к , к о т р ы й  о п и .zyxwvutsr , а  н е  сай т  в  ц ело м

.  З а го л в к  в  бзрауе  п о в ы ш а ю  заогл вке

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPO

П е им р

css Zen Garden: The Beauty in CSS Design

о П л ьз й у т е с ь э л е м е н т ам и

  щ п оя х д и м и

М ы  уж е  к ас ли с ь  э то й  те м ы , н о  н е л и ш н р и ть :  и с п о л ь з у й т е   дл я   р а з м е тк и   та к и HTML, к о т р ы е  о п и с ы в а ю т  с тр ку у ег о  в н е ш н и й  в и д . Э л ем н т  р  слжуи т   дл з ац ев , а  н е  дл я  р а з б и ен и я  с рт о к и . Э л ем н н ж уе н  дл я  о ф о р м л е н и я  ц и ат , а  н е  дл я о п с ут а .  И  та к  дале .

е  бед у

т  п о в то е   э лем ен т

ы

 до к му ен ат , а  н е я  в ы едл н и я  аб т   blo ckqu o t e  ф о р м и р о в а н и я

К он еч н о ,  н е  в с е  э л е м е н т ы   H TM L  в о ш л и   в   с хе м у XHTML  1.0 Strict. В  не й  (а  р а в н о  и  в  семх е  XH TML  1.1) м ен ь ш е   э л е м е н то в ,  з а т о   о н и  с лжуа т   боле е   ч е тк о  в ы р аж ен н ы м  ц е л я м . Е сл и  н е  сщу е с тв еу т  э л е м е н та , о тр а ж аю щ ег о   н аз н ач ен и е  с тр ку тр н о й   е ди н и ц ы   в   ваш е м од к м у е н е т , т о  с от и т  в с п о м н и т ь  о б  ун и в е р с а л ь н ы х   э ле м е н ат х   d i v  и л и  sp a n .  Н о  ту т   ест ь   л о в шу к а . . .  в п р о ч ем , ч и та й т е   да л ь ш е . П е р ми

г   И Н А Ч МИ Е Р П Е

: The Road to Enlightenment

ын ло П й  соси п к в эо т нм е л , вы н е ч ю л к х  в м се х у  XHTML 1.0, а  е н : н м жо о  т й а н и   в л ре д з а е  «XHTML 1.0 Reference» н а  ст й а е The  Road to W3SchooLs(http://w3schooLs.com/xhtml/xhtml_reference.asp). zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Enlightenment

Из б е га й т е пу о т р е б л н и я П р и  и с п о л ь з о в а н и н ост ь   п е р е б о р щ и ть м ещ ен н ы е   в  с рт а еги ч ес к собн ы   с щ у е с тв е н н

  чр е з м е р но г   и  э л е м е н то .  В  н е б о л ь ш о о   лу ч ш и т

в  d i v  и  sp a n  ест ь  о п а с м   к о л и ч е с вт е   и  р а з и   важ н ы х   м е с атх ,  о н и   с п о ь   с рт к у у   д о к м у е н ат

.

И с хо д н ы

й  тсек

я  чресчу и  ж е  и х   оказ ы свате ь  сябе , н леьз я  л и  р еш и т ь  зча д я ощ д х и х  HTML- эмелн ов т . Н ап ри м ер п о л ь з о вь а т с я  элем н от м  d i v  атм sp a n  н е  рскеотмн у д я  уп ортебля Е лс си т

Н о   э т о   во с е  н о тк а з а ть с я .  Н ес к о л ь к к му е н т а   п о з в о ляю л о ги ч е с к и   р а з гр а н и ч и т в то р н о  и с п о л ь з еум ы ет н т  п о  с л и ш к о н ес к о л ь к о  уадч н р а с о р ти р о в а т ь

т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA р   м н ог у  с  п о м о щ ь

, т о   осит т  сп ро ю  боле е  п од , н и дког а  н е е  су дел т , гд е  боле е  умест н  h 3, a ь  вм ест о   label.

е   з н ач и т

, ч т о   о т   э ти х   э л е м е н то в   н ад о о  d i v  в  п о дх я щ и х   м е са т х   од т   л уч ш е   к о н тр о л и р о в а т ь   с ти л и  и ь   р а з де л ы .  С ч и та й т е   d i v  п о м  к о н те й н е р о м : р а с о в ы в а т ь  к о н м  м н о ги м  к о н те й н е р а м  н еодуб н о , з а т о о  р а з м е щ е н н ы х  к о н те й н е р о в  п о м о гу т   к о н ет н т  так , к а к  в а м   охч ест я .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

еП р м и

css Zen Garden The beauty  ofCSS  DesignzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

М е н ьш е

  р аз м е т и к

В   п р е д ы д ущ и х   дв у х   с о в е та х   н еявн о   п р и с ут в уе м ы сл ь   о   то м ,  ч т о   ч е м   м е н ь ш е   р а з м е тк и , те м   л чу ш е Т а к   о н о  и  есьт . Е сл и   в ы   о х ти е   в ы с тр о и т ь   с о л и дн у к о н с тр ку ц и ю , т о  н е  н ад о  з а г р о м о ж да т ь   е е  р а з м е тк о й И с п о л ь з йу т е  л и ш ь  т е  э л е м е н ты , ч т о  н ео б хди м ы , а  вс п роче е   о тб р о с ь те .  Э т о   п о з в о л и т   ум е н ь ш и т ь   раз м е фай л а   (а , сатл о   б ы ть ,  и  в р е м я   з а г р зу к и ) , к р о м е  то г б р аз у е р у   е д бу т  п р о щ е  и н те р п р е ти р о в а т ь  ф а й л  и , з н а ч и т , о н  б ы срте е   п о я в и тс я  н а  э к р а н е . еП р м и

т . ю . е р , -

:

The  Zen Garden aims  to excite, inspire, and encourage  participation.

а  е н :

The Zen Garden aims to excite,  inspire, and  encourage participation. 

р П а в и л ьн о а т р и б ту а м и Е сл р и б т ыу та б л и ц рт и А б у в с рт е ч а ьт с к ажо д жн

  п о л ьз й у т е с ь  class и  id и   до б а в и т

ь   к  э л е м е н та м   и д е н т и ф и ц и р ую щ и ,  т о   п о з дн е е   н а  н и х   м о ж н ы   с ит л е й   и л и   и з  с ц е н а р и я т   c l a s s  с   о дн и м   и   ет м   ж я  у  р а з н ы х  э л е м е н то в  н е  з н ач ен и е  арт и бту а   i d в  п редла о  б ы т ь  ун и к а л ь н ы м .

е   ат т   с о л а ьт с я  и з о  бед у  н а  я з ы к е   JavaScript. е   з н ач ен и е м   м оже т а  с тр а н и ц е , тогд а  к а к х  с тр а н и ц ы  дол -

З ае л н о и ж У  онд о г о к с ал с  м ож е н о   п ри м ен и т c l a s s  и бо ле е   он д о г н е  допскуаеят от р в  м о гу н е  до л ж н т е  и  дргиу б р аз у е р ы рТ

е  фундам ент

 э лем н т

а

zyxwvutsrqponmlk

а  м ож е

т  б ы т ь  н еск оль к о  класов , а  оид н я  к  несколь к и м  э лем н атм . М ож ь   к  э л е м е н т у   о дн о в р е м е н н о   а т р и б ут ы  i d , н о  н е  з абы в ай ет , ч т о  нали ч и е  н а  сртан и ц е о  э лем н т а  с  о нд и м  и  те м  ж е  з н ач ен и е м  id . И м ен а  класо в  и  з н ач ен и я  и ден ит фи к а т  состя ь  и з  бку в  и  ци ф р  (a-  z, A-  Z , 0 -  9), н о ы   н а ч и н аь т с я  с  ц и ф р ы . И  л чу ш е   с ч и аьт , ч т о е  чвусти етль н ы   к  реги срту ,  охт я   н ек о тр ы е   н е  о б р ащ аю т  н а  эт о  в н и м а н и я .zyxwvutsrqponmlkj т  п ри м ен ьятс

и  пе рми

:zyxwvutsrqpo

х  иикатое дрвнф

а  пын ьалив р



вД

а   е р ми п

а  нын ьаилверп

х  иикаетоднфрв

:

zyxwvutsrqponmlkjih

с И т п ы а ни

е вр е м е н

Е сл

ь   п и сат ь   п р о д л ж и те л ь н о , к а к  в а ж н .

и  в а м  до в ди л о с н а  с к о л ь к о - н и бду т о   в ы  п о н и м а е т е г о   с о та в л е н и ю Р а с м о тр и м , н а п р и м е р в ы де р ж а л а   мн ог то ,  ч то б ы   п ро в ери т П оск оль к у  к н и г до л ь ш е , ч е м  в еб - с рт а н и ц т о  в с ю  эт у  р а б о т коп и с ь  о к аз л ас

м ь  до к му е н т о   в н и м а те л ь н

,  р а с ч и та н н ы е   с щу е с т в о в а н и е о   п одй т

, и з да те л ь с к о е   де л о . Э т а , н а ц е л н н ы к  и  р е ц е н з и й ь   вс е  ф а к т ы   и  ул уч ш и т ь   а  о б ы ч н о  с от и т  н а  к н и ж н о й  п о л к а  н аохди ст я  в  к э ш е   б р а зу е р а у   н а д о   п р о де л а т ь   з ар н е , ч то б ь  б е з пу р е ч н о й . (П о с тчу и м  п о  де р в !у

й , и  к  к н и г

В  Web та к и х  о г р а н и ч е н и й  н ет , и  э т о  с о з да е свт а , та к  и  тр дун о с ти .  С ер в р  в о з в р а щ а е ц у   п р и  к а ж до м   о бращ ен и и   с о  с то р о н ы Обы чн о  э т о  о з н а ч е т , ч т о  в ы  может е   вн оси т н и я   в  ди з а й н  уж е  п о с л е   п уб л и к а ц и и .  П р щ е м  п о с е щ е н и и  сай т а  м о ж н о  ув и де т ь   эт кн и г а   ж е  о с та н е тс я   н еи з м ен н о й   вп лот да н и я . И с к уш е н и е  п р о д о л ж и т ь   с о в е р ш е н с тв о в а н и сай т а   з а ч а с ту ю   о ч ен ь   си ль н о , к  до с а д е п о дп и с а в ш и х   к о н тр а к т   с   фи к си рован н ы де й с тв и я .

а х  н а

о   п раво

с ти л ь е  кд у

. а ,

ы  р у

-

т   к а к  уодб т   в е б - с тр а н и   п о с е ти те л я ь  и з м е н е и   п о с л е ю ду и  и з м е н е н и я ь   д о  п е р е и з

) . , е

  ди з а й н е р о в

, м   сроко

м

оХ т я   с ай т   Zen G arden и  сщу ес вт у т  в  Web, н о  у   н ег о е с т ь   о с б е н н о с ти ,  и з - з а   к о т р ы х   с о ат в л е н и е   HTML ю  к н и г и . Е сл и  б ы дл я  н ег о  о к а з а л о с ь  б л и ж е  к  н а п и с а н и бы л о   раз реш ен о   и з м ен ят ь   р а з м е тк у   п осл е   то г , к а к п о с е ти е л и   н ач л и   п ри сы лат ь   с в о и   в а р и а н ты , т о  вс е с та р ы е  п о с тпу л е н и я  о к а з а л и с ь  б ы  н е р а б о т с п о с б н ы ,

И с ох д н ы и  сай з л уь ат од к м у е н а т «р аз ъ аеьхт с я» и з м ен ен и о с ат в ь с

ы н ос д И х с а йт

й  тсек

т  п ер сат

л  б ы  о тв е ч а т е   м о ди ф и к а ц и ,  а  м ак е я  б ы л я   та к и м

т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ь   с в о ем

и  тек с т т  с тр а н и ц .  Лю б ы е   с т р ку т р н ы и  б ы  п а гбу н ы , к а к  в  м о м е н

у   н аз н ач ен и ю . В  р е а   и з м ен и лс я  б ы  р а з м е р ы  м о г  б ы  н еп р едс к а з еум о е   и л и   в и з ау л ь н ы е , п о э то м у   H TML до л ж е н т  з а п сук а   с а й ат .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

й HTM L- т е ск а Zen Garden

С ч и а тй е , ч т о н еи з м ен а , ка охт я  ул чу ш и т бов . С а м  кон те н н о   осн овн ы е

 HTML- р уктс к  кест т  к н и г . О н о  б ы л ь   е е  м о ж н т  м о ж е т  б ы т ь   H TM L- э л е м е н т

т

а  сай т а  Zen G arden ат к  ж е а  н е  и з м ен и ст я  н и акодг , о  б ы  м и л и о н о м  с п о с  слегк а  м о ди ф и ц и р о в а н , ы   «в ы с еч н ы   в   к ам н е» .

Н а  с л еюуд щ и х   н ес к о л ь к и х  с тр а н и ц а х  п р и в ед н ы й   H TML- ект с т  Zen G arden, н а  к о т р ы 1 с ы л а ьт с я  в  р а з н ы х   м е с ат х .

н  и осдх й   м ы  бед у

м

П о л чу и т ь  э л е к тр о н н у ю  к о п и ю  м о ж н о  так ж е , з а й д я  н а сай т   www.csszengarden.com  и  в ы б р а в   и з  м ен ю   п ну к т View Source (Ткес т  H TML). В о  все х  о с н о в н ы х   б зр а у е х он а  расп ол ж ен а  п р и м ер н о  в  о нд о м  м ест : в  м ен ю  View (В и )д . Д л я  п р о ст ы   можн о  в м ест о   э от г о   н ай т и  н а  ас м о м  сай т е  Zen G arden ссы лк у  н а  о браз е ц  HTML- фай ла . И з  ли ст н г а  и з ъ ят н аль н о м   и но д с х ен д ы  п р и м еч а н и п о ч ем у   бы л о   с е лд а н в уи е дт ь   о р и ги н а л ь н ы

ы  к о м ен атр и , и м ею щ и ес я м   е к тс . В мсте о  н и х  н а  п о ля я  к  нек о т р ы м  р аз едлам , п о я с н я ю щ и е о  так , а  н е  и н ач е . Елс и  в е  к о м е н та р и , з ай ид т е

 в  о р и г х  п р и в е

-

, е .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH

ы  хоит  н а  сай т

ќ C SS< / acron ym > . < / s p a n x / p > я   в  кв сетча е  зма ены . В  Web пс теиав ржедо я < з р а п > В ы   м ожет е   м о ди фи ц и р о в а т ь о  си к пофртга х  сми о лв в  и  сшалогийне ,  и тэ м та б л и ц у   с ти л е й   к а к   уг о дн о ,  н о   н е   т р о г а й т е o c r o n y m  t i t l e = " H y p e r T e x t  M a r ku p о с  пь т авоз ь ло я  пр и  мшй е л а й  вознмси т ож . См .  а ст L a n gu a ge "> Н Т М Ь < / а с г о п у т > - р а з м е т к у .  T h i s  may ю  «The Trouble w ith EM'n EN (and Other Shady Characters)» seem  d a u n t i n g  a t  f i r s t  i f  yo u & # 8 2 1 7 ; ve  n e ve r а  стй а е  www.alistapart.com/ articles/ emen. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA wo r k e d  t h i s  way  b e f o r e ,  b u t  f o l l o w  t h e  l i s t e d l i n k s  t o  l e a r n  m o r e ,  a n d  u s e  t h e  sa m p l e  f i l e s a s  a  g u i d e ' . < / s p a n x / p >

  тизургаЗ е   образе ц  НТМЬ- файл  и  СЗ- файл ,  ботч ы  работ ь лока ьн . Зичнока в  сов й  шедв р   (патсйулжо , н е присылайт е  незавршны е  р а б о т ы ) ,  размести е .ess- йаф л  н а  веб- серв , кырот й   в ы  может е контр ли ва ь . Птилшр е   ан м  с< уклыс /а >  н а  сов й  фйа л  и ,

и н а вбо е р Т я  к  пме асыилр м а  ртоб а м  имз инсел ь  вдесл вс и т е   н е п р дв и е н о  бшоль ог о  числ а  п р е днлои йж . м ы  реши м  в. етсы тив ь  ег о  н а  всеобщ е об зрени , т о  роб т  скаче т  связаны е   с  ни м д р же П е  че м  отявлпра ь  с во е  про и зведни е , о зноак м ь изображен я . В  кцно е  коцн в  результа т  буде т е ст ь   с   «И н с т р у к ц и е й   дл я   а в т о р о в »  н а   с тр а н и ц е размещ н  н а  неша м   рев с е  .  www.mezzoblue.com/   zengarden/ submit/ guidelines. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Bbircflbi 3a4eM  нуж о станови ь я  участнико м  проекта ? Чтоб ы  о  ва с узнали , чбот ы   при аст ь  к  икинчотс у   вдохн е и я и  чбот ы  был о  н а  чт о  сослатья , кдго а  реч ь зайде т  о  дизайн е  н а  основ е   ocronym title="Cascading  Style  Sheets">CSS. А  эт о  о й  ка к  необхдим , даж е  и  сегодня . Вс е больш е  кынпур х  сайто в  перходя т  н а  эт у технол гию ,  н о  и х  ещ е  мало , мало.. . Когда нибуд ь  нша а   ер лаг я  стане т   истор че к м мозеьрук , н о  пко а  это т  ден ь  ещ е  н е  наст л.< / spanx/p>

xh t r n l < / a >  &n bsp ; р а з м етк и   н а   э то

< а   h r e f = " h t t p : / / j  i g s a w . w 3 . o r g / c s s v a l i d a t o r / c h e c k / r e f e r e r "  t i t l e = " П р о в е р и т ь к о р р ек тн о с т ь   CSS  н а   э т о м   с а й т е "> С З З < / а >  &n bsp ; с с < / а >  &n bsp ; 5 0 8 < / a >  &n bsp ; a a a < / a >

< d i v  i d = " l i n k L i s t " > < d i v  i d = " l i n k L i s t 2 " >

ди з ай н

В о н ь л а ч а н о в пр е й  рк тм ез а е  Zen Garden вт с ме о нм е  лэ то в  l i щ ю и,  а ж ур ко х у д ж ка ю  су к л ыс ,  с и л а в о з ь л о пс и ь span, н оы н а в о р и з тм оа ат в е б  сж у л ы  пкр е вор и со д тс о н п у т и  тп и а  Bobby (http:/ / bobby.watchfire.com) ос ы н ь л е . Дот и н л о п е л  пе б о р ы  & nbsp; в л ч и  эт о  ош йо бик ц но к е о д  кж а й к  сл ыс и  -  эт о д  се л ы о н ч а  нд у е й  пк т ы по и тйоб и  пм еу лб о р ; он е ч ь  сро к о  span бл ы и  н е нм е а з ы м о ск и п , н о  уж е ы н  нж у н е е    та к  и  оьс и л а тс .

2 3ак . 1942

< d i v  i d = " l s e l e c t  "> < з р а п > В ы б е р и т :  < / s p a n x / h 3 > е

< l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y : а с с е Б з к е у = "а "> П р и м е р   1 < / а > ,  а в т о р < a  h r e f = "h t t p : / / w w w . m e z z o b l u e . c o m /   " с 1 а з Б = "с "> Д э й в   Ш и < :/ а > &п Ь з р ; < / l i > < l i x a  h r e f = " / "  t i t l e =   "Ac c e ssK e y:  b " a c c e ssk e y= "b "> n p H M e p  2 < / a > ,  а в т о р < a  h r e f = " h t t p : / / w w w . m e z z o b l u e . c o m / " c l a ss= "c "> fl 3 H B  I I t a < / a > & n b sp ; < / li > < l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y :  c " a c c e s s k e y = "c "> n p n K e p  3 < / a > ,  а в т о р < a  h r e f = " h t t p : / / w w w . m e z z o b l u e . c o m / " с 1 а з з = "с "> Д э й в   m H < / a > & n b sp ; < / li > < l i x a  h r e f = " / "  t i t l e =   "Ac c e ssK e y:  d " a c c e ssk e y= "d "> n p H M e p  4 < / a > ,  а в т о р Д э й в   IIlM   < / l i > < l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y :  e a c c e s s k e y = "е "> П р и м е р   5 < / а > ,  а в т о р < a  h r e f = " h t t p : / / w w w . m e z z o b l u e . c o m / " c la ss= "c "> fl3 ft B  m n < / a > & n b sp ; < / l i > < l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y :  f a c c e s s k e y = "f"> П р и м е р   6 < / а > ,  а в т о р

И с ох д н ы

й  сект

т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

fl 3 H B  Ш и < / а > &п Ь э р ;  < / l i > < l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y :  g" a c c e sske y= "g"> n p M M e p  7 < / a > ,  а в т о р < a  h r e f = " h t t p : / / w w w . m e z z o b l u e . c o m / " с 1 а з з = "с "> Д э й в   lH H < / a > &n bsp ; < / li> < l i x a  h r e f = " / "  t i t l e = " A c c e s s K e y :  h " а с с е з з к е у = ' Н «> П р и м е р   8 < / а > ,  а в т о р < a  h r e f = " h t t p :  / / www. m ezzo blu e  . com/  " с 1 а з Б = "с "> Д э й в   D lH < / a > &n bsp ; < / li>

ви ш а л К су й а т с и к ат (Сио т ни ц

и  допус т а   (accesskey)  пруощ юа т   н ав и г ц ю  п о ,  н о  эо т й   ентхо л ги и   при с щу и   о нр е т кы е   н е од . См . ь т а с ю   «Using Accesskeys  -   Is i t worth  it?» т  л и  пс ь зотва л я   ви ш а л к м а и  ? п оа у д с т )  н а  сра т е   www.wats.ca/ articles/ accesskeys/ 19.

< div  i d = "l a r c h i ve s"> < h3  c l a s s = "a r c h i ve s "> < Б р а п > А р х и в ы : < / ьр еп Т , кдго а  нокпаилс ь  бш ь ло е  100 во тнриа в  ди з ай s p a n x / h 3 > zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ан , тоак й   ом т е д   п ер б о а   и д я л ы вг т   см ш е ы н м   и  нел пы м . Годз ар о  поезлн е  с с ыкл а  н а  вс е ь  с плс о к  враин ищюудел и  ноба р от в   (www.mezzoblue.com/ zengarden/ aU.designs).  Н AccessKey: n"  Bfс ат ч о  н е  змаю че т  джа е  тог , чт о  еьс т .  иМогн е  поагл "n"xspan  class= "accesskey ">: ют , чт о  у  сйта а  Zen Garden  свге о  восме ь  вораинт в  д и ext designs  » « pprevious designs < l i x a  href="http://www.mezzoblue.com/ zengarden/alldesigns"  title="Bce втнаир ы нйазид а  Zen Garden.  AccessKey:  w" accesskey="w">View< / span> All designs

< div  i d = "l r e s o u r c e s "> P e c yp c u : < / sp a n x/ h 3 >

< l i x a  h ref= "www.csszen gard en .co m / 001/ 0 0 1 . e s s "  t i t l e =   "П о с м о т р е т ь   и с хо д н ы й   C SS- ф а й л д л я   те к ущ е г о   в а р и а н т а "д и з а й н а ,  Ac c e ssK e y:  v"  •'. •. '.  •   \_ a c c e s s k e y = " v" > < s p a n  c l a s s =   "a c c e ssk e y"> V< / sp a n > i e w  t h i s  : d e si gn & # 8 2 1 7 ; s< a c r o n ym  t i t l e ?  " C a s c a d i n g : S t y l e S h e e t s"> C S S < / a c r o n ym > < / a x/ li > < l i x a  h r e f  = "www. m e zzo blu e .  com/ , z e n g a r d e n / r e s o u r c e s "  t i t l e =   "С с ы л к и   н а   с а й ты п освящ ен н ы е   работ е   с   C SS.  Ac c e ssK e y:  r " a c c e s s k e y = " r " x a c r o n y m  t i t l e = " C a s c a d i n g  S t y l e S h e e t s"> C S S < / a c r o n y m x s p a n  c l a s s = " a c c e s s k e y " > R < / sp a n > eso u r c es< / a x/ li> < l i x a  h r e f  = "www. m e zzo blu e .  com/ z e n g a r d e n / f a q "  t i t l e =   "П е р е ч е н ь   част о з а да в а е м ы х   воп росо в   о   Z en  G a r d e n .  Ac c e ssK e y:  q" a c c e s s k e y = " q " x a c r o n y m  t i t l e = " F r e q u e n t l y Ask e d  Q u e s t i o n s "> F A< s p a n  c l a s s = " a c c e s s k e y " > Q < / sp a n >

т Хо

я  п унк т  м не ю zyxwvutsrqponmlkjihgfedcbaZYXW View Source  изевс т н  всме , т к о  сокль и  чста о  при о -к н и б д у ь  догл о  ра бот л   в  Web, н о  но в и чк ю с а ыл т   м пи с ь а   с  про сб ь й   ь с з та к , ка к  прос м рте о ь CSS- й а ф л  дл я   ок нр е то г о   ди з ай н .  омэПт у   в с о кр е о пс л е  зпасу к а  сйта а  я  добвиа л   э т у  с с ы улк .

е н и З ал о ж В  неоктры х  варинт d i v  и  s p a n са жул ени й ржа , корыт к  оын ьла ст м  э емл аент м е у з ы ь о пл е  эмелтн

е  фунмад ент

а

< l i x a  href  = "www.mez20blue.com/ т  дл х  изоб CSSzengarden/submit"  title=  "Птйалысир е  сов й   е  пмеоч -у ибл о  нобднуе о  прис тоядне ь файл . AccessKey: s" accesskey="q"> . Се тй а и ч , тч о  эт о  по втрн о  ис Submit  a ы   i m g . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Design х  ди зйан я  доинебвла

а  э т и  пысут я  гиесч к рфа

е  эмелтн

ы

< l i x a  href="www.mezzoblue.com/ zengarden/translations/"  title="Посмтре исрев и  эот й  сцинарт ы  н а  други х  языках . AccessKey: t" accesskey="t"xspan class=" accesskey  ":>T ranslations ь





zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPON

а и зу В л н ь

я с т р ку а

zyxwvutsrqponmlkjihgfed

Ди з ай н е р  Э н д и  К лар к  (Andy Clarke) со з ад л   в и з аул ь н о е е  р а з м е тк и   сай т а   Zen G arden р к у о в дс вт о   п о  сртку (р и с .  14). Н а  р и сну к е  п р ек р а с н о  в и дн о , к а к  р а з л и ч н ы е г  в  дргау ; о н  о ч ен ь  п о л е э лем ен т ы   в к л а ыд в а ю с т я   рду з е н  в  кач евст е  о тп р а в н о й  то ч к и  дл я  и з чу е н и я  р а з м ект и ю  К ларк а  «3D сай т . С м . так ж е  с о п р о в ди етл ь н у ю  сать CSS Zen G arden» (Т р емх р н а я  в и з ау л и з а ц и я  сай т а  CSS Zen  G arden)  (www.stuffandnonsense.co.uk/ archives/ 3d_css_zen_garden.html).

с о т и кб Г

ь ди з а й н

а

С  с а м о г о  н ач л а  о дн о й  и з  осн о в н ы х  ц е л й  п р и  с о с ат в лен и и  р а з м е тк и  б ы л о  о б ес п еч н и е  ги б к о с т и  дл я  соз ад н и я  р а з л и ч н ы х  в а р и а н то в  ди з а й н а . Н е о б х ди м о  б ы л у   до с та о ч н о   мн ог о   а др е с у м ы в с та в и т ь   в  р а з м е тк э л е м е н то в , ч то б ы   в н еш н и й  в и д  кажод г о   можн о  б ы л п р и   н е о б х ди м о с т и   м о ди ф и ц и р о в а ть . Бе з  допо л н и те л ь н о г о  к од а  в ы б р а т ь  о тде л ь н ы й  э л е м е н т  н а  с тр а н и ц е  б ы л о  б ы  н е в о з м о ж н о . С е л к то р ы  п о т м к о в  до п су к аю т  с л еюду щ и й   общ и й  с п о с б  а др ес а ц и и  э л е м е н то в си Р

. 14 • •  он ьл а узиВ п о  сру т кру

е  рзма к ет

е  ровскдут и  тйса

о  Эд н и  Кркал а  Zen Garden

а

#quickSummary p { color: red;

о х о :

Ис охн ы д

й т ес к

т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Н о   п р и   э то м   вс е   э л е м е н т ы   р   в н утр и   р а з де л а # q u ic kSu m m a r y  с та н о в я тс я  к р а с н ы м и . А   есл и   н жу н о   м о ди ф и ц и р о в а т ь   то л ь к о   в то р о й   абз а ц   в н ут р и # qu ickSu m m ary?  Е сл и  н е  п р и п и с а т ь  к а ж до м у   п ар гр а ф у  ун и к а л ь н ы й  клас , т о  е ди н с тв е н н ы й  с п о с б  р е ш ит ь  э т у  з ачд у  со сти т  в  п р и м е н е н и и  с и н атк с и с а  се л е к то р о в , п о я в и в ш е го с я  в  CSS2:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA #quickSummary color: red;

р   +   р   {zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ОС Е В

#quickSummary > color: inherit;

фУ

!  П о ж а лйу г о  в ы б о р л а т ь  го р а з д

, с л и ш к о а  э л е м н та о  п р о щ е

м  м н о г . К  с ч а сьт ю :

х  в  CSS2 н мж о о т а т и ч по р ь  н а т й  а с е  W3C е  о а р о т к е л  ес е  «5 Selectors» (www.w3c.org/TR/CSS21/selector.html).

е нбор до П в ь  ст а т

P  +   P  {

П о ясн и м :  п ер в о е   п рави л о   с о де р ж и т   ком би н ац и л е к то р в   до ч е р н и х   и  с е с рт и н с к и х   э л е м е н то ч а ет : «П р и м е н и т ь  э т о  п р а в и л о  к  л ю б о м котром у  н еп о с р едс вт ен н о  п р е дш е с вт еу м ен т   р   и  к о т р ы й  так ж е   я в л я е тс я   до ч е р н и то м   # qu ickSu m m ary».  И н ы м и  с л о в а м и ц ы   в н тр у и   # qu ickSu m m ary, к р о м е  п е р в о г в то р о е   п рави л о   в о ди т   до п о л н и те л ь н о м ен я я  п р и м е н е н и е  п е р в о г о  к о  в се м  а б з а ц а м то р ы м и   и м е ст я  н е  м ен е е  дв у х   п р е д ш е с т в юу щ и з ац ев ,  и з   к о то р ы х   п ервы й   до л ж е н   бы т э л е м е н то м   ttquickSummary;  и н а ч е   го в о р я аб з ац ев ,  к р о м е   п ер в ы х   в хд у ,  в о с та н а в л и в а е тс с л е до в а н н ы й  с ти л ь .

Т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONML

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

о  п туа н и ц ы  рад и  п р о с т , в  CSS3 э т о  м о ж н о  сед

Т

е нбо р до П W3C в ь т  са т

е  о а р о т  ск е л е х  в  CSS3 мн ж о о т а т и ч о р п ь  н а т сй а е е  «Selectors» (www.w3c.org/TR/css3- selectors).

-

г ЕВОС

Т

ы нс а р к е р П м о т нм е у р  ит с н м  дл я  к в о р шфс и а р и ы н ж со л х к е  л ес ор т в  CSS с т е я л в я я  SelectORacle ки н маоп и  OPAL Group (http:/ / gallery.theopalgroup.com/ selectoracle).

#quickSurranary  p :n t h - c h ild ( 2)  { co lo r:  red; Н о   н и   о ди н   и з   э ти х   сп особо в   н е   р а б о та е т   в  Internet Explorer!  Т а к  ч т о  м о ж е т е  н а  в р е м я  з а б ы т ь   о  н и х , ес л и то л ь к о   н е т   ж е с тк о й   н е о б хо д и м о с т и   и сп оль з оват ь с ти л ь , к о т р ы й  б о л ь ш а я  ч а с т ь   а ду и т о р и и   н е  ув и ди т . К о н еч н о , в  те ч е н и е  с л е дюу щ и х  н е с к о л ь к и х  л е т   п р ед п о ч те н и я  п уб л и к и  м о гу т  и з м е н и ть с я , н о  п о к а  Internet Explorer  з а н и м а е т  п р и м е р н о  90% р ы н к а . л   н а с   до Р а з го в о р   о   слож н ы х   с е л к то р а х   в   CSS  ву е воль н о   да л е к о   о т   п р о с то й   з ад ч и .  Н о  те п е р ь   до л ж н о   бы т ь   ясн о ,  з а ч е м   н уж н ы   до п о л н и те л ь н ы е   к лас с ы :  о н и   о б е с п е ч и в а ю т   макси мальн у ю   ги бк о ст ди з а й н а . П р и ч и н ы  д л я  в к л ю ч е н и я  в  р а з м е тк у   «л и ш н их »  э л е м е н то в   s p a n  та к и е   ж е :  н а л и ч и е   в н ут р е н н и х  э л е м е н то в  в  к а ж до м   абз ац е  р а с ш и р я е т   воз мож н ост и   п ри м ен ен и я  с ти л е й .

ОС Е В

ь -

и н е о лж а З

е м адтнеу  ф

ос П д т а н о в к

- ЧАНИ Е   ПРИМ аК

, есл и  цьле ? В  неоктры

ги б о к с т ги б а к я  ситл заци я с и мн ь л а о  пнол он й  рзам ек т

н ол п В е  мн о ж с ле и  ткоьл о ла ч н а   о г р а н и чс ь т HTML  и  с   и с пис к и   и  т. п еч с к и  вны жа ы нм ь л а к и  иомрат ик иф тенд а мт н е м  им не s p a n , нваерно ок ,  дго к а   в о з н и ке

ю  ди зай н

а  ка х  паротек

, и  до внль

к  ра х  днейсвьлит

о  чсат ь  пцниеаот

о  зейвотдса . о  нта ч

ь  с  м одвет

 пс ьзотвал

я  им

я  нбаор х   по м о щ ь ю  опис та . П о  м ре е  необ хидм ос т е  м ст е а  донпыеьлит а  ксал ов

. Вщю а черси т , ав м  н е  по над бсят т  нео б хдим о сьт

, примемня ы и  с  ум о м м  см а ы ь  ко нет

з  яс теявл

я  обеспчни о  оенибмдх

о  зюад

т  во пр с л  сиел т

е а , ка

й  в  с о б светн

к  м ка

-

zyxwvutsrqpon

 и зоебнирйаж

У  э л е м е н то в   sp a n  ест ь   и  е щ е  о дн о  н а з н а ч е н и е п р о е к ти р о в а л с я   с ай т   Zen  G arden, ум а м и   ди з а й н е р о в о  в се м  м и р е  ка к  р а з  о в л а ед а   со в ер ш ен н о  н о в а е с л и   и м е ст я   з а го л в о к   (с к а ж ем , h 3)  и   в ы   ох ти м ен и т ь  тек с т  в  н е м  и з о б р а ж е н и е м , т о  э то т  тек с ох д и м о   о к р жу и т ь   д в му я  э л е м е н та м и . О ди н  и з а  др гу о й   -   sp a n .

Е к  бь ыт

а

. К огд

а в

я  и дея

: е   за т  н ео б  н и х  h 3,

Е сл и  с к р ы т ь  тек с т  в н тру и   sp a n ,  н а п р и м е р я  то л ь к в и л а  d i s p l a y :  n o n e , т о  о с та н е тс р ы м  м о ж н о  с в яз а т ь  ф о н о в о е  и з о б р а ж е н и е сам ы м   илю зи ю   гр а фи ч ес к о г о   з а го л в к а у  к а ж од г о   э лем ен т а  в  Zen G arden и м е тс sp a n ,  т о  о тк р ы в а ю тс я   ш и роки е  в о з м о ж н о с т с п е р и м е н то в .

, з а  сче о  h 3 , с , с о з ад .  П о с к о л ь к я   в н ут р е н н и и  дл

т  п р а  к о т в   ет м у й я  э к -

п р о блем ы

м   н и же

.

х  в  Zen Garden, . М ы  ромек унд м  л д я х   о с но в ы х  эмел о тне в , : аб зацы , заго л вик , с п р о с и т е  вы ?  Р а з в е  с   п о м о щ ь ю А  з а ч е м   в с я  э т а  саету и  влюкичт е  в  сеигрта э л е м е н т а   im g  н е л ь з я   с е д л а т ь   т о   ж е   с а м о е ?  О в т е т   в с е е  коенйт р ы  d i v  с  у н и т о т  ж е : г и б к о с т ь . Р а д и к а л ь н о   и з м е н и т ь   в н е ш н и й   в и д и  i d  и  дт ьовба е  к  норытек м  эел с тр а н и ц ы  з а  сч е т  п о дм е н ы  та б л и ц ы  с ти л е й  н е   адлуо с ь я  в  Zen Garden меэтлн ы б ы , бду ь   и з о бр аж ен и я   «з а ш и ты »  в   H TML- к о д . В п р о , песйзутоьл ь  им и  тоьл . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ч ем ,  у   те нх и к и   п о д с та н о в к и   и з о бр аж ен и й   ес т ь   с в о и

, о  к о т р ы

У п р о щ е ни

х   м ы  е щ

е  п о г о в о р и

 размет ик

Н ек о т р ы и м е в ш и сх в е нд

е  р е ш е н и я   п ри н и м али сь я  н а  то т  м о м ен т . В  резльуат о  б о л ь ш е  срктун ы х   э л е м н то в м о  в  свет е   п о яв л ен и я  н о в ы х   п р и ем о в м а ес т , одкут а   м ожн о  б ы л о  б ы  убр а т

, и осдх

я   и з  з н а н и й е   в  раз м кет у   бы л , ч е м  н еоибдх . Н нердту о   н ай т ь  л и ш н и е  э л ем н ыт

С  м о м е н т а  з а п сук а  Zen G arden с ат л с та в л я т ь  и з о б р а ж е н и я  б е з  до п о л н и те л ь н о г ч т о   б о л ь ш и н с тв о   э ти х   э л е м е н то И   и з б ы то ч н ы е   к лас ы   н е  и с п о л ь з юу тс ат х   п р и с л а н н ы х   рабо т ,  ат к   ч т о   и б ы  с  л егк о с ьт ю   о тк а з а ть с я . Н а б о в   кон ц е  до к му е н т а   н жу е н   то л ь к н ы х   а р д е с му ы х   э л е м е н то в ,  к о т р ы м б ы   в о с п о л ь з о в а ть с я . О ч ен ь   м оже т   б ы ть м ен т ы   н е  п о н а до б я тс н а  в ес ь м а   с п ец и фи ч ес к а си м аль н у ю   г и б к о с ть ди з а й н  н жу е н   ад л е к

и .

о  в о з м о ж н ы

м   п од о   sp a n , та к в   боль ш е   н е   н жу н ы . я   в  98  п р о ц е н  о т   н и х   м о ж н о   бы л о р  п су ты х   d i v  и   sp a n о   р а д и   д о п о л н и те л ь и   ди з а й н е р   мо г

,  ч т о   дл я  др уг и х   с а й то в   та к и е  э л е . В  Zen G arden н а  н и х   в о з л о ж е я  ф ун к ц и я  -   о б е с п е ч и т ь   м ак .  Н о   н а с т о л ь к о   в а р и а ти в н ы о   н е  к а ж до м у   с а й ут .

Е сл и   в ы   з а о х ти е   в о с п о л ь з о в а ть с Zen  G arden  (а   м ы   н е   в о з р а ж а е з а б ы в а й те , ч т о   о дн а   и з  в а ж н е й ш и

, о

м   п р о ти

я   H TM L- р а з м е тк о в   э то г ) х   ц ел й  ди з а й н

й

й , т о   н е а  н а

И с о х дн ы

й  тс ек

т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

осн ов е   с та н да р то в   -   ус т р а н и т ь   ли ш н и е   э л е м е н ты . В к лю ч и т ь   о ди н - др г у о й   d i v дл я  о б р а м л е н и я  л о ги ч ес к и  с в я з а н н ы х  э л е м е н то в  в п о л н е  до п су ти м о , н о  о к р у ж ат ь   sp a n  к а ж ды й  а б з а ц  и  к а ж ды й  з а го л в о к  н а  срта нице ,  п о ж а л йу ,  ч ер с ч ру .  Н и ж е  в  э то й   глав е  м ы   ещ е в ер н ем с я  к  о б сжуедн и ю   воп рос а  о  с тр ку тр и р о в а н и и д о к м у е н та .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о м ы уж

тЧ

е з на е

м

Г лав н а я  м и с и я  сай т а  Zen G arden -   п р о де м о н с тр и р о в а ьт ,  н а  ч т о  с п о с б е н   ди з а й н   н а  о с н о в е   с та н д а р то в ; з н а к о м с тв о  с  р а з л и ч н ы м и  ди з а й н а м и  п о к а з ы в а е т , н а ск оль к о  ги б к и е  в о з м о ж н о с т и  п р е дс та в л е н и я  дае т  CSS. С а м  п о  себ е  CSS -  э т о  я з ы к  ди з а й н а , с л жу а щ и й  до п о л н ен и е м  к  таки м  я з ы к а м  р а з м е тк и , к а к  H TML, XH TML и  XML. С п е ц и ф и к а ц и я  CSS1 п о я в и л а с ь  в  1996 гоуд , а CSS2 -   в   1998. В  б р азу ер ы   п о с те п е н н о  в в о ди тс я  п о д ед р ж к а  дл я  то й  и  дргуо й , та к  ч т о  н а ч и н а я  с  1998 год а сатл о   п ри н ят о  уп р а в л я т ь   в с ем и   ти п о г р а ф с к и м и   ос б е н н о с тя м и  п р есдатв л ен и я  с  п о м о щ ь ю  в н е ш н е г о  CSSфа й л а . И  н а  э то м   р о л ь   CSS и  о гр а н и ч и в а л с ь   в  теч н и е  п о с л еюду щ и х   ч е ты р е х  и л и  п я т и  л ет . еЛ г к

о   п о н я ть уп р а в л е н и в ало с с  э ти сп ос б то р о г н ят ь П р е и м щу е с т в сай т з адт в е тс в юу щ е с тр а н и ц а м в с ег

, п о ч е м

у   CSS и с п о л ь з о в а л с я   ли ш ь  дл я и  -  в ед ь  то л ь к о  э т о  и  п о де р ж и е  и ь  о ди н а к о в о  в сем и  б р а зу е р а м и . В п р о ч ем , даж м  о н и  справ л я и с ь  н е  о ч е н ь  хо р о ш о , н о  у  та к о г о а   бы л о   о дн о   в ес о м е   п р е и м ущ е с т в о ,  и з - з а  ко о  б о л ь ш и н с тв о  ди з а й н е р о в  г о т в ы  б ы л и  п р и м е  CSS н е с м о тр я  н и  н а  ч то . я  ш р и ф та м

о   с о т ял

е  м о гл ь   г а р н и р ту

о  в  о дн о

о  в  то м , ч т о  вс е  докму е н т ы  н а я  н а  оид н  и  то т  ж е  C SS- фай л . Елс и у   ш р и фт а  в  та б л и ц е   с ит л е й , т о  с о т е   о бъ яв лен и е   е бд у т   п ри м ен ен о   к о  в се м . С то и т   и з м ен и т ь  в и д  и л и  р а з м е р   ш р и фт а м  ф а й л е , к а к  э т о  о тр а з и тс я  н а  все м  сай ет .

и  ссы лаьтс

е  п р и м е н я в ш е й с Э т о  б ы л о  с щу е с тв е н н о  л уч ш м е то ди к и ,  к о гд а   ет г   < f o n t >  п р и хо ди л о с п ер д  к аж ыд м  н жу да ю щ и м с я  в  в ы де л н и х   с а й ат до к м у е н т а   н а  все х   с тр а н и ц а к а ж од й  и з  соет н  с тр а н и ц  м о гл о  о к а з а ть с с ем ь   ат к и х   те г о в .  И з м е н е н и е  ш р и ф т д л и те л ь н у ю   и  м чу и те л ь н у ю   р а б о ту Э от т   ти п  о тде л н и то л и к о й  то г , н а  чт з а й н  сай т а  сат л  н а лд я   п е р н о с а  тек ст н е  н жу н о   бы л о   вы и ск и ват , р а з б р о с а н н ы н о  б ы л о   ск оп и роват л а и  б ы  вс е  о с та л ь н о е

я   п р е д с та в л е н и о  с п о с б н  м н о г о  п о р я дк о а   и з  с ат р о г

я  р а н е ь   с та в и т и  э л е м е н то .  В  р ез луь ат я  п о  с ем ь - в о а   вы ли валос . я   бы

ы  та б л и ц в  п р о щ е

о   ди з а й н ь   и  з а м е н я т х  п о  р а з н ы м  ф а й л а м ь  к о н те н т , а  та б л и ц .

л  л и ш ы  с ти л е й

е ь м е  н а

ь   м ало . Р еид

, п о с к о л ь к а  в  н о в ы й  уж ь  ты с я ч и   ет г о ; до с ато ч ы   с ит л е й  сед

ь  в й у е в -

тЧ

о  м ы  уж

е   з н ое

м

Н о  до л го е   в р ем я  э ти м   в с е  и  о г р а н и ч и в а л о с ь .  С та р ы е б р а зу е р ы , п л о х о  п о де р ж и в а ю щ и е  CSS и  н е  п о з в о л я в ш и е   п р и м ен ят ь   боле е   слож н ы е   с ти л и , о с ат в л и с ь  н а к о м п ь ю те р а х  п о л ь з о в аетл й  в  теч н и е  м н о ги х  ле т  п о с л е  п р е дп о л а г е м о г о   срок а  з а м е н ы , та к  ч т о  дел а т ь   ч то т о  бо ле е  п р о дв и н туо е   п рост о  н е  и м е л о  с м ы с л а . Н ак он е с от р н п ен и ван и бы л

ц   в   н ач л е   н ов г о   ты с я ч е л ти я   п о ед р ж к а  с о ы  о с н о в н ы х  бр азу ер о в  улчу ш и л а с ь   д о  так о й  се т , ч т о  м о ж н о  б ы л о  всерь з  р ас м арти в ат ь  з еайд всто е   п о те н ц и а л а   CSS  в   п о л н о й   м ер .  К о н е ч н о , о н а а   (д а  и  д о  си х  п о р  осатея ) н е с о в е р ш е н н о й , н о  вс е ж е  досат ч н а ,  ч то б ы   п р и м ен ен и е  CSS н е  св оид ло с ь  к з ам ен е  ш р и ф то в . П о сл е  н ес к о л ь к и х  ле т  и н те н с и в н о г о с о р тн д у и ч е с в т а   в е б - ди з а й н е р ы   в о   в се м   м и р е   в ы рабо ат л и   н а е д ж н ы е   м еот д ы   работ ы   с  и м е ю щ и м и с я  сит ле вы м и   с р е дв т а м и ,  п о з в о л я ю щ и м и  в ер сат ь   с тр а н и ц ы с  и с п о л ь з о в а н и е м  п л а в ю щ и х  э л е м е н то в  и  м оелд и  п о з и ц и он и рован и я . Бы л и  н а й едн ы  и  о бохнд ы е   п т у и   дл я б р аз у е р о в ,  н е   в п о л н е   с о тв е с тв о а в ш и х   с а т н ад р т м . Та ес т

к  гд е  ж е  м ы  с ей ч а с  н аохид м ся ? Д аж е  в ь   б р а зу е р ы ,  н е   д о   к о н ц а  п о д е р ж и в а ю щ и фи к ац и ю  CSS2, хот я  о н а  в ы ш л а  в  св е т  в в  о б щ е м  и  ц е л о м  п о едр ж к а  до с ат о ч н а б ы   д о с т и н с тв а   CSS  и  ди з а й н а   н а   осн ов с ат л и  о с я з а е м ы  и  н а ч л и  п р и н о с и т ь  п л о ды

 2005 го д у  е щ е е   сп ец и   1998 гоуд . Н о  дл я  то г , ч то е   с та н д а р то в .

П р и г л я ди м с я  к  э ти м  до с т и н свт а м  в н и м а етл ь н е . Ско ре е  в сего , в ы  о  н и х  уж е   з н а е т , к о л ь  с к о р о  ч и ат е е   эт у к н и гу , н о  есл и  в а с  и н етр сюу т   д е та л и , со веут м   обра ти ть с я   к  и с то ч н и к а м , уп о м я н уты м   в   р а з ед л е   «В   з а к л ю ч ен и е »  в  к о н ц е  к н и г и .zyxwvutsrqponmlkjihgfedcbaZYX

ст оинДо в

а с т а нд р т о

Г ов р я   о   с ат н д а р т ц ели к о м   в с ю   к а р ти н у H TM L,  п р и м е н я е м ы Т р д ну о   п ер ч и сли т б е з   уп о м и н а н и я  др гу о й о т га д ,  кодг а   об е   о н ж ан и е   и   с тр к у а щ ь ю   H TML, а  ди з а й н о

х   Web,  селуд т   п р е д с та в л я т ь   с еб ,  в к л ю ч а я   к а к   CSS, та к   и   я з ы й   дл я   с т р ук т ур н о й   р а з м е тк и ь   д о с то и н с тв а   о дн о й   те нх о л г и .  В ы и г р ы ш   п о л ч у а е ст я   ли ш и   п р и м е н я ю тс я  с о в м е с тн о :  соедр   д о к му е н т а   о п и с ы в а ю тс я   с   п омо м  уп р а в л я ю т   та б л и ц ы  с ти л е й

В ари ан т ы  ди з а й н а , р а з м ещ ен н ы од к а з е т л ь с в т о   то г ,  ч т о   о ди можн о  в и з ау л и з и р о в а т ь   б ес ч и с л ен н ы бов , ес л и   п р и м е н и т ь  к  н е м Т е нх о л г и я   CSS -   э т о   м еот т а   п ет у м   п р и м ен ен и я  р а з л и ч н ы т ур н ы м   э л е м е н та м . Хо т я  о р е , н о  р а б о та е т   н ез ав и си м о раз ли ч н ы е  в и з ау л ь н ы е   образ

в We b

е  н а  сай т н   и   то т   ж м у   раз н ы е  та б л и ц д   п р е д с та в л е н и х   с ти л е н  и  п р и м е н я е тс  о т  н е , п о з в о л я ы   д о к м у е н ат

е к . и ь .

е  Zen G arden, е   H TML- фа й л  ч и с л о м  с п о с ы   с ти л е й . я   д о к му е н й   к  ег о   сртку я  к  с ртку я  с о з адв т ь .

И с ох д н ы К  и оснхд о м бо в ан и е Н еп р ав и ль н в ы в а ьт с П оэ тм м ен ен и суп е ш н

Фай л ы а ю з т г р с жу я

й  тсек

у  докмуен т : о н  долж е о  р а з м еч н н ы я  н еп р есдк аз ему о у  п р и  п о и ск я   CSS  п е р в ы о  п р о хид

т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

у   п р е ъд я в л я е с т ь  п р а в и л ь н ы е  до к му е н т , ч т о  в ы з о в е е  п р и ч и н  о ш и б о к м   е лд о м   п р о в е р ь те т   к о н рт о л ь  н а  п р а в и л ь н о с ть н  б ы т

  м е н ьш е г о

я  л и ш м  и  до с т в ер н ы м ы  буд т   м ас  в  р ез льуат ,  ч т

ь  о нд

о  тре

. т  п р о и с о у   п р о б лем

. е  п р и

Е

м ар гор П а л о р кт н о я тсо н ь  пл и в а р и  HTML-к т ме з а р с я   н а  сци н ар т е   Validate Your  Markup т й ас validator.w3.org).

и т и д о нх а а   W3C  (http:/ /

-

о   р а з м е кт а .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

  р аз м е р а  бсы т р е

К од г а  сврстед а  п р есдатв л ен и я  в ы н о с ят ат б л и ц ы   с ит л е й , р а з м е р   фа й л а   обы ч н 30 К б и т , уох ди в ш и х   ран е е  н а  р а з м е тк у п р е в р а ти ь с я   в   10  К б и т   н а   H TML п л ю м ен ь ш е  н а  CSS.

я  и з  р а з м ект и  в о   м у е н ь ш а е тс я . т ,  в п о л н е  м о гу с   10  К б и т  ил и

П оми м о  ум ен ь ш ен и я  р аз м ер а  сам о г о  фа й л а , ест ь  и о ид н   и с от ч н и к   о п ти м и з а ц и и  -   CSS к э ш и р еутс я  в м ят и  брзауе .  иСд ут е   сам и : кдог а   H TML- р аз м ект н и м ал а   30 К би т , п р и  к аж од й   з а грз у к е   с тр а н и ц ы  н ео б о х ид м о   бы л о   п е р ад т ь   э т и   30  К б и т   п лю с   с о б с вт е н н к о н ет т  докмуен ат . П р и  п р о с м о рт е  десят и  с рт а н и ц т а   п р и о хд с т я   бе з   н ж у д ы   з а гржу а т ь   ц ел ы х   300  К б и т Е лс п ер в ы х

г   И Н А Ч М ЕИ Р П -

и  ж е  в ы н ес т ,  му е н ь ш и тс

 ещ е   па а  з а о  сай

н  в о  в н е ш н и й  CSS- фай л , то , в о я   раз м е р   з а г р жу а е м о й   с тр а н и ц ы а  в о - в от р ы х , та б л и ц ы  с ит л е й  н е  п р и дест я  гр зу и т ь  пр п р о с м о тр е  к аж од й  с тр а н и ц ы . О с атн ест я  л и ш ь   10 К б и H TM L- р а з м е тк и   н а   с тр а н и ц у ,  п о с к о л ь к у   о с та л ь н ы т   и з в л е к а ть с я  и 10 К б и т , п р и хо дя щ и е с я  н а  CSS, буд кэш а   б р а зу е р а .  Т а к и м  о б р а з о м , в м е с т о   в ы ш е уп о м я т  з аг н ты у х   300 К б и т  н а к л а дн ы х  р а сохд в   н жу н о  бед у р уз и т ь   в с ег о  П О .

.

и  ди з а й

, и

г   И Н А Ч М ЕИ Р П т

Е

и н е о ж б С ар

е

ми н

з -

ы  ткоьл

ын ь ле д й  файл е т ,  н о  таодг э к ш с я ь и р о т ва

я   о  повыш ени и   п р о су н к о   в  сеа чул , кдог а  тицбла ; мн ож о  рмзитасе , в  ои чл т е  о т  вшен ген , та к  чт о  чста ь  пимер щу сет

й   с по б н с т и   при м е ы  сели т й   с т о ныя в я  в  от ь  и х  и  в  см ао м  HTML- му нокед о   CSS-а л й фа , он и  н е  бу д в  бе д у т  уане чр т .

т

Т ак о е  ум е н ь ш е н и е   «васе » с тр а н и ц ы  з а  сч е т   е е   «р аз р ез ан и я » м о ж е т  п о л о ж и те л ь н о  с к а з а ьт с я  и  н а  к о н е ч н ы х п о л ь з о в а ет л я х ,  и   н а   р а б о т е   с ер в ер а .  Е сл и  тр а ф и к  ве л и к ,  т о   с о к р а щ е н и е   ч и сл а   п е р да в е м ы х   б а й то в   мо ж е т   в ес ь м а  з а м е тн о  с э к о н о м и т ь  п о л с у  п р о п су к а н и я . В б- е й а с т  с п о р ти в н о й  сет и  ESPN  п ер ш е л  н а  CSS в  н ач л е  2003 гаод , и  п р и в о ди м ы е  ц и ф р ы  з вчу а т  п р о с т о  ф а н ат с и ч е с к и . В  и н те р в ь ю , к о т р о е  в п е р в ы е  б ы л о   о п бу ли кован о   н а   н е с ущ е с т в ую щ е м   нын е   сай т е   D evEdge комп ан и и   N etscape  (е г о   м о ж н о   н ай т и   п о   а др е с у www.mikeindustries.com/ blog/ archive/ 2003/ 06/ espninterview)  р а з р а б о т ч и к и   ESPN .com  с о б щ а ю т ,  ч т о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE в ен а я д ж е  э к о н о м и я  соатв и л а  2 тер а б й ат . А  э т о  з н а ч и т , ч т о   етп е р ь   сай т   може т   о б с л жу и в а т ь   боль ш е  по с еи т л е й   и  дел а т ь   э т о  б ы с рт е е  -   то л ь к о  з а  сч е т  и з м е н ен и я   т е хн о л о г и и   р а з м е тк и .  Н е п л о ха я   о тда ч а  н а е ди н о в р е м е н н ы е  з а тр а ты .

тЧ Б о л ьш а я

о  м ы  уж

е   з н ае

м

zyxwvutsrqponm

 пе р но с и м о с т ь

В о б щ е- т о   дл я   п р о р и с о в к ван н о й   с тр а н и ц ы   да ж е  и И н о гд а   эт о   и ме т   п рям о боль ш о й  м о н и то р  с  р а з р е ш е н и е в ы   и мет е   в   свое м   р асп о р яж ен и ч ег о  н е  с к а ж еш ь , кодг а  р еч те р е  с  э к р а н о м  240x320 п и к с е л й

и  п р а в и л ь н   та б л и ц й   см ы с

ь  и ед

о   с т р ку т р и р о а   с ти л е й   н е   н жу н а . л   -   р а с ч и ты в а я  н а м   1024x768 п и к с е л й , и   д о с та о ч н о   м е с ат , т  о  к а р м а н н о м  к о м п ь ю .

Бе

з  CSS «голы й » к о н те н т  в п о л н е  м о ж н о  ч и та ь к и  р а б о ат ю т , и  вс е  э л е м е н т ы  ф о р м ы  ф ун к ц и о н и р ую ка к   п о л о ж е н о . Т а к   ч то , о г р а н и ч и в ш и с ь   с тр ку т н о р а з м е тк о й  и  б о л ь ш е  н и ч ег о  н е  дел а я , в ы  а в от м а ит ч ес к и   п о лчу а е т е   в ер с и ю  св о ег о  с ай т а  дл я   м о б и л ь н ы тр о й с тв .

г  zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA И Н А Ч МИ Е Р П Е п Ти

ы в тсйо ур тс м ые а в и, пж р е д о «7 Media Types» т й а с

е  CSS, н ас и п о ы  н а ц и н а р тс е а  W3C (www.w3.org/CSS21/media.html).

Н о   CSS п р елд а г е т   п о ед р ж к рой ст в  и  п о з в о л яе т  то ч н дл я  в ы в о д а   н а  к о н к р е нт о м у   м о н и то р у , м о б и л ь н о м вом у   те л е ф о н у )  и   п р и н те р ти п ы  ус тр о й с тв .  Н а  с а м о ч е м   н ек о т р ы е  ещ е  то л ь к Табли ц ы   с ти л е й   дл с м е р тн ы й   п р и го в о р ч ат ь   с тр а н и ц )у . Лю б у п еч ат ь ,  и   дл я   э то г с ит л е й , к о т р а я  ф о р м а ти р еу др г у и е  и  с тр о и т  м а к е р а .  П о с к о л ь к у   п р и н те р ч ен и я , н еж л и  э к р а н м ы й  та б л и ц а м и  с ит л е й

у   дл о  указ т е  ус тр о й с тв о у  ус тр о й с тв

я   раз н ы ь  с ти л ь

у   с о т в е т с в юу м  дел е  и х  даж о   р а з р а б ты в а ю тс я

, ссы л

т й х   су -

х   ти п о

в   с ту

, п р и м е н я е м ы . К о м п ь ю те р н о у   (с к аж ем

й -

, с о т т   раз н ы

е  б о л ь ш е

е

, п р и

-

.

я   п е ч а тн ы   с ы лоч к

х   ус т р о й с т в   вы н ося е   Print  This  Page  (Р асп е ю  с тр а н и ц у   сай т а   можн о  р а с о   н жу н а   ли ш ь   п р о с та я   та б л и ц т   о дн и  э л е м е н ты , п р я ч е т  с  уч е то м   о с б е н н о с те й  п р и н те ы   н а к л а ды в а ю т   ины е  о г р а н и , т о  то н к и й  к о н тр о л ь , п р едл а г е , в ес ь м а   ж е л а те л н .

т а т -

Т е о р е ти ч е с к и   к о г ад - н и б д у ь   д л я   к а ж од г о   с у тр о й с тв а вы вод а  бед у т  о п р едл н  п о дх я щ и й  ти п . Н а  п р а к ти к е  ж е  сей ч а с  н а й едст я  м а л о  л ю дей , п о л ь з ую щ и хс я   дл я п р о с м о тр а  в е б - с тр а н и ц  ч е м - н и б дьу , к р о м е  э к р а н а  (н е и ск лю ч а я   а в то р о в   с тр а н и ц   и   п р о и з в о д и те л й   об ру до в а н и я ) .  Р еа л и з еум ы е   с   п омощ ь ю   CSS ср есдвт а   пу р ав лен и я   о т бр аж ен и е м   н а  э к р а н а х   сотвы х   те л е ф о н о в   р е дк о   з а хо д я т   да л ь ш е   н а с тр о й к и   ш р и ф то в  и ц в е то в ,  а   б р азу е р   д л я   с у рт о й с вт а   ти п а   aural  (го л с о в о е  в о с п р о и з в е д н и е ) е щ е  н е  н а п и с а н . Э т о  к лас и ч ес к а к а  н е  ул чу ш и тс я н е  сатн е т   го т в и т тр о й с тв а . О дн а к и с о х дя т , та к  ч то Zen  G arden, с ти л и з о в а н н ы и л и  К П К .

я  п р о б л е м а  к ур и ц ы  и  я й ц а ,  п о к а  н е  п о я в и тс я  к о н те н т ь   к о н те н т  дл я  н е с щу е с тв юу щ е г о  хот я  и  м е дл н н о , н о  и з м е н е н и , в о з м о ж н о , м ы   е щ е   ву и ди й   дл я   с о т в о г

: п о де р ж , н о  н и к т

о

о   су я  п р о м   вари ан т о   те л ф о н а

У л чу ш е н а я

 дос т пуно с т ь

П рави ль н о   с т р ку т р и р о в а н н а тп у н а   ж у е   н а  сатид з да т ь   в ер с и ю   сай т щ у ю   р е к о м е н да ц и я п рост о  з а  сч е т  к о р е к тн о

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA я   H TML- р а з м е тк и   п р о е к ти р о в а н и я ; в ы   м о ж ет ,  н а   90  п р о ц е н то в   д уо в л е т в о р я ю м   W3C  п о   до с пту н о с т и   к о н ет н ат й  р а з м е тк и .

П о п р о щ а й те с ь  с  те к с то в ы м н еск о ль к и м и   в ер си ям с и н рх о н и з и р о в а т ь ; и н ы й   вари ан т   в е р с тк и п о л ь з о в а те л и   с  о с л а б л е н н ы о х д и тс я   п о л ь з о в а ть с щ им и   с о де р ж и м о е   в о с п о л ь з о в а ть с я   ваш и с  в а ш е й   с то р о н ы . Тт у п ог вори ж с уа ь д т м оже

о ч Т нй ы

,  к о н е ч н о

и   с а й та м  н а  с м ен .  В   б о л ь ш и н с тв я   п р о гр ам ам и в е б - с тр а н и ц м  с а й то

, ест ь  и  п о дв о дн ы м   о  н и х  в  с л е юду щ е ,  к а и е  п р о б л е м т   с о з да т ь   п р и м ен ен и

а   од с е   со -

г   И Н А Ч М ЕИ Р П ,

о е к м Р е н ц да и с ре д а

Е и   п о  до с упт но с т и   в е б - о ек н т у   www.w3.org/ TR/ WAI- WEBC0NTENT.

а  нсотяхда

и   в а р и а н та м ,  к о т р ы у  п р и хо ди

и   к о н те н т а  и е   та к   т р уд н о т   е д и н с тв е н е   с л чу а е в   да ж е м  з р е н и е м , к о т р ы м  п р и ,  в о с п р о и з в о дя ы   го л о с о м ,  с м о г у т м  -   б е з о  в с я к и х  ус и л и й

е   кам н и й   гл а в е ы  с  то ч к и  з р е н и е  CSS.

, к о гд

, и  м ы   н е м н о г о а  бед у м  о б я   д о с п ту н о с т и

  о кнт р о ль

Бч ду и   яз ы к о м   с ти л и з а ц и и ,  CSS  п р е дл а г е т   ш и ро ко е   р а з н о б р а з и е   сп особо в   ф о р м а ти р о в а н и я , к о то р ы е   в   H TML  б ы л и   п оп рост у   н евоз м ож н ы :  т о ч н о у   с тр о к а з ад н и е   и н те р л и н ь я ж а   (р а с то я н и я   м еж д м и  тек с та ) с  п о м о щ ь ю  с в о й с тв а   l i n e - h e i g h t ,  р а с с то я н и я   м еж д у   э л е м е н та м и   с   п омощ ь ю   свой ст m a r gi n  и  p a d d i n g ,  п о з и ц и о н и р о в а н и е   э л е м е н то н а   с тр а н и ц е   с  п омощ ь ю   a b s o l u t e  и   r e l a t i v e  м н о го е   д р уг о е .

е в в и

Е сл и  ва м  всдег а  н е  н р а в и л а с ь  с еот ч н а я  срткуа ,  ид к е му т а я   та б л и ц а м и , т о   в о з р а йду те с ь :  CSS- п о з и ц и о н и рован и е   п о з в о ляе т   и з б а в и ть с я   о т   н е е   и   расп олаг т ь э лем н т ы  в  л ю б о м  м ест е  с тр а н и ц ы . Е сл и  в а м   охетл с ь пу р а в л я т ь   фо н о м   то ч н е , ч е м   в о з м о ж н о   с   п омощ ь ю о дн о г о   ли ш ь   ц в ет а   и   п о в то р я ю щ е й с я   к а р ти н к и ,  т о с в о й с вт о   b a c k gr o u n d  и   п р и м ы к а ю щ и е   к   н ем у   ас т н е т  дл я   ва с  м а л е н ь к и м   о тк р ы ти е м .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Че м

у м ы и ла н ч у с ь

Н е   бы в ае т   и де а л ь н ы х   с а й то в ,  и   Zen  G arden -   н е   и с к л ю ч ен и е . Т е п е р ь   ж у е   п о з дн о   в о з в р а щ а ть с я   к   н ач л у и  ч то - т о   м е н я ть , н о  в  ход е  ди с к ус и й   н а  п р о тя ж е н и и н ес к о ль к и х   п р о ш е дш и х   ле т   в о з н и к л о  н о в е  п о н и м а н и е , к о т р ы м  хоетл с ь   б ы   п о д е л и ть с я .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

я  п о

Че м

р П о ве к

а о с д т п ну

у  м ы  н а у ч и л и с

и

ь zyxwvutsrqpon

zyxwvutsrqponmlkjihgf

П ро в ерк а   с о с та в л е н н о й   р а з м е тк и   с   п омощ ь ю   п ро , ч т о   б о л ь ш и н с тв у   к р и те р и е гр а м ы   Bobby п о к а з а л д о с т уп н о с т и   о н а   уд о в л е т в о р я е т .  П е р е д   з а п ус к о сай т а   п ри ш лос ь   в н ест и   н еск о ль к о   м елк и х   и з м ен е ний ,  ч то б ы   ус т р а н и т ь   з ам еч ен н ы е   Bobby  н е до с та к и .  В  хв о с т о в и к   Zen  G arden  б ы л а   до б а в л е н а   м е тк «ААА »  к а к   с в и де т л ь с тв о   то г о ,  ч т о   о   д о с туп н о с т п о з а б о ти л и с ь .

г ЧАНИ  Е ПРИМ Е

Bobby (http:/ / bobby.watchfire.com) -  ы во нй а л но й  иу р тс н н ме т кр пе вор и и сотнп ду сот . Ест ь  и еи г урд , нм ие р п а р  Cynthia Says  (www.cynthiasays.com)  и  WebAIM's Wave  (ht t p :/ / wave.webaim.org).

в м а и

А  та к  л и  э то ? О к а з а л о с ь , ч т о  Bobby -   е щ е  н е  о к о н ч а те л ь н ы й   а в то р и те т   в   воп роса х   д о с т уп н о с т и .  О з н а коми вш и с ь  с  «Р е к о м е н да ц и я м и  п о  до с туп н о с т и   в еб к о н те н та » ,  о п у б л и к о в а н н ы м и   W3C  (с м .  р а з д е «Ул чу ш е н н а я   д о с т уп н о с т ь »  в ы ш е ) , в ы   п о й м е т , ч т ь  п р о с т о  н е  в  с о с то я н и и . Т а к к о е- ч т о  Bobby п р о в е р и т п ун к т   2.1  гл а с и т , ч т о   в с я  и н ф о р м а ц и я , д о н о с и м а я п омощ ь ю   ц в е та , д о л ж н а   бы т ь   д о с т уп н а   и  п р и   п р о с м о тр е   н а   ус т р о й с т в е ,  н е   п о д е р ж и в а ю щ е м   ц в е та Н о   п р о гр ам а   ти п а   Bobby  н е  м о ж е т   э то г о   п о дтв е р ди ть , о с о б е н н о  ес л и  ц в е т  я в л я е тс я  ч а с ть ю   гр а фи ч ес ког о   и з о бр аж ен и я . В о бщ е ,  ес л и   в н и м а те л ь н о   и з уч и т ь   сай т о б н а р уж и т с я   с л е д ую щ и й   те к с т   с   о тк а з о м с тв е н н о с ти : «Д о спут н о с т ь   -  э т о  в  к о н е ч н о м р о с  ч ело в еч с к и х  с п о с б н о с етй . О н а  о п р едл яест може т   л и   г р пу а   л ю де й   с   о п р ед лен н ы м и н и ям и  л егк о  п о лчу и т ь  до с ту п   к  и н ф о р м а ц и и в с ег о   ли ш ь   п о п ы тк а   п омоч ь   р а з р а б о тч и к а в е б - с тр а н и ц ы   боле е  до с туп н ы м и ,  н о  п о л н о н ост и  э т а  п р о г р а м а   г а р а н ти р о в а т ь   н е   м о ж е т»

л о ,  с . -

  Bobby,  т о   о т   о вт е  и от г е  в о п я  тем ,   о гр а н и ч е . Bobbyм   с е дл а т ь й   до с п у т .

Ча с т о  з адв ем ы е  в о п р о с ы :  http:/ / bobby.watchfire.com/ bobby/ html/ en/ faq.jsp# faq_onetool. Т ак и м   образ ом , с ай т  Zen G arden п р о ш е л к и   д о с т пу н о с т и ,  о тн о с я щ и е с я   к   H TM Lс щ у е с вт ю у т   а с п е к ыт , с  H TML н е  с в я з а н н ы е р ы е  о тн о с я т я  и  к  CSS, и  с о  в р е м е н е м  с ат л н ек о т р ы х  в а р и а н та х  ди з а й н а  о н и  н е  п р и н я т м ан и е . К о гд а  в  глав е  4 м ы  бед у м  о б сжу да т с та н о в к и  и з о б р а ж е н и я  Ф а р н ер а , т о  ув и ди м с  п о м о щ ь ю   CSS с о з адт ь   п р о блем ы , к о т р ы а в то м а ти ч е с к и й  и н с тр му е н т   н е   о б н а р жу и т р Уо

- - . . , 

  вс е  п р о в е р р а з м е тк . Н е к о т о  я с н о ы  в ь   м е от , к а к е  н и к а к о .

, н о , чт о  в о  в н и д  п о д  л егк о й

к   та к о в :  а в то м а ти ч е с к и е   с р е д вт а   п р о в ер к и   ти п а Bobby м о гу т  с л жу и т ь   в  к ач есвт е  о тп р а в н о й  то ч к и  дл я с о з да н и я   д о с т уп н ы х   с а й то в ,  н о   в   «Р е к о м е н да ц и я х » ест ь   м н о г о   н е   м ен е е   важ н ы х   п ну к т о в ,  к о т р ы е zyxwvutsrqp   с   их Л - zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA п омощ ь ю  п р о в е р и т ь  н е л ь з я .

Ис охн ы д

й т еск

М а с ш т а б и р еу м о с т

т

ь т е с тк

а

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

О нд а   и з   п робле м   CSS, о тн о с я щ а я с я  к  до с пту н о с ти ,  ч т о   ед л а т ь   п р и  и з м е н е н и и  р а з м е р а   ет к с а .  О ч е н ь   ох ч ест я  в ы б р а т ь  ш р и ф т  п о м е н ь ш е , ч то б ы  н а  э к р а н е  п о м е с ти л о с ь   боль ш е   и н фо рм ац и и . Вс е   м ы   з н а е м , к а к м ал о   м ес т а   н а   э к ран е , та к   ч т о   о с н о в а н и я  дл я   ат к о г о р еш ен и я  и м е ю тс я . т П р о блем а   в   то м ,  ч т о   м н о г и е   лю д и   п рост о   н е   м о гу ч и та ь  тек ст , н а б р а н н ы й  с л и ш к о м  м е л к и м  ш р и ф т о м . Д л я  н е к о т р ы х  н е ч и та е м ы м  я в л я е тс я  ш р и ф т  в ы с о т й 12 п и к с ел й , а  и н о гд а  даж е  24 п и к с е л й  н е до с та о ч н о . Р а з м у е ст я , уч и ты в а я   н ев ы со к у ю  р а з р е ш а ю щ у ю  с п о собн ост ь   со в р ем ен н ы х   м о н и то р о в ,  н и к т о   н е   с ат н е т ед л а т ь   ди з а й н   с о   ш р и ф то м   вы сот й   24  п и к с е л я , п о э то м у   н жу е н   ка ой - т о  к о м п р о м и с . К   с ч а с ьт ю ,  в о   все х   с о в р е м е н н ы х   б р а зу е р а х   и м е тс я м е ах н и з м  и з м е н е н и я  р а з м е р а  ш р и ф т а . Н е  вс е  п о л ь з о в а ет л и  з н а ю т , ка к  д о  н ег о  до б р а ть с я , н о  дл я   з н а ю щ и х ег о   ц е н н о с т ь  н е о с п о р и м а . Н е п р и я тн о с т ь  в о з н и к а е т  в т о м   с лч у а е ,  кодг а   раз м е р   ш р и фт а   вы раж е н   в  е ди н и ц а х  р х . Internet Explorer ум е т  м а с ш та б и р о в а т ь   ш ри ф ты , есл и  е ди н и ц а  и з м е р н и я  em и л и  %, н о  в  счлуа е  р х о н   б ес и л ен . П о э то м

у   п о л ь з о в а те л ь ,  ву ы н а   п омощ ь  с о  с то р о н ы  б р азу ер а Н о   в ед ь   ди з а й н е р у   н ад о   п р о с т ц ы   р х , и  вс е  бед у т  в  п о р я дк е О дн а к о   в   гл а в е   5 о бжсуадет м а ,  к о т р а я   м оже т   в о з н и к н ту н и я   е ди н и ц  em и  %. Н о   адж б р аз у е р а х воз м ож н ост в з гл я д ж ат ь   фо н о в у м ен н о г б р аз у е р жу и т е ш р и фт Б о л ь ш и н с тв ти р о в а н в а ьт с я му о л ч а н и ю

,  н е   м о ж е т   р а с ч и ты в а т , и  п р о б л е м а  о сате я о   о тк а з а ть с я   о т  еди н и , н е  п р а в д а  ли ? В о з м о ж н о я   совсе м   др г у а я   п робле е   и сп оль з ова ь   в   с лч у а

ь . . -

е  есл

и  тек с т  ус п е ш н о   м а с ш та б и р еу тс я   в о   в се х ,  э т о  ещ е  н е  в се . Д и з а й н  до л ж е н zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   в и т ау чы ь ь   м а с ш та б и р о в а н и я   (р и с . 15). Н а  п е р в ы й ,  н и ч ег о   слож н ог ,  н о   есл и   в ы   етдбу е   п ер м е э лем ен т ы   фи к си ро в ан н о г о   раз м ер а   (с к а ж е м , ю  к а р ти н к у  в ы с о т й   20 р х )  с  э л е м е н та м  п ер о   р аз м ер а   (н а п р и м е р , тек с т ,  в ы с о т у   котрог о р   и з м ен и л  с  14 д о  24 п и к с е л й ) , т о  б ы с тр о  о б н а ,  ч т о   м а к е т   н ач и н ае т   «п л ы ть » ,  к о гд а   раз м е р а   о тл и ч а е тс я   о т   то г о ,  ч т о   о ж и да л   ди з а й н е р . . S S  Z e n  ( l a r c t c rzyxwvutsrqponmlkjihgfedcbaZYXWVUTSR Katin  Zither R^gd 4 о   в а р и а н то в   ди з а й н а   Zen G arden п р о етс о   с  э то й   то ч к и   з рен и я  и  м о ж е т   м а с ш та б и р о т яс т е у р и мб а шс т а , а и н е  иж а р б о з я с и Р . 15 •  с к Те   н а   р аз м ер ,  н е с к о л ь к о   боль ш и й   п р и н я то г о  п о и  пио-црп ен т .

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

и

г И Н А Ч М И РЕ П й -

-

Е

Н а  ст й а е  A List Apart рн щ ем з а о  XHTML иы н ч и л з ра х я и н е ч за н artides/ doctype).

а н аь л е т и н л о п д я и ц ма р о ф ин я х  DOCTYPE (www.alistapart.com/

Че м

XHTM L и т ип

у м ы н а и уч л с

ы

M IM Ezyxwvutsrqponmlkjihgfedcb

С ай т  Zen G arden в  м о м е н т  з ап сук а  с о вт ес вт о а ц и фи к ац и и   XH TML  1.1.  В  к о н ц е  к о н ц о в м к ет а  п р о ш л а  п р о в ер к у  н а  с о в м есит м о с т т о   п о ч ем у   б ы   н е  и с п о л ь з о в а т ь   е е  в м ес т с п ец и фи к а ц и и  XHTML  1.0  Strict? К ат с ви ль н с в я а ет ч се к сел

, в  кыро т х  тпи ы  MIME ос тю авсыип я  бе л о е к чо р а П у  сйе т а о нб р д о п , мн жо о   тй а н и   н а  са т й а х  Web Standards  Project (www.webstandards.org/Learn/askw3c/sep2003.html) и  XML.com (www.xml.com/ pub/ a/ 2003/ 03/ 19/ dive- into- xml.html).

и  го в р я , XHTML -   э т о  н е  п р о с т о  требо в ан и е  п ра о  з ак ры в ат ь  теги . Даж е  есл и  п р и  п ро в ерк е  о к аз ы , ч т о  XHTML- ко д  абсо лю нт о  к о р екнт , т о  тн ех и и  сртан и ц а  н е  бе д у т  сч и аьтс я  XHTML- одмкуен отм и  дл я  н е е  н еп р а в и л ь н о  указ н  ти п  MIME.

,

  мн ог ц ел в ы е  р а с ш и р е н и я  э л е к тр о н н о й  п о ч ты ) -   э т о  с атн да р т  дл я  о п и с а н и я  и н ф о р м а ц и и , и  е ди н с тв е н н а я  п р и чи н а ,  п о   к о т р о й   в ы   до л ж н ы   о   н е м   з н а ть , с о с т и т  в то м , ч т о  п р а в и л ь н ы й  ти п  MIME дл я  XH TML- одкмуен то в - э т о   a p p l i c a t i o n / x h t m l + x m l .  М о ж н о  ук а з ы в а т ь   и   го р а з д о   бо ле е   р а с п р о с тр а н е н н ы й   ти п   t e x t / h t m l , н о  толь к о  в  к о н етк с е  с п е ц и ф и к а ц и и  XHTML  1.0 Transitional  и л и   в   то м   с л чу а е ,  е с л и   в ы   хо ти те ,  ч т о б ы   д о к ум е н т ,  у д о в л е т в о р я ю щ и й   сп ец и фи кац и и XH TM L  1.0  Strict,  б ы л   о б р а т н о   с о в м е с ти м ы м .  В о з вращ ат ь   д о к му е н т ,  с о та в л е н н ы й   в   с о тв е с тв и и  с о сп ец и фи к ац и е й   XH TM L  1.1,  к а к   т и п   t e x t  / h t m l н ель з я ,  ем у   о б я з а те л ь н о   до л ж е н   бы т ь   п ри п и са н  ти п MIME, г о в о р я щ и й , ч т о   э т о   XML- од кму ен т . З а дн и е  н жу н о г м ен т а  с в о ид ст я ем ы х  сер в о м ф и гру а ц и о н н ы Е сл и   в ы   н е  п о н и м а ет Д л я  н е п о с в ящ е н н ы и м ею щ и й   о тн о ш е н и

eee

о  ти п  к  н ео б хди м о с т  з а го л в к о в х  ф а й л о

а  MIME дл я  в о з в р а щ а е м о г о   одк у и  и з м е н е н и я  ф о р м и р у , н а п р и м е р , с  п о м о щ ь ю  к о н в   . h t a c c e s s  и л и  h t t p d . co n f. , о  ч е м   р еч ь ,  э т о   н е   в а ш а   ви н а . х  э т о  с л и ш к о м  тнех и ч ес к и й  в о п р о с , е  к  а дм и н и с тр и р о в а н и ю   с ер в а .

Н о  да ж е  в ы я с н и в , к а к  з адт ь   п рави ль н ы й  ти п  MIME, zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA в ы   е щ е   о тн ю д ь   н е  р е ш и л и   в се х   п р о б л е м .  Т о л ь к о   са : %  http:/ / bc  т   |   ( | Gj- zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ) zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA t

ess Zen Carden: The Beauty Ы  CSS Design

р -  

&

X M L P a r sing Error: m i s m a t c h e d t a g . Ex p e c t e d : < / p > . Lo c a t io n: ht t p : / / b ook. m e zzob lue . c om / xht m l. p hp Line N u m b e r 7 1 , C o l u m n 3 :

Рис

л  сп е , р а з   у ж   р а з ь  с  XHTML 1.1, о   бо ле е   с ат р о й

MIME  (M ultipurpose  Internet Mail Extensions  Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

г И Н А Ч М ИРЕ П

ut w  the listed links to learn • noie. and use № • mil* « П И   ;. IMMK.

CSS Н в с ти с п

х а с о е от в с

м

и тюеь н

, мр о фо

й и о тв с н а тр с о п

м zyxw

*

О дн а ж д ы   вн и м ан и е  Р ад zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

tne (yetю  se>llnie- nonored technique* in raw ь  Высот е  ип и  w№  ihe and M g ar r t ng м Ы п Ч

«mioao me н п р Н   imm (He and c et »•   la woik I  tiipy lot ;iiiy. One» ynu tiara t unipWed vow steiplec* (and pleat* , don't wbrnii ^finiir* dwoiiouplo* ayb4r.t3v  [11* to a wnb w

I

r

K

w

t

r

H

. ' j < " : < i i

t

t

c

i

h

' 1 1

y

o

o

o

s

u

i

e

t

t

«

o

i i f t i t i j t i . t

*

u

s

f

i

K

e

n

S

M

I I . w

a

l

S

X

u

И

I

e

J

U

n

*

w

i

l

n

i

+

l

s

i

t

«

p

t

i

h

i

n

k

d

e

n

s

«

r

t

t

n

h

e

W i i i

c

D

m

t r r t

у  Дарв с а   п р и в лек л и п о дс л н и х у ,  р а с тщу и е   н а  б а л к о н е . О н   н а ч л сн и м ат ь  и х , и  в  р ез луь ат е  р о ди л а с ь   и ед я  ди з ай н а   «П о сд лн »ху .  О б р а б о тк а   фо т гр а фи й в  Adobe Photoshop п о м о гл а  ем у   с ф о р м лу и р о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA в а т ь   и ед ю  р а б о т ы   дл я  сай т а   CSS 2'е п  G arden.

rtiopatrT Го г  ucujnition. Intpirslion, and a & w-  can Ш ! гв1# lt *p « i f i r  l i n t , Ь м щ а 1 ( Ы

Т у,вчА

 

w* 

m i l l 

t h e  r n i m l  i/   ju t U   p r a n i w * . 

« n l i g h u n m c n t  h «  b n n  ^ < w l  fafktiU   T h e  аш

ь  н а з ы в а ю

т  та к ж

е   д и рх о м а з и е й

.

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

Wt'u

:.,

t h a u l u  li. U ir  l i r . l m . r W . r o ,  , 4

I b (  ( VjC ,  Waitf* a n d  И м  m a j o r  b i w K '  m a l m

  Z m  G a r d e n  Jn vilt st  yo u  lu  reUn  aixl  i n e d i u i e  « i  tiw

( i i i p u t i u i t  Wm . n j  i /   t b r  n u u t r o .  H r ^ i i i  w  v r  wilii  ch n xty.  L c u t i U>  a *e  U w  [ у я

. Бо л ез н

с   fXM ta,  a iu t  h M b a U H  wp fi o i t .

< Vdr 

'  t n  t * )  l i i w f c m a n s d 

i n vi t p t a l . n g  fcoblon.  В е а я я

е   ае ч

t u b n i q i w *  En  n o w  t o d

  wi t h  t h e  wu b .

So What is Thi$ About? Ibttr ii ctarly •  пЛ ая  htCSS In  be Uitrn i r t i i u .  T h e  / r t i  h a r d e n  iir.it  t o  t « i l e ,  i c t p i r e ,  a n d  c i K 4 u r J *=   p a r t i dp- atLU- ..  1и   h t - ^ n ,  л е

-

, п р т   сп о

и о  и о

н   он

а

t b *  r . u u i 4  i k « | i u  i n  t h e  K*L  L U ckiii*  « i  a n y  H I *  *i»  k * d  ih e  t t y l e i h e e l  M )  t h t t  t , ft y *т ы

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

,

г   i r u i i u u  tb/ r  U T D T ,  i h *  |д ^ п   1Ы \г д   t l m ( h i *i ^ n r 4 jr d i *H H M M ( J fr r ^ 1  .(ян  fiir.  W- *,  * г - *У у I I M  m a i p Vt B  a n d  Ы   o v t m l  u v. t  r b c  rtyir  п Г  I  h > p r r t r M B n V  « y  t his nu> I w

rated  in  л   M f  I h a t  tfib  p r t ^ l c  L c n J  i n  t h e  l u n d »  U  1ги н

e

«  а Ы

reital 

is  by  d e o wwsi r a t i n x  - - h si

г   to  c r e a t e  b «i o i y  from

n

h> b e , o n »  t h e  r eins

T * w  I W m v o f 

G

L f t j

a

r

d

e

n

7 л

mttfli- аЫ

 

Routl 

to 

read 

 

1

'

e J

* ) ' -   * * 

•

и

C A^i

" "' 

" * * ' 

^ 

о ь

l i y  ih e  p » t  t e t e »

i p e d f i t U j i . i n e o m i M ' t i i ' b !  / Х > Д К « л

as- txaed

е

Knlia tha

wort on * t opy  tot, *?.

aubmil ha * I m e ha d  • аг Л ) uphud grow , «» K* I n w t b i i m i w d w a o d d w a cftoost lo us» H, «n y* uf «wHtel. S i f J s r t J K= * t e t h a  Ш w l tpidaf I h * » u c ^ « d t nuga a . Final ««Ъпм м кда * w l b* ptac*O

Vfhy p a r iic ^a t * ? Fen i* c &} ™t »n. m ip int m n. aatd a t a t oui«a • all ia < t d  r o w s p a n = " 3 " x i m g  n a m e = " b a l l a d e _ r l _ c 3 " s r c = " i m a g e s / b a l l a d e _ r l _ c 3 . g i f "  w i d t h = " 3 0 " h e i g h t  =  " 8 8 7 "  b o r d e r = " 0 "  a l t  =   " " x / t d > < t d x i m g  s r c = " i m a g e s / s p a c e r . g i f "  w i d t h = " l " h e i g h t = " 2 7 3 "  b o r d e r = " 0 "  a l t = " " x / t d >

< C d x i m g  n a m e = " b a l l a d e _ r 2 _ c 2 "  s r c = " i m a g e s / b a l l a d e _ r 2 _ c 2 . g i f "  w i d t h = " 5 3 7 "  h e i g h t = " 4 2 9 " b o r d e r = " 0 "  a l t = " " x / t d > • c t d ximg  s r c = "  i m a g e s / s p a c e r  . gi f"  w i d t h = " l " h e i g h t = " 4 2 9 "  b o r d e r = " 0 "  a l t  =   " " x / t d >

• c t d ximg  n a m e = " b a l l a d e _ r 3 _ c 2 "  s r c = " i m a g e s / b a l l a d e _ r 3 _ c 2 . g i f "  w i d t h = " 5 3 7 "  h e i g h t = " 1 8 5 " b o r d e r = " 0 "  a l t = " " x / t d > < t d x i m g  s r c = " i m a g e s / s p a c e r . g i f "  w i d t h = " l " h e i g h t = " 1 8 5 "  b o r d e r = " 0 "  a l t  =   " " x / t d >

< / t able>

си Р

. 5 •   роапикнТ

си Р

. 6 •   ан сивор а Н «Ба д а л а

с ь ю бпо т л а в

, вщ у дае

я   к  вод хы

я   о кш к т   ны м п р и т я

»  еуобизл я

у   и з  са д

а  ве а сдо

, унсапы

т  в  пов ар и  дмяла теи

а   м я ь и сл т

м  ен хрев , зле рит

ю  ест

и

м  уулг . ь  н а  чт о

В  т е р м и н а И з  э то г о  код к и х   о тн о ш е н и я х •   пр р а з м е тк и

а  в и дн о

, ч т о  м ак е

х  CSS т  усл о ж н яест

я  в  н ес к о ль

и   та б л и ч н о

й   в е р с кт

е   воз н и к ае

т   мн ог

е   п с у ыт о   п оле

•   боль ш а я   ч аст ку , ч т о  ув е л и ч и в а е те л ь н ы х   ет г о в

х   к а р ти н о й  и  о тс пу о в и   ву е л и ч и в а е ь   к а р ти н о т   раз м е , а  з н а ч и т

к   в   к а ч е свт ,  и м е ю щ и сх т   «все к   в к лю ч ен р  ф а й л , и  в р е м

т Хо

я  ме ка т  н а  ос нов е  CSS обныч о  проис выета я  бер сыт е  и е л бо е  понвал , че м  сан олж я  танибчл я  ва крест , н о  иесвзт н  та к м е а ыв з н й  феомн е н  «поевниля я  несилтзовнаг о   ок н е т а» т . О н  воезаник т  в  барезу х  IE, кдго а  CSS имсятеирупо , а н е   п р и с о е д нт я я  п о   с ыелк . Есл и   в  заго л вк е  муодк ент а ю ву с п р и т т  эметлн ы  l i n k  ли и  s c r i p t ,  т о  эо т т мон фее н н е  во зниеатк . В о  вс е  втнриа ы  дийзан а  CSS Zen Garden вюлк ы  утин ар ст ь  эт у  пмеболру ,  мо эпт у е ч н  эм ен л т  s c r i p t ,  бо т ч п р о и с вк а  пеа к отр т  го кдал . Пебнор д е  о  фемоне е  пелвоя ин я  нонгизавлсет о  ктне о а  см . http:/ / www.bluerobot.com/ web/ css/ fouc.asp.

й

е   р а з де л и я   в  CSS, » с тр а н и ц ы ;

а   в   сам у   р аз м ет а  з а  сч е т  до п о л н и я   з а г р зу к и ;

•   та б л и ч н ы й   ди з а й н   п о  с в о е й   п ри род в а ьт с я   н еи з м ен н ы м   н а   в с е х   с тр а н и ц а к а ж до й   с тр а н и ц е   е дб у т   п р и с ут в о в а т та б л и ц ы  и  вс е  тег и  , п о э то м п о н ен т ы  с тр а н и ц ы  п е р и с о в ы в а ю тс з а грзу к е . В  счлуа е  CSS м ак е т  к э ш и р еу тс я т а  CSS Zen G arden код , уп р а в л я ю щ и ям и , з а гржу а ест я   то л ь к о   о ди н  р а з

Е

о   ли ш н е

;

•   п р и м ен ен и ет л й   в м ес т бе з  н ео б х ди м о с т

г  ЧАНИ Е М ПРИ

-

:

-

е   од л ж е

н   о са т .  Н а а у  к а р ти н к и  и  к о м я   п р и  к аж од й , а  дл я  сай й   и з о бр аж ен и . х   с а й ат ь   р а з м е тк

К о н еч н о ,  вс е   э т и   п р о б л е м ы   ах р а к т е р н ы   дл я   л ю б ы х та б л и ц . Бо л ь ш и н с тв о  ди з а й н е р о в  п о н и м а ю т , ч т о  ч р ез м ер н о е  и с п о л ь з о в а н и е  та б л и ц   м оже т   бы т ь   п ри чи н о й и   др гу и х   н е п р и я тн о с те й , в   то м   ч и с л е   и   в   п лан е   од с т пу н о с т и ,  п о с к о л ь к у   м н о ги е  п р о г р а м ы   ч те н и я  с  э к ран а , п р е дн а з н а ч е н н ы е  дл я   с л е п ы х ,  н е п р а в и л ь н о  и н ь т е р п р е т и р ую т   с о де р ж и м о е   та б л и ц .  А   е с л и   уч е с т осн овн о й  с м ы с л  да н н о й  р а б о т ы  -   н а п р а в л е н и е   в з гл я д а   з р и те л я  -   т о   с та н о в и тс я   о ч е в и дн ы м   е щ е   о дн о : н е ку л ю ж и й   с та р ы й   п о хд д   р а з р уш а е т   в п е ч а лт е н и е   не п ре ы вн ост и  п о т к а , п о с к о л ь к у   слож н ы й   та б л и ч н ы й м ак е т   обы чн о   п р о р и с о в ы в а е тс я   к су а м и .zyxwvutsrqponm

о х дП

д он в

й о лш к

ы

С  п о м о щ ь ю  CSS го р а з д о   п рощ е  с о з да т ь  ди з а й н , к о т т  з агржу аьт с я   и  п р о р и с о в ы в а ть с я  бе з  р ы в к о в р ы й  бе д у п р и я тн о   д л я   гл а з .  В м ест о   слож н ы х   та б л и ц ,  н а р ез а н и я   и з о бр аж ен и й   и   п ри м ен ен и я   гр а фи ч ес к и х   р а з ед л и те л й  ди з а й н е р  м о ж е т  с о с р е до т ч и ть с я   н а  с ти л и з а ц и и   о тд е л ь н ы х   э л е м е н то в .

НИ -ЧА   ПРИМЕ т а в ы т р бе О

Е ь   ка р и т н к

до г к а  гик фра а с  яте я лв м ине е  тока й  тнеихк Zen Garden ос теад бсжу

и  згоал в нычм я ме л но ъ тое и  понсадвкт я  в  гв а л

М ы  в о в с е   н е  хо ти м   с к а з а ть , ч т о   в  д и з а й н е   н а   осн ов CSS  в о б щ е   н е   до л ж н о   бы т ь   в с тр о е н н о й   гр афи к и К он еч н о ,  э т о   и м е т   см ы с л   де л а ть ,  к о гд а   гр афи к п ри в яз ан а   к  к о н те н ту ,  н а п р и м е р , е с л и   н уж н о   п оме с ти т ь   ф о то г р а ф и ю   ди р е к то р а   н а   с тр а н и ц е   «О   к о м п ан и и »  и л и   с н и м о к   с   э кран а   н а   сай т е   фи рм ы , п р о и з в о дя щ е й   п р о гр ам н о е   о бесп еч ен и е .  С ут ь   в   то м и  эмеал тн и  по лезно , ч то б ы   о тде л и т ь   и з ображ ен и я   и   д р уг и е   э л е м е н ты й ь  ста ч ю  згао л вк . При с л уж а щ и е   и с к л ю ч и те л ь н о   дл я   п р е з е н т а ц и о н н ы и  иени зоб ржа й  н а  стй а е  CSS ц елей , т о   е с т ь   я в л я ю щ и е с я  ч а с ть ю   ди з а й н а ,  а  н е  са е  4. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA мог о   к о н те н та .

, е . а , , х -

и з айД

н zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Н иж е   п ок аз ан о н о й   ч аст и   с тр а н и ц ы ловоч н ы х   э л е м е н то в

, ка к  гр а ф и к а , и с п о л ь з еум а я   в  о с н о в , з адест я   с  п о м о щ ь ю   фо н а  з а го :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

tpreamble h3 { background: url(road.jpg)  top  left no- repeat; height: 106px; } #explanation h3 { background: url(about.jpg)  top left norepeat; height: 168px; } #participation  h3 { background:  url(particip.jpg)  top left norepeat; height: 154px; width:  565px; ) ќbenefits  h3 { background:  url(benef.jpg)  top  left norepeat  ; height: 171px; } ќrequirements  h3 { background: url(req.jpg)  top left no- repeat; height:  125px;

С   п омощ ь ю   р асш и р ен и я  Web  D eveloper  дл я   б р азу е р о в  Mozilla  и  Mozilla  Firefox  м о ж н о  в к л ю ч и т ь  п р о р и совк у   к о н т ур о в   дл я   б л о ч н ы х   э л е м е н то в   и   ув и д е т и д е н ти ф и к а то р ы  и  клас ы  все х  э л е м е н то в  (р и с . 7). Э т о ч ен ь  уод б н о , кодг а  н жу н о  уз н а т ь   то ч н о е  р а с п о л ж е н и е  р а з л и ч н ы х  с ек ц и й  в  ди з а й н е . П о м е с ит с тр а н и ц н ес к о л ь к и

в   к о н те н е   фо н о в у х  в а ж н ы

•   з а   сч е с тр а н и ц ы

т   в н ут р ю   гр а фи к у х   ц ел й

т   боле

е   п р о с то

ь   э л е м е н то

г   сраз

ь о -

в  н а у

: й   р а з м е тк

и   ум е н ь ш и л с

я   ве с

;

•   в ы н ес н и е  б о л ь ш е й  ч а с т и  (и л и в  та б л и ц у   с ит л е й   с п о с б с вт е у т к и  сай т , п о с к о л ь к у  CSS- фай л ы зу е р у   н е   н уж н о   п о в то р н о   и н те р п р е ти р о в а т фо р м ац и ю  о  сит л я х  п р и  к аж од й •   сай до к м у е н т от в

в   и   п р и м ен и р   д о с ти

,  ди з а й н е

-

т  с та н о в и тс

я  б о л е е   н е т  н и к а и

е  до с туп н ы м х  п р е з е н та ц и о н н ы

 в с его !   су к о р е н и  к э ш и р юу тс  з агрзу к

) о ф о р м л е н и

я

ю   з а г р зу я  и  бра ь   ин е  с тр а н и ц ы

;

, та к  к а к  в  с а м о х  э л е м е н

м -

;

•   с а й то м   с та н о в и тс я   п рощ е   уп р а в л я т ь .  П р е дп о л о жи м , ч т о  с  п р и ох д м  в ес н ы  м ы  хо те л и  б ы  о б н о в и т «Бал»уд ,  в к л ю ч и в   з ел н ы е   и   з о л о ти с ты е   ц в ет в м ес т о  то й  п о н ур о й  га м ы , в  к о т р о й  о н а  н а р и с о в ан а  с ей ч ас . CSS п о з в о л я е т  с п р а в и ть с я  с  э то й  з ад ч е й  н а м н о г о  л егч е  и  с  м е н ь ш и м и  н а к л а дн ы м и  р ас о х ад м и ,  ат к   к а к   м ы   з а р н е е   п о дм у а л и   о   ги б к о с т ди з а й н а .

ь а и

си Р ы н з е ло п лд мт ен эл е йн а из д

. 7 •   йиаз Д н  «Б» ад л а , ка к  ег о  пюаывз ок е  имруыснте , им щюе си я  в  рсша инер я  Mozilla и  Mozilla Firefox. Зсе д ь  дл я  кодг жа а  насвиор н  круонт , та к  чт о  вонид р  са стр ев л  сцин ар т у  и  иаовз ьсолп

т ын чи л з ар

е и  Web Developer о  бонг чл о , ки ка м  оз абр м л  фоуовн ю и гк фар у

В г НИ А Ч Е М И ПР ти з ур г а З

В п о и са к

х м со т

Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ь  и н ешср иа р

Firefox  н мжо о  с о ц и н са р т firefox/webdeveloper.

е  Web Developer  л д я  Mozilla  и  Mozilla ы  http:/ / chrispederick.com/ work/

'• * •-

п о и с ка

а

х м ост

а

zyxwvutsrqponmlkjihgfedcb

Э ф е к ти в н о е  п р о е к ти р о в а н и е  в е б - с тр а н и ц ы  -  н е п р о сат я  з адч . Д и з а й н е р у   п р и о х д и тс я   чу и т ы в а т ь   м н о ги ф а к то р ы . В  «Балед » н а гл ядн о   п р о д е м о н с тр и р о в а н о к а к  м о ж н о  с  п о м о щ ь ю  ди з а й н а  н а п р а в и т ь  в з гл я д  з р и те л я ,  с   п о м о щ ь ю   ц в е то в   п е р да т ь   н а с тр о е н и е   и   ка и сп оль з ован и е   CSS  в м е с т о   та б л и ц   може т   п овы си т к а ч е с вт о   с а й ат .  Н а м   к аж естя ,  ч т о   ди з а й н е р - н о в и ч о к т  с в о б де н   о т  ог ср аз у   н ач авш и й  с  и з чу е н и я  CSS, бед у р ан и ч ен и й  и  усл о в н о с те й ,  н а л га е м ы х   тр а ди ц и о н н о т е нх и к о й .

е , к ь , й

Д л я  ди з а й н е р о в , к о т р ы е  п е р ох дя т   н а  CSS о т   та б л и ч н о й   в е р с тк и ,  тр удн о   в ы р а б а ты в а т ь   н овы й   сп осо б м ы ш лен и я .  Бе с п о р н о , ч т о   CSS  п о з в о л я е т   вы й т и  з а рам к и  м н о г и х   о гр а н и ч ен и й , к огд а   м ы  дела м   н абро с к и , р а б о ат е м   в  Photoshop, г о т в и м   р а з м е тк у   и  п р и м е н я е м   к  н е й   с ти л и .  Н о  в о т   н а й т и   м ост ,  с о е ди н я ю щ и й раз н ы е   те н х о л г и ,  -   э т о   п р о б л е м а .  П р о де м о н с тр и рова в   да у ч н о е   с о ч е та н и е   тв о р ч е с к о г о   в о бр аж ен и я , жи воп и с и  и  CSS, Ш а р л о т а  Ла м б е р т   п ри з ы вае т  ди з а й н ер о в   п рой т и   п о  м о с т у   и  в з гл я н ту ь   н а   м и р  п о - н о в о м у .  О н а   од к а з л а ,  ч т о   н о в ы е   п р о гр ес и в н ы е   м е от д ы т   о с в о б ди т ь   н а с   о т   п у т   тр а ди ц и о н н о г о работ ы   м о гу в е б - ди з а й н а .

"• г

р zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM й Дэ в Ш и  (Dave Shea)

и й з а не Д

www.csszengarden.com/064

ан о ч Н

я  поездк

и а е р нв о б з П ок м н ш м м и ш мя

д и ре ш и н м

а

е с т о а е к чи й ем л д о и т йа с а в е и щ а ю и к нз о в х тн у п о о а дз ч zyxwvutsrq zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM

В с п о м и н а е ст я л е   н а с тп у л е н и ч и т  м елоид я н о м   К о л тр е й н о м ж е л ты е   о гн и вой . В  «Н о ч н о с о з ад т ь   н а с тр о е н и

: п о ез дк я   см у е р к , и с п о л н я е м а , глбуо к а й  п оезкд

у  в с к о р а  п о  горд ,  и з  ди н а м и к о я  н а  с ак с о ф н ,  з а   о к н о м   п р о н о с я тс я   с и н ев а  н еб а  н а » Д э й в  Ш и  р е ш и е  л е тн е г о   в еч р а .

е  п о с в  з в у е  Дж о

од х ны вод

и  б ы л и  в ы б р а н ы  и з - з а  ц в ет : к о гд а  в ы  еедт е  н а  м а ш и н е  п о с л а  со лн ц а , т о  ожиадет е  уви едт ь  п р и глшу ен е   о гн и , глакду ю   к а к  зерка л о   п о в е р нх о с т ю  си н ев у  н еб а  н а д  г о р и з о н то м ы  и  н еяс н у

я

д  гол л  в о с

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

-

-

 то н

. и

 п ят ь  и з  тек

й -

 се д

-

а  и  те е  з а ь .

е тр л ь н и А а в ы

е  в ар и н т

я о кд

Ви з а у л и з а ц Рис

Рис

. 1  4о в о - л аго  З

. 2я  4  ени ж а р б Изо

к  «Ночно

й ки д з е  по

, схраненны о

К о гд а  Ш и  го т в и л   ди з а й н   «Н о ч н о Photoshop, о н  м а л о   з а дм у ы в а л с сат ь  к од . С н ач л а  н ад о  п о дг то в и т з ац и ю  м о ж н о   о тл о ж и т ь   н а  п о т м

»

е  отдельн

о  о т  фон

а

Н о  ка к  п р е в р а ти т н ы й  сай т ? К огд а д и ст я  с о рх а н я т ь п р е д с то и т   со брат с в ет у т   ч е кт и х   п рави л клю чо м   к   су п е х у   а л ь те р н а ти в ы и м ет ь   в  в и д ед т   п р о щ е .

л т ь А е р на т и в ны в а р и нт Р а с м о тр и с ты к о в а н н ы н а  я р к а блем ы а  з ает з рач н ы воз можн ы с Ри

. 3  4  к о в о л Заго

, разрезанны

й  н а к с у  к

ы

а й   п о е з кд и я   о  то м ь   гр а фи к у .

zyxwvutsrqponmlkjihgfe »  в  Adobe , к а к  бед у т  п и , а  р еа л и -

ь   с ат и ч е с к у  ди з а й   раз н ы ь  в о е ди н

ю   м о де л ь   в  и н те р а к ти в н  р а з б и в а е тс я   н а  к сук и , п р и ох е  и з о б р а ж е н и я , к о т р ы е   п оз ж о  с  п о м о щ ь ю  CSS. Н е  сщу е , о п и с ы в а ю щ и х   э т у   п р о ц е дру у   я в л я е тс я   г и б к о с ть .  Е с л и   з аран е ,  т о   п р и н я т ь  р е ш е н и е   бу

е , е -

е ы я  ж е л та : з а п о л н и т м   н алож и т й  ф о н

м   з а го л в о х   п р я м о уг о л ь н и к о в я   э м б лем ь  о б л а с т ь   п о в ер . П о р а з м ы с л и в х   п о х ад

к   «Н о ч н о

й   п о е з кд и »  -   н а б о р  с о , н а  к о т р ы е   н алож е а   (р и с .  1). З едс ь   ес т ь  дв е   п р о ь  ф о т г р а ф и я м и  и  л и н и я м и х   э м блем у ,  з а д в  д л я  н е е  п р о , Ш и  о с та н о в и л с я  н а  дв у

, х

:

и zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA 4-   п о дг о т в и т ь   о нд у  б о л ь ш у ю   к а р ти н к у , с о рх а н и в  е е в  ф о р м а т е  JPG  с  о ч е н ь  м а л ы м  к о э ф и ц и е н то м  сж а ти я , ч то б ы   и з б еж ат ь   и ск аж ен и я  л и н и й . В  р ез луь ат т е   п о л чу и л с я   б ы  ф а й л  б о л ь ш о г о   р аз м ер а ;

4-   р а з р е з а т ь   к а р ти н к у   н а   к су и ,  а   з а те в о е ди н о , п р и в я з а в  к  р а з л и ч н ы м  э л е м е н та # p a ge H e a d e r  и   # e x t r a D i v s  в   к о н ц (ксук и , п р и в я з а н н ы е  к  п о с л е дн и м  э л е м е н та м н о  п о м е с ти т ь   н ав ер х   с  п о м о щ ь ю   а б с о л ю тн о г з и ц и он и рован и я )  (р и с . 2). Ш

и  в ы б р а л   в то р о й   сп ос б , н о  то л ь к щ ат ь   в с е   п р я м о уг о л ь н и к и   в   о тде л ь н ы п о м е с ти л   к а ж уд ю   и з  дв у х   ф о то г р а ф и (р и с .  3). Т ек с т   «ess Zen G arden»  б ы м а т е   G IF, а  вс е   о с ат л ь н о е   сатл о   о дн и вы соки м   к о э ф и ц и е н то м  с ж а ти я н о г о  к од а  дл я  с б о р к и  з а го л в к а   п о л чу и л а с ч еат н и е  р а з л и ч н ы х  м еот д в  в ер скт и сп оль з ован и е м   GIF и  JPG - фа й л о в

м   собрат м   в н ут р е   с тр а н и ц

ь  и х и ы , м о ж о   по

-

о   н е  сат л   п р ев р а е   к а р ти н к и , а й   в  JPG - ф а й л ы л   с о рх а н е н   в  ф о р м   G IF - фа й л о м  с . И  в м е с т о   з а п та у н ь   яс н о е  с о и  с  о дн о в р е м е н н ы м .

и зД а й

н zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

П о сл е  тог о  ка к  файл ы  б ы л и  с орхан ен ы , н астл о   в р ем я , к а к  и х  с о б р аьт :  к а и е  к а р ти н к и  к  ка п о м уд а т ь   о  то м ки м  э лем н ат м  п ри соиед н и ьт ? Р аз мун о е  и с п о ль з о в ан и е ра т и б у а   b a c k gr o u n d - i m a ge  и  тенх и к и   п о сд а т н о в к и   и з о б р аж ен и й   ел а с д о   о вт е т   о ч е в и дн ы м :  п о ск о ль к у в н рт у и  раз елд а   ttpageH eader  э л ем н от в  дл я  э то й  ц ел и н е до с та о ч н о ,  с л е до в а л о   п р и б е г н ут ь   к   э л е м е н та м е  дмокену ат .  В  рлзеь у # e xt r a D i v,  н оящдах и м с я  в  к он ц та е  осн ов а я  фон ова я  киартн к а  бы л а  п ри соден а  к  эле м не т у   h i , а  з аогл в к   «ess Zen G arden» -   к  э лем н т у  h 2. Н иж е  к о д л е н   ц в е то м

, о тн о с я щ и й с я  к  э ти м  и з о б р а ж е н и я м , в ы де :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

hi { width:  770px; height:  166px; margin: 0; background:  #000 url( repeat;

2.gif)  top  le ft  no-

h2 { width:  244px; height:  42px; b a c k g r o u n d :  # 000  u r l ( h i . g i f )  t o p  l e f t  n o -

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH

repeat ;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   Ш Ш Ш Ш тШ position:  absolute; top:  120px; margin: 0; margin- left:  495px; hi  span, h2 span { display:none;

г И Н А Ч М ИРЕ П Д о п о л н и те л ь н ы ст о   к о т р о г м е от д   с ей ч а

М а ги п о з и ц о ни р о ва ни И та к п о п ы тк п р о б лем а ч е та с н о с ть н и рова э кран а ч то б а  до ч е р н и ри рова

и  дл

е  с ит л о   п о д с та в л я ю тс с  с ч и атес

я  sp a n  с к р ы в аю я   и з о бр аж ен и я

я   ус т а р е в ш и м

т  текст ,  охт

, в м е я   э то

т

.

я а б с ол т ю нг

о я

, дл

я  разм е щ е н и е   вклю чи т :  а б с о л ю тн о я   с  ц е н тр и р о в а н и е м ,  Ш и  п р и м е н и л   р о ди те л ь с к и , з а д в   дл ы   р а с т я н ут е  э л е м е н т л   в  п р едл а

С   ч у е от р а х   п о л чу и л с

я  ф о т г р а ф и ь   и х   в   з а го л о в о е   п оз и ц и он и рован и

я  н и ь   н ы х  

, н о  п р и т   н ова я е   п лох о  с о . Ч т о б ы   обой т и  э т у  тр ду л   п олез н ы й   тр ю к :  о н  п о з и ц и о е   э лем ен т ы   в до л ь   лев о г о   кра я х  а тр и б у т   w i d t h  р а в н ы й  100%, а   вс ю   ш и р и н у   окн а   б р а уз е р а ,  -   в  да н н о м  счлуа е   sp a n  -   ц ен т р о д и те л ь с к и х .

м   к о м п ен сац и я   та к о

й  к о д

и  р а з л и ч н ы :

#extraDivl { position:  absolute;

й  вс е  готв о к   воз н и кае

х   ош и бо

к   в   б р аз у е

Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSR

д о т еМ ы к во  пн а тс до и и н е  иж а рбо з м е лб ы  с тю ад жбсоу я   н а  сцин ар т articles/repLace_text.

-

е  с  нм и и  пор й  и ы н а з ся в е   www.stopdesign.com/

Л о в ко с т

ь  р у

к zyxwvutsrqponm

top:  41px; left: 0; text- align:  center; width: 100%;

#extraDivl  span { background:  transparent  url(granville.jpg) top  left  no- repeat; display:  block; margin- left:  auto; margin- right:  auto; height:  123px; width:  770px;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP

г ЧАНИ  Е ПРИМ ине чанЗ лс Е н ме

Е и т а  зд а т с т и ст с м е

е  p a d d i n g дн ж л о о  бт ы ь ш  бе ь л о ь  дл я  p a d d i n g - r i g h t н и ч и л е в я  лш и ь  н а   50 р х   о т о н ь л а цр т н е

т  ц не рит ован , а  дневлаоб и е   p a d d in g аТ к  ка к  эмнел , че м   в ы е т е а од и ж . ил в е ч у а т   ш ирн у   э м ел н а т , т о  оу ст п  равн омре у  100  х р , т о   е лэ й  оси . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н о  рс теял пдсаер я   п о  об е  сорнт ы . Эт з ь а тс

о  срабето

й   э л ем н т  долже н   ока , н о  елс и   э т о   н е  тка ?  Занд и е л д я   о ч д ер н г а   св о й т а   p a d d i n g  влеиу ч и в ае т  ег о  общ у ю  ш и р и н у , оовтди аг я  те м  сам ы м  о т п  расш и рея т  элмен т ц не р а т . Тюр к  зсе д ь  такой : оу ст и  влево , и  вп раво , з н ачи т  дл я  доист ж ен и я   ж ел а м о а   з н а ч ен и е   н е о и бд х м о   вд у о и ь т . К ро г о   р е з л ь а ут м е   от г ,  оуст п   в с ди а г е т   э л ем н т   в   н ап р ав л ен и , п р о ит в о п о л ж н о м   отм у , к  к о тр о м у   о н  п р и м ен ен , с л ое д в а т ь н о ,  чотб ы   свд и н т у ь   к а рит н к у   в ле о  о т ц е н р та ,  н да о   з атд ь   с в о й св т о   p a d d i n g - r i g h t ,  и н ао б ро т .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPON я   о тч н

,  лсе о   в  ц ен рт о   э л ем н т

с о т Лк в

и  доч ерн и

ь ру к

Р з а о бр в ш и с ь   с  золвгкам , Ш и  скнсол ту я   с  н ов й п р м о е бл й  п р и  п оп ык т е  увзя ат ь  ег о  с  оьлан тс ы м  кно н е от м . О н  хе то л  рилезатд ь   к о лн и  двой н о й   и рт в е к ьл а н о й  ли н и ей , н о  п оп ык т а  п ри м ен и т ь  к  ко жда й  ко ло н к е   фо н о в е   и з о б р аж ен и е ,  п о в т р яю щ е с я  п о в е р ти к а л и ,  о к аз лас ь   н е да у ч н о й .  еЛв а я   кол н к а ( # l i n k L i st )  н е  ршса и салря ь  п о  ви рткела и  н а  нж у н у ю  вели ч и н у , а  п рав я  в  дей всти ель н ост и   со я т л а  и з  тре х  раз н ы х  элмен о т в  d i v  (# quickSummary, # pream ble  и   # su p p o r t in gT e xt ) . Н е  и ме я  еи днве тс ог ыб л о  б ы  п ир донсе и т и дн е и л  е е  к о  вес и тм е ь  ои ндувока о р г и з о н ал и т :

м  тмре ю  ш и р н

о  эмелн а т ь  фон ову , ппрдеолжи в

, к  кормт ю  ки ратн ку у  и , знчаи т

, вы нвор юяс т

у   м ож н , о н  п ри со , чт о  он и  бу д у

о т я  п о

#quickSummary,  #preamble,  # supportingText  { background:  transparent  urltbg4.gif)  top  left repeat- y; margin:  0 0 0 4  00px; width:  342px;

О н и   и   в ы р а в н и в а ю тс я , то л ь к о   воз н и к ае т   н е о ж и да н н а я   с л о ж н о с ть : м еж д у   d i v  о б р а з еуст я   в е р ти к а л ь н ы й раз ры в   (р и с . 4). Н о  в ед ь  п о л я  н и  дл я  о дн о г о  d i v  я в н о н е  з а д н ы , октду а  ж е  о н   берстя ?zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

я лоп

и е щ с а л в х ю С оп ы

я

В  м о едл и   п р я м о гу л ь н ы х   о б л а с ет й ,  п р и н я то й  в  CSS, ес т ь   о нд а   с тр а н н о с ть , п о л уч и в ш а я   н аз ван и е   сл хо п ы в а ю щ и сх я  п о л е й . Э т о  о з н ач ет , ч т о  есл и  дв а  э л е м е н т а ,  п р и ч е м   дл я   о б о и х р а с п о л а г ю тс я   о ди н   н а д   д р гу и м з адн ы   н е н лу е в ы е   п ол я  и  п р и  э то м   н е т   н и   о тс п у о в , н и  гр а н и ц , н и  е щ е  к а к и -х л и б о  я в н ы х  ус л о в и й , т о  п о л н а я  в ы со т а  п о л я  бед у т  м е н ь ш е  с му ы  дву х  п о л ей . Т ак , п ол я   ш и ри н о й  20  п и к с ел й   н е  дауд т   в  сму е  п р о м е ж от у к  ш и р и н о й  40 п и к сел й , в м е с т о  э то г о  п о л я  слохп н ст у я , и  в ы  п о лчу и т е   вс е  т е  ж е  20 п и к с е л й . Н о   ка о п р о б лем н я е ст я  к а ты ; п о с к о л ь к т о   н и жн е п о с л е нд е г чи н а   п ол з адн н о в и дн о  в К ол в и ть о ст у ван и ч ез а ет

е   о тн о ш е н и е   эт о   и ме т   к   в ы ш е уп о м я н ут о й е  раз ры в а ? Э ф е к т  с лх о п ы в а н и я  р а с п р о с рт а к  н а  р о ди етл ь с к и е , та к  и  н а  до ч ер н и е  э л е м н у  дл я  d i v  н е  з а д н ы  в е р ти к а л ь н ы е  п о л я , е   п ол е   d i v  слхо п ы в а е тс я   с   н и жн и м   п оле м о   до ч е р н е г о   абз ац а .  А   ат к   к а к  п о л н а я  в ел и я  о тл и ч н а   о т   н луя , т о   н е о б х ди м о   о с ат в и т ь  и е  дл я  аб з ац а  п о л е  ш и р и н о й  10 р х . Во т  его - от  н и ж н е й  ч аст и   о бъ ем лю щ ег о   d i v  (р и с . 5).

г И Н А Ч М ИРЕ П

Е

ющ а о ы в п л х с и е С я   ло п я  оенплрд ы  в  с ицапке ф ющ у д с е л и м  о б р азо м : «по д  оолпыинвеах м  пеол й   по и н м с те а о т т  "к фа , чт о   прим юаыщк и е   др у г   к  друг у   ло п я   (бе от чнжу о г о   ок н е т а , о ст уп о в  и   гр ан и ц   ил и   и н о г л яю щ е г о   и х   п р о м у к та е ж ) дв у х   и л и   б о ел е  п р ям о уг нльы о б лс а е т й   (с о с едни х   ли и   е н ы в х л о ж ) ос юитядне бъ п о е л» . (www.w3.org/ TR/ CSS21/  box.html# cotlapsing-

ь  ск о р о  ди а гн о з  п о с та в л е н , п р о б л е м у   л е гк о  и с п р а . Е сл и  до б а в и т ь   к  d i v  н е б о л ь ш о й   в е р ти к а л ь н ы й п   в   1 рх ,  т о   су л о в и я , н е о б х ди м ы е   дл я   с л х о п ы я  п о л ей , п ер сатю т  удо в л е тв о р я ть с я   и  р а з р ы в  и с сиР .  5 •   ло П я  ац а зб а  пю ап у осрт :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA #quickSummary, #preamble, #supportingText { background: transparent url(bg4.gif) top left repeat- y; margin:  0 0 0 400px; padding: Ipx 0; width: 342px;

Фс у о к

. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLK  4 •  в ы р з Ра ы д мж е у м а ц и н  га р и

с Ри

ы

О п р едли в ш и с н о  о б р а ти ь   вн и м ан и гл у . Р а з м е щ е н и м и  (в  да н н о м  счлуа обы ч н о  о з н ач ет ч у и ты в а ть ,  ч т о б ы  о б ъ е ди н и т ь о к н ч а ет л ь н о е

с г р и ао к ф

й

ь  с  з а го л в к о

м  и  тел о е  н а  э м б л е м

м  с тр а н и ц ы у   в  в ернх е

, м о ж м   п раво и   о б л а с ят й  г р а ф и к

м

е  к а р ти н к и  с  п р о з р а ч н ы м е  с  те н ь ю )  п о в е р х  др гуо и , ч т о   п р и  с о рх а н е н и и  к а р ти н к и  н ад о   ж е   и м ен н о  о н а   п е р к р ы в а е т .  Ш и  м о г   сло и  в  м о дел и   Photoshop и  с о рх а н и т ь  и з о б р а ж е н и е  э м б л е м ы   в  ф о р м а т е  G IF

т  восзк

ь   ло п

е  омещю лге ъб

и  CSS 2.1 я з  пром е о   р аз д е х я  в  онд о margins).

о  d i v

дО и

н  м ал е н кьи

е  с и л и   JPEG  в м ест то г р а ф и и  и  л и н и й с т и   (р и с . 6). А   м о г о бласт и   и  с о рх а н и т вова в   боль ш е й   ч а с ьт

с Ри

. 6 •  Эма е л мб

с Ри

а н е , сн а р х о

. 7  •  ма е л мб Э с о н е ч и н  оа р г

я т с вме

а н , се н а р х о

е  с м о н  ф

я  бе з н о  ф

й ь тс о н ч а р з по р

а  в д  ви

т с о н , пч а р з о р

к

 н и ж е л ж а щ и м и   ф р а г м е н та м и   фо , ч то б ы   с б ер ч ь  э ф е к т  п р о з р а ч н о   б ы   в м ест о   э то г о   д ау л и т ь   фо н о в ы ь  то л ь к о  п р о з р а ч н ы й  G IF, п о ж е р т ю   ет н е й   (р и с . 7).

Н о   п осколь к у   э м блем а   с ч и та е с я гр а фи ч ес к и м   образ ом ,  Ш и   р е ш и ф о р м а то м   PNG  и   и з б а в и т ь   с еб я   о н о с те й .  В   ф о р м а т е   PN G  с   256  ур о в н я м з рач н ост и   э ф ек т   те н и   н е   п р о п ад ет фо н е  н и  в ы в о ди т ь   и з о бр аж ен и е . Н н о , ка к  в ы гл я ди т   э м блем а   н а  дв у х

и  не т

е  GIF-л ай ф

й  ш ао ж

  н е   с то л л   в о с п о л ь з о в а ть с т   н ек о т р ы

ь   важ н ы

е м я

х   слож

и   ал ь фа- п р о ,  н а   к а к о м  б ы а  р и с . 8 и  9 п о к а з а  р а з н ы х   фо н ах .

Ниж е   м ы   о б с ди у м   фо рм а т   PN G  б о л е е   п о др о б н о ,  а п ок а   о тм е ти м   ли ш ь ,  ч т о   б р а зу е р   M icrosoft  Internet Explorer  дл я   Windows  н е  п о н и м а е т , ч т о   та к о е   аль фа п р о з р а ч н о с ть ,  п о э т о м у   P N G - фай л   н е о б хо д и м о   о т н е г о   с к р ы ть .  П р о щ е   в с ег о   в о с п о л ь з о в а ть с я   дл я   э т о й ц е л и   с е л к то р о м   до ч е р н е г о   э л е м е н та ,  к о т р ы й   э то т б р а зу е р   н е   п о де р ж и в а е т ,  и   та к и м   образ о м   п р е дл а гат ь  PN G - ф а й л  лиш ь  те м  б р а зу е р а м ,  к о т р ы е  с п о с б н ы   ег о   н а р и с о в а т ь .zyxwvutsrqponmlkjihgfedcbaZYXWV а

ю html>body  #extradiv4 span { background: transparent url(seal.gif) top right no- repeat; )

с Ри ан е жо л ан

. 8 •  ма е л мб Э

а н , се н а р х о я  н а ы л е б

я  в д ви й  фо

н

е г о н ч а  пр з о р

о  PNG-а л ай ф

,

О ч е в и дн о , в  бо ле е  ф о р м а л ь н о м  в еб - п р о ек т е   п о ед р ж к а   с о   с то р о н ы   Internet  Explorer  адж е   дл я   г р а ф и к и  н е п е р в о с те п е н н о й  в а ж н о с т и  н е о б х ди м а . Хо т я  ф ун к ц и он аль н ост ь   о д н о ру о в н е в о й   (да/ н ет )  п р о з р а ч н о с т и  в фо р м ат е   GIF боле е   о гр а н и ч ен а , н о  вс е  ж е  е е   до с та о ч н о   п р и   н а дл е ж а щ е м   п лан и рован и и .  Н а   с а й т е   Zen G arden  э к с п е р и м е н т ы   п о щ р я ю тс я ,  н о  у   в а ш и х   к ли е  о тн о ш е н и е .zyxwvutsrqponmlkjihgf е н то в   м оже т   бы т ь   рд г о у

и дО Е сл срок осн ов р еш ен и в е р с кт вд

с Ри ан е жо л ан

. 9 + ма е л мб Э

а н , се н а р х о я  н а о  ф н  с о р у  ттс к е

н м иа л ке ь н и  в  н ач л е  р а б о т и   п о дж и м а ю т е  CSS м о ж е ю   -   раз би т и   з а го л в к а   ш аг .

й ш ао ж ы   и м е ст я  л и ш ,  то ,  р а з р а б о та т   о к а з а ть с я  до в о л ь н ь   з а дч у   н а   бо ле а   в   «Н о ч н о й   п о ез кд

ь  п р о с та я  м о де л ь ь   п олн ы й   м ак е о   т р ду н о .  К лю е   м елк и е ; так »  п о н а до б и л о с

к , а т  н а ч  к ,  дл я ь

Е сл и  з а р н е е  з н а т ь  о  с щу е с тв о в а н и и   раз н ы х   воз мож н о с ет й , то , с то л к н ву ш и с ь   с  тр дун о с тя м и ,  в ы   с м о ж ет п р и н ят ь   бо ле е   в ер н о е   р еш ен и е ,  дбу ь   т о   с м ен а   м о ед я  в  вд и е г о н ч а р пз о р о  PNG-а л ай ф , ле й   п о з и ц и о н и р о в а н и я , р е глу и р о в к а   п оле й   и л и  п р и й zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA м ен ен и е  к а к о г - л и б о   э ф ек т а  к   э л е м е н ту .

е -

S O  W H A T  индаЗ

й  дро в

, с . 92

I S  T H I S 

A B O U T ?zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB я и г о мл о т н Э

, с . 98

E L E C T 

A

D E S I G N

A R C H I V E

- т е -р аПт р о п

, с . 110

х а н оМ

, с . 116

В ер ск т лД а л Бе

я я ил ил

, с . 104

Z E N

А Е ВШ

Ш

хо д и м о  с о еачнти че с в т а . В ы б и р ает е т ку ч ю  в е р с кут кр а ю  и л и  ц е нрт у к о  п о н и м аьт

и  с рт ан и ц

, как

ы  с  п о м о щ ь е  тенхи ч с ик е  л и  в ы  фикс и р о в ан у , в ы р ав н и в ае т , в  л ю б о м  с луач  ус рт о е н  м аке

ю  CSS н е о б х  з н а и й  и  тв о р ю  и л е  л и  п о  ле в о м е   н уж о  чет т  в  CSS.

и у -

В  э то й  глав е   м ы  р а с м о тр и м  р аз н ы е  п о д хо д ы  к  в е р с кте , с ехм ы  п о з и ц и о н и р о в а н и я , п р и м ен и е   п л ав ю щ и х   э л е м е н от в   и   н а у чи м с я G A R D E N с о че ат ь   в с е   э т о  дл я   п о луче н и я   п о лез но го ,  с я а л ч у х   п р и в л е к а т л н ь о г о   и    в  н е к о т р ы х OF CSS DESIGN zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н еи о д а ж н о г о  р е з уалть .

style  sheet from the  list t o  load  it in] He а т к у ж но д е б

я  в е р с кт

а

, с . 122

жш

р zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQ э Р й р н Ге и  (Ray Henry)

и й з а не Д

- ЙГ С

Е  N

www.csszengarden.com/029 h a r d e n zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Ad ™*, *, ' zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Ы  Ы SELECT A MSIGh   :

Ь *- ^ « т р Ы ^ ш Ы Ь - t h r e s

h>

«vie - iiest л п Г

Ther  it  tela ry l  i ned  for CS  to be atken teroiuayl  by graphic irtlJti. The Z tn G arden alnw  to exci№  in i^ r e . and «n«iuragKiinnii:ipaii(ni.T»li^iii,  vifwmnnMif  tin  csi.4tlng

» » b « d  d H it a SelK* м у

d»tgn.й е   wyfe of  a hypetexldocument, liieon ly  waythU caiibcilliailratwiJii a  way  that guts pwpiu oxdted is by dem m sbuliog  what  it can  truly be, M M the п - in * nw  |Jj(- n) in the banda Ы Й н м с abieiccneaM beiutyfixiniimKtuiB.TtnLite,  mosleximple* of n eataickt  and hacks h ive  boon detnonitrated by m n у  't  uri  в  tb  ^ml codurt-  Oeslgnuft  have j*d  mt  ouktf ditnr taait. Ttii» tuKKls и   rlu n ge.

ЯЕ М И

В

VI»W All M'lHI

i - J  iitering i  dark Ы   ilnaty P AR T I C I P AT I O N

nod  lay Ш е   p u t relict  • J.' Ь «мч- *1*>а«

г   tag*,

ituimpaliblr  Ю М я

, 

«ml hiiiu- .n

fS.S«ir>purt.

T«l»y, we ninrt dear tht uiuid  li • i»wpr»a«ei  Wai

G raphicartitt.4only р ( е м с . Ytranre  modi^iiig  t h b  p«gc  to jt ro n (  CSS  «trill* are п ем ж гу , ini! ihe гая:п р ) в  filas a « MmnMiitelwtJI tmimghtliaiestai  tSSnav&saiM n  UMtlieni *s (tarts ug poiiita. P l w «*w  the C SS.KiaH M rcctiuidc tot *dv»nced tutorwU  and dpi on working  with   Q t t

fdk  like |>м  WfB,   WulWtad Ihe

n u jo  Ь г и к

ж  r m t m .

Ucnvnl^Mid ih« winpie UWif  t llea n d с *»Я к   to work on a copy locally. Once you h aw  completed your  в »*а д р ( «! е (»nd pkas.!, diin'i iobmit blf- fin lsh ui  work) upload vmir х  your «inirui. {jeiiil mt a  U nit . «s file  Ю   a web  i m e  ш н к to  the file and if we choow to u»e It, we will ipider the а и ocitte d imaget.  Final lu bn ^ slo n i  will be placed on our

Tlar u& /jcn Gaiiivu t ovite* you  и iriiv and iBediUte uuA*

u m r u s

imput- uit ietocxu (if tine m atter*.

ll«Kin Wiee with ,- Urilv. Lcoru tu и м   the [yrt in b«)  lirou- huflflrnl

t n it n iqn s in i №

 *od

ге о ш т а  we can all refct to whea  nuking the C4W for CSSЬ к ш Ц 4«itfii . ТЫ к  U  surety ш п Ы , m m tmby. Mont and mom  и и ф г  a it » aw  taking tlie leap, \ к л  пм   enough  h tve. One  day й и   gallery will be a historical curtotity; th *t day и not  today.

itvftgu'jhtinx  bnbiorj. Hmnnv  u v «t h  die web.

и и щ л ап ю в

е а и р в о н з пц е эле м те н

е ы

RESOURCES Kli>«.IIHi.B«t!M:t.SSS

HI zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Submit * tMtan 1М Н И zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

You m»y nvuBfv-  tfacti^lr  sheet In any way you wbh , but ги к the  HI ML.  This may seem itauinlng at  fint  К   )nu%e  never worked thii way  before, but follow the 11*ted Ifnks  to learn м н и ,  and  1М Ш   Oie siinplt) filsa i t  a j(nuk>.

eiiEghieniiienl h u  b*«n  adiieved lh*nkt to the li n i m «fforu (if

о тн лю ос Аб

й  дво р

We would like tu се в  и   much CSSi at  р ш п Ы е -  CSS* thould be limited to widely- supported  dements only. The с м  Zen Harden к   about ftmciioiut,  iiracfical  C SSin J iii«  Й И   latect

The  only real  «quireinein  we h *veli  that your  OS validates. Unfitnmiateiy, ik* iening  tills way  highlights  ilni rtn ws  in ihe varioi» inij)l«n«ittltoni  o ft i R  Different  bt vm n m dU play differemly,  even tompletdy valid L3S at rime), and t h ii bcoMiMi maddening wh «t a fix for on e leadi to Ь п вка^ е  in annihpf. View the Kf»>H irc^t jviЈ«  for infiimurton  on  KH»« of tli* f.xeawiLiblB.  Full  bniwier

compl iance ii  rttl  «ometimes a  j^pe  drea m,  end vre do not expect yoe to come up with ptxd­perfect code ac t o « every у  iu j w  out.  If >uur des%a pkiffiMtn.  But tki twl ia  US  н и ш • iЛ i Ы  the pepul s uoiij, d u n ce»  ir e we won4 accept I t W« ailc thnt yiiu ititHnit origiiiitl  artwork.  Pi«*si> m p m t copyrfjjhtlawi.  Flmiteknr|)ob)iKtfiuuibieinitE)ria!Ki« mJnfmum; fsthrfu!  nudiry U  arccptable, outright pomoer» phj will be rejected.

) ttntilon.  You Till) is  я  learning сйел*Is e ai well as ii Дяш н retain Ml  copyrtghton yourgraphlea  (wldi  Simiiesi «xccpttont, tff  «u b m t ^ st o n p ild e lt iiga ] .  bet**  ask  you rriuase yew  CSS uiiilra 4 Ctwitiv« Cotnmoru  li«u «c Identical to the - >nc  i>n t h is  *\ \ ? t o tbat uifaiira  may lean) (гкогиасу Bandwidtii  t r a eiwa lvd m iin a d bvР г м щ И 'Ч г S t u d io »

ш а   '' ixi  a  S»  ш

.

И н о дг

а  н е  з н а еш ь

, с  ч ег

о  н ач т ь  н о в у ю   р а б оут , н о   и с от ч н и к  в донх о в ен и я  м о ж н о  н а й т и  вез д . Н ем а л о   яр к и х   и ед й , и з м е н и в ш и х   ми р , з а р о ид л о с ь  в  к а ф е  з а  ч а ш к о й  к о ф е  с  м о л к о м  и  и н ет р с н о й   б е с од й .  Р э й   Г ен р и   в с рт е и л   сво ю мзу у   в  дву х   а сд х   -   Zen G arden и   свое м   со б с вт е н н о м . Та к  п о яв и л с я  н а  све т  «З над и й  двор» . Ц в еот а я  гам а  э отг о  ди з ай н а  п р и ш л а  с  фо т гр а фи , н а  к о тр о й  з ап ечлатн ы  ц в еыт , рауст щ и е  в  сда у  н а  з анд е м  дво р е  дом а  Гне ри . Хо т я   ди з а й н   с   тр е м я   колон кам и   в ы г л я ди т о ч ен ь  тр а ди ц и о н н о , у  Гне р и  в о  в р ем я  р а б о т ы воз н и кл о  н ем ал о  в о п р о с в , и  о н  п о н ач л у  н е б ы л  увер н , ч т о  см еу т  в о с п р о и з в ес т и  таб ли ч н ы й   м ак е т  с  п о м о щ ь ю  CSS. Ус та д я  л и  п о м ес ти ь   с ы лк и   в   п рав у ю   кол н ку ?  К а к  э т о   е дс ьл а т ?  М о ж е т   б ы ьт ,  дл я   од сит ж ен и я   н жу н о г о э ф ек т а  н жу н о   в е р с ат ь   со в е м   п о - ог м р у д ? Н о   м е от д м   п ро б   и   ош и бо к   Г ен р и   в с е - а тк и р аз р еш и л  вс е  п р о б л е м ы   п о ч е р нд о .

Ос н о в

г ЧАНИ  Е ПРИМ Е

в о снО

ы м а ек т

юЛ б о м е н атм и а тке в ан и

й  и з  эит х  модте , одастч н ы . П лав ю щ и е  э лем н т е  м о ж н о   и сп о ль з о в ат

ы   м а ке т

а

а zyxwvutsrqponm

zyxwvutsrqponmlkjihgfedcbaZY

о н ь л е т и в тс й Де , мы н о л ко г н е  см е х ы  вк тс р е и  в  CSS ян в о  н е Ч то б ы  с в ер с ат ь   с тр а н и ц у  с  н е с к о л ь к и м и  к о л о н к а м и , т ю у в тс ус и р п , ок а н д о  CSS-ц и л таб ы ю а дкс у по т  и о к  та й  осп н е о б х ди м о   к о е- ч т о  з н а т ь  о  CSS. Н е  сщу ес вт у т  с в о й о с б яи н а во р ми т е к а . Вн е д е в ы  он и  в и ц а ки фи ц е пс и  CSS2, но , к ю ь тс а чс е н , Internet Explorer дл я  Windows и х  н е а ви ж р е д  о п свт а   « l e f t - c o l u m n :  200px»,  к о т р о е   в о лш ебн ы м о  сл с мы а  в  и н х  пко а  нте . А ь л  жа . Пб о р д о те , а т к  чт о шг о ь  бл о образ о м   с о з ад л о   б ы  н жу н ы е   колон ки , п о э то м у   п ри х  см . мн еу ко д т  п о с е р ад у  www.w3.org/TR/ е н е  о  CSS-а ц и л таб о х ди с т я   п р и б е га т ь  к  р а з л и ч н ы м  тр ю к а м . CSS21/tables.html. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA , ест ь  дв а Д л я  с о з ад н и я  м ак ет , с о с то я щ е г о  и з  к о л н о к осн овн ы х   сп ос ба , и  у  к а ж до г о   и з  н и х  сво и  до с то и н . И з  четы р е х   есх м  п о з и ц и о н и р о в а свт а   и  н едо с атк и н и я , и м е ю щ и сх я  в  CSS (absolute, static, relative и  fixed), то л ь к о   а б с о л ю тн о е   п оз и ц и он и рован и е   п оз воляе т о   п отк а   и  п о м е с ти т ь и з ъ ят ь   к о н те н т   и з  н о р м а л ь н о г ег о  в  п р о и з в о л ь н о е  м ес от . С  др гуо й  с то р о н ы , хо т я  тех н и ч ес к и   п лаваю щ и е  э л е м е н т ы  н е л ь з я  н а з в а т ь   с ех м о й п оз и ц и он и рован и я , н о  та к и м  о б р а з о м  CSS п о з в о л я е т з ар ез ер в и р о в ат ь  м ес т о  так , ч т о  осат л ь н о е   с о де р ж и м о е т  о б етк а ь  его . до к м у е н т а   е д бу

б с о л Ат ю н п о з и ц о ни р о ва ни

Littering a dark and dreary road lay the past relics of browser- specific tags, incompatible DGMs, and broken CSS support.

.с и Р

1 • т н ме  Эл

ы  в о н ь л м ар о н

м  пк о т о

е т нм е у  дк о

Uttering a dark and dreary road lay the past relics of browser- specific tags, Incompatible DOMs, and broken CSS support.

The Road to Enlightenment с Ри с т е маы з и с т е авы з а ко

. 2 • •  Пр и о н т ю л ао с б я  и з г о н ь л м а нр о я щ ию  су д е л

м и н а в о р и н по и ц з о о  пк о т о й а  аз б

ц

а а т нм еу дк о

е

и о в ло г а з к , а  н а  г е о т мс е

  в ы ш е уп о м я н ут ы

х   м е то д в   а б с о л ю тн о е  п о я  п о н и м а н и я . Е с л и  р а з   н еск о ль к в   о ди н   з а  д р уг и м  (э т о я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPON   й ьы н а л м р о н   ктпо   тнеа)коум д ,   к а к  в р а з м е тк е   н и же , т о  п о л уч и т с я   ли н ей н а я  п о с . 1. Э то г о  и ,  и з о б р а ж е н н а я   н а  р и с о   о ж и да ть . е   п рощ о   э л е м е н то

Эт о   з а го л в о к < / Ы тЭ о  < тске /р А  эт о  огурд

а

е

д  э ле о  ма .

е

х И з   дв у з и ц и он и рован и м ещ ат ь н а з ы в а е тс H TM Lл е до в а те л ь н о с ть с л е до в а л

The Road to Enlightenment

в   о б се п ч и в а е т   к о н рто л ь  н а й  дл я  соз анд и я  м н о г к о л н н о г ы  и  абсолю нт о е  п о з и ц и о н и р о ь   к а к  вмест , та к  и  п о р о з н ь

П ри м ен ен и п оз и ц и он и рован и з а го л в о к с л х о п ы в а е ст н ы й   э лем ен Вс е   в ы г л я д и н е т  в  до к му е н т ат к с и ч е с к

е   дл

> zyxwvutsrqponmlkjihgfedc > й  < тске /р

е   к  к а к о м у- л и б

>

о   э лем ен т

у   а б с о л ю тн о г т   ег о  (в  да н н о м  с лчуа )  в  ук а з а н н о е   м е с то , а  о с та в ш а я с я   «ды рк а я   (р и с . 2). Абс о л ю нт о   п оз и ц и он и рован т  н е  о к а з ы в а е т   в ли ян и я  н а  с в о и х   с о е дй т   ат к , ка к  ботду   э то г о   э лем ен т а   во бщ е   (хот я  м ы  ег о  прек р а с н о  в и д и м ) . С и н и  к о н с тр ку ц и я  в ы гл я ди т   п ри м ерн о  та к : я   п ер м ещ ае

h3  { position: absolute; top: 100 рх

; }

о е » . е -

В ер ск т

а

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Д о с т и н с тв о  м еотд а   а б с о л ю тн о г о  п о з и ц и о н и р о в а н и в  то м , ч т о   о н  о б ес п еч и в ае т   то ч н ы й   к о н тр о л ло ж ен и е м  да н н о г о  э л е м е н та . Н о  р а з  э л е м е н н орм аль н ог о   п отка , т о   о н   н е  м о ж е т   в о з д е й с тв о а т н а   о с ат л ь н ы е   э л е м е н ты .  И н о гд а   э т о   с та н о в и тс б лем о й , к а к  м ы  п о к а ж е м   в  с л еюду щ е м   р аз м ер

я ь   н а д  п о In Ann otn fldH nt т  и з ъ я т  и з ь Sis; я   п ро .ч »...... , д ;,т.. . .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ж   н ып я

 

p r o d t t i H  M U * .  A M r un.  w o m p u  rfimcsrptf  i n  p t i

u v W I i w u i H  l A M u t d M H r t f I N  M i M  к Л

| Ц ^

^ 

ptf  t a ,  С и   и 1 In u m ^u f  ft*  • * !.   * c a  н пт н . q ui M  1 Ж   iwr , iu ,  «, 4 l H  Vll  M  OH  i l .

p t КИ иф г

е э л е м е тн ы

W  w i n  d ic t l 1  nI I U I I H 

J

И м ен н

о  в  э то в  CSS: ф о т г р а ф и в аю щ ей , а  тек с г о   раз ры ва . С и н та к с и та б л и ц р ен н ы

м  и  с о с т и я  в с ат в л яест т  о бетк а

с   п рост ы   с ит л е й й  п р и м е р

ь  п л а в а ю щ и х   э л е м е н то я   в  тек с т  и  дела ст т   е , ч то б ы   н е  б ы л о   ру о дл и в о ь   и м   н е л гк о й   то л ь к ь   п ри м ерн

#photo  { float: left; margin: Ю р

Д о с т и н с тв со ти н ог ни з ер о дл и з ки

М е т од

о   в е р с кт и  м еот д м , ч т о  э л е м н т  н е о  п о т к а  и  со сенд и е  э л е м е н т . Н о  и з - з а  р а з л и ч и й  в  п о дер ж к в   п лав ю щ и е   э лем ен т ы   от ж я   м а к е ти р о в а н и я , и   дл я   то г  дв у х   м е то д в ,  н е о б х ди м ы е  п о з н а н и я . т  в  то м

ы

. 3  в л

ев р с т к

я   п ла

-

ЈЈ*Т

«

о  i m l o i u n < wn

M l

l

w i i J w ! V ™ 

™ I I p i ™ 

|

Mtc i d  illq ixd  d > l «l l i i l m i ,  U t l

,  Ч   m m

в   t i n »  t q u K l t n  Н О Ш

iM uia  no pn

i

«- ? •

М  

1

Ч

#

loni  p i u d * i »i  | MU  i* .  VahiptitLtfn rba. ллс и л penulo Х

ш ^ Јь"Т Х

.  «- nn^n.  Г о ,

л   t i  и * .  i K i

м   turn

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONML

М и  о якЫ и   u l u l M M  « « m h o ™ . .  . »«. . . . ««t u t  Г н о t i n .  1J q ui  M itf

.  3  • О Н   СПЛОШ

с тек Й

м  и и м

О   * и «а в «

. «i  qui. « m i l  «и ч М с Ш и

г  i n  f j «.  An l u n u n  lauarm   Wi u n a v v

т zyxwvutsrqponmlkjihgfedcbaZYXWVU

т

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFED

х   lOpx 0; }

х   э л е м е н то я  и з  н о р м а л ь т  о  ег о  п о л ж е е  с о  с то р о н ы  бр ау е   н е  вседг а   и де а л ь н о   ч то б ы   вы брат ь   о ид   н ек о т р ы е   п р а к ти ч е с

в ы н С РИ лс а в о з а р б о

и

. 4  •  л Пос

е влени а б  до я азры  р

и фя а р г о т  фо

и  в т с  тек

е

в

^Ic^l

>

n t .  El H  i s  af et f i  с о

е   ывотске

М

Ш

-

  п лаваю щ и  и з ы м а е тс ы  з н а ю

(здес ь   квол газ и  и  ) тске u n  qui  h i *

f . m  I t M H u  i d v t n a n u n . nonumy  m t l n e i t  я   cuni,  il u u  « p l K v i  «1  «. .

я   И .  Honumy w k x t u m  u l u u i u t  к !  w l ,  e «  t t u g l i l  p r i n t n l  an. t l  uiu  t .

е

с Ри

. 5 •   Текс

т екае т об

и ф а тр г о т о  ф

ю  и няе л о п  за

т  разры

в

г zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Е ВОС Т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Internet  Explorer дл я  Windows п-м уе ч о т о д  иг о н а е а в и а в д у т л о п я  дл я щ ию а в  па л х в о  эт нм е л . Есл и и н е ч  а н з я  пе л о й  зтм е а н о ш  бь л о е  10 ,йе лс кип ™ в ы т е д  у б е г  дл о о т а с че ь  в к л ы т  а з е  и я ьс т а х ы т р е ч . Чтоб ы т й о б и  эт у му е л б  по р т ,  йадаз е  дл я ю  па в а л г ще о нт е ем л э а в т с й о в с о  d i s p l a y : i n l i n e . Пое н б о р д е  о б  эо т й к бш ио е н  жмо о т а т и ч о  р п ь  н а  ст й а е  www.positioniseverything.net/ explorer/doubled- margin.html.

(здес ь  склыс и  и  различны ) ытнемлэ

(Аоксртв е   право

, склыс

е   текс овы

и  и  . т . д )

|

e

™

«

M i i i c x i i M i- t .

in

«g t n d o i

P > r »q u «U M (

Г

Hjdilf ( IWM Kiim '

•

"

'

,.

m

j d i e r s o f t s ctu

| : i

l t d t u. C- rn с к

i * p *

ш а л и

. liflil. ^ Г

» HUiqUim pKtltnl, W

. e t m t  ра ,кш

W e

о

И

•

• •

l i I

body { text- align: center;

K D W I U I X U I .

. Pir n * pFGSlt i» o u u i i t a

#wrapper { width: 750px; margin: 0 auto; text- align: left; position: relative;

с Ри

. 7  •   То

т  ж е  мкет а

, н о  выровненны

й  п о  центр

у

} #contentArea { width: 450px; position: absolute;

top: 0; left:  150px; } SleftPanel  { width:  150px; position:  absolute; top: 0; left: 0 #rightPanel  { width:  150px; position:  absolute; top: 0; left:  600px; }zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Н о  ч т о с о л ю тн с о нед и п о л а г ест в ало .  В от м   н а

 дел аьт , есл и  н жуе н   вхо с т в и к ?  П о с к о л ь к у   аб о   п оз и ц и он и рован н ы е  к о л н к и  н е  в л и я ю т  н е  э л е м н ты , т о  хв о с т в и к  и х  и гн о р и р еу т  и  рас я  так , к а к  есл и  б ы  э ти х  к о л н о к  н е  сщу ес вт о  да н н о м   с ч л уа е   о н   о к а ж е ст я   п ер в ы м   э лем ен  с тр а н и ц е .

Ч то б ы   р еш и т ь  э т у   п р о б л е м у   с  п о м о щ ь г о   п оз и ц и он и рован и я , н уж н о   з ар н е к а ж до й   кол н к и   и   з адт ь   п оз и ц и ч то б ы   о н   оказ алс я   в   сам о м   н изу JavaScript,  седл ат ь   э т о   н ев о з м о ж н о п ер й т и  о т  а б с о л ю нт о г о   п оз и ц и он и рован и ющи м   э л е м е н та м . Н а  р и с . 8 хво с т в и п о д  к о л н к а м э л е м е н то в .

к   а в то м а ти ч е с к и  благо др

-

ю   а б с о л ю тн о е   з н ат ь   вы сот у ю   вх о с т о в и к а   та к , .  Н е   о б р а щ а я с ь  к ,  о сате я   то л ь к о я  к  п л ав и  п о з и ц и о н и р еу тс

я  и с п о л ь з о в а н и

а

я ю  п л а в а ю щ и

х Рис

. 8 •  Тэ

т  ж е кет  ам

, н о м и с  плавающ

body { text- align:  center; } #wrapper  { width:  750px; margin:  0 auto,text- align:  left; position:  relative; } ttcontentArea  { width:  450px; float: left;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

U eftP an el  { width:  150px; flo a t :  le ft ; } # righ tP an el  { width:  150px; float: left; } #footer { clear: both;

и нтам е  элем

и о  ки в о т с  хво

м

г

Н о  те п е р ь   лев а я   и  с р е дн я я  к о л о н к и  п о м е н я л и с ь  м ес та м и !  П о с к о л ь к у   п лаваю щ и е   э лем ен т ы   о с та ю тс я in  ,  • zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   - Г , g- .«  - , 

•

•

Kr f f t   h t m l

"

f

I zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   тшъ я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA „

,

, 

•

vt i Am y w i i f f r t t *

r h t r t it

^

OM i,   w4   bioKen 

«i « I f t ,

.

m  * "• /   o n e  w i  ki- Kt

tiw style ahr- rt niii:. ih«  vt- iy  г»*д

н   The

«• *  rwtaln;  tlvs  sam*, the  crty  It iwj that  hat  ctwn^etf  i i  the cxterfial  .ess § 

'

д   "Ш  

- Swc^r,   tnn- л   v.ju  to aiM e  " o i l  t h e  r nc io r t f lr it

.   rcwrterr.  b e g i n  t o  s «e

I t e . 

' '

ШШ j^^r 

W 

 

, 

.   „ . 

.i

.  w  iKhniq uK  л   n*w i laerfcn M M » one

(ie.Vei,re.tiv.

y

o

u

w

i

c

h

i s u l 

,

r

v

A

t

i

«

t

i

T

l

A .

. Т

Г

Й

*

• MK  м - e m  (jwrtm- j  rt  f* st  It  ywiN* etl  Ire;  wtty  t- efi)ts.  U l

doQLrwrt  The  only  wey  Wt  car.  м *.ct'a*«d  sn  a  w«f   met  yeK  people

follow  the l a M  * * s  1o 1 м п   О УПК arid iise  th« **n»l« ' t ec * c  eguKie

«  ,u- - .!  ( i . w - r i j

n  П: в   riai'id- }  o f  t h t ' i *  > iiiif  t p  с е - Л b e w j y M M   s i n x t ' ^ i j .  To  < №

е

,  п к - s

h f t v e 

b e ? n 

d e m o ^ . s t ( «e d 

jtiudurists  and  coaeri.  еэОглд h M 

y e t  t o  i b i ! t  1ii- «.r  я м г

f r f t - . t :  l o c h a n g n .

OiKf 

by

з ) 

с м   m e  Г yw

I

-

Л

C

w

o

r

*

T

k

ttfve 

*

H

(

S

^ i

ст щ МЫ

M

m

• »

«

C

c

,

file

u

v 

 

»

k

x

e

n

H

a

i

- ft**

l

( jx?«ip t eE  o f  n e «  t r i c k s  e n d  h e c k * '•   -

y

CTS S t v !   V- - ~J#cit5c lag »,  i n t o mpatible DOW», and  broken

i 

CSS *Up port. 

• 

,

l

 

' liiSw&c f O n t w M

" r i e c l Fa e a r vS

""'

• '

B e r h l w E l M e f l v

'

e *> « О .иЛ г ..

« by

• ,СШ

i Archives:

i

! d e s i g n *  *

'  Kt«4K]rots:   ш Ш ^Ш l

Ш

Vttw Trttt DM on i CS5 • »MaTC*i 

ВА М LO Subm» a Destfin Itilrartelatforts

Ч Ш

Ґ 

1

K k p o r t a n t  l* * * o n *  of  t h * м е л е т ,  t u g i o  t o  se*  wit h | Ж .  Le* rn  t o  и м   the  (yet t o  b* [ ti< n* - honor* d Щ   t a c n ^ u e *  fn new  and  invteofMJng f * »riion.  Become

•

a

. 

й сад ,

I

'Лол

*  wt№

 №

e w * b .

Фм р о а т

.

кm  " m I

The* *  (a ctowly  a n«* d  f o i  CSS  t o be Ua«n  * ar t o u t ( , b y

«xtetlng  d * * i g f l * №  t he It t t . CHciOng  o n  any  o n * will  toad toe  at yi * sh* * t  in t o  t h i * very page. Th *  c od a f»m* li> * t h * u n » ,  t h * only  № ir>f l t h * t h M chaAQ«d i« t h * * xt «nt al ш   file.  Yea,  r u i f y . CSS a)tow« w m p h t t  *r.t> t ot al c o nt r o l over  the  щ   la of  *   л h y p a n u t  d ac um ent .  The  only  way  t hi» can  tie  illustrated m  a way  t hc t  g o t * people  excited  I* b y  d e m o o n t m  • • n  j

j ^ > *  P a r t i c i p a t i o n Graphic  w t J a u  onry p l«4 M ,  You  i r e  mod ifying  ihi» page. • o «Uortfl  e s s  * kiit» яг а  п * с м а г у ,  but t he в  *»tn pie t ^e * • » r   c om m * nf * d we»  «o o t i^b  I h»l  * v* tt  CSS novic e*  can i i * *  l hem  ал  starting  point». Pl* a* e * e * t h *  CSS

•;

Re* ourc *  Oulde  lor  advanced  t ut o r ial* and lip »  on working  wit h  CSS, YOU  may  m od if y  the  t t y t * sheet  In  any way  yo u wish,  o ut not   t he НШ 1.   Th i*  may  s***n d aunting  at f i r «  if  you've ntrvmr  w o r t x j  i:hi* way  before, but taltuw  ih«  lUtetf  i k u »

1

I1" •1 r I 1 I

! :

to Warn mat»,  and  u a* the  samp)* files  a»  a  fluid». Download  t h * sxm p t * ht m l i 1Ю  and  c t > (i ic t o wo r k o n  a c o p y locally.  One* yo u  hav* comptwt* d your  msst«rp)* ce (ami  p i »* * *  d o n' t M f e a l  h»ft-  fl«l* h»dj work)  upload youf  . с м  file  t o  a web  sarwar under  your  c ont rol, S«nd  u * a  link  t o t he tils and  if  w*  choose t o  u s*  it, we v. lit  ap jd * r t h *  a* * ociat«d  f m a g ».  Final »ubmi«»iens will  be placed H M n W t

i \ ) 

Benefits

Why  a«rttc))i«te?  tot   (»с о п й ) о п

, insp irat ion, and  a

{ n»o iif c «we  can  aU ref«( t o  when  m ik in g  № «с а

; .

ы и опт и м и за ц

я и з о б р а еж ни

й

ж шт zyxwv .: zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDC

И «р W e  t r l i t t t .  Th * Zen  Garden  aim* t a  «KCJU, ln* pJr* , яг и ) encourage  p artic ip ation. To  b eg in, vi e *  t o r n * o f t h *

 am placed In  the what  H can t m ly  1», onc e t h *  гЛ пч hand s  o l  those able t o create baauty  from  «f u e lu r e  To date, m eet axam p i* * of  neat  triek* a w l  hack» have b**r> d em onstrated  by * t r uc t ur t * t a and   eerton.   D*sJan»r« Mav* yet  t o  make t h* ir m t r t u,  Tt ii*  tided»  t o  change.

!

Я п о н си к

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

A

Ii; гмх а

HS|tor».   ВШ Ж MBne^Zeti C*rden inviut you to rel*n and meditate on

Hannah . 

И P« № r

:

Ig To d a y ,  W»  n m i i  O o f  | he m ind  o l  | >a*i jsf»cttca«. WsS B | p i t f l h t «r »n »n t  ha*  bean  achieved  thank» t o  the ttr* tes* H f e p r t *  of  font tike t h»  W3C, WaSP end trie  ma| o»  Drowser

м   (or

CSS- ha**d  de»»an. Th i*  It  wr »! y  needed, * v* n  today. Mora and m o t * major  «Не е  are taking  t n«  leap, b ut  no t • rtoiigfi  have. On * day t his  aaiiery  will  » Ь   ш  h iu o t ic al c uno sit y,  Umt day fa not  t od ay.

sttoutd be  limited t o wid * t y- * up p or t * d etoraeni»  o n  ty, The  с м   Z* n  Oardwn  Is ab out  f unc t io n* ! , i>(acticai  CSS and  not t he  taieat  bleeding- edge trtcka viewable  b y  3 4 of  t h» DnwainQ  public-  Th *  on ry real requirement  w« have *  t hat yo ur  CSS  validate* . Unfortunately,  d m t g n t n g tht» way  highHphta  t h * flaw» m t h * w r t o u * implwnoftURlen»  of   CSS.  DiHerent  t»row«* fs dtepbty di !to f »n [ iy, even  eo mpietety valid  CSS at  Ч т о * , and  t hi» b * c o m e*  madden! ng when  a 1U tot   o n * l»ed *  t o breakage i n  * no t h* r . View t h * Resource»  page  for inf orm at ion  on t o r n * of  the  f ixe*  avaliatsi*.  Full  b rowver с о тр й а п с а   Is «till som etim e*  a pipe d r* am , and  w * d o n o t expect  you  t o c o m * up wHh  pi«6l- | >erf ect  c o d * «е г о * *  every  piatforra. But  do teat  in a*  many  a*  yo u c an.  П  yo ur  design  doeert't wo r k In at least  IE5*(Wln and Wo*l!la {rurt b y  over  90У , of  the  p op ulat ion), егш г-к е we  w o o l  accept ft.

* at *

We  ask t hat yo u  t u b m l i  o ng kiai artwork. Pl*a»e respect м   k*op  ob jec tionab lem atorlal  t o a c opyright  taw* . П * а m liiim o m ;  t t t * ( * f ui nud it y  i t  acceptable, out rig ht p ornog rap hy will  b *  t »j* c t * d . Ttiia  ta а  М м т М д   кя м с Ь м  * * w* H a*  a J «moi.st ration, You  retain  lutt c op yrt f lht o n  your g raphic * {wftft llmtted • ac vp t t on*, t e * »tib m i* »lon guldeUnsa), b ut we  esk  yo u f »i* a* e your  CSS under а   С  ready*  Commons  t k an t a id* nUcel  t o  the  o n * o n  t his eit * t o  thai  o t l w s  m* y  l* am f r om your  wor k. Band wid t h  graciousl у  donaied  b y  D roam F ire  St ud io* .

xh t m l  с  м   cc  503  aaa

«Ва » -   я п о н с к о е   слово , о з н а ч а ю щ е е  гарм о нию .  И н о гд а  з едс ь  п о дх и т  с м е л ы й , я р к и ид з а й н , Н о  в а р и а н т  «Я п о н с к и й  са д  •> М ас н о р и  К ав ч и  в з ы в а е т  к  б о л е е  уто н ч е н н о й , ун и в ер саль н о й  э с ети к е . О н  п о п ы та л с я  уло в и т сту ь   «ва »  и  п о к а з а т ь  р а б о ту , к о т р а я  п о н р а в и лас ь  б ы  п р е дс та в и те л я м  самы х  р а з н ы х  на ц и о н а л ь н о с те й . Бр о с а ю щ и е с я  в  глаз а  яп о н с к и е  м о ти в ран н о й  К ав ч и  тем е  ук а з ы в а ю т  н а  ег о ж х е дн и е , н о  м ягк о с т ь  визаул ь н ы х  э ф е к то и  о б а яетл ь н о с т ь  г р а ф и к и  п р о и з в еду л ен и е  н а  л ю б о г о  з р и тел я , одкут а  б ы  о родм .

й ь -

ы  в  в ы б о  п р о и с

в

т  впечат н  н и  бы л

-

Ка к о

и е ч р а с кГф

е ор м ф а т

Д о с ти ч ь  и з ы с к а н н о й можн о , то л ь к о  хо р о ш фи ч еск и х   ф о р м а та х п ри м ен яем ы х   в   к о м п ь ю те р н о и м ею т  н е п о с р е дс тв е н н о и   P N G . Вс е   тр и   п о з в о л я ю ч то б ы   ум е н ь ш и т ь   ег з а г р зу к у .

оПе ч м о п т и м и з а ци

В Ш  С еле т у л ан к

Е А  к н и д е ср й  бл ы и н е ч пю л к до .

е  2004 гд о а ш сы в ы  к т е н Ир е т н

е  50% дши мнао у  п о мо нс ло  шп ко ри

у та

ы

х а во з  пь ло

у

Н е фи к о до л те л ь ния п лат гр а ф и ч е с к о п о л ь з о в а ет л й та м см у от р у лей

а К ок

zyxwvutsrqpo

 п р о з р а ч н о с т о   р аз би р аяс .  И з   т ы с я

и  «Я п о н с к о г о  сад » ь  в  и м е ю щ и хс я  гра ч   раз н ы х   ф о р м а то в , й   гр афи к е , л и ш ь   тр и е  о тн о ш е н и е  к  Web:  G IF, JPEG т   сж и м ат ь   и з ображ ен и е , о  р а з м е р   и  те м   с а м ы м   ус к о р и т ь

к в а нж

а я

З ач е м   н уж н о   о п ти м и з и р о в а т ь   и з ображ ен и е ш и рокоп олосн ы е   к ан ал ы  с в я з и  до с туп н тн о , к  ч е м у   у ж   та к - т о   с к а р е д н и ч а ть ?  К о н е ч н о к о с к о р о с тн о й  до с ут п   в  И н те р н е т  п о л чу а е ш и роко е   р а с п р о с тр а н е н и е , н о   п о к а   ещ е щ е д о с т уп н ы м .  М н о г и е   п о л ь з о в а те л и   п ор а б о та ю т   с   м о де м а м и ,  д а ю щ и м и   скорост 56  К б и /т с , а  в   н е к о т р ы х   с тр а н а х   з а   п оль з ован и лефо н н ы м и   ли н и ям и  в з и м а ю т   п л а ту .  К а ж ды н и й   ки лобай т  ув е л и ч и в а е т   в рем я  з а г р уз к и м и н ут а   с то и т   р еаль н ы х   де н е г .

•

г И Н А Ч М ИРЕ П

т та р бzyxwvutsrqponmlkjihgfe ыв ь

й  фо рм а

 бед у

?  В ед

ь

ы   п о в сем ес

-

, в ы с о т   вс е   бо ле   н е   с ат л   о б п реж н ем ь   н е   боле е  те й  л и ш , а   к а ж д

е у е я

м  з а б ы в а т ь  и  о  серв е . Н а  с а й т ы  с  в ы с о к и м  тра м   з а о х ди т   мн ог о   п о л ь з о в а те л й ;  ч е м   б о л ь ш у ю ю  п о л с ы  п р о п сук а н и я  п о тр е б л я е т  к аж ыд й  п о сеит , те м   ш и р е  до л ж н а   бы т ь   общ а я  п о л с а  п р о п сук а ,  до с пту н а я   в еб - с ер в у ,  а   з н а ч и т ,  ву е л и ч и в а е тс я а  з а  хосит н г . К аж ыд й  к и л о б ай т , с э к о н о м л ен н ы й  н а м  фа й л е , оборач и васет я  э к о н о м и е й  не д г  ка к ,  ат к   и  в л аед ь ц е в   сай т .  2  К б  тт у ,  2 К б  -  в р о д е  н ем н о г , н о  в  и отг е  в ы л и в а ест я  в  со ли нд у ю . К  п р и м ер у , есл и   руез ат ь   н а  2 К б  к а р ит н к у , к о ю   к а ж ыд й   ед н ь   п р о с м а тр и в а ю т   100000 п о сеит , т о  о б щ а я  э к о н о м и я  с о сатв и т  6 Г б  в  м ес яц .

й ор м ф а

В  р а з н ы х  гр а фи ч е с к и ц в е то в ы е  м о дел и , р а з н ы м ы  до с ти ж е н и я  п р о з р а ч н о с ти дя щ и й  ф о р м а т , н жу н н ы   к а ж од г .

х  ф о р м а т е  в и д о  з н а т

т бр а ы т в

ь

х  п р и м е н я ю тс ы  с ж а ти я  и  р а з н ы . Ч то б ы  в ы б р а т ь  с и л ь н ы е  и  с л а б ы

я  р а з н ы е  ф о р ь   п о хд е  с то р о

е -

Г р а фи к

а

е  сzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ат ия ж  бзе  питрео ац ии м р о фн   с о р х а н я ю ст я t b  b e a u f y i n c s s и  и з о б р а ж е н и я , п р и  сати ж  же  с  пйетро  и-н C S S  Z e n  G a r d e n zyxwvutsrqponmlkjihgfedcbaZY  ч ас т ь  деатл й   тр у а ч и в а е тс я   р а д и   му е н ь ш е я  р а з м ер а  ф а й л а . У  к а ж од г о   м е от д а   ест ь  с в о и  о б л а е н е н а ср х о о  в т ма р  фо е  GIF с  256 цм и а т е в , .си Р 1 •и н е  ж а р б о з И и  п р и м е н е н и я . ме з а р р л й а ф а е  рв а н  8,6 К б   ц в т еа   а х р к те р и з ю у т   м ак си м аль н о е   ч и сл о в   в   и з о бр аж ен и и .  Г лбуи н а   ц в ет а   и з м е р я е тс я  в [Н  bbauty;  .ess  ч е м   б о л ь ш е  б и т  и с п о л ь з еутс я   д л я   п р е дс а т в л е C S $ Z e n  G a r d e n я   ц в еат ,  ет м   б о л ь ш е   общ е е   ч и сл о   д о с пт у н ы х   ц ве .  Е сл и   глбуи н а   ц в ет а   равн а   8 б и т ,  т о   всег о   м оже т с Ри . 2 •  и н е ж а р б о з И е н е н а ср х о о  в т ма р  фо е  GIF с  32 цм и а т е в , ь  256 ц в е то в , п р и  глбуи н е  ц в е т а  24 б и т  о б щ е е  ч и с ме з а р р л у а ф а е в ра н  5,0 К б  ц в е то в   п р ев ы ш ае т   64 м и л и о н а .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

В  счлуа в с е  деатл аци м р фо ни ст йионуб Гл ц в е то и т ба х , ни то в бы т л о

Ф орм а Д е ш ду к с в ет у п р и м е н я е тс н аз ы в аем ы хр а н е н и о б л а с ит

\ ш  beautyi!  ess C S S  Z e n  G a n j e n j

т GIF а   в се х   гр а ф и ч е с к и х   ф о р м а то в   -   GIF -   сщу е т  в  то й  и л и  и н о й  ф о р м е  уж е   п о ч т и  20 л ет . В  н е м я   м е то д   с ж а ти я   б е з   п о те р и  и н ф о р м а ц и и , й   LZW,  л чу ш е   в с ег о   о н   п о хд и т   дл я   с о я   и з о браж ен и й ,  в   к о т о р ы х   ест ь   о б ш и р н ы е , з а к р а ш е н н ы е  о дн и м   ц в е то м .

оХ т я   в   фо р м ат е   G IF и н ф о р м а ц и я   с о хр а н я е т с я   бе п о те р ь ,  н о  в   н е м  и с п о л ь з уе тс я   та к   н а з ы в а е м ы й  и н де к с  ц в е та , а  э т о  п а л к а  о  дв у х  к о н ц а х . В  о дн о м  и з о б раж ен и и   може т   бы т ь   н е  б о л ь ш е   256  ц в е то в , п о э т о м у   п ри м ен ен и е   э то г о   м е то д а   огран и ч ен о   ли ш и з ображ ен и ям и ,  с о д е р ж а щ и м и   м ал о   ц в е то в .  З а т дл я   и з о б р а ж е н и й , с о де р ж а щ и х   м ен ь ш е   256  ц в е то в можн о   и сп оль з оват ь   м ен ь ш и й   и н де к с   ц в е та ,  ч т ум е н ь ш а е т   о к о н ч а те л ь н ы й  р а з м е р  ф а й л а   (р и с .  1И з ображ ен и я   с  б о л ь ш и м   чи сло м   ц в е то в  он ж мо  с о хр а н и т ь   в  ф о р м а т е   G IF, н о  ц е н о й  утр а т ы   и н фо рм а ц и и   о  ц в е т , в  р е з лу ь та е   ч е г о   м ы   п р и хо д и м   к  с ж а ти ю   с  п о те р е й  и н ф о р м а ц и и . Ф орм а т  G IF п о де р ж и в а е т   1- би отв у ю  п р о з р а ч н о с ть Э т о  о з н а ч е т , ч т о   п и к с е л ь  м о ж е т   бы т ь   ли б о  п о л н о с ть ю   п р о з р а ч н ы м ,  л и б о   п о л н о с ть ю   н еп роз рач н ы м Е сл и  в ы  п р и в ы к л и  к  г р а ф и ч е с к о м у   р е д а к то р у ,  р а б о та ю щ е м у   с о  с л о я м и  и  о б е с п е ч и в а ю щ е м у   м н о г о ур о в н ев у ю  а л ь ф а - п р о з р а ч н о с ть , т о  п о д б н о е  о г р а н и ч е н и е   та к о й   реж и м   п о лез ен , ес л и   з а р а з др а ж а е т .  Н о  да ж ран е е   и з в е с тн о ,  н а   к а к о м   фо н е   е дб у т   о т б р а ж а ть с G IF - ф а й л .  К р о м е   то г о ,  ф о р м а т   G IF  п о д е р ж и в а е п р о с ту ю   п о к а др о в у ю   ан и м ац и ю   и   п о с те п е н н у ю   з аг зр у к у   (э т а  тенх и к а  н а з ы в а ест я  чй он ч тзрсе  ратзв-ре кй)о .   П равд , и  т о   и  др гуо е   п р и в о ди т   к   ув е л и ч е н и р аз м ер а  ф а й л а .

з ь о , о 3). . . е я т

ю

-

с Ри ме з а р

. З  •и н е  ж а р б о з И р л й а ф

а е  рв а

е н е н а ср х о н  2,1  К б

Г И Н Р ПМ Ч А Е [ о н т е в Ц

о  в т ма р  фо

е  GIF с  4м и а т е  в ц

Е й н  ва и р а

т  рси

. 1- 3 см

. н а е к д а вл к

.

,

Ко к о

Фо р м а

й  фо р м а

т  вы б рат

ь

т  JPEG

I  b e a u t y '  J i c a s  IzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Бл а го д р

C S S  Z e n  с Ри о т н е и ц фи фэ о к

.  4  •и н е  ж а р б о з И

е н е н а  ср х о м в т с е  кач

а  70, рме з а

м н о г ц в е нт ы с ж аи т тв о в а т фа й л

е  JPEG с а е в  ра н  8,3 К б

о  в т ма р  фо р л й а  ф

с Ри о т н е и ц фи фэ о к

S

S 

Z

.  5  •и н е  ж а р б о з И

е н е н а р сх о м в т с е  кач

n 

C

a

r

о  в т ма р  фо а  30, рме з а

d

e

r

е  JPEG с а е в ра н  3,7 К б

р л й а  ф

. - b e a u t y ! ;   e s s  •

(

C с Ри о т н е и ц фи фэ о к

e

S

S 

Z

.  6  •и н е  ж а р б о з И

e

е н е н а р сх о м в т с е  кач

n 

G

a

d

e

n

Фо р м а

е  JPEG с а е в  ра н  2,5 К б

о  в т ма р  фо а  10, рме з а

r

р л й а  ф

1

; ••  b e a u t y '  e s s

C S S  Z e n  G a r d e n с Ри тевц

.  7 •и н е  ж а р б о з И а  24 бт и

е н е н а  ср х о , рме з а

р л ай  ф

а е в  ра

о  в т ма р о  ф е  PNG с о н и б у  л г н  16,2 К б

й

thebeaufyincss

C S S  Z e n  G a r d e n j с Ри тевц

. 8 •и н е ж а р б о з И а  8 и б т  и  64 цм и а т е в

е н е н а р сх о , рме з а

о  в т ма р  фо р л й а  ф

е  PNG с о н и б у  л г а е в  ра н  5,3 К б

й

{in 'beautyi ncs» - it  ^igf> •

C SS Z e n G a r d e m с Ри тевц Г I о н т е в Ц

.  9  •и н е  ж а р б о з И а  8 би т  и  4м и а  цт е в

е н е н а  ср х о , рме з а

ИН А ЧМ РП Е

о  в т ма р о  ф р л й а  ф а е в а р

е  PNG с о н и б у л г н  2,2 К б

Е й н ва и р а

т  рси

. 4- 9 см

й   г лб у и н

е   ц в ет

а   фо р м а

т  JPEG  о т -

. н а е к д а л кв

.

х  даетль н ы е  с  п оетр й  и н ф о р м а ц и и ь   то л и к о й   ед а т л а  (р и с . 4- 6).

х   и з о б р аж ен и й й   рад

. JPEG  допскауе , есл и  в ы  го т в ы   п о ж ер и   ум е н ь ш е н и я   р аз м ер

т а

П р и   си ль н о м   с ж иа т и   в   и з о б р аж ен и и   удб т   в и нд ы   от ч е лт и в ы е   ди с п р о п о р ц и и   и  м елк и е  деф к т ы   о е дл т ь н ы х п и к с ел й , н аз ы в аем ы е zyxwvutsrqponmlkjihgfedcbaZYXWVUT   и.ак т мфаер  Хот я   в  боле е   ед ат л ь н о м   и з о б р аж ен и я  э т и  деф к т ы   н е  та к  з а м ент ы , вс е ж е   п р и   и сп о ль з о в ан и и   фо р м а т а   JPEG  н ад о   соблю адт ь бал н с  м еж д у   п р и ем л ем ы м   шд у х ен и е м   в к ач с т е а   к ар ти н к и  и  умен ь ш ен и е м   р аз м ер а  фа й л а . В  JPEG  п р о з р ач н о ст ь  в о б щ е  н е  реали з о в ан а , н о  JPEG  с  п р о г ес и в н о й р а з в е р кт о й , фну к ц и о н а л ь н о  ан ал о ги ч н ы й   GIF с  черз с рт о ч н о й   р а з в е р кт о й ,  п оедр ж и в аест я   б о л ь ш и н с тв о м б р аз у е р о в   (см . н и ж е   р аз ед л   «П р и ем ы   о п ти м и з а ц и ») .

I  l e b e a u i y l h c s s

C

я   24- б и отв

т  дл я  с орха н ен и я  ф о т г р а ф и й  и  дргиу х ли ч н о  п о хди G a r d e n , zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

й

В  э от ес т от в сли ш к о ции 8- би овт ц в а ет а жд фо р м а т

т  PNG м  фо р м ает ь  дв а   р еж и м й  гблиу н о м   в ел и к и . С орхан яю ст й   г лб уи н о й , и  в о  м н о ги е  в ы ш е , ч е е  GIF с

, в о  м н о ги х  о нт о ш ен и я х  п ожхе а   р ха н е н и я  ц в еот . PN G - фа й л й  ц вет а  в ели к и  п о  р аз м ер у , п о ж алйу , з ат о   н е  п р и в о яд т   к  п оетр я  абсо лю нт о  в с е  деатли . В ,  ка к  и   в   GIF, п р и м ен яест х  счлуая х  септ н ь  с ж аит я м  п р и  сорхан ен и и  то г о  ж е  и з о б р аж ен и  э к в и в а л ен нт ы м и  п а р м ерт а м

м  н а  G IF, ы  с  24- би е , даж е   и н фо р м а  фа й л а х  ж е  с я   и н ек д с  о к аз ы в аест я я  в и  (р и с . 7- 9).

х  р е ж и м о в  гл бу и н ы   ц в ет а  ф о р Бл а го д р я  н а л и ч и ю  дву м а т   PN G  тео р еит ч е с к и   можн о   и сп оль з оват ь   д л я   р ха н ен и я  л ю б ы х  и з о б р а ж е н и й ; н а  п р а к ти к е  ж е  л чу ш е  ог р а н и ч и ть с я   то л ь к о   гр афи к о й   с   н еболь ш и м   чи сло м ц в е от в , дл я  к о т р о й  о б ы ч н о  п р и м е н я е тс я  ф о р м а т  G IF, а  и з о б р а ж е н и я  ф о т г р а ф и ч е с к о г о   к а ч е с вт а   с о рх а н я т ь в   фо р м ат е   JPEG.  оХ т я   в   фо р м ат е   PN G  с   24- б и то в й г л бу и н о й   ц в ет а   и н фо р м ац и я  н е  те р я е тс я , н о   од сит га ест я  э т о  ц е н о й  ув е л и ч е н и я   р аз м ер а   фай ла . П о е д р ж и в а се т то в ы й  и  8- б и отв ы й ест ь  в  GIF, в то р фа - к а н а л . 8ет м , ч т о  м о ж н о т б р а ж ьт с я э то г о   р еж и м

я  так ж

е  дв .  П е р в ы й  ж е  о бесп еч и в ае б и от в ы й   р еж и о  з ар н е е  н   P N G - фай л а   о гр а н и ч ен

: 1 - би я  о т  то г , ч т т   вс е  256 ур о в н е й   аль м   п роз рач н ост и   и н е тр с н е  дму аьт , н а  к ак о м  ф о н е  бе д у .  К  с о ж а л е н и ю ,  п о л е з н о с т а   в   си л у   слабо й   п о дер ж к а  р еж и м

-

а  п р о з р а ч н о с ит

й  н е  о лти ч а ест

о т ь и

с о  с то р о н ы   б р азу е р о в .  В  ч а с тн о с ти , Microsoft  Internet Explorer дл я  Windows п л о х о  с п р а в л я е тс я  с  а л ь ф а - п р о з р а ч н о с ть ю   в  PN G - фа й л а х .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

с ор п В

ы

Н е с м о тр ф о р м а то в ш еп ер еч и слен н ы х н ост з р а ч н о с ть ф о р м а то со в р ем н н ы н а   ч то б общ не е де р ж и в а ю щ е

ь

н е п о с р е д с вт е н н ы е  и

п р о з а н сч т

я   н а   н али ч и е   о гр о м н о г о , в  Web  н а ш л и   п р и м ен ен и .  JPEG  н е   п о д е р ж и в а е   во се , в   G IF р е а л и з о в а н а   ли ш ,  а   8- б и от в а я   п р о з р а ч н о с ть м   PN G , н е   п о д е р ж и в а е тс х  б р азу е р о в . П р о б л е м о   с   CSS.  В   п р о ш л о   и сп оль з оват ь   э ф ек т  п р о з р а ч н о с т  п р и ох ди л о с ь   п рори совы ват  с о рх а н я т ь   и х   в  то м   и л и   и н о м   п р о з р а ч н о с ть .

и   ч и сл

а   гр а фи ч е с к и е  то л ь к

х о   тр т   п роз рач

и   вы

я  п р о ь   1- би овта ,  п р е дл а г е м а я   б о л ь ш и н с тв о а  н е  н о в а  и  н е  с в яз а м   д е с я ти л е ти и   в  Web,  в о ь  и з о б р а ж е н и я  з ар м   ф о р м а те ,  н е  п о д

я

.си Р 1 ы ин ч а р з о р п о пд в е с

м -

0 •   В  о «к с н о п Я

м е  сд а

» с с тю а т е чо

е и н е ж а р б ио з

ы ян ч а р з о р п не

е

я

, -

»  К ав ч и   в ы в о ди т   е кт с т   в   кол н ка х В   «Яп он ско м   е дас б ел о г о  ц вает , к а ж щу и сх я  п р о з р а ч н ы м и , п о ск ль к у  о н и п ер к ы в а ю т   и з о б р аж ен и е   з ел н ы х   л и с ьт е в   (р и с .  10). т  так о г о  э ф е к та , те м  н е  м ен е е Ф орм а т  GIF н е  доп сук ае п р и м е н я е ст я  и м е н н о  о н . В м ест о   отг о  ч то б ы   рт е б о в а т ь п о е др ж к и  п р о з р ач н о с т и  о т  брзау ер а , К ав ч и  в о с п о л ь л  уж е   го т з о в алс я  с л о ям и  Adobe Photoshop, и  с орхан и в ы е  и з о б р а ж ен и я  в  G IF- фай л ах . К а р ти н к и , в ы псут аю щ и е   фо н о м ,  н и к а к   н е   з а д е й с т в ую т   п р о з р а ч н о с ти , и м ен н о   в  так о м   ви д е   о н и   и   б ы л и   п о дг о т в л е н ы .  Э ф фек т  п ер к р ы ит я  о нд о г о  ц в ет а  др гуи м  до сит гн у т   ли ш ь му е л ы м и   м а н и п лу я ц и я м и  гр а ф и к о й  в  Photoshop.

О   The Road t o IMightenmerLt .с и Р 1 а н фо

1 • ы н ч  а р з о р П с т е а , ож а р б о т

й  GIF, кы р о т о я  н а о л  е б м н о  ф

й  бы е

л е л в о т о г пд о

.с и Р 1 а н фо

2 • ы н ч  а р з о р П с т е а , ож а р б о т

й  GIF, кы р о т о я  н а о- н ел те  з в с

й  бы

л е л в о т о г пд о м н о  ф

н  дл я г о л  е б

н  дл я г о л  е б

о

о

е

П р и   и сп оль з ован и и   п роз рач н ы х   G IF - фа й л о в   н жу н о бы т ь   о с б ен н о   в н и м а те л ь н ы м и ;  ат к   к а к   G IF о бесп е ч и в ае т   то л ь к о   о ид н   ру о в е н ь   п р о з р а ч н о с ти ,  т о   п о л у п роз рач н ы е   п и к с ел и  до л ж н ы   о т б р а ж а ть с я   н а  к о н к 3 • ы н  ч а р з о р П й  GIF, кы р о т о й  бы л е л в о т о г пд о н  дл я  бг о л е о   кй о ж о л д п о   (matte  color). .с и Р 1 р е тн о м   фо н е ,  и м е н уе м о м zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA а н фо с т е а , о ж а р б о т я  н а о м н е   л т е з м н о   ф е zyxwvutsrqponmlkjihgfedc П о лд ж к а  до л ж н а  б ы т ь  то ч н о  то г о  ж е  ц в еат , ч т о  и  ф о н , н а   котро м   е д бу т   в ы в о д и ть с я   G IF - фа й л   н а   в е б - срт а Е г И Н А Ч М ИР Е П нице , в  п р о ти в н о м   с лч у а е  бед у т  о тч е тл и в о   в и дн а   ка I  о н т е в Ц й н  в а и р а т  р с и . 11- 13 см . н а е к д а  вл к . ем к а  и з  п и к с ел й  н е  то г о   ц в ет а   (р и с . 11- 13). В   Web  дл п р и м е н я е тс от д в , п о с к о л ь к лА ь ф а - п р о з р а ч н о с т ь

я   с о з да н и я   о ди

я   э ф ек т а   п роз рач н ост и   обы чн о н   и з  дв у х   р а с м о тр е н н ы х   вы ш е   ме у  о н и  н а деж н ы  и  и с п ы та н ы  в р е м е н е м . ,  и м е ю щ а я с я   в   PN G , м о гл а   б ы zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB

Пр и е м

ы  о п ит м и з ац и

о тк р ы т ь   н овы е   в о з м о ж н о с ти ,  н о   о ст ув и ж к и  с о  с то р о н ы  Internet Explorer  едла тщ е тн ы м и .  И л и  в се- атк и   н те ?

и

zyxwvutsrqpon

е   п о де р т   э т и   м е ч та н и

я

Е сл и   п рост о   вклю ч и т ь   п роз рач н ы й   PN G - ф а й л  в   ди з ай н , т о   в  Internet Explorer  о н  бед у т  в ы гл я де т ь   н ек р а си во , н о  ест ь  р а з н ы е  хи тр о с ти , п о з в о л я ю щ и е  э т у  п р о блем у   о б о й ти .  П р а в д а ,  о н и   р а б о т а ю т   то л ь к о   дл я Internet Explorer,  н о  в ед ь   р а б о та ю т   ж е .zyxwvutsrqponmlkji

рП и е м

о п т и м и з а ци ы

и

Ч то б ы   п о л чу и т ь   фай л   н ебо ль ш о г о   р аз м ер а ,  н ад о  п о ж е р тв о в а т ь   к а ч е с тв о м .  Н о   ч е м   с и л ь н е е   с ж и м а е тс я и з о бр аж ен и е ,  ет м   руо дл и в е е   о н о   с та н о в и тс я ,  п о э то м у   л уч ш е   н ач т ь   с   вы сок г о   ур о в н я   с ж а ти я   и   п о с ет п ен н о   ум е н ь ш а т ь   е г о ,  п о к а   к а ч е с тв о   н е   о к а ж е тс я п р и ем лем ы м .

Ф орм а Д л я   о п ти м и з а ц и чи сл а  ц в е то с то й н о г о п р о б уй т е л е тв о р е н ы 256  ц в е то ти ть с я  з а о т   о р и ги н а л 16  ц в е то в

т GIF и   G IF в ы   н а ч и н а е т е   с   н еболь ш ог о е   ег о  д о  до с ти ж е н и я  п р и   р е з лу ь т а .  Н а ч н и т е  с  8 ц в е то в , п о то м  по   16, 32, 64  и  та к  да л е ,  п о к а  н е  бдеут е   ду о в .  Д л я   н е к о то р ы х   и з ображ ен и й   тр е б у тс я в   (и л и  да ж е   боль ш е ,  то г д а   п р и де тс я   обра  п омощ ь ю   к  JPEG ), д р уг и е  ж е   н е   о т л и ч и т ь а   да ж е   п р и   и сп оль з ован и и   в сег о   8  и л и . в   и  ув е л и ч и в а е т

Н а   раз м е р   G IFп р и м ер , с  п о м о щ ь можн о   з ап олн и т ч е к  б л и з к и х  ц в е то н али ч и я  бо ль ш ег н о с ти . Н о  п р и м е н е н и ти в н о с т ь  с ж аит я ву е л и ч и т ь   ч и сл м ож е т   п о л ч у и ьт с

фа й л

а  в л и я ю т   и  дргуи е   ф а к то р ы . Н а ю  п с ев од с м еш ен и я  ц в еот в   (dithering) ь   о бласт ь   о нд о г о   ц в ет а   зу о р о м   и з  то в  -   в  р ез луь ат е   од с и т г а ес т я   илю зи я о  ч и сл а  ц в еот , ч е м  ест ь  в  дей свти ель е  э то й  м е то ди к и  с н и ж а е т  э ф е к . Е сл и  в м ест о  п с ев до с м еш ен и я   п рост о о   ц в е то в   в   п а л и тр е ,  т о   р а з м е р   фай л а я   а жд е   м ен ь ш е .

В  Photoshop с р а в н и те л ь н о  н е да в н н ост ь  с о рх а н я т ь   и з о бр аж ен и и н фо р м ац и и . К а к  б ы  с и л ь н в а р и те л ь н о , в к л ю ч е н и е   э то г л я е т  е щ е  б о л ь ш е   с о к р а ти т ь

о  п о я в и л а с ь  в о з м о ж я  в  G IF - фа й л а х  с  п о те р о  в ы  н и  с ж а л и   фай л  п р ед о   р еж и м а   обы чн о   п оз во   раз м е р  -   к о н е ч н о , з а   сч е

й т

-

и к р фа Г к а ч е св т а р и   к а ч е св т ч аст о   а с ед т у

а

. П р

Ф орм а

и  о ч е н а   -   с к а ж ем я   ум е н ь ш и т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA ь  н е б о л ь ш о м   к о э ф и ц и ен т ,  5- 6  п р о ц е н то в   -   раз м е ь   н а  20- 30 п р о ц е н то в

т JPEG

О п ти м и з а ц и я  JPEG  -   го р а з д р а .  В  гр а фи ч е с к о м   р е д а к от р н ок , с  п о м о щ ь ю   котрог о   з а д е ст Че м   в ы ш е   к а ч е с вт о ,  ет м   б о л ь ш н и же , те м   ф а й л   м ен ь ш е . Д л к о е   к а ч е с тв о   и   п о с те п е н н о т  в ы гл ядет и з о б р аж ен и е   н е  бед у С о в р ем н ы н о ст еа д

е  п о те р   фай л а .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

е   п р о с та я   п р о ц е ду о   и м е тс я   п олз у я   ру о в е н ь   к а ч е св т е   фай л ; ч е м   к ач есвт я   н ач л а   з адй т е   н ев ы со   ув е л и ч и в а й т е   его ,  п о к ь   п ри ли чн о .

. о а

е  воз м ож ы  п еродж и ваю т   и  дигру а   JPEG.zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  веиаознрпт Ом  и з о браж ен и е е   в ы со к и й  к о э ф и ц и е н т  сж аит я , ч е м   п о .  JPEG  с  п р о гр е с и в н о й   р а з в е р тк о й   л уч ш е ь   дл я   б о л ь ш и х   фо т гр афи й ,  п р и   э то м   р а з  ( blur) а  н еск о ль к о  ув е л и ч и в а е тс я . ваиные Разм я   а тк ж е   п о з в о ляе т   е щ е   ум е н ь ш и т ь   фай л . е  бзрауе

и   фо р м а т т  чту ь  боле

му о л ч а н и ю п р и м ен ят м е р  ф а й л и з о бр аж ен и

о   боле е   обы чн

Тр удн ы

р

Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Ф орм а т PNGzyxwvutsrqponmlkjihgfedcbaZYXWVUT

г НИ А Ч Е М И ПР б ос п С

й в ыб о

ы т ви чю л к ь  пы н ч ар зо й  PNG- ай ф л  в а стс о в  син ар т , каро то я  бе д у т с ь т а в и р  птмс оа р я  в  Internet Explorer, иоп ы  в ья т а  тс х  «PNG Behavior» (http:/ / webfx.eae.net/ dhtmL/ pngbehavior/ pngbehavior.html)  и  «Cross- Browser Variable Opacity  with  PNG: A Real Solution» (www.alistapart.com/ articles/ pngopacity).

ыц н ас

О п ти м и з а ц и я  8- би отв г о тл и ч а е тс я   о т   а н а л о ги ч н о м о ж ет е  в ы б р а т ь  ч и с л до с м е ш е н и я . О п ти м и з и р о в а т р аж ен и е   во бщ е   н ель з я те м   с ж а ти е м , к о т р о

Т р н ы ду

.

о   PN G - и з о б р а ж е н и я  мал о  ч е й   п р о ц е д ур ы   дл я   G IF : в о  ц в е то в  и  в к л ю ч и т ь  р еж и м  п сев ь  24- б и от в е  PN G - и з о б , п р и ох ди тс я   о г р а н и ч и в а ть с е  з а л о ж е н о  в  с а м о м   ф о р м а те .

й об ы в

Д о   ет х   п о р   п о к а   а л ь ф а - п р о з р а ч н о с ть т  к о р е к тн фо р м а т  PN G , н е  бед у м и  б р а зу е р а м и , п р и де тс я  п р и б е г а т р и те л ь н о й   п о дг о т в к и   «п р о з р а ч н ы х кот ро й  в о с п о л ь з о в а л с я  К а в ч и В ы бо м еж д п ен ь н ост

р  п о дхящ ег у   ру о в н е ю  с ж а ти я и  и м е ю тс

м ы я

р ,  в с тр о е н н а

я  в

о  п о де р ж и в а ть с

о  ф о р м а т а  ф а й л а - э т м   п р о з р а ч н о с ти , г л бу и н о . В ы  до л ж н ы  о с о з н а в ть я  в  в а ш е м  р а с п о р я ж е н и и

я  все ь   к  тенх и к »  и з о б р а ж е н и й

-

е   п р е вд а

,

. о  к о м п р о м и с й   ц в ет , к а к и .

с а   и  сет е  в о з м о ж

-

е н йа з и Д

р и вэ Д д н и с ьл е Х г (David HeLLsing) www.csszengarden.com/102 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHG

е вР о л ю ц и я е л ч к В ю ни

! е и з о б р а еж ни

й в т а бл и ц

у с т ил е

й

Г р а фи к а   и гр а е т   важ н у ю   рол ь   д л я   п е р ад ч н а с тр о е н и я , з а д н и я  то н а л ь н о с т и   и   п ри вле ч ен и я  в з гл яд а   з р и те л я . Н е  м ен е е  в а ж н ы   п ра ви ль н ы е   сп ос б ы   в к лю ч ен и я   гр а фи к и   в   со *S OW H A TS I THS I A BOUT? Tktahctawt) zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA сат в  с тр а н и ц ы .

и -

iJurtienaiinsiiiraclie. lii."y*fv.  and rnoH iragepnttldpatJon.Tii  begin, view м

tiie entiling ilrtlgM in the ifci. ('licking«a enjron«w1U  l>wd tbc «tvle^hM In

К а к   п ер в а я   а в то м а тн а я   о ч ер д ь   н а  ти ох м  д то й  п о р ы  п о л е  б о я , до м и н а н тн ы й  о б р а з   сра з у  ж е  п р и в л е к а е т  в н и м а н и е . О с о з н а в я  в ы р а з и те л ь н у ю   си л у   н а ч а л ь н о й   и л ю с тр а ц и и Дэви д  Хел ь с и н г   о б р а ти л с я  к  с та р ы м  п р о п а г а н ди с т к и м   п лакат м   и   та к и м   п р и з ем лен н ы м   и с от ч н и к а м  и з о б р а ж ен и й , ка к  н а м о к ш а бму а г ,  ч то б ы   з ад т ь   н уж н у ю   ем у   то н а л ь н о с ть .  К р о в ь   и   к раск а , г р я з ь   и   з в ез д ы   -   со с та в н ы е   ч аст и   «Р ев о л ю ц и »  -   га р н ти р юу у   в и з аул ь п рон и з ы ваю щ и й , б е р ущ и й  з а  дшу н ы й   э ф ек т . К лю ч о м  к  ди з а й н у  б ы л о  со блю едн и в   п р о ти в о е с   в о ен н ы м  и  п о л и т ч ес к и ц и ац и ям , в ы з ы в а ем ы м  з аго л в к о м вы бра л  с п о к й н о е  и  легк о е  о ф о р м л е н и ст и  к о н етн ат . Д л я  с о з да н и я  о б ъ ек от р афс к и х   э ф е к то в   о н   восп оль з овалс гр а м о й   Adobe Illustrator,  а  з ает вс е  в м ест е  в  Adobe Photoshop.

о , я т -

е   бал н са

: м  асо

-

, Хель си н е  обла в  и  ти п о г я   п ро м   о б ъ е ид н и

г л

По д с а нт о в к

т р а Пе и к о ч с

ess  Zen Garden

.с Ри

1 4-о в о н  Фо

ени е аж р  изоб

ненно е прим

е  к нт е ем  эл

г   ЕВ О С

е  с ы идим  в

м м о т с к  те

е  вним ниае о  иенизоб ржа и н ав я  нно уж , чоб т та л и ^ по т м  п о  вила керт до г к а  позиц я  оспитеыав l e f t  и  t o p ) , эт и ед н ц ы   и з м ер ни я п о р дя к  приво д во г

,

у  h i

, чт о  пордя я  сщу евснт ы  сл а ч н

к  синоавдел ; нпраим ер

я

zyxwvutsrqpon

е пр и м е н и е

Р а з р а б ыт в а я   ид з а й н  с тр а н и ц ы  с  п о м о щ ь ю   CSS, н ж у н о  п р и мду а т ь   ка ой - т о  сп о с б  в к л ю ч е н и я  так и х   ох р ш о   п р о а б о та н н ы х   и з о б р аж ен и й ,  к а к  з а го л в о к   в   ра б о т е   е Хл ь с и н г а .  Д и з а й н ер а ,  п р и в ы к ш е г о   к  тег у   img, з н а к о м с вт о  с  и сохнд ы м   етк с о м  сай т а  Zen G arden п р и вед т  в   з а м еш а етл ь с вт о ,  п о с к о л ь к у   м е ах н и з м   в с ат к и гр а фи к и   н е о ч е в и ед н .  П о н я тн о , ч т о   вс я   р або т   воз ло ж ен а  н а  CSS- фай л , н о  к а к  и м е н н о  э т о   елсадят ?

Т

т и а рб О

а  и з о б ер наиж

я  ао тибру , дл я  по зи ц о ни ро

в  фоно

-

у   с  э л е м е н ь  о и д н  и з  н и х а  усазлыв к ь  позиц я  п о  го р и з о н до с та о ч н о   хо р о ш о   п о д е р ж и в а е тс я   н а   п р а к ти к е  , т о  ест ь  l e f t , е т аз м  t o p . Вмепроч , фо н о в ы е  и з о б р а ж е н и я . Ч то б ы   п р и с о е ди н и т ь   к а р ти н я  кывемючл и  м авосл и  ( ка , сем ажк , .  1), п р и м е н я к у , с к аж ем , к  тег у   h i  в  Zen G arden  (р и с о  н е  оне ч ь  но вжа , а  во т  есл и   пр и м с ю т я н е я , к   прим еру , % ил и  р х , т о  ын ьвиплера й сет я  до в о л ь н о   п рост й   с и н та к с и с : н жу н о   з адт ь   п ту ь т  к  ош иб к е  по зи ц о ни р о вани я . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA к  ф а й л у  к а р ти н к и , ег о  п о з и ц и ю  и  с п о с б  п о в то р а  (есл и ег о   в о б щ е   н уж н о   п о в то р я ть ) :zyxwvutsrqponmlkjihgf -

Е ст

ь   н ес к о ль к м  с  п о м о щ ь

то

о   сп ос бо ю  та б л и ц

в   св яз ат ы  с ти л е й

ь   к а р ти н к , н о  л и ш

hi { background: url(path/to/image.gif) left top e s s  Z e n  G a rde nzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA no- repeat;

с Ри

. 2 4- о в н о  Ф е и н е ж а ир б о з в  то м  ме тс е , гд е с т е ка ч н о

я с к е т

е н а з ое р б т

о  п о л а  вк и т р е

и

Е сл и  з а д н  а тр и б у т   n o - r e p e a t ,  то , ск о р е е  в с его и з о бр аж ен и я  н ео б хди м   о бъ ем лю щ и й   э лем ен н о  з а д н н ы м и   р аз м ер ам и , з а   к о т р ы й   о н о  н е в ы с тп у а т ь .  Е сл и  н е  з а д н ы   ш и ри н а  w i d t h  и л т а   h e i g h t ,  т о   (если , к о н е ч н о , и з о б р а ж е н и е  н к р о хнт о е )  в ы с о т ы  текст а  о к аж ест я  н еод сат ч н о б ы   в м е с ти ь   в с ю   к а р ти н к у , в  р е з луь та е  ч ег о р е ж ст я   (р и с . 2). В  б о л ь ш и н с тв е   с лчу а е в   сел уд з ы ват ь   р аз м ер ы  и сохнд о г о  э л е м е н та , до с та о ч н ы в с ег о   фо н о в о г о   и з о бр аж ен и я :

, д л т  с  то ч   до л ж н и  в ы с о е  со в се , ч то   о н а  о б т   к уа е   дл

я о м я

hi  С

background: url(path/to/image.gif) left top no- repeat; width: 400px; height: 20px;

с о д т П а н кв и з о б р а еж н и

а я

H e  всдег а   ж е л а те л ь н вог о   и з о бр аж ен и я G arden и з о б р а ж ен и з а го л в к о

в   и  с к р ы в а ю

о   о с та в л я т . В о  м н о г и я  п о сдатв л яю ст т   ет к с

ь   ет к с х   в а р и а н та .

т   п о в ер х   фо н о х   ди з а й н а  Zen я   в м ес т о   раз ли ч н ы х

и р ка Г ф

а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

В  м а р т е  2003 год а  Длгау с  Бо му е н  о п бу л и к о в а л   н а  с в о ю   (www.stopdesign.com/ е м   сай т е   Stopdesign  с та ь articles/ replace_text),  в   к о т р о й   оп и сы вал с ь   ет н х и к а з ам ещ ен и я   те к с т а   фон овы м   и з ображ ен и е м   рад и т  с тр а н и ц ы . П о з ж е  э то т лу ч ш е н и я   ти п о г р а ф с к и х  ч е р м е от д   п о л чу и л   н аз ван и е   «п о дс ат н о в к а   и з о бр аж ен и я Ф а р н ер а »  (F ahrner  Image  Replacement  -   FIR)  в   ч ес т ь Тод а   Ф а р н ер а   (Todd  F ahrner), к о т р ы й   п ер в ы м   п р ед лож и л   е го .  О с н о в н а я   и де я   п р о с т а :  п о м е с ти т е   ет к с т в н ут р ь   э лем ен т а   s p a n ,  с к р о й т е   с о де р ж и м о е   э то г о sp a n  и  с в яж и т е  и з о б р а ж е н и е  с  с а м и м  э л е м е н то м . Во т п ри м е р  п о д б н о й   р а з м е тк и : css  Zen Gardenrt»W l e t t e r »  s(  В . *

Т *  es .  tin nil »tnrjTt !• • . t »« »f  4 »  thu g tilc r mil

. Ri a Ut REM EN TS

Щщ

 «• Mi № •  H »»  «i  «i A  Я Ш

  »i  I w A f e  ftM  «Iwold L. limit. J h,

w i J e f , . «l l 4 ' ™t «l ' i r i f i n 4 l r t f  Wilf . TlHl  Г К   K«m < ; «nJc nit  * f c «!t lun«lOf . »l,  ( M * l«f t * l

CSS  «.Й   n o ! * e I M M t   ti!.»U.C!»- p t i u r  (• ,?S  vu l t d ) > * i .

ef  C i S .  & Ч е г * п

! D . o - «( f J  d i i s l i /   tfiffctnMt,  c / «n  t sr - ip le( ( t v vt Nd  c j s  i i l m e i ,

me  R e i o u r r e i  p »g *  Ы   * for> n«lKpn on  som e e ( t h *  b i n  i v . i l . b k ,  I'u!!  b n w u f

• № '  f n e l - p F d v a  a d r  i c o i t  e * * r > p i«t f o r m . t i l • •  * »«Ь   * , incompatible  о ш в

, л и

! biokm  fSS

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

е Бр о г в

TltfUy, o r  (!)  «I  «)*а т   Ihe oiiod  ,4 paA  prartira*. Web ml«M enmmt Ь м  b m  «ch im d  thanfci  to tlie lirrtnm  rftora uf  folk  к Ъ

г  the  ед,

what canЫ nccmnplixhrd vhuaily through CSSbastd design, S elect any xiyh: sheet from the list ut Umd и  imp this

  I t w  aid! the ma>w  tmiwwr

1» a*  lea  G arden ifirtie*  )W to w*w  »Ы  m «*U  tr m  the b|«> r«n t  Ы к и

br) tinir- hunarrai tohntqtvs  ttinrwand

кт о в г д П

So What  U  1h i* А There н  rtrarly * n wl  lot CSS to Iw taken teriowl}' t"* I f * )UJ  twipalion. Til begin, VKW  «. т с   Ы   tlir eiatm x  Jn>«™  Hi  Ihr

r

Ы .  iVittac  *in .n y  .>№   «ill toad the «\ V  >bw( mlo ibt  vtry

gardenias 

к л ио т п н е г д ь

и лд

я т о а бр о г о н д сх и

ы о м а т ле и р

а

perfume

by  urtn,iit4tf  /я tta

 IIM  th*  *anif, the only tlu*« Ihal h i i

dui«lc гены

й  бри з

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

,  Ke^m 10 i i *  wiili clarity,

м  of the в и и . п

п тр а

»  lile. Ves.  really.

 

ь#   т а ш й

А  

 pdup

Sifi

CSSiHowi «uniiirte tivl  tutnl oumro! ovrr  ihr itviruf  д h)pч » tn m m e up wilh pUrl-

м   ewr>' [ilatiuiHi. But do им

  in u  rnuiy  »*

х   dn ijii  ckwdi't  work  i n n  l m l  № */ Wt

a  and

Muxllla (run by over  *) H o f  itwpHpoUlkin),  rtu*- »  *Pf  wv m in i  attriH   a.

Wr u kt lt a i  vuutubmii  ur%;tnaiiFtwurk.  flcatcre^oct uipiitlH   laws. ? Ь

я   k**v Ыч ф

л  шЫ па

р  ewinrul  ю  а

minimum, laitrlul  nudtly a  tnvj&mblr, uuliish!  pornoKiaphy

Mill lie  г ф и T!BI  m й  Ъж игт wtti» full  й э д г ^

с  «erciie  ai w*U  a* * drinotwiratton. Гн Ы  on уик

г  р*е лЬр л

М и

  (wtth limited «m p lian i,

Mr  lulflflffftfton  %uidrlinfif 1.  but wr ink ynu rfir^w  vow i*SS uwk- r  •   M M  (jjmm^uu  lireI*P к к м к я

! М  t l *  ii»- (nitht
 Free Transform),  п о з в о л я ю щ е с я тг и в а ь т , с ж и м аьт , п о в р а ч и в а т ь  и  п е р к а ш и в а т м е рт и ч е с к и е   ф и г ур ы , те н ь   бы л а   сж ат а   п о  в е р ти к а л и с к о ш ен а   в лев о ,  п о с л е   ч е го   р а з м ы та ,  ч то б ы   с г л а ид т в н еш н и е  к р а я  (р и с . 3).

ю zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJ о   и  з а   Free й  р а ь  гео , ь

 м е н

Ч то б м ен т др г у о

ы  седлат ь  те н ь  п р о з р а ч н о й , п о рт ебюу ст я   и н с рт у .  Т о т  и ы   Eraser  (л асит к )  и  Smudge  (р а с шту е в к а ) й   можн о  н а с тр о и ть , седла в  б о л ь ш е  и л и  м е н ь ш е , с Ри . 3  • а н  Ид о х с я м р  фо а  с о ош  сн л п й ю ь  тн е , сй о н ш ое к с  м я г к и м и  и л и  тв е р ды м и  к р а я м и . Ч то б ы  в р чу н у ю  сет т а д з ос ь ю и з ю ил , бт д у о  он с т ае а в ы с а р б  от я ы н о ме х е  тр р е т ь   с р е нд ю ю  ч ас т ь  те н и , б ы л а   в з ят а  к р пу н а я  к и с т ь  с м ягк и м и  к р а я м и ; з ает м   к  р ез луь ат у   бы л а  п р и м е н е н а и   к р аям и , что н ебо ль ш а я   р а с ш ут е в к а   от ж е   с  м я г к и м б ы  седлат ь  тен ь  слекг а  н е п р а в и л ь н о й  (р и с . 4). И едаль н о  п р а в и л ь н а я  те н ь , к о н е ч н о , в ы гл я ди т   к раси во , н о  в жи зн и  о б ъ ек т ы   р е кд о  б ы в а ю т   б е з пу р е ч н ы м и , та к  чт о б е з   до п о л н и те л ь н о й   п р о р а б о тк и   ед а т л й   о н и  буд т к а з а ьт с я  н е р а л и с ти ч н ы м и . Д л я  з а в е р ш е н и я  э ф е к т а п ри ш лос ь  ещ е  слегк а  п о дп о р ти т ь  п о в е р нх о с т ь   и о с дх н о г о  о б ъ ек т а   (р и с . 5).zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

с а л о п Ив з и н ь е и нс т р м у е нт о Burn и Dodge Дл

с Ри

и   м н о ги х   ш тр и ш к о о б й ти с ь  то л ь к о  л а с ти к о м  и  р а с шту е в к о й в ы   з а ох ти т е   и м и  о г р а н и ч и ть с я в ы де л н и е   к  л ю б о м у   гр а фи ч ес к о м о ч ен ь  трнду о  б л аго др я  с о вт ес н н Burn  (з а те м н и те л ь )  и  D odge  (о с в е тл и те л ь ) осн овн ог о  с ло я  б ы л  в з я т  л и с т , з а л и ты (р и с . 6), с  п о м о щ ь ю  о с в е тл и те л я лы е   п р о ж и л к и . Д о п о л н и те л ь н у п р и да т ь   з а те м н и те л ь , с  п о м о щ ь в а ю ст я  л егк и е  те н и .

е тл

к   н а  п о в е р нх о с т

а   п рож и ло т   н е э с те и ч н о я  п р и в н ес н

ч е р к н ту

, п о э то м ы  до п о л н и те л ь н ы

ь   тр е мх р н о с т

ь   (р и с

ы м

в

я   р еали з ац и

С ек т в ы г л я ди

, б то ч м  тео л

в   можн .  Д о б а в и т у   и з о бр аж ен и о  и н с ртму ен ат

 б ы л ю   г лб уи н ю   котрог

и   о дн о т н н о г у  с  п о м о щ ь е  о етн к и . 7).

й  о дн и и  н а н ес н

о   бы л о  б , н о  в р я д  л ь   те н ь  и л ю  н

. 4 •ма е а в ы с а Отбр с  пщмоь

ы

я о т к е  оъ б ю к и т лс а

а  и к шв еу тс а р

м н те

ь н а л се д

а о н ч а р з о пр

й

и

и и е м

. В  к ач есвт м  ц в е то ы  свет у   и м   м оже о   н а к л а ды

е м т -

о   ли ст ю  з а те м н и , чтоб ы  п о д

В ы ш е п у о м я н т ыу е   и н с т р му е н т ы   и сп оль з овали с ь  дл с о з ад н и я  л и с ть е в  л о з ы . Д о с та о ч н о   с е дл а т ь   коп и и  и с о х нд о г о   л и с ат , а  з ает м   п о в е р н ту ь   и х  и  и з м е н и т ь  р а з м ер ы .  Д о б а в и в   сам у   в ет ь   и  е щ е  н е м н о г о   п о р а б о та н а д  в ы дел н и е м  и  те н ь ю , м ы  до б и л и с ь  п о л н о й  и л ю з и и   (р и с . 8).

а с Ри . 5  •ы н ь л е т а  Окоч н л д я  пгщ еу о м з и л  ра е

я в -

й н а и вр а а

т  с м иа т к е ф  е д

м ы н е,  л в або д

и

а zyxwvutsrqponmlkjihgfedcbaZYXW и з о б р а е ж ни й

П о ку п к В оз м ожн о м ер а   л и с ть е и з о б р аж ен и чи мы ми е т   м н о ги да ж е  о к л ю ч ей рош о  и с вт е н н о

Рис

. 6 •  одна х Ис

т с я ерхно в  по

ь т  лис

С о за д н и об р а з а

оХ т

Рис

. 7  •  Дл и  выделени

я таци  ими я

и о л и ж  по р

ПР И М Н Ч А Е он тевЦ

с Ри

к  и ур т с к е  т

ы  добавлен

ы  тен

Е й  вн а и р а

.  8  •  Лзо

т  рси

а  вт с ме

. б  и  7 см . н а е к д а л кв

е  с м я  ль тс и

, в ы  з а м еит л и , ч т о  п о  м е р е  ум е н ь ш е н и я  р а з в   п рож и лк и   п роп ад ю т ;  к о гд а   м а с ш та б я  ум ен ь ш аестя , даетл и  сатн о в яст я  н ер а з л и . Н о  в а ж н о  о тм е ти ь , ч т о  гла з  вс е  ж е  р ас п о з н а е   м ело ч и ,  а   о б щ е е   в п е ч а тл е н и е   с у и л и в а е ст я т   н е з а м е тн ы х ,  н а   п е р в ы й   в з гл яд ,  в и з ау л ь н ы х . Бы в ае т  о ч ен ь  о б и дн о  ум е н ь ш а т ь   м а с ш ат б  хо  деатль н о   п р о де л а н н о й  р а б о ты , в о з н и к а е т  еест е  ж елан и е  о с ат в и т ь  е е  та к о й , ка к  еьст .

.

и

е и г ре ч а с ф к

х

в

я  н е  к аж ыд й  м о ж е т  п о з в о л и т ь  себ е  п о тр а и т г и  и л и  в р е м я  (а  э т о  м н о г о  ч а с о в ) н а  п р о р и с о в к р аж ен и й   в р чу н юу ,  к а к   в   «Бер го в м   б р и з е» м ен е е  э т о   о ди н   и з   сп ос бо в   п од брат ь   к а р ти н к и о б х ди м ы е   дл я  ди з а й н а .

ь  ден ь у  и з о б ,  ет м   н , н е

О бращ ен и е   к  т р а д и ц и о н н ы м   гр а фи ч ес к и м   и ск у т в а м  -   э т о , б ы т ь   м о ж ет ,  с а м ы й  о ч е в и дн ы й   сп ос з да н и я  и з о б р а ж е н и й . Хот я  р и с о в а н и е  и  ж и в о п и с ч аст о   п р и м е н я ю тс я   в   п ро ц ес е   р а з р а б о тк и   сай т , н о  м н о ги е  ди з а й н е р ы  сн ач л а  дел аю т  э с к и н а   бм у а г е  и  то л ь к о  п о т м  о п сук а ю тс я  д о  ур о в н с ел й . И м е т ь  п о д  р ку о й  а р их в   р и с ну к о в , ф о то г р а ф и и  и н ы х   м а те р и а л о в   м оже т  б ы т ь   п о лез н о , к огд а ат н е т е  о т  о б ы ч н ы х   и с то ч н и к о в . В  к о н ц е  к о н ц о в д щу е м   в ы   с м о ж ет е   п о ч е р п н ут ь   и з   н и х   в до нх о в е н и е ес л и  о н и  у ж   б о л ь ш е  н и  н а  ч т о  н е  п р и г о дя тс я . Т ал н т ы  бы ваю з а н и м а ю ст я  лю д м и .  Елс и  в ы   н е е  в о з м о ж н о с т ест ь  дргиу ит н о к . Блаогрд с  п о м о щ ь ю  деш евог м ожн о  п о лчуи т ри ал ,  есл и   от л ь к э ф е к ти в н о  п о ль з о в аьтся п р и лаг о с ь   рк у о в с д т о етл ь н о   п о з н а к о м и ьт с ч и та ь   к а о е - н и бд у

т  р аз н ы е , в  н а ш и  с  р а з л и ч н ы  умет е  р и с о в аьт и  дл я  р аз в и т ю  тнех о л ги о  скан ер ь   в ы с о к а ч е св т н н ы о   в ы   з н ает . В оз м ож н о ,  н я  с  о с н о в ам и ь   в едн и

о Пу п к

а и з о б р а еж н и

е -

б  с о ь  н е ц ело г о з  и ед и я  п и к й   в ы  ус , в  бу ,

и  дн и  ди з а й н о м  дл я   Web м  о бр аз о в ан и е м  и  н ав ы к а , то , скоре е  всоег , у   ва с я  до б ы в а н и я   н жу н ы х   к ар и  (и  п енад и ю  ц ен ) , а  и  ц и ф р о в о й  фо т к а м е р ы й  и осндх ы й   м еа т , к а к  э ти м и   с ур т о й с в т а м и , к  сртоуй свт у  даж е о   е с л и   в ы   о и хт е   едй с в т и , т о   и м е т  см ы с л  п о е   в   ц и фр о в у ю   гр а фи к у .

й

и

К о н еч н о ,  о гр а н и ч е н н о с т ь   б ю д ж е то в ,  в ы де л я е м ы х  н ди з а й н   б о л ь ш и н с тв а   с а й то в , н е  п о з в о л я е т   п л а ти т ь  з Е ВО С Т и з о бр аж ен и я , с дел а н н ы е  н а  з а к з , хот я  к л и е н т ы  с  то л уе д н ме о к Ре м ги н к у  Peter К . Burian «Mastering Digital Photography с ты м   к о ш ель к о м   и  м о гу т   о ц е н и ть , н а с к о л ь к о  до п о л I  and Imaging» (Sybex, 2004). zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н и те л ь н о е  в н и м а н и е  к  тем е   и  к о м п о з и ц и и  о кпу а ест я 6 3ак . 1942

-

а а .

ри а к Г ф

а Р т об а н а за к и п р и о б е т е ни б е з от и с ч л е ин

а

з

7mwui.ockphasc.mv

е й о т п р о да

ж

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Ч то б ы  н а й т и  м еснт о г о  ф о т г р а ф а  и л и   и л ю с тр а о р а , п р и де с т я   п о к п а ть с я  в  «ж елыт х  с тр а н и ц а»х ,  н о   ч ас т о л чу ш и х   р е з л у ь ат о в   можн о   д о с ти ч ь ,  о б щ а я с ь   с   рд у ги м и   м е с тн ы м и   тв о р ч е с к и м и   л и ч н о с тя м и   п о   с е ти . В п р о ч ем , н е т  н жуд ы   о г р а н и ч и в а ть с я   то л ь к о   м е с тн ы м и   та л н та м и ,  сщу есвту т   м н о ж е с тв о   с а й то в ,  н а  к о т  до г в о р и ть с я  о  р а б о т е  с  п р о фе с то р ы х   к ли ен т ы  м о гу си он ал м и .  О ди н   и з   сам ы х   и з в е с тн ы х   -   э т о   Aquent (www.aquent.com),  н о  ест ь  и  н е м а л о  др гуи х , р а б о та ю щ и х   боле е   и л и  м ен е е  э ф е к ти в н о . Р або т а  н а  з а к з  с от и т  до р го , и  н е  м н о г о  н ай едст я  сай то в , к о т р ы е   м о гу т   с еб е   э т о   п о з в о л и т ь .  Е ст ь   и   б о л е п рост й   п т у ь   -   п о с е ти ь   м аг з и н   го т в ы х   фо т гр а фи й , гд е  м о ж н о  п р и о б р е с т и  ж е л а е м о е   бе з  о тч и с л е н и о т  п р о да ж . Э т о  о з н ач ет , ч т о  в ы  п л а ти е  з а  и з о б р а ж е н и е  то л ь к о  о ид н  р а з , а  п о т м  м о ж ет е  и с п о л ь з о в а т ь   ег в   лю бы х   ц еля х   п р и   с о б л ю де н и и   су л о в и й   ли ц ен з и и Ли ц е н з и я , ка к  п р а в и л о , п о з в о л я е т  делат ь   все , ч т о  угод н о , к р о м е   п е р п р о да ж и ,  ат к   ч т о   р а з   к пу л е н н о е   и з об р аж ен и е   можн о  в с та в л я т ь   в  р а з н ы е  п р о е к ты . П р а в д в   м аг з и н  м о ж е т   з ай т и   к т о  уго дн о ,  ат к  ч т о   ест ь   р и с к ч т о  «п р о фе с и о н а л ь н а я  дел о в а я   ж ен щ и н а »  и з   в а ш е г п о с л е нд е г о   ш едв р а   н а  др гуо м   сай т е   е д бу т   п р е дс а т в л ен а  ка к  «фи з и о те р а п е в т» .  Т ак о е   б ы в ает .

с Ри м ио вс

е

. 9  4-  Сай и ам т  рабо

т  iStockphoto  е а лаш г и р п и

й о . , , о -

Е лс и  бю жде т   н е  п о з в о л яе т   о б р а ит ь с я   в  м аг з и н  и з о б р аж ен и й , т о  з ай ид т е   н а  с ай ыт , гд е   и сохнд ы й   м а ет р и а л можн о  п о л уч и т ь   б е с п л а тн о . Д а в я  ф о то г р а ф а м   и  и л л ю с тр а то р а м - л ю б и те л я м   воз можн ост ь   де л и ть с я др у г  с  др уг о м   свои м и  т в о р е н и я м и , с о б щ е с тв а   ти п а iStockPhoto (www.istockphoto.com)  (ри с . 9) и  stock.xchng (www.sxc.hu) созалд и  в п еч алтяю щ и е  калтог и  фо т гр а ф и й   и  р и сну к о в   с о  ср енд и м   и  в ы с о к и м   р аз р еш ен и ем , к о тры е  ш и р о к о  р а с п р о с рт а н яю ст я  в  Web.  Н ек о т р ы е е и з о бр аж ен и я   п р о ад ю с т я   з а   н ебо ль ш у ю   ц ен у ,  дргуи во с е   б е с п л а нт ы ,  н о   ат к   и л и   и н ач е   п о лез н о с т ь   ат к и х с а й от в  н ео с п о р и м а .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о к и нт ж о д  ху

ьс вт и л е д о  п

я

П о кпу

ио с П

к а л т ь е р ан т и в ын и с т о н чк

с Ри и н е д евзиорп

. 10 •   Н а а т й  а с я а в  итс у кс

х  тп и

а  Creative Commons п с тю а г а л дер , яс ще ию я л в я щ би  во е с

я м е и н я о тс  о д

а  и з о б р а ж е н и

Е сл н ай т лен и от р с к о д е с я ит л е ит й и с к у вт с то и Т ак жу ран е ат к ж и   аль н

й

zyxwvutsrqponm

х в

и  в ы и  и й  о м

  го т в   д р гу и т   п р о да ж  п р ав

ы   р а с к и н ут ь   сет и   п о ш и р е , т о   м о ж н о е   и с то ч н и к и   и з о браж ен и й   б е з   о тч и с .  В  н е к о т р ы х   с тр а н а х   з ако н   о б   ав е  расп ро стан ясет я  н а  н есколь к о  п р о ш л ы х , н о  о б ы ч н о  м о м е н т , кодг а   п ро и з в ед н и е а  с та н о в и тс я  о б щ е с тв е н н ы м  до с то я н и е м , о т т   о т   м о м ен т а   ег о   с о з д а н и я   н е   сли ш ко м   да л е к о . , в   С Ш А   в   с е р ди н е   2004  го д а   а в то р с к и м   п раво м е   н е  з а щ и щ а л и с ь  п р о и з в е д н и я , о п уб л и к о в а н н ы е е   1923  го ад .  О т к р ы т ы   дл я   и с п о л ь з о в а н и я   бы л и у   1923 е  р а б о ты , о п уб л и к о в а н н ы е  в  п е р и о д  м е ж д 1963  го д м ,  есл и   а в то р с к о е   п рав о   н е   бы л о   сп ец и о   п р о дл е н о .

м zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB Р а б о ты ,  я в л я ю щ и е с я   в сео бщ и м   до с то я н и е м ,  м о ж н о и сп оль з оват ь  в  л ю б ы х   ц елях , к о м е р ч е с к и х  и л и  л и ч ных , та к  ч т о   есл и  в а м  н жу н о   и з о бр аж ен и е , с о з да н н о е да в н о , т о  сот и т  п омуд а т ь  и  о  так о м  м еотд . Ч то б ы  н а й т и   п о дх я щ е е   п р о и з в ед н и е , до с та о ч н о   н абрат ь  в п ои сково й  с и сетм е  з а п р о с  public domain. В  б и б л и о те к а х   и  хдоу ж ес вт ен н ы х   га л е р я х   ес т ь   к атло г и   общ е д о с тп у н ы х   тв о р ч е с к и х   работ .  В  в а ш е й   м е с тн о й   би б л и о ет к е  м о ж е т  б ы т ь  даж е  с о с ат в л ен н ы й  та м  ж е  к атло г о б щ е д о с т пу н ы х   ф о то г р а ф и й .

Н о   вовс е   н е о б я з а те л ь н о   з алез ат ь   та к   д а л е к о   в   п ро ш лое , п о с к о л ь к у  е с т ь  п р о е к ты , с т а в я щ и е  себ е   ц е л ь ю л ат е с д ь  всеобщ и м  достян и е м  и  н о в ы е  р аб оыт . Т ак , оарг н и з ац и я   Creative  Commons  (http:/ / creativecommons.org) «сремти с я   расш и ри т ь   кру г   п ро и з в ед н и й   и с к су т в а , д о с т уп н ы х   в с е м   д л я   с о в м е с тн о г о   и сп оль з ован и я  и в   к а ч е с тв е   осн ов ы  дл я   н о в ы х   работ »  (р и с .  10).  Хо т я в  2004 го д у  о с н о в н о й  з а д ч е й   сай т а  б ы л о  уб е ди т ь   ух до ж н и к о в   де л и ть с я   свои м и   п р о и з в е де н и я м и ,  в ы н а й де т е   та м   р а б о т ы ,  о п уб л и к о в а н н ы е   н а   ус л о в и я х ли ц ен з и и   Creative  C om m on s. В п р о ч е м ,  п о л ь з уй те с ь и м и   о с то р о ж н о , п о с к о л ь к у  л и ц е н з и я   п р е д ус м а т р и в ае т   р а з л и ч н ы е   ур о в н и ,  и  н е   в с е   м о ж н о   п рост о   та к с т я н ут ь .

р и а Гк ф

а

З а м е ач н и

я

о б а вт о р и с к а  н е Е сл и   рабо т а б с о л ю нт о   н е о б х ид м а л я ) всдег а  м о ж н в ан и е . В  хшду е м етс ь   о  то м , ч то б п и сь м ен н о й   фо р м е п о л ь з о в а ть с я   рабо т

х пр а в   в ы с та в л е н

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а   н а   п р о да ж у , т о  у   а в то р а   (а о  и с п р о с и т ь  р а з р е ш е н и  счалу е  о н  о тв е и т  о тк а з о м ы   п р а в о б л а д те л ь   ад , то л ь к о   п осл е   э то г й  дл я  о г о в о р е н н ы

О тм е ти м , ч т о  з а к о н о да те л ь с тв с о б с вт е н н о с т и  з а п тун ч ес к и е  р а б о т ы  з а щ и щ е н ва х   с  м о м е н т а   с о з ад н и м е с ит л  л и  а в от р  з н а И з чу и т е   з ак он ы в ы  н е  п о л н о с ть ю с я   то й   и л и   и н о й п ри м и т е  и н ы е  м е р ы н и я  р а б о т й , з а щ и щ е н н о те к у е  п о п а с т ь  п о

х

, де й с тв юу щ и  ув е р н ы  р а б о т й

,  н о   в а м   о н а е  у   и з адет е  н а  и с п о л ь з о . П о з а б о ть л   р аз р еш ен и е  в о   в ы   с м о ж ет е х   ц ел й .

г Е ВОС

 ч а щ

м е т с Си

о  о б   и н те л е к атул ь н о й о  и  ч а с т о  м ен яест . Н о в ы е  тв о р ы  з а к о н о м  о б  а в то р с к и х   п ра я  в н е  з а в и с и м о с т и  о т   то г , п о к  к о п и р а й та .

е   в   ваш е й   с рт а н е . Е сл , ч т о  м о ж е т е  в о с п о л ь з о в а ть ,  п о л чу и т е   р аз р еш ен и е  ил . В о с п о л ь з о в а ш и с ь   бе з  р а з р е ш е й  а в то р с к и м  п р а в о м , в ы  р и с д   д су .

г Е ВОС

и и -

Т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLK

а  пксио а  п о т й са у  Creative Commons дн п у тс о а  п о с е р д  а у http:/ / creativecommons.org/ getcontent. zyxwvutsrqponmlkjihgfedcbaZY

Т

о В т  нк ьло ске о  пы н з е ло х  со лыс к  н а ы н е в тс ь л е ти пв ар е  ре сыр у , ы нщ яевсо п е   а но к а з м   о б  аи скро тв х   х ав рп :  й ас т в тс н е г а а  п о и скро  тв а м  па в а р м  СШ А  (www.copyright.gov), й са т   с  то ст ке м   о г с дк а н о   он к а з а   о б  аисорк тв х   ав рп х (http:/ / laws.justice.gc.ca/ en/ C- 42), ци н ар тс а  го н т не т ап о р юб о  Вин а тирбо к ле , па щн я евсо я   но к а з у  о б и скро атв х ав арп х   (www.patent.gov.uk/ copy).

ткидреВ

;  ын авосиран

ткидреВ нарисов ы «Бер го в можн б о дн о г к и   дл работ О   к л и е н ет в р е м я п р е п р о в о ж де н и е к о м ер ч ес к о г н о   бы л я с ь   п о дх я щ и м и д е н ти ч н у

й  илбо

к

zyxwvutsrqponm

: й  обли й   бри з »  -   в п е ч а тл я ю щ и о   с ед л а ь т ,  и м е я   к ап ель к о   в р ем н и . П о  о ц е н к я   э то г о  ди з а й н а  б ы л ы   в  Photoshop. , к о т р ы

к й   п ри ме

у   ат л н т е  Ш и о   п о тр а ч е н

zyxwvutsrqponmlk

р   то г а   и   мн ог

, н а  с о з да н и о  б о л е

,  ч т о о   сво е  г р а ф и е   80  ч а с о в

й   с о гл а с и л с

я   б ы   п л а ти ь   з а   ат к о ,  м о ж н о   то л ь к о   м е ч та ь .  Д л о  п р о ек т а  а н а л о ги ч н о г о  р ез луь ат а   м ож о  б ы  до с ит ч ь  с  п о м о щ ь ю  ф о т о г р а ф и и . П о л ь з у и  и н с тр му е н та м и , уадло с ь   б ы  со з адт ю   а тм о с ф е р у , н е  п о др ы в а я   б ю жд е т .

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

е я ь

, о лт и ч а

,  дг е ь

. П р и да в т й   и   м ел

-

е н й а з Ди

р  Мкй а л  Пи к  (Michael Pick) www.csszengarden.com/019

тЧ о  ат м  в  гбулин м хр е Т о н

е  проснатв

о  н а  дв ум ер но м ш тк ш в ш

е й  пло с к т

И рг а  ум а  и  ас оц и ат вн ы е  о браз ы  -  и м ен о  та к у  М ай кл а  П и к а  рожадю ст я  и еид . В  дан н о м  сул ча е  о н  н ач л  с  р а з м ы ш л е н и й  о б  о бщ есвт н ы х п ар к х  в  Н ь ю - Й о р к е  и  остн я л  н есколь о  фо т гр а фи й . О бр а ыт в а я  и х  в  Adobe Photoshop, о н врду г   з а м е ит л ,  ч т о   п о лчу а ю щ и й с я   р ез л ь уа т т н ап ом и н ае т   м ру а в е й н и к .  Э т о   н ав ел о   ег о   н а м ы сл ь  и з о б р аз и т ь  н е  тр а ди ц и о н н ы й  н аз ем н ы й и zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA п ар к , а  н еку ю  п озд ем н у ю   с ц ен у .

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

П ри н я в  так о е  р е ш е н и е , о н  сат л  дму а т ь  о  то м , ч т о  ещ е  м о ж н о  н а й т и  п о д  з ем л ей . Н алхы н ву ш и й   п от к   образ о в   в до н х о в и л   ег о   н а   с о з а д н и е   с тр а ш н о в а то г , с тр а н н о г , н о  н е  л и ш е н н о г о  с в о е б р а з н о й  к р а с о т ы  ди з а й н а  «Чт о  та м в   г лб уи н е » .

С о з ад н и НИ - ЧА Е ПРИМ

е т р е хм е р н о

инадзоС онремх т

й се ц н

ы

е

Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и го ло н х е Т и с т е у з иь л о пс о  вис р е н мж о

И Н А ЧМ Р П Е

а  н е ьс а л е д . Он я  VRML д у к и н я  в ы ро т но к е х  х яи ц а у тис и  VRML см ы т ы р к  т о и м ы ин д о хс о  н а  ст й а е  www.openvrml.org.

а  с в е  ещ е с т е а в и рз а я . т й а Н и и ц м ар ио ф н ю и м аи тс тк е , OpenVRML,

Е

е нбо р до П е   о  QuickTime  VR мн жо www.apple.com/ quicktime/ qtvr.

о  т а т и чо р п

ь   н а ц и сн а р т

е

й  сцен

ы

zyxwvutsrqponmlkjihg

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

, ч то й  дл я т  н о я у  и

Е ст ь   и   и с к л ю ч ен и я . Н а  о ч ен ь   ран н е й  сиадт и   раз в и т я В сем и рн о й   п а ут и н ы   п ояви лас ь   т е хн о л о г и я   VRML г И Н А Ч М ИР П Е Е (Virtual Reality Modeling Language -  я з ы к  м оедли р о в ан и я в и р а т у л ь н о й   р е а л ь н о с и т ) .  Н а н о с я  о е д т л ь н ы е   о т ч к и   в и н а в о д е лс И ю  и и н е жи в до р п ю ы т ы р  ок т х о т р а  сд н а т в  н а х е  тр у н рме ю к и  гф а р у  дл я  Web щ ея в с о п н  пк ео р т  Web3D Consortium м о де л и р е у м о м   о к р жу е н и ,  р а з р а б о тч и к   м о г   с о з ад т ь (www.web3d.org). zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA р тме х н у ю   м о е дл ь   лд я   р а з м е щ е н и я  н а   веб- сртан и ц е . Дл я  п р о см орт а  так и х  м оелд й   п о с еи т л ю   б ы л  н еобх ди м  п окдлю ч аем ы й   VRML- льмуод . Ч ту ь   п оз ж е   к ом п ан и я  Apple  р а з р а б о та л QuickTime  VR,  к о т р а я   п оз воля до в а те л ь н о с т ь   п ан орам н ы х   ф о то г р а ф и й с м о тр а   р е з л у ь ат а   н а  в е б - с тр а н и ц д и м   п о дк л ю ч а е м ы й   м о л ду ь .

а   п р о гр а м а   «с ш и в аьт е  то ж

у

»  п о с л е .  Д л я   п р о е   б ы л   н ео б х

-

К о н еч н о , тр е мх е р н ы е   ан и м ац и и  и   и г р ы   м о ж н о   п ро с м а тр и в а т ь   н а  в е б - с тр а н и ц е , есл и   э т о   п о дер ж и в а ет с я  с а м и м  б р азу е р о м   и л и  п о дк л ю ч а е м ы м   к  н ем у  м о уд лем ,  к а , н а п р и м е р , Flash,  ShockWave  и   м о лду и   дл др гу и х   и да у о , в и едо -  и  с м е ж н ы х   ф о р м а то в . Н о   ли ш ь   и з р е кд а   н а м  в ы п а д е г л бу и н у   «ронд ю у » дл я  Web  сред р ум е н т о в   д л я   п о де р ж к и   в и р т уа л ь н о п рочи х  с п е ц и а л ь н ы х  п р о г р а м в о браж ен и е   д в ум е р н о й   о б л а с ть ю П ик , к о п н ту ь  п о глбуж е   и  с о з адт к а р ти н у . М о де л и р о в а н и о б л а с ть до в а н и я э то й  те м П о н я тн о боле з н а к о м с тв мн ог м

,  в   к о т р о .  Н е п л о х ы  м о ж е

е   т р е хм е р н о й   в с те у д й   о тп р а в н о т  сат ь  р а з р а б о кт

т   а чд у а   и с л е до в а т у  — без о   в с як и й   р еаль н о ст . Н е  о г р а н и ч и в а ,  м ы   м о ж е м ь  б о л е е   р е а л и с ти ч н у

я

ь  н а х  и н с т

и  и

я  св о ,  к а

е к ю

й   ср ед ы   -   эт о   обш и рн а я   слож н ы е   н а чу н ы е   и с ле й   то ч к о й   д л я   и з чу е н и а  к о м п ь ю те р н ы х  и гр

е   то г ,  к а к   и г р ы   с та н о в я тс и   и   з р и те л ь н о   уб е д и т е л ь н ы м и о  с  п р и н ц и п а м и  и х   п р о е к ти р о в а н и у   н а чу и т ь   ди з а й н е р а .

-

,  ч т о   п о   м ер

я я .

я   вс е

е   р е а л и с ти ч н ы м

, я  м о ж е

т

к и аф Г р

а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

к с т у р ео н

аК В ы ад ю щ а я с си ль н лей п о л ж ен н и м аем

я   гр а фи к о  п о р а ж е . В  те м н ы

и

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а  р а б о т

т   з р и те л

х   глб уи н а о  н аохид ьт с , ч т о   и м е н н

О дн а  и с то л ь к о в  св о е й с о з да т ь З н ач и т то л ь к ч а ет м еб ль

ы ед т а л

ы   «Чт о  та м  в  гблиу н е » та к я  б л а го да р я   п р о р а б о тк е  дает х   м ы  в и ди м   о б ъ е к ты ,  к о т р ы м я  п о д  з ем л ей , хот я  м ы  н е  сраз у  п о о  п о дз е м л ь е   н а м  и   п о к а з ы в а ю т .

з   о б я з а н н о с те й   ди з а й н е р а   -   в у и де т ь   ми р   н а  деат л ь н о , ч то б ы  а дек в а нт о  в о с п р о и з в е с т и   ег о  р а б о т е   и ли , ка к  в  слчуа е  «Чт о  та м   в   глбуи н е» ,   ин еу щ о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  о к р жу а ю щ е й   о б с та н о в к и .

, в ы   до л ж н ы   н а ч у и ьт с я   п он и м ат ь   ед а т л и ,  а  н е о   в и де т ь   и х . Вод х я  в  к о м н а ут , в ы  с р аз у   ж е   з ам е е   о ч е в и дн о е :  сетн ы ,  о к н а   (и л и   и х   о ст ув и е )  и .

Н о  к а к  н асч е ш а яс я  краск и л и   в ы ц в е тш е р ащ ает е  н а в п е ч а лт е н и со т р н а я ? Тесн ая ет е   н е   с р а з котры м  и

т   е тк р с у ы ?  Т р е щ и н ы  в  дер в е ,  о тс л о и в , в ы к р о ш и в ш а я с я  ш кту а р к а ,  рт ес н оту е е   ке ло ст ?  А   м н о г о  л и   в н и м а н и я  в ы   о б  све т   и  тен ь ? Ч т о  м о ж н о   ск аз ат ь   о б   общ е м и  о т  к о м н аыт ? О н а  м р ач н ая ? С влаеят ? П р о ? О вт еч а я   н а  э т и  в о п р о с ы , в ы  р а с к р о у   бр о саю щ и ес я   в   гл а з а   де а т л и ,  б л а го д р я  в о з н и к а е т  о щ ущ е н и е   р е а л ь н о с ти .

В  ди з а й н е   «Чт о  та м   в  гблуи н е » э т и  деатл в с ю уд .  В  ч а с нт о с ит ,  э т о   м ру а в ь и ,  к о т р ы ви л и  ав от р а   п ер в о н ач ль н о   (р и с . 1).

ао С з д и н ре с а о т н л ь И н е тр с н о   о мт е и ьт т и  вовс е  н е  н жун и сп о ль з о в ан н ы в еш ь   ф о т р е а л и с ти ч н ы м и р еа л ь н о с т и   и з о б р аж ен н о г

е о уе щ н и и

и   в и дн ы  п о е   и   в о дн х о

си Р

. 1 •   Мрша ющиру и

е  мьвару

и  (иине озбжра

е  скгел

а  ооне л тесв

я

)

,  ч т о   дл а  фо т гр а фи ч е с к а е  в  р або т

Н ж ун о , чотб ы   с ам а  гр афи к р еа л ь н о с т и  и з о бр аж ен н о г н и я , к о тр ы е  н е  п рост о  к о п и рюу ю т   м ы с л ен н ы е   ас о ц и ац и

я   с о з ад н и

я   р е а л и с ит ч н о с

я  то ч н о с ть е  «Чт о  та м  в  гблиу н е» ,  ет м   н е   м ен е о   о ч ен ь  с и л ь н о а   п р о и з в о ид л . П ы атяс

ь  созатд т  п р и р о уд

, и м ей т

е   в  ви д

. О б р а з ы ,  н е  н а з о

е   о щ ущ е н и . а   в п е ч л а тн и ь   и з о бр аж е , а   п ажродбу у   ю с ул е д щ е

, е е :

+   о бращ ай т е  п о в ы ш е н н о е  в н и м а н и е  н а  к р ая . Э т а  тем а рт д н у о   ад е с т я   н ач и н аю щ и м   до у х ж н и к а м   н а  з а н я ти я х   п о   ри сован и ю   ч ело в еч с к и х   ф и г ур .  С н ач л а п ы та ю тс я   п рост о   н ари соват ь   ли н и ю ,  к   п р и м е р у , ж ен с к о й  р ук и . Н о  о ч е н ь  б ы с тр о  в ы я с н я е тс я , ч т о  н е в с е   та к   п р о с т о .  О б р а б о т к а   крае в   п о дч е р к и в а е т о бъ ем н о ст ь   о ч е р та н и й ,  и гр у   св ет а   и   те н и ,  р а з л и ч и я   м еж д у   п о з и ти в н ы м   и   н е г а ти в н ы м   п р о с тр а н си Р . 2 •   ар К я  -   эт о  н е  порст о  чи к те с тв о м . И м е н н о  э т о  и  в о с п р и н и м а е тс я  н а м и  к а к  л и в т а  рт ь л узе е  ирг ы  стев а  и  тени , лин н и я   (р и с . 2); zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA (ииен зобжра е  скегл а  оонел тсев )

е  ли н и  и  пв снтар о

. Он

и  ос ютузбра

я а

о С з д на и

е  тр е хм е р н о

й  с цен

+   н е  з а б ы в а й т е  о  ф о р м е . О гл я ди те с т е  п р е дм т , л ю б о й   п р е дм е т и   о п р едли т е   ег о   ф о р м у в ы  о б н а р жу и т е  м н о ж е с тв важ н о . Н е л ь з я  с к а з аьт , ч т о к р ж у н о с ть .  К о н е ч н о , в г ду и . Н о  м о гу т  б ы т ь  и  др гуи ли ч аю т   е е  о т  др гуи х  ч а ш е к

си Р

. 3 •  р у стке Т ощ у и н е

а  бкду и  (ииен зобжра

е  зме л

си Р е б ни у л г о н е л ст в

. 4 •   н е ч О » сеадоз

и  уинелварп

я  сор офвет е  скгел

ь  тме яан

, ма н ч ар

я  чст а

т  ощ у ине

м  сеадоз )

а он ел оств

ь  рбота я  (ииен зобжра

е  тениогят

ы  «Чт

•   р у к е ст л ен и е  о в   р або т ф и ю   к бд у срт и т  в со в ер ш ен н о п р ме д а т т

о  та м  в е  скгел а

ь   вокру г   и  н а й ди . Т щ а те л ь н о   о с м о тр и т е  б о л ь ш и н с тв е   о б ъ е к то в  р а з н ы х  ф о р м , э т о  о ч е н ь  ч а ш к а  -   э т о  в сег о  л и ш ь й  ес т ь   и  о к р жу н о с ти , и е  ф о р м ы , к о т р ы е  о т ;

а  и з ображ ен и я  созаед т  реали ст ч н о е  пва стрде  квачсте е  п р емд отв . Ч то б ы  н ар и со в ат ь  п оч в у е   «Чт о  та м   в   билгу н е» ,  П и к  слае д л   фо т гр а и   уп р а в л е н и я   с в е то ф о р о м   н а   ьХ ю с о т н  Н ь ю - Й о р к е . Инетр с н о , ч т о  трекуст а  бк д у и  ,  к аз ло с ь   б ы ,  н е   о тн о с я щ е го с я   к  дел у , -   н авоид т  н а  м ы с л и  о  п о ч в е  (ри с . 3);

+   г лб у и н а  -   в о т  ч т о н о с ит , даж е   в  дв му е р н о о с ь   х   о п р е дл я т к аль н о е  н а п р а в л е н и е ид т   ос ь  z. И м е н н п р и ят е  гблиу н ы с в ое т м  и  тен ь ю  к раев н ы е  о бласт и  в ы гляд ст и  з е м л и ;

)

.  В о о  не

ы

 дае

т  н а с то ящ е

е  о щ ущ е н и

е  о бъ ем .  В  гео м ерт и   г о р и з о н та л ь н о е ,  а   о с ь   у   -   в ер ит . В  тр е ть м   и з м ер н и и  п р о х о  с  ось ю   z и  св яз ан а  гблиу н а .  Всо  в  двму ер н о м  ди з а й н е  оп релдсят . Н а  р и с . 2 в и дн о , ч т о  бо ле е  тем т  ка к  углбу ен и я   н а  п о в е р нх о

+   важ н а   и  и м и та ц и я  тя ж е с ти .  В  дв ум е р н о м   ди з а й н э то т  э ф е к т  до сит гаест я   з а  сч е т   з р и те л ь н о й  тяж е ло в есн о ст и  о б р а з о в . К  м о де л и р еу м о м у   о к р жу е н и п ри м ен и м ы   т е   ж е   п ри н ц и п ы , н о  н е о б х ди м о   ещ к а о е- т о   в и з ау л ь н о е   ку а з а н и е   н а   то ,  ч т о   п р е дм е с к л о н я е тс я   п о д   свое й   тя ж е с ть ю   к  н изш е й   то ч к и з о бр аж ен и я .  С а м а я   те м н а я ,  о к р а ш е н н а я  с п л о ш н ы м  ц в е то м  о б л а с т ь   в  ди з а й н е  «Чт о  та м  в  гблуи н е н а о х д и ст я   в   н и жн е й   ч аст и   п о дз е м н о й   сц ен ы , э т с у гб л я е т  о щ ущ е н и е  тя г о те н и я  (р и с . 4).

си Р ся те ж а К

. 5 •   ине ж арбоз И , чт о  кост

е  о ске ч во ле ч ь е а  од а лб

й  бовцре т  мсоа

й  кост е  скгел

й  (иине ж аброз

и  по д  зме йл а о н е л  от е вс

. )

П р и  с о з да н и и  п р едс ат в л ен и д в ум е р н о й   с тр а н и ц с р едт в   с о з ад е т   илю зи В   к о н ет к с е   в и з ау л ь н о г сат ь   к а к  ха р к те р н ы п ри з ван н ы й  с о з да т с я  н а  ф о н е  о к р жу а ю щ е г в о  в н и м а н и е  с л еюду щ и •   илю зи с р ут ы

г   ЧАНИ Е М ПРИ то Х д и з йа н ли ч я ын

Е я  мса ы о  пер ыквсюатя е  с  тем

я  опренлид е  в  чме - т , с взянаы х  ояслар т

х  з н а и я

, тверодс т

и  и ме объ , н о  мд еж

а  в  мкиме т а у  ним и  ест

 э т и  пионтя

я  прим сеюнят

-

-

я е ю е т и » о

я  тр е мх е р н ы х   о б ъ е к то в  н а е   ком би н ац и я  о п и с а н н ы х   вы ш е ю .zyxwvutsrqponmlkjihgfedcbaZYXW  маыс о   ди з а й н й   п ри з н а ь   в п е ч а лт е н и е

а   м ас

у   можн

, бтду

о   о б ъ е к ат о  о н   в ы дел я т . П р и м и т

к  тр е мх е р н о г

о   е г о   п р о с тр а н с тв а е  п р и н ц и п ы и   с о з ад е с т

о   оп и

, е

: я   з а   сч е

т   ц в ет

а   и  те к

-

и   о бъ ем н о ст

и   важ н

ы   дл и н а

,

.

М ас а  -   э т о   р ез луь ат т   с о ч е та н и н ы х  э л е м е н то в , в  р ез луь ат е   ч ег . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA р е а л и с ти ч н ы е  ч е р т ы   (р и с . 5). , ак

и

;

+   д л я   с о з да н и я  илю зи ш и ри н а  и   глбуи н а

е  и ь  и   рза я  в   рза

я   тв е р д о с т

-

м   о к р жу е н и

я   п од бн ы о  о б ъ е к

х   в и з ау л ь т   п р и о б р е та

т

ри а к Г ф

а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

И , н а к о н е ц п о м е с ти р е а л и с ти ч н о с т обра з  к р о т с от в е р н о с т

, есл и   в з ят ь  к а к о й - т ь   ег о   в   с м о д е л и р о в а н н у и   може т   ус и л и т ь с я а  в селя т  в  з р и те л и   о с ат л ь н о й   ч аст

а Р т об

а с ру о в м н я

Е щ е   о дн с та л к и в а ю тс я в и д у  оедтль н ы н е й   с та н о в и тс н о м  з да н и Пр л я е тс с рт а н с вт ч аю т с р ед

а   с то р о н а

о  п р и р о дн ы ю   с р еу д .  В   да н н о я  ж тку о в а то и  ди з а й н

и

,  с   к о т р о й ,  -   э т о   р а б о т а  с е  сло и  в  п р о с рт а н с вт е я   п о н я тн о й , ес л . К аж ыд й   э та ж  -   э т

и  п р о г р а м и р о в а н и я   п р о р а б о тк е  и г р ы ,  к а к   а р хи те к то р ы   п о хд я

й   о б ъ ек т  и , т о   э ф е к т м   с лч у а е е   ч ву с т о   до а   (р и с . 6).

  в е б - ди з а й н е р   ур о в н я м и

ы   р е дк . К о н ц е п ц и

и   всп ом н и т о   ру о в е н ь

я  ур о в ь   о б   о фи с

. Д и з а й н е р т   к  п р о е к ти р о в а н и

,  ди з а й н в  и г р  м ы  м о ж е е   п р и   м о де л и р о в а н и :

•   к а ж ды п р о с тр а н с тв е н н о г

й   ру о в е н

-

.

е  в н и м а н и е  уед х   ур о в н е й   в   п ро ы  и г р  ч ас т о  с п е ц и а л ь н о  и з у ы   и   ди з а й н е р ы   о к р уж а ю щ е ю  з да н и й . а  о к р жу а ю щ е м  п о з а и м с тв о а т

й   с р ед

у   п о в е р н х о с тя м

й

ы   и  у  р а з

н   с   то ч к

и  и м е ю тс

. 6  4 утковата Ж

с Ри

. 7  4-  Верхни

м не в  уро

м н ай з ди

. 8 4  Средни

й  уровен

ь  -  трав

я  л и н и й

: оба р

з т о  кр

а

а  являетс

я еб  н

о

, ; Рис

н  в  о б м   с в яз а н  с

г И Н А Ч М И Р ЕП (Цон тев

я  есет в н н ы

ь т с я ально  ре

о

и   з р ен и я  и   м а с ш ат б

с Ри

е

и   м н о г ру о в н е в о г

ь   ну и к а л е о   р асп о л ж ен и

-

ь   с л юе уд щ и

•   к а ж ды й   ру о в е н ь , те м  н е  м ен е , и н те г р и р о в а щ у ю   к а р ти н у   и   ет м   и л и   и н ы м   сп ос бо ру о в н я м и   вы ш е   и  н и ж е  его ;

4  в  ди з а й н

-

и  и г р  о г р о м н о

е   а р хи т е к т ур н ы

И з  а р их те к ру ы р а б о чт и к о и ед ,  в а ж н ы п р о с рт а н с вт а

•   м еж д о х ыд

о я  в

.  И м е ю тс

е  п ер

ени а  (изображ

е  слегл

а етлено  осв

) zyxwvut

Е й н ва и р а

т  рси

. 7 и  8 см . н а е к д а вл к

.

-

; е  всдег

а   ес т

ь  ф о к су н а

я   от ч к а

;

•   ка к  уж е   о мт еч а л о с ь ,  в а ж н о   п е р ад т ь   и е д ю   ят г о е н и я . Чел о в е к zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  тае,ид жо  ч т о   н а  п р е дм е т ы   ед й с в т е у т си ла   ят ж е с ит . В  р а б о т е   «Чт о  та м  в  гблиу н е н ы х   ру о в н я :  н еб о   (р и с о бласт ь   (р и с . 9). И з чу а л о щ а ю тс о с о б е н н о с ти ру о в н е Ф о к с ун о

» ест . 7), тр а в

ь  тр и  ч етк о   в ы р аж ен а   (р и с . 8)  и  п о дз е м н а

я

я  э т и  и з о б р а ж е н и я , м о ж н о  п о н я ть , ка к  и ед и  в о п я   н а   п р а к ит к е .  У   к аж од г о   ур о в н я   ес т ь   с в о и .  К а ж ды й   ур о в е н ь   о р ган и ч н о   св яз а н  с м   вы ш е   (р и с .  10)  и   ур о в н е м   ниж е   (р и с .  11). с Ри . 9  4 ня Ниж я т ас  ч ць рани  ст ы  занят а ы н  подзем м не в  уро м е  слжуи т   п о дз е м л ь е .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDC й  то ч к о й  в  да н н о м  счлуа

рУ о к

. 10 •   о хер П е  винм еа

си Р т и а рб О

си Р з а  се ч о е рн к о н е л т ос е в

. 11 •   о хер П т  понпегс т й  трваы

д  о т  вген рх , ка к  нбе

д  о т  твра о  нин а стр а

у  уро вню т  свокз

ы  к  пмозед нм

у  уровн х  цо тев и  (ииен зобжра

я  тме ын х  и з  зме л

, пющасорт и

. ь  тв ар

И н те р с н о ,  ч т о   п о дз е м н ы н и е  тя го те н и я  з а  сч е н ост и   и   боле е   те м н о г н и м   и  с р е дн и м   ур о в н я м и у

ю  дс теаиог в  и   ине изобжра

я я е  с еклг

а

)

И Н Р ПМ Ч А Е он тевЦ

о  к  смендр о  пеаывдялорг

т  рси

. 10 и  11 см . н а е к д а вл к

.

е Н р а л и с т ын ч в с м оед л и р о ва н рп с о т а н в

. 12 •  ч р По в в тс н а р  птс о р

а т  ф ши р о н й а з и д

а е у в тс б сос п

т  ег о и ц а р г е  ит н

и

Пи с ы ло

а

с Ри

. 13 •и н а в о з ь л о п с И в о н а в о р и  сл е дм о

т к е ъбо

е  тго

ы  в с к е т н о к

о  ж е а т  це в

, кы р о т о

й с т е я н м е пи р

я

ы

к  так ж

е   н е с л чу а й н к  совп аде о   с о з ад е

. О дн а к й   а б с тр а к тн ы

,  н и   етк с ,  н и   с ы л к и о  П и к  п р и м е н и л  та е   о б ъ ек т ы   ка и   в  ди з а й н .

е   н а   те к с т   з аго ло в к а   (р и с .  12). р   в з я л   н е к о то р ы й   ш ри ф т   и   со л   е г о .  П о ц а р а п а н н ы е   и   и сп ач е   с о ч е та ю тс я   с  п р о ч е й   гр афи к о й

о   вы бра л   ц в е то в у т   с  боле е  я р к и м и  ч а с тя м т   о щ ущ е н и е   о св ещ ен н о ст т   с ы лк и   с   д р уг и м и   ч а с тя м

ю   га м у и  ф и гру и   и  б о л е и   с тр а н и ц

о   и  то , ч т о   к  с с ы л к а м   н е  п р и м е н я ю тс е   ц в е то в ы е   э ф е к ты .  П р и   н а в е д н и и   н а  ссы лк у   о н а  л и ш ь   п о д ч е р к и в а е тс я т   п о яв лен и ю  л и ш н и х   ас оц и ац и й

, пе а гм о

т т и ч вю л к

ы н ч иь т с и л а е  нр е

е

.  Ц в е ы  к р о е   ет с

я  н и и   к ур с о р .  Э т о  п р е .

е   ц в еат ь   дл я   с ы л о к   др гу и а   и л и   з ел н ы й   ц в е т   тр а в ы , п о с к о л ь к у   п р и да л   б ы   п од е   е м у   к а ч е с вт а .

А  та к  ц е л о с тн о с т

а  н е   н а р шу а е тс я

ь   ди з а й н

и т р е хм е р н о с т

т ы

и   б ы   П и к   р еш и л   в з ят ,  го лбу й   ц в е т   н еб т о  р а з р уш и л   б ы  и л ю з и ю з ем н о м у   ру о в н ю   н е с в о й с тв е н н ы

В о бщ е   го в о р я , и м е н н о  э к с п е р и м е н та л ь н а сай т а  CSS Zen G arden п о з в о л и л а   и с л е до в а т т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н о ст и  м о де л и р о в а н и я  п о дз е м н о г о  п р о с рт а н с вт а к о  о б л а д я   и з о б р е та л ь н ы м   ум о м   и  в н и м а н и е та л я м   М ай кл а   П и ка ,  м о ж н о   бы л о   с о з да т ун и к а л ь н ы й  ди з а й н . й е сн е ц

-

е

Е сл ск аж ем

р оУ к

-

м

ат . Э т н о   ув я з ы в а е (р и с .  13). Н е с л чу а й н каки мы ш п я ст в е у

т   о щ ущ е , м а с и в ю   с  в ерх

е обр а з

О б р а ти т е   вн и м ан и В и дн о ,  ч т о   д и з а й н е з н а те л ь н о   п о дп о р ти кан н ы е  б ку в ы   л уч ш н а   с тр а н и ц е . с Ри

и zyxwvutsrqpon

й   ру о в е н ь   с о з ад е т  с в о е й  б о л ь ш е й   в ы с о ты о   ц в ет а   -   п о   ср ав н ен и .

Вс е   м ы   з н а е м , ч т о   н и  з а го л в о к п о д  з е м л е й  н е  сщу е с тв юу т к у ю   те н х и к у ,  п р и   к о т р о ж ст у я   ес т в ен н о   и н те г р и р о в а н н ы м

Е й н ва и р а

и т р е хм е р н о с т

а , , -

.

и я   п ри род ь   воз мож

а

. Т о л ь м  к  де ь   та к о й

.•  • 

•  • 

Дв

ы в Жи

. 

а а н а ое к

: ' . 

•

' 

:

si6, с . 180

, с . 174

м  ил и м  мы в т р е

, с . 194

д ж Жа

а  ки вор

, с . 200

и Тп о г р аф ис р е В

а то ло З

я  они д

я а н и сд е р е

, с . 186

, с . 208

я

он ев ст Е е   ро п щ у и н е е  фор м  общ ине я  в о м но г м   о н б за я о   о н м т а пч е у   с о л ву .  мИ не о и ка т м  с пос б м  чщ а е  вс ег о  происдх т  об м е н  имеяд и , ос ипютаыв я  с обияыт , чв сту а и  дигру е  чисек човл е   и н е я п л вр о . Л юб о й  ю щу и к т пра й   в еб - и д й з а не р   те з а н , т ч о  ти фирпоаг я   в  Web  ен с опжря а  с  сез рь мы н и  тномдрясу т и . Н о  э т о  н е  дн жол о  оас т т а ив л н ь   ав с   н а  пту и   с оверш евнсоиат я с во е й  тикн хе и  и  иинаовсдел я  тноехлигй , с по м о щ ь ю   ок тр ы х   мн ож о   уд о в л е то р и т ь с ра т ь  к  форм е , сюил т , тщол ин е  и  гу ирнта р е  шво т фир . Эт а  гв а л а  бед у т  пщосяв не а  при ем а , сын азяв м  с  тсимк порфга и  ос об ен м я осн т и  дийзан .

р ай Р

йи енз а Д

н ми С

е  (Ryan Sims)

www.csszengarden.com/085

вД а  онеак Пр о с т

а т и п о гр а ф

а и ев д

т к е т о мк н ф э

у идз а й н

у zyxwvu

х  океа И з му и т е л ь н а я  ц в е то в а я  п а л и тр а  «Дву н ов »  о б яз а н а   свои м   п р о и с о х ж де н и е м   фо т гр а фи и ,  к о т р у ю   Р ай а н  С и м е   е лс а д л   в  Юж н о й   К ал и фо р н и и . С п о к о й н ы е , ка к  са м  Т и х й о к еан ,  ц в е т а   и   образ ы   с о з да ю т   л е гк и й   кон zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA рт а с , к о т р ы й  п р и в л е к а е т  в з гл я д   з р и те л я .

Kivt t , ;  y:- u  to  I'fUix .эк г

з  rnecntat

important  ie::oi\ s  of  trie m aster;,  tttrjir,  t o l a r i t y .  L*arn  t o use  to*  (ye

Р або т а  «Дв а  окаен » н е  к аж сет я  к р и ч а щ е й  и л и So what is thts Atl About? р ез к о й . Ч а с ти ч н о  э т о  о щ ущ е н и е  уто н ч е н н о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA tt,4t« r. swav i* nee-Ho t« ^5 ст и  со з адест я  з а  сч е т  п р о с то ы  ди з а й н а . С и м е н е   аст л  з л о пу о тр е б л я т ь   и з о б р аж ен и ям и , ц в е та м и  и  ш р и ф та м и , а  п о с л еод в а л   фи ло со фи и Х е м и н г уэ я :  «Убер и т е   в с е   в ы ч ру н о е » .  О н   с до у в л ь с вт и е м   н а б л ю да л , к а к  ди з а й н  о ж и в а *; have been aemonrUae ta by structurut: ard. fw f rj rrt«* yet t> ' make itotr mak r Isn, Owe е т   п о   м ер е   то г ,  к а к  л и ш н е е   а д л у я ес т ,  а  н е до б а в л я е с т . rfifc j r t r t t s .  Tht  Zen  > ii(cten ь т  

t o  exc it e,

»e ,  and cficourage  p ar t ic ip at ion.  To begin, vteuu

of  4 w  «  b M f t g ' St ilsm  tc. tfic. Nrt. Oc K Ir e  on  « 4 ttnt n y t e fl4W=t wild  Lhij veiy  (,.sg^.  Th»

te  romar.r  tn«  SWTI( , O»  only  thine  f w t n a e d t r f f t t B t t t m a l  .с :;. ; Л в

.   Ґ»s.  i f * ,

c^^mpU!te and  total tflntnH ovci  trm  ityto  ol nt.  "fi4  only way  this can  be

i i t i r ^  what ft  can  t r ^ j f  be, one*  the  re

HTML. Thtim«ys«e«i-*au^t;tne*t fir.it if } t h i j  «ay  t r t f o if c . b u l  fc r  ечикюг o If am  т ч г я , and use, 4 w  s*:n;>i- i

En limited  t o  wtcWyotwpot  t«d  ttemerrti  «i y The  с м   ^en Carder,  b  about  f u n c t io n a, pr* - ,tical CSS of  t iiet Jiowi«ig p uWic .  The Wily  ton have  is  t hat   yvut  CiZ  v^r i a t e s .

оС г л а ш е н и Щ

я  о  ш ат р и ф

С о гл а ш е н и

  MozillazyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

х

я о т ш р аи ф

Т и п о гр афи я   -   э т о   ос ба я   област ди з а й н е р ы   вс ю   ж и з н ь   з а н и м а ю тс п р и м ен ен и е м   и  с о з да н и е м   ш р и ф то в п о хд а   к   р а з р а б о тк е   э ф е к тн о г све,ту   н о   ес т ь   в а ж н ы е   с о гл а ш е н и я ж е н  з н а т ь   к а ж ды й   ди з а й н е р .

х ь   ди з а й н а я   и с л е до в а н и е м . И  хот о   ш р и фт ,  о   к о т р ы

T h i s  is  n o r m a lzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA T h i s  i s  b o l d T h i s  i s  b o l d  a n d  t h i s  i s  b o l d e r . T h i s  i s  b o l d  a n d  t h i s  i s  l i g h t e r .

T h i s  i s  a  f o n t  w e i g h t  o f  1 0 0 .

Ф рм о

T h i s  i s  a  f o n t  w e i g h t  o f  2 0 0 .

а мроФ та к и к е гл

T h i s  i s  a  f o n t  w e i g h t  of  4 0 0 . T h i s  is  a  f o n t  w e i g h t  of  5 0 0 .

T h i s  i s  a  f o n t  w e i g h t  o f  7 0 0 .

T h i s  i s  a  f o n t  w e i g h t  o f  9 0 0 .

!~Done

ь  вес м

c e nt ury  c o nde ns e d

с Ри т иф рш

  -   эт о   общ и и   ш р и ф та

е ,

я   е ди н о г а   н е   с щу е х   од л

о -

zyxwvutsrqponmlkjihgfedcbaZY й   те р м и н

,  в к л ю ч а ю щ и ,  к а к   н а с ы щ е н н о с т ь

й ,

. т -

Р а з м у е ст я ,  ут т   п о л н о   н ю ан сов , и   с а м ы й   важ н ы й  и з н и х   со ти т   в  то м , ч т о   н е  в о   все х   ш р и ф т а х   ес т ь   п р о м е ж тоу ч н ы е   в а р и а н ты , с о гл а с юу щ и е с я   с  тр е б о в а н и я м и  CSS (р и с .  1). Бо ле е  то г , даж е   ес л и  ш р и ф т   о блад е т   в а р и а н то м   с   н уж н о й   н а с ы щ е н н о с ть ю ,  б р азу е р  н е в с ед г а   см о ж е т   е г о   о т б р а з и ть .

T h i s  i s  a  f o n t  w e i g h t  o f  8 0 0 .

х е т с о н  нщ еы с а , чт о  в  ег о  сх а л и я к ь тл о о ы н ь  нл ма р о

 шта ифр е   ха р а к т е р и с т и к ь  и  н а к л о н

а

.  М н о г и

тьс онещН ыас  шта ифр   -   э т о  м ер а   то л щ и н ы   о ед т л ь н ы х   л и те р .  В  CSS э то й   ах р к те р и с ти к е   с о вт е с вт у с в о й с вт о   f o n t - w e i g h t .  В  та б л .  1 о п и с а н  с м ы с л   раз ли чн ы х   з н ач ен и й  э то г о   с в о й с вт а .

T h i s  i s  a  f o n t  w e i g h t  o f  6 0 0 .

.си Р 1 •  д г Ко а ы н ч о т у  пжм ое р е з у арб р с т е а пт ы я т а л се д н о т с ча о е д ж  ву н ы сн ь т а в и ч и н оа р г ы нри ж у лоп м е и н а т р е ч  на

а т фир ш

zyxwvutsrqpon

й  нт е ,

, м  ил и

Н а   п р а к ти к е   можн о   в с ед г ч и и   п о  к р а й н е й  м ер е  дв у х ( n o r m a l  и  b o l d ) .  Н а  р и с да н н о м   с лч у а е   Mozilla,  в ы в о ди те л ь н о   ш р и ф та м и  р а з н о й ст и  о к а з ы в а е тс я , ч т о   н а с ы щ е н н о с те жи рн а я  и  н о р м а л ь н а я .

а   бы т ь   ув е р е н н ы   в и до в   н а ч е р та н и .  1 п о к а з а н о т   ет к с  н а с ы щ е н н о с ти

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

а ,  в -

П о д  кме г л  шта ифр  п о н и м а ест я  ш и р и н а  л и те р , соасвт л я ю щ и х   э т о т   ш р и ф т .  В с р т е ч а я   з у к о е   (condensed), c e n t u r y  n o r m a l н орм аль н о е  и  ш и р о к о е  (expanded)  н а ч ер атн и е  (р и с . 2). c e n t u r y  e x p a n d e d В  CSS дл я   э то й   ахр к те р и с ти к и   е с т ь   с в о й с тв о   fo n t s t r e t c h .  О дн а к о  о н о  н е  и с п о л ь з еутс я , п о т м у  ч т о  н и о ди н   и з   р а с п р о с тр а н е н н ы х   б р а зу е р о в   ег о   н е   п о де р . 2 4- й и  Узк , нольны ам р й   и и к шо р и й  вариант ы   начертани я ж и в ает . а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Таблиц

и п Т о рг ф а

я

а  1 •т ннос ещ  ы Нас

и то  шиф р

в  в  CSSzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

font- weight:  normal

е а ж а рбо т О

font—weight:  bold

е а ж а рбо т О то ф иш р

font- weight:  (300)

е а ж а рб о т О д о  сгм о а е а ж а рбо т О ц а зб а е д уб жу

font- weight:  bolder

с ве т у

е  уж т с ь т  ка з а е  рн в а

т с о н щ ыес а Н

т  в о н р и  пж у ло е и н а т р не ч а

м и н а т нр е ч а е  ме ж о

У  св о й свт ч ен и я

тьсюаонр К м еж д У   раз н ы с щ у е с вт е н н о и м ею

. Обн ч ы , че м   р п

:

•

•

"

•

' •

'

'

т  в и н а тр не ч а ь т  шф и р

а е я л в  са тс о

т н ва и р а т т шф и р а  с о тк а е  l i g h t e r  н е т е у в тс дй е ь т  шф и р

'

'

•

о е бл о

.

. Есл ь с т е н  оа тс

я  о т г о кс ь л е  рт и д о

, пр

и  л аш к

е   о т  смг оа

я ы р о т о нк е

х

о  тог кн

о  (100)

. Нам еи р п а , >л !С и ф и ш р т  в а н аз  ук о  b o l d e r , т о о к та й  эн м е л т ь го кс ь л е  рт и до о т н ме  эл а  и  та к я  бе з и н е м з и я zyxwvutsrqponmlkjih

• '

, е ч м ео н а во д е лс уа н е и н зе ч а н

и  400 и  700, н о  дл

, е ч м ео н а во д е  улс а н и  эго т о ц а  аз б а тс о н щ ныес а ь с т е н оа тс

е м о л ст е в

т  300, т о о н е  влс и ч ы й ю ь тс но н щ ысе а , нтс о н щ ыес а

а с т е у д е нл с а

.

ю тс о н  нщ ыес а

т тс о н нщ ысе а

м  и н а тре ч ан

•

, нк ь ло кс е

. Есл

е  l i g h t e r е д у б и тс о нн щ ыес а ь го кс ь  рл е т и до я  бе з и н е  мн зе и я

о т н м е  л э

:

)  -   м о д и ф и к а ц и я   о т  крус и в а

я   м о ди и   «за ; я   п рям ог

,  п о с к о л ь к

и о д е лс уа н

т  рн в а

в  жна о  200, л с е о - н м эе л

и к ь тло а  рн в а

я о а  100,;

а   : zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP

 та ифрш   н а з ы в а е тс и   и  то л с ты м и   ли н и ям х   ш р и ф то в   эт и   п роп орц и ,  н о  ест ь   и  та к и е   ш р и ф ты т   п о с т ян н у ю   то л щ и н у .

ын о бныч е з у аб р ын

й   ли

и   ол ны к а о   и м  и  вс яетозу пьл р   с ы м е и ру т й  шт ирф . Рцинз а

й   нр и в а т  еог а  чста

т   о н ре тк г . Есл , промаг м н о  знм ате

о  ша т фир и  ж е  тоакг о  мицроав ифод а  оормст

о  втн аир у  гз а л

, т о  безуар а   тен в   об ыч у  дизйанер

р , т о .

о

а о   п о в то р я е т м   осн овн ы х т  те р м и н   italic у  oblique.

,  а   п р о с т , н о  с  н а к л о н о и  уп о тр е б л я ю е  и м е ст я   в  в и д

ь т шри ф у   то н к и м

и  но н ь лм рао

т  в и н а т р не ч а

т  шф и р

у и н зе ч а н

о е у в тс т се в т о я  с  600

, нк ь ло кс е о е бл о е м о н  нщ ысе а , а  в л и  ст е  л д я т н м е эл а  s t r o n g вр т у н я  ещ е е нр  жи о н . Еде в тс н и е и н е  ич ю л кс е  -  д г о к а  900; в  эо т м а ч  су л е  b o l d e r  н е т е у в  дтсй е , нтс о н щ ыес а т  шф и р е йы нри  пж у ло

у   он

а   f o n t - s t y l e  ест ь  ч е ты р е  в о з м о ж н ы х   зн а :  n o r m a l , i t a l i c ,  o b l i q u e  и   i n h e r i t .

т н о р а с К тн

т м о  чв лс и

т с ь т а н и  нч а

т  бе л о е  тиойнк о  (900)

•   Italic  (круси в )  -   с п е ц и а л ь н о   р а з р а б о та н н а фи к ац и я  п р ям о г о   ш р и фт а   с  до п о л н и те л ь н ы м в и шт у к а м и » ,  ка к  п р и   р ку о п и с н о м   н а ч е р та н и • f  Oblique  (н а к л о н н ы й ш р и ф та ,  о тл и ч а ю щ а я с р а з р а б о та н а   н е   сп ец и аль н о р и сну о к   п р ям о г о   ш р и ф та ш т р и ох в .  М н о ги е   лю д та м ,  д г е   н а  с а м о м   е лд

е у в т с . Ст е в т о

г   И Н А Ч МИЕ Р П Е й   ш р и фт а   я в л я е ст я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   ,но ак л у   CSS  f o n t - s t y l e .  С щу е л Ес и   н а  вш ае м  комре ют пь е  уеонлваст н   и р н ы й п о ж лу , курс и в -

й  хар к етр и с ит к о т  дв а   в и д

т  шф и р т   ф ши р

т с о н щ ы ес а н е у в т щс е у с т о и н зе ч а н

т   с в о й с вт а   н ак лон а

м и н а тр не ч а

о гонри  ж

:

Е щ е  о дн о о н   с о вт е с у

т  в о н ь л нм ар о

в о н р и  пж у ло

f o n t - w e i g h t :  l i g h t e r  е а ж а р б о т О

f o n t - w e i g h t :  i n h e r i t 

т  шф и р

-

а я   с о тн о ш е н и и   о дн о й   л и те р ы и   м е н я ю тс я   в ес ь м ,  дг е   вс е   л и н и

В  с атн да р нт о м   п о л и гр а фи ч ес к о м   ди з а й н е   п р и н ят о  и с п оль з оват ь   о ди н   ш ри ф т   дл я   з а г о л о в к о в ,  а   др гу о й дл я   о с н о в н о г о   ет к с а .  К а к  п р а в и л о ,  в  з а го л в к а х   п ри м е н я е тс я   ш ри ф т   бе з   з асеч к ,  п о с к о л ь к у   о к р уг л ы е обы ч н о   с л а б о к н рт а с н ы е   л и те р ы   п р и в лек аю т   боль ш

е . а и

г   И Н А Ч МИ Е Р П   -

Е

У  ми г о н сх т е а в ы д са л к е яи н е л т а ч  ве п , т ч о  в  Web дл е о и о  отс б т м ярп ы но ж о л о п в и пт о р м м оо з а рб : н а н  эа р к е ш ч лу е я д я вл г ы т т ф и шр ы  бе з к е ч ес а з . Н о  ср о п ы яс т ю а ж л по д р . Пе н б о р д о е  о б о тэ й  пмк ие л о е н мжо о т па т и ч о р ь  н а ц си н а р т е   www.digitalweb.com/news/2004/06/serif_vs_sanserif.

, е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Ш т ри ф

ы  в  «Дву

х  о ке а н х

»zyxwvutsrqponm

вн и м ан и я .  Ш р и ф т ы  с  з а с е ч к а м и   до л г о е   в р ем я   с ч и ат ли с ь   п р е дп о ч ти те л ь н ы м и   дл я   о с н о в н о г о  тек сат ,  о с бен н о  есл и  о н  с о с т я л  и з  дл и н н ы х   ф р а г м е н то в . Б о л ь ш и н с тв о  к н и г  н а п е ч а т н о  и м е н н о  та к и м и  ш р и ф та м и , н о  в о п р о с  в  то м , селуд т  л и  п р и м е н я т ь  т у   ж е  п р а к ти к у   в  Web,  вс е  ещ е   едб аит реустя .zyxwvutsrqponmlkjihgfedc

т т шри ф

ев Ц

а

П о д zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJI   ц вмт ео   т а ифрш   (type  color)  в   п о л и г р а ф и и  по н и м аю т   общ и й   отен о к   блок а   те к с та .  У   с в е тл ы х ш р и ф то в  ти п а  H elvetica  Light с в е тл ы й   ц в ет , п о с к о л ь к у   н а н о с и тс я   о ч ен ь   м ал о   краски ;  н а с ы щ е н н ы е  ж е т   го р а з ш ри фт ы  ти п а  Cooper и л и  Arial Black в ы г л я д д о  те м н е , п о т м у   ч т о   к раск и  н а н о с и тс я  б о л ь ш е .  Н о ц в е т  ш р и ф т а  з а в и с и т  н е  то л ь к о  о т  г а р н и тур ы ,  н а  в о с е   ф а к то р ы ,  н а п р и м е р   м еж п р и я ти е   в ли яю т   и   др гу и б ук в е н н ы й   и н те р в а л   (к е р н и н г )  и   м е ж с тр о ч н ы й   ин те р в а л   (и н те р л и н ь я ж ) . П оми м о  к о н тр а с тн о с ти , дл я  з р и те л ь н о г о   в о с п р и я ти я ш р и фт а   в аж е н   ещ е   ц в ет ,  к о т р ы м   п е ч а т ю ст я   л и те р ы .  ктонеО   т а ифрш   (type  hue)  и г р а е т   з а м е тн у ю роль , та к   к а к  н а р я д у   с  к о н тр а с тн ы м и   ш р и ф та м и   ди з ай н е р  м о ж е т   е щ е  в ы б и р а т ь   и  к о н тр а с тн ы е   ц в е та . В о бщ е   го в о р я ,  н е   р е к о м е н дуе тс я   з л о уп о т р е б л я т м н о г ц в е ти е м   п р и  в ы б о р е  ш р и ф т о в . Б ы в а ю т н о , с лчуаи ,  кодг а   н али ч и е  б о л ь ш о г о   ч и сл а   ц в е то р а в да н о ,  -   с к а ж е м ,  н а   с а й ат х ,  п р е дн а з н а ч е н н ы ед тй . Н о  о б ы ч н о  п е р и з б ы то к  ц в е то в   с в и е д тл ь с в е у о   н еп р о фес и о н а л и з м е .

т Шриф в «Дву С тр е м л е н и п р и м ер б р а ж е ст с тв и

ь , к о н е ч

в   оп х   дл

я т

ы х о ек а н а х

»

е   Си мс а   к   п р о с то е   о тч е тл и в о   в и дн о  н а е   работ ы   «Дв а  о к еа н а » .  Все ь   H TML- етк с т   от я   ш р и ф то м  Trebuchet, а  н а  с лчуа й   ег о  отсу я  ук а з а н о  е щ е   н ес к о л ь к о  ш р и ф т о в   б е з   з ас еч к :zyxwvu body  {font:  llpx;  «trebuchet  ms»,  arial, helvetica,  sans- serif;}

Trebuchet  -   э т о   ш р и ф в ы й  к о м п л е к т  ш р и ф т о ляем ы й  та к ж е  в  к о м п л е к т ч и т ,  ч т о   о н   р а с п р о с тр а н е п р е дс у м о т р е ь   ег о  о тс у в и

т   бе з  з ас еч к , в ох дя щ и й  в в   Miscrosoft  дл я  Web  и  п о с та в е  с  Microsoft  Office.  Э т н   д о с та о ч н о   ш и роко е   то ж е   н е о б х ди м о

 б а з о

-

о  з н а ,  охт . я

-

и п То р г ф а

я

р о т е нк

об ы В В ы бо в аж е з ай н а л е гк о с т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а и о тн к р а с т он

и

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDC The  Road  t o  En lig h t e n m e n t

р   о ет н к а   и  к о н тр а с тн о с т и   ш р и фт а   к р и т ч еск и н   -   н е  то л ь к о   дл я   п о д е р ж а н и я   ц е л о с тн о с т и   ид Littering a dark and dreary road lay the past relics of , н о  и  с  то ч к и   з р ен и я тис,zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  уо тчмаео б д  т о   ест ь browser- specific tags, incompatible DOMs, and broken и   в о с п р и я ти я  тек сат . CSS support,

П о  тр а ди ц и и  р ек о м ен есутд я   вы би рат ь   в ы с о к о н тр а с тн ы е   ц в ет а   дл я   ф о н а   и   п е р дн е г о   п лан а ,  н а п р и м е ч ер н ы й   етк с т   н а   б ел о м   фо н е   и л и   н аоб рот .  П р е дп о л а г е ст я ,  ч т о   н а р яд у   с  др уг и м и   п ри ем ам и   эт о   п овы с и т   д о у б ч и ат е м о с ьт .

-

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser c reators.

р -

The ess Zen Garden invites you to relax and meditate е   отш е л   о т   э то й   тр а ди ц и и  и on the important lessons of the masters, Begin to see о  тек ст а   о ч ен ь  и з ы с к а н н ы й  ж ел with clarity, Learn to use the (yet to be) time- honored й   ц в ет :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA techniques in new and invigorating fashion,  Become color:  #9F927F; one with the web. е   о тн о с и те л ь н о К о н рт а с т  с  б е л ы м   фо н о м  в  э то м  счлуа слабы й   (р и с . 3). И н те р с н о , ч т о   с ы л к и  и  в  о с н о в н о м с Ри . 3  •   В  эо т м н й а з и  д с т е у з ь л о  ип с ы н т с и ря т н о к о саб л й ект с , и  п о  к р ая м  о то б р а ж ю тс я   бо ле е  те м н ы м   о ет н - ы в е н ч - и о р т лко е ж й ф  и шр т к о м   с и н ег о   ц в е ат .  М н о ги е   ди з а й н е р ы   п р е дп о ч л и  б ы и сп оль з оват ь   та к о й   ц в е т   дл я   о с н о в н о г о   етк с а   из- з а бо ле е   вы сок й  к о н тр а с тн о с т и   (р и с . 4). The  Road  t o  En lig h t e n m e n t Н ад о   п р и з н а ть , ч т о   п р и   п е ч а т и   осн овн ог о   етк с а   си н и м   ц в е от м   к о н тр а с тн о с т ь   лу ч ш и л а с ь ,  н о   тоу н ч е н н ы й   к о н тр а с т ,  до с ти г а е м ы й   з а   сч е т   и с п о л ь з о в а н и я Littering a dark and dreary road lay the past relics of ж е л то - к о р и ч н е в о г о   ц в еат , в ы г л я ди т   п р и я тн е . И м е н browser- specific tags, incompatible DOMs, and broken н о  в ы б о р  э то г о  ц в ет а  и  п р и да е т  с тр а н и ц е  та к о й  усп о CSS support, к о и те л ь н ы й   в и д , и з - з а  ч его  и  ч и та ь   е е  п р о щ е . Today, we must clear the mind of past practices, Web Бо л е е  то г , уп о тр е б л е н и е   с и н ег о  ц в ет а  дл я   в ы де л н и я enlightenment has been achieved thanks to the tireless с ы ло к   к а к   в н ту р и   етк с а ,  ат к   и   в   с п и с к е   до б а в л я е т efforts of folk like the W3C, WaSP and the major в с ем у   ди з а й н у   к о н тр а с тн о с ти .  И  з а о дн о   ед л а т   срт а browser c reators. д  то н к и й , н о  в  да н н о м ниц у  бо ле е  и н те р с н о й  -   п о хд

В   «Дву вы бра то - к о р и ч н е в ы

х   о к еа н а х л   дл я  о с н о в н о г

с ч л уа

е  в есь м

К о н тр а с тн о с т ц в е то б р а ж е ст п о в ер лож е ш р и ф то м с о з а де ли ваю щ е Т ек с то но ш ри ф шу ниц ни

»  С и м

а  э ф е к ти в н ы й

.

ь   и гр а е в  дл

я  з аго л в к а я   б елы

х   фо т гр а фи н   п о дз а г о л о в о к

т   рол . Т ек с

м   ш р и ф то и

, н о  н а  те м н о т   и н те р с н ы й е   общ и й  э ф е к

ь   и  п р и   в ы б о р е   и н в ер сн ы х т  в н утр и   и з о бр аж ен и я  о то м  н а  п о л пу р о з р а ч н о м   фо н е   (р и с . 5). А   ср аз у   п о д   н и м   расп о ,  н а п е ч а т а н н ы й   то ж е   белы м м  ж е л то - к о р и ч н е в о м   фо н е . Э т о с Ри   п ер ох д   фо р м   и   дв и ж е н и е ,  суи г о мн те т  (р и с . 6). е у в тс т е в то с

т   в   осн овн о й   ч аст м  р а з м е р о м   11 п и к с ел й м   сп и ск е . Д л я   до п о л н и те л ь н ы т  р а з м е р о м  9 п и к с ел й ю  з н а ч и м о с ть . Уид в и етль н о а  в сег о  в  дв а  п и к с е л я и  с  п е р м е н н о й  к о н тр а с тн о с ть

и   с тр а н и ц , р а в н

, к о гд

ы   н ап еч ат н   ш ри ф о  к а к  и  с с ы л к и  в  глав х   ж е   с ы ло к   вы бра , ч то б ы  о тр а з и т ь  и х  м е н ь , ч т о  м о ж е т  селдат ь  р аз а  и с п о л ь з еутс я   в  со ч ает ю   (р и с . 7).

н -

The ess Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity, Learn to use the (yet to be) time- honored techniques in new and invigorating fashion. Become one with the web, . 4 •ни е   Улучш о  (со г е н и

т с ое н т с а р т кон к )  н те т о т ще  об

и  з а е  сч а  и з о  т й  ж е р т ли  па й ем  т е н й  диа з а

т р о  выб а  боле ы  н е а  т к ш о хор

е о

ч и У те с

г   СОВЕ

с И п о л з ав ь и н и ан е с щ о ы т

Т

еБ т ав с ны и оь л а о р и ю дт у а

з   с о м не и я ь  тосндтур

, выбо и  у  люед х  ди зай нер с ик , лш чу

ш ине д у о б еи а ч м т о й

й  в  пн ал

р  с балорскнты й  с  оынбесла

х  цо тев м  зр ени м х   рб а о т

, рса ныичт я  беол

е  пс иьвтар едж е  цо тев

в  ме ож т  выз . Дл я  псе роф х  н а  ш ироук

в  и  корнтас ит

е  трдаи ц о н ы

-

, чобт

ы  синрца т

лд

ю х   ре

а  блы

а

Т о т  ж е с вт е н н ч атн ы м аль н ы

Рис

. 5 4т с но т трас н  Ко

Рис

ь т  шиф р

. б  •  Инверсны

е  цвет

И Н А ЧМ Р П Е он тевЦ

а  вк в о л аго  з

а  ве т с к  те

енно

е  «ву Д

х  океанов

олож ,  п ас р

м  ниж

Со т н ш е ни и т ес к

»

к ве о л аго  з

а

Е й н  ва и р а

т  рси

. 5 и  б  см

. н а е к д а вл к

.

Gardenias de Perfume by Armando Scsa с Ри

. 7  •  д г Ко

а ы н ь л а  ву з и е  и тс о н тс а р т кн о че м  н а м со а м  дел

й к  эфе ф и а  шт ф и р

в р ме рз а

т с т е а  сд з о , 2 пл ес к и

я е ц и н з ра я с т у  кж а

й я ш е ь бл о

,

. 8 •  исекч фар Г н  н а  дрогу у  бш ь ло

а а и

zyxwvutsrqp

ь   к  з а го л в к у   н а  р и с . 5, хоч ест я   о б р а ти е  н а  то , ч т о   в  э то м   г р а ф и ч е с к о м   е тк с я  к о н тр а с тн о с т и  в о с п о л ь з о в а л с я  р а з м   ш р и ф та . С л о в о  ess  н а б р а н о  м а л е н ь к и   и  к о н тр а с ти р еу т   с  н а ч а л ь н ы м и   з а гл а в н ы   в  с л о в а х   Zen G arden. П о дз а го л в о к   ниж й   п ри ме р   с о з да н и я   к о н тр а с т а   з а   сч е : с л о в о  beauty в  н е м  в ы дел н о   п о л жу и р м  и з  о к р жу а ю щ е г о   етк с а ,  о т б р а ж а е м о   ш р и ф то м .

 п р и е м  п р о с л е ж и в а е тс о  п о д  ф о т г р а ф и е й   п о л уж и р н ы м   ш р и ф то м м   (р и с . 6).

я   и  в  к а р ти н к , гд е  п е р в ы е  с ем ,  а   о с та л ь н ы

е з а го л в к

ь е е т -

е  н еп о с р ед ь  с ло в  н а п е е   -   н ор

-

в

а

Е сл и  у ж  м ы  з а го в р и л н ю ан с , б о л е е   н и гд го л в к и   лд я   р а з де л о к и й  тек ст , н а б р а н н ы вам и   н а   с в е тл о - с и н е ж е л то - к о р и ч н е в ы о тч е л и в о   в ы де л я с т н ы м   в и з уа л ь н ы с ы лок .

и ь у

и  о  вз глеяд , т о  о тм е и м  ещ е  оид н е  в  ди з а й н е  н е  в с тр е ч а ю щ и й с я , -   з а в   с ы ло к   (р и с .  8). Э т о   гр а фи ч е с й  з а гл а в н ы м и  те м н о - с и н и м и  бку м   фон е ,  к о н т р а с т и р у ю щ е м   с м   ц в е то м   в о к р уг .  Т а к о й   з а го л о в о к я   н а  с тр а н и ц е   и  с лжу и т   п р ек р ас м   о брам лен и е м   дл я   н а в и г а ц и о н н ы х

е

JJ  SELECT Й  DES1G11

и  пмо ще к ь п о сл

е zyxwvutsrqpon

И   п о с л е нд е ,  ч т о   селуд т   о тм е ти ть ,  -   э т о   с о тн о ш е н и е  з а го л в к о в   и  тек ст а   в   «Дву х   о к еан а»х .  З а го л в к в н рт у и  о с н о в н о г о  текст а  гр а фи ч ес к и е , дл я  н и х  и с п о л ь з ова н  уж е   уп о м и н а в ш и й с я  в ы ш е  о те н о к  с и н ег о  ц в е ат .  Бку в ы   о тб р а с ы в а ю т   ве д а   з а м е т н у ю   те н ь   -   ли ш н ам е к   н а  н е , н о  э т о  п р и да е т   з ав ер ш ен н о ст ь   ш р и фт и  п о м о га е т   п р и в леч ь   в з гл я д   к   з а го л о в к а м .

и т ч е Ус

си Р

е ра зм е р и тш р и ф я о нт к р а с т но

я с о а з д ин В о з в р ащ аяс ваш е   вн и м ан и Сим е  дл я  с о з адн и м ер о м   и  в ес о м и  бку в а м и м и   б ку в а м и аде т   п р ек р асн ы н а с ы щ е н н о с ти н ы м  ш р и ф т о г о  о б ы ч н ы м

.

ь  п р о с то

й  тсек й  фон е  нд ги

т  нарб . О н  вс те я л ды е  та к я  комицабн

н  зывнмалг

и  бмва ку я  н а  сиецнра т я  цо т е в

и ,

в  н е  с т е а ч ер ст в

ь пр ос т

е

оХ т я   н а  п е р в ы й   в з гл я д  ди з а й н  «Дву х  о к еан о в »  к аж ет с я  б е с их тр о с тн ы м ,  н о  э т а  о б м а н ч и в а я  п р о с то а   с о з ад е т  с п о к й н о е  и  б ез а б о нт о е  н а с рт о ен и е . Т о н к и е  до п о л н и те л ь н ы е   ш тр и хи ,  о с о б е н н о   в   и сп ольз ован и и ш р и ф то в , -   э т о  ур о к , к о т р ы й   н е  с то и т   з абы ват ь   пр и р а б о т е   н а д  с о б с т в е н н ы м и   п р о е к т а м и . я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE

е нйа з Ди

р оШ

н м н Иа

н (Shaun Inman)

www.csszengarden.com/044

S i 6 м е л б о Пр

а от ф и р ш

в и ак

к с ен

й с ьт о р о б

я zyxwvutsrqponm

С о з да в я  si6, ди з а й н е р  Ш о н  И н м а н  в о с п о л ь з овалс я  п р е и м ущ е с тв а м и   с е то ч н о й  сртку р ы . В о б р аж ем ы е   гр а н и ц ы  р аз едл яю т   м ак е н а   тр и   к о л н к и . Т о н к и е  л и н и и  м еж д у   с рт о к ам и  тек ст а  п о дч е р к и в а ю т  в з а и м о с в я з ь  м еж д у  з а го л в к а м и  в  л е в о й  к о л н к е  и  а б з а ц а м и с р е нд е й  ч а сит , к  к о т р ы м  о н и  о тн о с я т . Са в ер р аж ен и ц а л е гк м а с ш та т а с я

м   етк с х  л и н и й  в ы гл я ди о  р а з р уш и ть  и  слабо  н е о б ох ди м ы м )

т   а к р у а нт , нар и с о в а н н ы .  Бл а го д р т   б е з пу р е ч н о

о   расп о л ж е я  та к о

т  в

н   от ч н х  н а  ф о н о в о й  то ч н о с т , н о  э т о   в п еч алтен и

, ес л и  п о л ь з о в а те л б   е тк с а   (а  и з - з а  м ал о г о   к е гл й  к о н рт а с нт о с т и  э т о  м о ж е .

о   по м  и з о б и   с тр а н и

е

ь  и з м е н и я  ш р и ф т  о к аз ьт

т -

О г р а н и еч н о с т г

ь на бор

Т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA О гр а н и е ч о с т

СОВЕ

т  сскип и в то  шф и р мы е я л ,  в а тс о п х  с  рчи л з а Microsoft пе у к и лб у мын и м я и н е ж о  пл и р и  (www.microsoft.com/ typography/ fonts/ default.aspx). Н о к ь л по кс у л е т а в о з пь л о и  му г о т т я л  уа д ь  ил и тс о р п о  н ет а в и л в а н а  утс ь  шты ф и р , т о  вс е н  рв а о  не т о к на и й и тн ар г , чт о ы н  нж у й  шф и р т е  бд у т неп у сот д .

- СОВЕ

Т

В  2001 год у  бы л  проевд н  опро с  н а  тем у , каик е   т ш и фр ы  ис с зю уп т о ь л я  нибаоел е  чсаот . Хто я  е г о т а т рь л узе ы  нз ьел я  с чи т а т ь  непоргш им ым и , та к  как  дол я  ош иб оныч х  оо вет в  неи з на в е с т , н о  вс е  ж е  о с но в й  дл я  с рванеи я  он и  си т луж ь  м о гут . ор д Пб ен е  о б  эо т м  опрос е  чйати е  в  сь т а е  «Code Style Font Sampler»  (www.codestyle.org/ css/ font- family).

на б о р Бы т та м ш р и ф то п о л ь з о в а те л те р чт о ди н а л ь н

а 1 •  Наиболе

С  зас емкч и

раненны те рос п  рас

еБ

- М о но ш ирин ы

з  засеч

к

е

е т  шиф р

ы л  д я  Web п а о орм  платф

в

ь в

zyxwvutsrqponmlkjihgfedc

ь  м о ж ет , н а и б о л ь ш у ю  досад у  п р и  р а б о т и   в  Web  в ы з ы в а е т   то т   ф а к т , ч т о   в ы б о р в   н еш и ро к   и   н е п р е д с к а з еу м ,  уч и ты в а я ь   може т   су т а н а в л и в а т ь   н а   сво   о дн и   ш ри фт ы   и   да у л я т ь   др гу и е .  М а л о в е р о я тн о м  в  э то й  о б л а с т и  в  о б о з р и м о м   б щ ду е о  и з м е н и тс я .

е  с о  ш р и ф   д о с т пу н ы

х ,  ч т о

й   комп ью

,

  ч то - т

о   к ар

-

Е сл м ац и я

и  н е  с ч и ат ь  ш р и ф т о в , и с п о л ь з еум ы х   в о  Flash- ан и х   и л и  в с тр о е н н ы х   в  г р а ф и ч е с к и е   и з о бр аж ен и я , т о  в с я  ти п о г р а ф и я  в  Web  б а з и р еутс я   н а  те х   ш р и ф та х , ч т о  ест ь  н а  к о м п ь ю те р е  п о л ь з о в а те л я . О дн а к о  п о л ь з о в а ет л и   п о   боль ш е й   ч аст и   н е   я в л я ю тс я   ди з а й н е р а м и , п о э то м у   н а   и х   маш и н а х   р е дк о   можн о   в с тр е ти т ь ш ри фт ы  п о м и м о  тех , ч т о  п о с та в л я ю тс я   в  к о м п л е к т е  с о п ерац и о н н о й   с и с те м о й   и л и   п ри ло ж ен и ям и .  К  п р и м ер у , н а  те х  м а ш и н а х , гд е  ус та н о в л е н   Microsoft  Office, вы бо р   ш р и ф то в   ш и ре , ч е м   н а   м а ш и н а х ,  дг е   э то т   п а к е т  н е  с то и т . С и с те м ным р е с к а ю тс я ан т ув е р е н н ы н ель з к о то р ы к а ж до

Таблиц

а т ошри ф

а т ш ор и ф

ы   Windows  и   Mac  OS  X  к о м п л е к т ую т с я   раз и   н аборам и   ш р и ф то в .  В  к а к о й - т о   м ер е   о н и  п е ь   и   раз ли чн ы е   вари ,  н о   е с л и   е щ е   уч е с т ы   U n ix  (в к л ю ч а я   и   Lin u x) ,  т о   о к а ж е т с я ,  ч т м   можн о   бы т ь   ли ш ь   в   то м ,  ч т о   н и   в   ч е я   бы т ь   ув е р е н н ы м .  В  та б л .  1 п е р е ч и с л е н ы   не е   ш р и фты ,  о б ы ч н о   п р и с утс тв ую щ и е   н х   п л а тф о р м . й   и з  тр е м

Windows

Macintosh

Book Antiqua, Bookman Old Style, Garamond

New York, Palatino, Times

Bitstream, Vera Serif, New Century Schoolbook, Times, Utopia

Arial Narrow, Century Gothic, LucidaSans Unicode, Tahoma

Charcoal, Chicago, Geneva, Helvetica, Lucida Grande

Bitstream Vera Sans, Helvetica, Lucida

Courier, Lucida, Console

Courier, Monaco

Bitstream Vera Mono, Courier

о м а

и п Т о рг ф а

я

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

В  1996 к о м п а н и я  Microsoft  в ы п суит л от в , с п р о ек ит р о в а н н ы х   сп ец и аль н э к ран е . Э т о  б а з о в ы е  ш р и ф т ы ск ач т ь   б е с п л а тн о ,  п о э то м у р а с п р о с рт а н е н и е . В  н а ш и  дн в аю с т я   в м ес т е   с  п р окдуат м и э то т  к о м п л ек т  ш р и ф т ы  п ер ч и с л ен а 2 • ы н  Осв о н

ц и л б Та

Georgia Times New Roman

е т шф и р

я  Web о т  Microsoft

Anal Anal Black, Trebuchet MS, Verdana

В о бщ

е   го в о р я , с ч и та е с в   ди з а й н е ,  ч т о   э т и   ш р и ф т р е ч ь   и де т   о  Web,  ув е р е н н ы И м ен н о   п о  э т о й   п ри чи н в ат ь   н еск о ль к о  ш р и ф т о т о т   с л уч а й , е с л и  н и  о дн о г в а те л я   н е   о к а ж е тс я .

О б ищ т о шр и ф

ы  дл

а  к о м п л ек т  ш р и ф о  дл я   п р о с м о рт а  н а  дл я  Web, и х  м о ж н о  б ы л о   о н и   п о л чу и л и   ш и роко е и   о н и  о б ы ч н о   с уа т н а в л и   Microsoft.  В к лю ч ен н ы е  в ы  в  та б л .  2.zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Courier New, Andale Mono

Comic  Sans MS, Impact, Webdings

я   без о п асн ы м   п р е дп о л а г т ь ы   с ущ е с т в ую т ,  н о ,  к о гд а м   н и   в   че м   бы т ь   н ель з я . е  в  CSS р а з р е ш а е тс я   ук а з ы в  и  да ж е  о б щ е е  с е м е й с тв о  н а о   и з  н и х   в  м а ш и н е   п оль з о -

е с е м е йс т в в

г   И Н А Ч МЕИ Р П

Е

К ю и н е л а  сж о г о т к е л  комп

, в  2002 гд о о у н т а л п с бе и н е н а р т с о р п с  ра е о в бз а а то  шф и р в л  д я  Web но н ь а л а и ц и ф о м т й  а с е  Microsoft лыб о о нщ еа р пк е р , н о р  (ба д о г а л я о н ь л а р  ле б и й и з н ле ц и ) н о и не жо лыв ы  п о с е р д  а у  http:/ / corefonts. sourceforge.net. Пь л о к с о к у  эт а ц и н а р  т с н е ч а н з а н д е  пр а л  д е л те яа в о з ь л  о п й  Linux, т о  нт й а и ис р е в и  дл я  Windows та м  но к г е л , пщти о е з  фра у  «Original unaltered.exe files».

а SELECT A DESIGN

И н ма н   о х ет л , ч то б ы   в   si6  и с п о л ь з о в а л и с г а р н и тр у о й   G eneva,  п р и м е н я е м ы о н   з н а л   о   то м ,  ч е м   р и скету ,  в ы б и р а с т в юу щ и й   в  Windows, т о   в к л ю ч и ти те л ь н ы х   ш р и ф то в   и   а л ь те р н а ти в ы

ь   ш р и фт .  П о с к о л ь к

Gardenias mporarv  nouveau Ясн о , ч т о   2 em и   200%  в   вд а   р а з а   б о л ь ш е ,  ч е м   lem  и by david  hellsing 100%,  н о  ч т о  так о е   во бщ е   lem?  И   100  п р о ц е н то в zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   то О El  Cellar  de Tomas 7 ге оч . Д л я   к аж од й   и з  э ти х   е ди н и ц   ест ь   с в о я  то ч к а   от .  .:- ' by  miria  stuitz  с ч еа т ,  и   т-у т о   и   н а ч и н а ю тс я   раз ли чи я :  le m  м о ж е т О OrderedZen by «eve  smith бы т ь   равн о  и  3 дю й м а м ,  и  0,55  с м , и  е щ е   м н о г о  ч ем у . о Bonsai, by  martin  ptKtma К о дг а  в  та б л и ц е   с ит л е й   п р и м е н я ю тс я   о тн о с и те л ь н ы е е ди н и ц ы  и з м е р н и я , т о   сута н а в л и в а е тс я   н ек и й  о п о р D Type  Thing by  micHal mokrzyckt н ы й   р аз м ер , с о тв е с тв юу щ и й   lem  и л и   100%  ,  и  р а з О Pseudo  Sahara м ер ы   ш р и ф то в   в ы ч и с л я ю тс я   .ьон ацлироп   Дл я by John barrick з а го л в к о в   м оже т   бы т ь   з ад н   ш ри ф т   р аз м ер о м   15 0 % : О Dragen  by  matthew  buchanan и л и   2 , 2 em, дл я  п о дп и с е й  - 0 , 8 е т и л и 7 5 % .  О п о р н ы й раз м е р   можн о   з адт ь   яв н о   и л и   о с та в и т ь   н а   с у м о рт е с и Р . 2 •   - з И з а и н а в и ж  са л г я то  шф и р в  в  Mac OS X с к е т т н и е   б р за у е р а ,  н о  в  л ю б о м  с лчуа е  п о л ь з о в а те л ь   см ож е т «Ви с р е и н ои д » ви д я л г ы т  хт о ь  и ми мк л е , н о н л о вп е мы е а т и ч м ег о  и з м е н и ть , в  р ез луь ат е  ч ег о  в с е  ш р и ф т ы  буд т  о т м а с ш та б и р о в а н ы   с о тв е тс в е н н о .  И м е н н о   воз мож н о ст ь  уп р ав лен и я  с о  сотр н ы  п о ль з о в аелт я  и  ест ь  осн ов н о е  дости н свт о   о н т о с и е тл ь н ы х   е ди н и ц .  П о с м о тр и те , Select a Design к а к   в ы г л я ди т   «В реси я  оид н » в  Windows XP п р и  о кт л ю Q contemporary nouveau ч ен н о й  ф ун к ц и и  Clear Type, и  в ы  п о й м е т , п о ч е м у   эт а by dsvid h«llsing zyxwvutsrqponmlkjihgfedcbaZYXWVUTS воз м ож н ост ь   ат к   в а ж н а . О   El Collar de Tomas Е ст ь   е щ е   и   тр е и й   в и д   е ди н и сп ец и фи к ац и и   CSS,  к л ю ч е в ы m edium , x - l a r g e  и  н е к о т р ы с я   а б с о л ю тн ы м и   е ди н и ц а м и ч а те л ь н о , к а к  к аж естя ; н и  о ди з а мду н о .

с еикПл С о гл а с н н а   сам о с щ у е с вт ю у з ан н ы сло в ах

и и пр обл е м о   с п ец и фи к ац и м   е лд е  я в л я е тс т   дл и н н ы е  с  дл и н о й   р ку , т о  н а   15- юд й м о в

ц   и з м ер ен и я е   слов а е  др гуи е . О дн а к о   вс н  м еот д  н

by  m.iria stuitz О   OrdtrsdZen by stave  smith О   Boris ai by martin plazatta D  Type Thing by  mkhal rnokrzycfcj О   Pseudo  Sahara bvjohr»  barrick

.  С о гл а с н о   хх- sm all ,  то ж е   яв ляю т е  н е  та к  з а м е е  р а б о ате , к а к

О   Dragen by  rruttrtew  butrianafl

ы и  CSS, е ди н и ц а   и з м ер н и я  р я   о тн о с и те л ь н о й .  Н а  э то т   сч е е   и   т ум а н н ы е   р а с ж у ед н и я ,  с в я м   з р ен и я , н о  есл и  в  дв у и   и  угл о м   м о н и то р е  с  р а з р е ш а ю щ е

х

си Р

т й

х

.  3 •   цнуик Ф с  зйе ч ад

, хот

я  тсек

я  ClearType в  Windows  XP тжка т  видялыг т  ещ е  мч ь ле е

е  сс те я лв арп

я

ид н ц Е

ы  и з м е р ни

я

с п о с б н о с ть ю   1280x960  п и к с е л й   ет к с т   в ы г л я ди т   го раз д о  м ел ь ч е , ч е м  н а  21- дю й м о в м   м о н и то р е  с  р а з р е ш аю щ е й  с п о с б н о с ьт ю  800x600. П о с к о л ь к у  в о  в то р о с ч л уа е  ш р и ф т  с  кегл м   1 Ор х  в п о л н е  р а з л и ч и м , а  в  п е р в о м  -   в р я д  л и , т о   э т у   е ди н и ц у   и з м ер ен и я  н е л ь з я  с ч и т а ь   а б с о л ю тн о й   в  с о тв е с тв и и   с  да н н ы м   ран е е   оп р едлен и ем .

Seect a Design  body { font- size: small;

П р п е д о л а гс е я т сло в ц и ен в ес т у лен и

, ч т о  п р а   к   с о е нд е м у   д е й с вт е у т   1,2. Т а к и м  о б р а з о т   16  п и к с е л я м е  дас т  р а з м е р  п р и м е р н

и  подерх

е  о т  о нд о г о  клю ч евог т   м а с ш та б н ы й   коэф и м  есл и  ср енд е е  з н а ч е н и е  с о т , т о   п р и в е д н н о е  в ы ш е   о бъ яв о   13 п и к с е л й .

о -

Та г ЧАНИ  Е ПРИМ и н а с и Оп

Е

е д о  т ме а л  По а н де у о  С а н е д е в пи р о  в ать т с е  «Alternative Style: Working with Alternate Style Sheets»(www.alistapart.com/ articles/ alternate).

Мето т а бл и ц

к  к а к о

й  м е т о

д п е р л к еч ю н и ы с т ил е

д  в ы б р а ть

?

я й

zyxwvutsrqponmlkjihgfedcbaZYXW

Д л я  то ч н о г о  к о н тр о л я  н а д  э к р а н н ы м и  ш р и ф та м ш е  в с ег о  п о л ь з о в а ть с я  е ди н и ц е й  и з м е р е н и щ е- т о   п о л а г ть с я   н а   н е е   оп асн о , н о   сщу есвт у с о б  о б о й т и  о ш и б к у  в  Internet Explorer, с о з да та б л и ц у   с ит л е й  с  б о л ь ш и м   р аз м ер о м   ш р и ф та

я  р х

и  лчу .  В о б т   сп о в   в то р у .

ю

М е то д ы  п е р к л ю ч е н и я  т а б л и ц  с ти л е й  в с тр о е н ы  в  н е к о то р ы е   б р а уз е р ы ,  н о   н е   в   I n t ern et  Explorer  д л я Windows. П о э т о м у  б ы л и  р а з р а б о та н ы   п р о гр ам н ы е сп особ ы  в о с п о л н е н и я  э то г о   н е д о с та к а , с  п о м о щ ь ю к о то р ы х   п о л ь з о в а те л ь   може т   вз ят ь   уп р а в л е н и е  в с в о и  р ук и . Н а и б о л е е  и з в е с те н   о р и ги н аль н ы й   м е то д П ол а   С о ду е н а   (P aul  Sowden),  о п у б л и к о в а н н ы й  н а сай т е   A  List Apart.  С  е г о   п о м о щ ь ю   можн о   м о ди ф и ц и роват ь   н е   то л ь к о   ш р и ф ты ,  о н   до к а з а л   сво ю   э ф ф е к ти в н о с т ь  в  п о с тр о е н и и  с р е дс т в   н а с тр о й к и  с а й т а с  п о м о щ ь ю  э к р а н н ы х  э л е м е н то в  уп р а в л е н и я , до б а в лен н ы х   ди з а й н е р о м . •

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Та

к ак о

й м ето

Н а  к а к о м  ж е  и з  тр е х  э ти х   м е от д с я  п р и  р а б о т е   н а д  с в о и м   п р о е к то м с е ит е л й , з а ох дя щ и х   н а  с ай т с я  п жоуех , ч е м  у  ди з а й н е р а  Д и ьд в ы  тщ а те л ь н о  п о д й едт е  к  в ы б о р м ер о в  ш р и ф та , т о   о н и  н е  с ат н у

7  Зк а

. 1942

д а р тб ь ы в в  л уч ш ? Д ел , з р е н и

? е   о с та н о в и ть о   в кс а у

.  У  п о

-

е  м о ж е т   о к а з а ть е  Хи л ь охр с ат ,  н о  есл и у   м е от д а  з а д н и я  р а з т   н а  э т о   с е то в а ть .zyxwvutsrq

р  Мкй а

е н й а з Ди

л  Пи

к  (Michael Pick)

www.csszengarden.com/009

THE BOAD   TO ENLG I HTENMENT Ut tem rnig a d aO rkM  a,nsd d rearoryken   roaCd l n i c o p a b t i e l  D   a n d b S  sauy ppthou p rt. ast relics of brow«er-spectlei  tags, ,4. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA /«*> - / T o d a y , w e  m u s t  c l e a r t h e m n i d of  p a s t  p . Wceb, w  engilahsptenm acheived thanks to the tireless eforts of fokl  rlikace ticethse wj  and tenht has  e maojbunr CSS DESIGN zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA The hee m s  Zen  G en iengnivite ts y ou to retihlax a nd m. L edtiaetearn on t m porytaet nt lI»e be) sons stearrdse. B  to ushee i  the e ( m iof t t e-honoread t chnqiues ino  sneewe w  and inv cl igoararittinyg  fashion. B coem one wtih  the

и в Жы

• *  n u t  г и г и

. |M>« 

ЦШ

И  

7 1 1 Ш

*  * 

м

ил и  м вырет

м

SO WHAT IS THIS ABOUT ? There is dearly a need for CSS to be taken seriously by graphic artisti. The  Zen zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE

Garden alms to excita, injpire,  and encourage participation. To begin, view some of the existing designs In the list. Clicking  o&  any one will load the style

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

,  с п и ш

ь   BY  KAV  H EN RY 

ra»irnro«Kv 

*o u  VE*U ev 

E L C O L u sn i n m ju B VH M M  sTULiz 

^ ^  ^ 

^ 

VW

y 

p agf

_ 

T h e

chan ged  is the extern al  л я   Ш е

  ^ 

r e m a

j n j  ^ 

и ш в

1  t

[ , e only  th in g  that  has

. Yes,  really.

CSS allows complete and  total control over  t h e style of  a  hypertext  document. The  only  way  this  can  be  illustrated  in  a  way  t h a t  gets  people  excited  is  by demonstrating  what  It can t ru ly  be,  once the rein s  a n  placed  in  t h i  hands of

е Из щ я а в

о и е и н ж тр п я

е в о к с аф р г о пт и

м н ай з и д

е

than аЫ е  to create beauty  from  structure. To date, most examples of neat tricks and hacks have been demonstrated by structuriits and coders. Designers have yet to malts their mark. This needs to  change.

A»  INVITATION   TO   PARTICIPATE

ш ги тш ш

а

Gr cairy , but t artistsh o nylxam  plepaelse f. Y ou aree m odm yfineg t is epla e gen, ousogh t  strohnag  CvSen C  skilsS are Р а з м ы ш л я я  н а д  тем , ч т о  п рсеадтви т ь  н а  сай т nno ecavpecieshs c e e ileg p s ar  cinom naetsdeh w t e a n  us e  t h e m as  s t a r t i n o t s . P e l  s e e t h e CS S  R e s o u r c e G udie for  advanced tutorials and tips on worknig wtih  CSS. CSS  Zen G arden,  М а й к л   П и к  р е ш и л   с едл а т ь  moddaunt yfi  thine g at  stylefirst   sheet i nv ae n nyer  ish, but not  the oH TML. Thi s Ymaouy  smeeaym  ay wyou w I f   y ou' o r k e d t h i s  wa y  bef r e , but  follow «ч о т н и д б у ь  з а б в н о е   и  н е м н о г о  с р а н т о е » . Т а к the listed links to learn  more, and usesa tmplef lies as $ guide. ь  рабо т а  «Жи в ы м  и л и  м ервты м » . Do olad tpolhae d y sampl nd ctfeb fi sleerv teor under your control. Send us a linи k  п о яв и лас wow rkn) u ouer . htesm filel file   toa a w И де я  П ик а   с о с то я л а  в  то м , ч то б ы   п р о ти в о п о с та в и т ь   ди к и й   З ап а д  м и р у   яп о н ск о г о   са THE BENEFITS OF PARTICIPATION , п о к а з а в  з а н и м а те л ь н о е  и с то р и ч е с к о е W hhyen ma  participkinatg t e? Fe or casreecog niteiossn,  spiration,  and as r iesso sorel urce  we can alv eren t fer tooday. м ру а я w f or  - ebas tianed desi gn. Thi y needed, e Mo moreilh ma king t enoug .  Н а  те м у   ди к о г о   З ап ад а  н а м е к а е т thisre gal and  lery w  be ojar si hitests ar orical curi osithye ; tlehap, but not  at day 'a not  toh hav day. •e. One day р а з л и ч и е ти п о г р а ф и я   в   с ти л е  в е с т р н о в  с  р а з л и ч н ы TO BE REQUIRED OF THE PARTICIPANTS м и   с п е ц и а л ь н ы м и   с и м в о л а м и . С  т о ч к и  з р е W e idelwyo- suudlppor  liktee t oe sment ee as mu ch CS Si as possi ble. CS Ss s hould be  lim ited t o w d el s  onl y . The es s  Se n  Ga r d e n i s  about f u nct i o nal , pract S aind not t st brleeedi - edge trie  cks v iewIs t ablehat y  by a« of  e . idates. н и я   ти п о г р а ф с к и х  о с о б е н н о с те й  п о л чу и л с я browiscinal CS g publ c. The hoe lnlyate real  quinregment w have  our CtShS val Unf o r t u nat e l y ,  d es i g ni n g  t hl t  wa y   hi g hl i g ht s   t h e   I U W I   i n  t h e v ari o us о ч е н ь  и н т е р е с н ы й  р е з л у ь т а , п р о л и в а ю щ и й icompl mplement o C f SS at  CSS, Di fees, and  rent btrohw ispls ma ay didde ferent ly, heen a  ven fix for one eotely bar vetioakalns  idage i tim ise s beRresceso dome nifnor g w lof eads t n  anot h er .  V e i w t h ur c e*  p ag e  i n f o r m n on s ome с в е т   н а   п р о б л е м у ,  к а к   н а д о   и с п о л ь з о в а т ь the fe do  lies anvai lablpect you t e. Full boro cwome up w ser compliaince i «- ilperl sfeoct c metim es a pioatspioe dr and w ot ex th  pifsx yel our des ode acr  ev ere inyam, at plleast 1 atform . But  d o t e st i n   a t  m a ny as  y ou can. I i g n doe s n 4 w o r k ш ри фт ы   в  ди з а й н е . 5+/Wni  and .M we wEont accept It   oiila (run by over 90% of  . the population), chances are W k tehctat you  su m bmiatetri ori goin a mi al arrk.  Please respect copyright laws. Please kout eee as p obj ionnabl ietw right por ograephy w ila bl te rej ectm d.um; tasteful nudity Is acceptable, is a lerarni ncg s (w exerci ell as cept a demons traubmi tion. Yssoioun gui  retaind feluiln es), but copyright n hie sy our g arphi ithse as   limSS under a Cr itewd ex ions, seateie s a s k  you  el e as e y our C v e  C o m m o n s l i c ens e Ident ical to the ne on tbls sitesothat others may learn from your work. B a ndw d i t h  g r a ci o us l y  donat e d by Dr e amFt r e  St u di o s. Co m n i g s Garden, the book. li Zt*n zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA to  the  Ш е   and if  we  choose to use  I t, we  will  spider  the associated  Images. Final submissions  will be placed on our  server.

е кД о р а и т в н ы

е  с и м во л

е о кр Д а т и в н ы

«as*, в и в

;

•   сп орт но д о

е т  шиф р

ы чн ы  об

о даютс з  со

я  дл

я - й т  како

;

+   ж и в о тн ы е о

;

•   п р и р о да

;

• •  р а з н о е

.

Н а   ри с н ы х   те м

.  1 п о к а з а н .

ы   п ри м ер

П и к  сму е л   п о дч е р к н т у сп ец и аль н ы м и   си м волам н и ям и ,  п о э то м у   ди з а й и ск ун ы м .

C S S 

с Ри

. 2 ны 4в ати - р  Деко

й и т о  лог

п  в  дизайн

е  « ивы Ж

• •

.  3 •  к во л г а З м  зз е в

и  в а  скс и п д  и г о н ь л а и ц се п

х  со л ыс

к н а в о з и сл и т ло е т и л - е ад лз о смавир

» П я ти к о н е ч н а з н ак ом го л в к ц и аль н ы

м л  и и  мртвым е

.  4 •   В  верхне

м к в о л  зго а

ен е аж р б  ио з

ы  с

В   п о с л е дю у щ и З ап ад ку а з а ю щ е г ы ра  сум а

и  и а с бн о

S0~WHAT IS THIS ABOUT ?  Рис

.  5 •нительны л о п До

ек в о л го а з

й

~^~ ан и  выдерж

у   в ес тр н и   и   гр а фи ч ес к и м н   п о л уч и л с

ы  в  сил т

в   н а   п ят а   в  с в о е

ы  та к и м

ь   з в ез д и  з в е з да м

м   си м воло

-

й   рабо т и   ку р а ш е

я   и з ощ рен н ы

я   в   гл а з а   з а го л о в о й   ас оц и ац и и   с  ди к и м   п а г о ды , к о т р а , о б р а м л е н н у ю   п р и ч уд л и в ы м е   п о л ч у а е тс я   те м а ти ч е с к и м  З а п а до м   и  др е в н е й , т о   ест

ь   раз е

м  и

к   (р и с м   З а п а до м я   п о м ещ е

 Я п о н и е й

.  2). , и й .

а   ш ер и фа ,  хо р о ш о . В  с п и с к а х  с с ы л о к  з а и   и  о тде л н ы   сп е м   (р и с . 3).

П ер м ещ аяс ь   вн и з  п о  о с н о в н о м у   ет к с ут ,  м ы   о б н а р у ж и вае м   до п о л н и те л ь н ы е   ук р а ш е н и я .  В о - п е р в ы х ,  в в е р нх е й   ч аст и   в и дн ы  и з о б р а ж е н и я   фи гу р   с а м ру а е в  и я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA де р в о - б о н с а й   (р и с . 4).

THE  BOAD  TO  ENLIGHTENMENT Рис

я  з в ез ад а  п о  ф и л ь м а м - в е с те р н а м и  о б р а м л е н м   ш р и ф то в ы

ы   си м воло ь   ет м

П р еж д е   в с ег о   б р о с а е тс Ш р и фт ,  в ы з ы в а ю щ и с о ч е ат с я   с  и з о б р а ж е н и е н а  в  о в а л ь н у ю   о б л а с ть з а в и т уш к а м и .  В  р ез луь та к о н тр а с т  м еж д у   ди к и

D ES IGN

• • сиР е и н а в о з ь л о пс и

ы

О ди н   и з   сам ы х   л ю б о п ы тн ы х   в и з уа л ь н ы х   а с п е к то в работ ы   «Ж и в ы м   и л и  м е р тв ы м »  я в л я е тс я  и с п о л ь з о в а н и е  де к о р а ти в н ы х   ти п о г р а ф с к и х   си м волов ,  п о л чу и в ш и х  с о б и р а те л ь н о е  н а з в а н и е zyxwvutsrqponmlkjihgfedcbaZY  dingbats  («ш чут к и - др ю ч к и ») . Т р а ди ц и о н н о  э т о  б ы л и   ц в е то ч к и   и л и   э лем ен т ы о р н а м е н та , а   в   ц и ф р о в о м   ми р е   о н и   п о д б и р а ю тс я  п о те м а м , н а п р и м е р :

»

.  1 4- пециальны  С й  тем ы

zyxwvutsrqpo

е с и м ло в

•   б и з н ес

Рис

ы

е ерн т  вес

а

Дл р а ти в н ы раз м ещ е ат вы жи

х   з а го л в к а ,  п о дч е р к н тау о   п ер с т

я  ус и л е н и

я   в п е ч а тл е н и х   э л е м е н та н   краси вы

х   и  с е р ти ф и к а т й  ш те м п е л т   то н к и

х   д о м и н и р еу я   с ти л и з о в а н н ы а   (р и с . 5).

ь   с  до м е н н ы м  ук р а ш е н и е

.  В одл й  уз о р х   акц и

т   те м м   и з о бр аж ен и е

а   ди к о г

я   п ри м ен ен ы  е щ е  дв а   дек о ь   в е р нх е г о   и   н и ж н ег о   кра ,  н а п о м и н а ю щ и й  о  б а н к н о й  (р и с . 6). И  н а к о н е ц , п о ч то м  и м е н е м  mikepick.com  слу м   с  то л и к о й   ю мор а   (р и с . 7).

о м я -

и п То р г ф а

я

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

Н е  бд у ь  н а  с рт а н и ц е  с п е ц и а л ь н ы х   си м воло в   и  г р а ф и ч ес к и х   ку р а ш е н и й ,  о с з н а т ь   те м а ти ч е с к и й   к о н рт а с т бы л о   б ы   н еп р о ст .  Н а   э то м   п р и м е р е   в и дн о ,  к а к   ди з ай н е р  м о ж е т   с  п о м о щ ь ю  удач н о   р аз м ещ ен н ы х   е дк о р а ти в н ы х   э л е м е н то в   п о д ч е р к н ту ь   с в о ю   и ед ю .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

я ев р с т к

и Т а с п о к рг ф

а

Г ов р я   о  в ер скте , м ы   п реж д е   в с ег о   и ме м ещ ен и е   раз ли ч н ы х   э л е м е н то в   н а   с тр а н и ц е е тм у   сщ у е с в т у т   м н ог о  к а к  н а чу н о й  и н ф о р м а ц и и и  в с яч ес к и х   ш тоу к .

О п т ие ч о с к

е о св п тр и я

Че л о в е ч с к и ч ес к и рабо т з р ен и е с тв н н о ч ен и о чхе чс л ау я

й  гла з  в о с п р и н и м а е . Т и п о гр а ф ы  соювует ы   в   с о в т ес и и  с я   и   н е   п ы ат ь с я   елда т й   р еак ц и и  н а е  и з  э от г о   п рав и л а  т  в ы з в а т ь  н ео б ы ч н у ю х   в аж н о  уч и ты в а т ь

В   яз ы к ах о п р едл н н о ц ы . Э т

,  ч и та е м ы о  в ер н

х   с л ев м   н ап р ав лен и о  и  дл

я  п е ч а тн ы х

м   в  в и д

т  текс т  о ч ен ь  с п е ц и фи т   ди з а й н е р а м   с рт о и т ь   св о  м еахн и з м а м и   ч ел о в еч с к о г ь   ч то - то ,  п р о ти в о р е ч а щ е  сло в а .  Е ид н свтен н о е   и ск лю   к одг а   ди з а й н е р   с о з н а ет л ь н  р е а к ц и ю . В о  все х   о сатл ь н ы   о п ит ч е с к о е  в о с п р и яит е . а   н ап раво и   с   сам ог ,  и  дл

,  в з гл я о   н ач л я   в е б - с тр а н и ц

. 6 •   Это

с Ри и н е ж(иа р б о з

. 7  • ы в о т ч о П

т с щй юи я р о т в о п е о н е ч и л е  в у

е п р и т е яж н и я д л гз в я

н а с  в н и з с вт е н н о г

с  н а п р а в л е н и  (gravity).  К а , та к   и   в з гл я о  з а в е р ш е н и

т у нк е

ю г и р ит н

у

о е о х

т   е то р и я

й л  ше мп е т

я  в з гл яд а  в н и з  н а з ы в а е тс к   с и л а   ят ж е с т и   фи з и ч ес к д   п р и тя г и в а е тс я   к  о б л а с т я  ди з а й н а .

ь е а п у  вт с ы т  в  рл о и г о н  вя д о о к  за н а ) zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM

е о н е м н т за

т  в

г И Н А Ч М ИР П Е -

Е

оК н е ч о

, в  яз ы акх

, чеамит ы

х  н е  свел

а  напр во

, о питчес ок

е

в о с п р и ят е   и но е . В  и ври т е  ил и  ар аб с ок м , котры е   юа и чт   в н е ст с я  с прва а  нелвао , логичн о  препдотагл ь  пмря о   п р о ит в о п   н аз ы в аю т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFED н ол ж е   н па р в л е и е  взгляда : и з  право г о  вернхг о  лгу а  п о   вд и ж ес т я п ер к   и  в н и з . у   и  та к  да д   пу и ра ю   н иж м , В з гля д  с ко лзь и т н   ч уи ыт с ле в

а  н ап р ав

о

т  с ле в , нап р в аляс

а  н ап р ав о

я а

В з гля

д  с ко лзь и н о  вс егд

П р о ц ес

р е а сд з о

-

.

с а л о п Ив з и н ь

инме же

я  уо з )

и

д   ес лу д а   с тр а н и

, ч т о  вз гля д у   лу г , к о т р ы й  З ает м   в з гл я д а  сюлуед щ у ю   р сот к  к о н еч н о м  и отг е  вз гля  акнре  -   сам у , в  ме кта , п нрде аз н ачне о о  п ри м ен ен и я о  в о с п р и ят я  долж е е  се у дел т  (ри с . 8).

я на п р в л е ни

с Ри и н е ж (иа р б о з

е

В  ти п о гр афи и  п реобалд н о  теогят т   к  лев о м у   в н ер х м а йв он г л  окйпстеоич  отаьсю.л б в п р ав о , сс кптеа у я  в н и з  н ле е  д о  кон ц а  сртан и ц ы . В с те я  в  та к   н аз ы в аем ы й  й ьын ал фи н ю ю  точк у  в  ди з ай н е . В  елаи д лд я  пиркатчсеог , а  н е  эксп ери м ен альтн ог акто й  харект р   о п и т ч ес к о г ь в ас т я , и  раз шру ат ь   ге о  н

лд

у   раз .  Н а   э т у , та к

он м ь л и а о ф к

я   - и пт р я и   тя н е и   ест

З н а я  э то , в ы  н е  сатн ет е  уди в л я ть с я   то м у ,  ч т о   л о г ти обы чн о  п о м е щ а ю т  в  гл а в н о й  о п ти ч е с к о й  о б л а с т и   (ле в о м  в ернх е м  угл)у ,  а  тек с т  и  э л е м е н т ы  ди з а й н а , со з ад ющи е  ф и н а л ь н ы й  а н к е р , р а с п о л а г ю т   вн и з у . П о  п ту и з   о дн о й   то ч к и   в  др гу ю   в с тр е ч а ю тс я   «го р яч и е   то ч ки »  -   о б ы ч н о   та м ,  дг е   в з гл я д   о с та н а в л и в а е тс я   п ер

а  в н и з

, ь

у  ан ке р

у

т п и

иФ н а л ь ы

й  а н ке

р

д

с Ри

. 8 •   Схем

г о ка с е ч и т п о

о ти я ри п вос

я  пр

и  чтени

и раниц  ст

ы

Ка

с Ри ти я ри п с во

. 9  •   бло Ш а

к   та и з б е ж

я

те м ,  к а к   п е р й т и   в   лев у и де а л ь н о   с о тв е с тв юу щ и л е н  н а  р и с . 9. Р або т а  «Ж и в ы к расн ы й  п р и м е р  ди з а й н а ч а е т   п р е п я тс в и й   ес т в ен н о м

ю   ч аст ь   с тр а н и ц ы й   та к о й   м о де л и м   и л и  м е р тв ы м , в  к о т р о м   в з гл я у   дв и ж е н и ю

аК

ь ен п о и м а ин

к и з б ае т ж

.  Ш а б л о н , ,  п р едс та в »  аде т  п р е д   н е  в срте .zyxwvutsrqpon

я

Д р гу а я   п р о блем а ,  в о з н и к а ю щ а я   в   ти п о г р а ф и и д о б и ть с я  то г , ч то б ы  ч е л о в е к  п р а в и л ь н о  п о н я в ы р аж ен н о й  с л о в а м и  и н ф о р м а ц и и . К а к  и  р а н ь ш е с п е р и м е н та л ь н ы й  ди з а й н  м о ж е т  п р е дс та в л я т ч ен и е  и з  п р а в и л а : с к а ж ем , с о б щ е н и е   м оже т ло ж ен о   в   э м оц и он аль н о й   р еак ц и и   н а   н ек и й н е   в  с л о в ес н о м   с о де р ж а н и .

, -   к а к л  с м ы с л , э к ь   и ск лю   бы т ь   за  о б р а з , а

н ки т с  вр е , не е  противоречащ мй о к ес ч  ои т п у ю zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

З а го л в к SO WHAT IS THIS ABOUT ?  -

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden alms to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .ess file. Yes, really.  .• си Р ы ни а к нз я л гзв

ь  непо ни м ани

. 10 •   В т роб а е  «Жиыв х  зо к ан в  пяин а пер . В ин а  сте чо и  с щюуза ик д л е т ча ти я  к щюм суе д л

, кмор

м  ил и  ммыв тре е гон е ев стни д м  по тсре у  мтгнеа фр

» зковлга о гон вь ле тсиорп м  он и  пюмоаг у  тст ке а

и  н е а  сжре до

т о

т  нтив арп

ь

и

Р а з м у се ят , з агол вк р а з е лд ы   од к м у е н о т в м ы   ви д м , ч т о   з агол во те л ь н ы й  см ы сл , уси ли в а Во т   н ек о т р ы п оль з ован и

и  п р и з в а н .  В  р або т к   м ож е я  вп еч латн и

е   р е к о м е н да ц и ю   з а го л в к о в

•   есл и  в ы   и с п о л ь з еут ж е н  б ы т ь   сам ы

ь  дру г  о т  дгру м   и л и   м ервты м е  и  н ест и  до п о л н и е  о т  ди з ай н а .

и   п о   э ф е к ти в н о м е   в  з а го л в к а й  з а м е тн ы

й   ц ве

» -

у   ис -

х   ц в ет т   в   п а л и тр е

, т о  э т о  дол ;

н  б ы т ь  э н е р г и ч н ы м . И с леод ,  ч т о  с в елт ы е  з а го л в к и  н е  о к а ,  к а к  те м н ы е . Че м   б л и а   к   черн ом у ,  т е м   с и л ь н е е  о ;

е  з а го л в о к

, те м  о н  до л ж е

а   з а жу е н н ы й   ш ри ф т   з а го л в к +   с л е гк ле е  з а м е тн ы м . И н о гд а  р е к о м е н дюу п л о тн о с т ь   н а  ур о в н е   70- 90%; •   п о лез н «Ж и в ы гл а в н ы м ч е го

а

:

•   ц в е т  з а го л в к а  до л ж е ван и я  п овтдер ж адю т з ы ваю т   ат к о г о   в о з д е й с тв и я ж е   ц в е т   з аго ло в к в о з де й с в т ю у т   з р и те л я •   ч е м  з н а ч и м е не ;

ы  оедтли т е   «Жи в ы т   ещ

н  б ы т а   ед л а т   с у та н а в л и в а т

н

ь   з ам ет

-

т   ег о   б о

ь

ы   бы ваю т   ш р и ф то в ы е   к о н тр а с ты .  В  р а б о т е м   и л и  м е р тв ы м »  вс е  з а го л в к и   н абран ы  з а и   б ку в а м и ,  ч т о   в ы де л я е т   и х   н а  ф о н е  п р о   е тк с а ;

•   з аго ло в к и   до л ж н дл и н н ы й   з а го л в о бы т ь   н е п о н я те

ы   бы т к   в ы г л я ди н   ч и та е л ю

Е щ е   о ид н   и н те р с н ы й   ф а к то р ты в а т ь   в   ди з а й н е   з а го л в к о в ко в   п р еп и н ан и я , в  о со б ен н о ст с л е уд т  и з б ега т ь  то ч е к  в  к о н ц в о л и з и р еу т   з ав ер ш ен и е  м ы с л и ловк а  -   н а ч т ь  н о в у ю   м ы сл

ь   к о р о тк и м и т   н е п р и я тн .

.  С л и ш к о о   и   м оже

,  к о т р ы й   н жу н о   чу и , -   э т о   в о з дей с вт и е   зн а и  точ ек . В о б щ е   го в р я е  з а г о л о в к о в . Т о ч к а  с и м , тогд а   к а к  с м ы с л   з а го ь   (р и с . 10).

м т , -

-

и Т п о гр а ф

я

сО о н в

й т ес к

т

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т   з ан и м ае О сн овн о й   е кт с П р е дп о л а г е с т я , ч т о  п о с е ти е л охт я  б ы  белг о  п р о с м о тр и т с я  ти п о г р а ф с к о й  п р а к ти к ч и вост ь  с о б щ е н и я .

т   боль ш у

Д л я   э ф е к ти в н о де р ж и в а й е т с

ы   с  о с н о в н ы х   р е к о м е н да ц и й

ь   е д бу . Н о  слеод в ан и е  м о ж е

й  р а б о т ь   с л е юду щ и

ю   ч аст ь   с тр а н и ц ы т  ег о  ч и та ь  ил е  с л о ж и в ш е й т   ум е н ь ш и т ь   од х м   ет к с от

. и -

м   п ри

-

:

•   С та р й те с ь ,  ч то б ы   с тр о к а   с о с то я л а   п ри м ерн о  и з 60  с и м в о л о в .  В  тек чу е м   ми р е   в е б - ди з а й н а   эт о   н е в с ед г а   л е гк о   о б е с п е ч и ть , о с о б е н н о  и з - з а  н е   всегд а к о р е к тн о й   реали з ац и и   свой ст в   CSS,  уп р а в л я ю щ и х   дл и н о й   с тр о к и ,  к   п р и м е р у ,  m i n - w i d t h  и m a x- wid t h .  О нд ак о  э т о  селуд т  и м е т ь  в  в и уд , даж е п р и  те к чу е м   ди з а й н е . Е сл и  с тр о к и  с л и ш к о м  дл и н ные ,  т о   и х   с м ы с л   с та н о в и тс я   т р д ну е е   п о н и м а ть . Бо л е е   то г ,  ч е л о в е к   во бщ е   може т   о тк а з а ть с я  о т ч те н и я  те к с та ! •   В ер н о  и  о б р а нт о е сли ш ко м   к о р тк и П рост о   рт д н у т ы   е тк с а .  К о р тк и а к ц е н ти р о в а н и

. В о с п р и я ти х  с тр о к а х о   ч и та

е  с м ы с л , п о р я дк ь   дл и н н ы

е  с тр о к

и  л уч ш .

я  в н и м а н и я

а  п аде а  20 с и м в о л о в е   и  уз к и е   фр а гм ен е   п р и м ен ят

т  и  п р

и . -

ь  дл

я

•   В  а н гл о яз ы ч н ы х  тек сат х  п р и н я т о  с ч и ать , ч т о  абз а од л ж е н  со стя ь  п о  м е н ь ш е й  м ер е  и з   рт-ех ч еыт р е п р ел д о ж н и й . В  Web дл и н н ы е  аб з ац ы  н е  п ри всету ю с ят , сч и астея , ч т о   к о р тк и е  а б з а ц ы , со едр ж ащ и ед й с в т и е т л ь н о  в а ж н у ю   и н фо р м ац и ю , б о л ь ш е  п од оя д х т  дл я  срыед , в  к о т р о й  о нд о г о  щ ел ч к а  досатч н о , ч от б ы  п о к и н ту ь  с тр а н и ц у . +   П бул и к у абз ац вай т Э то вог л е гч •   И з б ега й т м е ж с тр о ч н ы бли з к в юу щ е г см ы сл б а ыт в а т с ч и ат я

я   дл и н н ы ы   бы л е  до к му ен , б ез сул о в н о о   в о с п р и я ти я е  о р и е н ти р о в а ть с

е  до к му е н ты и   н асы щ ен н ы м т  н а  р а з дел , сп о с б втеу , п о с к о л ь к

е   сли ш ко х   и н те р в а л о в о  и л и  с л и ш к о о   и   п о с л е юд у щ е г а   дш у х а е с т я ь  и н ф о р м а ц и , ч т о   с о б щ е н и

,  с ат р й етс ь и  и   к о р о тк и м и ы  с  п о м о щ ь т  улчу ш ен и у   ч и та е л я  в   до к му е н те

м   ш и роки м  дал ек .  М о з ю е

.  Е с л о  о тс о и о   етк с а г   п рост  л и б о  и з - з  з а к о н ч и л о с ь

ц х е -

,  ч то б , р а з б и

ы -

ю  з а го л о в к о в ю   см ы сло ю   с та н о в и тс

. я

.

х   и   сли ш ко м   уз к и и   абз а ц   сли ш ко т   о т   п р е дш е с т ,  в о с п р и я ти е   ег о   п е р с ат е т   обра а  п ер г зу к и , л и б .

х м о о

•   П о  б о л ь ш е й  ч а с т и  с ат р й етс ь  н е  и с п о л ь з о в а т ь  р а з н ы е  ц в ет а   в  о с н о в н о м  тек с т .  К а к  и   в  счлуа е  з аго ловков , р а с к р а с к а  тек с т а  и н о гд а  п р и н о с и т  б о л ь ш е в р еа д , ч е м  п о л ь з ы . П р и м е н я й т е  ц в е т  то л ь к о  дл я  ак ц е н ти р о в а н и я   вн и м ан и я  и  дл я   в ы де л н и я  с с ы л о к . В   рабо т е   «Ж и в ы м   и л и   м е р тв ы м »  адж е   в   с ы лк а х

И з ящ н ы

й  ди з ай

н

zyxwvutsrqpon

 html file a nd ess file  to work on a copy locally. Once п р и м е н я е тс Download the samplezyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA я  то л ь к о   н ебо ль ш а я   вари ац и я   о те н к а , you have completed your masterpiece (and please, don't  submit half- finished д а   и  т о  л и ш ь   в  т е х , ч т о   н а о х д я т с я   в  о с н о в н о м   е т к work) upload your .ess file to a web server under your control. Send us a link to the file and if we choose to use it, we will spider the associated images. Finalст е   (р и с .  11).zyxwvutsrqponmlkjihgfedcbaZYXWVUTSR submissions will be placed on our server. с Ри (дй а з и

. 11 4- и ц а и р  а В н  «Жиы в

я т  це в а  дл я о сл ыс м  ил и  м » ы в т рме )

к  вр т у н

и г о н ов о нс

о тс к  те

а

це к А н т и р о в а н ы

т

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

•

й т е ск

у   см ы с

л   а к ц е н ти р о в а н н о г ь   вн и м ан и в  даж е  п о щ р я е тс я м   в  и с п о л ь з о в а н и

ы   о тв л е ч е  ц в е то

о   ет к с т е  о т   о с н о в н о г . Г лав н о и   ц в е то в

о  срт о ч ек е   к о р о тк и м и

•   кА ц е н т и р о в а н н ы и л и   в   ви д н овн ог о  тек сат о п ит ч е с к о н я т ь  с м ы с с я  и  к  и л ю с тр а ц и я осн овн о й ес т в ен н ы

,  р а з м е щ е н н ы й   н а   п оля н   н е   п реры в ат ь   п от к   ос ь   его . Е сл и  о н   н а р шу а е е  в о с п р и я ти е , т о  с та н о в и тс я  сло ж н е е  п о л  о с н о в н о г о  тек сат . Т о  ж е  с а м о е  о тн о с и т м   -   о н и  до л ж н ы   н е   п ре ы ват   п от к   и   о тв л е к а т ь   о т   етк с а ,  а   с лжу и т м   до п о л н е н и е м .

•   Ч и та е л п о дп и с ь п о лн яю те р и а л

ь   о ж и да е т .  П о дп и с т  к о н те к с

т   до л ж е м   сам

и , . -

а   в   то м , т о   п р и м е е  -   б ы т ь  п о .

•   Ак ц е н т и р о в а н н ы н ес к о ль к л а т ь   бо ле

е   ц и та

й   те к с , п р и ч е

ь

н   з ан и м ат и  с тр о к и  л уч ш

, -

ь   в с ег о е   ед -

. й   те к с т ,  одлж е , а  до п о л н я т

,  ч т о   п о д   и л ю с тр а ц и е и   о ч ен ь   п олез н ы т  и  п о м о г а ю т   л уч ш

,  п о с к о л ь к е   ус в о и т

й   е дб у у   до ь   ма

х т ь ь т -

.

Р еш а я   воп ро с   о   то м ,  с к о л ь к о   ет к с т а   може т   бы т ь  н а т  с о б р а з о в ы в а ть с я   с  п р а к ти ч о дн о й  с тр а н и ц е , селуд н о с ть ю .  П о   б о л ь ш е й   ч а с ит ,  л ю д и   н е   лю бя т   щ елк ат ь п о   с ы лк е   «Дела »  ч а щ е ,  ч е м   н е о б ох ди м о .  П о э то м у н жу н о   соблю ст и   то н к и й   бал н с : о с та в и т ь   н а  с тр а н и ц е  н е  с л и ш к о м  м а л о   и  н е  с л и ш к о м   мн ог о   ет к с а .

р П о ум д а н ы и н ыз щ я

е т ш ры и ф й ди з а й

, н

Д и з ай н  р або т ы  «Жи в ы м  и л и  м ервты м »  в ы гляид т  и з я щ н о  благо др я   от м у   вн и м ан и ю , к о т р о е  М ай к л  П и к  уе д л и л   м елк и м   де а т л я м   и  уадч н о   п од бран н ы м   ку р а ш е ния м   в   ви д е   си м в о ло в   и з   ф а н та з и й н ы х   ш р и ф то в ,  с п омощ ь ю   котры х   в ы с в еч н ы   и н ет р с н ы е   гр а н и . Д о бав ь т е  к  э от м у  тверод е  слоедван и е  ти п о гр а фс к и м  п р и н ц и п ам ,  и   в ы   п о й м ет , ч т о   в   о с н о в е   в ы р а з и те л ь н о с т и работ ы   леж и т   то н к а я , н о  я с н о   о щ ущ а е м а я   п роста .

е нйа з Ди

:,• ':•

Щ

''  

.

'

T h e Road tt EnU jht e nm e n Lllterlng * dark and draar,

'

- .• . . , .

;

•

• ™и u y u »p u t «»№

. о

р й Дэ в Ш и (Dave Shea) www.csszengarden.com/005

д аж Ж

а  кров

- . . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA '  'i ' r

J ^ S I S J K

Я | ( , Ц

' •"

ц

Ш г а

brokaoCSSaupport

I S

\

' ^" h

B.

И

* ' - '-

•

"

^f l»

E e

'

к

Л

:

^

^

^' ^j^^K^m i^r a t e a ' a t t o r ^o t ' t o ll ' НИР * i Ilk* № • W3C. WaSP aiu

.;.;*

H f 4  Я

" ^ " JBtffll

br ow»* f - a p»c iBe U g a

I nc ompa Hbla D O M * , a m

Ш

t n

f f l H

м  

°|и У

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFED и а н в о лс е И д е м з о с тв н е ж й мрианвотр фо я zyxwvuts

| 'Г *мт а «В ? о п

^

of,  the  ^ о Г ^ ^ ' Ю

)

И н о гд а  дл я  п р о дв и ж е н и я  в п е р д   п р и о х д и тс я . п о л ь з о в а ть с я  в о с п о м и н а н и я м и  и з  прош л о г Р а б о т а я   н а д  х а о т и ч е с к о й   «Ж а ж о д й   к р о в и » , Graphic zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDC Дэй в  Ш и  о б р а ти л с я  к  фрту и с ти ч е с к о м у   ис j  ( i l a * a r c c m a a n i v I t h a t w e n C I S nov'. Lta c a n irna eJwa «a a c a r t l a a * * a* « t h e S* ». . f t * * ««f r i_St oif t « * o t a dva nce d t f i a t i l

§ i i t i

«П 1

*^«.«"«Г " ta* "*^M*ri.

Hi»

affjMf».

• M i ty t h a a t y l a О с п и ь

ях1 < ч a t ( l i n t • ve r k a d s l i U a . Wit ( o l l a v ' * t o l a a f п пе г

and и м

"

w

H

п .

* C U t  m р и Ы *

М

мтр

м

!It M * nd с »* . Ш

к

1 "

-

"

•

i w

: . ' i . - S ' . s r ' S. . s r ^ r u г

M

М

i f k> a 1 M b M r w u n o a r your е о п г Ы 5 * ^* ( ш н а у * * ia № a M a »nd И wa с г о о м ю и м  < w * * « t h e W* * »f Л * »***Ci»»W t ma OM Ftn» а kubiufsliDfi* wm Da placad on ouf aafrafi

tL oadaaey,. but not anotijfl lu« W. M M a ,

i B e n e f i t s S ^ r r " l u a p Vi a t l e n , a nd a r e e our c a we c a м

б

г

Ј

S

r

f

9

v

:

, CU1

1 U I t n Car«an 11 «С л * f uut Wu ft* iNatt Ы а ^ х ^ а ir liki «г а п к ц l U K . lh«o nlyr «J >aa

d i f f a t o n a l у * o w n e o a ^l u t a l y v a l i d CB№

*u t ine a

га ъ

i n f o r M t i o n o i i o n  ct t h a l i n n a va ila b le , r u l t n s w a t i ce aspllanc» i s i t l l l a o a a t l a a a a p ip a d i a a > and va . i * : m а кр о с с you t o coaw up v l t h p m o l - p »i ( a c ». a n t d a t M t i a > f i « t by evajr »D t

Wv a t k W l / э и

t u b f ^l uf 'З П

l h l a ^i i ^ L a w a l * * W

но гк

и

' а

с с оуМ

Ч

law* . И а и

а

toae «oia < * a nM »t m a w i a i » • miM from

м яр п . • onatiratloa. lou retain (uli  copyilght on your incite .  bjt ve «ail you n iUH  your  CM S  undai !WM...W!....lftl»...ll4iA  ao t)tat  othon say Utrn  fioa you

K

. tod ь у   tmtmtmj

О сн о в и з  л и ч н о г ки м и д в у цх в е т н а ш елк о в ы н ял и с В  о ч ен п о л ь з ю у ст ц в е ат в и л  н ш ис ь з ова ш и с в  ф о р м а т воз м ож н ост

у  о браз н о г

о  р яд а  Ш и

а  сосавти л . В  сочеатн и и   с ло ям

и  ф о т гр а ф и и о  арих в и zyxwvutsrqponm  с  несколь   м аски рован н ы м и   п о л чу и л а с ь я   р е п р о д ук ц и я ,  н а п о м и н а ю щ а я е   тр а ф р е ты ,  к о т р ы е  чста о  п р и м е ь  дл я  гр а фи ч ес к о г о  ди з ай н а  в  п р о ш л о м . ь   о гр а н и ч е н н о й  ц в еот в й   п а л и рт е  и с я   от л ь к о  ч е р н ы й , к р ас н ы й  и  б елы й . Ч то б ы   п о дч е р к н т у ь   р е з к о с ьт , о н  оаст а  все х  и з о б р а ж е н и я х   к о н р ут ы , окт аз в  о т  сглажив ан и я  н ер о в н о сетй . А  в о сп о ль ь  слгаж и ван и е м  п оердх в   (dithering) е   GIF, о н  см уе л  то н к о  н ам ек н ту ь  н а и  с о в р ем н н о й  тенх о л ги .

В о з м он ж с т

и о р мф а т и р о в а н и

З а д ни

е ан с т ро

с пом ьощ т ок фе э ф

. 1  4- ме и р П г о ркс е ч и тс и р у т  фу к  Ф . Т . Мт т е н и р а

г И Н А Ч М И РЕ П В  итпо граф и  цо тев н о  вос принм еа ы и н е   д м же у  форм о а н т чп е а н , зваис т а  теск т  беду т  неамичт ым но ш е ни я  яс теялв я ма х и  леирты , мд еж ср о тк е   и  мд же у  смраоктч ив е л н ч ы  мб вукен ыж

о а н й а дз и , и  «Les mots en liberte futurists» (1919)

Е м  нзыаюв й  общ и й  лерит т  пд реж  то

т  фат к у  б вукам

т  н е  оенот к  кр ас ки , а  зреьлит й  тон  фрмга тне а  тескат . Сошн т е ы  и  по вернхюсьт , н а  ко тр й  он а е  всге о  о т  корнтас ; бе з  корнсат . Поб ныч м  протдку м  эогт о  с о т , чт о  п р о мкут еж и   -   д м еж у  ш рит и   р тв н у и  с олва , д м еж у  смоавл и  в и   -   зв аи с я т  о т  тощл ин ы  шт фир а  и х  и  мсудолвны еж х  иенртвлао .

я ю

в

Б е с п о р я д о ч н о с ть ц и аль н о   п о д ч е р к н ут п оз и ц и он и рован ч т о   с о з ад е т   в п е ч а тл е н и н ы х   г а р н и ту р   ш и рок ф ут р и с т а м и ,  п р с я   та к ,  ч т о б ы   с о з да т ди с к о м ф о р т   (р и с

с Ри и н жо д у х

я zyxwvutsrqpon

т и п о г ср и а к ф

х

zyxwvutsrqponmlkjihgfedcbaZYXWVUTS

, о щ ущ а е м а

я   в  «Жа ж д

а   о р ган и з ац и е ы   и   о тф о р м а ти р о в а н е   а хо с о  п р а к ти к о в а л о с и   э т о м   ет к с ь   м акси м аль н ы . 1).

.  П р и м е н е н и т   сп ец и аль н

е  к р о в и » , сп е й   те к с та ;  а б з а ц ы   п о- раз н ом у е   раз ли ч ь   ди з а й н е р а м и о   р аз м ещ ал й   з р и те л ь н ы

, й

Ч то б ы  до б и ть с я  ч его - т о  н е о б ы ч н о г о  в  «Жаж д е  к р о в и » п о н а од б и л о с ь   р а з м е с ит ь   абз ац ы  так , ч то б ы   о н и  о бет к ал и  др у г  дргу а  и  з а п о л н я л и  с тр а н и ц у   б ес п о р яд ч н ы а   ч те н и я  та к я   о р га образ ом .  С  то ч к и   з р ен и я  уодбсвт н и з ац и я  м аетр и ал а   а лд е к а  о т  и еадл , н о , в о з м о ж н о , в з а м е ит л и  и н етр с н ы й  э ф е к т : м еж бкув ен н ы е   и н е рт в а л ы  и  п л о нт о с т и   ш р и ф то в  р а з л и ч а ю тс я , и з - з а  чег о  р а з н ы е   п а р гр а ф ы   и м ею т   раз н ы е   о те н к и .  Н а  р и с . 2,  дг и з о б р аж ен и е  слкег а  р а з м ы то , ч то б ы   ск ры т ь   о ед т л ь н ы л и те р ы , в л и я н и е  п л о тн о с т и  ш р и ф т а  о чт ел и в о   в и дн о В  да н н о й   работ с л уч а й н о   м ен яю щ и й с с тр о ч н ы е   и н те р в а л ы можн о   до б и ть с К ак о й  и з  ф р а г м е н то в ч е   ч и та ь ?  Р е ш и та м и   в   с о б с тв е н н о э т и   со браж ен и я

е   н аи боль ш и

й   и н те р е т   ш р и ф та я   и   г а р н и т ур о   в о с п р и я ти

я  ц в е ,  п о л я   раз н ог , п р е дс та в л е н н ы в   п о и гр а т м   п р о е к те .

ь   ти п о г р а ф с к и м ,  н е   пу с к а й т

с   п р е д с та в л я е . И з м е н я

оВ з м н о с ж т о р м ф а т и р о ва ни В   «Жаж д с р е д вт п оми м н и т ур

, м ы е е . т

я  м еж

-

у   ш р и ф та я   со бщ ен и я х   н а  р и с . 3, лег и   э ф ек е   и з   ви д

В  б о л ь ш и н с тв е  счлуае в   ц ел ь  ди з а й н а  -   п о слеод в аетль н о  в ы едр ж а т ь  оид н  и  то т  ж е  ц в е т  в о  все м  о с н о в н о сет . В  CSS н е  та к  м н о г о  ср есдвт , п о з в о л я ю щ и э т у   з а чд у . Н о , хот я   з а б ы в а т ь   о  н е й   н е  сет улд бо ле е  в аж н ы е  в ещ и  -  к  п р и м ер у , ч кето с ь  и  дл и н

•

ы

, . у -

м  тек х   р еш и т , ест а  срто к

ь ь  и .

и я е   крови »  ш и р о к а   ф о р м а ти р о в а н и о   та к и х   осн овн ы х ы   ш р и ф та .

о   и с п о л ь з юу т с я   етк с а ,  к а к  з а д н и

я   раз ли ч н ы ,  и м е ю щ и е с е   р аз м ер

е я   в  zyxwvutsrq CSS, а   и   га р -

и Т п о гр а ф В  с п е ц и ф и к а ц и аг х   и ч ес к у г о  п о Н ек о т р ы н ям и з ай н а к о гд а

я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и  CSS, а  р а в н о  в  м н о г ч и с л е н н ы х  к н и   р к у о в сд в т а х   п о   э т о й   ет м ,  в ы   н ай едт е   те н х и ю   и н фо р м ац и ю  п о  к а ж до м у   с в о й с вт у ,  н о  н и ч е  п о в д у   и х  п р и м е н е н и я  в  п р а к ти ч е с к о м  ди з а й н е е  в к л ю ч ен н ы е  в  CSS с в о й с вт а   г лб у о к о   кор  уохяд т  в  о с н о в н ы е  п р и н ц и п ы  гр а фи ч е с к о г о  ди , н о  и з  тенх и ч ес к о г о  р ку о в дс тв а   в ы  о б  э то м  н и  н е  уз н а ет .

Н иж е  бу д т  о п и сан ы  н аи боле е  р ас п р о с тан ен н ы св т а , о тн о с ящ и ес я  к  ф о р м а ти р о в а н и ю , и ед н и е  и  в о з м о ж н ы е  сп о с б ы  п р и м е н е н и я с в о й с тв а   (к   п р и м е р у ,  f o n t - f a m i l y ,  f o n t - s t y l e  и  f o n t - we i gh t )  о п щу е н ы робн о  р ас м арти в аю ст я  в  дргуи х  раз едл х

Пр и м е н и

е с т ил е

. -

е  свой х   п р о и со х ж . Н ек о т р ы е fo n t - size, , та к  ка к  п од  к н и ги .

й к т е с тк

с Ри т с к те

. 2  •  л Пос а зны  ра

е и н а в мы з  ра е к н  оте т

с тя и в о ан  т с

я о н д  и в

, чт о  у о  бк о л

в

и

у

О п и сы в аем ы е  в  э то м  р аз едл е   с в о й с вт а   п о з в о ляю т  з а да в т ь   фо р м а т  в п л о т ь  д о  ур о в н я  о тде л ь н о г о   си м вола . В  б о л ь ш и н с тв е   с ч л уа е в   у   ш р и фт а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  не ж л о д  бтьы  п р е од п р е д л н н ы й  в ар и ан т , с о тв е с тв юу щ и й  в ы б р а н н о м у  с ти л ю . З н а к о м с тв о  с о  с п и с к о м  ш р и ф т о в , уста н о в лен н ы х  н а  в а ш е й  м а ш и н е , м о ж е т   п роли т ь  све т  н а  то , ка и е  в а р и а н т ы  ест ь  у  к аж од г о   ш р и ф та .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

  font- variant

В С О ЙТ

У  э то г о  св о й свт а  о нд о - еид н свт ен н о браз и т ь   е кт с т   м ален ь к и м со т а  п е р в о й  б ку в ы  к аж од г в е с ь   о с та л ь н о й   е кт с т   п е ч а т ес ным и   б ку в а м и .

е  н аз н ач ен и и  з а г л а в н ы м о  с л о в

а  о сате я   м ален ь к и м

С в о й с тв о   м оже т   п ри н и м ат ь   о дн n o r m a l  и   s m a l l - c a p s .  У   б о л ь ш и н с тв в ари ан т а  с  м а л е н ь к и м и  з а г л а в н ы м э то м у  б р азу е р   п рост о  ум е н ь ш а е т гл а в н ы х   бку в .  П о э то м у   с ед л а н н о п р е до п р е д л е н н ы х   в а р и а н та х   f o n t - v a r i a n t  н е  о тн о с и тс я : П ри м е

р  и с п о л ь з о в а н и

к  в ы гл яди

я  о б ы ч н о й

, а

и   з а гл в

х   з н ач ен и й а   ш р и ф то и   б ку в а м и   н ет  р а з м е р  о б ы ч н ы е  в ы ш е   з ам еч ан и ш ри фт а   к   с в о й с тв

-

о   и з   вд у

: в , п о х  з а е  о у

я   f o n t - v a r i a n t :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

#quickSummary  p { font- variant:  small- caps; }

Ка

е  -  о от . В ы

и   б ку в а м и

с Ри

. 3  • р  ем При

ы г о н з а р

о т е цв

а т  шф и р

а

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т   р е з л уь ат

The  B eauty of  CS S  D e sign

И Н Р ПМ Ч А Е

он тевЦ

Е

й н  ва и р а

т  рси

. 2 и  3 см . н а е к д а вл к

A  DEMONSTRATION   О У  WHAT CAN  BK ACCOMPLISHED VISUALLY THROUGH  CSS- BASEIJ  DESIGN. SELECT ANY STYLE SHEET  PROM THE  LEST TO LOAD  Г Г  INTO THIS PAGE. DOWNLOAD  THE SAMPLE Н МТ

Ь  Ш

Е   AND  CSSJOLE

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

.

В о з м он ж с т ЕВ О С Т г  zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA В и ц а к и ф си ц е п о д м  св тс й о в ц и н а р тс

г   ЕВ О С

и  CSS пн е д е в и р

о  дж а

е ш ь бл о

е е л а  дт е й  о  кж а е и ц а з и  сл т и в о  шт ф и р ; см . е д з а р л  «15 Fonts» н а е  www.w3.org/TR/REC- CSS2/  fonts.html# font- styling.

Т

У  кго д ж а о  и i n h e r i t . Он т ч о е у в  дтс й е е с в м а в тс й со в

з м еы а д  ож усб о е я л в а т с за т  дл я г о кс ь л е  рт и д о м  CSS, м о тэ о п

х   тс й о в т е з у ба р

р т и н м пеи р о а т  энм е л у  м ы  н е е д у б

в  етс

ь  тж к а е  ине ч анз е ь  т о  ж е е и н е ч а  н з , . Эт о с т ис о н  от я  к о м т а нм ио уп ь  ег о о нв я .

и о р мф а т и р о в а н и

вСо й с т в о

я

zyxwvutsrqponmlk

  text- transform zyxwvutsrqponmlkjihgfed

о   t ext - t r a n sfo r m К а к   и   f o n t - v a r i a n t ,  с в о й с тв п о з в о ляе т   боле е   то ч н о   уп р а в л я т ь   п рео браз о в ан и е м с тр о ч н ы х   б ку в   в   з а гл а в н ы е .  О н о   м о ж е т   п ри н и м ат ь с л е юду щ и е   з н ач ен и я :  c a p i t a l i z e ,  u p p er c a se, l o w e r c a s e  и  n o n e . З н ач ен и е  c a p i t a l i z e  п р ео б р а з еу т  в  в е р нх и й  р еги с т у  к аж од г о   слова , о с та в л я я   вс е  п р о ч и е  бе п ер в у ю   бку в и з м ен ен и я ; з н а ч ен и е  u p p e r c a s e  п р ео б р а з еу т  вс е  бк у в ы  в  в е р нх и й  р еги с рт , l o w e r c a s e  п е р в о ди т  вс е  бку в ы   в  н и ж н и й  р е ги с тр , а  п о п е   н е  и м е т   в и ди м о г о  э ф ф е к та . П ри ме

р з -

я   t e x t - t r a n s f o r m :zyxwvutsrq

р  и с п о л ь з о в а н и

#quickSuminary p { text- transform: uppercase;

Ка

к   в ы г л я ди

:zyxwvutsrqponmlkjihgfedcbaZYX

т   р е з л уь ат

The  B e auty ofzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP   CSS   D esign

A DEMONSTRATION  OF WHAT CAN BE ACCOMPLISHED  VISUALLY THROUGH zyxwvutsrqponmlkjihgfedcbaZYX  CSSBASED  DESIGN. SELECT ANY STYLE SHEET FROM THE LIST TO LOAD  IT INTO THIS PAGE.

вСо й с т в о

  text- decoration

С   сам ог о   м ом ен т а   з а р о ж де н и я   В сем и р н о й   п а ут и н ы ги п ер с ы л к и   п о дч е р к и в а л и с ь ,  с в о й с тв о   ж е   t ext d e c o r a t i o n  п о з в о л я е т   уп р а в л я т ь   п о дч е р к и в а н и е м   и  д р уг и м и   э ф е к та м и  н е  т о л ь к о   дл я   с ы л о к , н о и  д л я  л ю б о г о  др уг о г о  те к с та . Д о п ус т и м ы е  з н а ч е н и я : n o n e ,  u n d e r l i n e ,  o v e r l i n e ,  l i n e - t h r o u g h  и Ы   i n k .  З н а ч е н и е  п о п е   н е  и м е т   в и ди м о г о  э ф е к та , u n d e r l i n e  до б а в л я е т   ли н и ю   сн и з у   (п о дч е р к и в а н и е ) ,  o v e r l i n e  -  л и н и ю   св ер х у   (н а д ч е р к и в а н и е ) , l i n e - t h r o u g h  -   л и н и ю   п оп ере к   те к с т а   (п е р е ч е р к и ван и е) ,  a b l i n k  в ы з ы в а е т   м и ган и е . Н ав ер н о е ти в о р е ч и в ы п осколь к Ч то б р е к о м е н да ц и й

,  t e x t - d e c o r a t i o n  я в л я е тс м  и з  все х  с в о й с т в  ф о р м а ти р о в а н и у   м оже т   вы з ы ват ь   р а з др а ж е н и ы   и з б еж ат ь   э то г , п р и де р ж и в а й те с :

•   поп е   - п о д р а з му е в а е т с то в ;  з н а ч ен и есл и  о н о  о тл и ч н

я   дл е   и ме

т   см ы с о  о т   п о п е

•   u n d e r l i n e  -   п р и м е н я й т л о к .  Е сл и  тек с т   п о д ч е р к н ту с ы лкой , т о  п о л ь з о в а те л н и е .  С к о л ь к о  р а з   в ы   с а м

я  б о л ь ш и н с тв л   з адват .

я   сам ы

м   п ро я  тексат

, .

е   у   ч и та е л я ь   с л е дю у щ и

ь   яв н о

а  э л е м е н ,  то л ь к

е   то л ь к о   дл я   ги п е р с ы ,  н о  н е  я в л я е тс я  ги п е р ь  бед у т  в в ед н  в   з аб лжуед и   п ы та л и с ь   щ е л к н ту ь  п

х о о

Т и п о гр афи п о дч е р к н от у м В  ти п о г р а ф и ди ц и о н н ы н и я  к н и г р е к ти в ы

я у   ет к с ут и  у  п о дч е р к и в а н и й  с м ы с л , н о  н а л и ч и ;

,  н е  я в л я ю щ е м ус я  др гуо й : так

, н а п р и м е р е  ги п ер с ы л о

•   o ve r l i n e  -   в  м а етм а ит к н я е ст я  дл я  о б о з н а ч е н и ш е  о н о  п о ч т и  н и к о гд

я   с ы лк о й , бо ле

, выдел яю к  в н есл

е   н а дч е р к и в а н и я  с р е дн и х  в е л и ч и н а  н е  и с п о л ь з еутс я

е   рт а т  н аз в а о  с в о и  к о р

? -

е  п р и м е , н о  б о л ь -

;

•   l i n e - t h r o u g h  -   п р и м е н я й т е   п ереч ерк и в ан и то л ь к о  дл я  в ы дел н и я  тек сат , к о т р ы й  п о те р я л  ак а ут л ь н о с т ь   в   к о н ет к с е   о бъ ем лю щ е й   с тр а н и ц ы в о бщ е- т о   з а с л жу и в а е т   и з ъ я ти я ,  н о   п о   к а к о й - т п ри чи н е  вс е  ж е  о с та в л е н . В  и едал е  л ю б о й   в ы ч ер к н ты у й  тек с т  до л ж е н  с о п р о в о ж да ть с я  б о л е е  н о в ы м хо р о ш и м   п ри м еро м   п ри м ен ен и я  м о г у т   с л жу и т с и с ет м ы  учет а  и с п р а в л е н и й  и  в ед н и я  в е р с и й ; 4-   b l i n k  -  есл и м и ти р о в а т н а ,  с ч и та й те Н а   з а р е   р а з в и ти з л о пу о тр е б л я и ед р ж и в а е т   ег П ри м е

и  у  в а с  н е т  а б с о л ю тн о й   н е о б х ди м о с т ь  м и г а ю щ и й  та й м е р  в и де о м а г н и то ф ,  ч т о   з н а ч е н и я  b l i n k  н е   сщу есвт у я   Web  те го м   < b l i n k >  ч р е з м е р н , а  сегонд я  н е  к а ж ды й  б р азу е о  э к в и в а л е н т  в  CSS.

р  и с п о л ь з о в а н и

-

е  и о ; ь и . о

р  п о д

-

я  t e x t - t r a n s  form :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

#quickSummary p { text- decoration:  line- through; }

Ка

к  в ы гл яди

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т   р е з л уь ат

The  B eauty of  CS S  D esign

A demonstration of what can be accomplished vioually through zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  CSS based dotrign. Select any stylo sheet from the list to load it into this page.

Downolad the cample htralfilo  and zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

п р а У в л е ни

е п р о м е у ж т ак м

и

Вы ш фо н о мощ н ы

е   м ы   в и де л и ,  к а к   к о н тр а с т   м еж д у   л и те р а м и  и м  в л и яе т  н а  в о с п р и я ти е  тек сат . П р о м е ж тку и  -  э т о й  в и з ау л ь н ы й   и н с т р му е н т , а  б л а го да р я  р а з в и ты м   в о з м о ж н о с тя м  ф о р м а ти р о в а н и я  в  CSS, и м и  е щ е и  легк о   пу р а в л я т ь .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ойс то вСв

 line- height

В  п р о ш л о м  ти п о г р а ф ы  о дтел я п ол ск ам и   м ягк о г о   сви н ц с щ у е с вт ю у щ и й   а н гл и й с к и ч ен и я   м е ж с тр о ч н о г о   и н те р в а л

и  с тр о к и  др у г  о т  дргу а   (lead),  о стю д а   и   п он ы н й  те р м и н  leading дл я  о б о з н а ,  и л и   и н те р л и н ь я ж а а

е .

В о з м о жн с т

и о фр м а т и р о в а н и

я zyxwvutsrqpo

CSS п о з в о л я е т  уп р а в л я т ь   в ели ч и н о й  э то г с  п о м о щ ь ю  с в о й с вт а   1 i n e - h e i g h t .  Д о п ус ти м в а т ь  ег о  з н а ч ен и е  в  а б с о л ю тн ы х  и  о тн о с и те л ь н ы н и ц ах ,  ку а з ы в а я   дл и н у ,  п р о ц е н тн о е   о тн о ш е н и к л ю ч ев о е   слов о   inherit. О тм е ти м яв н ч ен и ес л м е н я е тс л ю тн ы

,  ч т о   дл я   з н а ч е н и о  з а д в а т ь  е ди н и ц у е   1 . 2 -   эт о   т о   ж и  е ди н и ц а  н е  з адн а я   к оэ ф и ц и ен й   р аз м ер .

П ри ме

я   с в о й с тв  и з м е р е н и е   сам о е , т о  с ч и ат е с я т  м а с ш та б и р о в а н и я

р  и с п о л ь з о в а н и

о   и н те р в а л

а о   з ад х  еид е   ил

и

а   lin e - h e igh t я  н е о б я з а те л ь н о . З н а ,  ч т о   1.  2 е т   и л и   120%; , ч т о  к  тек ст у  п р и , а  н е  аб со -

я   lin e - h e igh t :

tquickSuminary  p  { lin e- h eigh t :  0.8; Ка

к   в ы г л я ди

т   р е з л у ь ат

:zyxwvutsrqponmlkjihgfedcbaZYX

The  B eauty of  CS S  D esign

sheet from thelist to loaait into mis page. Download the sample html file and css_fite The Road to Enlightenment

ойс то вСв

г ЧАНИ Е ПРИМ ы н тс е в з И й а р г о п ти д ы  сл аз к : «Вйи кся е б ос п н  утс а р к s p a c i n g  с ю ь тсо н  ожор тс мын и  в но г у е г дшем ноа

 letter- spacing

М е ж б ку в е н н ы й   и н те р в а л   можн о   р е г лу и р о в а т ь   с  п о мощ ь ю  с в о й свт а  letter- spacing.  О н о  м о ж е т  п р и н и м а т з н ач ен и е  normal и л и  з а д в а ть с я   в  в и д е  д л и н ы  п р о м е ж к т у а , д о б а в л я е м о г о  к  с т а н д а р т н о м у  р а с о т я н и ю  м еж Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA д у   б ку в а м и . ф и р е д е Фр к ауд  Г и  (Frederick Goudy) ож а н д т ы н е в мк уб ж е й  л а в р е т н и , , кт о е  ия нм ез И з- з а   н и з ко й  р а з р е ш а ю щ е й   сп особн ост и   э к ран а  и з ь  о» уцв с. П е тй у з ь ло ь  о в тс й о вс м  letterм ен ят ь   м е ж б ку в е н н ы й   и н те р в а л   в   осн овн о м   ет к с т , ел с и  н е ти хто е  бт ы ь  оне ивб можн о  то л ь к о  с  до в о л ь н о  б о л ь ш о й   д и с к р е тн о с ть ю о  са от к ! zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA э т о   в ы г л я ди т   п о - л ю б и те л ь с к и . П о э то м у  н а и б о л е е  ра з му н о  п р и м е н я т ь  с в о й с вт о   l e t t e r - s p a c i n g  в  з аго ловка х   и  н е б о л ь ш и х   ф р а г м е н та х   ет к с ат . П ри ме

к   в ы г л я ди

е , а -

я   l e t t e r - s p a c i n g :zyxwvutsrqp

р  и с п о л ь з о в а н и

#quickSummary p { letter- spacing:  O.lem;

Ка

ь

т   р е з л у ь ат

:

The  B eauty  of  CS S  D esign

A demonstration of what can be accomplished visually through CSS- based design. Select any style sheet from the list to load it into this page. Download the sample htmlffle.  and cssjfile.

и а ф р о гп и Т

я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

 word- spacingzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ойс т вСв

К а к   и   l e t t e r - s p a c i n g ,  с в о й с тв п о з в о ляе т  р е глуи р о в а т ь   п р о м е ж тоу к у   словам и . Д о п су ти м ы д у   б ку в а м и , а  м еж д n o r m a l, дл и н а , п р о ц ен т  и л и  к лю ч ев о

о   wo r d - sp a c i n g ,  то л ь к о  н е  м еж е  з н а ч е н и я : е  сло в о  in herit.

Н а   п р и м ен ен и е  с в о й свт в ли яю т  и  др гуи е  ф а к то р ы (з а д в а е м о е   с в о й с тв о wh it e - sp a c e .

а   w o r d - s p a c i n g  б р азу е р о , в  то м  ч и с л е  в ы р а в н и в а н и м   t e x t - a l i g n )  и   с в о й с тв

П ри м е

я   w o r d - s p a c i n g :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

р  и с п о л ь з о в а н и

м е о

#quickSummary p { word- spacing:  lem;

Ка

к  в ы гл яди

т   р е з л уь а т

:

The  Beauty ofzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   CSS   D esign

A  demonstration  of  what  can  be accomplished  visually  through  CSS- based design.  Select  any  style  sheet  from  the list  to  load  it  into  this  page.

ойс т вСв

 text- align

Э т о   с в о й с вт о   п о з в о ляе в ес т и  в ы к л ю ч к у  тексат вом у   и л и   лев о м у   кра п ус т и м ы е   з н ач ен и я ju st ify. П о ск ль к ки л я дн ы н и мы с и а ту ц и от ч н о г рав н и в ан и е в ан и ши н е н а

у  брзау е

т  в ы к л ю ч к у  ав от м аит ч ес ы  п р е до тв р а щ е н и я  н еп р и г , п ер н о с  сло в  -   н е п р и м е ю   CSS ч а с т о   п р и в о ди т ,  и з о б р а ж е н н о й   н а   р и с . 4.  И з - з а   о ст у в и о   к о н рт о л я  м ы   р ек о м ен уд м   о г р а н и ч и ьт с я  в ы м  п о  л ев о м у  и л и  п р а в о м у  к р аю . Ц е н тр и р о е  м о ж е т  н ай т и  п р и м е н е н и е  в  з аго л в к а х  и  н еб о л ь х   ф р а г м е н ат х   е к т ас ,  н а п р и м е р  ц и ат х ,  н о   л чу ш  п р и б егат ь   к  н ем у  дл я  ф о р м а ти р о в а н и я  текаст , дли  к о т р о г о  п р ев ы ш а е т  п ар у  с рт о к . , т о  тр а ди ц и о н н ы х   п с о ут .  В ы к лю ч к

р  в ы п о л н яе е  п р и е м т   -   к  п р и м ер у а   с   п омощ ь

т   о тц е н тр и р о в а т ь   и л и  п р о и з , а  так ж е  в ы р о в н я т ь  ег о  п о  п р а ю   о бъ ем лю щ ег о   э л е м е н та .  Д о :  l e f t ,  r i g h t ,  c e n t e r 

и  к я -

е

оС б л ю д а й т П ри ме

A  demonstration  of  what can  be  accomplished visually  through  CSS- based design.  Select  any  style sheet  from  the list to load it into this page. с Ри

. 4 •и в т с  т у с т О к ш би ь л о

е о с н пе р е м ы н в о лс мж е

м а л е б о  р п

в  в ы в о тс к е т м

е  м е р

у

zyxwvutsrqpon

я   t e x t - a l i g n :zyxwvutsrqponml

р  и с п о л ь з о в а н и

#quickSummary p { text- align: right;

Ка

к  в ы гл я ди

:zyxwvutsrqponmlkjihgfedcbaZYXW

т   р е з л уь ат

  CSS   D esign The  B eauty ofzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP

х  ба к о л

х и д о  пв и р

A demonstration of what can be accomplished visually through CSS- based design. Select any style sheet from the list to load it into this page. т

Download the sample html file and css_ji]e.zyxwvutsrqponmlkjihgfed

е м ер

о С а б л д й ют Б е з о г л я дн о свой ст а х о ти ч е с к о ет к с ыт н ач ен их щ а л с п р е д о с та в л я е м ы м рован и и  до х дч и в о с т

е   п р и м ен ен и

у

е  п р о и з в о л ь н ы х   ком би н ац и й т   б ы ть ,  и  н е п л о х о   с м о тр и тс я  в м   ди з а й н е   «Жа ж д ы   крови » ,  н о   в о б щ е - т о , п бул и к еум ы е   в о  В с ем и р н о й  п аиту н е , п р едн а з ы   дл я  ч те н и я , а  н е  дл я   то г ,  ч то б ы   з р и те л ь   вос я   м а с ет р с вт о м   доу х ж н и к а .  Е сл и   п о л ь з о в а ть с я и   CSS в о з м о ж н о с тя м и  дл я  ф о р м а ти я  текст а  ум е р н н о , т о  м о ж н о  п о в ы с и т ь   ч ект о с ь ь   с тр а н и ц ы . в   ш р и ф та

, м о ж е

г Ду с м у ео Б н  (Douglas Bowman) р лаzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM

и й з а не Д

1 i 

www.csszengarden.com/017

T " E B E A U t Y

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

* 

1И Д

.

«

C

8

8

D

оЗ а л т с е р ди н

Я

«elects  i  ;7- . U «r e  is c U ir ly a n e*3 for CSS to U  u i « Ј

я

Ш

1 S4vO lt R Yard Sj Sw U i h On zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  .  M ountain  R esort Ш  G ruen er  t n t wvrf

Ј  Perfumn  lie Г.п1я п iЈMdd^ign.Thisi3M.i.ly­

needed, «ventoday. More «id  more  major Dn«iliy  thi« gaJWy wLj: b«rt  'listoriiw!

«З о л ат п о гр а фи а кт о св к а т х у н о в ен и я

я   с ер ид н а »  де м о н с тр и р еут ,  ч т о   ти я  в  тенх о л ги и   в е б - ид з а й н а   з ан и м ае х  гр афи ч еск и х   ис е  ж е  м еост , к а к  и  в  дргиу , и  ч т о   ди з а й н   -   э т о   с о ч еа т н и е   во дх ,  ентх и ч ес к и х   а е дт л й   и   п р о ц е рд у ы

We would iike'C'Ci* *­• niueb Cb'Si aa possible,  • CSSa should be luvn'.ed  »vtidely­lupportijd

1

browsing public. The onJy reii  requirement  v e •   haveiathityourG^viiidawg. Unfoftufiattiy,  Jeeij,i.n.;  tr.is v^«y  bghlighie

CSS.CiSwent  trowi*rsdi2piiy  differently,

b*oofneЈmd^'Jt  hj'.ri^ vii6:i  j  hx  I'­^J4 Cin­sleads  tc br'MJugeicar.otfuir.Vie*  th«  R e s o u r c e s

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

i*iilibl*.Full  broviser compliance is  nil

+ Щ / 9*Я

  tai  М Шсо

* (run  by  o vw  90k  of  tho

yvai  jraphics{w>- h  linm*leKcsf.ti5iw,Eee s u b m i s s i o n  gu id e lin e s},  but we ask  у  ^ J r«le*s« your  C S  under  4 Creative Ctootmona

riut  o t b *n  я м

• *™ 

у  le*m  firamyour  work,

~ 

« 

™ 

_ »•

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т .

В ы бо в ш н Е т шг с я в к

а

THE ВЕ

The Beeuty of CSS Oct^o

Л  JTY OF CSS DESlCN

об ы В

Т Ы  Kf «uty of CSS Design

р т шри ф

The Bown or C*>s  VWP zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

П о тр а ти в  в р е м я  н а  р а з м ы ш л е н и о л о г и ч е с к о м   н а п о л н ен и Th» bttuty of CSS Etasign Th* zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  ь* гм 'ч  «F CSS Pw>g» • M I M I I M p N t N MN можн ы е   вари ан т ы   в е р с кт и The teauiy of CSS Dtiign в о й  о к ну тьу с я   в  в о п р о с

wi»* ft b c C t f l M > » 

*  * " "  ' o *   t h e  

T h » 

n,l 

'r  

'  ' nc  c o d e  ^ ^ м у н п и я » » * »

H I H K I  t l..« 

has 

Ы х т ЯШ ы Ч Л я Ш

„ , ; . ,  , 1 . .  S C , 

.  i 

|

T

i

'

M

t b t LU M Bs

, b « » i . . i  , .  t h , -   „ t ^ r o . l 

r.
x i o n 

У>  

kssot t s  o f  the  m ast er s  Begin  l o s e r

j , l 

w i t h Cr»rft> .  U * r n  t o  t * 4  t h *   \ V- H  t o

Щ  

)Ы   t HT^- lvir in if t d t e c r ^r q u e a  i n «* w

•  - 1 

n o  P e n n i ^ i 

- .

n o  Pe n n i s i 

.  |

by 1  i- i  i b»  KҐlK.J

at'id  m v i g c r i t i n g  fasHksn.  BSCOFU^ o n * «. t h  t h u m b . ;

A  d e m o n s t r a t i o n  i j f w h K c a n  b*  b c c o m p l t s h t d  • ш А й &у

У  

by Emjlp

Th*  ess  Zm   G i ' d m  «v i w s  y o u  to teta>;  and  m ed it at *  o n  ^ie  im p o r t an t

^ 

S

В|eW . by AseJ. lebertitreit   ^

  a  tough 

 

•  .

i

t w * t  1 d e s i g n  Selec t  a n y  s ^ M

 

!

 

Ef r c 

i t t i e l 

-   •-   I  • .  -  ••  т . . 

•   .  . .

'*

г И Н А Ч М ИР Е П

Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и н(де ло п н а  ц и н а р тс

г И Н А Ч М И РЕ П о т ке л С

С п ор с м о тр в ели с в о с п о л ь з о в а ть с с е л к от р и м ен н в у и дя а  то ч н е

Е р  до ечрни

х  эмело тн

п о с р е д в н ты с  любы

M O S e zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONML

т  Mozilla Opera Safari enhancement а  MOSe ое а ч а н з я  в а р е з у ба р х MoziLLa  Opera Safari). Пе н б о р д о е  см . е  www.mezzoblue.com/archives/2003/06/25/.

р у т а и в е р б Аб

х   п о тм о к м  уро внем

в  позвеял

т  тыбвар

в  дан о г  венло жс ит

ь  токль , а  н е  по тм ок

о   э ем л а тен

о  не

в

.

ы  п о  п о в д у   от г е   в   б р а зу е р а х  с ь   ещ е   д о   п о я в л е н и я   о тс у в и е в   в  то м   и л и о   с   и х   п омощ ь т   б р а зу е р ы , и м е ю щ и е  Mozilla  и  ег о

К о н к р е тн о ,  те нх и к к о то р ы е   н е   п о д е р ж и в а ю тс Explorer.  Н а и б о л е ык е р т о л е с инхре ч о д в тн е о м е л э  и  ыкерто лес

е С л т ор к э л е м е тн о .сиР 1 •  ти арб О е а р би ы в т  лиш а   н е  помт к

е  винм еа ь  нынепвосдрт в  с  бе ло

е  гбоулк

, чт о  со т кел х  пом т к й еноьс т овлж

р  дреиноч в  ряле итод

х  эомелтн

в

ю

,

, к а к  ул уч ш и т ь   ди з а й н  п р и  п р о  б о л е е   п олн о й   п о де р ж к о й   CSS, я   «Увдо ен и я» .  И де я   п р о с та : м   п о де р ж к и   н ек о т р ы х  ино м   б р а зу е р е   д л я   то г ,  ч то б ы ю   с о та в и т ь   п рави ла ,  к о т р ы е е  н е о б х ди м у ю   п о де р ж к у ,  в а р и а н т ы   Firefox,  Opera  и   Safari.

а   MOSe  о с н о в а н е  ч а с т втне,о  эме л

о  дл

а   н а   с е л к то р а х , я   в   M icrosoft  I n tern et я  э то й  ц е л и   п р и м е н я ю тс я zyxwvu ыкер сто ле  скитснрех

 аувти.обр

ы

од еч р н и

х

в

С е л к то р ы  до ч е р н и х   э л е м е н то в , к а к  селуд т  и з  н а з в а н и я ,  п о з в о л я ю т  в ы б р а т ь   н е п о с р е д с тв е н н ы х   п отмко да н н о г о   э л е м н та .  О н а   п о х ж и   н а   с е л к от р ы   п отм к о в   с  те м , о нд ак о , о тл и ч и е м , ч т о  с е л к то р ы   п отмко вы би раю т   п отмко в   с   п рои з воль н ы м   ур о в н е м   вло ж е н н о с ти , а  н е  то л ь к о   н е п о с р е д с тв е н н ы х .

в в -

С и н ат к с и ч е с к и  в  сел котр е  до ч е р н и х   э л е м е н то в  сн ач т л а   к у а з ы в а е ст я   р о д и те л ь с к и й   э лем ен т ,  з ает м   ес лу д к о м б и н а то р  > (кмоианртб мо н а з ы в а ес т я   си м вол , слу ж ащ и й   д л я   о б ъ е ди н е н и я   ч а сет й   с е л к от р а ) ,  з а   н и м   до ч е р н и й  э л ем н т  и , н а к о н ец , сам о   о б ъ яв лен и е : div# content> p  {color:  oran ge;} Э т о   п рави л о   го в о р и т н е п о с р е д с тв е н н ы м р о м   # c o n t e n t , буд (н а   р и с . 1 он и  п о к аз н

,  ч т о   в с е   а б з а ц ы ,  я в л я ю щ и е с и   п от м кам и  d i v  с  и де н ти ф и к а то т  в ы к р а ш е н ы  в  о р а н ж е в ы й   ц в ет ы  склге а  з аетм н ен н ы м  ш р и ф то м )

е С л т ор к э л е м е тн о

с е т ри с н к

С о ле к т (и ли и м ею щ и

ы

я , .

х

в ,  лсе

р   р с ие т н с к и и  хиеот х   о тг

х  э лем н от , бьверат о   ж е   р о и д е лт я

) дан ог

в   в ы би р ае о  элмен т , ч т о   и  э от

т   е тс а  (т о  етс т  э лем н )т

р ь

.

Сп е и ц а л н ы ь С и н ат к с и ч е с к м ен т м ен

е т к фе эф и   сн ач л

, з ает т  и ,н а к о н е ц

ы zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а   к у а з ы в а е тс я   н ач аль н ы й   э ле р   + , з а  н и м  -   с е тр и н с к и й  э л е :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

м   к о м б и н а то , о б ъ я в л е н и е

div#warning  р  + р   {color:  red;}

В  р ез луь ат з ац е у дб нит м ы ны й

е  а б з а ц ы м   в н ут р и   d i v  т   о т б р а ж а ть с я ь   э т о   п рави л о  к   ув и д и м   к а р ти н у   ш ри ф т   от браж е

е С л т ро к и с оп т а л в е и н

ы

, с о с е д тв юу щ и е   с  н а ч а л ь н ы м  аб с   и де н ти ф и к а то р о м   ttwarning,   красн ы м   ц в е то м .  Е сл и   п ри ме  то й   ж е   р а з м е тк е , ч т о   и  в ы ш е ,  т о ,  и з о б р а ж е н н у ю   н а  р и с .  2  (к р а с н   сер ы м   ц в е то м ) .

а т р и б ту о

си Р

.  2 • р то  к е л е С с  те м   ж е м е л е т и рд о

в е с о б р а з цо

• РП И М Н Ч А Е

м

Р а с м о рт и

м   с л е ю ду щ у

т   вы би рат ь   э лем ен т ы  в е  а тр и б ут ы   дл я  н и х   з а д н ы ,  о т   то г о ,  к а к о в ы   з н ач ен и я , есл и   и м е тс я   с ы лк а   с  к о н к р е т о   с де л а т ь   вы бор ,  б а з и р уя с ь  н е , ч т о   и м е тс я  а тр и б у т   h r e f ,  н о  и а   к  к а ж до м у   э лем ен т у   с  д а н н ы м н  с о тв е тс в ую щ и й   с ти л ь . ю  та б л и ц

у   с ти л е й

И м ен н ос ,  ч то б о дн и м

, к а к  э т и   с е л к то р в   в  з а в и с и м о с т

д  э л е м е н то

си Р

т т н ме  л э

ы

ы   OPAL (http:/ / gall.ery.theopalgroup.com/ я о нс а пр к е р е и н е нс я  оъ б е т ро б а ы к е л с -

.  3 • и в  Дет с й

е о р т к е сл е

РП И М Н Ч А Е

:

он тевЦ

в о т у б и р  ат

в  в м ои т сс м ев о

Е й н  ва и р а

т  рси

.  3 см .  н а е к д а вл к

.

{t e x t -

ы   м о ди ф и ц и р у и   о т   а рт и б у

-

.

о  э ти м  в и од м  сел котр в  и  в о с п о л ь з о в а л с ы   ди з а й н  в  с о в м е с ти м ы х   с  CSS б р азу е р а , а  в  Internet Explorer  -   с о в е р ш е н н о   д р гу и м

CSS- антсригу

ы

CSS- си гн р уат тр а н е н и е то р  э л ем н т с и г н а р ту о

е  бо ле ы   п ри п и сат й  сатн е   та б л и

ы   п о л чу а ю т   вс я  в  то м , ч то б у   bo d y, к о т р ы й   дл я  р а з л и ч н ы х

. И ед

в ю а р ви б ы о

  п о з в о ляе , к а к и

[id]  {color:  teal;} [id="warning"]  Pcolor:  red;} [href~="http://www.molly.com/"] decoration:  none;}

Ha  р и с . З  п о к а з а н о ю т  в н е ш н и й  в и то в   и  и х  з н а ч е н и й

х о т н эме л

Е

Н а   т й ас е   п ур г selectorade) ис т е м ор т в  в  CSS.

А  в о т  т-ту т о  и  н а ч и н а ест я  с а м о е  и н те р с н о е !  В о з м о ж н о ,  ч и та е л ь   н ез н ак о м   с   с е л е к то р а м и   а т р и б ут о в ,  и п р еж д е   в с ег о   п отм у ,  ч т о   о н и   н е   п о де р ж и в а ю тс я  в Internet  Explorer.  П о э то м у   б о л ь ш и н с тв о   п р а к ти к ю у е   н е   д му а ю т   о   то м ,  к а к   и х щ и х   в е б - ди з а й н е р о в   ад ж можн о   и с п о л ь з о в а ть .  А   в е д ь   с е л е к то р ы   а т р и б ут о в п р е лд а г ю т   о ч ен ь  и н те р с н ы е   в о з м о ж н о с ти . С е л к то р   а т р и б т уо в з ави си м ост и  о т  то г и ,  ч т о   е щ е   б о л е е   п о лез н о э ти х   а т р и б ут о в .  Т а к н ы м   U RL,  т о   м о ж н то л ь к о  н а  то м  ф а к те н а   ег о  з н а ч е н и и . Т о гд URL  едбу т   п р и м ен е

ы и кс н и ср тс е , чт о  и  уг о н ь л а ч на

е  ш и р о к о т  з ает ц   с ти л е й

я  К ло х   бы .

л

е  р а с п р о с ь   и д е н ти ф и к а м  ун и к а л ь н о й .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

м р е з у а р б

е

Ср а вне и НИ ЧА - Е ПРИМ

и

И с ти н н а я  ц е н н о с т ь  CSS- си гн раут Е zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и н е н м еи р П е ки тн хе и  MOSe ме ж о т с ь т а в  оы о нс я  и  н а и г  ур д х х а р о т к е л ес , н м еы а в и ж р е д  о п х  Internet Explorer, в о  т м  чси л е  и  н а ы ро  нто к е х яи кц к ур тс но х  и з и ц а ки ф си ц е п и  CSS  3.0. ы н ло П й  оо зб р  собс п в  пи н еми р я  MOSe дл я иш н че уу л я нй ази д а  см . н а ц и н а р  тс е  www.mezzobLue.com/arcriives/2003/ 06/ 25/  mose.

Рис

е M OSe с о ст илмя

. 4 но •ь иал ц Спе

е ени повед

е ло ссы

к в воении «уд

»

ы   в  то м , ч т о  о н а  дае у  п о л ь з о в а те л ю  в о з м о ж н о с т ь  п е р н а с тр о и т й  в и д  ч жу о г о  с ай ат . Н а п р и м е р , есл и  в ы   ч а с т е  н а  сай т , в  к о т р о м  тек с т  о то б р а ж а е тс я  ш р и ф то м   р а з м е р о м   9 п и к с е л й   и   с в е лт о - с е р ы м   ц в е то м  н б ело м   фо н е , та к  ч т о   в ы   ег о  ч и та ь   н е  в  с о с то я н и , т во с е   н е о б я з а те л ь н о   з абрасы ват ь   а в то р а   сай т а   п и сь м ам и  ти п а  «и с п р а в ь , а  н е  то . ..» . П р и  ус л о в и , ч т о  а в то р  в к л ю ч и л   CSS- си гн руат ,  в ы  с м о ж е т е   п ер о п р ед ли т ь   раз м е р   ш р и фт а   с   п омощ ь ю   п о л ь з о в а те л ь с к о та б л и ц ы   с ит л е й  в  св о е м   б р а зу е р .

т

о п ы тн о м в н еш н и з ао х и д т

в иУ ь етд можн

, ка к  CSS- си нг р уат о  н а  п р и м е р е  р а б о т

а  п р и м е н я е тс ы   К ло са

ь о а о й

я  в  Zen G arden, :

A demonstration ©I what can visually through CSS- based design. Select any style sheet from the list to load it into this page.

Ч то б ы   с о з да т ь   ди з а й н  «Уводне и я м и  в о з м о ж н о с тя м и , К л о с  в о с п о л ь з о в а л с в   в   та б л и ц э лем ен т а   bo d y.  З а гл я н у ди т е   н ео бы ч н ы е , н а  п е р в ы й  в з гл я д

Download the sample html file ai i f

»  с  до п о л н и те л ь н ы

я  с и гн аруто

у   с ит л е й , к о н с тр ук ц и и

й

,  в ы   ву и :zyxwvuts

body[id=css- zen- garden] a:link  { color: #f90; }

i

bo d y[ id = c ss- ze n - ga r d e n ]  a : v i s i t e d  {  c o l o r : # f90;  }

Рис . 5 •о н т р да н а Ст е и н е д пове е ол ыс к в но н е щ о р уп й и с р ве и body[id=css- zen- garden] a:hover, body[id=css- zen- garden] a:active  { color: ия н «двое У »zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA #fff; )

с еЗ д ни рог

ь  К ло с  оп релди , ч т о  о н и  н соятдах о  з ад н  арит бу

л  п овенд и я  в н рту т   i d  с  ука з н н ы

Ср а в н е и

к  в  п пред ол ж е а  bo d y, дл я  ко т м  з н ачен и е м   (ри с . 4).

е M OSe и лд я Internet

с о с т илм я Explorer П р е дл о ж и т ь   б р а зу е р др г у о й   н або р  с ти л и с ти ч е с к и н о  л и ш ь  п о з а б о ти ть с п р е ти р о в а ть . В о т   к а к  в ы гл я ди Explorer:

е  ссы ло и  э лем н т

у   Internet  Explorer  с о в е р ш е н н х  п р а в и л  н е тр дун о .  Н жу я  о  то м , ч то б ы   о н  м о г  и х  и н те р т   в ер си

я  та б л и ц

а   с ти л е

й   дл

о -

я  Internet

a:link  { color: #f90; } a:visited  { color: #f90; } a:hover, a:active  { color: #fff; }

Н е тр д н у о   з а м е ти ть о т   п р и в ед н н ы Explorer  п о дер ж и в а ет ро щ ен н о й   в ер с и

8 Зка

. 1942

, ч т о   с а м и   п рави л а   н е   о тл и ч а ю тс я ,  н о   та к о й   с и н та к с и с  Internet ,  п о э то м у   о н и   г о дя с т я   д л я   пу и  ди з а й н а  (р и с . 5).

х   вы ш е

ыньлаицепС

е  ткеф э

исреВ с  доплне иям В  в ер с и с лжу и в а ю щ и а н а л о ги п о в то р я ю щ и м с п о л ж ен Фо

ы

я  «Уяинеовд

» и

и  ди з а й н

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

а  с  до п о л н е н и я м

и  ест ь  н ес к о л ь к о  з а я  э ф е к то в . П о с рт о е н  о н  п и  в  Adobe  Photoshop: ф о н  з а м о щ е я  о р н а м е н то м , а  п р о ч и е  э л е м е н т ы  рас х   н е го .

-

х   пу о м и н а н и и  с о  с л о ям ы  п о в ер н   з а д ес т

я  дл

я  э л е м н т

а  bo d y  (р и с

о н -

. 6):

body[id= css- zen- garden] {  m a r g i n :  Ю О р х   0  0  0;  p a d d i n g :  0;  c e n t e r ;  b a c k gr o u n d : t r a n s p a r e n t  u r l ( s q u i d b a c k . g i f ) ;  }

Д але

е  до б а в л яест о н о   а с о ц и рес ту к а   в ы с тп у а е (р и с .  7). В  п р еам блу п оль з ован и с в еч и в ае

я  ещ е  о нд я  с  э л е м е н то т   в   рол и   з а дн и к е   и н те р с н ы я  св елто - сер о г т   з а дн и

к  (р и с

т  с о з адест , ч е р

я  з а  сч е з  к о т р ы

си Р т н е т но к

. 7 •   Эт а к н и т р а к а  в о н е н л о п  д

т т нм ег а  фр н

, вы т я з

й  с т й са

а  squidfingers.com,

й и вс р е

т  в  рл о и н й а з и д

и к и н зд а а  дл я  от с а л б и а zyxwvutsrqponmlkjihgf

т  р а з а т  и с й  п р о -

body[id=css- zen- garden] #preamble  { position: absolute;  top:  30px;  left:  20px;  display: block;  margin:  0;  border: lpx dotted  #fff; paddingL  0; width:  196px; height:  290px;  background: transparent url(blk35.png) repeat;  overflow: hidden;  }

Т ак о й  ж е  э ф е к т  и с п о л ь з еуст я   и  в  о б л а с т дг е   п о в е р х   фо н о в о й   к а р ти н к и   о т б р а ж а е тс п р о к р ту к и .  Н а к о н е ц , дл я   р а с п о л ж е н н о н ел и   н а в и га ц и и   с о   в к л а дк а м и   п ри м ен е : h o ve r ,  с о з да ю щ и й  о ч е н ь  к р а с и в ы й  э ф е к н и я   (р и с . 9). К о н е ч н о , э т о   в о з м о ж н о  л и ш рах , п о де р ж и в а ю щ и х   : h o ve r  дл я  л ю б ы а  н е  то л ь к о  дл я  ссы ло к , н о  м о ж н о  с ч и та ь р ы ,  п о де р ж и в а ю щ и е   с е л к то р ы , н а   к о т р ы сет я  MOSe, э то м у   су л о в и ю   д оу в л е т в о р я ю т

. 6 •   Это т  фо

t e xt - a lign :

о  и з о б р а ж е н и е , н а  э то м  # c o n t a i n e r . Карти н а   дл я   о б л а с т и   к о н те н т

й  э ф е к о   фо н а . 8):

си Р е у з а рбо

и   к о н те н та , я   п ол с а й   сп рав а   па н   с е л к то р т  в ы едл ь   в   б р аз у е х  э л е м е н то в , , ч т о   б р азу е е  о п и р а .

а е а п у вт с ы

f r h e   R o a d 

I 

i 

•I  'j  I  ! 

t o

Littering a dark and dreary road lay the past relics of browser- specific tags, incompatible DO Ms, and broken CSS support. Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators. The ess Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to se< with clarity. Learn to use the (yet to

П   be) time- honored techniques  in new i  and  invigorating fashion. Become one with  the web.

П оск оль к у   вн и м ан и ю   Internet Explorer  п р едл а г ест я д ку а  боле е  тр а ди ц и о н н а я  ат б л и ц а  сит лей , т о  и  го в р и т ь о б  э ф е к та х  н е  п р и охид ст я . С а м ы й  и н етр с н ы й  асп ек т с и Р . 8 •   Это т к фе  эф т  са д з о н  з а е ч с ид з а й н а  дл я  Internet Explorer -   э т о  з а к л ю ч ен н ы й  в  н е м и з ы кр о т о х и н вх р е й е ч а р з о пр н ю мор .  В  н е м  с к р ы т   н ам е к  н а  м о дел ь   п р я м о уг л ь н ы х о б л а сет й   в  CSS -   де в шу к а   с  уди в л е н н ы м   в ы р аж ен и е м н а   ли ц е , з а к л ю ч е н н а я   в   ящ и к , -   и   до б р о дшу н а я   на с м еш к а  н а д  о ш и б к о й  в  и н те р п р е та ц и и  э то й  м о едл и  в Internet Explorer 5.x  (р и с . 10). (М о едл ь  п р я м о гу л ь н ы х о б л а с ет й  -   э т о  в и з ау л ь н а я  м о дел ь , к о т р у ю   б р а зу е р ы п р и м ен яю т   дл я   в ы ч и с л е н и я   п о ло ж ен и я   о тде л ь н ы х э л е м е н то в   н а   с тр а н и ц е .  П о др о б н е е   с м .  www.w3.org/ TR/ REC- CSS2/ box.html).zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

т  ду в

х и кс е ч и  гф а р

х в  се о л

,

и з Да й

за й Ди

н  с  гиранет

й  н а   б удщ е

н с аг р тн и е н а е щу дб Н е   з а ит а х ю н а  бщуд е н о е   с е г о нд боле е   п е р до в ы

е

й

zyxwvutsrqponmlkjihgfedcbaZYXWVUT

т   сп ор ы   п о  п о в д у   ди з а й н »  (future- proof).  Э т о   о з н а ч е т т   р а б о та ь   и  с  п р и ох д я   е д бу х   те нх о л г и й .

П о н я тн о , ч т о  вс я  иед я  «Унвое ди я я   -   осн ован MOSe  к а к  таков а Explorer п л о х о  п оердж и ваю ст ным и  селокрты , оп релдн ы Н о  ч т о  п рои з ой ед т  в  мутан н о в с -е а к т и  в ы п ситу т  боле е  со в р ем н н ы жко й  все х  э ти х  св тс дер ? Т ео рит ч еск г о  -  п р и  ус л о в и , ч т о  вс е  с е л к то р реали з о в ан ы ,  к а к  долж н о Explorer дл я  Windows в ер с и ниц у  та к , к а к  э т о  жу е  с ей ч а б р а зу е р ы .  И  отгд а   м и р  с ат н е н о , ч т о  в о з н и к н е т  о ч ер дн а п р е дс к а з а т ь   р е з л у ь ат ы   п р а к ти ч е с к с Ри

. 9  • нени ем  При : hover к нта е ем л э е б и н ез ч е л в и  пр

с Ри

. 10 •  «дел о М

р е то к е л  е с м е я л о в з по я е и  снар е ц

ьны л ь го у ом я  пр

г о а к с е ч ми а н и д т ьс т и б о д

со лас к о  пд в е с

а

е

а   «с  га р н ти е , ч т о  с едл а н м   б дщ у и х

й ,

» -   и  в о б щ е   н е хт и к а а   н а  то м ,  ч т о  в  Internet я   с ат в ш и е  уж е  сант дрт е  в  спец и фи к а ц и и  CSS 2.1. м  бщуд ем , кдог а   Microsoft й  брзауе р  с  п ердо и  н и ч ег о  с рт а ш н о ы  и  э ф е к т ы  буд т ,  г и п о те и ч е с к и й   Internet и  7 бед у т  о то б р а ж а т ь   ср т а с  де л а ю т   Mozilla  и  др гуи е т   краш е . Н о  н е  и с к л ю ч е я  н е с о в м е с ти м о с ть , та к  чт о и   н ев о з м о ж н о .

К ло с   п р и ед р ж и в а е с т я   м н ен и я , ч т о  и ед я   гар н ит и  н а я щ у дб е е  -  э т о  «п круод т  ч ь его - т о   ги п е р т о фи р о в а н н о г о в zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA в о б р а ж ен и я» , п оск ль к у  м ы  н е  з н аем , каки е  с ю р п р и з ы м ож е т   п р еп онд ес т и  э т о  само е  бщ уд е . Т а к  э т о  ил и  н е атк , н о , п о  крайн е й  м ер , сноегд я  м ы  може м  о б р аит ь  в сво ю  п о л ь з у   фа к т  освтиу я   п о е др ж к и   с о в р ем н н ы х м   п р о едм н с е л к о тр в  в  Internet Explorer, ч т о  с  блеско с рт и р о в а н о  н а  прим ер е  далуь н о г о   «Унвое ди»я .

хей т ас  обл

ят к е ф  эф

а елени д  вы

»

е н й а з Ди

р  Мй а

к  Дэсодив

н  (Mike Davidson)

www.csszengarden.com/069 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE

е Нб о на д б со н а ли е о н д р П г ое р т н а б л ь з и

й

е е р а и гч о н о роб доп

П о дн и м а я   те м М ай к  Д э в и дс о м а   н а   н еб с ах е ст а у ,  п о р о с ш е г п р и к и н лу , к а к м и н и р ую щ и м

й е о рз а у б а и к р аг ф

в с ь м що п ю и и до к а zyxwvutsrqponm

у   о з ар ен и я  н а   н о в у ю   в ы с о ут , н  со з ад л  о б и те л ь   з д е н - и дб у з .  В з я в   з а   о с н о в у   фо т гр а фи ю о   де р в ц а м и ,  о н   дл я   н ач л а  до б и ть с я   бал н с а  тек ст а   с  до  и з о б р а ж е н и е м .

П о м е с ти в  и з о б р а ж е н и е  уест а  в  п р а в ы й  в ер х н и й  уго л  и  о с в елт и в   его , Д э в и дс о н  р а с п о л ж и л   е тк с т   с л ев а   и   те м   с а м ы м   и з б еж а л   п ро б л е м   к о н тр а с тн о с ть ю ,  к о то р ы е   м о гл и  б в о з н и к н ут ь ,  если   б ы   е тк с т   ш е л   п о в ер х   к ар ти н к и . Ч е р н ы й  тек с т  с  ш и р о к и м и  п р о п сук а м и  з а н и м а е т  п суот е   б ел о е  п р о с тр а н с тв о  сле в а  о т  уеста , и  в з гл я д  з р и те л я  п л а в н о  с к о л ь з и вн и з , гд е   ег о   о ж и да е т   сю рп ри з : с ти л и з о в а н н ы е  л о г ти п ы  о с н о в н ы х  б р азу ер о в , в ы гр а в и рован н ы е   н а   п о в е р нх о с т и   ест а у , и  ск ало аз з а г л я ды в а ю щ и й   в   п р о п а с ть .  С к а л о а з  -   э т са м  Д э в и дс о н . Усп е ш н о  оодле в  п о дъ е м  к  в ер ш ина м  CSS, о н  п о н и м а е т , ч т о  п ту и   н аз д  н ет

ы т , о .

п Ур а в л е н и

е  верс и ям

п р аУ в л е ни

е в е р с ми я

и

Н е к о то р ы е   и з   н аи боле е   и н те р е с н ы э ф е к то в  в  «Н еб е  н а д  б о н с а й »  в и д н зу е р а х  -   в с л е дс тв и е   и сп оль з ован и izyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   ! ц и аль н ы х   свой ст в   CSS о к а з а л о с ь *i   t o  E n l i g h t e n m e n t с та в и т ь   о дн у   и  т у   ж е  к а р ти н у   все то г о   ч то б ы   о тк а з ы в а ть с я   о т   ч аст ф е к то в ,  Д э в и дс о н   обм ан у л   б р а уз е р ы к а з ы в а л и   и х   н е п р а в и л ь н о The t l i «n  Garden «wiwi you to  rtit» zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA,  в о с п о л ь з о в а в ш и с M uoni of the nwt er i-   B*gm to we wtifc cbrtty ф и л ь тр а м и . to  bt)  time- honored  .«thfliquej in new *nd T h e  R o a d

оП л е ж н и ко

: it  r n r g  л   d i r k  a n d  d ' t j ^ y  r o a d  lay  f h * l a s t ,  i n c o m p a t i b l e  K I M i ,  »л в   b r o k e n  c : . : . к

b e e n  ac h i e ve d t t i i i n k i  t o t h e  t i r e l e s t  * f l

[Q I »}  t i m e -   h o n o r e d

Bet a m *  o ne w i t h О м

I : -   S o   W h m t  b *  T h i s  

A b o u t ?

Th e * .  It  d e a r l y  a  n e e d t o r  CSS  t o  be  u f c t n Tin-   l e n  Gar d e n J i m s  t o e xc i t e ,  i n s p i r e ,  « к To  b e g m ,  yiew  ю т

е   Ы  Л

*  c u i t l i n g  й е ы д л

! in 

ft*'»

o n r  «rill  lo ad t h e  i t y f e  i h e e t  i n t o  t h i »  ver y  p j g t .   Jtm  tp

wi t h  t h e  " « .

" 2 

S o  W h a t  i s  T h i s 

Abo u t ?

T h «»  I*  c i e i f t y  a  need  toe  CSS Ш  

Zen G a r d t n * i m (  l o M C * №

To  1м д1 п

,  v i e *  l o i n *   at   (he  e x i i t l n g a « * f l m  in

o n e  w i l l  lo ad  t he  « > k  i h e e t lnu>  t N t  ver y  p a j j » [ b e  o n l y t h i n e  t h a t  M i  c h i n

.  The  o n l y M t 

И

p e o p le  e xc i t e d  k  by d« m o m

l r *  p lac ed  In  I h *  h an d i  o f Ih6 »«  ab le e x a m p l r i  o f neat  t r ic k

it .  T h i s  m d t  Lo  c h a n g

P a r t i c i p a t i o n

o n l y  p i r a t e ,  v o o  a

t w v ,  b u t  t h e CSS

СИР ц и н а р тс

.  1 •  мк Ра ы

о   н а д   бо н сай й  с  ф и к с и р о в а н н ы

х   гр афи ч еск и х ы  н е  в о  в с е х  б р а я  Д э в и дс о н о м   сп е   н евоз м ож н о   п ред м  з р и т е л я м .  В м ес т о и   в и з уа л ь н ы х   эф ,  к о т р ы е   по ь   CSS-

й ра м к

»  о к а й м л е н м  п о з и ц и о н и р о в а н и е м

о   то л с то

и й   ч ер н о

й   рам :zyxwvutsrqp

#extraDiv2  { background- image:  url(edge_boCtom_black.gif); background- repeat:  repeat- x; position:  fixed; bottom:  0; left: 100%; width: 100%; height:  20px; margin- left:  - 100%;

р т Аи б у т   п оз и ц и он и рован и я   f i x e d  п о з в о л я е т   то ч н расп олож и т ь   э лем ен т   н а   с тр а н и ц е ,  ат к   ч т о   о н   едбу о с та в ть с я   н а  м ест е  даж е  п р и  е е  п р о к р тук е .  С о з адест в п е ч а тл е н и е ,  ч т о   та к и е   э лем ен т ы   всп лы ваю т   п о в ер о с ат л ь н о й  ч аст и  с тр а н и ц ы , и м е н н о  та к  в ед т  себ я  р а м к а  в  р а с м а тр и в а е м о м   ди з а й н е   (р и с . 1).

О дн а к о   фи к си р о в ан н о с ч и та ь   н а де ж н о й   т е хн и к о й б р а уз е р ы   (и ,  п р е ж д е   Windows)  п р о к р уч и в а ю в м ес т е   с  о с та л ь н о й   с тр а н и ц е й zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н и е  з а м ы с л а   можн о   с ч и та зу е р  о с та в л я е т   э лем ен т т е   -   п рек расн о ,  ес л и   н е а с т е а от с я о н ж и в  нд о п е й  в о м е вр я к т у р пко р и п о те р п и м .

CS; Perfume by Armando Sosa Pneuma td^dam Polselli a:link,  a:visited  { Bi r dhouseV ? Justi n Vileia font- weight: bold; Defiance by James Ehly Mediterranean by John UJhittet text- decoration:  none; Austrian's Oarle Side by Rene Grassegger color: #998; Invitation by Brad Daily Odyssey by Terrence ConleyzyxwvutsrqponmlkjihgfedcbaZYXW } a:hover { color: #887; text- decoration:  underline;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

с Ри Ha  р и с . З  п о к а з а н о , к а к  в ы гл я ди п р и м ен ен и я   с ит л е й .  О б р а ти т Internet  Explorer  п р и   н а в е д н и ект с т   п о д ч е р к и в а е ст я .

и  сл и т

т   э т а   р а з м е кт а   п осл е е   вн и м ан и е , ч т о   адж е  в и   мы ш и   н а   с ы лк у  е е

П ок а   вс е  хо р о ш о ,  н о  да л ь ш е   н а ч и н а ю тс я  с л о ж н о с ти Н е о б х ид м о  и з м ен и т ь  з н ач ен и е  св о й свт а  d i s p l a y  лд э лем ен т а  u l  н а  п о п е . В  р ез луь ат е  с п и с о к  бед у т  с к р ы и  а к ит в и реуст я  л и ш ь  п р и  н а в е д н и и  н а  н ег о   крус о р а

е ы  птс о р .  3  • и н е н ме и р П ь   : h o ver , ы р о т о к

х е сл и т

й  к  мю н е

с т йе а в и ж р е  пд о

, ва ч ю л к я я  в  internet Explorer

Select a  Design:

.

Gardenias de Perfume by Armando Sosa Pneuma by Adam Polselli Birdhouse by Justin Vileia Defiance by James Ehly Mediterranean by John Whittet Austrian's Dark Side by Rene Grassegger Invitation by Brad Daily Odyssey by Terrence Conley

я т :

ul { display: none; }

До бав ь т е  э т о  п р а в и л о  в  та б л и ц у  с ти л е й , и  в о  все х  CSSс о в м е с ти м ы х   б р азу е р а х   сп и со к   и сч ез н ет .  Ч то б ы   за с ат в и т ь  ег о  сн о в а  п о я в и ть с я , н жу н о  до б а в и т ь  ди н а м и ч ес к и й  п севодк лас с   : h o ve r  и  з адт ь  дл я  н ег о  з н а ч ен и е е  о т  п о п е , в  да н н о м   слу с в о й с вт а   d i s p l a y ,  о тл и ч н о , к а к  то л ь к о  крус о р  м ы ш и  з аедр ж и т ч а е  b l o c k . Т еп р ь с я  н а д  э л е м н то м  # menu, элеме н т  и  1 сатн е т  ВИ Д М Ы М . О б р а ти е   а тк ж е   вн и м ан и е  н а  до п о л н и те л ь н ы е   с ти л и дл я  э л е м е н то в  u l  и   l i :

с Ри ы т ы р кс

.  4 •   В м ыи тсм е в ос й  сос и п

х х а р е з  бу а р к с т е я л в  пя о

, нме и р п а я  пр

и и н е д е в а н

и р о с р  ку

р  в Mozilla  и  Opera, а

#menu:hover  ul { display:  block; border:  lpx solid  #776; margin: 5px; padding:  5px; width:  175px; list- style- type:  none; } li { margin: 0; padding:  3px; border- bottom:  lpx solid #887; }

Е сл и   п р о те с ти р о в а т ь   э т у   та б л и ц у   с ти л е й   в   б р а зу е р е ,  п о д е р ж и в а ю щ е м   п с е в до к л а с с   : h o v e r  дл я  п р о и з воль н ы х  э л е м е н то в , т о  п р и  н а в е д н и и  к ру с о р а  п о я в и тс я   м ен ю   в   ви д е   сп и ска .  И м е н н о   та к   о н о   и в ы г л я ди т   в   «Т ю л ь п а н е »  (р и с .  4).  вУ ы ,  в   I n t ern et Explorer  м е н ю  та к   и  о с та е тс я   с к р ы ты м , в и де н   ли ш ь ег о   з а г о л о в о к   (р и с . 5).

с Ри

.  5  4- р  П и и н е д е в а н и р  кос р у а т к  ка к  Internet Explorer п е ави жре д о а  а к ь ло т о  дл я т н ме  эл

а  сос и п

к  н е яс т е а ж оа р б о т т с а л к о  пд в е с

, с   : ho ver

Ни с п а д ю щ и

е  м е н

ю  в  «Тпнюаель

и Н с п а ид щ ю в «Тлюпьа не

»zyxwvutsrqpo

е м ен ю »zyxwvutsrqponmlkjihgfedcbaZYX

Е сл и   п о с м о тр е ть ,  к а к   в ы г л я ди т   «Т ю л ь п а н »  в о   в с е й к р асе , т о  в ы  ув и ди т е   вс е  в ы ш е о п и с а н н о е : H TML- сп и с к и   п р е в р а щ а ю тс я   в   м ен ю , а  с ти л и   з адю т   п о в едн и е п р и   н ав ед н и и   к ру с о р а   и   п р и да ю т   м ен ю   краси вы й в н еш н и й   в и д .  Н о  и з - з а   п р о б л е м ы   в   Internet  Explorer Ш еп э р д   до л ж е н   б ы л   п р о д му а т ь   CSS- ко д   о ч е н ь   тщ а те л ь н о .  З адч а   с о т ял а   в   то м ,  ч то б ы   да т ь   э ф е к т у п р о я в и ть с я  в   п о л н о й   м ер е   в  с о в м е с ти м ы х   б р аз у е р а х , н о   скры т ь   э т и   с ти л и   о т   Internet Explorer,  «п онсду в » в м ес т о   н и х   ч то - т о   др г у о е ,  п су т ь   н е   ат к о е   и х тр о е ,  н о п о з в о ляю щ е е   р а б о ат ь   с   м ен ю ,  н е   к алеч а   осн овн у ю и ед ю   д и з а й н а .

М и ну

с н а м и ун

с да е

т лю п

с

О тн о с и те л ь н

вд

о   Internet Explorer  з едс ь   м у е с тн о   с е дл а т ь . В о - п ер в ы х , о н  н е  п о з в о л я е т  п р и м е н я т ь п с е в од к л а с с   : h o ve r  н и  к  ч ем у , к р о м е  с с ы л о к . П о э то м у   э ф ек т  н а в ед н и я   к рус о р а   в о сп р о и з в ест и   н е   ад у ест я , и  з н а ч и т , с о б с вт ен н о   в ы п а де н и е   м ен ю   р еали з о в а т ь  та к и м  с п о с б о м  н е  п о л чу и тс я . В о - в от р ы х ,  ка к  м ы з н аем , Internet Explorer  н е  п о н и м а е т  н е к о т р ы х   ти п о в с е л к то р в .  В  ч а с тн о с ти , р еч ь   и ед т   о zyxwvutsrqponmlkjihgf  секрто ле  д- ре ч о инх  эвтне,о ме л  к о т р ы й  и  с о с ат в л яе т   гл а в н о е   с р е дв т о с о к р ы ти я   с ит л е й   о т   э то г о   б р а зу е р а .  В о т   ф р а г м е н т  и з «Т ю ль п ан а» :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSR а  з а м е ч а н и я

#linkList2  ul > li

Internet  Explorer  н е   п о де р ж и в а е :  f i r s t - c h i l d .

т   ат к ж

е   п с е в од к л а с

с

# lin kList2  t t lselect  l i  >  a:  fi r st - c h i ld Эт

 к а л ыс  в  -не ме лэ та   с  имикоартнеф д  ятес я вл я км о т п о тнеа  эме л  с  имикоартнеф д   lin kL ist 2. К  та к и м  э л е м е н та м  бед у т  п р и м е н е н   с о т в е с т в юу щ и й с ти л ь , ес ли , к о н е ч н о , б р азу е р   п о де р ж и в а е т   п од бн ы е с е л к то р ы .  К о л ь   скор о   дл я   Internet  Explorer  едл о   о б с от и т   н е  так , т о   о н  п р о с т о   п р о и г н о р и р уе т   ат к о е   п ра ви ло .

м о юб л

о   п рави л

о   и н т е р п р е т и р уе т с

 тне ме лэ

  п к ис а ,

О тс у тв и п с е в од к л а с о п р и  к о ди р о в а н и д а  э т и  н еод сатк б ы  о б о й т

е   п о де р ж к в  -   и с то ч н и и  сит л е и  м о ж н и   п р о блем у

я   та к :  впаряе  яс мещ я андхо  вунитр   l s e l e c t ,  й ы ркто

и   дл

я   п о до б н ы х   с е л к то р о в  и к  п о с то я н н о й  г о л о в н о й   бол и й  дл я  Internet Explorer, н о  и н о г о  о б р а ти ь  себ е  н а  п о л ь з у , ч то -

.

•

п н С еы ц и ь л а

е т к фе  эф

Р а е з д л ин

е с т ил е

Ч то б ы   в о с п о л ь з о в а ть с н и сп адю щ и о т  п о дер ж к з ер в н ы е  с ти л и

й

ы

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

я   CSS  дл я   с о з да н и я   к раси вы х   м ен ю   и  в  т о   ж е   в р е м я   н е   о тк а з ы в а ть с и  Internet Explorer, п р и де тс я  о б ъ я в и т , к о т р ы е   Internet Explorer  п о н и м а е т

х я

ь  р е :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE dHglm л  >•  Ut  Ctrtngwune j* m o d t f y t f Q

1

1

е б ол е

У   р еали з ац и п ек т , н а  к о т р ы

й   с от и

,

s

c

«

T

o

n

g

C

S

:  1  

S

a

Й ЧВ ,  The code r c nunq  &ч  same,   t e  c r % Vi n j  t u t h w  Ltunyed *  Vie Unfe

» «i d toUJ c tnBol CSS alknvt ш г ч о М i  o w h t t t y t e u f a t i i p H t u t '  dociimenL  T h »c n y * a y f i »c a n t e • Lct- aod n  a way t u t g ab pmpte

•

•

zyxwvutsrqponmlkjihgfedcbaZYXW

may went  n a r i i r q  at  hit   Гу а / v a nwer  - or kad  * I K  - a , befcra, but follow W  listed ( Н «  ю   l o a n  стгв,

... 

. 

, . „ ;

con,

.

'  fib**!*  « d - o o e D u s »  (t. we win

с Ри

т -

a: first- child  {

й CSS »  ест ь   вн и м ан и е

ь   ещ

е   о ди :

н   ас -

# H n kList2  ul  >  l i :  la st - c h ild З ес д ь   и с п о л ь з ес т у я   н е  то л ь к о   с е л к от р   до ч е р н и х   э ле м е н от в , н о  и  п соевкдла с   : l a s t - c h i l d ,  о п р едл н н ы й в   сп ец и фи к ац и и   CSS3.  Е сл и   п с е в до к л а с с   :firstc h i I d п о з в о ли л  Э ри к у  в ы б р ат ь  п ер в о г о  п о т м к а  в  каж од м  сп и ск е  м ен ю , т о  э то т  п севодклас с  дае т  в о з м о ж н о с т ь в ы брат ь   п о с л ен д е г о  п о т м к а  и  п р и м е н и т ь  к  н ем у  св о й си т л ь . К а к  вы ясн ясет , в  н ек о тр ы е  брзауе ы  уж е  врсто не а   р ид у м е н а т р н а я   п о е др ж к а   CSS3, та к   ч т о   ем у   а д у ло с ь  до сит ч ь   д о у в л е вт о р и ет л ь н ы х   р е з л у ь ат о в .

Ј V

CS5- toinecldeB^i,  " > i:  t  S VB V

•

ю  э от г о  п р и ем а , Ш еп э р д  см о г е   дл я   р а б о т ы   м ен ю   в   Internet , о н и   в ы гл я д т   н е  та к   п р и х  б р азу ер ах ,  н о  вс е  ж е  н е  уро д и   г о яд с т .

ю   в   «Т ю ль п ан е т   о б р а ти т

e

and h jc in  nova been c b r vn t vat o d

е п р в ои д т н у ы и   м ен

g

t w f l e  to  won! on i  c o m  сО »"»

html  > body  #linkList2  li { margin:  0; padding:  3px; border- bottom:  lpx solid  #887;

щЕ

p a

I ? 

Э т о  л и ш ь   м ал я  ч ас т ь   п олн о й  та б л и ц ы   с ит л е й , к о т р у ю  м о ж н о  п р о с м о тр е ь , о тк р ы в  CSS- фай л  дл я  ди з а й н а  «Т ю ль п ан » .  Т а м  ест ь  в с е  с ти л и , к о т р ы е   п он и м ае Internet  Explorer,  а  так ж е   и  до п о л н и те л ь н ы е ,  р а с п о з н ав ем ы е  л и ш ь   б р а зу е р а м и   с  б о л е е   п олн о й   п о ед р ж к о й  CSS. Э т и  с ит л и  легк о  о тл и ч и т ь   п о  н а л и ч и ю  селк то р а   до ч е р н и х   э л е м е н то в :

Р а з е дл и в  сит л и  с  п о м о щ ь р еали з о в ат ь   п р и г о дн ы Explorer  (р и с . 6).  К о н е ч н о в л ек а тл ь н о , к а к  в  дргуи ли в ы   и  дл я   н а в и га ц и

i

rtrtdeU.  *««- Wki  .. "  и   jiinwre m i j i »  dies * B I*  f , 5  :r *  bap, t u t  . not вфио г >  tore*  > 4 ;; ly t- л   DAltory  .

#linkList2  { position:  absolute; top:  65px; left:  750px; z- index: 2 000; height:  150px; margin:  0; padding:  0; width:  1350px; ) #linkList2  a { border:  0;

# H n k L i s t 2  # l s e l e c t  l i d i s p l a y :  b l o c k ;

W

t k№  are r e a c t * * ,  t u t ««  s«*mpta ' filn  are t om nvnt od  well er o u f > (hat

. 6  4- и с р  Ве He а т к о вис  ка р

я  мн е ю  дл я  Internet Explorer. , ка к щ ию а д а п с ни е  мю н е , н о т а т о б  ра

ь н мж о

о

S

;

Че м

г   СОВЕ

у  м ы  н а у ч и л и с

ь zyxwvutsrqpon

Т

Н о  н а  м о м е н т  р а б о т ы  н а д  э то й  к н и г о й  спе ц и ф и к а ц и я CSS3 е щ е   н е  б ы л а   з а в е р ш е н а , а  в ы   в и д е л и , к а к   п л о х о т а ти чор П ь  о  рт о б а е  Дин а с д р  Эа в д а  на д  Internet  Explorer 7 н ек о т р ы е  б р азу ер ы   п о де р ж и в а ю т   ад ж е  и м е ю щ и е с я н м жо о   н а  стй а е   http:/ / dean.edwards.name/ IE7/ . Пе и р м р е к о м е н да ц и и .  М о ж н о   л и   с ед л а т ь   ч то - то ,  к р о м е  по whatevenhover с те а д ж субо я   н а  сци н ар т е  www.xs4ail.nl/ и ск а   о б х дн ы х   п ет у й   дл я   Internet  Explorer?  В о б щ е - peterned/ csshover.html. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA т о   ад ,  н о   в а м   р е ш а ть ,  н а с к о л ь к о  п р е дл а г е м ы е   вари а н т ы  в а с   сутр а и в а ю т . В о - п ер в ы х ,  м о ж н о  п о  ум о л ч а н и ю   р еали з о в ы в ат н ам и ч еск и е   м ен ю   с   п омощ ь ю   JavaScript- с ц е н а р и е в В  э то м   н е т   н и ч ег о   п о р о ч н о го , п р о с т о   CSS  п о з в о л я е с де л а т ь   т о  ж е  с а м о е  б о л е е   э л е г а н тн о , н е   з а дму ы в а я с о   то м ,  в к л ю ч и л   л и   п о л ь з о в а те л ь   в   свое м   б р а уз е р JavaScript  и л и  н ет .

ь   ди

. т ь е

Д р г ау я   а л ь те р н а ти в а   -   в о с п о л ь з о в а ть с я   ат к  н а з ы в а е м ы м zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJ  htc- .м о йл фа  Э т о  р а с ш и р е н и е  п о де р ж и в а е т   от л ь к о   Internet  Explorer.  С   п о м о щ ь ю   сц ен ар и я , з а п и с а н н о г о  в  htc- ф а й л е , м о ж н о   и з м ен и т ь  п о в е д н и е   сам ог о б р а зу е р а .  С а м ы й  и з в е с тн ы й  о б ох дн о й   м ан ев р , р е а л и з ован н ы й  с  п о м о щ ь ю  э то й  те нх и к и , -   э т о   п р о е к т  IE7 Ди н а  Э вд а р сд а   (D ean Edwards), в  к о т р о м  с  п о м о щ ь ю н еск о ль к и х  htc- ф а й л о в  и с п р а в л е н ы  н е к о т р ы е  о ш и б к и   в  Internet Explorer  и  до б а в л е н а   п о де р ж к а   п е р од в ы х  в о з м о ж н о с те й  CSS. Е щ е  о ди н  в а р и а н т , к а с ю щ и й с я   п е в од к л а с а   : h o ve r ,  -   э т о   п р и е м   whatevenhover, б а з и р ую щ и й с я  н а  те х   ж е  п р и н ц и п а х . Н о  н а д о  и м е т ь  в  в и ду , ч т о  вс е  э т ц и аль н о  н е  п о едр ж и в аю стя , та н ад о  с  о с то р ж н о с ть ю , вс е  тщ а те л ь н е й   п ри род е   о н и  п р о ти в о р е ч и в ы к ац и я   до л ж н а   бы т ь   п о де р ж а н н ек о т р ы е   п ру и с т ы   п о лаг ю т фи ль т р  -   н е п р и е м л е м о е  р е ш е н и е

я

Че м

у м ы

и алн ч у с

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

ь

О т   рх пу к о г о   тю л ь п а н а ,  да в ш е г о   н ач л о   ди з а й н у ,  д о слож н ы х  в о п р о с о в  о р г а н и з а ц и и  м е н ю  с  п о м о щ ь ю  CSS (к о т р ы е   ет о р е ит ч е с к и   р е ш а ю тс я   э л е м е н та р н о , есл и zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA б ы   то л ь к о   б р а зу е р ы   до л ж н ы м   образ о м   п о де р ж и в а л и  с п е ц и ф и к а ц и ю ) и  то н к о с те й  п о и с к а  о б ох дн ы х   пу ет й  и  ф и л ь тр а ц и и . Вс е  э т о  ес т ь  в  «Т ю ль п ан е» ,  я в л я ю щ ем с я   п ри м еро м   и з о б р е та е л ь н о г о   и   в м ест е   с   те м о тв е тс в е н н о г о   п ри м ен ен и я   та б л и ц   с ти л е й .  Да ,  в с е ди з а й н е р ы   с   н етр п ен и е м   ж ду т   то г о   м о м е н т а ,  к огд а н е о б х ди м о с т ь   в  тр ю к а х   о п т а ед т ,  н о , п о к а  э то т   де н ь н е  н ас тл , н жу н о   ч у и ть с я ,  к а к  м о ж н о   в о с п о л ь з о в а ть с я   сам ы м и   п е р до в ы м и   с р е д с вт а м и ,  п р е дсу м о тр е в  в т о   ж е   в р ем я   р ез ер в н ы й   вари ан т  дл я   м ен е е   с о в м е с ти м ы х   б р а уз е р о в .  С   «Т ю л ь п а н о м »  м о ж н о   р а б о та ь  и п о л чу а т ь   э с ет и ч е с к о е   д оу в о л ь с т в и е   о т   п р о с м о тр а  в лю бо м   б р азу е р .

и й з а не Д

р  Пир т а

к  X. Лкуа

е  (Patrick H. Lauke) zyxwvutsrq

www.csszengarden.com/041

к ил а т К

а в  м о й  са д

т ас о р П

я т а л б ци к и щ ю а т л е я пч в

а ст л и е м ы н а л ь у зи в

й и д о вр п

т м та к фе эф

м zyxwvutsrqponm

Ф о т г р а ф - э н зт у и а с т   П а тр и к   ка Л у е   п р е дп о ч и та е т  делат ь  ф о т г р а ф и и  с а м о с то я е л ь н о н е  п о л ь з о в а ть с я   го т в ы м и .  Н е  сатл а   и ск лю , п р и с л а н н а ч ен и е м  и  «К али кт а  в  м о й  с»да с а й т  Zen G arden. каЛу е  и с п о л ь з о в а л  фо т гр а ф и ю   в   к а ч е с тв е   вели к олеп н ог о   фо н о в о г и з о бр аж ен и я .

, а я  н а о

К ром е  ф о т г р а ф и р о в а н и я , Лк ау е  п и ате т  п р и   г он ч б п о   и за й н д с тр а с ти е   к   кон ц еп ц и и zyxwvutsrqponmlkjihgfedcbaZY (incidental design), к о т р у ю  ещ е  н а з ы в а ю т  и-с ктвсмуо  нк о адхо  (found art) - и с п о л ь з о в а н и ю с лч у а й н ы х  п р емд от в  в  п р о и з в едн и я х  и ску с тв а .  В   да н н о м   с л чу а е   Ла к у е   о тс к а н и р о в а л рж авы е   ж ел з к и , в а л я в ш и е с я   р я до м   с  п о м е щ ен и ем ,  дг е   о н   тр диу тс я .  О н и   в н е с л и   сво й вк ла д   в  с о з да н и е  о щ ущ е н и я  ув я да н и я , к о т р ы м  п р о н и к н ут а   р а б о та .

Ва н ож с т

ос н т а В ж

ь он ф

ь он ф

а

а

zyxwvutsrqponmlkjihgfedcbaZY

, и  ти п о г р а ф и я  «К а л и кт и  в  м о й  дас » иг оХ т я  и  о б р а з ы раю т  р о л ь  в  с о з да н и и  м р а ч н о в а то г ,  м е л а н ох л и ч н о г о е   в с ег о  э ти м  э ф е к т о м  ди з а й н  обя н а с тр о я , н о  п р еж д з а н  и с п о л ь з о в а н и ю  ф о н о в о й  г р а ф и к и . К о н е ч н о , т о  ж е сам о е   можн о   ск аз т ь   о  м н о г и х   р а б о та х   н а  с ай т е  Zen G arden, н о  име н н о  э т а  наи б о л е е  о тч е тл и в о   и л ю с тр и реу т  в а ж н о с т ь   п оз и ц и он и рован и я  ф о н а  и  ег о  п о в ед н и я  п р и  п р о к рту е  дл я  с о з да н и я  н е о р ди н а р н о г о  в н е ш н е г о   в и ад . О сн овн о й  э ф е к т  до сит гаест я   до в о л ь н о   п рост о  и  ви ед н  в  р а з н ы х  брзау е х . Лкау е  п р и в я з а л  ф о н о в о е  и з о б р аж ен и е  к  э л ем н т у  b o d y  и  з а ф и к с и р о в а л  ег о  (р и с . 1). Н а о х дя щ а я с я  сп рав а  о б ласт ь   к о н ет н т а   п р о к р ч у и в а е ст я н а  ф о н е  н еп о дв и ж н о й  к а р ти н к и . Р аб о т а  с  и з о б р а ж ен и я м и  - э т о  к р а егуо л ь н ы й   к ам ен ь  ди з а й н а  н а  осно в е  CSS. В аж н о   п о н и м а ть ,  к а и е  в   в а ш е м   р асп о р яж ен и и   ес т ь с в о й свт а   и  к а к  он и  в л и я ю т   н а  в н е ш н и й  в и д  сит л и з еу м ы х   э л е м н то в .

тс й в о С

а н фо

а в CSS

У   фо н а   ес т ь   ш е с т ь   с в о й с тв ,  в к л ю ч а я   с те н о г р а ф и ч е с о   b a c k g r o u n d .  Вс е  о н и  п е р ч и с л е н . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  1 •а в о  Фон я а к и ф  га р анна в о р и , асц о с я  с нто е ем  л э м  body к о е   с в о й с тв та б л .  1 в м ест е  с  н е о б ох ди м ы м и  п о я с н е н и я м и Рис

а 1 •в т  Свойс Таблиц Свойств

а он  ф

Оп и с а н и

т  цве о П з в л яе

ba ckground- image

т  фон

о Пз в е я л

b a c k g r o u n d - a t t a c h m e n t 

те я л п р д О

b a c k g r o u n d 

и е н ч т с С о г р к аф

у  в  кечасвт

ь  кар ит н к , дно л ж

background- position

а

т  рзам есит

е т яп р л д О

background- repeat

о  л и  фо но в

т  п о з и ц о н и р о в ат

н и еже е ыз ав

, н о  и  цев

т  фо на

т  и х  вм сте

е  с о т а рьл узе

я   з аг р уз к вр ем я

ы   о п р ю яе л д

о  л и  фонов

к и   с р та н и ц ы

й  ме ож у  зниад

т   у   л е и т оп с е

т   б з р уе а

, единюящоб ъ е

е  вс

, о н  п о ак

я  проич

-

х  сиелйт

, а

я   н ое к т р о  цтев

е   бе о л

-

е   в п н а ло

а  и  кар ит н к

, т о  вдол

. 1942

й  о с

, заноятг я  вм сет

и

о  э лем еонт

е  с  ко нет

м

м

е  вы ш еп р ичс лен ы

о б а вДл е н и и з о б р а еж н и ве ц т

е онвг фо я и з а д ни а н фо

о е

а

-

Дл ни ни

я   з ад н и я  с л жу и и   кот рог

я   в  та б л и ц т   с в о й с тв о   п р о с та в л я е тс

е   с ти л е й   фо н о в о г о   и з ображ е о   b a c k gr o u n d - i m a ge ,  в  з н а ч е я   U RL, ук а з ы в а ю щ и й  н а

• 

9 3ак

ь  ка ко

е и  ос

й  п р о и с о в

и  да

о  п р ям о уг нльи ак е  п р о куичсвьат

е  и з о б р а

т   с ь р б е пт о в а

е  о ндо врем ен я  инел та чепв

.

и  упрваеля м  прим ен и

и  и з оенбир аж . Поэм т

е я лв а т

. Цм а тев

о   нов фо

я , и  ес л

е  онот с инелть е  и з о еб нри аж

е  с в о й с вто

т   н е  ток ль

о  и з о бе нриаж е  п о втрсья

ь  и з о еб нри аж

, дно лж

е  фонв о г

е  и з о бе нриаж

Е е  ди зай нер

лд

е

е я л д рп О

background- color

М но иг

.

а  в  CSSzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о

г И Н А Ч М ИРЕ П

ы  в

' 

"

п С е н ц ы и ьл а м е с то п о л о ж е н и с и те л ь н л ю тн

е т к  фе э ф

е   к а р ти н к и о   CSS- фай л а   н а   то а   м оже т   ук а з ы в а т о  -   и  то гд

ы

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

. URL з а д е тс м   ж е   сер в ер ь   н а  др гу о

я   ли б ,  л и б

о   о тн о о   абсо й   сер в ер

:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

background- image: url(images/my.jpg); Ч то б ы   з а да т ь   ц ве т   фон а ,  п р и м е н я е т с я   с в о й с тв b a c k gr o u n d - c o l o r .  З н а ч е н и е  ц в е т а  м о ж е т   з а д в ьт с я   в   ш е с тн а д ц а те р и ч н о м   в и ед ,  в   с о к р а щ е н н о й   ш ес т н а д ц а те р и ч н о й  з а п и с и , в  в и д е  RGB и л и  о дн о г о  и з  п о д де р ж и в а е м ы х   си м в о ли ч еск и х   н аз ван и й :

о -

background- color:  black; М ожн с в о й с тв о и з о бр аж ен и е с п ут и

о   та к ж

е   в о с п о л ь з о в а ть с я   с те н о г р а ф и ч е с к и м м   b a c k gr o u n d ,  ч то б ы   сраз у   з адт ь   и  ц в е т , и ,  и  р я д  др гуи х   с в о й с тв .  И м е н н о  та к   п о л   а Лк у е :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA с и Р . 2 •  о в о н Фо е и н е ж а р иб о з body { д го к а н е  кт н о ятс т е а в и ч  пу р к о р background:  #000  url(background.png) н ме р в о н д о о т ве д и ь  ке н о - рОЗ х  Ор х  no- repeat  fixed; }

С в о й с вт м ат ь   з н ач ен и з ес ту я  в э л ем н т н о й   рабо т б р аж ен и

о   b a c k g r o u n d - c o l o r  м о ж е т   а тк ж е   п ри н и е   t r a n s p a r e n t ,  и  э т о   а к ти в н о   и сп оль  «К али кт е  в  м о й  с» ад . В  э то м  счлуа е  с к в о з ь  ф о а  п р о спут а е т   то , ч т о  н аохид ст я  п о д  н и м . В  дан е   п роз рач н ост ь  ч а с т о  и с п о л ь з еутс я   дл я  о то я  с с ы л о к , н а п р и м е р :

а   { color:

е с т е  оа т с . Ин ме ц тс  тк е

я м ы н ж и в нд о п е о м  по тэ о а  ии ф а р г о т  фо

, у н  мж о

о ю

н -

#eee;

t ext - d ec o rat io n :  none; zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

б ос п С

ы

ывон фо

п р и с о е идн и х и з о б р а еж н и

я й

С в о й вс т о  b a c k gr o u n d - a t t a c h m e n t  м ож е т  п р и н и м ат з н а ч ен и я   s c r o l l  и л и   fi xe d .  П о  ум о л ч а н и ю   п р еп д о лс а г е т я   з н а ч ен и е   s c r o l l ,  т о   сет ь   фо н о в о е   и з о бр аж е н и е  п рокч уи васет я  вм ест е  с  к о н етн от м . З ад в  з н ач ен и fi xe d ,  м о ж н о  доби ьт с я   э ф е к та , к о т р ы й   б ы л   н ж еу к е ау Л : и з о браж ен и е  осает я  н а  м ест , а  п ро к чуи в аест отл ь к о   к о н ет т   (ри с . 2). И м е н н о  так и м   о бр аз о м   к ау Л п р и с о еи д н и л  фо т гр а фи ю  к  э лем н т у   bo d y:

ь е н я е

body { JJOU; ba',viik>i.ii - йл

: 

ft 

-

/ * ' 

о

:

и

^

.

  о  i3ii| Other —> Offset)  п о з в о л я е т   и м и ти р о сиР .  9 •   р П и  пионре тв и  нивд ы  сыкт а  и  п о я в в ат ь  в ы дв и ж е н и е  к а р ти н к и  з а  г р а н и ц ы  хол с т лен и е  с  др гуо й  ег о  с то р о н ы , та к  ч т о   с р аз у   с та н о в и тс я в и дн о , ч т о   п р о и з о й де т   н а  с ыт к е . Н а  р и с . 10- 12  п о к аз н  п р о ц ес с  с о в м е щ е н и я  ц в еот в  тра в ы , а  н а  р и с . 13 о к о н ч аетл ь н ы й  р ез льу а.т  К о н к р е тн ы сп ос б   вы би рай т е   сам и   -   м о ж ет е   в з ят ь   и н с т р му е н Clone Stamp и л и  Healing Brush, ч то б ы  к л о н и р о в а т ь   ч ау кст и  н есыт кю у щ и с х я  облаест й  дл я  з а к р а ш и в а н и я  ш в о в и л и  в о с п о ль з о в аьт с я  р а с м о рт ен н ы м  в  глав е  4 м еотд р а сш у т е в к и   и л и   к а ой - ли б о  др гуо й   ет н х и к о й , н а и б о ле е  п о хдящ е й   лд я  и м ею щ его с я   и з о бр аж ен и я .

с е У ч ни

и

й т , м -

ис Р . 1 к и п лт о тевц

0 •   Н а  оонд й  см ще оне е  внид о  нивст е о в  н а  саык т х  

й е  

ис Р. 1 о л н ик р в а е с т а бо л

1 •   В т а т ь л у  з е р й  ш о

е я   п р и м ю аы щ к и в  зшрасктеиав

х я

е

П ри вод я   в  с в о е й   с та ь е  Elastic D esign  ц и та у   и з  о н а   (H aiko  H ebig) лай н овог о   дн е в н и к а   Ха й к о   Хе б и г (www.hebig.org) (р и с . 14 и  15), Г р и ф и т  о мт еч а ет ,  ч т о д р гу о й   п о хд д   к   э л а с ти ч н о с т и   с в яз а н   с   и сп оль з ова н и е м  и з о б р а ж е н и й , до п су к а ю щ и х   п ер м ен н о е  усеч н и е . П о  м ер е  ув е л и ч е н и я  и л и  ум е н ь ш е н и я   д о с т пу н о й област и   с та н о в и тс я   в и дн а   больш а я   и л и   м ен ь ш а я ч аст ь   и з о бр аж ен и я .

сиР ив

.  12 •  ын ьле та чон к О д  пкилт и й

сиР ме н

.  13 •   р е п Т е  зман те

ь  с гы к

и  гоздра

ы

Етс ь  дв а  п ро сыт х  сп осб а  о р ган и з о в ат ь  таког о  род а  э лас И Н Р ПМ Ч А Е Е ит ч н о сьт : п р и м ен и т ь  св о й свт о  o ve r f l o w:  h i d d e n  к он тевЦ й н  ва и р а т  рси . 8- 13 см . н а е к д а вл к . к о н ейт н ер у   и з о б р а ж ен и я , дл я  к о т р о г о  з анд а  ш и р и н а в   п р о ц е н а хт ,  и л и  ж е   св яз ат ь   с  э л ем н от м   п ер м ен н о й ш и ри н ы  фо н о в е  и з о бр аж ен и е . К арит н к у  ш и р и н о й  600 п и к с ел й  м о ж н о  в л о ж и т ь   в   d i v:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о

с и на л ы Э ч т Дале , есл н у ю  в  п р о ц ен атх з ад в   с в о й с тв

и  дл

й  д и з а й

я  э то г о  d i v  ку а з а т , т о  ч аст ь  и з о б р а ж е н и о   o v e r f l o w : 

н

ь   ш и ри н у

,  в ы р а ж е н я  м о ж н о  с к р ы ьт , h i d d e n :zyxwvutsrqponml

#wrapper { width:  lOem; overflow: hidden;

В м ес т с тв е н н с и Р . 14 •   В о в нй  оа л н м л а н жур е  Хек й ли и  мш аь н е я  чтс а ь о н е  ржо л пс а й  св е л в  змитсо в а и  о т со щмгюие я а в тс н па р тсо р и д я л гыв т и н е  иж арбо з е  пр и щ шюе а рр з а

о  Хег иб

а  вн д и

а  бш аь л о и

а и ф ар фого т . Зс е д

ь о пн аз ко

й  стсо нб п

я

, ка к и  800x600

Е сл а тр и б у ч ае хо д н ы

о   э то г о   можн о  с  d i v,  ку а з а

. 15 •   Т а  ж е и ф ар го т  фо 1100x600. От и т а р б е  веимн а н ь л а нои ц р по о  с а ли ч л е в у

г   ЕВ О С т фо Т д н ев С

Т

я   рп и щ ршюе ар з , чт о  шнир ь

й  сстонб п а и  фоф ар го т

и

и

Э л а с ит ч н ы кс т п орц и окн ж ес т ч аст др гу и в и ть с

е   н еп о с р ед е   фо н о в о го

:

ttwrapper  { width:  10em; background:  u r l( skylin e . jp g)  n o- repeat; } и   и з о браж ен и е   п о в то р я е м о ,  т о   м о ж н о   о п су т и т ь т   n o - r e p e a t  и   в ы м о с ти т ь   и м   э лем ен т   в   слу , к о гд а  р а з м е р   # wr a p p e r  н а ч и н а е т  п р е в ы ш а т ь   ис й   раз м е р   и з о бр аж ен и я .zyxwvutsrqponmlkjihgfedcb

тО л у н о и с к си Р

о   с в яз ат ь   и з о бр аж ен и в   ег о   в  к а ч ес вт

ь - и вп е р

д

й  ди з а й и  в еб- сртан и ц и  ди з а й н а  брзау е я   боль ш и   и з о б р аж ен и я м   н е о ж и да н н ы я  с  э ти

н  -  э т о  и н етр с н ы й  н о в ы й  м еот д  в ер е  о с то р ж н ы : п о ск ль к у  п р о , н о  бьтд у а   и з м е н я ю тс я   н ез ав и си м о   о т   р аз м ер о в , т о  м о ж е т  п о лчу и ьт с я , ч т о  с рт а н и ц а  о к а е   окн а , а  э т о   м о ж е т   п р и в ест и   к   с уе ч н и ю ,  п о я в л е н и ю   п олос ы   п р о к р ту и  и м   в ещ ам .  В  к а к о й - т о   м ер е   сп ра м  п о м гае т   с в о й с вт о   m a x- wi d t h :

е  (Sven Tofte) пи жо л д е р л йы н тр а нд н а тс е , н о а  ртоб а щ юи й м пеи р , чб о т ы т а во р кис н меоп ь и в тс т ус от е к ж пр е д о и  йосв #container { в тс а  m a x- w i d t h  в  Internet  Explorer б  (www.svendtofte.com/ max- width: 7 00рх ; code/ max_width_in_ie). zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA }

О дн а к о   Microsoft  Internet  Explorer  6 дл п о де р ж и в а е т   с в о й с тв о  m a x- wi d t h .  И м е ю тс б ы   обой т и   э т о   о гр а н и ч ен и е ,  н о  в с е   о н и н ы .  П р и ч ду ы   б р а зу е р о в   м о гу т   п о б дуи т э к с п е р и м е н то в , н о  ч т о  ж е  п о де л а т ь   -   о св о ен и в с д ег а   п р о х ди т   с  п е р е м е н н ы м   су п е ох м э т о  н е  та к  у ж   п л о х . П р и д ум ы в а н и о к о н ч и ть с н ы й   и то г м е р   то г п р и н ест

я   Windows  н я  с п о с   н есо в ер ш ен ь   к  о тк а з у  о е   н овог ,  с а м о  п о   себ

е   н овы х   сп ос бо в   работ ы   в  Web  м о ж е я  к а к  усп еох м , та к  и  н адечу й ,  в а ж е н  к о н еч .  «Упагру я   лжу а й к а »  -   э т о   б л е с тя щ и й   п ри ,  к а к  э к с п е р и м е н т ы   о дн о г о   ди з а й н е р а   м о гу и   п оль з у   в с ем .

е т о е т т

ави Ж

яь дорогзи

, с . 254

и д Ра

о Zen, с . 260 zyxwvutsrqponmlkjihgfedcbaZYXWVUT

E N  G A R D E N t h e b e a u t y o f e ss

A

и ц а ор п Кор

D I V I S I O N

я ZenWorks, с . 272

OF

о рыт к От

е он ко

, с . 278

о е к н Р с цр и у т К   гю

у  о т ы ц ги н а р

, с . 266

М но ж ко т р а чи т с б о р ко

я о   с ес т я  в с е

ь   и   з ав е с т м  на м  н р ав и тс я а   и   н е   з а н я т сь

и   р аз го в о

р   о  те о р и , , н о  е с л и  н е  з ас у ь   р у ка в я   с а м о с т о я т е л ьн о й   г о л о в о л о м ки , ко т р у ю   п р е д с ат в л я е т   собо й  д и з а й н   н а   о с но в е   CSS,  т о   в с е   э т и р а с д е н иу ж я  о с атну я  тум ан ы м и  и  б е с п о ч вен ым и . о бтЧ ы  в ы  м о гл и  п о п риатко свь я , м ы  оотб р а л и  ш ес т ь  вари нот в  д и з ай н а  CSS  Zen Garden и  про анли з ро вал и  п р о ц ес с  с о з дани я  табли ц ы  с итле й  дл я  до гкаж о  и з  ни х . Пр о й ди т е  э от т пту ь  с  н ам и , и  в ы  санет е  лшчу е  по ни м ат ь  п р о ц е д ур ы  и  м еот ды , п р и м е н я м ы е   в  с о в р е м е н но м  ди з ай н е  н а  о с но в е   CSS.

а к и м н ео М

, с . 284

р еи в К

и й з а не Д

н рМ и

е  (Kevin Mears)

www.csszengarden.com/031

и ва Ж

я  изгорд

ь

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

T oday, we  mtM  c k«r  Й ж   mind e l  niwt  paatlk^s.  We!) .>  '.).h!.t.- i- Ti h n l  е м   к М   wdM H fci  l  Й н   M M Ь ва Ю  oTftjlk  Kke ih« W) C  WaSV  M JJ ih«  rrajiif

Th S

i

r

t

w

i

g 

C

S

со п и п ги

S 

i f c f i l s 

«

i

s  К

Й

С

С

И

Л

)  Г

-  

b

i

« 

l

i

« 

«

a

t

f

i

p

i

t

; 

I

t

j

f

i 

;

i r e

Ы  wen   mmgfi  il- .al m i  OSS  n ovkvs  can  и м   ihrm

м   «in m g  ) »ш » .  F t e  sw  iiw  CS S   « ш ж

г   ( M M   Ax

aJvant- dl  biW!i*h  and iip» uti WMtifcg M h  Ь й

.

Tfee   may  modify  Я «  «jyfc  4WTJ  in  «iv  way  y ) «:  M i l l ,  hill 1К Д

LK4 llj. ( »n«< ulu™™iiij) k a ' J л ш

Til Bd iH ^iW M nlnu(i- t'n rt*

шм пирн

х

wij, . , • . , .,   r f t * W>

Be ne f it *

lun,  * nd i га я

м

R e < | u i i T i i i e «l .

1"! j

L- mnrUKuwty, dwlxuta*  №

в  №

  hwhb

•

«

Э то з ер ран е ляю к р ы ти э то

g

i

»

i

i

m

—

.

.

• • • KI

r Hc h l l a».  f ic awt io iiinAJHivw. r b ' *  i  > a . H * l u i m t

*

т   п ла н  с р а б ты в а е т ,  ес л и   р а з м е р   ш ри фт а   в   бр ау с Ри . 3 - f Пол с е и н е н м еи р п я г о  бв з а и н оа в о р и т м ар  фо я е   п о - п р еж н ем у   с о та в л я е т   10 р х ,  к а к  б ы л о   з адн о е  (р и с . 3). Н о  п о с к о л ь к у   м н о ги е  б р а зу е р ы   п оз во You  may modify the ityle sheet in any way you wish, but not the HTML This  шп у  «win diunli zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH т   п о л ь з о в а те л ю   м а с ш та б и р о в а т ь   те к с т ,  т о   п ер Download  the sainpW htm! file and ess fifc Lu work и л  a copy bcalty. ( we  you have  completed under your control. .4?ndus*_)inkto  the file and if we choose to u*' it, • ? will spider the iusodsl .« е  в с е  ж е  в о з м о ж н о   (р и с . 4). М ы  е щ е  в е р н е м с я  к B e n e fi t s й   п р о блем е   н и же .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Why  partjdj»*te?  For r«ci>jj^ntion, uispir;iti»n, und a resource  we еи л  all refer to when miking li E n i ^ M ' t i i i c n f  / J o s

B e e n 4 c f t i « t w < r f 

To  l i t e  Tireless  Of  Folk  WaSP 

Like 

And 

Tlie 

The  Css  Zen 

я е лс о

Thanks Efforts

The 

B r o w s e r 

О р г а н и з а ци и п р и с о е ид н и Е лс

M

WyC,

Major

Creators.

Garden

Invites You Т а  Relax And Meditate On  иП vQf

в

the leap, but not enough haw.  One day this gallery will b e a hUton..- *lairtt>»ity; that day it not to R c q u  1 r e m e n  t s

zyxwvutsrqponmlkjihgfedcbaZYXWVUT

е гриак ф

a We  «вя Ы  like to see  as much  CBSl а я  JtOMJUt.  CSSi  diould  be ihuJMiT to widely- suj.|>- iried trickii viewable b>-  2% uf the browsing public The only гие ! ш ц ^ ц и щ !  we have ш  thai fMV  CS? Unfortunately,  dciiigniiig iliin way highlights the Eluwv iii the ш н ш   on jlfitwrntjlioit.  ul' С Я i fix  toi  one leads to breakage in another. View the Re»o_ur;es |*fte  lor  inforttuiikii  every" pki'tiuVn  . B«t  du test iii  at i j expert you  to «line up with  ptaripiftid  code апеюл • popalalion), chance» are we won4 accept it.

и

! We ask that you submit original artwork. Please respect copyright Ь м   1Р *а с

и  в ы  ещ

е  keep ofaji»Xionab

е  н е  п о см ортели , ка к  о р и ги н а л ь н ы й  ди з ай н This  Li a lednung йег хе е   а я  well es  a demomtration.  You  retain  EIL I copyrig^it on your  д Creative С и ш кл в  UettM  ijjentical  to the fXM  00 ibis site so that  otbm may barn  from ;n>ur п р о к ч у и в а се т я   п о   г о р и з о н ат л и ,  рек ом ен уд м   ел а с т д ь Bandwidth graciously donated tiy I)rcaml'1ie  SUidios (html  №»  cc  ff)8  aaa э т о  сей ча с  (р и с . 5). К а к  н и  срт а н н о , э ф е к т  доист аге я бе з  и с п о л ь з о в ан и я  сц ен ари ев . В  «Риад о   Zen»  и з обрает те л ь н о   п р и м ен ен ы   сло и   и   з н а ч е н и е   f i x e d  арт и бту а с Ри . 4  •   Пр и и н е ч и л е ув и р ме рз а а т  шф и р а н  вмж оз о и т ы р к е р пе е b a c k g r o u n d - a t t a c h m e n t .  П о ск ль к у   и з о б р а ж ен и е ш к ал ы  раид о п ри ем н и к а  п ри со еид н ен о  к  э лем н т у   body и аст ч е к и , т о  п р и  лю б о й   п р о к рт у е   с рт а н и ц ы   о н о  ос • . - • • . - .• с а ет я  н а  мест , а  осавтш аяс я  ч аст ь  с рт а н и ц ы  п р о к рчуи в са ет я  п о в ер х   к а р ит н к и . В  п р а в и л е  дл я  э лем н т а   bo d y е с т ь   с тр о к а ,  в   к о т о р о й   з а да н ы   з н ач ен и я   свой ст в b a c k gr o u n d - i m a ge  и   b a c k g r o u n d - p o s i t i o n :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB body { font: 10px Georgia, Arial, Helvetica, sans- serif; color: #353638; background: #F8F8EE(schaal.jpg) no- repeat fixed top center;  ;...,... margin: Opx;

ќ

• | , , 7 l,

•  .   ••  zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIH m.  •   to  «....   y ^  i m  •   m- ,

А   и н д и к а то

р  ш кал

ы  п р и с о еди н яест

я  к   э л ем н т

у

#supportingText: #supportingText { position: absolute; width: 123Opx; padding: 95px 0 0 185px; textalign: justify; си л bac:kground: #F8F8EE(naald.gif) top center repeat; no- r z- index: 3;

с Ри ло дв

. 5 > Пр ь  шл а к

и к т у р к о р п ы

е ц и н  са р т

ы о т а  ик и д н

р с т е щ аме р  пе

я

По з и ц о н и р о в ан и

е  ко л о н о

к

zyxwvutsrqpo

Т еп ер ь   до л ж н о   бы т ь   п о н я тн о , п о ч е м у   дл я   э л е м е н т zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

.  I  .  ,  i  I  i  .  i  I  , .  ,  I  .  .  >  I  i  ,  .  I  i .  i  I  ,   , Т |  i  ,   ,1  ,

#  s u p p o r t  i n gT e x t  з адн а  та к я  б о л ь ш а я  ш и р и н а п рост о   дл я   т о г ,  ч то б ы   в   н е м   п о м е с ти л и с ь   го р и з о н та л ь н о   в ы с тр о е н н ы е   абз ац ы ,  н о   и   ч то б ы   г а р н ти р о ван н о  п о я в и л а с ь  п о л с а  п р о к р утк и , п о з в о л я ю щ а б л ю да т ь  э ф е к т  п е р е м е щ е н и я   и н д и к а то р а .

Рис ка н о л ко

По з и ц о н и р о в а н и о лк н

а : н е я  н а -

е

.  6 •  Абзац ы с ли а аз  ок ь  втальн н о з и р  го енны ож о л о п  рас х х zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

к

П ок а   ч т о   е кт с т   в   е тл е   с т р а н и ц ы   п р е д с та в л я е т   соб й п о с л е д о в а те л ь н о с т ь   о ч ен ь   ш и роки х   абз ац ев .  И с п р а в и м  э то , р а с п о л ж и в   и х   г о р и з о н та л ь н о   п о п ер к  о к н а б р а зу е р а :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP

Be} l\ me- Hanarea izclmtques In New And Invigorating Fashion, Become One Wifa The Web.

#preamble { position: absolute; left: 10px; text- align: right; width:  165px; top: 95px;

Select  a Design: #supportingText  h3 { •   Sample #1 by Dave Shea •   SampleҐ2 byа\zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  Ъ т  "Shea margin:  0 8px 0 3px; •   SaniplB  "43  by Bave TStiea } •   Sample **W by bayejSheazyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA •   §Vmpte"ifi> bvuava"5he~a #explanation,  #participation float: left; width: 290px; } (ќbenefits { float: left; width:  150px; } ќrequirements { float: left; width: 500px;

The Css Zen Garden Invites You To Relax And Meditate On The Important Lessons Of The Masters. Begin To See With Clarity. Learn To Use T he (Yet T o Be) TimeHonored Techniques In New And Invigorating Fctshian. Become One With The Web. Select  a Design: •   Sample # 1 by Dave Shea •   Sarfiple #2 by Dave'Sflea" •   Sample # 3 by DayifSftea ^ 

Q a m n i o  & t  Ь

/  П 3 1 Щ

Devn  jnuiusvtnii 

Т а к   го р а з д б л ем е   м а с ш т а б и р еу м о г

р По б л е м м а с ш т а б и р уе м о г

si ti si t
 Dave/Srma

.  7 - f Пр

и ровани и аб шт  мс а

е   (р и с

.  6).  Т е п е р о   ет к с а .

ь   в ер н ем с

я   к  п р о

-

  Q h ft fl

ак п и

Г о  The Tireless Efforts Of Folk L ike The W3C, WaSP And  The Major Browser  Creators. The Css Zen Garden Invites  You  To Relax And Meditate  On The / rapontoJf Lessons C)f

Рис

о   л чу ш

и с  тек

т  перекрываетс

я

а о т е с кт а  тек ст

я   о тв е д н н о й   по ь   др г у и е   э лем ен ты и   а б с о л ю тн о м   п оз и ц и он и рован и э лем н т  и ск лю ч асет я  и з  н о р м а л ь н о г о  п о т к а  до кму ен ат . К а к  э т о  в ы гляид т , м о ж н о  уви едьт , п р о с м о тр е в   ср т а ниц у   с  те к ущ и м и   с ти л я м и  в   б р азу ер ,  п о де р ж и в а ю щ е м   м а с ш та б и р о в а н и е   те к с та ,  дл я   к о т р о г о   з адн е ди н и ц а  и з м е р н и я  рх , -   н а п р и м е р , в  Firefox.  П о п р о б йу т е  ув е л и ч и т ь   раз м е р   ш р и фт а   и   п о л ю б й у те с ь ,  ч т п р о и з о й де т   с о  с п и с к о м   в а р и а н то в   ди з а й н а   в  н и ж н е ч аст и   с тр а н и ц ы   (р и с . 7). о   о б л а с ти ,  п о с к о л ь к

, с л и ш к о ,  н а ч и н а е у   пр

м  д л и н н ы т   п ер к р ы в ат

а

й  дл

д и а й

о

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и  дл я  э от й  о б л ас т и  е щ е  н е  совсе м   го т аг д S5 1 *ix i«uwu i .i«*IU а  осатн сетя , есл и  н е  п о з а б о ит ь с я  о  н е й zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP hfWHi иП М Ы . В о з м о ж н о , в ы  уж е  о б р а ти л и  в н и м а н и е , , i i   # l i n k L i s t  аб с о л ю нт о  п о з и ц и о н и р о в а н гЙ Ы К М ы   (св о й свто   t o p р а в н о  0), н о  см ещ е н   от г , ч т о  с в о й свт о   p a d d i n g - t o p  р а в н о е  таког о  опсту а  р асп о лаг е т  сп и со к  ва а   н иж е   о с ат л ь н о й   ч аст и   с тр а н и ц ы  н а й  фа з е  веркст и  с тр а н и ц ы , н о  в  конеч н о м , I» IV«SJ-« R u it** , та к  к а к  об а  в л о ж е н н ы х  в  н ег о   d i v т  п о з и ц и о н и р о в а н ы  а б с о л ю нт о , п о э то е  сы грае т  р о л и :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA С РИ . 8 • лк  Ссы и  кв и в о т с  хво е раниц  ст ы л  пос е нени е  прим я е л и ст й • 

де п оз воли ни со ч аст п оказ ан

у   с в о й с тв о   t o p к а ж до г о   d i v  з а д н о  в  еди х   em, а  н е  р х , т о  п о л о ж е н и е   в е р нх е г о   к р а я  б у т   м е н я ть с я   п р и  и з м е н е н и и   раз м ер а   ш р и ф та , ч т т   и з беж ат ь   п е р е к р ы ти я . А   п о с л е   п ри м ен е я  до п о л н и те л ь н ы х  с ти л е й , п о к а з а н н ы х  н и ж е , с п и к   в а р и а н то в   ди з а й н а   и  с п и с о к  а р хи в о в   в  н и ж н е и  с тр а н и ц ы  с та н ту , н а к о н е ц , в ы г л я де т ь   та к , к а о  н а  р и с . 8.

• 

. . 

•

.

tt>h ™ j bi* n- , but Ш л и

'i#

Downttttd Uie lunp U htqil * t >

ttlselect, #larchives,  #lresources { position:  absolute; text- align:  left; padding: 5px; } #lselect { width:  1590px; top:  46em; background- color:  #E8E9CF; } #larchives { width:  хрОЗ ; top:  49em; left: 75px; } #lresources { width:  800px; left: 400px; top:  49em; }

П осколь к ница

zyxwvutsrqponmlkji

К о н еч н о , сит л в ы , н о  п р о б л ем п р ям о  сей ч ас ч т о   э лем н т в ер х у   с тр а н и ц вн и з   з а  сче т 480  р х . З адн и р и а н то в   ди з а й н п р о м е ж от у ч н о с ч ет е  э т о  н ев а ж н о вс е  р а в н о  буд м у  осту п  н

я

id

е Р ок н с р т у цк и

о й к

l i i i i t l H i i l I M lii.

И з чу е н и г ЕВОС р иП м е н и ы н с ют о л е нпи о л ж е ид н ц с те ав при во д

Т

М ы  ещ е  н е з аг о л в к а е я л в а ст О м е мч , с о  всме CSS- л й фа е

й

zyxwvutsrqponmlkj

ttlselect  u l,  ttlarchives  u l,  # lreso u rces  ul  { zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA margin:  Opx;zyxwvutsrqponmlkjihgfedcbaZYXWVU

е  з н аче и й м  позиц онир внаие е  с  уо етч ы  р х , т о  пенио л ж я  пр и  и зм ен и т  к  п ер кыитю

И Н ЧА - РИМЕ П

е   в о з м о ж н о с те

, изм ерны м  зеялва ст а  ша т риф

м  рмза ре е  зс теад и  рмз а ре

а  онк

х  в  em, в  с онаеичт и  с  аб т  безура р  втияслыч ь . Есл и  ж е  прим сеюнят я я  же с кт о  и  н е  пер с ыичт а  бзеруа , даж е  есл и  э т о

padding:  Opx; } #lselect  h3 { margin:  0 Ю р х   О  0; color:  #555F44; font- size: 8pt; float: left; font- weight:  bold; } #lselect  li { #color:  #000000; list- style- type:  none; float: left; border- left:  4px solid  #F8F8EE; padding:  0 5px; } #lselect  a:link,  #lselect  a:visited { border: none; text- decoration:  none; font- size: 8pt; font- weight:  bold; } #lselect  a:hover,  #lselect  a:active  { text- decoration:  underline; } ftlselect  a.c,  #lselect  a:link.c,  #lselect a:visited.c { color: #422222; font- weight:  normal;

.

Е  рса м рлеот и  рзма ещ ени е  карит но к  -   в  часнот и   и   дв у х   ни ж х   и з о б е р н иа ж й  р ади о п р и е м н и ка   э т о   в   е св ч а т к е  унеп риаж я  дл я   еялтаич и  симялт и  м н о ж о  о зноакм сиьт я  в  оригноаль  дл я  ди зай н а  «Рида о  Zen».

, . .  Впро м

И з еу ч н и

е в о з м но жс т е

П р о с ты е  н а  п е р в ы й  в з гл я д  с в о й с тв ш е м  р а с м о тр е н и и  м о гу т  п о р о ж да т и м о д е й с тв и я .  Т а к , ф о н о в ы е   к а р ти н к и н ы е   к   э лем ен т у   b o d y  с   а т р и б ут о л ю б о п ы тн ы й  э ф е к т  п е р е м е щ е н и те н т а   п о   н е п о дв и ж н о м у   фо н у .  В э ф ек т  н а ш е л  п р е к р а с н о е  п р и м е н е н и е и   мн ог о  др гуи х   в о з м о ж н о с те й ,  о тк р ы в а ю щ и к о е  п о л е  дл я  э к с п е р и м е н то в .

й а   CSS п р и  б л и ж а й ь   и н те р с н ы е   вз а , п р и с о е ди н е н м   f i x e d ,  д а ю я  п о дв и ж н о г о  к о н   «Р а ид о   Zen»  э то , н о  в  CSS ес т х   ш и ро

т т ь -

е н й а з Ди

р  Ро

б  Ш д ли

с  (Rob Shields)

www.csszengarden.com/093

К  юг у о т  грниац т но е К и а и вр о н з ц п

ы

, з а н гы М Ш Ш М Н Ш Н Н К'

' 

•  .

zyxwvutsrqponmlkjihgfe

й в л й т ос о с ь м о щп ю л ео п й я zyxwvutsrqponmlkjihgfedcbaZYXWVU zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQ

Бо л ь ш а я   од з а   к о ф е и н н а од , ч то б ы   п о д с те г н т у е  и ед и  п о с е ти л ш е м  счлуа л е  п р и е м а  то л и к и  го р яч ег ч т о  та м   б ы л о   н ам еш ан о яв и ло с ь   н и ка к   н е   м ен ь ш к лю ч ев ы х   слов , о п и с ы в а ю щ и сай т .

а  -   э т о   к а к   р а з   то ,  ч т ь   в о бр аж ен и е .  В  н а и  Р о б а  Ш к лсд а  п о с о   ч а я . У ж   н е  з н а е м , н о  в  р ез луь ат е   по е   50  и ед й   -   в   в и д х   общ у ю   ет м

о , е у

В  к о н ц е  к о н ц о в  Ш и лд с  о сатн о в и лс я  н а  треьт й и е д е   -   ет м е   Ю г о - З а п ад .  О н   н е   аст л   з ар н е е о гр а н и ч и в а т ь   св о е   в о б р а ж е н и е ,  р е ш и в ,  ч т о н а й ес д т я   м ес т о   дл я   л ю б о й   п о лез н о й  к а р ит н к и .  П о с л е   ч е г о   з а п су ти л   Adobe  Photoshop  и р або т л  с  гр а ф и к о й , п о к а  н е  н а ш е л  п о н р а в и в ш юу с я  к о м п о з и ц и ю  (р и с . 1). Н ем н о г о  п опд ра в и в  к а р ти н к и  в  Photoshop, Ш и лд с  п р и с пту и л к  к о ди р о в а н и ю  CSS, и  в  резльуат е   п о лч у и л с я ди з а й н  «К  ю г у   о т  гр а н и ц ы »  с  ч кет о   в ы р а ж ен н о й  те м о й .

и л т з цС а

а Н нч е

м

я  ко н ет й н е р

а

с пр ос т г

о

zyxwvutsrqponmlkjihgf

О ди н   и з   и н те р с н ы х   а с п е к то в   работ ы   Ш и л дс а  -   эт о вы бо р  ц в е то в о й  га м ы , н а  к о т р у ю  ег о  в до нх о в и л   ви д к о р и ч н ев о г о   к о с ют м а   в  с и н ю ю   п ол ску .  О н   п о дг то в и л   п л о щ а дк у   д л я   р а б о ты ,  з а д в   с в е тл о - с и н и й   ф о н  в э лем ен т е   bo d y,  с в е тл о - к о р и ч н е в ы й   и   боле е   те м н ы й о те н о к   с и н ег о  -   дл я  с с ы л о к  и  б е л ы й   ц в е т  дл я  о с н о в н о г о  тек сат , р а с п о л ж е н н о г о   н а  те м н о - с и н е м  ф о н е :zyxwv body { font:  83%/150%; color: #fff; background: #EDEDED url(background.gif) repeat- y  fixed bottom center,margin: Opx; padding: Opx; }

Ш и лд с  н а м е р н н о  з ад ч то б ы   о н   м о г   м а с ш та б и р о в а ть с я пу р а в л е н и я   ш р и ф та м щ е й  с тр а н и ц е . с Ри

. 1  • а к и  ф а Гр

а н а , ив о з ь л о пс

я  в н й а з и д

е  «К  юг

у  о т ы ц и гн а р

л   раз м е и   и  ф о н о

р  ш р и ф т .  Э ф е к м   п оказ а

а  в   п р о ц е н та х т   о т   та к о г н   н а  с люеуд

, о -

»zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFE

Ст и л з а и ц

я ок н т е й н е р

а

З ад в   осн овн ы е   с в о й с тв а   (о п у щ е н н ы м ен т ы   та б л и ц ы   с ти л е й   можн о   п о с м о тр е т н о м   CSS- ф а й л е ) ,  м о ж н о   п е р е хо д и т р а з де л а   # c o n t a i n e r .  Н и ж е   п ри вед н п р и с о е ди н е н н о й   к   к о н те й н е р у   фо н о в о п оле й  и  ш и ри н ы :

е   з де с

ь   фр аг ь   в   и с ох д ь   к   с ти л и з а ц и и ы   с ти л и   дл я й   к а р ти н к и ,

ttcontainer { position: relative; background: url(bg- central.gif) repeat top left; margin:  Opx auto Opx auto; width: 655px;

Р а з м у е тс я те л ь н о , а  п о с к о л ь к з ад н н ы м и п отке . Т ех ч аст о   в о ди К а ж е ст я , ч т те л ь н о   ка ог - т н о  с о в е р ш е н н

,  # c o n t a i n e r  п о з и ц и о н и р о в а у  с в о й с вт а   t o p  и ,  т о   э то т   э л е м е н т   о с та л с ,  к т о   то л ь к о   п р и с т пу а е т   в   з а б л ж у де н и е   слов о т  о  п о з и ц и о н и р о в а н и о   р еч ь   и ед о  др гуо о  э л е м е н та о  н е п р а в и л ь н а я   и н те р п р е та ц и я

н   о тн о с и  l e f t  о с та л и с я   в   н орм аль н о т   к  и з чу е н и   «о тн о с и те л ь н о е » . Э т

о   ес т в ен н ая

ь  н е м ю   CSS, . и  о тн о с и , .

е Р ок н с р т у цк и

я

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

О тн о с и те л ь н о е   п оз и ц и он и рован и е   п оз воляе т   раз м е с ти т ь   э лем ен т ,  н е   и з ы м а я   ег о   и з   н о р м а л ь н о г п от ка .  Э т о   с о в с е м   н е  то ,  ч т о   де л а е т   б р а уз е р   с   эле м е н та м и , п о з и ц и о н и р о в а н н ы м и  п о - др гуо м у , н а п р и м е р   а б с о л ю тн о .  О ч е н ь   скор о   в ы   о тч е тл и в о   ув и д и т раз н и ц у .

-

г   И Н А Ч МИ Е Р П

о

м р е о Т ин

е

Е

м  «нормны ьла й  по тк » опис ыевта я  спо б  обраот к и  борезуа м  непозицо нир внаы х  эмелов тн . Есл и ти л а д у св е  сил т и  и з  любог о  втнира а  дийзан а  CSS Zen Ga den, т о  тсек и  заго л вк и  удб т  рс ь атпгол я  све л а  нпвора , сверх у  вни з а в лп я   в  зваис м ос т и  о т  рзреша юща е й  с пос б нос т и   э р н ак и  рмза ре а  онк а  брзуае .

ь т , а

А  п о к а  н а ш а  ц ел ь  -   с о з да т ь   к о н те й н е р , в и з ау л ь н о   ок р жу а ю щ и й   н а о х дя щ и е с я   в н ут р и   н ег о  э л е м е н ты . П о с у   # c o n t a i n e r  (с м . л е   п ри м ен ен и я   с ти л е й   к   р а з де л о р и ги н а л ь н ы й   CSS- фай л ) , м о ж н о   з а н я ть с я   до п о л н и те л ь н о й   с ти л и з а ц и е й   с о де р ж а щ и с х я   в  н е м   э л е м е н то в (р и с . 2).zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

м т ес к

азВнуде Т еп ер о бъ ем лю щ ег п оле

ь   осн овн о

й   е кт с

т   сел уд

о   к о н ет й н е р а й  дл

я  кажодг

т .  Э т

о   d i v  в н тру

т   о т д в и н ту о   од с и т г а е с т и  э л е м н т

а  

ь   о т   к рае в я   з адн и е м ttcontainer:zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHG

#intro { margin:Opx; #quickSummary,  tpreamble { margin:  Opx 200px  Opx 68px; си Р

fpageHeader { margin: Opx; } #supportingText  { margin: Opx 20Opx  Opx 68px;

П р и   та к о п о л ж ен и

й   с у та н о в к е   (р и с

В ша пк

е   п оле

т   з ан и м ае

т   н жу н о

. 2 •   л Д я  рле дз а я  и  фо н

а  ( ( c o n t a i n e r знад

ы  позиц я

, ш ир на

е

. 3).

у их

Д о б ав лен и лд я  э л ем н т етк с , п р и б л и ж а е

й   те к с

ло п

!

е   гр а фи ч е с к и х   з а го л в к о в   -   в   о с б ен н о ст а   ttpageH eader  h i  - ур а в н о в е ш и в а ю щ и т   ди з а й н   к  о к о н ч а те л ь н о м у   в и уд

и х :

#pageHeader  hi { margin:  Opx Opx Opx Opx; . background:  transparent  url(top.gif) norepeat  top left; width: 655px; height: 206px; }

Н а  р и с с о е ди н е н и

. 4 п о к а з а н о я  к а р ти н к

, к а к  в ы г л я ди и  к  э л е м е н т

т   с тр а н и ц а  п о с л е  п р и у   # p a ge H e a d e r  h i .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA с Ри . 3 •  л с По е и н а д а з я е пл о й  дл я г о н ов о нс о тс к те а

,

А  теп р Ещ ловко з ад н и вы сот гр а фи к

с Ри е ави кр е ч доп

.  4  •и н е н  и д е о с и р П

е к н и  кт р а т м те

у  и е а д  за

к

zyxwvutsrqp

  д о с то й н ы х   вн и м ан и я   п ри м еро в   з а го фа й л а   п о м о гу т   п о н я ть , к а к  с   п о м о щ ь ю ,  ф о н о в ы х   и з о браж ен и й   и   ш и ри н ы  с о   э ф е к ти в н о   уп р а в л я т ь   п о л ж ен и е м :zyxwvutsrqponmlkjihgfedcbaZYXWV

ќpreamble h3 { background:  transparent  url(chl.gif) norepeat  top left; margin:  Ю р х   Opx 5px Opx; width: 3 88px; height:  44px;

и  к  # pageHeader й  то н  дн й а з и у

т  ощ би

е   н ес к о ль к о в   и з  CSSя   п о лей й   можн и   и   ет к с а

ь  хв о с от в и

ќbenefits h3 { background:  transparent  urKch4.gif)  norepeat  top left; Littering  a  darkzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   аЫ   dreary  road  lay  the  past  reiks  of margin:  Ю р х   Opx 5px Opx; browser specific  tags, mcorapa titole  {raws,  and  broken CSS SUppCft, width: 3 88px; Today,  we  must  cieai  the  r imd  of  past  ptactfces.  Wet height: 44px; enlightenment has been achieved Blanks to ttw tireless efforts of triSt llr№

lit p i l ^H

t h e W I f Ш д Г ^ эпг Ч l i j t j «"» J < _ ; * T e l r p V l U

н. п U lc

H U | ' j :

n i u i * 3 c i

t l C 0 h U * №

ќrequirements  h3 { background:  transparent  url(ch5.gif) norepeat  top left; zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA margin:  Ю р х   Opx 5px Opx; width: 388px; х е ж  иа р б о з н о ч  су р т к ц р пе а height: 44px;

The е й   Zen Oa.- det) invites you to felax and meditate  on ы impoitant («sans of the masters. Begin to se« with clarity. Le to use  the  {yet  to  be)  tifTie- hontited tedniiqiies in new nd invigorating fashion. Beumie one wiih the wefe.

с Ри ил ч

.  5 -••  Н а а к н и т р ка щ юи а в и, пк р е ч д о

х  в а к в о л  зг а й м те у  Югд- оа п а З

а

Т еп ер м е н та м

ь   з а го л в к и   н а  с тр а н и ц

Н ак о н ец Why participate? For recognition, inspiration, and a resource we can alt refer to when making the case for CSS- based design, This is  sorely  needed, even today. More  and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not  today.

с Ри и н д ес о

.  6  •  а м ка Р е т нм ег а  фр

а н е, дл в а б о

е   (р и с

о   с о ч е та ю тс . 5).

, к а к  в ы гл я д

я   с  п р о ч и м т   си н и

е  р а м к и

у  # b enef i t s е я , рл е д з а

т

и   э ле

-

:

(ќbenefits { border- bottom:  lpx dashed  #8095AF; } ќpreamble { border- bottom:  lpx dashed  #8095AF;

и  до б а в л я ю т   з р и те л ь н ы й  к о н тр а с н о  в ы с пту а ю т  в  р о л и  р а з де л и те л й   м еж д а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA м и  тек ст а   (р и с . 6). я  к л е д  рз а

ы тс к е т

, м ы   в и ди м

и   адч у н

Р ам к

А теп р Т еп ер ь лась п р о с то к а р ти н к

ь ов с х т и ,  к о гд

,  м о ж н

т  и   о дн о в р е м н у   ф р а г м е н та

а   ц е н тр а л ь н а я   ч аст о   з а н я ть с я   хв о с т о в и к о м :  с ы л к и   н а  и н с тр ум е н т а   с  го л в о й   коровы :

-

к ь   с тр а н и ц .  Е г ы   к о н тр о л

ы   о фо р м и о   с о де р ж и м о я   и   фо н о в а

#footer { text- align: center; background:  transparent  url(bottom.gif) norepeat  top left; height: 37px;

е я

Р е о к н с т р уц и к

я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

margin: Ор х  - 200р х  Ор padding- top: 88рх ;

х  - 8 б хр

;

} tfooter a:link, #footer a:visited { margin- right: 20px; }zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

О б р а ти т сп рав о бъ ем лю щ ег

: о н

е   вн и м ан и и  п о м о га ю о   э лем н т

е   н а   о тр и ц а те л ь н ы т   ед у р ж а т а   (р и с

б с олт А ю н

е   п ол я   с л ев к   в  гр а н и ц а

ь  хв о с то в и . 7).

а  и х

е п о з и ц о ни р о ва ни

е

В ы  н е  з а б ы л и , ч т о  э л е м е н рова н  о нт о с и етл ь н о ? Т а н о   п оз и ц и он и рова н  в н тру рован н ог о   d i v:

к  в о т

т   ttcontainer  п о з и ц и о н и , с п и с о к  с с ы л о к   абсо лю т и  о тн о с и те л ь н о  п о з и ц и о н и

-

ttlinkList { position: absolute; top:  207px; right: 6px; width: 181px;

В  р ез луь ат н овн ог с о л ю тн о о тн о с и те л ь н та к о в о г н о с и те л ь н Ч то б о тм е н и т м ен т

е   сп и со к  с с ы л о к   о к а з ы в а е тс я   сбо к о  тек сат . В  о тл и ч и е  о т  о тн о с и те л ь н о г м   п оз и ц и он и рован и и  э л е м е н т   р а з м е щ а е тс о   с в о ег о   р о д и те л ь с к о г о   э л е м е н та о   н е  сщу есвт у , т о   в ы ч и с л я е тс я   п оз и ц и о   к о р н ев о г о  э л е м е н т а   h t m l. ы  н а гл я дн

о  уви деьт ,  ч т о  п р о и с ох ди т ь   о тн о с и те л ь н о е   п оз и ц и он и рован и а   # c o n t a i n e r  (р и с . 8).

у   о т  о с , п р и  аб я 1 .  Е сл и я  о т -

,  до с та о ч н

о е  дл

я  э л е

-

П ри род а   а б с о л ю нт о г о   п оз и ц и он и рован и я  так о в а ,  ч т о э л ем н т   п о з и ц и о н и р е с ту я   о нт о с и ет л ь н о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  п-зиоцнр в г а он  объемлю щ ег о   э л ем н т а   и л и  онт о си етль н о  э ле м ен т а  h t m l , есл и  о б ъ ем лю щ ег о   н е  сщ у етвс . К одг а  с н е п о с р в е тд н о г о  роид елт я  сн ят о  онт о си етль н о е  п о з и ц и о н и ро в ан и е , э лем н т   # l i n k L i s t  п о з и ц и о н и ресут я о н т о с и е тл ь н о   к о р н ев о г о  э лем н ат .  П о сл е   в о с а нт о в л е н и я   о тн о с и те л ь н о г о   п оз и ц и он и рован и я  дл я   э л е м е н т а   # c o n t a i n e r  ид з а й н  сн ов а  вы глияд т ,  ка к  з мауд н о . ' 

Н а  сом а (оньл е исто

м  дел

, ьнлеисот о   ил и  анюлотсб

о   й и ш а лж б г е ) пак д ер

о  пзои ц но иаврн го . -  .имрП

о   .пре

сиР . 7 ќ Плсо

е  динелвабо

я  хкивотс в

а

сВ

е   п о  м еса т

м

К а к  в о с п о л ь з о в а ть с я   э то й  в о з м о ж н о с ть ю ,  есл и   р о ди те л ь   н е  п о з и ц и о н и р о в а н ? З а д й т е   д л я   р о д и те л я   свой с тв о  p o s i t i o n :  r e l a t i v e ;  , н е  ук а з ы в а я  н и  t o p , н и l e f t ;  н а  ф а к ти ч е с к о м  п о л о ж е н и и  р о ди те л я  э т о  н е  о т р а з и тс я , з а т о  уста н о в и т   н ову ю  то ч к у   о с т ч еа .  П о др о б н е е   н а   э т у   те м у   ч и та й т е   с та ть ю   Д уг л а с а   Б о ум е н а «M aking  the  Absolute,  Relative»  н а   с а й т е   Stopdesign (www.stopdesign.com/ articles/ absolute).

З а о к н чи

м

П о м е с ти

в  э л е м е н

н о  п р и м е н и т в с ег о   н жу н

с о с л а ы мк

и

т   # l i n k L i s t  в  н жу н о е   м е с от , м о ж ь  к  н е м у  до п о л н и те л ь н ы е   с ти л и .  П р еж д е о   з адт ь   п ол я  и  о тс пу ы   равн ы м и   0:zyxwvutsr

ttlinkList ul { margin: Opx; padding: Opx; }

Д але в  то

с Ри з я вс

. 8 •ы н а в о р и н о и ц з о П ь  с щ ию мл е ъ б о

й н эм е л м  ег о о т н ме  л э

е   в   CSS- фай л е  с люеуд м   ч и сл е  дл я   о дте л ь н ы

т  др гуи х   э л е м е н то

е  с ти л

и   дл в   сп и ск а

я   с ы лок :

,

#linkList  li { list- style- type: none; background: transparent  url(li- bg.gif) repeat top center; padding:  8px 6px 8px 6pxl margin: Opx; border- top:  lpx solid #5D4831; т  # l i n k L i s t я р е т о п л border- bottom:  lpx solid #221609; м  d i v  # c o n t a i n e r zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA display: block; >

г

ЕВОС тЭ лн ю о т г

Т

о  с войс т ки , п о с кль

о  п о з и ц о н и р о в ан и я з и ц и о ни р о в ан о т  пенио л ж ра . В  приовнт йш жа ег о  п о з и ц о н и р о в ан о г

Д о п о л н и те л ь н ы лок , з а д н и т и   в  о р и г и н а л ь н о

е  с ти л

и  дл

я  з а г о л о в к о

в  в  с п и с к а

я  ц в е то в , п о л е й  и  о тс пу о в   в ы  с м о ж ет я   п о ел з н о  дл я  верс т т  отпярелд ь  то чк и  отесч а  дл я  аб с о м   CSS- фай ле . . Есл и  н и  оид н  и з  проекд в  н е  по ,  т о   а б с о л ю тн а я   позици я  о тс чи ты в а е тс я я  эмел тн а  h t m l ,  т о  ест ь  о т  кера в  о нк а  брзуае м  са чул е  по зи ц я с  еытваиоч я  о т  креа в  б ли Д л я  э ф е к ти в н о г о  к о н тр о л я  н а д  те к с то м  и  и з о б р а ж е о   п р е д ак . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

о  м ле до о  позвеял

и  п о зи ц о ни р о вани

сВ

е п о м е ст а

х  с с ы е  н а й

-

м

н и ям и   можн о   п о л ь з о в а ть с я   п о лям и п оз и ц и он и рован и е  п о з в о л я е т  з а гн а т н ы е   э лем ен т ы   в   с то й л о ,  п о с к о л ь к можн о  с о з да т ь  к о н те й н е р , в  к о т р о с я  а б с о л ю тн о   п оз и ц и он и рован н ы «К  ю г у   о т   гр а н и ц ы »  аде т   п р ек р асн ы те м ы   и   б е с и х тр о с тн о г о   сп ос б а  е мощ ь ю   CSS.

.  О тн о с и те л ь н о е ь  с а м ы е  н е п о к о р у   с   ег о   п о м о щ ь ю м  уж е   р а з м е щ а ю т е  э л е м е н ты .  Р а б о т а й   п ри ме р   ч е тк о й е   р еали з ац и и   с  по -

р е р Де

е н й а з Ди

к ес наХ

н  (Derek Hansen)

www.csszengarden.com/095 Z en WorkszyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

и ц а р о п р Ко

it**'1. zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Т Ъи ч

я

а   r l i w i y 1  ne e d  ft»  C S S  t o be  M k n  wri o udy  by  graphic  »rti«tj.

Th*Ј«GudcB^initoM(ite

I

iDi[xn,Mibody  div#intro position:  fixed; bottom:  Opx; right: 0;

х zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFED

html*#intro  { border- bottom:  3px solid #fff; position:  fixed; bottom:  - lOpx; } #intro { height: 286px; voice- family:  " \ " } \ " " ; voice- family:  inherit; height: auto;

о е к н Р с цр и у т

я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

В  э ти х  п р а в и л а з ван н ы х   «п онсдуьт П ер в ы й  с ел к от рам и . С л еюду щ и дл я  б р азу е р о в з и ц и он и рован и е рам к и , к о т р о п р е ти р е у т   п рави ль н о осн ов е   м о ед л H ack), к о т р ы си роват ь   ош и бк # i n t r o ,  ахр к етр н у

х  в ы  най едт

е  ц е л ы й  р я д  при е м о в , п р и »  к аж од м у   б р азу е р у   с в о й   с ти л ь . р   #  i n t r o  р а с п о з н а е тс я  в с ем и   б р аз у е е   вд а  прав и л а  п р е дн а з н а ч е н ы  то л ь к о ,  п о де р ж и в а ю щ и х   фи к с и р о в ан н о е  п о , п р и  э то м  тр е ть е   с о де р ж и т   оп и сан и е е  Internet Explorer 6 дл я  Windows и н те р .  Н а к о н е ц , в ы  в и ди т е   тр ю к  н а и   п р я м о уг л ь н ы х   о б л а с ет й   (Box Model м  Г ен р и  в о с п о л ь з о в а л с я , ч то б ы  к о м п е н у   п р и  в ы ч и с л е н и и   вы сот ы   в  п р а в и л е ю   дл я  Internet Explorer 5.

си Р е л д то

. 3 •   Internet Explorer: ре дз а н  нне иж й  рма о к й  богле

л  # i n t r o  с итод х ан о  цт е в а

я  нхрев а

у  и

Т еп ер

ь  в  Internet Explorer  р а з де л   # i n t r o  н а хо ди тс я в   в е р нх е й   ч аст и   с тр а н и ц ы   (р и с . 3) и   и м е т   белу ю н и жн ю ю  р а м к у .  В  т о  ж е  в р е м я  в  б р а уз е р а х   Mozilla и Safari  э то т   р а з де л   фи к си ро в а н  и  р а с п о л о ж е н   вн и з у (р и с . 4).zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

е х вр В пв р а о , лв е

, и нв з

си Р ст а ч

,

л   # i n t r o  с икроав фи

н  в ен  ниж й  в  то м  ж е  мтс е е  тс ке

й т

о

Н а  да н н ы й  м о м е н т  в е р нх я я  и  н и ж н я я  ч а с т и  с тр а н и ц о п р едлен ы .  Н а  с ам о м   е лд е  э то , к о н е ч н о , о ид н   и  то ж е  р аз едл . П р о д л ж а я  п р и м е н я т ь  ф и л ь тр а ц и ю , Г ен р од б а в и л  сит л и , к о т р ы е  о от б р а ж ю т   с тр к у н ы е   э ле м ен т ы  в  н и ж н е й  и л и  в ернх е й   ч аст и   в  з а в и с и м о с т и б р азу е р а .

Ша

г .оаврп .

С н ач л

а  до б а в л яест

е т  ц в е то в у

. 4 •   Mozilla (и  Safari): ре д з а и  сцин ар т ы  и е авыр пкер т ыне  рожслпа

ы т и  о т

. ю   га м у

си Р е н хр е в

. 5 •   В  Internet Explorer фои оргфат м  улг у  сицнар т ы

я  ос теыазв к

я  в  оварп

я   фо т гр афи я , к о т р а я   о п р едля :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

м

#pageHeader { background:  urllpageHead_bg.jpg)  no- repeat top left; width:  332px; height:  283px; position:  absolute; right: 0; top: 0;

Э т о  п р а в и л о  п о з и ц и о н и р еу т  р аз ед л   # p a ge H e a d e r  и в  Internet Explorer  (р и с . 5), и  в  Mozilla, хо тя , к а к  в и д ет , п о л ж ен и е   о п р е д л я ст я   о тн о с и те л ь н о   от г о   м еа с т , д ку а  брзауе р  п о м есит л  ф и к с и р о в а н н ы й  раз ед л  (р и с . 6.). И н ет р с н о , ч т о  в  б р азу ер е  Opera к а р ти н к а  п о к а  н е  в и д н а , с  э ти м  е щ е  предсот и т   п о в о з и ть с я .

си Р лгу

. 6 •   В  Mozilla фои оргфат у  снирацыт , и  пок

я  ос теызав к а  м ы  е е  поньлс т

я  в  пов ар ю  н е   и дв

м  нне иж м

м

хревВ

о рП ж ы

,  зинв

к .о елв .

,  оварпв

,  велв

. 7 •   В  Internet Explorer ре д з а н  в о в е л м е н  вх р е

zyxwvutsrqp

. zyxwvutsrqponmlkjihgfedcbaZYXW

С л е д ую щ и е   п рави л а   CSS  з а д ю # p r e a m b l e , п р а в д , и з  с о б р а ж е н и м ы   н е  п р и в о ди м   н ек о т р ы е   п рави л э л е м е н то в : с Ри а вори ноиц зоп

о

т   с ти л

ь   д л я   р а з де л й   экон оми и  м есат а   д л я   в н ту р е н н и

а х

# preamble  {

л  # p ream b le м  ул г у

background: #A1B4CD url(preamble_bg.gif) repeat- у   top right; height: 283px; width: 312px; margin: 0; padding: 0; position: absolute; left: 0; top: 0; } html>body  #preamble { position: absolute; left: 0; }

с и Р . 8  •   В  Mozilla (и  Safari) ре д з а а к к  и  # pageHeader, ещ е  н е е  вд и

л  # p r eam b le, н ь тс о н  пл о ю zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA С н ов а  в ы  в и д ет , к а к  с ел к от р   # p r e a m b l e  з аде т  с п о со б  п о з и ц и о н и р о в а н и я  б л о к а  (р и с . 7), п р и ч е м  дл я  б р а уз е р о в ,  п о д е р ж и в а ю щ и х   с е л к то р ы   до ч е р н и х   э ле Е г И Н А Ч М РИ П Е м е н то в , э то т  б л о к  в  с л еюду щ е м   п рави л е   п р и ж и м а е тс е нбор до П е  о к ю р т е  Box Model Hack чт й а т и е  н а ц и н а р  т с е  http:/ / к  л е в о м у   к р а ю   (р и с . 8). tantek.com/CSS/Examples/boxmodethack.html.

А теп р Р а з ед р е ди н

с Ри

. 9 •   В  Internet Explorer разде

л азалс  ок

я  вверх

ь в с е р ид н

я

у

л   # q u i c k S u i m a r y  Г ен р и  п о м е с ти у   # p a ge H e a d e r  и   е   м еж д

л  то ч н о  п о се ttpreamble:

-

#quickSummary { background: url(quickSum_bg.gif)  repeat- x top right; border- right: 3px solid #fff; margin:  0 332px 0 312px; padding:  52px 0 0 0;  . height: 283px; voice- family:  " \ " } \ "" ; voice- family: inherit; у zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA height: 231px; i

Е и д н св т е н н ы й  трю к  зесд ь  -   э т о  Box Model Hack в  раз ед л е  # quickSummary. О н  н ж уен , ч от б ы  и сп р ав и т ь  о ш и б к п р и   в ы ч и с л ен и и   вы сот ы   в   б рз а у е х ,  д г е   н ек о р екнт р еа л и з о в а н а  м оедл ь   п р я м о гу л ь н ы х   о б л а се йт . В  э то т   м о м е н т   вс е  тр и   в а р и а н т а   в е р с тк и   б о л е - м ен е в и ди м ы .  В  Internet  Explorer  р а з де л   о т б р а ж а е тс ли ко м   в до л ь   в е рн х е г о   к р а я   (р и с . 9), а  в  Mozilla  о ед н  ч асит ч н о   и  н оиадх ст я   вн и з у   (р и с . 10). К сиат ч т о  н ач л о  уж е  п р о яв л ьт с я  и  в  бзрауе е  Opera (р и с

у о е я   це н  в и , к о е . 11).

о е к н Р с цр и у т

я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

я о кн т е н т

тС и л з а и ц и ло ы с к

С л юе у д щ и к ам . Вс фа й л е  н ер т с н ы о б р а ти т f l o a t 

а

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

й   ш а г  -  п р и м е н и т ь  с ит л и  к  конетн т у  и е  п р а в и л а   можн о   п о с м о тр е ь   в  и сохнд о м а  сайт е  Zen G arden, н о  нек о т р ы е  н аи б о ле е  з ажслиу ваю т   пу о м и н а н и я  з есдь . П ржед е е   вн и м ан и е   н а  то , к а к  с  п о м о щ ь ю   с в о й с тв к о н ет н т   п ер м ещ е н   в  л е в у ю   ч аст ь   с тр а н и ц ы

 ссы л   CSSе  и н  вогсе , а :zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHG

#supportingText { width:  100%; float: left; margin- right: - 332px; margin- top: - 3px; }

И н те р с н о  о тм е ти ть ,  ч т о р и ц а те л ь н ы е   п ол я   п о з в о ляю в и до м   ет к с от в г о   к о н те н та m a r g i n - r i g h t  аед т  то т н о е   з н ач ен и е  p a d d in gетк с т   н е  в ы й де т   з а  п р е д л лев ы м   к рае м   ф о то г р а ф и и ш и ри н а  р ав н а  100%, и с п о л ь з о в а т r i g h t  н е л ь з я ,  п о с к о л ь к # su p p o r t i n gT e xt  оказ лс К  раз елд у   #  f o o t e r  п р и м ен яю ст раз ли ч и я  м еж д у   б р аз у е р а м и

 даж

е  п р и  ш и р и н е   100% о т т   уп р а в л я т ь   вн еш н и м . О тр и ц а те л ь н о е   з н ач ен и е  ж е  эф е к т , ч т о  п о л о ж и те л ь r i g h t ,  и   г а р н ти р еу т ,  ч т о ы   о б л а с ти ,  о г р а н и ч е н н о й .  О д н а к о   в   с л чу а е ,  к о гд а ь  св о й свт о   p a d d i n gу   то г д а   ш и ри н а   э лем ен т а ь  б ы  равн а  100%  +  332р х . я  с ит л и , уч и ты в а ю щ и е :

#footer { background: #d6e0ee; margin: 0 332px 0 0; border- right: 3px solid #fff; border- top: 3px solid #fff; border- bottom: 3px solid #fff; padding: 15px  0; text- align: center; } html>body  #footer { background: transparent; position: fixed; right: 0; bottom: 261px; padding: 0; margin: 0 160px 0 0; border- right: 0; border- top: 0; border- bottom: 0; text- align: left;

.си Р 1

с Ри

.си Р 1 о т н е т но к

0 •  В  Mozilla ре д з а

. 11 •  В  Opera пк о

л а  пж и р

с ат е а ж а р б оо т

2 •  В  Internet Explorer ре д з а м

т  к м е н  нж и

я к ь тл о

у а кр

оа н ь л а р  цт н е

л  # f o o t e с r  т е а ж а рбо то

ю

я т с  ча

ь

я  по д

Тр В  р ез луь ат е   вх о с т о в и м о й   ч аст и  с тр а н и ц н и жн е й  ч а с т и  дл

си Р в о н а в о р ис  фик

г И Н А Ч М И ЕР П

. 13 •   В  Mozilla ре д з а й е н  нж и

Е

л  # f o o t e с r  т е а ж а рбо то й т чс а и ц и н а  ср т ы

я

А теп р б р а уз е р о

и в о дн

м zyxwvutsrqpon

к   о к а з ы в а е тс я  в   в ернх е ы  дл я  Internet Explorer  (р и с я  Mozilla  (р и с . 13).

й   в и ди . 12) и  в

ь за йм е м с я м Opera

у  м о м е н т у  м ы  вс е  седла и  д л я  б р азу ер о в  Internet К  э то м Explorer, Mozilla и  Safari,  н о  в  Opera н жу н о  е щ е  з аст в и т ь   в е р нх и е   р а з де л ы   о т б р а ж а ть с я   п рави ль н о . В о т фр а гм ен т  CSS дл я  б р азу ер а   Opera:zyxwvutsrqponmlkji

е нбо р до П е  о кин х е т е и пн е м и р я р о т а к и  сф и ц е п а  ©media в р е з у а рб е  Opera 7 см . сц и н а р т у  www.virtuelvis.com/ archives/ Smedia all and  (min- width: Opx) { U5.ht m lzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA div#intro { position: absolute; right: 0; width: 100%; height: 283px; top:  0; z- index: 0; border- bottom: 3px solid #fff;

Э то т   п ри е м   и с п о л ь з еу п о з в о ляе т  а др е с о в а т к о  ем у .  Во т  те п е р

Тр

и в о нд

т   ч аст ь   сп ец и фи к ац и ь   с ти л и  б р азу е р ь  вс е  хо р о ш о  в ы г л я ди

и  CSS3 и у   Opera  7 и  то л ь т   и  в  Opera.

м

О р и ги н а л ь н а я  и ед я  р а б о ате т  к а к  з а мду а н Mozilla  и  Safari;  дл я   Internet Explorer  н ай ед п ьт у , п о з в о л я ю щ и й  п р и е м л е м о  о то б р а з и т а   лд я   Opera  п р и ш л о с ь   п ой т и  н а   к о м п р о м и с гр афи я   н а ох д и т с я   в е р ух ,  н о , в   о тл и ч и Explorer,  о н а  фи к с и р о в а н а , та к   ч т о   с тр а н и ц ч и в а ест я  п о д  н ей . С в о и м  н а з в а н и е м  р а б о т у   в е рох окн о »  о б яз ан а  с о тн о ш е н и ю  м еж д н а й де н н о м у  в  р ез льуат е  э к с п е р и м е н то

о  в   брзау ер а х н  о бохнд о й ь  с рт а н и ц у , с  -   ф о т е   о т   Internet а  п р о к р у а   «О кт р ы от е м   и  н и з о м , в  Генри .

р zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONM й Дэ в Ш и  (Dave Shea)

йи енз а Д

www.csszengarden.com/025

М нем о и к

а

за йен ирДи ск

е т ирк ю е в с рт к

у и л и то п н е ы д ь

Т е к р су т т е  с м е ш е н и ли н и ям к и е   суи к н ы е  л и н и м а  п р и аде В  э т о верш ен н ун и к а л ь н а до с а т е з ау л ь н о в о з н и к ае п р о мду а н н о

а  «М н ем о н и к и я  о р ган и ч ес к и и  и  гео м ерт и ч ес к и м и   п ер с к а ю и  в  з аго л в к е т  н е п о в то р и м о с т й   работ

, и щ е б а о ив ю с п ч

е у чте к ю ы zyxwvutsrqponmlkjihg

е т к фе эф

» п о яв и л а с х  ф о р

ь  в  резльаут м  с о  с рт о ги м

и  ф и гру а м и т   от л с ыт е   г о р и з о н та л ь , а  р ез к а я  ц в еот в а ь   ди з а й н у

е   Ш и  хо те л   с о з да т о   н овое .  В   р е з лу ь та я  в е р с тк а , к о т р о й т   в н ту р е н н е й   к р а с о ыт й   ц е л о с нт о с т и   и  в н и м а н и т  вп еч алтн и е  о р и г н ал ь н о й й  к о н ц е п ц и .

и . Т о н

-

я  гам

-

.

ь   ч то - т о   со е   п о л уч и л а с ь , в о з м о ж н о , н е , з ат о  з а  сче т  в и я  к  даетля м , хор ш о

С р те м л н и е м  к  о р и г н аль н о ст и  п р оид котв ан ы м н о ги е  р еш ен и я , п р и н я ты е  ка к  н а  эапт е  п р о е к ит р о в а н и я , та к  и  в о  в р ем я  к оид р о в ан и я . М ы р ек о м ен у д м   в н и м а ет л ь н о  п р о ч и ат ь   ох р о ш о п р о к м е н ит р о в а н н ы й  CSS- йафл , ноящадх и й с я  н а  сай т е  Zen G arden (www.csszengaiden.com/ 025/ 025- comments.css).  Оедлть н ы е   и з о бр аж е н и я , и сп о ль з о в ан н ы е  в  «М н меон и к» е , п ри вед н ы  н а  р и с . 1 ни ж е .

еР ш и н

ЧР

Р е ш ни

Ь > КЧ Е П Г

*

В Н Я нН Я В Н Щ Е Ш м Н

.си Р

1  •   Вс

е я и н е ж а рб о з и

ч

zyxwvutsrqpon

zyxwvutsrqponmlkjihgfedcbaZYXW

body { font- size: small; font- family: arial, sans- serif; background:  #B0A40B url(bg- 1.gif) top left repeat- x; margin: Opx; padding: Opx;

!

ы н , иа в о з ь л о пс

е за д

ч

П осл е   п ри м ен ен и я   н ач аль н ы х   с ти л е й   (о н и   з едс ь  н е т  п о к а з а н  н а  р и с . 2)  в о з н и к л а п р и в о д я тс , н о  р ез луь ат п ер в а я  п р о б л е м а . Д л я  «М н е м о н и к и »  н жу н ы   бы л и   вд е ж е л ты х   к а р ти н к и  дл я   ф о н а   э лем ен т а   bo d y:  онд а  по в то р я ю щ а я с я   п о   в е р ти к а л и   и   в то р а я   — п е р к р ы в а ю щ а я   е е  и  п о в то р я ю щ а я с я  п о   г о р и з о н та л и .zyxwvutsrqpon

S"a.'V3n VWi",  • »• •"•"' • •" • » ^ 

е за д

е  в  е«к и нм ое нМ

»

Н о   к  э л е м е н т в то р я ю щ а я с з в о ляе т   п р и с о е ди н я т и з о бр аж ен и й вд а   э л е м е н т а д и тс я  в н утр р а з м е кт у ,  п о э то м ди н и т ь   к  н е м у

у   b o d y  п р и с о е ди н е н я   фо н о в а я  к а р ти н к ь   к   о дн о м . Т а к  ч т о   о с ат в л о с . К  с ч а сьт ю ,  э л е м е н и   b o d y  и  з а к л ю ч а е т у   в то р у ю   к а р ти н к :

а  г о р и з о н та л ь н о  п о а   (р и с . 3), a CSS н е  п о у   э лем ен т у   н ес к о ль к о ь   ли ш ь   и сп оль з оват ь т   # c o n t a i n e r  н аох   в  себ е  в с ю   о с та л ь н у ю у   можн о   п ри сое -

#container { background: transparent urlfbg- 2.gif) top right repeat- у ;

си Р щ ию а д а з

.  2 •   и В д  ц и н а р т с х т це в а  со л ыс

ы  пл с о е и н е  пнм еи р к  и  шт ф и р

я ы н ь л а  нч а

х  сй е л и т

,

ы

Э т о  рабоет од тч ен п р и м уд а ь т ш и р я ю щ юу с п р и   э от

. П оск ль к у  гр афи к а  в  о с н о в н о м  в  з аогл вке ,  ка к  и н етгр и р о в ат я   п о л ск у ,  и щду у м  сорхан и т ь   еи д н с в т

О р г а н и з а ци

си Р

.  3 • а Пев р

я а в о н о  ф

я к н и т р  ка

И Н Р ПМ Ч А Е он тевЦ

ан е н и д е о с  пи р

Е й н ва и р а

т  рси

.  1- 3 см . н а е к д а вл к

а  к т н ме  л э

у  body

В з гл я н у м н ог п ол жи т а б с о л ю нт ы нит

а  в  э от , т о  дал ь ш ь   к ажу д ю   п о п ер о  з р и етл ь н о г

я гриак ф в   н а  о к о н ч аетль н ы о   е ол д ь т н ы ь  н ек о тр ы ь  вс е  вм ест

е  п о в ер м   п о з и ц и о н и р о в ан и ем е   в  в и д

е  о дн о г

е  н жун ю   к а р ит н к

е  сосре о  б ы л у   в  рас

к   с рт а н и ц ы о   о бр аз

о , и

.

и й  в и

х   в и з а ул ь н ы

м  ди з ай н

д  с тр а н и ц ы х   э л е м н от в х  дргиу х о  б о л ь ш о г

, в ы   з ам иет .  Н ад о  л и  рас , в о с п о л ь з о в а ш и с ?  И л и   л чу ш о   и з о б р а ж ен и я

е ь

е   р с ао х

Р еш ен и е   н а хо д и т с я   п о с е р е ди н е .  В ы б о р   то г ,  к а к и . zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA э лем ен т ы   о б ъ е ди н я ю тс я   в   о ди н   JPEG - ф а й л , а  к а к и , з а в и с и т   о т  л и ч в ы д е л я ю тс я   в  о тде л ь н ы е   G IF - ф а й л ы н ы х   п р е дп о ч те н и й   ди з а й н е р а   и   о гр а н и ч ен и й ,  н а л га е м ы х   р а з м е кт о й . Н е  сщ у есвту т  «еид н свтен н о  в е р н о ог »  о тв е а , дв а  ди з а й н е р а  м о г у т  п р и й т и  к  р а з л и ч н ы реш ен и ям .

? е е м

ицкуртсно еР

я

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

П оскольк у   и з м ен ят ь   H T M L- р а з м е т к у   сай т а   Zen G arden  н е л ь з я , т о   б ы л о   п ри н ят о  р е ш е н и е   п р и с о е ди н и т ь   и з о бр аж ен и я  к  дв у м  з а го л в к а м   в н ут р и   р а з едл а # p a ge H e a d e r  и , б ы т ь  м о ж ет , з а де й с тв о а т ь   са м  э то т d i v.  Т а к и м   образ ом ,  м ы   м о ж е м   в з ят ь   м ак си м у м   тр и к а р ти н к и , п о э то м у  л ев а я  ч а с т ь  с тр а н и ц ы   (з а   в ы ч е то м лев о г о   в е рн х е г о   гр а фи ч ес к о г о   г уо л к а )  б ы л а   с орха н е н а   в  в и д е  онд о г о  и з о б р а ж е н и я , а  п р а в я  ч а с т ь  -   в  в и д е др гу о .  Т р е ти й   -   уз к и й   -   G IF п о в то р я е тс я   го р и з о н та л ь н о   п о д  к аж од й   с то р о н о й . Н е   ср аз гр а фи к лось , ч т дл я  в ер скт д у   д в му можн о д о п су к а ю щ и м ц и аль н о ж н а  б ы т

у   бы л о   п о н я тн о , к а к   м о ж н о   з астви т у   р а с ш и р я ть с я  в  с лчуа е  текчу е й о   фи к с и р о в ан н ы е  р а з м е р ы   боль ш и   с  ф и к с и р о в а н н о й  ш и р и н о й я   с то р о н а м и   з а го л в к а   ес т ь   р а з р ы в  б ы л о  б ы  з а п о л н и т ь   о дн о р о дн ы м и   р асш и р ен и е  (р и с . 4). Э т , та к  к а к  Ш и  з а р н е е  р е ш и л , ч т ь   и м ен н о   ет к ч у й .

И ат к ,  к а р ти н к с к о м б и н и р о в а ть ж н о  б ы т ь   р аз м ещ ен

и   вы бран ы .  П о в то р я ю щ е с

,  п о с м о тр и м о  по

д  в сем

я   и з о бр аж ен и и   о с та л ь н ы м

ь   ат к у ; к аз

  в е р с тк и

. 4 •и к с е ч и  ф а Гр

си Р с ещ ю я л в я

. 5 •  ы в р Пе

е т н е кн ом п

ы о к в о л зг а

»

т

о  м еж

-

,  к о т р ы и   п ол ск ам и о  седлан о   в е р с кт

й , о  сп е а   од л

-

м с т е щ аме рз а я ь т с ча

я с ещ ю я р о  пт в о яе и н е ж а р б ио з , а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQ

ю  зк во л г а

,  к а к   и х   л чу ш е е   од л И Н Р ПМ Ч А Е Е и   (р и с . 5):zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGF Н а   п аэ т тс е мр а то

#pageHeader { height: 171рх ; padding: Opx; background: transparent url(bg- 4.gif) top left repeat- x; }

Н еи з м ен яем о с т ь   H TML- р а з м ект и   Zen  G arden  жсуае ид а п а з о н  до псут н ы х   в о з м о ж н о с ет й , н о  вс е  ж е  и х сет я  до сат ч н о   дл я  то г , ч то б ы   од б и ь т с я   н жу н о г з л ь уа т а  з а  сче т  к о м б и н и р о в а н и я  гр а фи ч ес к и х  э л ем н то в . П о ск ль к у  текс т  э л ем н от в  h i  и  h2  в н рту и   р а з ел д # p a ge H e a d e r  о тб р аж ест я   н а   фо н е  о нд о й   и  то к а р ит н к и   (п р ав о й   с от р н ы   з а го л в к а ) ,  т о   п р и м е н и т х  з аго л в к о в с ит л ь  н жу н о  то л ь к о  к  о нд о м у   и з  э ти х  дв у и   о т гд а  бе д у т  ви ед н  вес ь  тек ст . Т а к и м  о б р а з о м ,  в от р з а го л в о к   можн о   и сп о ль з о в ат ь   д л я   да л ь н е й ш е й с ат н о в к и  и з о б р а ж ен и я , и  м ы  п р и с о е ди н и м  к  н ем ит н к у , к о т р а я  п о яв и ст я  слев а   (р и с . 6 и  7):

к о ьл т

е  перновгьлач

о  п р о иеткр о вани ь  побыдн

я  нн уж

е  сценраи

о  н а  эп а т е  синелваост тч о   л д я  обесинпч м з ар е а  вс ю  гик рфа

. Есл я  тибла

я  пмрие л ог у  пс терид

и  о  вкрсет ц  сиейлт о   и н еп о д в

я н рьлаидк

о  зенра е т а ч а н ь мт уад , т о  н е  исеюнлочк я  пр и   имз не о  ь т аледрп .

е ь , и

т   о ас т о   ре а й  ж е ь , й   п од у  к а р

-

си Р уо р т в

.  6 •   оывбндС ю  кируантк

й  эмел тн , обющзура у

#pageHeader hi { padding: Opx; margin: Opx; float: left; width: 396px; height: 171px; background:  transparent url(cr- tl.jpg) top right no- repeat;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA #pageHeader hi span { display: none;

в  «Ми к и нм ое н

ю

е   п о хд я . О дн а к

си Р

, к  кортм ю  зогалв.к .

у  мн о ж

о  прис ондет .

ь

Ие д П о сл о т б р а ж ес т п рост

Рис

. 7 • ...л  ес

и  об ы а в о т с к  те

х нт е ем  л э

а н ещ е ом  п

ы  н а н од

у к н и т  кар

е  тог

о  ка к  лева я   п о в ер

о  п ри соиед н ясет

я  ч аст ь  з агол вк х   к а р ит н к я  к  св о б нд о м

м  дш аьл

е

а  п орст ен а и  в  п р а в о

й  ч асит у   э л ем н т

zyxwvutsrqpo

, ег о  ткес т , котра я у   h 2:zyxwvut

#pageHeader  h2 { padding:  Opx; margin:  Opx; position:  absolute; top:  Opx; right:  Opx; width:  3 5Opx; height:  171px; background:  transparent url(cr- tr.jpg)  top right  no- repeat;

у

#pageHeader  h2  span { display:  none;zyxwvutsrqponmlkjihgfedcbaZYXWVUT

И де с Ри ляди г ы в

. 8  •  и Верс т ц и н а р  ст

я и  «Мк и н мо е н

» бе ы з льн а и ц е  сп в х то к фе  эф а  в  Microsoft Internet Explorer

. Та

к

. 9  •   А  та к ляди  вг ы

т а «Мк и н мо е н ы х льн а и ц  се п

ет к е ф  эф

е

М ы  п р о п су ти м   оп и сан и е  з н а ч и те л ь н о й  ч а с т и  п р о ц е с с а  в ер скт и  с тр а н и ц ы  и  р а с к а ж е м   о  н е к о т р ы х   н е тр и ви аль н ы х   э ф е к та х   в   «М н ем о н и к е» .  В  к о н ц е  о р и г и н аль н ог о   CSS- ф а й л а   ес т ь   м е с то ,  с о п р о в о ж д а е м о к о м е н та р и е м   о   то м ,  ч т о   н а ч и н а ю тс я   сп ец и аль н ы э ф е к ты . Е сл и  и с к л ю ч и т ь  и з  ф а й л а  все , н а ч и н а я  с  э то г о  м есат , т о  п о лчу и тс я  с тр а н и ц а , и з о б р а ж е н н а я  н а  р и с 8. С о б с тв е н н о , и м е н н о  та к  и  бед у т  в ы гл яедт ь   окон ча те л ь н ы й   р е з л у ь ат т  в  Internet Explorer.  О дн а к о   в  б р ау з ер а х   Firefox  и л и  Safari  с тр а н и ц а  бед у т  в ы гл яде т ь   ат к к а к  п о к а з а н о  н а  р и с . 9.

туС с Ри щи ю а в и ж р де д о п

м а д л шь

ь пр об л е м

е е . ,

ы

В ы брат ь   ну и к а л ь н ы е  э л е м е н т ы  н а  с тр а н и ц е , к о т р ы м н е  н а з н а ч е н  н и  к л а с , н и  и д е н т и ф и к а т о р , м о ж н о  с  п о » в х а р е  буз а р , м о щ ь ю  и м е ю щ и с х я  в  CSS2 с е л к т о р в . Б е д а  в  т о м , ч т о ы zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н е  вс е  б р азу е р ы   и х  п о де р ж и в а ю т .  Ш и  в о с п о л ь з о в а л с я   э ти м и   с е л к то р а м и ,  н о   в о б щ е - т о   д о б и ть с я   н жу н о г о  р ез луь ат а  м о ж н о   бы л о   б ы  и  п р о щ е :  до с та о ч н о и з м ен и т ь  р а з м ект у , ч то б ы   н а  н жу н ы е  э л е м е н т ы   мож н о  б ы л о   с о л а ьт с я . К о дг а  с о сатв л яест я  р а з м ект а , н жу н о  с атр ьт с я   п о де р у   п р о с то й   код а   и   в о з м о ж н о с ж и ват ь   бал н с   м еж д ть ю   в ы б р а т ь   з а ет м   н е о б х ди м ы е   э л е м е н ты .  П р и  с о з да н и и   сай т а   Zen  G arden  с та в и л а с ь   з а дч а   до б и ть с я м ак си м аль н о й  ги б к о с ит , н о  в  н ек о т р ы х  слчуая х  е е  вс е ж е   о к аз ало с ь   н е д о с та о ч н о .  В  б о л ь ш и н с тв е   п р о е к то в H TML- р а з м ект а  и  CSS р а з р а б ты в а ю тс я   п ар л ель н о , та к  ч т о   в ы  м о ж е т е   п о с пт у а т ь   атк , к а к   дуо б н о .

ицкуртсно еР

осипС

я

к  отнаирв

в  дизайн

а

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

В  Internet Explorer сп и со к  в а р и а н то в  ди з а й н а  п р есдатв ле н   в  в и д е  о дн о й  в е р ти к а л ь н о й  к о л н к и  (р и с . 10), а  в х   кол н ок , н а к л о н е н н ы х Firefox  и   Safari  -  в   в и д е   вд у п о д  те м  ж е  угло м , ч т о  л е в ы й  к р а й  ф о н а  (р и с . 11). Ч то б ы   д о с ит ч ь   ат к о г о   э ф е к та , н жу н о   вы брат ь   и  п о з и ц и он и роват ь   о ед т л ь н ы е   э лем ен т ы   сп и ск а . Д л я   э то г о п р и м е н я ю тс я  с ел к от р ы  до ч е р н и х   и  с ес рт и н с к и х  э л е м е н то в ,  к о т р ы е   о п р едлен ы   в   с п ец и фи к ац и и  CSS2, н о   н е  п о дер ж и в а ю ст я  б р а зу е р о м  Internet Explorer дл я Windows: ttlselect  u l> li  { p o sit io n :  r e la t i ve ; left:  - 14px; .с 1 Ри 0 • о с Спи к  варианто }zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

в н ай з ди

а  в  Internet Explorer

tlselect  ul>li+li  { position:  relative; left:  - 12px;

# lselec t  u p o sit io n : relative;  left:  - lOpx;zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

И Н Р МП ЧА Е

М н о иг ч т

Е

е  оеатзчн

, чт о  эт о  н е  коне

ц  ко да

.

П ер в ы й  селокт р  в ы би р ае т  лю б о й   э л ем н т   l i ,  яв л ю щ ийс я  н еп осрведтн ы м  п о т м к о м  э лем н т а  u l , н оах я щд е го с я  в н рту и  разелд а   ttlselect,  в  дан н о м  счалу е  вс е  восем ь  так и х   э л е м н от в . Вотр й   с е л ко т р  ан алоги чен ,  от л ь к о   э л ем н т у   l i  одлж е н   п р е шд е с в т о а т ь   ещ е отх я  б ы  оид н  тако й  ж е  э лем н т , а  слоедвать н о , в ы б и р аю с т я  вс е  э лем н т ы   l i ,  к р о м е  п ер в о г . Т р еит й  скел от р  длеа т  т о  ж е  сам ое , н о  в ы б и р аем о у   э л ем н т у  дол ж н о   п р е дш е с тв о в а т ь   жу е   н е   м е н е е   дв у х   та к и х  ж е э л ем н отв , и  та к  дале . С рто я  каск нд ы й  сп и со к  п р ав и л , к о аж д е   и з  к о тры х   п е р о п р е лд я т   п р еы д щ у е ,  м ы  в к о н еч н о м   и о гт е   п о з и ц и о н и реу м  вс е   восем ь   с ы ло к  п о ел ь д о нт о и с т . Э т о  и з л и ш н е  заптну о е  реш ен и е  простй , в   сщ у н о с и т , п р о б лем ы ; ка к  п р а в и л о , в ы   м ож ет е  и з м е н и т ь  раз мкеут , добав и в  до п о лн и етль н ы е  класы , и  те м сам ы м   и з б еж а т ь   н ап и сан и я  дл и н н ы х   с ел к отр в   CSS. .с 1 Ри 1 • о   Спис к  варианто в н ай  диз а  в раузера  б х  т с  г о  ж е И м ен н о  та к  м ы  и  р ек о м ен еуд м   п о с тп у а т ь .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA а с клас , чт о  Firefox и  Safari

и н а с л и е щ юу д

лк ыс С п р и е щу д ы

й ва р и а н

й и т ди з а й н а

П о с л енд е ,  ч т о   о сатл о с ь   с ед л а ь т ,  -   э т о   з а м е н и т ь  не в ы р а з и те л ь н ы е  с с ы л к и  п о д  с п и с к о м  в а р и а н то в  ди з а й н а   бо ле е  с и м п а ти ч н ы м и  г р а ф и ч е с к и м и  э к в и в а л е н та м и   (р и с . 12 и   13). К а к  и  р а н ь ш е , с л о ж н о с т ь   со ти т  в то м , ч т о   дл я   э ти х   э л е м е н то в   н е   о п р едлен ы   о ед т л ь н ы е   к лас ы , та к   ч т о   и х   н е   адесут я   вы брат ь   п р о с ты м

Ка

к ес д л а т

ь п р а в и л н ьы

й б о ыв

р zyxwvutsrqp

сп ос бом . Н о  в  с п е ц и ф и к а ц и и  CSS2 о п и с а н ы  н е  то л ь к о  с ел к от р ы  до ч е р н и х   и  с е с тр и н с к и х  э л е м е н то в , ест и  др гуи е .  В  да н н о м  счлуа е   д оу б н о   в о с п о л ь з о в а ть с я  се л е к то р а м и  а тр и б тоу в ,  п о с к о л ь к у   о н и  п о з в о л я ю т   вы б рат ь   э лем ен т   в   з ави си м ост и   о т   е г о   ун и к а л ь н ы х   ах Рис . 12 • zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   Вщ о л ы сс к  Next designs и  View All Designs р а к т е р и с т и к .  Д л я   в с е х   с ы л о к   в   H TM Lр а з м е т к в  Internet Explorer дл я  Windows о п р ед лен ы   раз ли ч н ы е   клави ш и   д о с тп у а :

ь е

Т ак о г м ен ен и Рис

. 13 •   Ви в аузера  бр

д о л ы  сс х  тип

о  род

а  ун и к а л ь н о с т я  с ел к то р

ь  и деа л ь н в   а т р и б ту о в

о  п о хди

т   лд

я  п р и

-

:

ftlarchives  u l> li + li  a[accesskey= "w"]  { d isp la y:  block; width:  35px; h eigh t :  0; overflow:  hidden; paddin g- top:  18px; background:  t ran sp aren t  u rl( arch ive- b3a.gif) top  le ft  n o- repeat; p o sit io n :  abso lu t e; t o p :  16px; l e ft :  170px; zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA co lo r:  # 958500;

к  Prior, Next и  View All а  Firefox и  Safari

•

К а к   с ле у д т   и з   сам о г о   н аз ван и я , с ел к от р   а т р и б т оу п о з в о ляе т   вы брат ь   э лем ен т ,  дл я   к о т р о г о   з н ач ен и и м ен ован н ог о   а т р и б ут а   с о т в е т с в еу т   ук а з а н н о м у В  л и с ти н г е  в ы ш е  в ы едл н а  н а и б о л е е  и н етр с н а я  ч а с т с е л к от р а : п о ск о ль к у  у  н жу н о г о  н а м  э л ем н т а  дей свти те л ь н о  ест ь  а тр и б у т   a c c e s s k e y  и  ег о  з н а ч е н и е  р а в н w,  т о   и м е т   м ест о   с о тв е тс в и е ,  та к   ч т о   к   э л е м е н т п р и м е н я е тс я  с ти л и с ти ч е с к о е   п рави ло . В оз можн о в а р и а н то л е к то р с я  а тр и б ту л о   см ы с

аК

, в ы  з адетс ь   воп росом в  ди з а й н а  м ы   п р и м е н и л ы  до ч е р н и х  э л е м е н то в , в ед ы   a c c e s s k e y .  В о б щ е - т л  та к  и   п о с тпу и ть .

к е с дл а т пр а ив л ы н ь

в е . ь о у

, п о ч е м у   дл я  с п и с к а и  та к и е  с л о ж н ы е  се ь  у  н и х  то ж е   и м ею т о   в ы   п равы , и м е -

ь й об ы в

р

П р и   р а з р а б о тк е   «М н е м о н и к и »  б ы л и   раз ли чн ы р и а н ты .  Ш и   м о г   б ы   п о - др гу о м у   раз би т н и е  з а го л в к а  в  Photoshop, а  м о г  б ы  с о в е р ш е н н ч е   п о до й т и   к   вы бор у   с ы лок ,  в хо д я щ и в а р и а н то в   ди з а й н а .  Е сл и   в ы   п о н и м ает ю ст я   в о з м о ж н о с ти ,  т о   сму е т е   п ри н ят ь реш ен и е .

е   ва ь   и з ображ е

о  и н а

х   в   сп и со ,  к а и е   и ме   п рави ль н о

к е

• zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

л ю З ка е ч н и И ат к Чт

Ш па рг л к

е , в ы  п о з н а к о м и л и с о   ад л ь ш е ?

В оз м ож н о н о в , п о л ь з о в а ш и сх г о  д о  то г в ы   то л ь к

ь  с  с а й от

, в ы  п р и н а дл еж и т , к а к  э т о  о б р ел о   с ей ч а с   п оз н аком и ли с

о  с м ы с л

, к т о  п ы атл с

я  соз адт

ь  хот

я  б ы  п ар о ч к

у  сай от

в  с

zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA п р и м ен ен и е м   CSS, и з в е с тн о , ч т о   п еродж к а   с о  сот р

м  Zen G arden. е  к  ч и с л

я  тенх о л ги е

В  л ю б о м   с чл у а е ,  ест п род лж и т ь   з н а к о м с тв кн и г и  м ы  р ас к аж ем

юЛ б о м у

а п о CSS

у   в е рт а й  CSS з аодл . А  в о з м о ж н о ь  с  я з ы к о м

, ч т о   в ы   з аох ит о  с  CSS. В  э то й   ч а с т , к а к  э т о   с едл аьт .

-

ь   ш ан с

, . и

е

н ы  бр азу ер о ч ен о , ч т о   есл в с е   к о н ч и ст ак о д г , н и  з а ди з а й н у , у ж ж ем , го р сдк и Н о  в а ж н н и ях .  Е ст п р о блем ам то в ы  де л и ть с

в   п ок а  далек а  о т  с о в ер ш ен свт а и   с то я щ а я   п ер д   вам и   з ач д я  б и ьт е м   го л в о й   о б   с о т л   и   к л яв т а м  ч т о  н а  свет е  н е  п опсдут аь с я  б о л ь ш  л чу ш е  з а н я ть с я  ч ем - н и бду ь  п о м  п л а н и р о в а н и е м  и л и  яернд о

о  п о н и м а ть , ч т о  в ы  н е  о ди н о к ь   ц ел о е   с о б щ е с тв о   л ю ед й и  ди з а й н а  н а  о с н о в е  сатн ад р от в я  др у г  с  др гуо м  з н а н и я м и

-

. Н е  и ск лю а   н д р ут а

п  р о щ е й  ф и з и к о й

и  в  св о и ,  з а н и м а ю щ и сх

-

,  т и  н и е  к  веб , ска

о .

х   м чу е

я

;  и  о н

и  го -

.

И з  м н о ги х  п о с в ящ ен н ы х  э от й  тем е  ррсоеу в  уп о м ян е м т  CSS Crib Sheet, к о т р ы й  к о рид н и реу т  Дей в  Ш и   ои д н  и з  авотр в  э от й  к н и ги . О н  бы л  зм уад н   ак к  наибо ле е  п о л н ы й  с п р а в о ч н и к  п о  ти п и ч н ы м  п р о б лем а м  и  и х р еш ен и ям , н и ж е  м ы  п р и в о ди м  раз м ещ ен н ы е  та м  меат ри алы .  П о с л е дн я я  в е р с и я   сай т а   н а о х ид с т я   п о   р а де с у www.mezzoblue.com/ css/ cribsheet.zyxwvutsrqponmlkjihgfedcbaZ с ай

с лЕ и

 с о м нева т ес ь,

 пр о верй ят е

В ы  м ож ет е  и з бав и т ь  себ я  о т  л и ш н е й  го л в н о й  бол и  в о в р ем я  олкатди , есл и  сраз у   п р о к н р т о л и ре т у е   сво й  код . Н ек о р ек нт о   с о а вт л е н ы е  XHTML- раз м ет к  д  и  табли ц ы  сит ле й  м огу т  п р и в ест и  к  р а з л и ч н ы м  п р о блем а м  п р и в кер с т . П о ль зясу ь  и н сртму ен атм и  к о н рто ля , в ы  н чауи се т ь  и ск ат ь  и  и сп р ав лят ь  о ш и б к и . Н а  сай т е  W3C и м ею т с я  п р о г а м ы  дл я  п р о в ер к и  XHTML и  CSS- а док , дпоуст н ы е  со втсе н о   п о  арсеад м   http:/ / validator.w3.org  и http:/ / jigsaw.w3.org/ css- validator. О тм е и м , ч т о   о ш и б к и  в  н ач л е  до кму ен т п ри чи н о й  н а в ед н н ы х  о ш и б о к  н и ж е  и з - з н о й   в ло ж ен н о ст и   и л и   п о  др гу и м   п ри ч и н ам к о м е н е ду м   н ач т ь   с  и с п р а в л ен и я  н еск о ль к и х н ы х  о ш и б о к , а  п о т м  п о в то р и т ь  п р о в ер к у общ е е  ч и сло  о ш и б о к  м о ж е т  з н а ч и етл ь н о

о С а зв й д т е с т и ле й б р азуер ,ах

 и  т е с т и р йу т е  с начл

Е лс и  в ы  р аз р аб ыт в ает з у ер , т о  н е  и с к л ю ч ен о о т   н е од с а т ч н о   р а з в и то г р а б о та ю щ е г о   м е ах н и з м о ч ен ь  о б и дн о  в и едьт м о м  с о  сатн адр тм и

т  б ы т

ь

. М ы  р е   о ч ев и д , в  резльуат е  со к р аит ь ся .

 т аб ли ц ы  в  с ам хы

  а  з ат е м

а   м о гу а  н е п р а в и л ь

 уе ж

  п е р о х дв ы   в  о с т альнхы

е  и  тесит реу е  сай т  в  сатро м  бра , ч т о  с ай т   о к аж ест я  з а в и с и м ы о   и , в о з м о ж н о , н ек о р ек нт а   п рори совки .  И  тогд а   е д бу , ч т о  в  б р азу ер , л чу ш е   с о в м е сит , сай т   о тбр аж ест я   н еп р ав и ль н о

м о т .

л ю З ка е ч н и

е zyxwvutsrqpo

чЛ у ш е  о та л к и в а ть с я  о т  и едал , а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  затме  п е р ох ди т ь  к И з б е а г йт е  экт фе а ф  плев оиян б р аз у е р а м  с  м е н ь ш и м и  в о з м о ж н о с тя м и . Т огд а  в а ш  ко д е н с т и л за о г н в  ктон е тн а е д бу т   о тв е ч а т ь   с та н д а р т м   и   н е   п р и д е тс я   п ри лаг т ь в  Internet Explorer 6 ля д  Windows г и г а н тс к и х   су и л и й  дл я   п о де р ж к и  др гуи х   б р а зу е р о в . Н а   с е г о дн я ш н и й  ден ь   э т о   о з н ач ет ,  ч т о   те с и р о в а т ь е ус л д т  сн ач л а  в  б р азу ер а х   Mozilla (Firefox), Safari и л и Е сл и   дл я   и м п о р т а   в н еш н и х   с ти л е й   в ы   п о л ь з еу т с ь Opera,  а   т о л ь к о   п о то м   вн оси т ь   и сп равлен и я   дл я и с к л ю ч и те л ь н о   ди р е к ти в о й   © i m p o r t ,  т о   р а н о   ил и Microsoft  Internet  Explorer.zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA п о з дн о   о б н а р уж и т е ,  ч т о   в   I n tern et  Explorer  6  д л я Windows н а  м гн о в е н и е  п о я в л я е тс я  п р о с то й , н е ф о р м а И сопльзуя  пла ещвю ти р о в а н н ы й   H TML- к о д  е щ е   д о   п р и м е н е н и я   к   н ем у с ти л е й . Э то г о  м о ж н о  и з б е ж а ть , п р и с о е ди н я я  та б л и ц у о п з и р ц а н ев ,  преов ьт е , с ит л е й   п о  ссы лк е  и л и   п о м е с ти в   н а  с тр а н и ц у   э лем ен т рпаоильнв  ли  ра исщ че т с я  м е с т о s c r i p t .  С м . саьт ю  «Flash of U nstyled Content» н а  срат н и ц е   www.bluerobot.com/ web/ css/ fouc.asp. П лав ю щ е е  п о з и ц и о н и р о в а н и е  -   э т о  слож н а я  тнех и к а , к о тр а я  н е  вдгес а  дае т  ож и адем ы х  резльуоатв . Елс и  ока з ы в ас е я т , ч т о  п л а в ю щ и й  э л ем н т  в ы оихд т   з а  гр а н и ц ы Не  пола г йт е с ь  на  сойсв та о б ъ ем л ю щ ег о   э л ем н т а   и л и  в о б щ е   е вд т   бсе я  н е  так , min -   width/ min- height ка к  н оад , п р о в ер ь т е   п рав и ль н о ст ь  св о и х  дей свти й . О з н а к о м ь е ст ь  с  ркуо в сдто м  Э р и к а  М ей р а  п о  э от м у  в о п Internet Explorer  дл я  Windows н е  п о де р ж и в а е т   н и  то , рос у   н а  сай т е   Complex  Spiral  (www.complexspiral.com/ н и  дргуо е .  З а т о  с в о й с вт а  w i d t h  и  h e i g h t  о н   тр а к ту publications/ containing- floats). о   р е ч ь   и де т   о   m i n - w i d t h  и   m i n е т   та к ,  к а к   б дту h e i g h t ,  п о э то м у , п р и м е н и в  ф и л ь т р а ц и ю , в ы  с м о ж е т е   д о б и т ь с я   н у ж н о г о   р е з л у ь т а а   с   п о м о щ ь ю   о д н и х В  избе ажиен   с а л и яв х о ын п  опле й ли ш ь  w i d t h  и  h e i g h t .  К о н к р е тн ы й  п р и м е р  с м . в  сат а вз й т д е  от с т ыуп  или  ргаыицн ть е   «Min- height:  fixed»  н а   с тр а н и ц е   mezzoblue.com/ archives/ 2004/ 09/ 16/ minheight_f i. И н о гд а  п р и хо ди тс я  б о р о ть с я  с  л и ш н и м  п ус ты м  п р о с тр а н с тв о м , а  и н о г д а  о н о  н е  п о я в л я е тс я  т а м , гд е   в а м н уж н о .  Е с л и   в ы   и с п о л ь з уе т е   п оля ,  т о ,  в о з м о ж н о , сЕ л и  с ом ена в т е с ь, п ри чи н а   н е п р и я тн о с те й   -   э т о   с хл о п ы в а н и е .  Э н д и ум еитьшн  зае,нчия Ба д д   (Andy  Budd)  н а   с в о е м   сай т е   о бъ ясн яет ,  ч е г о р ы а в еж н  в  проец тн а х с л е уд т  о ж и да т ь   (www.andubudd.com/ archives/ 2003/ 1  l/ n o_m argin _for_error). И н о гд а   и з- з а   ош и бо к   о к р уг л е н и я   50%  +   50%  да е т 100,1%, и  в ес ь  м ак е т  п л ы в е т .  П о п р о б уй т е  в м ес т о   50% а Ст р йт е с ь  избе аг т ь з адт ь   49% и л и   49,9%.

я дл

р о е вн м о д е гн

а иянз д  э ле м е тн а

и  фикс ираойнв ил  всыот ы

 от с т /оупв ргаицн  ширын

В  Internet Explorer 5.0 и  5.5 дл я  Windows м оедл ь  п р я м о г уо л ь н ы х   о б л а сет й   р еали з о в ан а   н е к о р е к нт о , ч т о  ч ас т о  п р и в о ди т  к  п р о б л ем а м  п р и  в ы ч и с л е н и и  ш и р и н ы  и в ы с о ты .  С ущ е с тв ую т   сп особ ы   обой т и   эт у   ош и бк у (см . http:/ / tantek.com/ CSS/ Examples/ boxmodelhack.html), н о  л чу ш е   во бщ е  дер ж а ьт с я   о т   н е е  п о да л ь ш е   и   з ад в ат ь  с в о й с вт о  m a r gi n  дл я  п о т м к о в , есл и  у   р о ди те л я до л ж н а   бы т ь   фи к си р о в ан н а я  ш и р и н а   и л и   в ы с о та , ли б о  свой вст о  p a d d i n g  дл я  р оид етля , есл и  к о н к р ент а я ш и ри н а/ вы сот а  до л ж н а   бы т ь   у   п отмка .

сЕ л и о т бр а ж е т с я

 ктон е тн

 не рпаиольнв  в  Internet Explorer

В оз м ожн о , в ы  сатл и  ж е р тв о й  о ш и б к и  «Peekaboo 1  bug». Э то , н а п р и м е р , п р о и сохди т , к о гд а  п о л ь з о в а те л ь  з аедр ж и вае т  крус о р  м ы ш и  н а д  с с ы л к о й . О  то м , к а к   о б о й т и э т у   ош и бку ,  н а п и с а н о  н а   с ай т е   Position  Is  Everything (www.positioniseverything.net/ explorer/ peekaboo.html).

Peekaboo -   э т о  и гр а , в  к о тр у ю   вз рослы е   и гр а ю т   с  м а л е н ь к и м д е ть м и . С м ы с л  в  то м , ч т о   в ы  з а к р ы в а ет е  л и ц о  р ку а м и , а  п о т в н ез ап н о  уби р а ет е  рку и  с  в о з гласо м  «Boo!». С ту ь   ош и бк и  в  то м ч т о  п р и  о п р едл н н ы х  дей свт и я х   п о л ь з о в а ет л я   и  о п р ед л н н о р а з м ект е  к о н етн т  т о  и сч ез ат , т о  п о яв л яест .  -   .имрП   .пре

и м , й

ту С

р П о в е р ьт е , нй ы жу

ь  CSS- д и  зайн

  ва м

о zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

  и д т г л в ыя  с т р ани ц а р П о в е р ьт е ,  как пр и   р а з нх ы   р аз м е р ах   ш т р ои в ф zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

 а  во зм ен о ж тк  эфе ф

  ли

  во б щ е

Н ек о т р ы е  б р азу ер ы   п о де р ж и в а ю т   р асш и р ен и о тс у в ю щ и е   в   о фи ц и аль н о й   с п ец и фи к ац и и ф и л ь тр ы  и  ф о р м а ти р о в а н и е  п о л с ы  п р о к р тук ат ю т  то л ь к о  в  Internet Explorer. Е сл и  п р о г р а м рол я  го в о р и т , ч т о  и с п о л ь з еум а я  в а м и  к о н с тр ук ц и о п р едл н а , то , ск о р е е  всего , р еч ь   и ед т   о   н есатн адр т н о м   р асш и р ен и и , к о т р о е  н е  бед у т   п о де р ж а н ги м и   б р а зу е р а м и .

еН  забвйы т е LoVe/ HAte

я  C SS, . Т а к , и  р а б о а  к о н т я  н е о   рд у -

П е р до в ы з в о ляю з ави си м ост п о л ь з о в а те л е ш р и фт б ы   ваш н о  ш и р о к о

е  б р а зу е р ы т   п о л ь з о в а те л и   о т   е ди н и ц й   н аверн як а  п о  ум о л ч а н и ю а   в е р с кт а   в ы г л я ед м  ди а п а з о н

лС и е д т е р е ги с т р а

 о   пеокрд я

,  к  п р и м е р у   Mozilla  и  Opera, п о ю   и з м ен ят ь   раз м е р   ет к с а   вн е ы   и з м ерен и я . У   н е к о т р ы х а   в ы с та в л е н   ино й   раз м е р , н еж л и  у  в ас . С атр й етс ь , ч то а   п р и с то й н о  в  м а к с и м а л ь е  р а з м е р о в  ш р и ф то в .

 за  с о т ве т с т ви е м   в  HTML  и  CSS

П с е в од к л а с ы  дл я  с с ы л о к  вседг а  н уж н о  з а д в а т ь  в  сле юд у щ е м   п о р я дк е : link,  visited,  hover,  active.  П р и   л ю б о м  др гуо м   п о р я дк е  к о н е ч н ы й  р ез луь ат т   н е  га р н ти рован .  Е с л и   в ы   п о л ь з уе т с ь   та к ж е   п с е в до к л а с о м и : fo c u s,  т о   п р и м е н я й т е  п о р я до к  LVHFA  (М э т т  Хоу п р е лд о ж и л  так у ю  м н е м о н и ч е с к у ю  ф р а з у  «Lord Vader's H andle Formely  Anakin»).

С о гл а с н о   сп ец и фи к ац и и , я з ы к   CSS  ч ву с тв и те л н  к р е г и с рт у  бку в , и  б о л ь ш и н с тв о  б р азу ер о в  сюлеуд т  э то м у  тр е б о в а н и ю . И м я   ' hom e P a ge '  дл я  клас а  в п о л н е д о п су ти м о   п р и  ус л о в и и , ч т о   о н о  з а п и с а н о  о ди н а к о в о в   H TML- р аз м ект е  и   в  та б л и ц а х   с ти л е й . П р и м е н е н и е ж е   п рави л   к  э л е м е н та м   к лас а   ' h o m e p a ge '  в   э ти х ус л о в и я х   п р и в ед т   к   ош и бка м   в   п о л ь з о в а те л ь с к и х а г е н ат х ,  к о т р ы е   с тр о г о   с о б л ю да ю т   с п ец и фи к ац и ю (н а п р и м е р , в  Mozilla).

He забвйы т е с л о е дв а н и я в  с т еиночгрсафикх

е с Т т и р йу т е т аб л и ц ах

 о   пеокрд я   з н ач е и й   с во й с т ва х

С те н о г р а ф и ч е с к и е   с в о й с тв а   b o r d e r ,  m a r g i n  и p a d d i n g  п о др а з му е в а ю т   о п р ед лен н ы й  п о р я до к  сле до в а н и я  з н а ч ен и й : про ти в  ч ас о в й  сртел к и , т о  ест ь  top, right, bottom, left.  С л едо в а етл ь н о , з а п и с ь  m a r g i n :  О l p x  З р х   5р х ;  о з н ач ет , ч т о  в ернх е е  п о л е  оству ет ,  п р а в о е   равн о   1 п и к с е л ю   и   т а к   да л е .  З а п о м н и т е м н ем о н и ч еск о е  с л о в о   «TRouBLe»,  и  в ы  всдег а   ет д б у е ку а з ы в а т ь   п о р я до к  п р а в и л ь н о .

У а з к в йы т е ля д

 еи дн ц ы   н е лу х в ы

  и з м е р ни я   з н ач е и й

на

 на  с т и ле й ,

  вс т р о е н х ы  эск плаут и р йу т е

  и м п о р т и р о ва н х ы

Е сл и  н а  э та п е  р а з р а б о тк и  в ы  п о м е щ а е т е  та б л и ц у   с ти л е й  м еж д у  тегам и   < s t y l e >  и  < / s t y l e > ,  т о  ус тр а н я ет е   п о т е н ц и а л ь н у ю   п ри чи н у   ош и бо к   и з - з а  к э ш и р о ван и я . П р и  р а б о т е  с  н е к о т р ы м и  с та р ы м и   б р а зу е р а м э т о  б ы в а е т   в ес ь м а   с щу е с т в е н н о . Н о  н е  з а б и в а й т е   пе р ен о си т ь  в ес ь  ко д  CSS в о  в н е ш н и й  ф а й л  п ер д  з а п су к о м   в   э к с п л ау т ц и ю . Э то т   фай л   можн о   и м п о р ти р о в ат ь   ( © im p o r t )  и л и  с в я з а т ь   ( < l i n k > ) . В  п р о ти в н о с лч у а е   п р е и м щу е с т в а   в н еш н и х   та б л и ц   с ит л е й   удб тр у а ч е н ы .

С п ец и фи к а ц и я zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA  CSS н асти в ае т  н а  ук а з а н и и  е ди н и ц  и з о б й Да в л я т е  ви дм еы   р ам и к м ер н и я  дл я  к егл я  ш р и ф т о в , в е л и ч и н  п о л е й  и  др гуи х  о т иклад  верстик на  э т апе ли н ей н ы х   р аз м ер о в .  (Е ди н с тв е н н о е   и ск лю ч ен и е   со с та в л я е т   с в о й с тв о   l i n e - h e i g h t ,  д л я   к о то р о г о   за нУ и в е р с а л ь н о е   п рави л о   ти п а   *  {b o r d e r :  да в т ь   е ди н и ц у  и з м е р е н и я  н е о б я з а те л ь н о , хо т я  и  до l p x  # f 0 0 ; }  м о ж е т  с и л ь н о  п о м о ч ь  п р и  п о и с к бо к   в   м ак ет .  Д о б а в л е н и е   рам к и   к   о тде л ь н ы т   п о л а г а ть с я   н а   п о в е де н и е п ус ти м о . )  Н е   с л е д уе м е н та м  п о м о ж е т  в ы я в и т ь  п е р е к р ы ти я  и  л  и ш н е к о н к р е тн о г о  б р азу ер а   в  счлуа е  о тс у в и я   е ди н и ц  и з с то е   п р о с т р а н с т в о ,  к о т р о е   и н ач е   бы л о  б ы   м ер н и я . В п р о ч ем , н лу ь   -   в с е гд а   н лу ь , бд у ь   о н   вы ра з а м е ти ть . ж е н  в  р х ,  em и л и  и н ы х  е ди н и ц а х , п о э то м у   р аз р еш а сет я   н е  з а д в а т ь   е ди н и ц у   и з м ер ен и я  дл я   з н а ч е н и я  0. П р и м ер : p a d d i n g :  0  2р х   0  le m ;

и м т

so lid е  о ш и м   э ле е  п у т р уд н о

З ак лю ч ен и  злаюкчй т е к   и з о е б н им р я а ж в  ои дно чеы

 пту ь

еН

  и ча в к ы

Пр

и  ук а з а н и и  п ту и   к  ф о н о в ы м  и з о б р а ж е н и я м  к а в ы ч к и  в о б щ е  н е о б я з а те л ь н ы , н о  есл и  о н  з ак л ю ч е н  в  о ди н очн ы е  к а в ы ч к и , т о   Internet Explorer  5 дл я   Macintosh н е  з агржу ае т   к а р ти н к у .  П о л ь з йу те с ь   ли б о   дв о й н ы м и к авы ч к ам и , л и б о   о б х ид е т с ь   бе з   н и х .

ьт Б д у е с л оы к

 арукат ны  на  внту р е н и е

 пр и

  с т и л з ац и   аен к р ы

Е сл и  в  в а ш е м   код е  в с тр е ч а е тс я   к лас и ч еск и й   ан к е р  < а   n a m e= " a n c h o r "  >, т о   к  н е м у   б ду т   п р и м е н я ть с я   п с е в до к л а с ы   : h o v e r  и   : a c t i v e .  Ч т о б ы   э то г о и з б е ж а ть ,  п о л ь з уй те с ь   дл я   а н к е р о в   а т р и б ут о м   i d — < d i v  i d  =  " a n c h o r "  > и л и   п р и м е н я й т е   н еск о ль к о боле е   дл и н н у ю   с и н та к с и ч е с к у ю   к о н с тр ук ц и ю   : l i n k : h o v e r ,  : l i n k : a c t i v e .  С м . www.dbaron.org/ css/ 1999/ 09/ links.

He с с лаый т е с ь р е з р в и яу т аб л и ц ля д   КП

 на

 псу т еы  для   (напр и м ер ,

  м ес т о  стилей   ил

  п е ч а т нх ы

 фай ,лы   б щу д и х  ус т р о й с т в)

е

zyxwvutsrqpon

Н о , з н а я  з а р н е е   о б  ун и к а л ь н о й   дл я   Internet  Explorer п р о блем е , з а к л ю ч а ю щ е й с я   в  ув е л и ч е н и и   п оле й  н ек о то р ы х   п лаваю щ и х   э л е м е н то в   то ч н о   н а   тр и   п и к с е л я , в ы   н е   с ат н е т е   га д т ь   и   п робоват ь   вс е   в ы ш е п е р ч и с лен н ы е   сп ос бы . П о п ы тк

а  и с п р а в и т к   и х   н ак о п лен и ю о б х дн ы х   м ан ев р о в ю щ и хс я   в   к о н к р е тн о п рори совки .  О лтакд п а х   ди з а й н а  л и ш п р о блем , в о з н и к ш и

ь  н е о б ъ я с н и м ы .  П р и м е н и , в ы  с о з адет м   б р а зу е р а   в е р с тк ь   су л о ж н и тс я х  в  н а ч л

е  о ш и б к и  п р и в о ди в   н а   с тр а н и ц е   н еск о ль к е   з ави си м ост ь   о т  и м е е   ош и бо к   а л г о р и тм и   н а   боле е   п о з дн и х   э та ,  ес л и   ср аз у   н е   реш и т е   р а б о ты .

Бы т ь  м о ж ет ч т о  уясн ен и е е   р еш ен и ю м н о ги х   ч асо в

ь пр обл е м

, с а м ы й   важ н ы е  сту и   в о з н и к ш е .  П о н и м а н и , п о тр а ч е н н ы

П р е дп о л о ж и м , ч т о н у ю   п ол ск у   вы сот э л е м е н то м   в   б р а зу е р и  то л ь к о   в  н е м . Е сл ест ь  о ш и б к а , п р о я в л я ю щ а я с м и   э л е м е н та м и ,  т о п оля , о тн о с и те л ь н о ад ж е   к а и е- т о   тр ю к и о к р жу а ю щ и х   э л е м е н то п р о м е ж тк у а .

ы й   н а ш  со в е т  с о с т и т   в  то м , й  п р о б л е м ы  — э т о  к лю ч  к е  п р и ох ди т   с   о п ы то м ,  п о с л е х   н а  с о с ат в л ен и е   к о ад .

ю   г о р и з о н та л ь  в ы  з а м е ти л и  п сут й   3  п и к с е л я   п ер д   п лаваю щ и м е   Internet  Explorer  дл я   Windows, и  в ы  н е  з н а ет , ч т о  в  э то м   б р азу е р е я  п р и  р а б о т е  с  п л а в а ю щ и   ет д б у е   п робоват ь   о тр и ц а те л ь н ы е е  п о з и ц и о н и р о в а н и е , а  в о з м о ж н о , ,  ч то б ы   п о дп р а в и т ь   п о л ж ен и е в   и   и з б а в и ть с я   о т   н е н жу н о г о

ь

(К с та и   го в о р я ,  е с л и   в а с   з а и н т е р е с о в а л а   ош и бка , св яз ан н а я   с   тр е м я   п и к селям и , т о   н а   э т о м   с а й т е  в ы уз н а е т ,  к а к   и с п р а в и т ь   е , а   з а о дн о   и   мн ог о   д р уг и х сп ец и фи ч н ы х  дл я  Internet Explorer  о ш и б о к , с м . с рт а ниц у   www.position iseveryth in g.n et/ articles/   hollyhack. html# haslayout).

р у г иД

е т ус

а

П он и м ая , ч т о  ж е  н а  с а м о м  дел е  п о с л жу и л о   п ри чи н о й ош и бки , в ы  с м о ж ет е   п одй т и  к  е е  и с п р а в л е н и ю   боле е о см ы слен н о .  С а й т   Crib  Sheet  -   э т о   то л ь к о   о тп р а в н а я то ч к а . С щу ес вт еу т   ещ е  м н о ж е с тв о   с а й то в , н а  к о т р ы х ед а т л ь н о  р ас м арти в аю ст я  де ф к ты , и м е ю щ и е с я  в  р а з н ы х   б р азу е р а х .  М ы  н а с то я те л ь н о   р е к о м е н е ду м   з а гл я н ту ь  н а  в ел и к о л еп н ы й  сай т  Position Is Everything  (www. positioniseverything.net).

е сре у

ы

Б р аз у е р  Internet Explorer  5 дл я  Mac н е к о р е к тн о  о б р а б а ыт в а е т   п с у ыт е  та б л и ц ы  с ти л е й , и з - з а  ч ег о  в р е м я  з а грз у к и   с тр а н и ц ы   в о з расте .  П о м е с ти е   в   фай л   ох т я М ы  с  удо в л ь с тв и е м   уп о м я н е м  н е с к о л ь к о   з а м еч а тл ь б ы  о нд о  п р а в и л о  (м о ж н о  даж е  к о м е н та р и й ) и л и  п р о н ы х  с а й от в  и  п ер и о ди ч ес к и х   и з да н и й . К р о м е  н и х ст о  убе р и т е   с ы лк у   н а  н его .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA н ем а л о  р есру о в , п о с в я щ е н н ы х  CSS и  сатн адр тм то л ь к о   з н а ть , гд е   и с к а ть .

оП й м и т

т о

, ес т , н ад

ь о

а йС т ы о ди з а й н е с п р и м е не ни е м CSSzyxwvutsrqponmlkjihgf CSS Discuss www.css- discuss.org О бъ ем н ы

й   сп и со

и   п р а к ти ч е с к и м в еч аю

к  р а с ы л к и   с о в е та м и

т   к а к  н о в и ч к и

и  с  н о в о с тя м .  З едс ь   сп раш и ваю , та к  и  п р о ф е с и о н а л ы

и  и з  м и р

а  CSS т   и   от -

.

CSS на  с ай т е   MaxDesign http://css.maxdesign.com.au С борн и к ах

к  п о др о б н ы х , п л а в а ю щ и

, уз к о с п е ц и а л ь н ы х   э л е м е н та

х   и  м н о г

х   с а те м   д р гу о м

й  о  с п и с .

-

туС

ь  CSS- нй азид

а zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

б о р ка П д   с л ыо к  по  CSS и нг К и и  са тр а дн м  Web zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA Р е к о м е н е ду м   с л е д юу щ и е   кн и г и  дл я  н а ч и н а ю щ и п р о ф е с и о н а л о в : www.andybudd.com/links/cssweb_standards П о с т ян н о  о б н о в л яем а CSS, о п и с ан и е  р а з л и ч н ы лен и ю  о ш и б о к . С ай

я  п о дб р к х  п р и е м о

а  ссы ло в  и  совет т   Эн д

т  п о дер ж и в а е

х  и

1.  Eric  Meyer.  Cascading  Style  Sheets:  The  D efinitive G uide. O'Reilly, 2000.

к  н а  саьт и  п о ы  п о  и с п р а в и   Ба д .

2.  Eric  Meyer  on CSS: M astering  the Language  of Web Design. N ew Riders, 2002. Holy  CSS  Zeldman! zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA 3.  More Eric Meyer on CSS. N ew R iders, 2004.

www.dezwozhere.com/ links.html

Э н др ю  Ф ерн ан ед с  со сатв и л и  хо р о ш у ю   п о дб р к у   с ы ло в ы е  р есру ы ,  п о с в я щ е н н ы

Position  Is 

, н а в ер н о е к  н а  раз л и ч н ы е  CSS.

, сам у

ю   боль ш у е  о н л а й н о

4.  Jeffrey  Zeldman. Designing  with Web Standards. N ew Riders,  2003  («Web- ди з а й н   п о  с та н да р та м » , «Н Т П р ес » ,  2005).

ю -

5.  Molly  Holzschlag.  Special  Edition: Using X H TML a nd HTML. Que, Special  Edition 2002.

Everything

де Ж

www.positioniseverything.net

м

ва ш

у р а бот у

!

С ай т  Zen G arden  о сатн ест я   о тк р ы ты м   лд я  ж елаю щ и х У  в а с  п р о б л е м а   с  CSS? Н а ш л и  н о в у ю   ош и бку ?  З а гл я е  в ы охд а  э то й  к н и ги . И з у п ри слат ь  св о и  р а б о т ы  и  посл н и т е  н а  сай т   Б о л ь ш о г о   Дж он а   и  Хо л и   -   н ав ер н як а ч и в   п р е дс а т в л е н н ы е   образ ц ы ,  п о ч ем у   б ы  н е  п р елдо о н и  уто л я т   ваш и   п еч али .zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA жи т ь  с о б свт ен н ы й  в а р и а н т  ди з ай н а ? (Н е  з ьадбту е  уп о , кодг а  бтед у е  п о с ы л а т ь   сво е  тв о р ен и е! ) м я н ту ь  о  к н и ге

Пу б л и а к ц

и

Вс е   н о в ы е   п о с т пу л е н и я   тщ а те л ь н о   о ц е н и в а ю тс я  п о н еск о ль к и м   п о к а з а те л я м , и з м е н я ю щ и м с я  о т  1 д о  37, а  з ает м  п р елдаг ю ст я  н а  су д  дреси р о в а н н ы  х  обез ь ян .. . А   м о ж ет ,  и  н ет . Н а  само м   едл ,  р е ш е н и е   би н арн о е  ли б о   п але ц  в в ер х , л и б о  в н и з  -  н е  с л о ж н е .

A List Apart www.alistapart.com Дав н

о  и з да ю щ и й с

я  ж ру н а

л   дл

я  в е б - ди з а й н е р о в

.

П роси

о  н е  вс е  п р и с л а н н ы е  р а б о т ы   п оп а о   воп ро с   с о тн о ш е н и я   к о л и ч е с вт и   к а ч е св т .  Д о с то й н ы м и   с ч и ат ю ст я   р а б о ты ,  соедр ж а о  о дтел а н н ы е   в и з ау л ь щ и е  н е с та н да р тн ы е  и  тщате л ь н ю   ет м у   и л и  соат в л ен н ы е н ы е  о б р а з ы , н а  и н те р с н у ю мором ,  и  в  к о т р ы х   п р и м е н я ю тс я   п ри н ц и п ы   п ра ви ль н о й   в е р с кт и   и  ти п о г р а ф и и .  Е ст ь  ещ е  и н ы е   фа к то р ы , к о т р ы е  тр дну о   вы раз и т ь  с л о в а м и . Лчу ш и й  с о в ет , к о т р ы й  м ы  м о ж е м  да ть , -  с р а в н и т е   св о ю   р а б о т я  в  о ф и ц и а л ь н о м  сп и ск е  и , есл и  он с  те м и , ч т о  имею тс н е  упсутае т  уж е  предсатв л ен н ы м   в ы с о к а ч е с вт н н ы образ ц ам , п р и с ы л а й те .

ад ю

Digital 

Web 

M agazine

www.digital- web.com

Обз ор м н ог

ы   кн и е   др г у о е

г  и  п р о г р а м .

м  дл

Web  Standards 

я  веб- ди з а й н ер а

Project 

, а  так ж

е

Buzz

www.webstandards.org/ buzz

П о с то я н н к а с ет

о   о бн о в ляем а я  с та н да р то

я   и н фо р м ац и в  Web.

я  о б

о  в сем

, ч т

о

О ц ен к в о д я тс н а б е р и ет с и з в ещ ен и

м   п о н я ть т  в  галер ю

, ч т ,  э т

а   и  до б а в л е н и е   н овы х   рабо т   в  галер ю   п рои з я   о т г ад ,  к о гд а   э т о  доу б н о   Дэй в у   Ши , п о э то м ь   те р п е н и я :  р а н о   и л и  п о з дн о   в ы   п о л чу и т е  о  то м , п р и н я т а  л и  в а ш а   р а б о та .

а  с у а м у е

рП е м д е т н ы Си м в о л

й а ук з т е л

ь

а нс а п о з е б я р  пт и л а ы zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA и не чю л кв и  рм е з а о т ме д и н е ч ю л пк е р то ф иш р и н е чи н а р го Jя и ц а мз и тPEGпо о л й фа и н е ж а рбо то и н е л е д ерпо ер еп к жре д оп к жре д оп и н е л в яоп тм со р п к тоб а р з а р т см о и т с м е в о с и т ы р к ос ы н ь л а и ц е пс к в о к ы тс и н а в о р и тс е т и н а в о р и тс е т ки н х е т а о н а во рис к фи тс о н ь л е т и в тс в у ч

т   33 # footer, эн м е л # intro, эн м е л т   279 #pageHeader, энм е л т   155,  280 #preamble, эн ме л т   29,  281 #quickSummary, эн м е л т   155 #supportingText, эн ме л т   263 ’, ко д  сл ом ви а   31    33 :first- child, пс а л к о д в ес с   238 :hover, со т к е л е р   226, 236 :last- child, пс а л к о д в ес с   238 , эн ме л т ине ч анз ан е  пы тс у х   35 щ иб о е и  сн е д е в я   25 и н е ж у р го п е  ди г ур х о  эт нм е л в   29 , эн м е л т к в о н а тс д о п а и н е  иж а рбо з й   37 ине ч анз ан е  ы т с у п х   35 , эн м е л т  в к  ртм ез а е   25

о н т ю л о с Аб

е и н па вори но ци зо и в тс й е д з о в а н о л к о гм н ы н а во ри но ци зо п е н и н е н лоп ер п кс и п

е  н а  ди г у р я  вк тс р е

е е т н эме л ы   121 а   93 й л  ре т и д о ь   271 и   126

е  пго н ч а р зо р т  шф и р

а   70 о  PNG-л ай ф а   136 а   187 я  се л и т й  дл я и н а мв о р и б ашс та я

в   192 я го н  эч и тс а л

о  днй а зи а   251 в   138 е  со ксип в  с  пщмьо ю  CSS 235 е тс о н ч и сф и ц е п и   220 а  HTML-к т ме з а р и  Zen Garden  32 а и кс е ч и  атм оа т в х  е л о п й   101 е го н а в но зи л тс е о  кт н е т но а   80, 292 р г ио н до хс о  HTML-т с к те а   28 а  да нй а зи , смгио тсм ве о о  с о  вм е с и   189, 278 ь  с  CSS 39 е  рм ка и   230 е т к е  эф ф ы   228 а и н е  иж арбо з й   258 е м ы е а пл ы с и р х  об а р т   32 е ц и тал б ы е сл и т й   291 го н  эч и тс а л о  днй а зи а   248 е и пн а вори н ци зо е   113 ь   к р  ртси г е у   27,  293

В тн аир аВ

ы  дн й а з и

а » (Трь л е д у )  146 е  п о л а к ви т р е мез а р р  и  ве с и н е  иж арбо з я   148 а  со л ыс к   270 о л с и ки  гф а р и   150 и кс р о т в А е  пв а р а а д и т н«Атла » (Дэси в )  54 и не чю л кв е  ск л ыс и  н а ц и  сн а р т у   109zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA и ф а р го н ки я   56 в т свор в о   48 и н а в о з ь л о пс и е  ли н й   57 ы н п у т с о щ д б ео е и н е иж а рбо з я   163 з и л м аи нм и м   55 тс о н - ч а р з офа р пь Ал ь   136 л о п я  и к т у  пмжо ре и   57 р е к Ан ы з и л ом ив с м   59 и ц а з и л тс я  со л ыс к   293 тс о н а в ос а л г ос ь  цо т е в в   58 ы н ь л а н фи е   196 и ф а р го пи т я   56 а н ь л м ао Ан я и змоар х ти р я   76 а д «Ба л а » (Лт рмеба )  78 т к а ф е т Ар ы   135 ине лв арп ан е  д я л г з в а   79 и н е ло до ерп е о к т на тс о д е в о н ч ти лб а й  вк тс р е и 81 ы в е л и тс е  эт н ме л ы  CSS  81 «Бе з  г!цин ар » (Ми кц жр ко )  152 рез у арБ ы ы н т р а д н а т с е н е   р е к р м а ы   157 MOSe и ы н ь л а и сц е п е т к е  эф ф ы  222 ы н е л г у р к с е  у л г ы и н е  и ж а р б о з й   155 Netscape Navigator  17, 29 ы н в а т с о е ы в  фо о н е и н е  и ж а р б о з я   154zyxwvutsrqponmlk илана з  XML-о т нм е у к о д в   45 «Ао ке Д тр

Фи л о с о и ф «Ба ле

й   CCS- ди з ай н

я  лиля в н аи ц г о ы и н о ч т сп р к а п р и нц п о р м е к ц и а нд

» (Крисент е   с ык л ь   108 ы   п ри о т е к в н а

а и с лц з а т вх о с тв и

)  104 и   107 «Ккилат я  йсе фре тин е   107 )  158   159 е  гесичк фра )  72

а   107

и  п о  веркс т й   б риз »  (Ш и р и с о вн а е  внурч ю и н с а од з е  и  пинеробт х   о б з ра в   161 » (Мруатк «В   ынелз х   о нт х а и в е д сн т о  сли т я   77 м о а нр т е ы   73 п р и м ен и е  крсныоат х   о ц вт е в   74 р ус е к т ы   74 «Врсеи я   о ди н » (Хорсх тиьл )  186 м з ар е р  шт фир а   187,  191 ын с о лж е   т пр о н е ц ы   190 «Всеан » (Ааил т )  66 евц т  и  э м оци и   67 ао в т е ц я   р ти л а п а   68 «Дв а  оенак » (Сми е )  174 ыв б о р  окне т а   и  корсант и   178 ш а сл о г и н е я   о  ша т фир х   177 «Жад ж а  кро ви »  (Ш и )  200 в о з нм с т о ж и  форминоавт я   201 ин а д з е   ор с т а н я  с  пом щ ь ю  тиспокграф х о т к фе эф в   201 п р и м и ен е  сеил т й   к  тсект у   202 п у р в е нл а и е   ма пк р оту е ж и   204 «Жиав я  изогр ьд » (М ире )  254 о и не д б в л а е   и р а н тк о к   257 ин а д з е   р г н иа ц   255 м но г л к а я   к р сев т а   255 ы рс т к е  згоал вк и   259 рминоав т фо е   с т ке а   258 «Жиыв м  ил и  ммыв тре » (Пи к )  194 ц и е к нар т о в ы й   сек т т   199 о и еп сч т к е  восипртя е   и  ти погрфа я   196 ш фи р т  dingbat  195 » (Гирне )  92 «Зинда й   вд о р до м т е ы  абсонгютл о   п о з и ц о н и р о в ан и я   93 м но г л к а я   к р сев т а   92 щ ю а в ил п е   м е этлн ы   94 «За то л я  сианрде »  (Бому ен )  208 ыб в о р  шт фир а   209 и н в а сж а л г е   о т ш фи р в   211 э с к п е р и м е нт ы  с о  шм а т фир и   209 «К   юг у  о т  грнаицы »  (Ш илдс )  266 о н б с а ют л е   п о з и ц о н и р о в ан и е с пи с к а  с с ыол к   267,  270 о и не д б в л а е   и е с ч к рг ф а х   з г ао л в к в   268 ил с т и  ссоыл к   271

«Борегв

я   ое й кн т р к   269 а  в  м о й  сда о  нодха е   м не

а   267

» (Лекуа )  240 к   240 ю  и  цквет а   244 е  фоновы х  иезнои б раж й   242 е   о к ен йт р о в   244 е   о п р вт м  фоновг о   е н и з о б р жа я   243 «Корп цаи я   ZenWorks» (Хнсае )  272 ы н м ор ь л а ф е н е   тр е ч ы   276 ы н ь л е т ир а ц о е   олп я  у  зогалвк в   273 м з ар щ е и н е е  с с ыол к   275 и с лц з а т я   и е нз о б р ж а я  лист а   бм у г а и   273 рм фи ены й  ло гит п   274 оывн фо е   и е нз о б р ж а я   274 » (Инм ан )  216 «Куркзны е   я о л п хь к п о де р ж а   са к д и р о в на и я   м ар е з у б и   217 ос л и   220 и н о сч п ет ц ф ь   218 «М нем онаик » (Ш и )  284 и е с ч к рг ф а е  с с ыкл и   288 е н и о б жт р а е   с пи к а  сослы к   в  рынза х  барез у ар х   288 о п в р ет н и е   и з ео н б р аж й   285 и н а с те о ч е   и к рг ф а и  с  зогалмвк и   286 ы н с ь л ц пи е а е  т к фе эф ы   287 «М хоан » (Сезрав )  116 б о на с ю т л е   п о з и ц о н и р о в ан и е   120 и н вр ы а с т е   м те к а а  в о рк у г  зогалвк а   116 д и з йа н  зогалвк а   119 д и з йа н  остабл и   е н то к а   119 но с ь е л т и е   п о з и ц о н и р о в ан и е   121 п о з и ц н р о в иа е  ка к  вон ьле тиз ары е   в с т д ер о   117 к с те а  как  имрнсут ен т  верск т и   118 » (Руби н )  122 «Н е   а т к  у ж   бендо м ре п а н я  дилн а   ео н т к а   123 п ер о нл и е   в  пющав л и х   а м е э тл н х   125 п е р о н ил е   пр и  аобнсютл м п о з и ц о н и р о в ан и и   126 «Нбе о  на д  б онс йа »  (Дэви дс о н )  228 п р о н за ч я  тне ь  з а  иенизоб ржа м   231 ре а н ч я   м ар к а  ворку г  кенто а   229 «Наноч я  поеаздк »  (Ш и )  84 в и л ц за у я   од к а   85 п р и м ен и е  абсногюлт о   п о з и ц о н и р о в ан и я   86 и н е л д з ар е  и форагт фо й   и  тсект а   85 о ю п л щ с ы ва х и с е я   ло п я   88 мр а фо т   PNG дл я   и зеонб раж й  в  про з нча й с т ао б л и   89 «Оо ырт к е  о кн о »  (Грнеи )  278 к в ре с т а  дл я   ызнра х   рз е о б у а в   280 к п о ед р ж а  брезуа а  Opera  283 и с у кв т е н и о бт р жа п о з и ц о н и р о в ан и п р о и т е к в на и п у р в еа л н и

р ме П д н ы е т

й  уазкетл

ь

п о з и ц о н и р о в ан и си л цз т а

е  эмелтн а   # intro 279 н ы т фш а н д л й  ам р о ф т  111 я   е нт о к а  и  с с ыол к  282 м н о г лк а я   92,  153 «Посд хнлу » (Дравс ) 60 о р г ан и з ц я  кенто а  105 но ь е л з р и т е   в о с п ир тя е   в с н р п а то а  63 к д а л от а  тбиал ц   е ил с т й  219 щю а д п и е  тен и  61 о н ь с ел т и е   п о з и ц о н и р о в ан и е  121 мр фо а  в  веб- идйзан е  62 м ре п а н я   инл д а   е нт о к а  123 «П- рет -а епорт » (М ейр ) 110 ющ а в л п и е   м е этлн ы   94, 124, 291 скирофи вна е   п о з и ц о н и р о в ан и е п о з и ц о н и р о в ан и е   ак  вно ьелызират е   с в р ед т о  117 п о и с кв а я  мр фо а  109 и  гноариьлз т я   к в ре с т а  113 и н п оч т р к ас ь  106 «Рида о  Zen» (ва н  де н  Хьле ойф ) 260 п р и нц п ы   105, 107 б о на с ю т л е   п о з и ц о н и р о в ан и е  261 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ик ф а р г м с а ш б и н р о ва т п о з и ц о н и р о в ан и п р о к ут со л

к тес

а  260 е   с ек т е  ко л но а  262 и  и  прис оедни

е   и к рг ф а и  262 «Ревоюлци!я » (Хс ингьле ) 140 п о н с ад в к т а   и з е он б р а ж й  141 п р и м ен и е  CSS дл я   ботар ы  с  гиок рфа й  140 п р и м ен и е  фонов й   и к рг ф а и  141 «Тн ап ьлю » (Ш епэ рд ) 234 ц м иа к о и д ф я   ни ю с щ а д п и х   м не ю  237 и н с а од з е  с  пмо щ ь ю  тибла ц   е ли с т й  235 «Уиеновд » (Кло с ) 222 CSS- р у т ан гси ы  224 м аз щ и н ав е  н фо а  226 лм е д о ь   п рм я н ы о г ь л у х   е с т а об л й  226 ро т к е л с ы  ао т убир т в  и и не лв а сстоп е  с оцз арбо м  224 «Уагпру я  лай к уж » (Гт фи фир ) 246 о г р ан и е ч я   э с и на ло ч г т о  дизйан а  251 м р еп о н е  усенич е  250 п о р в те н и е  фооныв х   и з е он б р а ж й  249 ын иэ с ч а л т й   д и з йа н т  фи фи Гр а  248 «Чт о  та м  в  гбулине » (Пи к ) 166 о н и с л ч р ае т ь   е л а те д й  168 м рх е т а н я   с н ец а  167 ур о в н и  170 «Эомтн оилгя » (Хиск ) 98 ы н ь л е т ир а ц о е   ло п я  102 и н а т е ч со е  зин а д я  пе ло й  с еин авин  арыв м  тст ке а  102 скировфи на я   и ачу ект я  вкрес т а  99 р иц е н т о в а е   100, 1 01 «Япо нс ик й   сд а » (Кавич ) 132 о и пм т и зц а я  137 п р о н з чса т ь  136 и та с ж е  и и гесч к рфа е  мрт а фо ы  133 к с рт еВ а  91 б о на с ю т л е   п о з и ц о н и р о в ан и е   93, 120, 261 и н е л ды в е   л о г и еч с к х   г р уп п  эмеол тн в  29 д и з йа н  згаол вк в   116,  119 л д я   ы н з ра х   рз е о б у а в  278

и   118,  153

и н а т е с оч с у о в е р ш в ео н с и а т скировфи на

а  263 к  263

е   ин а д з

я   е ол п е   до м т е

ы н я од В

я   и  ачуект и  196 е  206

е   з н ак В ы в нр и а

а н в а Гл о н ь л а о ри т з н Г ки ф а Гр

я  оиепсчтак

я   с т а об л е   п е р о н ил

й  с  винвеыар м   с т ке а  102 а   м о з аи к и   147, 152 я   99,  247

ь  196 е  126

а  131

ик с ро тв а

е  пв а р

д и з ай з на к и з бн о ч с ы т ы н тр а д н с е т о б щ п а н о у д ес т о г р ан и е ч о и пм т и зц а

д о х е р еп

ы  цо т ев

о п р е в н ит ю о щ р я п тв с е п о н ас д в к т п р и м ен и п р и с о ед н и п р о н за ч п р о нз ч а с т п р о ц ин а о ь л м з ар е из л а ер и та с ж е н ыл сг р у к

олс

а  164

н  и  басноюлт е   п о з и ц о н и р о в ан и я  160 ь   ва ы ек ч к  293 е   м ер к а ы  157 я  163 , нмеагол е   с о ке т я  137 е   бе

е  86

й  147

в  171 з  сыокт я   онв фо

в  250 е   и е з н о б р аж е  257 а   и з е он б р а ж й  141 е  фонов й   и к рг ф а и  141 е  к  проичувкеам ом у  тсект у  262 я  тне ь  231 ь  136 я   ш ир н а  250 р  и  ве с  148 м  дела те й  168 е  и  оипмт изца я  133 е  улг ы  155

и  150

с ни о а з д с о вн а т ур о в н

е  и  приобен т е  161 е  фоонв е   и е н з о б р жа е  154 и  170 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONML

амроф амроф амроф

т  GIF 134,  136 т  JPEG 135, 138 т  PNG 89, 135

и лоФ с ф

и з ай Д

я  CCS- йиазд

а см ше ин с о  селрнгыукм с он ш т е н и

н о бн с а ю т л и р ах

е   п о з и ц о н и р о в ан и

е   86

зр к г у а З

в   34 ь   35,  36 о д не с и е  иед и   59 в и с н де т о  сли т я   77 о н ь л е р из т е   во с и п р т я е  пвснрато а   63 и  цаов те я   от п е с л а   76 и з со н в а п ь л е   мо ра н т е в   73 и с з о п нв а ь л е   т есв а   59 в   136 и с з о н в па ь л е   п р о ны з ч а х   PNG- о лй фа ын с р а т о к е   тевц а   75 м ин з л а м   55 н а  ос нов е  со традн т в  9 и н е вл п р а е   д я л гзв а   79 п о б ны ч й   240 им е р п щ у в с е т а   CSS пр и  силтзца и  эмоелтн в   81 и н п е ор л д е  о к таосден в  тбаилноч й   в е р ск т и   81 п р и м и ен е  иензиоб ржа й  в  фомрт а е   PNG  89 п р и м ен и е  фонов й   и к г р фа и   141 п р и нц п ы  верск т и   105 п р и нц п ы  оргнаизц и  ийсе фре тн а   107 с во б н д е  пвснрато о   80 с е лн р и г у к е  кера в  в  мте к а е  н а  ос нов е  скет и   154 о с л п ин ы в а х е   е ол п й   88,  291 р у с ект а   74 мр фо а   62 руисетчк фу й   201 р и о н ц те в а е   100,  101 ын иэ с ч а л т й   248 э м о ци и  и  цев т   67 и р ох м Д з а и я   77

ы   и м з нр е я em  128 р х   128,  188 с о т н ь л е т а з бя о ь   з ан и к у ы н ь лое с и т е   и  аынбсютол

о г л а в Зк

я   л д я  ы в е л у н е е   188

х  зенича

, добенивла

е   268 о  лоигпт а   274 е   ло п я   273 я  с  проеч й  гиок раф й   171 е  сеил т й   к о  все м  эамелтн м   217 е   т ш фи р ы   176 и   п о  ис пзовьлнаи ю   197

е  с  тсоект

м з ра е с р а ш и рне

р  фалй

л е м ти н а З

в   210 и   154 м   179

а  и  проинзвсеьлдт ь   40 е  Web  Developer  244 ь   (инсрмут ен т  Photoshop)  160

И zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONML 'П Т —  Т Т П Т а В Г П ТI III  Г Т Т Г Т Г П Г ' Г Г П Г Г П Т Т Г Т

- Т Т Г

И ок н ы н ра о с И т я и ер л ь н т И

<   11  И "МР'Ч

1

"  I'll   I.IHI''I'HI  'ITIIHH'lit

и   107 е   яз ы к и   46 ж   177,  204

К е р Кн и ив ш а л К ы т а ч те л К о дК и р в к

г   177 и  дпоус т а   34 й  GIF  232 а  с им вол в е  язык а   и  ко ди р о в к е   н а  сйта е   ок д и р о в к

ин а д з и с з о п вн аь л ви с т е о о Кл н к ср а кн п о з и ц о н и р о в ан и е й нр о т К

ено т К

с р а о тн К ы н с ра т о К ар К

и   24 е  Zen Garden  47 и  тс тке а   и  дмуок тне

а   46

и я  срокт

а  и  опус т

ы   109 е   263

ы , универысьла й   о е к йн т р   25 ак  уп аок в а  дл я   срниаычт х   о м еэ л т н п р и с о ед н и е  порювятщ оегс я  иенизоб ржа т ош иб к а   Peekaboo  bug  292 он е с л п р д т ь   и лн д ы   123 ю а щ ор ж у ка я   а рне ч я   м ар к а   229 п о н ас д в к т а   142 п р ао с т я  и  уодбан я   о р г ан и з ц я   273 м з ра е р  дмуок ент а   198 б о ьр а   с  перпонил м   126 т   200 е   тевц а   75 я   168

в   255 я   226

Л ын т ш д Л а ф Л са и т

и и е с ч к рг ф а и н е о лв б д а и  оын ьле таирц р це г и а н т п р и м и ен и мр п е я н ы о р м ек ц и а нд

й   292

и   м яр а к а

ги б о к с т

ци н д Е

е  шо т фир

й   мр а фо

т   111 т  Photoshop)  160

к  (инсрмут ен

М

е   рм онегфи

М е р ы ка М с а ш и б н ро в т

, нын ртад се

е   157 е

и  эметлн с ек т

ш о и рт ф

ы   скирфи о вна г о   м з ар е а   44 а   44,  263zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQP в   187,  191

П р е д м е н ты м

и  ди зай м и н м и цз а

н и н а ов д е с л Н щю а д и с п Н и не вд р е з в ын с о н и аз д

и не л г р у к О л е т и л т е св О с о нвО

, о ш и б к ь  (инсрмут ен й  тсек

т е   ок л н о и   п о  оорм инелф

кдал т О

а   о дк

и   292 т   Photoshop)  160

п о з и ц о н и р о в ан и ор е мк е ц н а ди

к   263 ю   198

м з еа Р м ак Р

ош иб о а н ь л е р и тва п д

к   в  CSS- к тср е в я   пр о ве к

р  дмуок ент г  кенто

лд с ек т

е   219,  293 а  код а   291

е   с и е лй т е  эметлн и  перпонли р с а и чк т ш ир н

к о л ж Пд о н кв а с д Пт и  эмел н ом т е ом т е ом те ом те д д д д

о П з и ц о н и р в на и ак

к  вно ьелызират

ок л н о н е п о з и ц о н и р о в ан ы

, мо те д   192 ы   94 е   п о  влаиекрт и   127 а   124,  291 е   124

а   м тс е а   и  перпонли а   136 а   и з е он б р а ж т  span  37  FIR  142  Л еа/ Л э нгб р и дж  Левин а   144  Рл д н а а   144 е е   св р д е т к   263

ак

т  окдал т и   293 о  TRouBLe  292 м  с овм иесмт ос т и   100

оп м т к с е р ит нс к а с е к и чм С т н а к те С

и  меиавл ны сут х   м оэе л т н е  дл

я   м оэе л т н

и к в ре с т ги б о к с т м н о г кл а о г р ан и е ч

о   117 и   271

я о м в т аес и ч к л д я   ю щ а в лп и ни а д з ы н ь л е т р и ца о о с л п ю ы щ в а х и се

я   б от а р а   65 а  улг а   ос вещ ени я   62 ы   35 х   мэ е о л т н в   223,  237,  238 в   35,  222 х  эмоелтн в   223 я   м з ра к т е а   23

од е р ч н и

е   ел р о и д т х   б ло к в   120 е   121 е   113 х  иезнои б раж й   141

м е щ ю л и об ъ н о с ь ет л и ск и рфи о ван онвы фо

т се а н ь и л о п р ф но а св к у т

ро т к е л С

а   143

е   98 в   в  Internet  Explorer  94 в   в  кеойнтр е   268

е   102 я   88,  291

в

 имруснт е

ев С

й

я   мга о ент фр

а   269

и же Р

е ни ю л ч р к П щю а в и л П

а   229 а   и  ринелзда

я   с р а от н к

ив л п р а

П

а   198

а в о рк у

а

ло П

ь

а   291 ь н   55 я   HTML- мкз арте и   26zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA з аг р у к и   40 м и н м и цз а я   HTML- мзкарте и   25 в с н р ао т П о в  ти погрфа и   201 е   с и тл е ч с и к х   и в ар п л   217 он ь ел з р и т е   в о с п ир тя е   63 е   м не ю и в но т а е г е   65 е   234 п о зи втн е   65 е  сил т и  дл я  Internet  Explorer  238 с во б н д е   80,  204 е  с  пом щ ь ю  тбиал ц   е ил с т й   235 ноамрПт и/ляа ноерамйдт ила я   76 рнПаопти/я едйрнаотпи я   77 о с д мв е П ш и н е е   о т евц в   (dithering)  137

М и мн з л а

р оП в е к но с р ь т П е л и з в д

й   у к а з ет л

а   118 ь   119 я   в ер к с т я   н а  рмза ще ине

и та жС

а   154 е   и к г р фа

и   147

е бе

з  пре от и  гиесчк рфа и  рмза е с  пре от

р у т а н ги С м и з С ло в м е тс и С олС

и   о р м и ц нф а

и   134 е  мрт а фо ы   134 а   148 р  фалй й  иорм нфцаи и   134,  137 а   29,  224 м   59 ы  упрвелани я   о ент к м  (CMS)  123

и и к рг ф а п р и с о е ид н п у р в е нл а и

и   150 е  гик рфа е   п о рк д я

и   262 м  периыкт

я   221

и л Фо с ф

я   CCS- нй азид

а

е т к эфе ф ы   215 CSS- р у т а н гси ы   224 к р сев т а   287,  247 и  MOSe  222 са к д и р о в на и е   217 ы ли т к о н ф , сынзавя е   с о  синочсьптец ф ю   218 м не ю   235 ц и а к м ио ф д я   юи н щ с а д п и х   м не ю   237 м ер п о н е  уинесч е   250 п о р в те н и е  фооныв х  и зеониб раж й   249 пр и с н е о д е  фоовн й   и к фр га и  к  эметнл у   body  241 п р н ы о зч а е  б о к в и к и   231 ро т к е л с ы  о тбиур т а в   и  синелваопст е   с  ооцзбра м   224 ос л и   220 и пт ы  сортекл в   223 п у р в е нл а и е   ср е м в и я и   229 пи с С к и ени о б т рж а е   в  брез у а е   235 п о з и ц о н и р в на и е  с пис к а  с с ыол к   270 с  нымн традн сет и   м р ае к и   157 м оэе л т н в   24 к лс ы С и о бн с а ю т л е   п о з и ц о н и р о в ан и е  с пи с к а   270 в  силзтонва м  хво с тви к е   264 л д я   со р м п т а  исондхг о  HTML- ст ке т а   34 р це г и а н т я  с  гиок рфа й   171 н а  аирвх ы   о р тн и в а в   ди з й а н а   34 ы  прим рео в   29 н а  иыносдх е  фалй с о н а в тл г ь   109 с пи с о к  с  нымн традн сет и   м р ае к и   157 и цс л за т я   е р н о ка в   293 тр а д н а т С ы  Web и с з о п нв а ь л е   в  Zen Garden  39 о е ин б м д х о с т ь   15 и н е ол п р д е  9

с но ш т е ни е си р т о н в а рминоавт фо

ы н ь л аи ц е п С

р у с т ке Т

а в  ди зай н и  ронислчает и ирг а  стев щю а д п и п р о нз ы ч а

не Т

и м е этлн п р и м и ен ш в ер а с т уи

ы   22 е  сеил т й   217 е   122

с ке Т

т ц и ека н рт о в ы к р сев т ц р и е га н т и с з о н в па ь л о к р и ет о в к м с а ш б и н ро в т о с но в й у с то п р и м и ен

а  с  пщюав лим я  с  гиок рфа е а , роекм енцади п  о т  кера в е  сеил т

й   199 и   м э ае л т н и   94 й   171   м ар о к  дл я   инелздра я   269   п ер о н ли я   п о  горизлант и   125 е   44,  263 и  п о  оорм еинлф ю   198   ок л н к и   109 й   202

и   179 х   м з ар е

х   о т ш фи р

в   293

е   74 ь   и ез н о б р а ж

я   169

а   и  тен и   168 е   61 е   159,  231 е в  поредвы х   р а е з уб х   291 х  сеил т й   293 н а  вроынсет х   б и ца л т м е и сар п ы л х   б ор а т   32 я   173 в о з мн с то ж и  форм ионват я   201 ыв б о р  оенк т а   и  корсант и  шо т фир в   178 ыв б о р   т ш фи р а   209 и о в е н р д тк ы а е   с и м о вл ы   195 ин а д з е   ы н з ра х   о т ш ифр в   183 ин а д з е  э м оцнигьла о   ор с т а н я   201 о ип ет ч с о к е  вос пир тя е   196 кн и г и   211 ны с р а т о к е   т ш фи р ы   210 об щ и е  смев сйт а   о т ш фи р в   182 п р и м ен и е  сеил т й   к  тсект у   202 м з ар е р  шт фир а   187,  191 и нв а с ж а л г е   о т ш фи р в   211 ны с о л ж е   п р о т цн е ы   190 с но ш т е ни е  згаол вк в   и  тсект а   179 п у р в еа л н и е   ма пк р оту е ж и   204 т ш фи р ы  дл я  Web  181 э с к п ер и м ент ы  с о  шм а т фир и   209

и н ор а в с е т Т

и ф а р ио п г Т

Ф

ы zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCB GIF  134,  136 htc  239 JPEG  135 PNG  89,  135 и е с ч к гр ф а , си та ж е  и  рмза е р   148 о и пм т и зц а я   и з ео н б р аж й   133 м у ш ь не и е   м з ар е а   40 и р м Ф ены й  лоигт п   106,  274 о н ыв Ф е   еи н з о б р жа я ю ел н в ч и к е   в  дизйа н   141 п о р в те н и е   249,  257 п о н ас д в к т а   18 п о з и ц о н и р о в ан и е   141,  242 п р и с о ед н и е  к  эмелтн у   body  241 и п ор т ы  стй а а  Zen Garden  1J

лй а Ф ге Т

е  с  зогамлвк е   пр и  рызна е   258

П р е д м е тн ы с в но а т

е   154 е   о п р вт

п у р в еа л н и м ро Ф о р м Ф и н ва т

а  в  веб- идйзан

зиайныт фа мр фо

м   243 е   62

евц

е в  ти поргфа

и   201 е   с  пом щ ь

п у р в еа л н и

в о с Х ти к ло г и т и с лц з а т лец

ев Ц

и п   274 я   в  рызна ь  прим ени

ю  CSS  42

х  браезу я   108

тм не л Э

е   (fantasy)  183 а   175 т   177 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ы ыв б о р  с  уо етч м  с ем инкат и   23 и  тег и   22 м с а ш б и н р о ва т е   и  фиск и ро ван ы ы н р т а д се н т й   ок д   292 н о сь ел т и о   и  абсноюлт о   п о з и ц о н и р о в ан ы о с ту п й  script  29 о р т с ке л ы  доерчни х   223 о р т с ке л ы  с есритн к х   223 аз ук н и е  еидн ц  изм реин я х  знечаи й   292 л д я  нывелун п у р в еа л н и е   п о рк д я м  периыкт ы  ксадикро внаи я   217

х   283

а   178

е   з не ч а и я   о т евц в   70 ы Calligraphic 421  20 б з о в ыа е   182 бе з  зсеач к  (sans serif)  176,  183 л ге к ь   175 н со р а т к ь   176 ны с р а т о к е   р у а гн и т ы   210 ру с к и в н ы е   (cursive)  183 м с а ш б и н р о ав т е   187,  191 м о н ш и р ны е  (monospace)  9,  183 ие б о л а н е   ср а п о н е ы т е  п о мро па ф т а л ол кн а н   176 с а ынщ о нс е т ь   175 об щ и е  смев сйт а   182 по рч а   171 и нв а с ж а л г е   209 с  змаскеч и  (serif)  183 и н а с те о ч е   210 е с и рт о в н а е   рп и  рзныа х   м з ар е х   293

т к фе ф Э

й   м з ра е

р   44 е   121

я   221

А у   154

A List Apart, сйа acronym, эмел н

т   294 т   30

В background- attachment, с во йс т background- position, с войс т blockquote, эмел н т   22 Bobby  43 body, эмел н т   279 Box Model Hack  192,  281

Ш ы н Ш ри е ч т ац д н с е т т Ш фи р

ь   El»

э

т в  CSS  70 в  ти по грфа и   201 ыб в о р  оенкт а   и  корсант и  шт фир р сн о а т к ь   74 о с б ен о с т и   в о с пи р т я я   68 ч а д ер п а   е ид и   67 п р и м и ен е  в  сяил т х   218 п р о с вие ч на е  с вко з ь  фонову ю   ари к т н с и м в о ил е с ч к е  им не а   70 с а ол н г в т ь   58 ыов т е ц е   р ти л а п ы   69 т ш фи р а   177 я  сотпел а   76 е   100

а во т е в Ц р и о н в т еа Ц

й  у к а з а т е л

м   181

о   241,  242,  262 о   241,  242

Calligraphic  421, шфир т   20 class, аирбу т т   26 Clear Type, минза хе м  сивна жлг я   о т ш ир ф в   188,  189 CMS (смеист а  упрваелни я   о ек н т м )  123 Colorblind Web  Page Filter  76 ComplexspiraL  едм онсрцаит ы й  сйа т   59 Creative Commons ил ц е н з я   48,  50 с о в м но е с т е  исзопвниаьл е  тво речс ик х   б о ар т   163 ы  сиейлт ) zyxwvutsrqponmlkjihgfedcbaZ CSS (ксаднык е  тбицла Box  Model Hack  192,  281 е юнли ч в к е   и з е он б р а ж й   141 и н я лв е   н а   HTML- кмз атре у   22 ин а д з е  сил т я  т ш фи р а   203 п е р он с и м о с т ь   41 и с о кт и   16 . ы ли т к о н ф , снызвая е   с о  синочсьптец ф ю   218

и лоФ с ф а н о л ко гм н и н е ж а рбо то до х доп и н е ло до ерп ы н ь л а нои цроп рп тм с о р п и то тор п м ы е у д н м ео к е р в тс й о вс р о т к е л ес р у т а н г ис ы н е л г у р кс т см ои т с м е в о с и н а д з ос н е п е тс и н а в о р и тс е т пи т евц тс о н ь л е т и в тс в у ч к л а г р ша п

я  CCS- йнаизд

а

я  вк тс р е

а   92, 153,  255 в  в р е з у  а р б е  235 ы  к т о рб а е  с о ки ф га р й  140 е о к т а  нтс о д е в о н ч ти лб а й  к тс р е в и  81 е  рр м е з а ы то  шф и р в  188 р г о н ид о хс о  кд о а  9 п о в  цт е в й р  пт и л а ы  69 е  ст й а ы  п о - вб е н й а з и д у  294 а н фо а  241 ы  223 ы  29 е и н е  иж а рбо з я  154 ь  с м ы н з а р и м а р е з бу а р и  39 е  мн е ю  235 ь л о  кр т н о я  42 е  в ы в о д е  пр е х а р бе з у а р х  291 ы тс й о  ур тс в  40 т  70 ь   к р тс ри г е у   27,  293 а  291

Н

е  со ксип

Digital Web Magazine, жуа н р л  294 Dingbats, св тс йм е о ы н й и з а т н  фа х  то ф иш р в  195 DOCTYPE (ти п а т м дн еу к о ) в к ртм ез а е  ст й а а  Zen Garden 28 и жер м тсм ои  стсм ев о и  и и н е ч ю л к е пр е  DOCTYPE 100 ин аз к у е  в л а ч на е т мн еу  дк о а  24 DrupaU см е т с и а и н е л в  уа р п я о т н е т но к м  123

em, ец и н д и н а в о з ь л о пс и и н е в а рс

а и  ин е рм з

я

е  дл я и н а в о р и б машс та е  с  р х  128

я  што ф и р

в  191

htc- л й фа ы  239 HTML ы н д о хс и й  тс к е т  ст й а а  Zen Garden 28 т о тс о р п а и н а во  из ь ло пс я  15 к тм ез а р а  в- б ие н а р тс ц  23 тс о н а в ос а л г ос ь  п о р тс и  г е р у  бк у в с м а ц и л б та и  се л и т й   27,  293 HTML-к т ме з а р а т уби р т а ы  class и  id 26 о н ь л а узив е в  ртс до в к у о  п о р у т к у р тс е  35 и н яи лв е  ти лб а ц  се л и т й  22 й а зи д н  с о т е ч у м  гсто кби и  35 тс о н п у тс о д ь  и р у т к у р тс а   34,  42 ин ад аз е к в зо л г а а т дмн еу ко а  25 ин ад аз е  як ы з а  и кво кри д и  24 и н а в о з ь л о пс и е  DOCTYPE в л а ч на е т нм еу дк о а  24 и ц а мз и н я  26 и н е н м ие р п е щ ия д по х д о х о эт нм е л в  25 тм со р п р  9 к тс и чс а р а  мт с е а  з а щм юи а в  па л и м а т к  ое ъ б и  124 к и т н м ае с а  и и н е л в а тс д пе р е  23 ы н чо т й  кло р т но ь  з а  се ч т  CSS 42 zyxwvutsrqponmlkjihgfedcbaZY

I Illustrator  209 inherit, зи н е ч а н е  св тс й о в iso- 8859- l, кк вори до

JPEG,  и кс е ч и ф а р г щ еб о е  ои н ас и п и ц а м зи т п о

а  202 а  47

й ма р о ф т е  135 я  138

letter- spacing, св тс йо в о  205 И , н ме л э т  33 line- height, св тс й о в о   42, 204,  258 link, эн м е л т  80 е  св о л о  292 LVHFA, мо кс е ч и мн ео LZW, мо т е д и т  са ж я  134

Firefox, бе з у а р р   217,  288 font, те г  122 font- size- adjust, св тс й о в о  185 font- style, св тс йо в о  176 font- variant, св тс й о в о  202 font- weight, св тс й о в о   175,  176 Freehand, пм а р г о р а  208

М Macintosh

GIF, г и кс е ч и ф а р ы та ч тел к щ еб о и ц а м зи т п о тс о н ч а р з о р п

й ма р  фо й ы н ч а р зо р пп у ло е  ои н ас и п

т й  уоз

е  134 я и н е  иж арбо з ь  136

р  232

й  137

и  Internet Explorer 10 роб а н ы  што ф и р в  дл я  Web 181 и н а в и ж а л гс е  што ф и р в  в  Mac OS X 188 Mambo, см е т с и а и н е л в уа р п я о  т н е т но к м  123 max- width, св тс й о в о  251

Пр е д м н е ы т

й  указ ет л

ь

zyxwvutsrqpo

Microsoft Internet Explorer htc- л й фа ы   239 ин ад аз е ы  рн в р е з е х  се л и т й   238 о т ме д и н е ч ю л пк е р я  се л и т й л д я и н а в  мо р и б а шс та я  што ф и р в   192 и ц а к и ф и мд о я щ юи  на д а пс и х  мн е ю   237 и н е ж а рб о т о е  со скип в  с  пщ мьо ю и л тб а ц  се л и т й   236 и в тс т ус т о е к  пжр е д о и  дл я  св тс й о в а  max- width  251 к жре д оп а го н а вори фис к о и н е  пи д еоси р я и н е ж а рб о з и я   260 л о п я  дл я щ ию  па в а л х  о т нм е лэ в   94 и шн е а л г о с я  о б и  ин а в о нм е и  вис р е й   10 в  89 и т ы р к ос е  PNG-о л ай ф к фе ф э т и пн е л в я о я го н а во зи л тс е н о т  кн е т н о а   292 Microsoft Windows роб а н ы  што ф и р в  дл я  Web  181 MIME, тп и ы   45 min- height, св тс йо в о   292 min- width, св тс й о в о   292 Mozilla  И З , 280

OPAL, п у р г а   224 overflow, св тс йо в о   126

padding, зи н е ч а н е   291 Peekaboo, ошк б и а   292 Photoshop й а зи д н о в цт е в й р  пт и л а ы   68 тоб а р а  с о м та  шф и р и   208 и н а в ос и р е  ву н ч у р ю   158 и н а д з ос е ы н  пч а р зо р х  те н й   159 к в о н а тс у а г о н  гь л а б о л о  ул г а  ои щн е вс я   62 ы н ч и р е т а ц д а н т шс е е  и н е ч а н з я  цо т е в в   70 PNG, г и кс е ч и ф а р й ма р фо т тс о н - ч а р з фа о р пь л а ь   136, 139 и н е л в або д е  о н ч а р зо п й  тн е и   231 и н е ж а рб о з и я   89 щ бе о е  ои н аси п е   135 и ц а м зи т п о я ки  гф а р и   139 х р , ец и н д а  ии н е рм з я   128

QuickTime VR, пм а р г о р

а   167

script, эн ме л т   80 SelectORacle, пм а р г о р span, эн м е л т   25

а   36

text- align, св тс йо в о   101, 206 text- decoration, св тс йо в о   203 text- transform, св тс йо в о   203 TRouBLe, мо кс е ч имнео е  св о л о   292 U UTF- 8, кк вори до

а   47

V VRML (Virtual Reality  Modeling Language)  167 W

W3C (World Wide Web Consortium)  15 и ц а д мн о е к е р и  п о тсо н п  ду тсо и  в-бт ен т но к р о т к е л ес ы   36 Web Developer, ри н ешср иа е л д я  Mozilla  82 кз ур г аз а   244 тм со р п р и ц м ар о  иф н и  о я  сл и т х   244 Web Standards Project  14, 16 Web Standards Project Buzz, сй а т   294 Web3D Consortium  166 word- spacing, св тс й о в о   206

- х т ос ы в а   184 XHTML и  тп и ы  MIME  45 и шн е а л г о с я  9 т н ме лэ ы   25

z- index, ау б и р т

т   221

а   42

Дэй в  Ш и  Е . Хыолш д ал

М ол

Ф и л о с фи

р  

й   р е да к то

Ди з ай

Т и н ае р

 О.   .А

В е р с тк

а   в а он б К

 В.   В.

Г р афи к

а   х и о ан Ш

  .А   Г.

н   обложк

и   в к е ас р Х я

И з да те л ь с тв

 И.   .А

о   «Н Т   П р е с » ,  129085,  М о с к в а й   б- р , д . 21, с т р .  1.

З в е з дн ы И з а нд и

а

р zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDC   и кн л С   .А   .А

й   р е да к то

О тв е тс тв е н н ы

е  ощ су влнет

о   пр О

о  п р

г

я  CSS- ид з ай н Н а уч н ы

И з да н

и

220013,  М и н с к

м   и ч ас т у

и

о   ACT»

О   «И елзьавтсд

и  уч а сит и  О О   «Харв» ес т Р Б , 220013,  М и н с к , ул Р е с п бул и к а н с к о «И з адетл ь свт

и  тнех и ч еско

,

. Ли ц е н з и .  К луь м а н е   ну и т а р н о о   «Бел о рсу к и , п р . Н е з а в и с и м о с ти

я  № , д .  1, к о р п

 02330/ 0056935 о т  30.04.04. . 3, э т . 4, к . 42.

е   п р е д п р и я ти й   Д о м   п е ч а ит »

е . ,  79.

е н и р П ло ж

е

а д и т н а л Ат

, с . 58

ыве ж н ар О

е  тно

а   ои н в к а р

а д и т н а л Ат

р ти л а П е а чю л к в

т  цов тев

й  кс ар тон

т

ов л г а З ме т

, н о  ем

к   в  оин д у  не а сто д е

х  лиш

ь   с ин т  коснт ар тон

х  тано

х  ш ь лоб и

е  се ув ст ев то

т

, с . 68 и  69

а  цо т е в т  кне т о

в  дйнаиз

а  «Ва нс е и  зонгел

а д и т н а л Ат

и н е чи л е Ув м я л а те д

ы  сю адзо

» , нм ае

к  н а  гбоул

й  и  бы л е

й  це в

т

и н а д зо С

е  цов тев

й  пр ти л а

ы   в  Photoshop

, с . 75 и  76

е  коснт ар тон и

и  пиодвр

т  к  тилк онфк

у   с  дигрму

и

«В  ыне л з

х  х ано т

»  рп

и  нон ч т а со де

й  коснт ар тон

и

C

ым не р в о д О

й  с ар тно к н а  гацин р

х   ы о сн в

т   и од в р п

т   к  ииюзл

х  цо т ев

а д и т н а л Ат

и  мин ацре

я

ид О

в

н а  жео тл

o

n

t

r

a

н  и  то т  ж е  це в т  кс те жа м  фон е  и  бе ло

s

я  бе ло е  жеы тл

t

е  оыве жнар м   н а  ксонар

м м

, с . 77 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA 7  e n

i  у zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA I f И м  ifoad  to  SnlfffftN 1 4 4 Ш ШМ 4  * *r i л   & M u t >  « ^ 

i S 

'

e l 

hm

Z

e

n

G a r d e n G a r d e n zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

&1 

trae iU

fl  lay  i k  p ^ t   n b i 

- **" 

a n d  h roVvii  L i a 

A ifeiwnstralraii  (/ ifltar 

iiiiviir*  s  dark  ami duxicy  f*J  Uy the  р а

я   relici  at  brm*a*c-

and briber.  CS* supptirt.

в рд и п

T"IB  f init Eruitnn bf

;nd  "f  p «i  prjrti^es  Vvnh

« a t ;  H e n r y

v

fyHb  te  t- K lircie^ eifurti uf

id  t h a n k i t o t h e t i r e l o i s e f t .

iBlli lite ihe Wlfit Ґfa№

M H WI i l  tiV  $ШМ .

m n jo t  ln ( , K i e t  CPSBtors.  and the

srw*t fwm  the list ta load tt

11« at  Zen Owdan invite* vt j  t n  r e t e  a n d  m i l i t a t e  a imporuni tiiwm ct th* mmten H egin  ti?  se e  wi t h  clarity.

tnta ihis page.

Dutuniooif rftfi sample

t a  u w  t h e  (^^t  to  Ь Й 4

" ™ * ^  

HtmtfiteimdmMjtki

. 

1

)  tinii .-

«H i r e d 

1 fi?tJT i i';;'i - - 1 il"  [J'li1  '.- I'Tit  'li'   ''Г

:

г

i n  Wn

™

  a n d  • • ;>..• •.  ..;: .i^ ir.ri  • ni^in   ^ ii  beftin ,  view

a n y  d n e  wiB   I U H I  th

to  « I  (he  (jm  №

о н в о н Ос

й й  да з и

н   Zen  Garden, ы н щ е у п о р п

",г   bciiii  dfiil  iTt^iiitiit*  О П   t h e

 t»5  tirat- h •

ЫРП

С

omeuf t. Hie

Э1[Я ь ray

Р а«к1э

 Ягв Ч я

Я

eas«si t»  »в«г -ы и

 

И   O lc  J- 'i.  I  .if^ik'L'i  ,.;r;,.  • .  ;'... iU   . ^  T'L'i*  ЛTi d  C

, ищ ию у р и тм и

й и п о н а т о р п

,.s^l

w

1 »а д *

я   Of  IM IIU IJ.

ri^r  IT tkii  lr i3jv  b e .  ijiiЈЈ  the  reins

i,. • - ! '.'.L-  [,.  ^..- ^.IU 1  b*^atity  IVofu stri+ctL re. T a  d a l e ,  rniftt  B s a t n p k *  or  n e s t

  T

'  • • ••   '•   •   •   • •*   !  •   •   - •  • ' "  '  • '• • •  i-- - " iue  Ves,  r**i%.

 Ш

S «i E i  l o ^ M l h e b i i R 

I.'  I'- 1  U i^!"j  e n ^ U ' i j  IJ'^

Tiitr>?  ^  t l^ u r iv  л   niifcd  f o r C

ntUta. Ihe Zen Gwden itnu Й  a s d i e ,  (П й р1Гй the *tinin 8 dertgo* hi the 1U.  CiickifH s  «p 

techniques 

тИ

the ami

ю   а(св е л

) и и п о н а р е  дт й е

. I ' ' ­ ' ' ­ ' ­ . .

ю   а (св а р п

)

и кс н о п Я

й дас

, с . 134 и

135 zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

beauty  ess CSS Zen Garden*zyxwvutsrqponmlkjihgfedcbaZ

beauty  ess CSS Zen Carder и н е ж арбо з И лй а ф

е н е н а ср х о о  в т ма р о ф н  8,6 К б  

а е в ра

7

beaut)  

о  в т ма р о ф

е  GIF с  4 цм и а т е в

b e a u t y

и н е ж арбо з И

S 

Z

е н е н а ср х о

(

  C

и н е ж арбо з И в т с е ч ка

S

S

е н е н  са р х о а  30, рме з а

n 

, рме з а

и н е ж арбо з И л ай ф

е н е н  са р х о н  5,0 К б

а е в ра

о  в т ма р о ф

е  GIF с  32 цми а т е в

C a r d e

G a r d e

e

р л ай  ф

о  в т ма р фо а е в ра

t v a u t y 

ess

е н е н а ср х о

е н е н а ср х о

n 

а е  рв а

н  2,1 К б

е  JPEG со т н е и ц фи  кфэ о н  3,7 К б

а  70, рме з а

r

р л ай  ф

C

м

и н е ж арбо з И в т с е ч ка

S

а е  рв а

н  8,3 К б

b e a u t y 

e s s

S 

G a r d e

Z

e

е н е н  са р х о а  10, рме з а

р л ай  ф

о  в т ма р  фо а е  рв а

а е  рв а

н  16,2 К б

n 

е  JPEG со т н е и ц фи  коф э н  2,5 К б

G a r d e n * о  в т ма р о ф

е  PNG с о н и б гу л

й  цт е в

а  24 бт и

, рме з а

й  цт е в

а  8 би т  и  64 цм и а т е в

й  цт е в

а  8 би т  и  4 цм и а т е в

р л ай  ф

e ss G a r d e n !

о  в т ма р о ф

е  PNG с о н и б гу л

, рме з а

р л ай  ф

а е  рв а

н  5,3 К б

b e a u t ) 7  CH S C S S  Z e n  е н е н а ср х о

р

r

м в т с  кае ч

S 

Z

р л ай  ф

е  JPEG со т н е и ц фи  кофэ

e s s

C S S  Z e n  

и н е ж арбо з И

, ме з а р

e s szyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

b e a u t y 

b e a u t y 

и н е ж арбо з И

e

о  в т ма р  фо

C S S  Z e n  и н е ж арбо з И

р  

G a r d e n *

е н е н а ср х о

C

, рме з а

ess

C S S  Z e n  и н е ж арбо з И

е  GIF с  256 цм и а т е в

G a r d e r » о  в т ма р о ф

е  PNG с о н и б гу л

, рме з а

р л ай  ф

а е  рв а

н  2,2 К б

r

м

и с к но п Я

й  сд а

, с . 136zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

О   the  RoadfzyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA   e> Enlightenment ы н ч а р з о Пр

й  GIF, кы р о т о

й  бы

л е л в о т по г д о

н  дл я  бг о л е

о а  фон

с т е а , ож а р б о т

я  н а о бл е

ы н ч а р з о Пр

й  GIF, кы р о т о

й  бы

л е л в о т по г д о

н  дл я  бг о л е

о а  фон

с т е а , ож а р б о т

я  н а о н- ое л  сет з е в

м н  фо

ын ч арзор П

й  GIF, кы р о т о

й  бы

л е л в о  пт о г д о

н  дл я  бг о л е

о а  фон

с т е а , ож а р б о т

я  н а о - н  теме л е з

м н  фо

ов гер Б

си Р

й  бирз

. 6 •   ан до схИ

я   ос н т х р е в п

м н  фо

е

е

е

, с . 161

ь  лист

а

лД

я   и ц м а ти

и  пиол рож

к   и  трустке

ы  дне лв бао

ы   не т

и   и  ине л дыв

я

Дв

а  оан е к

т он р а с К т

, с . 179zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA

ь ш тр и ф

а в з а го л в к

е «Дув

х е о к а вн

»

fl demonstration of  uihof can be accomplished usually through CSS-bo Select any style sheet from the list to load it into this page.

е в н ры с И

е е вт ц

д ж Жа

а в т е ск

, р а с пол е ж н

а  крови

с ло П

е р а з м в и ны

м

я с т а и ов н

ы р а з но г

о е вт ц

е з а го л в к

а

, с . 202

я о н ид в

, т ч о у о лб к

"3JEStt

р и Пм е р

ни ж

а ш тр и ф

а

в т е ск

а ы ар н з

е о т е нк

и

а г у р Уп

я  ла йк жу

и н е ж об азр И

я  твыра и  тме-он оне л з

рП

и  пинеро тв

е   лд

, с . 250

, корымт я   онв а л г

и   н ди в

ы   ыск т

и   с м ти о й   с т а б ло

я   «Уа г урп и  т н е о к

я  л» ай к ж у

и

Н а  оонд

й  см ще он

и в с т е в т со е н

ы н ь л е т а ч но к О

й   ив

д   к ип л т

и

: яо- кр онелз

е  дл

я   ос нвг

о  фоан

,  овен ичр к

е   лд

я   о бв к

й  колнк

и

а

е   о тевц

реп Т

ь   ыск т

и  гдзора

й   к ит л п е   н ид в в   н а  са кы т

о  ме н

е   м а нз т е

о  

В т а рт ь л уз е ш о в   с ш а р т е к ив з

х  

ы

е   и н о ра вл к

я   п р и м ю ща ы к и я

х   е ст а лб о

й

а мк и е н М о

, с . 285

Вс

е я и н е ж а ир б о з

Ви

ы н а в о, из ь л о п с

д ц и н а ср т

ы  пл с о

е  в  «Ме к и н мо е н

е и н е  пн ме и р

яы  нчальн а

»

х й е сл и т

, зщ ию а д а

х  цт е в

а  со л ы с

к  и т  шф и р

ы

css Zen Garden  CSS Design The Beauty of zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA A demonstratoi n of H&at can be sccornputsiahyle through CSS-based desgi n See l ct any style sheet from the list t o bed il into Ms page. Downkseo the sampel   aria The Road to Enlightenment б  lay  the past  relics Ы   brows^- specWc  tags, mpstbi !e DOMs. and broken CSS support Today we must dear the mrw i f of past practci es Web engilhtenment has beer*, ache i ved thanks to  the lifeless efforts of foki  like the W 3C WaSP snd the maojr browser creators

Ulieo ng a  oafk  are)