Типы макетов сайта. Верстка страницы по макету. Как верстать макеты

Автор Nadezhda Belousova
Типы макетов сайта. Верстка страницы по макету. Как верстать макеты

Привет.

Сегодня я хочу с тобой поговорить о пакетах, а точнее о их видах и типах — это по сути одно и тоже многие начинающие верстальщики когда сталкиваются с первым своим макетом они не совсем понимают, что он из себя представляет. Давайте на примере красавчик выпадает макет который дизайнер нарисовал шириной в 1300 пикселей continued часиков положил где-то по центру допустим — это 500 пикселей верстальщик смотрят такой 1300 пикселей. О'кей пошёл поставил блок с шириной 1300 просмотреть контентная часть 900.

О'кей поставил 900 отступ слева 200 пикселей так и написал отступ слева 200 пикселей и пошел так верстать всё остальное дальше да то есть блок за блоком и — это в корне неверно потому, что дизайнер на самом деле имел в виду, что этот контент располагается по центру вне зависимости от того какой ширины будет экран.

То есть — это один из типов макетов вообще считается, что есть базовых пять типов — это фиксированный резиновый эластичный адаптивной и комбинированный. Так вам ответит Google, но правда в том, что в современной разработки практически всё. Она сейчас делается комбинированная девушка сейчас уже можно использовать Flexbox активно. В ближайшем будущем очень активно можно будет уже использовать Grid например на данный момент он ещё не полностью с браузерной и так далее. Что ещё есть в современной разработки и верстки сейчас огромнейшее количество возможностей и дизайнеры рисуют макеты вот просто фантастически все элементы могут располагаться абсолютно где угодно в хаотичных в хаотичном порядке я не имею в виду, что он плохо нарисовал и криво, но всё выровнена, но некоторые моменты бывают именно креативные и они довольно специфичны по-своему. Сейчас я покажу несколько типов сайт и песочница покажу пару примеров того какие бывают макеты чтобы столкнувшись с новым пакетом вы понимали, что он себя представляет и. Как должна выглядеть ваша верхнеуровневая верстка то есть ваш основной шаблон первый тип — это макет фиксированной ширины который полагается по центру например индекс. Как видите вот весь контент здесь располагается по центру вне зависимости от экрана и если я начинаю его сажать он всё также располагается по центру и более того если даже его обсуждают ещё больше он по-прежнему остается в фиксированном поскольку у них есть отдельная версия для мобильных устройств и там используется совсем другая девушка вот — это вот типичная макеты которые по центру очень похожие на него — это сайт например Rambler он несколько отличается смотрите здесь если его допустим сужать в какой-то момент он перескакивает по ширине — это если я не ошибаюсь называется формат эластичной обёртка. Ну по сути — это тоже самое от центрированной контент на некоторых точках весь отдашь монтажа уже не осуждается в некоторых точках он где-то перестраивается по ширине насколько может сайты подобного формата делаются вот если говорить о верхнеуровневый разметки это. Элементарно то есть там в самом начале Tag Body и внутри. будет у вас находится какой-то контейнер контейнер там есть какой-то текст допустим я напишу и если — это сайт с фиксированной шириной то. Это пример 1000 1000 1000 Imagine наш 10 авто. Ну я ещё на всякий в. Сочи фоны кашу чтобы было наглядно. Вот видите ваш контент который располагается по центру и. Когда Вы начинаете ли садить он продолжает у вас также оставаться по центру. Если же он у. Вас должен дальше меньше то — это ширина меняется на max-width и получается, что когда вы слушаете ещё меньше этот блок начинает у вас сужаться дальше тоже ближе к формату адаптива. Это первый то есть, а центрированный фиксированный второй. Тип который и вот фиксированные по центру его в интернете как мне кажется больше всего. Больше 50% я вот практически более чем уверен такое статистики. Я нигде не встречал вот. По моим ощущениям может быть их в таком виде больше. Даша 70 80% второй формат это. Например как. Википедия Илюша behance здесь. Обратите внимание на обоих этих сайтах контент располагается на всю ширину, что здесь, что вот здесь вот здесь есть несколько отличий например. Википедия навигация располагается слева сверху если начать слушать. Википедию Она видит за какое-то пары. Ну где-то вот. Ну то есть она почти даже дома белая лисица до мобильных устройств, но уже кривовато видите здесь уже как-то всё странно выглядят. Другое дело если. Взглянуть на behance я начать играться с его размерами. Витя во-первых количество блоков меняется дальше здесь в шапке поменялись. Какие элементы сначала исчезли потом в другой точке заголовок стал меньше количества элементов опять изменилась. Он пристроился полностью под мобилу то есть. Под мобильные устройства то есть вот — это полноценная адаптивная верстка так разобрались фиксированный сайт на всю ширину. Вот то чего. Вот больше всего и отдельная бы ещё хотел добавить админ панели админ панели они по своему дизайну очень напоминают формат как на. Википедия Например если вы в. Гугле Напишите. Вот как я написал допустим Design Admin Panel вы заметите, что они очень похожи то есть слева навигация справа контент которая на всю ширину и вот здесь вот так вот 23 4 пять они все абсолютно одинаковые то есть вот этот формат если например говорить про behance тут просто блоке располагаются вставляется. Диего и они автоматически ставится на всю ширину и вы там же располагаете контент в процентах каких-то там допустим соотношениях и они у вас нормально все устраивается. Если же мы говорим про формат. Википедия либо же админ панель, а то здесь получается, что левая колонка у вас может быть в процентном. Как он — это соотношение или фиксированного размера, а правая часть натягивается на всю оставшуюся область этот формат. Берестовица приблизительно. Давайте допустим 10.

0 комментариев
0

Читайте также