Если вы скачивали папку с картинками, то они у вас уже есть.
Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок 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;
}
А сама страница так.
Мы добились чего хотели, наша страница занимает весь экран, но согласитесь, выглядит это не очень хорошо - слева "густо", справа
"пусто". Именно поэтому и надо определять вид дизайна до верстки, чтобы четко представлять, как это будет выглядеть в итоге,
какая часть будет "раздвигаться" и будет ли это хорошо выглядеть.
Например, для нашего случая можно было бы "раздвигать" центральную часть страницы, т.е. название, логотип и тарелочка размещались бы всегда справа, а в центре были бы пункты меню. Возможно, так было бы лучше, но для этого надо было и макет по-другому разрезать, и другие блоки создавать и по-другому их размещать. Кстати, для тренировки можете попробовать сверстать "резиновую" страницу у которой будет "разъезжаться" центральная часть.
А наши уроки, посвященные блочной верстке сайта, подошли к концу. Надеюсь, основную идею вы поняли, а все остальное придет с практикой.
Удачи вам и красивых сайтов!!!
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Делаем сайт - блочная верстка →
Урок 3. Блочная верстка резинового сайта
Блочная верстка резинового сайта
Блочная верстка резинового сайта подразумевает, что наша страница будет растягиваться на весь экран. Сначала надо определить, какая часть страницы будет растягиваться. В нашем случае самым простым вариантом будет растягивание правого края. Для этого нам понадобятся еще три картинки:Если вы скачивали папку с картинками, то они у вас уже есть.
Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок header со всем его содержимым в блок header_bg, зададим последнему ширину 100%, а фоном сделаем картинку header_bg.jpg. Аналогично поступим с блоками menu1, menu2 и menu3:
Наконец, в блоке footer поменяем ширину на 100%:
Как вы помните ширина наших картинок 800px, так же, как и ширина соответствующих блоков. А что будет, если уменьшить ширину блока на 1px? Правильно, наша фоновая картинка обрежется справа на тот же 1px. Этим мы и воспользуемся, т.е. поменяем везде 800px на 799px.
Окончательно таблица стилей будет выглядеть так:
Например, для нашего случая можно было бы "раздвигать" центральную часть страницы, т.е. название, логотип и тарелочка размещались бы всегда справа, а в центре были бы пункты меню. Возможно, так было бы лучше, но для этого надо было и макет по-другому разрезать, и другие блоки создавать и по-другому их размещать. Кстати, для тренировки можете попробовать сверстать "резиновую" страницу у которой будет "разъезжаться" центральная часть.
А наши уроки, посвященные блочной верстке сайта, подошли к концу. Надеюсь, основную идею вы поняли, а все остальное придет с практикой.
Удачи вам и красивых сайтов!!!
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.