Верстка дивами и с чем ее едят

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

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

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

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

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

Итак, нас должно получиться примерно следующее содержание в файле index.html

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



Учимся создавать макет на div

Сайдбар
Контент


Собственно на этом вся разметка и окончена. Еще одним плюсом верстки на дивах перед табличной версткой является то, что код становится менее громоздким и тем самым уменьшается вес страницы, что в свою очередь сказывается на загрузке сайта. Если кто еще не понял, то мы сейчас уже создали начальный макет, состоящий из шапки сайдбара основного содержания и подвала а также присвоили каждой части свой идентификатор о чем говорит конструкция

.

Теперь давайте приведем наш макет в божеский вид при помощи стилей. Для этого заходим во второй файл если кто забыл то это style.css и начинаем прописывать стили. Для начала пропишем стили для тегов body и html для того чтобы убрать лишние ненужные отступы. Делается это благодаря следующей конструкции.

body, html {margin:0px;padding:0px;}

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

Поэтому для нашего сегодняшнего макета я ставлю ширину в 800 пикселей, а также делаю так, что он автоматически выравнивается по центру. Все это делается благодаря свойствам стилей, которые мы указываем в файле style.css

#maket {width:800px;margin:0 auto;}

width: 800px — это собственно задает ширину
margin:0 auto — делает так, что наш макет автоматически выравнивается в центр относительно левого и правого края.

Теперь в нашем файле style. css присутствуют два стиля. Первый задает свойства для тегов body и html, а второй собственно на основную часть нашего будущего макета. Теперь нам необходимо сделать так чтобы та часть где у нас будет сам контент не находилась снизу а так сказать обтекала наш сайдбар по правому краю. В этом случае как, наверное, уже и понятно блок сайдбара будет обтекать слева. Поэтому давайте в файле style.css пропишем вот такой вот стиль для идентификатора left.

#left{background-color: width:200px;
float:left;}

Этим стилем мы задали фиксированную ширину нашего сайдбара в 200 пикселей, а также сделали так, что он обтекает блок с контентом по левому краю. Как вы уже, наверное, догадались, сделали мы это благодаря свойству float: left. Теперь собственно идем дальше.

Последнее что нам необходимо сделать, чтобы получить готовый макет — это сделать так чтобы подвал не обтекал сайдбар вместе с блоком контента. Это делается очень простым путем. Нам нужно в файле style.css для идентификатора footer прописать вот такой вот стиль. clear:both, который запрещает этому блоку обтекать вместе с остальными блоками блок сайдбара. вот готовый пример

#footer{clear:both;}

Вот собственно и все. Если теперь сохранить, наши файлы и открыть браузер, то мы увидим, что все смотрится нормально и уже похоже на макет сайта. Некоторые вебмастера предпочитают также задавать цвета блокам, но я обхожусь без этого. Если же вам проще с цветами, то в каждый стиль для каждого идентификатора пропищите знак # и необходимую комбинацию цвета. Используйте фотошоп для подборки кода цвета или же посмотрите википедию, там есть все цвета в формате, который нужен. Ну а на сегодня у меня все. Надеюсь, вам понравилось. В любом случае жду ваших комментариев.

Если вам срочно нужен сайт и осваивать все самому нет времени, то закажите готовый сайт. Вот например создание сайтов Тюмень может стать неплохим помощником в этом деле. Удачи вам.

Понравился пост? Зацени другие:

3 комментария на «Верстка дивами и с чем ее едят»


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *