www.romver.ru
/ /



( )

O4en' 4asto, narisovav stranicu, na4inau6ie dizayneri na etom ostanavlivautsa i s4itaut rabotu zakon4ennoy. Eto, kone4no, tak, no tol'ko v tom slu4ae, esli zakazana odna stranica. Esli sdelan zakaz na dizayn vsego sayta, to nujno vsegda pomnit' o tom, 4to na stranicax mojet bit' soderjimoe lubogo roda, na4inaa ot 6esti urovney zagolovkov zakan4ivaa vrezkami i pla6kami.
V etom slu4ae, osobo stoit udelit' vnimanie ne tol'ko elementam su6estvuu6im v HTML po-umol4aniu, no i dopolnitel'nim elementam neobxodimim dla veb-mastera (togo samogo kotoriy budet razme6at' soderjimoe na stranicu).

Dopustim, 4to uje podobrani osnovnie cveta sayta, stilizacia grafi4eskix elementov. Teper' nujno razobrat'sa s tekstom.

0. Osnovnoy tekst.

Elementi kontenta na stranice doljni imet' ediniy stil' oformlenia, 4tobi stranica bila adekvatno vosprinimaema i legko 4itabel'na. Eto kasaetsa v osnovnom 6rifta i cvetov, no i otstupi ne isklu4enie. Razmer 6rifta doljen bit' dostato4no bol'6oy, a esli trebuetsa ispol'zovat' malen'kiy 6rift, to obazatel'no stoit predusmotret' vozmojnost' izmenenia ego razmera, naprimer, ispol'zovanie em vmesto px dla ukazania razmera 6rifta v vrstke (IE6 ne umeet izmenat' razmer 6rifta esli on ukazan v pikselax, ostal'nie brauzeri s etim spravlautsa).

Est' mnenie, 4to rubleniy 6rift (bez zase4ek) bolee 4itaem s ekrana, 4em 6rift bez zase4ek (ne govora uje o dekorativnix 6riftax). Sogla6us', s nekotorimi ogovorkami. Esli 6rift melkiy, to stoit ispol'zovat' 6rift bez zase4ek:

WindowsMac OSUnix/Linux
Arial
Arial Black
Impact
Lucida Sans Unicode
MS Sans Serif
Tahoma
Trebuchet MS
Verdana
Charcoal
Gadget
Geneva
Helvetica
Lucida Grande
Bitstream Vera Sans
Lucida
Luxi Sans
URW Gothic L

Esli 6rift bol'6oy (naprimer, zagolovok), to mojno ispol'zovat' 6rift s zase4kami, kotoriy budet vigladet' gorazdo iza6nee.

WindowsMac OSUnix/Linux
Times New Roman
Georgia
Palatino Linotype
Sylfaen
Bookman Old Style
Book Antiqua
Garamond
Times
Palatino
Gill Sans
Lucida Bright
Baskerville
Century Schoolbook L
URW Bookman L
URW Palladio L
Nimbus Roman No9 L
Bitstream Vera Serif
Utopia

Vs, kone4no, zavisit ot stila dizayna sayta. K slovu, rekomenduu po4itat' sleduu6ie stat'i: Kak vibrat' 6rift dla Web-sayta i Kak vibrat' 6rift dla Web-sayta 2: serif i monotype.

1. Zagolovki

Su6estvuut 6 urovney zagolovkov, kotorimi ne stoit prenebregat', ved' o4en' 4asto elektronniy dokument (v dannom slu4ae veb-sayt) mojet bit' mnogourovnevim i vse urovni zagolovkov mogut bit' vostrebovani. Xota ispol'zovanie vsego spektra zagolovkov mojet privesti k tomu, 4to pol'zovatel' zaputaetsa v urovnax. Poetomu trx urovney zagolovkov v tekste budet dostato4no. Zagolovki samix verxnix urovney lu46e ostavit' dla formatirovania zagolovo4nix nadpisey dla razli4nix blokov i zagolovka sayta i stranici.

Rekomenduu dla zagolovkov samix verxnix urovney ispol'zovat' bol'6ogo razmera 6rift i dostato4no kontrastniy cvet. Spuskaas' po urovnu zagolovkov postepenno snijayte ix arkost' priblijaas' k cvetu osnovnogo teksta. Delaetsa eto dla togo, 4tobi melkie zagolovki bili bolee 4itaemi. Naprimer, esli zelniy cvet odin iz osnovnix cvetov na sayte, to rekomenduu v grafi4eskom redaktore izobrazit' gradient, gde s odnoy storoni budet raspolagat'sa va6 zelniy cvet, a s drugoy storoni cvet osnovnogo teksta.

Delo v tom, 4to 4em ar4e i svetlee cvet teksta, tem on men'6e kontrastiruet so svetlim fonom. Dla zagolovkov verxnego urovna arkost' 6rifta, a stalo bit' ego nizkaa cvetovaa kontrastnost' kompensiruetsa ix razmerom i kontrastom formi. Po mere umen'6enia razmera, umen'6aetsa kontrast formi, a stalo bit' umen'6aetsa udobo4itaemost', poetomu sleduet eto kompensirovat' kontrastom cveta, t. e. cvet zagolovkov delat' bolee tmnim.

Primer, otli4no illustriruet, skazannoe.

Esli stil' sayta podrazumevaet ispol'zovanie neskol'kix cvetov, to mojno ix vzat', raspolojit' v poradke arkosti i primenit' dla zagolovkov. No ne stoit perebar6ivat'. Raznie ottenki odnogo cveta dopustimi. No esli vi budete ispol'zovat' dla vsex 6esti zagolovkov raznie po spektru cveta, to soderjimoe budet sli6kom pstro oformleno i eto budet me6at'. Posledniy 6estoy zagolovok, avlaetsa zagolovkom samogo nizkogo urovna i, v principe, mojet daje ne otli4at'sa ot osnovnogo teksta ni cvetom, ni razmerom. Mojno prosto sdelat' ego jirnim.

2. Razmeri

Razmeri zagolovkov i tekstovix blokov doljni bit' rass4itani tak, 4tobi, vo-pervix, zagolovki raznogo urovna bili legko otli4imi, t. e. razli4ia doljni bit' na stol'ko kontrastni na skol'ko eto vozmojno v opredelnnom diapazone. No sli6kom bol'6oy kontrast razmera porodit razob6nnost' elementov etogo sleduet izbegat'.

Razmer samix blokov teksta zavisit ot razmera 6rifta. Kak pravilo naibolee udoben dla 4tenia blok teksta 6irinoy v 65 simvolov, poetomu dla bol'6ix ob&mov teksta ne podxodit rezinovaa vrstka. Visota abzaca, jelatel'no, ne doljna previ6at' 7 strok.

3. Otstupi

Koli4estvo pustogo mesta pramo proporcional'no 4itabel'nosti eto uje dostato4no izvestnoe pravilo. Vremena km.ru pro6li (xota sey4as dizayn slegka ulu46en), sey4as naibolee aktualen dizayn v tak nazivaemom stile Web 2.0, kotoriy, esli ne brat' vo vnimanie zakruglnnie ugli, glanec, otrajenia a tol'ko formatirovanie teksta, po suti predstavlaet soboy nagladniy primer togo, kak doljen vigladet' udobniy dla 4tenia sayt.

Po4emu ran'6e bili sayti poxojie na zvuki.ru? Vs o4en' prosto. Veb-dizayn unasledoval kompaktnuu vrstku ot gazet i jurnalov, gde kajdaa stranica imela opredelnnuu i ves'ma nemalen'kuu cenu. I sey4as v gazetax starautsa na odnu stranicu zapixnut' kak mojno bol'6e. Po na4alu v veb-dizayne postupali to4no tak je.

Primeri peregrujennix saytov.

No postepenno, do dizaynerov stalo doxodit', 4to prostranstvo na veb-sayte ne ograni4ena, a stalo bit' mojno delat' bol'6e otstupov. Bol'6e otstupov glazam bol'6e mesta dla otdixa. Steni teksta i obilie mnogokolon4atix tekstovix blokov razdrajaut glaza.

Standartnaa vrstka 90x 36 kolonok s nebol'6imi otstupami i 4tkimi razdelitel'nimi liniami ili fonami.

Sovremennaa vrstka 13 kolonki s bol'6imi otstupami i ne vsegda s o4evidnimi deleniami. O4en' 4asto razdelenie blokov realizuetsa za s4t bol'6ix otstupov i/ili slabix granic i fonov.

Otstupi mejdu tekstovimi blokami doljni bit' sorazmerni razmeram tekstovix blokov (ne o4en' tavtologi4no polu4ilos'?). T.e. tak, 4tobi rasstoanie mejdu tekstovimi blokami ne otrivalo ix drug ot druga po smislu.

Primeri ne peregrujennix saytov

Visota stroki doljna bit' ne sli6kom bol'6oy, 4tobi ne sputat' e s razdeleniem abzaca i ne sli6kom malen'koy, 4tobi tekst ne perestal bit' ne4itabel'nim. Rekomenduu proporciu ot 3×2 do 5×3. Naprimer, esli razmer 6rifta raven 12px, to visotu stroki mojno stavit' 1820 px.

Ran'6e, v pe4ati, abzaci otdelali krasnimi strokami. V pe4ati eto dopustimo, poskol'ku s bumagi 4itat' gorazdo leg4e, 4em s ekrana. V elektronnix dokumentax dla razdelenia abzacev ispol'zuut otstupi mejdu samimi abzacami. Otstupi daut vozmojnost' legko otli4it', gde zakan4ivaetsa abzac, ne tol'ko v na4ale stroki no i v e konce.

Rasstoanie mejdu abzacami sleduet stavit' v diapazone ot visoti 6rifta do visoti stroki. Rasstoanie doljno 4tko ukazivat' na razdelenie abzacev, no ne doljno sovsem razorvat' ix vzaimosvaz'.

Rasstoanie ot zagolovka i do na4ala tekstovogo bloka doljno bit' ravno rasstoaniu mejdu abzacami, a rasstoanie ot konca tekstovogo bloka do sleduu6ego zagolovka doljno bit' primerno v dva raza bol'6e, 4em rasstoanie ot zagolovka do na4ala tekstovogo bloka. Eto delaetsa dla togo, 4tobi obozna4it' prinadlejnost' teksta k opredelnnomu zagolovku. Su6estvuu6ie nastroyki po-umol4aniu vo vsex brauzerax nepriemlimi, poskol'ku oni podrazumevaut ravnie rasstoania ot zagolovka do drugogo soderjimogo sverxu i snizu.

4. Tablici

Osnovnie svoystva tablic kotorie ne pomogaut a tol'ko me6aut vosprinimat' informaciu: vertikal'noe viravnivanie i ujasnie ramki. Vo-pervix vertikal'noe viravnivanie doljno bit' sootvetstvuu6im soderjimomu, soderjimoe obi4nix a4eek dolno imet' viravnivanie po verxu, soderjimoe zagolovo4nix a4eek po centru. Pri4m, esli v gorizontal'nix zagolovo4nix a4eykax dopustimo centrirovannoe gorizontal'noe viravnivanie, to v vertikal'nix zagolovo4nix a4eykax net.

Ramku tablici mojno sozdat' dvuma sposobami:

  1. Ispol'zovat' svoystvo border i border-collapse: collapse dla tablici.
  2. Ispol'zovat' razniy fon dla tablici i a4eek tablici, pri etom border-collapse: separate, a rasstoanie mejdu a4eykami zadatsa s pomo6'u border-spacing.

Otstupi u ot granici a4eyki do e soderjimogo doljni bit' ne men'6e polovini visoti stroki abzaca. A tekst v zagolovo4nix a4eykax vsegda doljen otli4at'sa libo jirnost'u, libo razmerom 6rifta.

V ideale, kajdaa ne4tnaa stroka tablici doljna otli4at'sa fonom ot 4tnoy stroki. Realizaciu nujno soglasovivat' s programmistom.

Ne stoit tak je zabivat' i pro zagolovok samoy tablici (teg <caption>). Kstati, ramka u caption vo vtorom variante tablici (s pomo6'u background) vigladit lu46e.

Primer, vrstki upomanutix v stat'e elementov. www.seleckis.lv/wp-content/uploads/2008/02/markupr1.html

Prodoljenie sleduet seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi

3
  ,
:
. +7(98I) 7608865

e-mail
icq 415547094  romver  mail.ru  romverinbox.ru
1997 - 2022 romver.ru

Display Pagerank