960 Grid System – tapasztalatok

Sokszor nagyon fontos, hogy egy weboldal grafikai terve és ennek megvalósíthatósága legyen gyors a rövid határidők miatt. Eme megfontolásból, valahogy gyorsítani akartuk a kivitelezést. Grafikus tervező ismerőseim ekkor ajánlották figyelmembe a 960.gc tervezési és kivitelezési lehetőséget. Weboldalak sablonszerű felépítését, tulajdonképpen template építését segíti, ez a tervezési és megvalósítási lehetőség. Titka annyiból áll, hogy a weboldal tartalmi, képi elemeit valamilyen táblázatos(oszlopos) elrendezés szerint alakíthatjuk ki.

A weboldal kiegészítőkkel látja el a grafikai programok szinte mindegyikét, hogy már a tervezéskor illeszkedjen az elkészítendő weboldal az oszlopokra, tulajdonképpen ez a legfontosabb eleme a 960 Grid System használatának. Eme kiegészítő segítségével grafikus már könnyedén tud olyan weboldal grafikát építeni ami illeszkedik az oszlopokra.

Az oldal lehetőséget biztosít az egyedi grafika által megadott szélesség és a tervezéskor figyelembe vett oszlopszám alapján legenerálni a sitebuilder számára egy css-fájlt, aminek használatával, a weboldal felépítése is gyorsabbá válik.

Én a napokban próbáltam elkészíteni az első ilyen weboldalt. Hát mint mindennek, ennek a technikának is vannak hátrányai. Ha a grafikus szereti a blokkokat függőleges vonalakkal elválasztani, akkor ez a technika szinte használhatatlan, ugyanis ebben az esetben elveszik minden előnye.

Nézzünk egy példát:

Vegyünk:  70px oszlopszélességet

10px eltartást az oszlopon belül, így a weboldal bal jobb oldalán 10px eltartás lesz míg az oszlopok között tehát a belső részeken 20px.

Számoljunk 12 oszloppal.

A technika előnye abban rejlik, hogy a blokkoknak valamilyen háttérszínt adhatunk meg, így különülnek el egymástól könnyedén. Az eltartás az oszlopok között margin css tulajdonsággal adják meg, ennek hátránya, hogy ez a háttérképekre színekre, vonalakra tartalomra, egyszóval mindenre hatással van. Van két css osztály “alpha, omega”, előbbi az oszlop előtti eltartást redukálja 0-ra míg az utóbbi az oszlop utánit. Gondolnánk hoho nincs akkor probléma, de van hiszen az oszlopok szélességei fixek, így az alpha omega css osztály div-hez rendeléssel tulajdonképpen, az eltartást vettük 0-ra de ettől még az oszlop szélessége nem nő meg 10- 10 pixellel. A border tulajdonságnak egy hátránya van, hogy számít a szélessége, így ha két ilyen grid systemes blokkot vonallal szeretnénk elválasztani, ott vagyunk ahol  a part szakad, jöhet a fejszámolás a pixelek tologatása és a weboldal kivitelezése is lassul.

Egy szó mint száz, 960 Grid Systemmel csak akkor érdemes weboldalt, vagy weboldal templatet tervezni, ha egy egyszerű a tartalmi blokkokat egymástól nem vonallal elválasztó weboldalt szeretnénk megvalósítani, ugyanis ilyen esetekben a weboldal elkészítése nem gyorsul sőt inkább lassul mert időközben felül kell írni a Grid System által beállított szélességeket.

Minden más esetben optimális lehet használata, főleg ha a megszerkesztett grafika is illeszkedik hozzá. Ha van 12 oszlopunk  akkor az egymás után következő 3 divnek a grid_4 css osztályt állítjuk be akkor az nem más mint egymás mellett 3 oszlop 20-20 pixel eltartással és 310px tartalmi szélességgel. A weboldal jobb és bal oldalától pedig 10-10 pixel eltartás.

Reklámok

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s