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

О самих преимуществах блочной верстки можно сказать только одно – они есть. Причем весьма весомые. Это и простота читабельности кода, и оптимизация к поисковым системам. К недостаткам можно отнести лишь одно – сложность использования, связанное с тем, что разные браузеры будут воспринимать блоки по-разному.

Сегодня мы поговорим как раз о том, как же сверстать сайт на div –ах таким образом, чтобы было и поисковым системам хорошо, и посетителям, и дизайнеру…)))

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

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

Для человека, первый раз попробовавшего обращаться с div - блоками (как я помню по себе), в первую очередь встает вопрос – как же организовать их таким образом, чтобы и смотрелось гармонично, а не разъезжалось, и контент с меню находились именно там, где их ждешь, а не за пределами структуры сайта…

Решение очень простое – разместить все необходимые div - блоки в одном, который будет их "сдерживать".

Второй интересующий начинающего верстальщика вопрос – как лучше совместить дизайн с текстом…. При табличной верстке все просто – в одну ячейку градиент, второй задать фон и текст туда же…. С блоками дело обстоит совсем иначе. Гораздо проще оказывается задать общий фон (градиент) ниже лежащему div - блоку, а по этому оформлению сверху пустить блоки с текстом и меню… Т.е. нам уже не придется резать фон на кусочки фотошопом, чтобы вставить его в структуру таблицы, а вставлять его будем целиком… ну или почти целиком…

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

Итак, рассмотрим это на примере 3х колоночного сайта:

В самом html-коде пишем следующее:

< div id="wrapper"> 
    //общий блок – на картинке голубого цвета
    < div id="header"> 
    //шапка сайта - розового
    < /div>
  < div id="container" style="background-image:
       url(фоновая_картинка.jpg);"> 
// общий блок, объединяющий блок-контент, 
//   блок-левое меню и блок-правое меню. Фоновая 
//   картинка дает фон всем трем блокам и 
//   повторяется по оси y
        < div id="content">
    // блок-контент
        < /div> 
        < div id="left">
    //блок - левое меню
        < /div> 
        < div id="right">
    //блок-правое меню
        < /div> 
        < /div>
  < /div>
  < div id="footer">
    //подвал
  < /div> 
  < /div>
 

Далее мы создаем или открываем файл .css и описываем в нем использующиеся div - блоки:

#wrapper {
  width: 900px;
  margin: 0 auto;
  min-width: 1000px; */
}
#header{margin-bottom:10px;
  }
#container {
  width: 100%;
  background: rgb(255,255,255); 
  /* фон основной колонки */
}
* html #container {height: 1%;}
#container:after {
  /* закрываем плавающие блоки */
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
}
#content {text-align:justify;
  width: 430px;
  width: "485px";
  float: left;
  padding:30px;
  margin-right:10px;
 }
#left {
  float: left;
  width: 160px;
  padding-left:17px;
  padding-left:"20px";
  padding-right:10px;
 }
#right {
  float: left;
  width: 165px;
  padding-left:20px;
  padding-left:"8px";
  }

Вот и все. Далее в файле .css мы изменяем требующиеся нам значения и наслаждаемся результатом…

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

Статьи по теме:
CMS своими рукаим - часть 1
CMS своими рукаим - часть 2

комментариев: 30

Доброе время суток! Я работаю журналистом в одном из новых издательств и как раз ныне пишу статью по подобной Вашей тематике! Не могли бы Вы дать разрешение на публикацию Вашего материала в нашем печатном изданииб естественно с указанием ссылки на данную статью! Заранее благодарен!

Я извиняюсь, но, по-моему, Вы допускаете ошибку. Пишите мне в PM. Я считаю, что Вы ошибаетесь. Могу отстоять свою позицию. Пишите мне в PM, поговорим. Жаль, что сейчас не могу высказаться - нет свободного времени. Вернусь - обязательно выскажу своё мнение. Благодарю за информацию, теперь я буду знать. Очень полезная информация

Хорошая статья. Действительно было интересно почитать. Не часто такое и встречается та.Наверное стоит подписаться на ваше RSS

Действительно интересно. Побольше бы таких статей.

Очень интересная статья. Скажите, а могу ли я ее повесить на один из своих сайтов? Соотвественно с гиперсылкой на вас.

Сюжетик бы под это подогнать. Ракурс так сказать .

Я часто захожу сюда хотелось бы почаще видеть обновления .

Вы не перестоёте удивлять !!! Полноценое оформление пиши почаще.

Очень понравилось как тут всё расписано.

Спасибо большое!!!

очень интересно, но как вам удоётся так всё оформлять?

По моему, это не самый лучший вариант или я не права?

Я присоединяюсь ко всему выше сказанному. Можем пообщаться на эту тему.

Где вы это всё берёте )))

да я смотрю у вас тут комментарии какие то странные

Вы сегодня что то все уходите от темы что бы это значило

Мневсё пондравилась буду у вас теперь постояно .Всё просто супер!!!

Сегодня для себя узнала много интересного спасибо!

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

Май для россиян — это особенный месяц, отмеченный двумя очень важными весенними праздниками. День Победы и Праздник весны и труда — это дни, когда мы в очередной раз благодарим старшее поколение за мир и блага, ради которых они трудились и сражались. Спраздничком Вас www.webnata.ru

проект пондравился но после праздников тяжко что то и в голову нечё не лезит в следующий раз напищу есть вопрос.

Баг: ни с того ни с сего появилось сообщение "Копия". . Буду заглядывать чаще.

люблю такие посты

очень интересно

очень хорошо и понятно подан материал, но мне кажется у вас лишний закрывающийся

lucky_ann: ошибаетесь )