примеры сайтов с макетом таблицей

Макет — это разметка документа, характеризующая его структуру, т.е. скелет дизайна сайта. Ещё проще говоря: Для того, чтобы начать рисовать дизайн нужно определиться с типом. Типы макетов: 1)Резиновый Ширина такого макета зависит от ширины окна браузера. Есть несколько способов сделать его: все структурные элементы задать в процентах ( ) или задать боковым колонкам фиксированные ширины, а центральная часть будет разъезжаться ( ). Такой макет позволяет использовать больше пространства. Использовать его можно для создания сайтов с большим количеством специфической информации, требующей много места, для размещения больших таблиц с данными, для страниц с двумя боковыми колонками и так далее. Для мониторов с большим разрешением можно установить максимально возможную ширину, чтобы «сильно не разъезжалось», если вы используете резиновый макет для небольшого контента. Примеры резиновых сайтов: Форма поиска задана в процентном соотношении, боковые колонки фиксированы, контент растягивается. Сайт имеет минимальную ширину в 1000 пикселей, и он не относится к адаптивному сайту. Пример сайта, в котором все колонки заданы в процентах.2) . Такие макеты более универсальны из-за своей адаптации под любое разрешение монитора, в том числе и мобильных устройств. Адаптивным может быть любой из рассматриваемых макетов. Уменьшайте браузер и вы увидите как выглядит сайт при разном разрешении. 3)Фиксированный Задается определенная ширина обычно 960-1000 пикселей ( ). Ширина макета ни от чего не зависит, ничего не разъезжается. На всех разрешениях выглядит одинаково, прост в верстке, соблюдается правильная типографика. К недостаткам можно отнести то, что на мониторах с широким разрешением сайт будет визуально выглядеть узким, в распространенном варианте верстки не подгоняется под мобильные устройства, картинки и таблицы ограниченных размеров. Для адаптации такого макета под все разрешения стоит опираться на максимальную ширину абсолютно всех элементов, определенные скрипты и плагины. Из-за этого очень сложно верстать такой макет под IE6 и IE7. Примеры фиксированных сайтов: Наш блог, всё по центру, фон растянут. 4)Эластичный При таком макете дизайн уменьшается или увеличивается пропорционально. Из-за того, что все величины задаются не px (пикселях), а в em (относительная единица), дизайн увеличивается или уменьшается в зависимости от разрешения так, как если бы вы зажали Ctrl и покрутили колесико мышки. Пример эластичного дизайна: Попробуйте увеличить текст, и вы заметите, как увеличиваются все элементы. Зная о типах макетов, следующим шагом будет выбор того или иного варианта. Для этого, прежде всего, нужно знать о будущей аудитории вашего сайта, статистике разрешений мониторов. Разрешения мониторов По данным мы имеем следующее положение дел: 1024×768 — 7.9% 800×600 — 0.6% Таким образом, большинство имеет разрешение от 1024 и выше, поэтому задумайтесь, стоит ли для 0.6% людей с разрешением 800 жертвовать нужным пространством в 200 пикселей. Однако, не забывайте про возрастающую потребность адаптивного дизайна. Аудитория Раз речь зашла о мобильных устройствах, то учтите это как демографический фактор: будут ли к вам заходить с таких устройств? Пользуется ли ваша аудитория мобильным интернетом? Если вы делаете сайт для молодых и продвинутых людей, то скорей всего разрешение экрана у них будет высоким, в зависимости от предоставляемой информации, например, , учтите, что неплохо бы иметь для этого адаптивный дизайн. Теперь, когда вы определились с макетом, хорошо было 

Макеты сайтов. Как сделать? | Студия web-дизайна Деловой портал