Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

• При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
• К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак - это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

• Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
• Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
• Основной блок с контентом размещается по центру , тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

Рис.1. Пример фиксированного дизайна

Пример: создать фиксированный дизайн сайта на основе представленного выше изображения

• «Разбиваем» все основные элементы страницы на блоки следующим образом:
  • блок 1 — слой первый (id="shapka"),
  • блок 2 и 3 заключаются в единый блок (id="container"),
  • блок 2 — слой с меню (id="menu"),
  • блок 3 — слой с контентом (id="content"),
  • блок 4 — слой с id="bottom" .

Схематично изобразим расположение блоков:

1. Задаем свойства «шапки» (блок 1)

• Выбираем общую ширину слоев «на глаз» — 750 пикселей.

margin-right: auto; margin-left: auto;

• либо задать высоту при помощи отступа

например:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

Весь код для шапки:

#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; }

2. Создаем свойства контейнера

• Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
• Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера

#container { width: 770px; /* Ширина слоя или (ширина макета+20) */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

3. Создаем свойства для блока 2 — меню

• Слой номер 2 шириной в 200 пикселей (width)
• Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
• Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
• Задаем цвет текста и заднего фона (background , color)

#menu { width: 200px; /* Ширина слоя */ float: left; color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ }

4. Создаем свойства для блока 3 — контент

• Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
• Задаем обтекание float: left , исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
• Задаем цвет заднего фона (background) и внутренние поля (padding)

#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }

5. Создаем свойства для блока 4 — «подвал»

• Ширину слоя устанавливаем в 750 пикселей
• Для этого блока надо убрать обтекание, т.е. установить свойство clear
• Устанавливаем внутренние поля padding
• Задаем цвет для фона (background) и текста (color)
• Центрируем блок (margin-right и margin-left)

#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

Итоговый код: всё вместе

<style type = "text/css" >

1
2
3
4

Результат:



Рис.2. Жесткая блочная верстка из двух колонок

Фиксированный дизайн для трех колонок

При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

1. Использование свойства для расположения колонок рядом.
2. Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

Пример: создать веб-страницу с макетом из трех колонок, изображенную на рис. 3 . Использовать приемы фиксированного блочного макетирования

• Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
• Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
• Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

• Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

• Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

• Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }

• Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family , font-weight , font-size , color).

#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

• Установим задний фон отдельно для каждого селектора.

#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

• Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)

.container { clear : both ; /* Отменяет действие обтекания float */ }

Container { clear: both; /* Отменяет действие обтекания float */ }

• Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6 . Использовать приемы фиксированного макетирования с позиционированием слоев

1. Создание структуры html-кода

• Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

2. Добавление стилей для колонок

• Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }

• Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float .

#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

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

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

Дизайн в три колонки готов!