Базовые приёмы вёрстки

Если вы знаете теги HTML и немного изучили CSS, то можете потихоньку осваивать вёрстку, комбинируя различные способы.

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

Заготовка:


<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  
  <body>
    <p>Заготовка страницы</p>
  </body>
</html>

Вы можете и дальше добавлять различные абзацы и картинки. Но у вас получится линейная структура, которая уместна при размещении какого-нибудь документа без оформления. Сайты же имеют определённую вёрстку: шапка, подвал, боковые элементы и т.д. Данные элементы формируются блоками div. Попробуем сначала их просто объявить внутри body.


Шапка сайта
Боковая колонка
Основная часть страницы
Подвал

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

Чтобы блоки стали строительным материалом, нужно к ним добавить CSS. Обычно, свойства CSS прописываются в отдельном файле и подключаются к странице. Но для учебного примера мы будем описывать стили сразу в файле в области head. Создаваемые стили помещаются в тег style.


<style>
  div{
  border:  2px solid black;
  width: 500px;
  height: 100px;
  }
</style>

Обновите страницу. Теперь мы получили четыре прямоугольника с чёрной окантовкой. Все блоки имеют одинаковые настройки: цвет, размеры, толщину обводки. В реальности каждый блок индивидуален. Чтобы их различать между собой, используют идентификаторы и классы. Начнём с идентификаторов. Создадим новые правила при помощи решётки #. А нужным блокам присвоим идентификаторы. Сейчас код будет следующим.


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <style>
      div{
        border:  2px solid black;
        width: 500px;
        height: 100px;
      }
      
      #sidebar{
	    width: 200px;
	    float: left
      }
     
      #content{
	    width: 300px;
	    float: left;
      }
    </style>
  </head>
  
  <body>
    <div>Шапка сайта</div>
    <div id="sidebar">Боковая колонка</div>
    <div id="content">Основная часть страницы</div>
    <div>Подвал</div>
  </body>
</html>

Результат будет не очень красивым, но общее представление, как можно управлять блоками, вы уже получили.

Чтобы граница не вылезала за блок можно дописать в стили:


*{
  box-sizing: border-box;
}

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

Чтобы отцентрировать созданный образец, его нужно окружить дополнительным блоком.


#wrapper{
  width: 500px;
  margin: 0 auto
}

div:not(#wrapper){
  border: 2px solid black;
  height: 100px
}

Добавьте новый блок div с идентификатором wrapper, который должен окружать все остальные блоки.

Мы задали контейнеру ширину и внешние отступы (margin). Первая цифра задает отступ снизу и сверху, а вторая – слева и справа. Соответственно, ключевое слово auto создает такие отступы, чтобы элемент был выровнен прямо по центру.

Мы задавали стиль для всех элементов div в самом начале вёрстки. Он применится и к wrapper, что совсем не желали. Поэтому с помощью псевдокласса :not указываем, что правила следует применять ко всем блокам, кроме блока с идентификатором wrapper.

Обычно в боковой колонке, шапке и подвале количество информации не меняется, поэтому там можно выставить фиксированную высоту. Основное содержимое зависит от количества текста и может быть разным. Поэтому этому блоку лучше поставить минимальную высоту при помощи min-height.

Подготовленный макет имеет определённые недостатки, которые вы сможете устранить, набравшись опыта. Далее можно настроить у них цвет, шрифт и т.д.

Окончательный вариант, который далёк от идеала.


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <style>
      *{
	    box-sizing: border-box;
      }
      
      #wrapper{
	    width: 500px;
	    margin: 0 auto;
      }
      
      div:not(#wrapper){
	    border: 2px solid black;
	    
      }
      
      #header{
	    height:70px;
      }
      
      #sidebar{
	    width: 200px;
        height: 600px;
	    float: left;
      }
     
      #content{
	    width: 300px;
        min-height: 600px;
	    float: left;
      }
      
      #footer{
	    height: 50px;
      }
      
    </style>
  </head>


  
  <body>
  <div id="wrapper">
    <div id="header">Шапка сайта</div>
    <div id="sidebar">Боковая колонка</div>
    <div id="content">Основная часть страницы</div>
    <div id="footer">Подвал. Нижняя часть страницы</div>
  </div>
  
  </body>
</html>

Базовые приёмы вёрстки

Реклама