Блочная верстка резинового сайта подразумевает, что наша страница будет растягиваться на весь экран. Сначала надо определить, какая часть страницы будет растягиваться. В нашем случае самым простым вариантом будет растягивание правого края. Для этого нам понадобятся еще три картинки:
Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок 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">
© 2009 Все права защищены
</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;
}
А сама страница выглядет так. Мы добились чего хотели, наша страница занимает весь экран, но согласитесь, выглядит это не очень хорошо - слева "густо", справа "пусто". Именно поэтому и надо определять вид дизайна до верстки, чтобы четко представлять, как это будет выглядеть в итоге, какая часть будет "раздвигаться" и будет ли это хорошо выглядеть.
Например, для нашего случая можно было бы "раздвигать" центральную часть страницы, т.е. название, логотип и тарелочка размещались бы всегда справа, а в центре были бы пункты меню. Возможно, так было бы лучше, но для этого надо было и макет по-другому разрезать, и другие блоки создавать и по-другому их размещать. Кстати, для тренировки можете попробовать сверстать "резиновую" страницу у которой будет "разъезжаться" центральная часть.
А наши уроки, посвященные блочной верстке сайта, подошли к концу. Надеюсь, основную идею вы поняли, а все остальное придет с практикой.
Удачи вам и красивых сайтов!!!
Если вы скачивали папку с картинками, то они у вас уже есть.
Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок 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">
© 2009 Все права защищены
</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;
}
А сама страница выглядет так. Мы добились чего хотели, наша страница занимает весь экран, но согласитесь, выглядит это не очень хорошо - слева "густо", справа "пусто". Именно поэтому и надо определять вид дизайна до верстки, чтобы четко представлять, как это будет выглядеть в итоге, какая часть будет "раздвигаться" и будет ли это хорошо выглядеть.
Например, для нашего случая можно было бы "раздвигать" центральную часть страницы, т.е. название, логотип и тарелочка размещались бы всегда справа, а в центре были бы пункты меню. Возможно, так было бы лучше, но для этого надо было и макет по-другому разрезать, и другие блоки создавать и по-другому их размещать. Кстати, для тренировки можете попробовать сверстать "резиновую" страницу у которой будет "разъезжаться" центральная часть.
А наши уроки, посвященные блочной верстке сайта, подошли к концу. Надеюсь, основную идею вы поняли, а все остальное придет с практикой.
Удачи вам и красивых сайтов!!!
Информация предоставлена с сайта: http://www.site-do.ru
Комментариев нет:
Отправить комментарий