 |
Редактирование кода на лету. CSS-макеты. header. footer. Фиксированный макет с одной колонкой. Фиксированный двухколоночный макет
|
|
|
|
Редактирование кода на лету
- Можно отключить свойство css, сняв флажок рядом со свойством.
- Можно добавить атрибуты тегов HTML или свойства CSS.
- Можно изменить значения атрибутов HTML или свойств CSS.
Изменения применяются немедленно, поэтому можно быстро проверить различные варианты. Средства разработчика обеспечивают быстрое редактирование без изменения кода.
CSS-макеты
Данный раздел посвящен основным типам CSS-макетов. Макет — это разметка документа, характеризующая его структуру, т. е. скелет сайта.
|
header Шапка | ||
| sidebar Левая боковая панель | content Содержимое | sidebar Правая боковая панель |
|
footer Подвал | ||
Типы макетов:
- Сайт с фиксированным типом макета страниц, отличается от других типов макетов тем, что все размеры элементов страницы и положение элементов относительно друг друга всегда постоянно, имеют фиксированное значение размеров и положение, не зависящее от размера окна браузера, разрешения монитора.
- Преимуществом сайта с резиновым типом макета страниц является динамическое изменение размеров страницы по ширине. Ширина такого макета зависит от ширины окна браузера. Есть несколько способов сделать его: все структурные элементы задать в процентах или задать боковым колонкам фиксированную ширину, а центральная часть будет изменяться.
- Эластичный тип макета автоматически адаптируется под размер окна обозревателя, то есть страница будет пропорционально изменяться по своим размерам, подстраиваясь под размер окна браузера или разрешение монитора. При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта.
|
|
|
- Адаптивным называют макет, который проектируется и разрабатывается таким образом, что сайт становится совместимым с любым устройством, которое может быть использовано для работы в интернете. Адаптивный макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста.
Некоторые из макетов построены на основе схем позиционирования, в некоторых применяется плавающее размещение.
Фиксированный макет с одной колонкой
| container Область дизайна всегда выровнена по центру и имеет фиксированную ширину |
| body {margin: 0; }#container { width: 980px; margin: auto; } |
Ширина колонки задается свойством width, а выравнивание по центру свойством margin со значением auto. Свойство margin со значением auto выравнивает блок по центру только в комбинации со свойством width. Чтобы убрать поля, установленные по умолчанию для веб-страницы, для селектора body следует добавить свойство margin с нулевым значением.
Откройте Пример 1, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
В данном примере шапка сайта зафиксирована в верхней части окна браузера. Для этого использовалось свойство position со значением fixed. Элемент остается на одном месте при прокрутке, а его положение задается координатами через свойство(а) top, right, bottom, left.
Добавление отступов и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для блока установлено значение width. Если требуется использовать свойство width совместно со свойствами padding и/или border, то следует:
- Использовать вложенный блок и установить необходимые свойства для него.
| body {margin: 0; }#container { width: 980px; margin: auto; }#content { padding: 10px; } |
· Данный способ использовался в примере 1.
|
|
|
- Учесть значения свойств padding и/или border при вычислении значения свойства макета-padding*2-border*2. Умножаем на 2, чтобы учесть как левое поле/границу, так и правую.
| body {margin: 0; }#container { width: 960px; margin: auto; padding: 10px; /*ширина блока с учетом отступов слева и справа=960px+10px*2=980px*/ } |
· Данный способ использовался в примере 2.
- CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, отступов и ширины рамок слева и справа. Можно измененить алгоритм расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину блока. Для этого следует использовать свойство box-sizing со значением border-box.
| body {margin: 0; }#container { width: 980px; box-sizing: border-box margin: auto; padding: 10px; /*ширина блока 980px, ширина содержания с учетом отступов слева и справа=980px-10px*2=960px*/ } |
· Данный способ использовался в примере
Фиксированный двухколоночный макет
|
container | ||
|
nav Навигация |
content | |
Первый способ формирования колонок основан на позиционировании.
| body {margin: 0; }#container { width: 980px; margin: auto; position: relative; }#nav, #content { position: absolute; }#nav {width: 150px; }#content { left: 150px; width: 830px; } |
Для блока conrainer задаём относительное позиционирование, а для внутренних блоков (nav, content) абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left, right, top, bottom. Для блока nav задается свойство width, а для блока content требуется установить свойство left со значением равным ширине левой колонки или превышающим её и свойство width. Суммарная ширина колонок не должна превышать ширину макета (в рассмотренном выше примере 150px+830px=980px).
Откройте Пример 2, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
Второй способ формирования колонок основан на плавающем размещении.
| body {margin: 0; }#container { width: 980px; margin: auto; }#nav { float: left; width: 150px; }#content { margin-left: 150px; } |
Для блока nav задается свойство float со значением left и свойство width, а для блока content требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её.
Откройте Пример 3, попробуйте изменить ширину окна браузера. Проанализируйте код данной web-страницы.
|
|
|
|
|
|
