Если вы читали статью "Основные этапы создания сайта", то помните, что верстка сайта происходит после этапа создания макета. Иными словами, у вас должны быть готовы картинки всех ключевых страниц сайта.
Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.
Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).
Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.
Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в Photoshop можно нарисовать очень красивое название сайта, но с точки зрения дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название сайта являлось текстом, а не картинкой.
Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:
Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.
Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).
Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в Photoshop можно нарисовать очень красивое название сайта, но с точки зрения дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название сайта являлось текстом, а не картинкой.
Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:
Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы, вот такая:
Картинки для примера можно скачать здесь.
Последний нюанс, у сайта может быть фиксированный либо резиновый дизайн. Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. Теперь все готово для верстки, открываем index.html и пишем стандартный код:
<html>
<head>
<title> Блочная верстка сайта </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Теперь в теги <body> </body> поместим блок с идентификатором main и разместим в нем все намеченные нами на картинке блоки:
<html>
<head>
<title> Блочная верстка сайта </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="reklama">
<div id="reklama_top"></div>
<div id="reklama_text"></div>
<div id="reklama_bottom"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</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.
<html>
<head>
<title> Блочная верстка сайта </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Теперь в теги <body> </body> поместим блок с идентификатором main и разместим в нем все намеченные нами на картинке блоки:
<html>
<head>
<title> Блочная верстка сайта </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="reklama">
<div id="reklama_top"></div>
<div id="reklama_text"></div>
<div id="reklama_bottom"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</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.
Информация предоставлена с сайта: http://www.site-do.ru
Комментариев нет:
Отправить комментарий