Давайте разберемся с CSS оптимизацией вывода информации на сайте, чтобы понравиться поисковым роботам.
Вы задумывались, почему одни сайты стоят выше других в поисковой выдаче? Одна из причин - оптимизация сайта, вернее оптимизация структуры сайта.
Т.к. поисковые роботы читают код сайтов сверху вниз, то более важным они считают то что находится сверху.
Посмотрим на стандартную верстку сайта из двух колонок:
вариант 1
Тут робот прочитал контент, потом меню, все верно.
А что делать, если нужно меню поставить слева? Чтобы было так:
вариант 2сайт источник http://yapro.ru Mon Jun 21 2010 14:17:11 GMT+0400
В этом случае робот прочитает меню, а потом контент, тут поисковая оптимизацией уже не пахнет. Но, с помощью CSS можно вариант 1 визуально превратить в вариант 2.
Теперь важный момент, есть 2 варианта решения, на основе резиновой ширины меню и на основе статичной ширины меню, разберемся с каждым из них.
Динамичное меню (резиновая ширина)
Если Вам нужно резиновое меню, то Matthew James Taylor предлагает Вам такойсайт источник http://yapro.ru Mon Jun 21 2010 14:17:24 GMT+0400 шаблон:
Резиновый шаблон на 2 колонки можно посмотреть или скачать »
Менял данный шаблон из двух колонок под один из своих проектов и разобравшись с CSS, решил поделиться своей заметкой, комментарии в коде:
.leftmenu {
background:#fff;
}
.leftmenu .colleft {
right:75%; /* внешняя ширина правой колонки | R_width_outer */
background:#CCC;
}
.leftmenu .col1 {
width:73%; /* внутренняя ширина правой колонки | R_width_inner ( должна быть меньше чем R_width_outer ) */
left:101%; /* паддинг слева для R_width_inner, рассчитывается как 100% + необходимый паддинг слева */
background-color:#FFCCCC;
}
.leftmenu .col2 {
width:23%; /* ширина левой колонки | L_width_inner */
left:3%; /* L_margin_rl это сумма левого и правого маржина для L_width_inner. Рассчитывается как L_margin_rl + (L_margin_rl/2) */
background-color:#FFFFCC;
}
Кстати, если Вам нужен сайт из трех резиновых блоков, то такой тоже есть:
Резиновый шаблон на 3 колонки можно посмотреть или скачать »
Подсказка: ширина колонок задается в файле screen.css, правилами:
.threecol .col1 { }
.threecol .col2 { }
.threecol .col3 { }
Выше описанные шаблоны поддерживаются в браузерах:
- Firefox 1.5, 2 & 3
- Safari
- Opera 8.1 & 9
- Google Chrome
- Explorer 5.5, 6 & 7
Обратите внимание: ни в одном шаблоне не используются CSS-хаки и expression
Статичное меню (заданная ширина)
В этом случае все не так просто, но решение нашлосьсайт источник http://yapro.ru Mon Jun 21 2010 14:17:30 GMT+0400, я его доработал и теперь хочу поделиться с Вами.
Посмотрите шаблон с статичным меню на 2 колонки, на 3 колонки или скачайте оба варианта »
Вся хитрость заключается в указании ширины следующими правилами:
#documentLeft { width:291px; _width:288px;/* для IE6 минус 3px */ }
#documentRight { margin:0 0 0 -291px; float:right; width:100% }
#documentRightInner { margin:0 0 0 291px; }
Подсказка: файл style.css - обнуляющий фрейморк, уверен Вы используете свой.
Для указания шириниы 3-х колоночного шаблона, можете использовать правила:
#myCenter { }
#myRight { }
Данные шаблоны поддерживаются в браузерах:
- Firefox
- Safari
- Opera
- Google Chrome
- Explorer 6 и выше
Обратите внимание: ни в одном шаблоне не используются expression, и только 1 CSS-хак для IE6
Давайте верстать правильно ;)
А вот еще один парень (Alessandro Fulciniti) подготовил 40 вариантов шаблонов для особо ленивых.
Восхищён Вами!!!! Спасибо, что Вы есть!!!
