CSS-макеты
Данный раздел посвящен основным типам CSS-макетов. Макет — это разметка документа, характеризующая его структуру, т.е. скелет сайта.
| | ||
| |
|
|
| | ||
Типы макетов:
-
Сайт с фиксированным типом макета страниц, отличается от других типов макетов тем,
что все размеры элементов страницы и положение элементов относительно друг друга всегда постоянно,
имеют фиксированное значение размеров и положение, не зависящее от размера окна браузера, разрешения монитора.
Пример: Сайт Apple -
Преимуществом сайта с резиновым типом макета страниц является динамическое изменение размеров страницы по ширине.
Ширина такого макета зависит от ширины окна браузера. Есть несколько способов сделать его: все структурные элементы задать в процентах или задать боковым колонкам фиксированную ширину, а центральная часть будет изменяться.
Пример: Сайт Википедии -
Эластичный тип макета автоматически адаптируется под размер окна обозревателя, то есть страница будет пропорционально изменяться
по своим размерам, подстраиваясь под размер окна браузера или разрешение монитора.
При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em.
Em прямо пропорциональны размеру текста или шрифта.
Пример: Сайт компании Тонос - Адаптивным называют макет, который проектируется и разрабатывается таким образом, что сайт становится совместимым
с любым устройством, которое может быть использовано для работы в интернете.
Адаптивный макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета,
число колонок, размеры изображений и текста.
Пример: Сайт W3C. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта изменится.
Некоторые из макетов построены на основе схем позиционирования, в некоторых применяется плавающее размещение.
Фиксированный макет с одной колонкой
| |
Ширина колонки задается свойством width, а выравнивание по центру свойством margin со значением auto. Свойство margin со значением auto выравнивает блок по центру только в комбинации со свойством width. Чтобы убрать поля, установленные по умолчанию для веб-страницы, для селектора body следует добавить свойство margin с нулевым значением.
Откройте Пример 1, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
В данном примере шапка сайта зафиксирована в верхней части окна браузера. Для этого использовалось свойство position со значением fixed. Элемент остается на одном месте при прокрутке, а его положение задается координатами через свойство(а) top, right, bottom, left.
Добавление отступов и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для блока установлено значение width. Если требуется использовать свойство width совместно со свойствами padding и/или border, то следует:
- Использовать вложенный блок и установить необходимые свойства для него.
Данный способ использовался в примере 1.
- Учесть значения свойств padding и/или border при вычислении значения свойства width=ширина макета-padding*2-border*2.
Умножаем на 2, чтобы учесть как левое поле/границу, так и правую.
Данный способ использовался в примере 2.
- CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, отступов и ширины рамок слева и справа.
Можно измененить алгоритм расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину блока.
Для этого следует использовать свойство box-sizing со значением border-box.
Данный способ использовался в примере
Фиксированный двухколоночный макет
Первый способ формирования колонок основан на позиционировании.
Для блока conrainer задаём относительное позиционирование, а для внутренних блоков (nav, content) абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left, right, top, bottom. Для блока nav задается свойство width, а для блока content требуется установить свойство left со значением равным ширине левой колонки или превышающим её и свойство width. Суммарная ширина колонок не должна превышать ширину макета (в рассмотренном выше примере 150px+830px=980px).
Откройте Пример 2, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Второй способ формирования колонок основан на плавающем размещении.
Для блока nav задается свойство float со значением left и свойство width, а для блока content требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её.
Откройте Пример 3, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Резиновый двухколоночный макет
| |
Действуем аналогично описанному выше способу формирования колонок с использованием плавающего размещения, но значения свойств width и margin-left задаем в процентах.
Свойство min-width для блока container устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width, наоборот, задаёт максимальную ширину, которая не будет превышена.
Откройте Пример 4, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Три столбца с шапкой и нижним колонтитулом
| | ||
| |
|
|
| | ||
В данном макете используется плавающее размещение.
Откройте Пример 5, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Обратите внимание, что свойство float для всех столбцов установлено в значение left, а сами столбцы размещаются друг за другом по горизонтали. Для элемента div с ID-селектором #footer используется свойство clear со значением both. Это гарантирует, что нижний колонтитул полностью очистит столбцы с плавающим размещением.
Для колонок можно указать фиксированную ширину или плавающую (использовать значения, выраженные в процентах).
Задание
- Для страниц по направлениям отдыха задайте фиксированный макет, панель навигации должна располагаться справа.
- Для страницы "Туристическая фирма" задайте макет, состоящий из трех столбцов с шапкой и подвалом.
