Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

DIV верстка сайта

Исходник

На данный момент табличная верстка сайтов уходит в прошлое и её активно вытесняет блочная верстка с помощью тегов DIV, в этом уроке я покажу вам пример DIV верстки с фиксированным дизайном.

Итак для начала давайте обсудим модель будущей страницы, она будет располагаться по центру, ширина будет фиксированной ровно 600 пикселей, наглядная модель на рисунке ниже:

Как вы понимаете модель довольно таки простая и сложных элементов в ней нет и если вы раньше верстали таблицами то после этого урока вы поймете насколько короче удобнее и красивее становится код вашего сайта.

Давайте перейдем к делу, для начала сделайте обычную пустую страничку:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример резиновой верстки сайта!</title>
</head>
<body style="padding:0; margin:0;">
</body>
</html>

Теперь давайте создадим отдельно таблицу стилей и прикрепим её к нашей страничке:

<link href="style.css" rel="stylesheet" type="text/css" />

Эту строчку мы добавим между тегами <head></head>, идем дальше теперь нам необходимо разобраться со стилями, давайте пойдем по порядку для начала зайдем в файл CSS и добавим следующее:

body {
padding: 0px;
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background:#000000;
text-align:center;
}
h1 {
font-size:16px;
font-weight: bold;
text-align:center;
margin: 0px;
padding: 5px;
}
p {
padding: 10px;
}
li {
padding: 15px;
}
ul {
list-style:none;
}

Поясню что к чему, для начала мы задаем тегу body нулевые отступы, затем говорим стандартный шрифт, цвет и в конце выравнивание по центру, но параметра text-align: center; недостаточно по крайней мере не для всех браузеров, для этого мы будем использовать еще одну хитрость о которой я расскажу попозже.

Затем мы устанавливаем отступы для тегов p и li, и убираем точки в списках для тегов ul. Едем дальше:

#main {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background-color:#FFFFFF;
}

Здесь мы объявили идентификатор main, и задали ему ширину 600px; margin-left: auto; margin-right: auto; дадут нам выравнивание нашего блока по центру и сделали отступ от верха, чтобы блок не прилип к верхней границе, ну и опять таки задали цвет. Теперь давайте напишем стиль для шапки сайта, поскольку он будет полностью из изображения кроме размерных параметров нам больше ни чего не понадобиться:

#head {
width: 100%;
height: 125px;
}

Соответственно задаем ширину и высоту, ширина в процентах, а высота в пикселях. Теперь давайте напишем стили для главной части:

#colum {
width: 600px;
background-color: #FFFFFF;
clear:both;
}
#text {
width: 450px;
float:left;
text-align:left;
background-color:#FFFFFF;
}
#right {
width: 149px;
border-left: 1px solid #000000;
background-color:#FFFFFF;
float:left;
}

И так для чего нам нужен идентификатор #colum, а нужен он нам для того чтобы мы могли во- первых задать общий фон двум колонкам, поскольку они не равного размера и этот слой сыграет роль фона, а во-вторых чтобы мы могли без лишних проблем применять float. Еще один интересный момент, clear:both; это элемент визуального форматирования и он определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком, в нашем случае все стороны, он даст нам возможность применить float, к подвалу для более удобного формирования блоков.

Далее текстовая область #text здесь мы задаем размер, и прижимаем блок к левой стороне родительного блока который мы сделали #colum, как я и писал ранее он нам для этого и нужен, если хотите узнать подробнее о float посмотрите в спецификации или поищите статьи он нем написано достаточно много.

Ну и правая колонка меню навигации нашего сайта здесь все как в предыдущем примере только мы еще сделали линию слева черного цвета толщиной один пиксель border-left: 1px solid #000000; для красоты… Едем дальше:

#right li {
padding: 3px;
}
#right ul {
margin: 0px;
padding: 0px;
}

Здесь для списков в блоке навигации задаются отступы, поскольку такие отступы как в основном тексте нам не к чему. И наконец остался подвал:

#footer {
width: 600px;
height: 40px;
color: #ffffff;
font-size: 12px;
background-image:url(src/footer-bg.jpg);
text-align: center;
float:left;
}
#footer p {
padding: 0px;
margin: 0px 15px 0px 10px;
}

Здесь я думаю нового вы ни чего не найдете, задана высота, ширина, цвет шрифта, размер, фоновое изображение, ну и куда у нас оно будет прилипать. Теперь наконец нам пора перейти к нашему главному html файлу и именно здесь мы увидим основные преимущества div верстки. И так добавляем следующий код в файл index.html

<div id="main">
<div id="head"><img src="src/header.jpg" /></div>
<div id="colum">
<div id="text">
</div>
<div id="right">
</div>
</div>
<div id="footer">
<p> </p>
</div>
</div>

И все, и ни каких лишних тегов, остается только добавить текст и ссылки. Теперь я думаю, вы понимаете почему div верстка намного короче и качественнее чем табличная, меньше тегов меньше перегрузки и лишних параметров, все красиво и просто главное следовать правилам css. Конечно это не единственный вариант исполнения данной модели но очень качественный и работающий.

Дата публикации:2010-01-10


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget