0
0

Я прохожу курс html/css , все понятно , пока что легко но я не понимаю , когда нам объясняют в моем случае стилизацию header и сылок ,как понять сколько пиксилей нужно делать отступ padding и margin , как понять какого размера нужен шрифт , какой ширины или высоты нужно делать header?


Богдан Сысоев
4 years ago






Все очень просто - посмотрите разрешение вашего экрана, например 1366x720 пикселей. Тогда если верстка сайта идет без макета - так сказать - "на глаз" - то ориентируйемся по размерам экрана в пикселях.

Например, хэдер хотим сделать примерно 1/8 от высоты экрана. Тогда 720/8 - будет 90 пикселей. Выставляем при верстке высотру хэдера 90 пикселей, а дальше уже визуально смотрим - нравится или нет и лиьо уменьшам либо увеличиваем. Это при верстке БЕЗ макета на глаз.

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

В курсе HTML/CSS преподаватель в качестве макета-образца сайта, использует готовый уже свертанный сайт. И в уроках старается сделать также. При этом берет вначале выставляет свойства-отступы и размеры "на глазок" - смотрит что получилось, устраивает или нет, а также сверяется с макетом. В итоге пролучает нужный вариант верстки. 

Итогово:

1) При верстке по макету - все значения размеров, отступов, цветов, теней и т.п. задает дизайнер при создании дизайн-макета. Верстальщик переносит эти значения в верстку максимально приближенно к макету.

2) При верстке "на глаз" - вы сами в голове представляете что хотите получить, делаете верстку, смотрите что получается, корректируете что нравится что нет. Понимание размеров и отступов при этом приходит со временем - вы уже будете понимать - в чем разница будет рамки в 1 пиксель и в 3 пикселя, отступы нулевые, 5 пикселей или 20 пикселей. Есть некоторые стандарты, которые приходят в практикой. Плюс нужно отсматривать разные крутые топ сайты с точки зрения их реализации, вдохновляться и изучать как они сделаны.

Верстальщик может не ставить задачей понимание принципов дизайна (включая отступы, цвета и т.п.) а верстать чисто технически по макету. Это уже от вас зависит.

Yuri Smirnov
4 years ago

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

Yuri Smirnov
4 years ago

2 ответов