Оптимизация сайта всегда начинается с внутренней структуры. Сейчас мы займемся первым этапом этого процесса – созданием верстки, которая будет одинаково «приятна» и для пользователей, и для поисковых ботов.
Идея состоит в том, чтобы как можно выше в теле html-документа разместить контентную часть. В частности, до вывода шапки сайта. Читатели прежде всего приходят за информацией, но в большинстве случаев им приходится ждать загрузки тонны графических рюшечек в header`е перед тем как эту информацию они получат.
В качестве объекта эксперимента рассмотрим стандартный двухколоночный макет, наиболее подходящий для ведения блога. На рисунке ниже схематично показано то что должно получиться, цифрами обозначен порядок следования блоков в html
Код документа:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="styles.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="main">
<div id="container">
<div id="content">
Контент
</div>
<div id="sidebar">
</div>
<div class="clear"></div>
</div>
<div id="header"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
* {margin:0; padding:0;}
#main { margin:0 auto 0 auto; width:980px; position:relative;}
#header { height:200px; width:980px; position:absolute; top:0; left:0;}
#container { position:relative; padding:20px; width:940px; top:200px; }
#sidebar { position: relative; width: 210px; float: right; }
#content { position: relative; width: 700px; float: left; padding:0 10px; }
#footer { height: 120px; width:980px; position:relative; top: 200px; }
.clear {clear:both; line-height:0; height:0; font-size:0;}
Каким образом добились нужного результата:
- #main определяет контейнер всего сайта, его ширину, и выравнивание по центру. Свойство position:relative позволит внутри него абсолютно позиционировать блоки
- Блок #container идет первым в структуре, поэтому, для того чтобы оставить место под шапку, он смещен относительно своего статического положения на ее высоту, в данном случае на 200 пикселей — top:200px;
- Внутри #container плавающими элементами размещены контентная часть и сайдбар. Описывать не буду, делать это все давно и успешно умеют:)
- #header спозиционирован абсолютно по отношению к самому верхнему блоку #main свойствами top:0; left:0, что позволило ему быть выше контентной области при просмотре сайта, и ниже по коду html
- #footer в особых комментариях не нуждается, единственное что он тоже смещен по вертикали на 200px. Это необходимо, т.к. в исходном потоке документа #container находится выше своего реального положения (подробнее читайте про position:relative)
Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!
Подписаться в telegram
Ценный материал. Кроме того, если все сделать грамотно, то и для ранжирования будет толк, так поисковика нравится когда не нужно много кода пройти чтобы добраться до контента.
А кстати на сколько реально что-то изменить у же готовом шаблоне.
Все зависит в первую очередь от шаблона и того как его сверстали. Может будет проще переделать снова, а может и достаточным окажется добавить пару строк в css и перенести шапку ниже по коду.
Это применимо к Блоггеровским шаблонам? Или — только к WP?
Это общий принцип, по которому можно сверстать. А из верстки можно сделать шаблон для любого движка.
Этим методом уже давна пользуются. Так что Америку Вы не открыли. Хотя кто не знал этот способ материал полезный да и для новичков тоже.
Спасибо хороший материал. Сайт супер нашел много полезного для себя, спасибо админу!