0 53

Основы верстки с помощью html и cs

Основы верстки

Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать с помощью html, а стили и размеры установим классами css:

Вот структура сайта, которую можно сверстать с помощью тегов <div>. Каждая из частей шаблона помещена в отдельный слой. Боковая панель и контент расположены внутри слоя-контейнера:

<div class="header">
</div>

<div class="pages">

<div class="content">

<h2>Контент</h2>
</div>

<div class="sidebar">
<h2>Боковая панель</h2>
</div>

<div class="foot">
</div>

</div>

<div class="footer">
<h2>Подвал</h2>
</div>

Теперь рассмотрим стилевые настройки, заданные с помощью классов css:

.header {
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    width:1000px;
    height:100px;
    border:1px solid #000000;
    background: #009966;
	background-image: url(img/1.gif);
    }
.pages { 
    margin-left:auto; 
    margin-right:auto; 
    width:1000px;
    }
.content {
    margin-right:10px;
    width:806px;
    height:450px;
    border:1px solid #000000;
    background: #999999;
    float:left;
    }
.sidebar {
    width:180px;
    height:450px;
    border:1px solid #000000;
    background: #FF9900;
    float:left;
    }
.foot {
    clear:both;
    }
.footer {
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    height:50px;
    border:1px solid #000000;
    background: #333399;
    }

Для каждого слоя в описании классов с помощью свойств width и height устанавливаются размеры. Цвет фона задается параметром background.

Позиционирование элементов осуществляется значениями нескольких полей:

  • margin-top – отступ от верхнего края окна браузера.
  • margin-left – от левого края.
  • margin-right – правого края.

Для шапки сразу устанавливается цвет и фоновое изображение. Рисунок вырезается из шаблона psd для сайта и помещается в отдельную папку. Путь к файлу указывается в поле background-image через url.

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

Скажите пару слов