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

Блочная верстка резинового сайта подразумевает, что наша страница будет растягиваться на весь экран. Сначала надо определить, какая часть страницы будет растягиваться. В нашем случае самым простым вариантом будет растягивание правого края. Для этого нам понадобятся еще три картинки:



Если вы скачивали папку с картинками, то они у вас уже есть.

Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок header со всем его содержимым в блок header_bg, зададим последнему ширину 100%, а фоном сделаем картинку header_bg.jpg. Аналогично поступим с блоками menu1, menu2 и menu3:
<html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <div id="header_bg"> <div id="header"> <div id="headertext1">Льяно-Эстакадо</div> <div id="headertext2">насладись вкусом!</div> </div> </div> <div id="menu1_bg"> <div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Меню</a> | <a href="#" class="menu">Заказ столика</a> | <a href="#" class="menu">Отзывы</a> </div> </div> </div> <div id="menu2_bg"> <div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок шеф-повара</a> | <a href="#" class="menu">О нас</a> </div> </div> </div> <div id="menu3_bg"> <div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (495) 123-4567 </div> </div> </div> ...... </div> <!-- 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>
Теперь подкорректируем таблицу стилей. Выравнивание по центру нам больше не нужно, значит из body и main надо убрать эти свойства. Кроме того, фон для нашей страницы нам также больше не нужен, а ширина страницы теперь будет равна 100%. Следовательно, останется следующее:
body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px; } #main{ width:100%; }
Теперь добавим стили для наших новых блоков. Как мы и решили: шириной 100%, высотой, как у дочерних блоков и с соответствующей фоновой картинкой:
#header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x; } #menu1_bg{ width:100%; height:35px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x; } #menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x; } #menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x; }
Блок conteyner мы создали, как объединяющий блоки reklama и content. Стиль этому блоку не нужен, а вот положение блока content мы определим с помощью абсолютного позиционирования:
#content{ position:absolute; left:270px; top:298px; padding:15px; }
Расстояние сверху равно сумме высот блоков header, menu1, menu2 и menu3. Расстояние слева определяется шириной блока reklama.

Наконец, в блоке footer поменяем ширину на 100%:
#footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px; }
Вот теперь можете посмотреть на результат в браузере. Посередине страницы у нас идет зеленая линия, это граница наших картинок (при фиксированном дизайне она отделяла нашу страницу от фона). Как ее убрать? Есть два пути. Первый - переделать сами картинки. Но делать этого так не хочется, поэтому мы немного схитрим.

Как вы помните ширина наших картинок 800px, так же, как и ширина соответствующих блоков. А что будет, если уменьшить ширину блока на 1px? Правильно, наша фоновая картинка обрежется справа на тот же 1px. Этим мы и воспользуемся, т.е. поменяем везде 800px на 799px.

Окончательно таблица стилей будет выглядеть так:
body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px; } #main{ width:100%; } #header{ width:799px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat; } #menu1{ width:799px; height:35px; background-image: url(images/menu1.jpg); background-repeat:no-repeat; } #menu2{ width:799px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat; } #menu3{ width:799px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat; } #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{ position:absolute; left:270px; top:298px; padding:15px; } #footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px; } #headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF; } #headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #faf46e; } #textmenu1{ padding-left:270px; padding-top:10px; } #textmenu2{ padding-left:300px; padding-top:10px; } #textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF; } a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px; } #textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold; } a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px; } a.reklama:first-letter{ color:#02663d; } a{ color:#000000; } a:hover{ color:#02663d; } #header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x; } #menu1_bg{ width:100%; height:35px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x; } #menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x; } #menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x; }
А сама страница так. Мы добились чего хотели, наша страница занимает весь экран, но согласитесь, выглядит это не очень хорошо - слева "густо", справа "пусто". Именно поэтому и надо определять вид дизайна до верстки, чтобы четко представлять, как это будет выглядеть в итоге, какая часть будет "раздвигаться" и будет ли это хорошо выглядеть.

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

А наши уроки, посвященные блочной верстке сайта, подошли к концу. Надеюсь, основную идею вы поняли, а все остальное придет с практикой.

Удачи вам и красивых сайтов!!!



Предыдущий урок | Вернуться в раздел