Ещё один аргумент к перманентной баталии: что лучше для дизайна, таблицы или слои, -- вгляд как вёрстка слоями с использованием CSS может улучшить позиции сайта в выдаче.
Не секрет, что поисковые машины и люди-посетители сайта видят одну и туже страницу по-разному, люди -- как она отображается на экране броузера, а роботы -- в виде файла с HTML кодом. Но и те и другие просматривают страницы сверху вниз, подразумевая, что самое главное расположено в верхней части. Посмотрите HTML код вашей страницы, как долго вам нужно скролировать экран вниз, чтобы увидеть контент этой страницы ?
С точки зрения электронного мозга поискового робота, суть страницы (о чём собственно эта страницы) определяется следующим образом: если страница начинается некоторыми словами, эти слова встречаются во всём тексте страницы, и этими же словаим страница заканчивается, - весьма вероятно этими словами и описывается то, о чём эта страница. Покажем на примере, как используя CSS можно максимально извлечь выгоду из такой схемы работы поисковых машин, и при этом не нарушая схему визуального расположения блоков на экране броузера.
<html>
<head>
Вставьте все ваши заголовки, включая ссылку на CSS аналогично указаному ниже
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
<body>
<div id="content"> < !–Объяснение этому div ниже–>
<h1>Заголовок с ключевыми словами</h1>
<h2>Подзаголовок с ключевыми словами</h2>
<p>Место для вашего контента. Обратите внимание, насколько близко он расположен к началу кода вашей страницы, независимо от того, где он будет отображаться на экране броузера.</p>
</div> < !–This would be the end content div–>
<div id="nav"> < !–Пример div представляющего навигацию сайта–>
<p>Навигация может содержать как картинки-кнопки, так и текстовые сслыки, а может и то и другое. При табличном дизайне, обычно этот раздел располагается в HTML-файле выше контента, теперь же он ниже, где и должен быть.</p>
</div>
<div id="banner">
<p>Как следуюет из названия раздела, обычно он располагается на экране броузера в верху страницы, а при табличной вёрстке -- в самом начале файла. Т.к. зачастую этот раздел не содержит полезной для SEO информации, это опредленно не тот код, который поисковый робот должен видеть первым на вашей странице.</p>
</div>
<div id="summary">
< !–Этот div может содержать что угодно, дан здесь для примера–>
<p>Это пример, ислюстрирующий один из принципов SEO. Используйте здесь ваши ключевые слова, появляясь в конце страницы, они делают вашу SEO лучше.</p>
</div>
</body>
</html>
Далее покажем, как в фале file.css управлять раположением блоков. Для простоты показано только управление расположением, без указания шрифтов, цветов, размеров и прочего. В HTML коде выше задано четыре размела (div), мы можем указывать их расположените на экране в пиксела или процента. Будем использовать пикселы для простоты.
/*Начало CSS*/
#nav {position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 500px;
padding: 20px 10px 10px 20px;
}
/* Для наглядности, разделы в файле стилей указаны в другом порядке, нежели в фале HTML. Стиле разделов указываются в порядке построения структуры отображения документа на экране брооузера, это примерно соответсвет порядку следования блоков при табличной вёрстке страницы. Этот раздел навигации привязывается к левому верхнему углу окна броузера. Указаная ширина в 200 пикселей равна ширене ячейки таблицы при табличной верстке. Высота в 500 писелей выбрана произвольно для примера. Раздел summary, описаный ниже будет распологаться ниже того места, где заканивается раздел навигации. Вы должны убедиться, что все элементы оаздела помещаются в указаные вами размеры, и изменить эти размеры по мере необходимости. Также как и при табличной вёрстке, вы можете задавать отступы от края раздела, в примере выше - это 20 пикселей сверху и слева, и 10 писелей справа и снизу.*/
#summary {position: absolute;
top: 500px;
left: 0px;
width: 200px;
padding: 20px 10px 10px 20px;
}
/* Раздел summary начинается там, где заканчивается раздел навигации, в 500 пикселей от верхнего края. Остальные параметры указаны так, чтобы выравнивание было ровным. Высота не указана, поэтому размер будет подобран по содержимому аналогично ячейке таблицы при табличной вёрстке.*/
#banner {position: absolute;
top: 0px;
left: 200px;
width: 550px;
height: 150px;
padding: 20px 0px 10px 20px;
}
/* Заголовок распологается вверху страницы, но в 200 пикселях от левого края, там, где заканчиватся раздел навигации. Указывать высоту необязательно, но указав, можно задать, где будет начинатся основной контент страницы. Значение высоты в 150 писелей указано для пример. Отстут справа задан нулевым, т.к. остальная часть экрана правее будет пуста, т.е. отступать не от чего. Ширина задана исходя из того, чтобы всё умещалось в разрешении 800х600 (суммарная ширина 750 пикселей).*/
#content {position: absolute;
top: 150px;
left: 200px;
width: 550px;
padding: 10px 0px 10px 20px;
}
/* Наконец, контент начинается там, где заканчивается заголовок и навигация, в 220 пикселя от левого края и в 150 пикселях от верхнего.*/
/*Конец CSS*/
//SearchEngineJournal