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

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

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

Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).

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

Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.

Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в Photoshop можно нарисовать очень красивое название сайта, но с точки зрения дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название сайта являлось текстом, а не картинкой.

Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:



Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы, вот такая:



Картинки для примера можно скачать здесь.

Последний нюанс, у сайта может быть фиксированный либо резиновый дизайн. Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. Теперь все готово для верстки, открываем index.html и пишем стандартный код:
<html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Old_YandexMetrika --><!-- Old_YandexMetrika --><!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>
Теперь с помощью таблицы стилей (style.css) зададим положение, размер и фон этих блоков. Блок main имеет ширину 800px, фоновый рисунок fon_bg.jpg, который повторяется по вертикали:
#main{ width:800px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y; }
Блок header находится в нормальном потоке, имеет ширину 800px и высоту 155px (это размеры фонового рисунок header.jpg, который не повторяется ни по горизонтали, ни по вертикали):
#header{ width:800px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat; }
Блоки menu1, menu2, menu3 находятся в нормальном потоке, имеют ширину 800px, а высоты 35px для menu1, 36px - для menu2 и 72px - для menu3 (это размеры соответствующих фоновых рисунков):
#menu1{ width:800px; height:35px; background-image: url(images/menu1.jpg); background-repeat:no-repeat; } #menu2{ width:800px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat; } #menu3{ width:800px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat; }
Блоки reklama и content будут плавающими. Чтобы блок content прижимался к правой стороне блока reklama мы зададим обоим свойство float:left. Ширина блока reklama - 263px (по фоновому рисунку), а блока content - все остальное пространство, т.е. 507px.

Блок reklama, в свою очередь, состоит из трех блоков:

reklama_top (ширина 263px, высота 67px (по фоновому рисунку),

reklama_text (ширина 263px, высота будет зависеть от содержания, а фоновый рисунок будет повторяться по вертикали),

reklama_bottom (ширина 263px, высота 35px (по фоновому рисунку).

Все три блока находятся в нормальном потоке. Запишем это:
#reklama{ float:left; width:263px; } #reklama_top{ width:263px; height:67px; background-image: url(images/reklama_top.jpg); background-repeat:no-repeat; } #reklama_text{ width:263px; background-image: url(images/reklama_bg.jpg); background-repeat: repeat-y; } #reklama_bottom{ width:263px; height:35px; background-image: url(images/reklama_bottom.jpg); background-repeat:no-repeat; } #content{ float:left; width:507px; }
И последний блок - блок footer. Его ширина 800px, высота 28px, фоном является повторяющийся по горизонтали рисунок footer.jpg. Чтобы этот блок расположился ниже предыдущих, мы запретим его обтекание с обеих сторон свойством clear:both.
#footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; }
Сейчас наша страница выглядит так. Она прижата к левому краю и имеет отступы сверху и слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами решается добавлением свойства margin:0px для body. Центрировать будем так же, как делали это в примере о выравнивании страниц.
body{ width:800px; padding-left:50%; margin:0px; } #main{ width:800px; margin-left:-400px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y; }
Осталось наполнить страницу нужным текстом, этим мы займемся в следующем уроке. В качестве тренировки, можете взять любую картинку и перенести ее аналогичным образом в html.



Следующий урок Вернуться в раздел