CSS урок 14. Блочная верстка сайта

Авторadmin / Опубликовано

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

Назад
К оглавлению
Далее

Блочная верстка сайта

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

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

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

  1. Высота слоев div ограничена высотой контента:
    2. Табличная верстка Блочная верстка
    табличная верстка блочная верстка сайта css
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.

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

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

    Выполнение:

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

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

    <body>
<div id="shapka">1</div>
<div id="container">
	<div id="menu">2</div>
	<div id="content">3</div>
</div>
<div id="bottom">4</div>
</body>
    1. Задаем свойства «шапки» (блок 1)
    • Выбираем общую ширину слоев «на глаз» — 750 пикселей.
      • width: 750px;
    • Центрируем блок (значение auto для свойств margin-left и margin-right)
      • margin-right: auto;
margin-left: auto;
    • Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
      • padding: 10px;
    • Высоту любого слоя, а в нашем случае высоту первого блока можно задать двумя способами:
    1. либо напрямую задав значение свойству height в пикселях, процентах или др. единицах;

      2. например, для верхнего слоя «шапки»:

        height: 50px;
    2. либо задать высоту при помощи отступа

      3. например:

        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 - шапка */
#shapka{
  text-align: left; /* Выравнивание внутреннего контента по левому краю */
  width: 750px; /* Ширина блока и общая ширина*/
  background: #900000; /* Цвет фона */
  height: 50px; /* Высота блока */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
  padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для контейнера */
#container {
  width: 770px; /* Ширина слоя или ширина макета+20px */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
 }
/* для блока 2 - меню */
#menu {
  width: 200px; /* Ширина слоя */ 
  float: left; /* Обтекание с соседним слоем */ 
  color: white; /* Цвет текста */
  background: #008080; /* Цвет фона */
  padding: 10px; /* Внутренние поля вокруг содержимого */
 }
/* для блока 3 - контент */
#content { /* Правая колонка*/ 
    width: 530px; /* Ширина слоя */ 
    float: left; /* Обтекание с соседним слоем */ 
    padding: 10px; /* Внутренние поля вокруг содержимого */ 
    background: #e0e0e0; /* Цвет заднего фона */  
   } 
/* для блока 4 - подвал */
#bottom{
	width:750px; /* Ширина слоя */ 
	clear:left; /* возвращаем блочность и располагаем слой слева */
	padding: 10px; /* Внутренние поля вокруг содержимого */
	background:#444;
	color:#fff;
	margin-right: auto; /* Авто-отступ справа */
    margin-left: auto; /* Авто-отступ слева */
}
    </style>
</head> 
<body>
<div id="shapka">1</div>
<div id="container">
	<div id="menu">2</div>
	<div id="content">3</div>
</div>
<div id="bottom">4</div>
</body>

    Результат:

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

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

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

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

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

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

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

    Пример фиксированного дизайна в три колонки
    Рис. 3. Фиксированный дизайн в три колонки

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

    Выполнение:

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

    пример блочного макета

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

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <body>
<div class="container">
    <div id="header1">Евгений Евтушенко</div>
    <div id="header2">Валерий Брюсов</div>
    <div id="header3">Эдуард Асадов</div>
  </div>
  <div class="container">
    <div id="col1">
		Мне снится старый друг,<br/>который стал врагом,<br/>
		но снится не врагом,<br/>а тем же самым другом.<br/>
		Со мною нет его,<br/>но он теперь кругом,<br/>
		и голова идет<br/>от сновидений кругом.
	</div>
    <div id="col2">
	Великое вблизи неуловимо,<br/>Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>И видим лишь случайное звено.
	</div>
    <div id="col3">
	В любых делах при максимуме сложностей<br/>Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>А нежеланье - множество причин.
	</div>
  </div>
</body>
    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 {
    ...
    margin-top: 2px; /* Отступ сверху */
   }
    • Для того, чтобы блочные теги div, расположились рядом друг с другом, необходимо задать им обтекание — float.
      •  #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; /* Поля вокруг текста */
    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; }

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

    пример верстки в три колонки
    Рис. 4. Промежуточный результат
    3. Задание стиля для контейнеров
    • Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)
      • .container { 
     clear: both;  /* Отменяет действие обтекания float */ 
   }
    • Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.
     #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   }
    Итоговый код: всё вместе
    <style type="text/css">
    /* для колонок и их заголовков */
 #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; /* Цвет текста заголовка */
   }
   /* для колонок */
   #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   } 
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }
 
   .container { 
     clear: both;  /* Отменяет действие float */ 
   }
    </style>
</head> 
<body>
<div class="container">
    <div id="header1">Евгений Евтушенко</div>
    <div id="header2">Валерий Брюсов</div>
    <div id="header3">Эдуард Асадов</div>
  </div>
  <div class="container">
    <div id="col1">
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
	</div>
    <div id="col2">
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div id="col3">
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
	</div>
  </div>
</body>

    Результат:

    Пример фиксированной верстки с тремя колонками
    Рис. 5. Результат

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

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

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

    Выполнение:

    1. Создание структуры html-кода
    • Для данного макета достаточно создать три слоя div для каждой колонки.

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

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <body>
<div id="col1">Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели.</br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли. 
</div>
<div id="col2">
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div id="col3">
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>
    2. Добавление стилей для колонок
    • Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).
      • #col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
    }
    • Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float.
      • #col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
     float: left; /* Обтекание слоев */
    }
    • Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).
    #col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }
    Итоговый код: всё вместе
    <style type="text/css">
    #col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
     float: left; /* Обтекание слоев */
    } 
#col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }
    </style>
</head> 
<body>
<div id="col1">Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели.</br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли. 
</div>
<div id="col2">
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div id="col3">
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>

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

    Назад
    К оглавлению
    Далее