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

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



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

Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок 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> </body> </html>
В браузере пока не проверяйте, сначала надо чуть-чуть переписать дальнейший код, а именно блоки reklama и content со всем их содержимым поместить в блок conteyner:
<html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> ...... <div id="conteyner"> <div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас заказать столик в ресторанах: </div> </div> <div id="reklama_text"> <div id="textreklamatext"> <a href="#" class="reklama"> Баттисета’с</a> <a href="#" class="reklama"> Бифштекс Чарли Палмера</a> <a href="#" class="reklama"> Драфт</a> <a href="#" class="reklama"> Лимончелло</a> <a href="#" class="reklama"> Мили</a> <a href="#" class="reklama"> Эйфелева башня</a> <a href="#" class="reklama"> Хьюго</a> </div> </div> <div id="reklama_bottom"></div> </div> <div id="content"> <img src="images/bludo1.jpg" align="left"> <a href="#">Бельгийская кухня</a><br> Тонкое смешение местных традиций с иностранным влиянием соседних земель - Франции, Германии, Италии, Голландии, Испании и Скандинавии. Бельгийцы любят говорить, что блюда их кухни готовятся с французским изяществом и подаются с немецким великодушием. <div style="clear:both"></div> <a href="#">Итальянская кухня </a><br> <img src="images/bludo2.jpg" align="right"> Для большинства людей - это пицца, ризотто, кьянти и макароны (или паста). Однако при более детальном знакомстве с рецептами итальянской кухни выясняем, что в Италии нет как таковой национальной кухни, поскольку и сама Италия как единое государство в современных границах существует немногим более одного столетия. </div> </div> <div id="footer"> © 2017 Все права защищены </div> </div> </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; }
А сама страница так. Мы добились чего хотели, наша страница занимает весь экран, но согласитесь, выглядит это не очень хорошо - слева "густо", справа "пусто". Именно поэтому и надо определять вид дизайна до верстки, чтобы четко представлять, как это будет выглядеть в итоге, какая часть будет "раздвигаться" и будет ли это хорошо выглядеть.

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

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

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



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