Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.
Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).
Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.
Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в 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.
Следующий урок Вернуться в раздел Скачайте одним архивом книгу по созданию сайтов с нуля!
Выбираешь сервис автоматизации постинга на стену вконтакте? Выбирай planpost.ru - сервис отложенного постинга вконтакте
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Делаем сайт - блочная верстка →
Урок 1. Блочная верстка сайта
Блочная верстка сайта
Искали специалиста по верстке сайта? Вам сюда! Нажимай.Если вы читали статью "Основные этапы создания сайта", то помните, что верстка сайта происходит после этапа создания макета. Иными словами, у вас должны быть готовы картинки всех ключевых страниц сайта.
Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков. Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.
Итак, мы имеем вот такую картинку (макет подготовлен в программе Photoshop).
Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.
Теперь посмотрим на наш макет. Для начала выключим весь текст. Конечно, в Photoshop можно нарисовать очень красивое название сайта, но с точки зрения дальнейшей оптимизации страниц сайта для его продвижения, лучше, чтобы название сайта являлось текстом, а не картинкой.
Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:
Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы, вот такая:
Картинки для примера можно скачать здесь.
Последний нюанс, у сайта может быть фиксированный либо резиновый дизайн. Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. Теперь все готово для верстки, открываем index.html и пишем стандартный код:
Блок reklama, в свою очередь, состоит из трех блоков:
reklama_top (ширина 263px, высота 67px (по фоновому рисунку),
reklama_text (ширина 263px, высота будет зависеть от содержания, а фоновый рисунок будет повторяться по вертикали),
reklama_bottom (ширина 263px, высота 35px (по фоновому рисунку).
Все три блока находятся в нормальном потоке. Запишем это:
Следующий урок Вернуться в раздел Скачайте одним архивом книгу по созданию сайтов с нуля!
Выбираешь сервис автоматизации постинга на стену вконтакте? Выбирай planpost.ru - сервис отложенного постинга вконтакте
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|