Глава I. Теоретические основы создания макета сайта

1.1 Макет сайта – это вариант дизайна будущего сайта. Дизайн определяет внешний вид - то, на что в первую очередь обращает внимание пользователь. От дизайна во многом зависит общее восприятие информации, которую содержит сайт.

1.2 Типы макетов сайтов:

Макет с фиксированной шириной

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

Рисунок 1. Сайт с фиксированной шириной.

Плюсы такого макета:

Макет буде одинаково целостно смотреться вне зависимости от разрешения экрана, при меньшем или большем от самого популярного разрешения сайт всегда будет находиться в центре окна, и все элементы будут стабильно сочетаться между собой. Ввиду того, что сейчас набирают популярность широкоформатные мониторы с большой разрешающей способностью такие макеты становятся особо популярны.

Основная часть сайта жестко зафиксирована по ширине, что избавляет от необходимости задавать минимальную или максимальную ширину окна браузера(подробней о min-width и max-width можно прочитать в заметке Эмуляция min-width, max-width под IE6).

Недостатки:

На больших мониторах может быть много свободного места, а сайт субъективно казаться сильно узким.

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

Резиновый макет

Резиновый макет - это макет, у которого нет фиксированной ширины, или ширина макета равна 100% от ширины окна браузера. Резиновые макеты также бывают двух типов. Первый это когда элементы позиционируются относительно сторон браузера, то есть при увеличении размеров окна структурные элементы разъезжаются в стороны. Второй, когда величины и позиции заданы в процентах, то есть при увеличении размеров окна, элементы расходятся пропорционально.

Рисунок 2. Резиновый тип сайта.

Плюсы такого макета:

Гибкий макет. Можно подстроить макет под разные разрешения монитора, таким образом сделать макет более универсальным.

Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).

Недостатки:

Главный недостаток резинового макета порождается из его плюса, при очень больших размерах экрана макет может смотреться не целостно и некрасиво

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

Эластичный макет

При эластичном макете размеры главных структурных элементов задаются в em (подробней о em в заметке Единицы измерения в CSS). Это позволяет пропорционально увеличивать размеры структурных элементов при масштабировании размера текста встроенной функцией браузера(зажать кнопку Ctrl и крутить колесико мышки).

Рисунок 3. Эластичный тип сайта.

Плюсы такого макета

Если все сделать правильно получается довольно гибкий макет, который можно легко подстраивать под нужный размер текста

Недостатки

Не любой дизайн можно хорошо реализовать в виде эластичного макета.