Мрежест дизайн
По време на оформлението на уебсайта е доста трудно да се проследи точното местоположение на всички елементи на дизайна. Различните размери и полета затрудняват дефинирането на предварително определени пропорции. Но благодарение на оформлението на мрежата можете лесно да проверите точността на подреждането на елементите и да ги подравните в съответствие с предвидения дизайн.
За да видите какво става след това, добавете стойността? Grid = 1 в края на която и да е вътрешна връзка на този сайт, например umade.ru/?grid=1. Ще се появи мрежата.
Как се използва мрежата?
След като оформлението на сайта е изложено, винаги правя малки корекции чрез CSS - увеличавам или намалявам полетата, променям размера на шрифта и т.н. Ако промените не засягат цялостната идея за дизайн, тогава не се връщам към първоначалното оформление във Photoshop. Не виждам смисъл в това. Но тъй като мрежата с моите пропорции остана във Photoshop, не мога да съм сигурен, че всички корекции, които правя в уебсайта, няма да повлияят точно на тези пропорции.
Въз основа на горното би било логично мрежата да се прехвърли директно на сайта. За щастие вече са измислени много интересни начини, които ви позволяват да проверявате пропорциите на оформлението по всяко време и да правите подходящите подравнения.
Методи за подравняване директно на сайта
Според мен най-сложният метод е 960 Gridder (използва jQuery), с който можете да играете на внедрената демонстрационна страница, като използвате клавишите Ctrl + Alt + Z и Ctrl + Alt + X. При натискане на тези клавиши се появяват хоризонтални и вертикални линии.
Всички съвременни монитори поддържат разделителна способност 1024 x 768, така че този метод използва фиксирана ширина на мрежата от 960 пиксела. Това е много удобна и универсална стойност, тъй като се дели на 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 и 480. В този случай можете да зададете собствена ширина и да промените всички параметри, за да отговарят на вашия дизайн.