Типы макетов
10.29.2008 – Рубрика: HTML&CSS
Цель этой заметки предоставить информацию обо всех типах макетов верстки. Заметка ориентирована на неосведомленных заказчиков, которым легче предоставить ссылку на этот пост нежели по несколько раз переписывать одного и тоже.
Макет – русскоязычный аналог английского термина layout, который характеризирует разметку документа, его структуру. Все существует три типа макетов: макет с фиксированной шириной (rigid fixed), резиновый макет (adaptable fluid) и эластичный макет(expandable elastic). Каждый из этих видов обладает своими плюсами и недостатками.
Макет с фиксированной ширины
Примером такого макета является дизайн этого блога. Его основная часть имеет фиксированную ширину, фоновый рисунок распространяется на всю ширину окна браузера.
Плюсы такого макета:
- Макет буде одинаково целостно смотреться вне зависимости от разрешения экрана, при меньшем или большем от самого популярного разрешения сайт всегда будет находиться в центре окна, и все элементы будут стабильно сочетаться между собой. Ввиду того, что сейчас набирают популярность широкоформатные мониторы с большой разрешающей способностью такие макеты становятся особо популярны.
- Основная часть сайта жестко зафиксирована по ширине, что избавляет от необходимости задавать минимальную или максимальную ширину окна браузера(подробней о min-width и max-width можно прочитать в заметке Эмуляция min-width, max-width под IE6).
Недостатки
- На больших мониторах может быть много свободного места, а сайт субъективно казаться сильно узким.
- В блок с содержимым сайта можно вставлять картинки (таблицы) предельных размеров, у резиновых сайтов диапазон размеров картинок (таблиц) более широк.
Резиновый макет
Резиновый макет это макет, у которого нет фиксированной ширины, или ширина макета равна 100% от ширины окна браузера. Резиновые макеты также бывают двух типов. Первый это когда элементы позиционируются относительно сторон браузера, то есть при увеличении размеров окна структурные элементы разъезжаются в стороны. Второй, когда величины и позиции заданы в процентах, то есть при увеличении размеров окна, элементы расходятся пропорционально. Пример резинового макета.
Плюсы такого макета
- Гибкий макет. Можно подстроить макет под разные разрешения монитора, таким образом сделать макет более универсальным.
- Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).
Недостатки
- Главный недостаток резинового макета порождается из его плюса, при очень больших размерах экрана макет может смотреться не целостно и некрасиво
- Необходимо задавать максимальную ширину макета. Также необходимо задавать минимальную ширину, дабы избежать наложения друг на друга структурных элементов при маленьких размерах экрана.
Эластичный макет
При эластичном макете размеры главных структурных элементов задаются в em (подробней о em в заметке Единицы измерения в CSS). Это позволяет пропорционально увеличивать размеры структурных элементов при масштабировании размера текста встроенной функцией браузера(зажать кнопку Ctrl и крутить колесико мышки). Пример эластичного макета.
Плюсы такого макета
- Если все сделать правильно получается довольно гибкий макет, который можно легко подстраивать под нужный размер текста
Недостатки
- Не любой дизайн можно хорошо реализовать в виде эластичного макета
P.S: Решил ввести нововведение на блоге, теперь у ссылок комментариев убран nofollow. Ссылка в нике появляется если автор оставил несколько комментариев.
24 Отзывов to “Типы макетов”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 20 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 32 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 8 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 3 отзывов)
Октябрь 30, 2008 в 8:42
эластичный и резиновый…
что сейчас требуют заказчики -)))
что б их…
Октябрь 30, 2008 в 8:46
Ну, я не согласен. Тип макета в многом зависит от дизайна.
Октябрь 30, 2008 в 8:56
С этим полностью согласен.
все зависит от разных вещей…
но в целом это так.
Ноябрь 5, 2008 в 1:52
Я понимаю, что вопрос немного не в тему, но просьба ответить и послать по ссылке или может дать целостный ответ. Могу в фотошопе сделать макет сайта и впоследствии отправить верстальщику, чтобы получить непосредственно сверстанную страницу. Какие требования выдвигаются к созданию дизайна в PSD, если из него будет верстаться html страница?
Ноябрь 5, 2008 в 7:44
Думаю самое главое требоваиние…
это наличие всего в слоях и желательно, что бы слои бли подписаны человеческим языком.
Что бы верстальщик открывший псд сразу мог увидеть какой слой отлключить-включить и разобраться с ходу.
а остальное дело наживное (думаю дополнит автор блога)
Ноябрь 10, 2008 в 19:37
Так же важно использование стандартных шрифтов (Тахома, Вердана, Таймс, Ариал)
Декабрь 15, 2008 в 18:48
Классная статья – спасибо!
Декабрь 16, 2008 в 12:43
Классная статья – спасибо!
Январь 17, 2009 в 20:53
Думаю я у другого автора уже читал про это
Январь 24, 2009 в 5:02
Стоит ли ждать обновления?.
Январь 24, 2009 в 5:20
Могу предложить много инфы по данной теме, нужно?.
Январь 26, 2009 в 13:44
Как часто публикуете новости по данной тематике?.
Январь 29, 2009 в 8:50
Супер. Спасибо, так давно искал этот материал. Ну просто респектище автору. Никогда не забуду теперь
Март 8, 2009 в 9:32
Привет. Почему выбрал домен zodios.net?
Апрель 18, 2009 в 0:59
На сколько я знаю, «эластичный макет» — это немного другое.
Эластичный макет — это такой макет, который тянется не на всю любую ширину браузера, а только в определенном диапазоне, например от 800px до 1500px.
Это позволяет совместить преимущества фиксированных и резиновых макетов: сайт подстраивается под ширину окна браузера, но не разъезжается при слишком большом разрешении экрана.
Май 30, 2009 в 14:45
Дискутировать можно бесконечно, поэтому просто хочу поблагодарить автора. Спасибо!
Июль 5, 2009 в 2:03
Действительно. Фактов всегда достаточно – не хватает фантазии. Желаю автору ее поболее
Июль 6, 2009 в 20:34
Благовременно правда, часто!
Июль 14, 2009 в 10:25
Что-то у меня в Опере дизайн вашего сайта расползается…
Июль 17, 2009 в 10:20
товарищи создать хорошую резину очень непроста, теория то кажется проще но новичок никак не сможет сделать сайт и для обычного 1248 и для hd за 2000 px так што отбзьте все херню или делайте таблицами или идите к професам
Сентябрь 14, 2009 в 23:07
Писака молодца!
Март 17, 2011 в 14:02
Собираюсь делать редизайн. На сайте много фотографий, их желательно делать как можно крупнее.
Как думаете, какую ширину выбрать для фиксированного дизайна 960 или 1200 ?
В магазинах мониторы 1024 уже не продают, средний размер 1330.
Что будет через 1-2 года? Ваше мнение?
Июнь 13, 2011 в 0:40
Что будет через 1-2 года?
Можно ждать , а можно заниматься реализацией эластичного типа макета сайта , это же очевидно …
Июнь 13, 2011 в 0:43
А вообще определение приведённое выше , вообще не отображает сути эластичного макета . Фактически возможности полноценного макета намного превышают » ожидаемое » ….