Zde máme sloupce, které pokrývají několik řad na obou stranách, s řádky a rámečky střed. Můžete si jej také představit jako typické rozvržení se 3 sloupci; ale pro náš příklad používáme pouze 15 sloupců. Samozřejmě to můžete snadno rozšířit na 24 sloupců.

Klíčem k vytváření rozvržení, jako je tato v 960.gs, je:

1. Pamatujte, že 960.gs umožňuje rozložení pomocí plovoucích divů doleva.
2. Vytvořte své vnořené divy z těchto počátečních plovoucích div-. To znamená, že budete mít plovoucí divy v plovoucích divech.

Zde je jeden způsob, jak přistupovat k našemu rozložení: nejprve je seskupte do tří sloupců a přiřaďte jim odpovídající grid_xx třídy:

Dále přiřaďte další grid_xx třídy pro vnořené divy (všimněte si, že pro pravý sloupec nemáme žádné vnořené div):

Protože máme alespoň dvě úrovně grid_xx uvnitř tříd vnořených divs, musíme také přidat alfa a omega třídy vhodně:

Vnořené prvky div uvnitř levého sloupce se dotýkají obou okrajů svého rodičovského prvku div, takže musíme přidat obě alfa a omega. Totéž platí pro divs s mřížka_8 třídy ve střední části. Ale každý mřížka_4 div na vrcholu jen musí mít alfa nebo omega, protože se dotýká pouze levého nebo pravého okraje svého nadřazeného prvku div.

Jak jste možná usoudili z tohoto jednoduchého příkladu, můžete vnořit divy s grid_xx třídy tak hluboké, jak chcete (pokud to váš návrh vyžaduje), pokud je správně označíte a přidělíte jim správné třídy 960.gs, aby byly správně plovoucí a jakékoli přebytečné okraje byly zrušeny.

A když už mluvíme o plovoucích, poslední skupina tříd 960.gs, i když není jedinečná pro 960.gs, to vše umožňuje – vymaže plovoucí objekty, které se automaticky vytvoří, když přiřadíte grid_xx třída.

Vyrovnání pole: Jasné třídy

Dříve jsme si toho všimli v označení – každý div, který dostal a grid_xx class, který byl zároveň posledním divem v řadě, následoval prázdný div s třídou jasný.

Jasným důvodem pro to je, že potřebujeme vyčistit plovoucí divy, protože jakmile je vyplavíme, už nezabírají místo, což způsobuje, že prvky pod nimi jsou „vytaženy“, což nakonec vede k rozbitému rozvržení.

Jak jsme viděli v ukázce, řešením tohoto potenciálního problému je umístit další nesémantický div s třídou jasný, který dělá následující:

Clear ( clear: both; display: block; overflow: skrytý; viditelnost: skrytý; šířka: 0; výška: 0; )

Výše uvedený kód je v zásadě vlastním řešením problému Nathana Smithe, jak je uvedeno na jeho blogu. Mnoho webových designérů s ním nemá žádné problémy, pravděpodobně kromě standardistů, kteří by se mohli při myšlence na použití dalších Sémantické divy v označení pro problém se stylizací.

Naštěstí, Nathan Smith také zahrnoval clearfixřešení v CSS 960.gs, poprvé diskutováno na PositionIsEverything.net . Odstraňuje další div, protože jej můžete umístit vedle grid_xx třídy a dosáhnout stejného efektu:

To je stejný příklad označení výše s odstraněnými nadbytečnými divy a clearfix přidána třída. To vůle udělejte to samé, takže můžete zvolit tento způsob čištění, pokud se vám to líbí. Tady je na to CSS:

Clearfix:after ( clear: both; content: ""; display: block; font-size: 0; line-height: 0; viditelnost: skrytý; width: 0; height: 0; ) /* Následující pravidlo zoom:1 je speciálně pro IE6 + IE7. Pokud je problém s neplatným CSS, přejděte do samostatné šablony stylů. */ * html .clearfix, *:first-child+html .clearfix (zoom: 1; )

Kód se může trochu lišit od toho, na co jste zvyklí. Je to proto, že jej Nathan Smith založil na blogu Jeffa Stara, který údajně aktualizuje původní hack clearfix, aby se odstranil kód určený pro prohlížeč, který je nyní zaniklý (tj. IE pro macs) a vylepšuje jej pro novější (tj. IE6 a IE7).

Závěr

Pouze pomocí 24sloupcové ukázky 960.gs (a v některých případech i samotné stránky 960.gs) jsem vám ukázal, jak každá z jejích tříd funguje a jak je můžete použít při převodu svých návrhů založených na 960 na HTML a CSS.

Každá sekce v ukázce poskytuje lekce, které je třeba se naučit, a jakmile uvidíte, co třídy dělají s vaším značením prozkoumáním CSS, záhada 960.gs zmizí a vy lépe pochopíte, co se děje v zákulisí. Můžete dokonce najít nové způsoby použití tříd, protože nyní víte, co dělají.

Použití vašich nově nabytých znalostí se stane snadným, protože jakmile nastavíte své sloupce pomocí 960.gs, budete muset pouze přiřadit id k divům (jak to situace vyžaduje) jako háčky pro další úpravu výplní divů nebo velikosti jejího textu uvnitř.

Další lekce o webdesignu. Zde vám ukážeme, jak vytvořit rozvržení webových stránek pomocí systému 960 Grid. Uvidíte, jak tyto techniky rozvržení činí proces správného umístění jasným a transparentním. Navíc po dokončení tuto lekci získáte stylový, elegantní vzhled pro váš web.

1 krok

Začněte vytvořením nového dokumentu ve Photoshopu o šířce 1680px a výšce 1100px, poté vyplňte pozadí slabě šedou barvou #F9F9F9 .

2 Krok

Na internetu je k dispozici velké množství mřížek rozložení a také návodů, jak je vytvořit. Účelem této lekce je dostat vás do rychlosti, pokud jste se s takovými mřížkami ještě nikdy nesetkali. S jejich pomocí může proces rozložení výrazně urychlit a vést k vysoce kvalitním prototypovým šablonám stránek. Stáhněte si značku 960 Grid System. Po stažení z odkazu soubor rozbalte a otevřete tuto složku. Načtěte „960 12 sloupcovou mřížku“ do Photoshopu.

Nyní potřebujeme přenést mřížku do našeho dokumentu. Vyberte skupinu „12 col Grid“, sloučte ji do jedné vrstvy a poté ji přeneste do hlavního dokumentu. Výška mřížky bude trochu méně dokumentu, takže jej musíte natáhnout svisle tak, aby se jeho konce dotýkaly horního a spodního okraje dokumentu.

Nyní ještě zbývá vytvořit provázkový základ. Tato mřížka nám pomůže správně umístit vertikální odsazení mezi prvky a ovládat proklad v textu, mezi odstavci a logickými bloky. Nejprve vytvořte další soubor v Velikosti Photoshopu 24?24px, odstraňte v něm pozadí a nakreslete jednu 1px čáru podél úplně posledního pravítka pracovní plochy. Musíme ji uložit jako šablonu (Úpravy > Definovat vzor) a dát jí nějaký charakteristický název.

Zbývá označit pracovní oblast třemi vodítky. Vytvoření nového svislého vodítka: Zobrazit > Nové vodítko, vyberte možnost Vertikální a nastavte jeho polohu na 360 pixelů. Stejným způsobem vytvořte další dva vodítka v 840px a 1320px. Vybrali jsme tedy oblast 960px mezi značkami 360px a 1320px a nakreslili jednoho vodítka přesně doprostřed dokumentu.

Pokud pracujete přímo ze souboru se systémem 960 Grid System, jsou v něm již nakonfigurováni pohodlní průvodci. Stačí přejít na Zobrazit > Zobrazit > Vodítka.

3 Krok

Nyní, když máme připravenou šablonu značek, můžeme začít navrhovat strukturu webu. Design stránky bude rozdělen do 5 bloků: Záhlaví, Popisek, Levý blok, Obsah - Pravý, Zápatí.

4 Krok

První věc, kterou uděláme, je záhlaví, protože se budeme pohybovat shora dolů. Vezměte nástroj Rectangular Marquee Tool a použijte jej k výběru oblasti po celé šířce dokumentu úplně nahoře s výškou 120 pixelů (po zapnutí viditelnosti vašeho vodorovného označení je výpočet výšky 120 pixelů více než snadný – je to pouze 5 řádků po 24 pixelech). Vyplňte záhlaví tmavě šedou barvou (#2C2C2C). Záhlaví bude obsahovat logo webu a navigační nabídku.

5 Krok

Nyní umístěte své logo do levého horního rohu stránky a zarovnejte jej s druhým sloupcem (což je odsazení 40 pixelů). Pro logo jsem použil jednoduchý dvoudílný nápis ve fontu Century Gothic a 50pt. První část nápisu má světle modrý nádech (#ADC7D9), druhá je tučná a bílá (#FFFFFF). Dále jsem přidal do loga vnitřní stín(styl vnitřního stínu); snížila Opacity stylu na 25 % a nastavila následující parametry: Vzdálenost - 2px, Sytič - 0%, Velikost - 5px.

6 Krok

Zde vytvoříme navigační menu. Aby byla stránka čistá a organizovaná, použijeme textové odkazy v nabídce. Vyberte 18pt písmo Arial a vytvořte štítky odkazů. Vyplňte aktivní tlačítko bílou (#FFFFFF) a zbytek světle šedou (#BBBBBB). Zarovnejte je svisle a umístěte je do prostředního pruhu hlavičky.

7 Krok

Tento blok jsem nazval popiskem, protože vše, k čemu je potřeba, je předat uživateli informace o stránce. Opakujte stejný postup jako u záhlaví (výběr pomocí nástroje Obdélníkový výběr), tentokrát však s výškou rámečku 240 pixelů a vyplňte výběr stejnou světle modrou (#ADC7D9) jako část loga. K této vrstvě musíme přidat jemný přechod, takže poklepáním na něj vyvolejte panel Styl vrstvy a vyberte styl Překrytí přechodem. Vyberte přechod, který přechází do průhledné barvy, změňte režim prolnutí stylu na Překrýt a snižte jeho neprůhlednost na 30 %.

8 Krok

Vzhledem k tomu, že jsme naši společnost pojmenovali „Modrá mřížka“, zobrazíme na pozadí popisku sotva znatelné buňky. K tomu používáme stejnou techniku, jakou jsme použili při vytváření vodorovných čar. Nejprve vytvořte nový dokument o rozměrech 25 x 25 pixelů. Poté odstraňte jeho pozadí, aby bylo průhledné, a namalujte jeden spodní řádek pixelů o tloušťce 1 pixel a totéž na jednu ze stran. Uložte tento soubor jako šablonu (Upravit > Definovat vzor).

9 Krok

Vytvořte novou vrstvu nad vrstvou odkazu a vyplňte ji šablonou, kterou jste právě vytvořili (Úpravy > Výplň).

Otočte tuto vrstvu o 15 stupňů, dejte jí Barevné překrytí bílé a umístěte ji nad panel s popisem.

Nastavte režim prolnutí vrstvy na Měkké světlo. Dále vyberte panel odkazu buď pomocí nástroje Obdélníkový výběr nebo stisknutím Ctrl + Klikněte na vrstvu s ním. Poté, v režimu nástroje obdélníkového ohraničení, klikněte pravým tlačítkem na vybranou oblast, vyberte Inverzní a stiskněte Delete. Nyní jsme odstranili nepotřebnou část sítě, která přesahuje panel popisků.

Dalším krokem je zviditelnit mřížku pouze po šířce pracovního prostoru v 960px. Zapněte vodítka, pokud je máte skrytá (Zobrazit > Zobrazit > Vodítka), pak přidejte masku do síťové vrstvy.

Přepněte do režimu masky kliknutím na odpovídající tlačítko v dolní části palety Vrstvy, poté vyberte nástroj Přechod (G) a definujte přechod od průhledné po černou. Pomocí přechodu a masky odstraníme části sítě, které přesahují středovou oblast 960px.

Ujistěte se, že je styl přechodu vybrán jako lineární. Začněte natahovat přechod mírným pohybem od okraje centrálního pracovního prostoru odkazu směrem k vodítkům, které jej omezují, dokud se přímo nedotknete okraje. Totéž opakujte na druhou stranu.

10 Krok

Umístíme text na náš popisek. Vezměte písmo Arial, velikost 45 bodů (#2C2C2C) a napište nějaký slogan se zvýrazněním smysluplná slova tučně. Pod něj umístěte textový úvod menším písmem (17pt) a celý přesuňte na levá strana popisovací panely.

11 Krok

Nyní připravíme plochu pro slideshow. Vyberte nástroj Obdélníkový výběr a proveďte výběr mezi vodítkem zcela vpravo a uprostřed. Výška vybrané oblasti by měla být 8 pravítek vodorovně, nahoře a dole ponechte jedno prázdné pravítko. Vyplňte tento obdélník tmavě šedou barvou (#2C2C2C).

Přidání stínu na pozadí vaší prezentace: Dvojitým kliknutím vyvolejte panel Styl vrstvy, vyberte Vržený stín, změňte barvu na #2C2C2C, nastavte Vzdálenost na 1px a Velikost na 10px.

Dále jako snímek musíte umístit snímek obrazovky nějakého webu na pozadí - na tom nezáleží. Udělal jsem snímek obrazovky prvního blogu, na který jsem narazil, upravil jsem jeho velikost přesně na velikost našeho tmavě šedého pozadí a poté přidal 10px výplně (Vybrat > Upravit > Smlouva 10px, poté výběr převrátil a jeho obsah smazal stisknutím Delete) .

12 Krok

Chcete-li začít pracovat s hlavní částí, musíte také přidat světlý přechod na pozadí. Pomocí nástroje Obdélníkový výběr vyberte celou oblast pod odkazem, poté vyberte nástroj Přechod (G) s barvou #F0F0F0 pro průhlednost a přetáhněte přechod dolů. Nechoďte příliš daleko – pozadí by mělo slábnout na #F9F9F9 směrem ke spodní části stránky.

13 Krok

Přidejte úvodní odstavec na levou stranu bloku těla. Písmo - Arial, velikost - 18 bodů, barva #9C9C9C a barva odkazu je #A3BBCC a podtrhněte jej.

14 Krok

Doplňme seznam služeb. Nejprve navrhněte záhlaví: Arial, 25pt, tučné, barva #262626. Vytvořte seznam prvků o velikosti 18 bodů, písmo Arial #9C9C9C. Doplňte položky seznamu buď pomocí Eliptický markýz Nástroj nebo pomocí alternativních kódů (Alt + 7) se světle modrou barvou písma (#A4BCCD) a zarovnáním mřížky.

Stejným způsobem přidejte všechny potřebné informace.

15 Krok

Zobrazí se pravý blok hlavní sekce nejnovější zprávy. Nejprve přidejte nadpis ve stejném stylu jako předchozí (Arial, 25pt, tučné, barva #262626) a zarovnejte jej do sekce poskytované služby. Nyní vytvořte titulek pro jednu z novinek v písmu Arial, 18pt, #A4BDCD, a napište samotný obsah ve velikosti 16pt a barvě #9C9C9C. Napište tímto způsobem 3 zprávy a poté pod ně umístěte odkaz na zpravodajský kanál písmem Arial s podtržením, 16pt písmem a barvou #A4BDCD.

16 Krok

Náš poslední blok bude sklep, ve kterém bude formulář pro zadání přihlašovacího jména a hesla, kontakty a několik odkazů. Vyberte spodní část dokumentu pomocí nástroje Rectangular Marquee Tool a vyplňte ji tmavě šedou (#262626).

Nyní musíme přidat formulář pro zadání přihlašovacího jména a hesla. Nejprve v Arial Bold, 20pt, bílý font, vytvořte odpovídající nápis na levé straně zápatí. Poté pomocí nástroje Obdélníkový výběr vytvořte dva obdélníky, které budou sloužit jako vstupní pole. Označte pole pomocí 16pt písma Arial a barvy #9C9C9C.

Opakujte totéž pro tlačítko Odeslat, pouze tentokrát použijte nástroj Zaoblený obdélník (U). Dále k těmto prvkům přidejte Vnitřní stín, snižte Krytí tohoto efektu na 30 %, nastavte Rozpětí na 0 a Vzdálenost na 10px. Přidejte odkaz pro obnovení ztracené heslo(Arial, 13pt, podtržený styl, barva #A4BDCD ).

17 Krok

Dokončíme rozložení přidáním bloku kontaktu do zápatí: pojmenujte jej písmem Arial 20pt, tučně bílým (#FFFFFF) a zarovnejte jej s nadpisem přihlašovacího formuláře. Poté přidejte kontaktní informace v jednoduchém 16pt Arialu, také v bílé barvě.

18 Krok

Zkontrolujte vyvážení a vyrovnání. Pomocí vodítek a pravítka zkontrolujte, zda je vše na svém místě a zda je vše vyvážené. Pokud ne, opravte to.

Krok 19

Doufám, že vám tento tutoriál poskytl dobrou podporu při učení se o gridových systémech a také při vytváření vlastních, jedinečných od ostatních. úhledné rozložení místo. Důrazně doporučuji používat takové mřížky v budoucnu, dokud se to nestane zvykem. Postupem času vám tento přístup výrazně zjednoduší práci.

Sdílejte lekci

Právní informace

Přeloženo ze stránky www.tutorial9.net, autor překladu je uveden na začátku lekce.

Framework (z anglického framework - frame)

Možná jste již slyšeli o CSS Frameworkech, jako je Blueprint, Grid System 960, Elastic a tak dále. Objevují se i názory, že mohou být dobrým výchozím bodem pro rozvoj vlastní práce a výrazně zkrátit dobu rozvržení šablon pro webové stránky. Ale je tomu skutečně tak? V tomto článku se podíváme na to, jak používat CSS Frameworky na příkladu jednoho z nejpopulárnějších CSS frameworků MřížkaSystém 960.

A tak je CSS Frameworks nástroj, který poskytuje webdesignérovi (vývojáři) jasnou architekturu založenou na poměrně přesných psaných pravidlech, která umožňují rozvržení designových šablon pro webové stránky, aniž by začínali od nuly.

ACotakovýCSS Frameworks - Grid System 960.

MřížkaSystém 960- je skupina stylů, které poskytují společný kontejner umístěný na mřížce. Struktura zpřístupňuje dva sloupce: první je tvořen 12 sloupci a druhý 16 sloupci. V obou mřížkách zůstává šířka společného kontejneru vždy 960px.

Proč zvolit velikost 960px?

Všechny moderní monitory v současnosti podporují minimální rozlišení 1024x768 pixelů. Číslo 960 je dělitelné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. To poskytuje mnohem flexibilnější kombinace, pokud jde o rozměry reproduktorů, které lze provést.

Na obrázcích níže můžete vidět příklady dvou stránek, které byly vytvořeny pomocí dvou různých mřížek, první s 12 sloupci a druhá se 16.

Jak používat framework Grid System 960.

Nejprve si samozřejmě musíte stáhnout archiv CSS frameworku Grid System 960 a rozbalit jej, vzít odtud složku css a přesunout ji tam, kde budou umístěny všechny soubory šablon. Nyní spusťte svůj oblíbený editor (doporučuji Adobe Dreamweaver) a vytvořte dokument index.html. Připojme všechny potřebné soubory k dokumentu index.html rámec.

Vložte mezi štítky hlavy

Budeme také tvořit samostatné css soubor „style.css“, který bude obsahovat naše vlastní pravidla stylu, uložíme jej do složky path, to proto, abychom neprováděli změny v souborech css rámec.

Propojme „style.css“

= "stylesheet" type="text/css" media="all" href="css/style.css" />

Jak vybrat nádobu/síťku k použití.

Nyní musíme vybrat typ mřížky, kterou chceme použít, 12-sloupcové (.Container_12) nebo 16-sloupcové (.Container_16). Víme, že obě mřížky mají rozměr 960px, jediný rozdíl je v tom, že 12 sloupců dělí rozměr 12, respektive 16 16.

Třída, která vybírá typ mřížky, vypadá takto:

Nebo

Jak nastavit velikost sloupce?

Když chceme náš kontejner rozdělit do více sloupců, můžeme k tomu jednoduše použít třídu. Grid_XX, kde „XX“ představuje počet sloupců (mřížky vybrané jako kontejner). Ze kterého se sestaví sloupec, který chceme získat.

Pokud například chceme mít dva sloupce (postranní menu a obsah), stačí to zadat takto:

hlavní obsah

postranní menu

Třída "grid_7" určuje, že postranní panel nabídky by měl mít velikost rovnou 7 sloupcům vybrané mřížky.

Jak vidíte, součet prvního sloupce (grid_7) s druhým sloupcem (grid_5) je přesně 12, což je celkový počet sloupců, které tvoří mřížku kontejneru, který jsme vybrali (container_12). Tímto způsobem nepotřebujeme znát šířku, kterou by měl mít každý jednotlivý sloupec, což usnadňuje změnu velikosti našich sloupců při vývoji rozvržení.

Podívejme se na další příklad, musíme náš hlavní kontejner rozdělit na tři stejně velké sloupce, není třeba provádět žádné výpočty, abychom určili požadovanou velikost v pixelech, kterou by měl mít každý sloupec. Vše, co musíte udělat, je použít trochu matematiky, abyste získali následující:

sekce 1

sekce 2

oddíl 3

Jak vidíte, součet těchto tří sloupců grid_4 je přesně 12 (4 + 4 + 4).

Mezery mezi sloupci.

Předdefinovaná nastavení sloupců mají mezi sebou specifickou výplň Každá třída grid_XX má 10px. odsazení vpravo i vlevo. Pokud chceme odstranit například odsazení z prvního a posledního sloupce našeho rozložení, musíme přidat třídu "alfa” tím se odstraní odsazení od levého okraje a "omega" pro toho pravého.

Zde je příklad:

sekce 1

sekce 2

oddíl 3

V příkladu jsme to udělali tak, že první sloupec nebude mít odsazení vlevo a poslední vpravo.

V případě, že chceme ponechat jedno nebo více prázdných míst před a za sloupcem.

Chcete-li ponechat jedno nebo více prázdných míst před nebo za sloupcem, musíte použít třídy „prefix_XX“ nebo „suffix_XX“, na místě XX musíte uvést počet sloupců, které chcete nechat prázdné.

Podívejme se na příklad:

...

...

V tomto příkladu jsme to nastavili před sloupec mřížka_7 bude prázdné místo rovné jednomu sloupci a také za sloupcem mřížka_3 bude jeden prázdný sloupec.

Nezapomeňte, že součet všech sloupců, včetně prázdných, by se měl rovnat 12 (grid_7 + grid_3 + prefix_1 + suffix_1) nebo 16, pokud jste vybrali příslušnou mřížku.

Závěry

Jak jste si pravděpodobně všimli, CSS framework umožňuje výrazně ušetřit čas v procesu rozvržení webových stránek. Je zřejmé, že nikdo nezakazuje personalizaci platformy podle vašich skutečných potřeb, protože tato řešení nemohou být nikdy univerzální, zejména pokud jde o rozvržení vašich děl. Proto vám radím, abyste se tam nezastavovali snadné použití rámec, ale jděte dále a experimentujte.

Chci podat komplexní popis nádherného rámce modulární mřížky 960gs. Nedávno se někde v komentářích psalo, že 960gs je obtížnější pochopit než modrotisk, což mě překvapilo. Nechci tyto frameworky srovnávat, už jen proto, že fungují v různých váhových kategoriích, nicméně pro stavbu modulární mřížky jsem neviděl nic jednoduššího a srozumitelnějšího než 960g.

Zdá se, že psali o modulárních mřížkách na Habré, ale hledání nás nějak zklamalo, najdou se nejrůznější odpadky, jako „Filosofická geometrie“. Zde je několik odkazů z hlavy:

Vzhledem k tomu, že jsem sám programátor, doufám, že mi ostřílení designéři layoutů a designéři odpustí nějaké chyby, pokud k nim náhle dole v textu dojde. Na pastie.org jsem odstranil veškerý kód, za prvé Habr neumožňuje vložit celý článek kvůli velkému množství tagů při zvýraznění kódu a za druhé kód zbytečně nenafoukne článek.

960gs získal svůj název podle rozhodnutí autora Nathana Smithe, který má mít výchozí plnou šířku kontejneru 960 pixelů. 960 px však vůbec není železné omezení.

Všechny prvky 960gs jsou popsány jako třídy pro css. Je zřejmé, že by měly být použity jako<тег class=«960gs_someclass»>.
V tomto článku použiji rámcový kód z oficiálního webu 960.gs/css/960.css. Pro přečtení a pochopení článku není vůbec nutné se na tento kód dívat na konci příběhu, podrobněji se pozastavím nad způsoby získání kódu CSS;
V příkladech použiji divy jako značkovací prvky a pro usnadnění budu takové divy nazývat názvem jejich třídy 960gs. Například nazvu prvek div s class.container_12 kontejnerovým prvkem. Doufám, že tato malá svoboda najde pochopení v očích guru layoutu.
Také při popisu parametrů prvků frameworku popíšu pouze parametry původního CSS kódu. Návrhář rozvržení je samozřejmě může podle potřeby změnit nebo přidat nové vlastnosti.
Při překladu dostal prvek mřížky název „cell“, což je poněkud vzdálené doslovnému „grid“, ale nezní to tak ošklivě a je mnohem blíže svému skutečnému účelu. Porovnejte: "umístit tři mřížky na jeden řádek" a "vložit tři buňky na jeden řádek".
Doufám, že drsné hrany jsou za námi, takže přejdu přímo k tématu tohoto článku.

Kontejner

Kontejner– kořenový prvek značky 960gs, který specifikuje parametry pro modulární mřížku. „Kořenový prvek“ znamená, že na vytváření modulární mřížky se budou podílet pouze prvky rámce, které jsou jeho potomky, „nastavení parametrů“ znamená, že všechny prvky rámce, které jsou uvnitř kontejneru, se jednotně řídí jeho parametry.
Kontejner s 12 sloupci může vypadat takto:

Kontejner specifikuje následující parametry pro modulární mřížku:

Vše ostatní je ponecháno na vůli projektanta.
Jedna stránka může obsahovat libovolný počet kontejnerů, a to jak se stejnými parametry, tak s různými parametry (je zřejmé, že návrhář musí mít velmi dobré důvody pro použití několika různých modulárních mřížek na jedné stránce).

Je vhodné použít několik kontejnerů, například k rozdělení stránky na oblasti záhlaví/obsahu/zápatí.

Vnořené kontejnery v rámci ideologie 960 g jsou absurdní (představte si vnořené v html), nicméně manipulací s odsazením v CSS je možné vnořovat kontejnery do sebe. Ale proč?

V budoucnu budu používat kontejner s parametry:

• Šířka sloupce: 60px
• Počet sloupců: 12
• Šířka drážky: 20px
• Šířka kontejneru = (60*12) + (20*11) + (20/2*2) = 960 pixelů

Příklad kódu kontejneru:

Ve fázi vývoje je vhodné použít jako pozadí kontejneru obrázek mřížky, který si můžete pořídit například na oficiálních stránkách (o tom bude napsáno o něco později). Pravda, pouze pro standardní rozvržení 12 a 16 sloupců.
div.container_12 ( pozadí: #fff url("/img/12_col.gif") repeat-y; )

Mřížka

Grid je jedním ze dvou základních značkovacích prvků navržených pro uspořádání prvků HTML na modulární kontejnerové mřížce. Buňka (mřížka) vždy orientuje svůj obsah ve vodorovné rovině vzhledem ke kontejneru. Jedna buňka může zabírat jeden sloupec modulární mřížky nebo všechny najednou tuto vlastnost odrážejí: pro buňku zabírající jeden sloupec bude mít třída název grid_1, pro buňku se dvěma sloupci - mřížka_2, pro pět; -buňka sloupce - mřížka_5 atd. d. Obecně tedy můžeme třídu reprezentovat jako grid_ X, kde X je šířka buňky, kterou potřebujeme ve sloupcích modulární mřížky. Podívejme se na příklad s mřížkami grid_1, grid_6 a grid_12:


Jedna buňka může vodorovně sousedit s ostatními buňkami za předpokladu, že všechny dohromady nepokrývají více sloupců, než kolik je v kontejneru:

Buďte opatrní, pokud je vyžadováno více sloupců, než má kontejner, buňky zcela vpravo, které se nevejdou do jednoho řádku, budou násilně přesunuty na řádek níže.

Zvědaví čtenáři mohou nahlédnout do kódu CSS a zjistit, že drážky se tvoří pomocí okrajů, na rozdíl od buněk, které vyžadují prvek html. Doufám však, že to bylo každému jasné.

Agresivní návrháři rozvržení mohou rozhořčeně přejmenovat všechny odkazy na grid_ v kódu frameworku například na cell_, což je podle mého názoru blíže pravdě a je také jasnější.

Jasný

Pravděpodobně každý, kdo četl předchozí kód, si všiml, že se objevil nový prvek:

Jasný– druhý základní prvek značky 960gs. Abyste pochopili, co clear dělá, zvažte následující situaci: Pokusím se přepsat poslední příklad bez použití clear a pro usnadnění přidám do kontejneru červený okraj.


Hmm, kontejner se nerozšířil dětskými buňkami, ale zůstal tenký a osamělý. Proto, prvním úkolem clear je roztáhnout nadřazený kontejner na očekávanou velikost. Nyní navrhuji pečlivě se podívat na první příklad ze sekce mřížky, ve kterém každá buňka samostatně zabírá celý řádek. Z tohoto příkladu lze logicky usuzovat druhým úkolem clear je dokončit aktuální řádek bez ohledu na to, kolik volných sloupců v něm zbývá.
Díky těmto dvěma pravidlům je při práci s 960g dobrým zvykem vždy končit jakýkoli řádek s čistým, i když je to poslední nebo jediný řádek v kontejneru.

Není žádným tajemstvím, že divy s třídou clear používají návrháři layoutů poměrně často. Aby se v budoucnu předešlo možným konfliktům mezi kódem celého webu a kódem 960gs, měl by jej návrhář rozložení pravděpodobně v kódu buď přejmenovat css soubor rámcová třída jasná na jinou (například clr), nebo ji upřesnit (například .container_12 .clear). Přesto je podle mého názoru vhodnější metodou přejmenování v případě možných konfliktů.

Alfa a Omega

Někdy nastanou situace, kdy je potřeba vnořit několik dalších do jedné buňky. Jako příklad: potřebujeme dvě velmi dlouhé plné buňky po stranách, které zabírají 10 řádků na výšku, a jednu buňku uprostřed, na každé z deseti řádků.

V takových případech byste měli použít třídy alfa A omega. Myšlenka je jednoduchá - pokud do buňky vnoříme několik dalších buněk, pak první vnořená buňka musí mít třídu alfa a poslední samozřejmě omegu.

Mimochodem, příklad je jedním z mála případů, kdy je potřeba tag použít
.

Pokud potřebujete vnořit pouze jednu buňku, stačí použít pouze třídu alfa, bez omegy.

Prefix, Suffix, Push and Pull

Tyto čtyři doplňková třída, jsou v podstatě abstraktnější náhrady za padding-left, padding-right, left a right. Stojí za zmínku, že použití těchto tříd je mnohem pohodlnější než počítání požadované odrážky v hlavě nebo na kalkulačce.
Všechny mají názvy tříd podobné názvům tříd buněk: classname_ X, kde X je počet sloupců modulární mřížky.
Podívejme se na jednoduchý příklad:


Nyní aplikujme třídy prefix_1, suffix_1, push_1 a pull_1 na každou z buněk s rýmem, v tomto pořadí:


To je vše, v článku jsou uvedeny všechny funkce 960gs, zbývá vzít v úvahu jen několik bodů.
Nejprve si můžete stáhnout kód s příklady z článku na adrese

Oblíbené v kategorii:

Jak sloučit vrstvy ve Photoshopu do jedné nebo je spojit do skupiny...

číst

Přenos kontaktů do nového telefonu Android

číst

Samsung Galaxy se sám restartuje – řešení Galaxy Note...

číst

Klíčové vlastnosti Kaspersky Rescue Disk

číst



Nejnovější články

MacBook se nepřipojí k wifi MacBook nevidí...

číst

Jak vydělat peníze na WebMoney

číst

Tablet "Supra": recenze zákazníků

číst

Umístění lodí v reálném čase

číst

Nejlepší programy pro Android Záznam hovorů z...

číst

Odebírání nesledujících na Twitteru

číst

Připojení k internetu na notebooku: všechny možné...

číst

Samsung Galaxy S IV je nová vlajková loď...

číst