Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее

Навигация по сайту

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

Почему именно CSS меню?

Создание навигации для сайта является одним из наиболее важных моментов. От меню зависит удобство посетителей сайта и индексация страниц сайта поисковыми машинами. Многие создают на своих сайтах различные Jscript и Flashменю. С точки зрения юзабилити и оптимизации это совершенно неверный подход.

Во-первых, у многих пользователей установлены интернет–обозреватели без поддержки мультимедийных технологий, ввиду чего красивое анимационное меню у них попросту не будет отображено.

Во-вторых поисковые машины не индексируют Flash, и только самые передовые из них могут проиндексировать ссылки, хранящиеся во Flash навигации, но ни одна поисковая машина не индексирует текст, написанный на Flash.

Наиболее удачной технологией для создания навигации я считаю CSS. Созданием CSS меню мы и займемся.

Создаем CSS меню.

Для начала создадим следующий список:

<div id=»css_menu»>
<ul>
<li><a href=»»><strong>ГЛАВНАЯ</strong></a></li>
<li><a href=»»><strong>ТОВАРЫ</strong></a></li>
<li><a href=»»><strong>УСЛУГИ</strong></a></li>
<li><a href=»»><strong>ДОСТАВКА</strong></a></li>
<li><a href=»»><strong>КОНТАКТЫ</strong></a></li>
<li><a href=»»><strong>О НАС</strong></a></li>
<li></li>

</ul>
</div>

 Теперь перейдем к таблицам стилей:

#css_menu { width:200px; font – family: Verdana, Geneva, Arial, Helvetica, sans – serif; font – size:15px; margin – top : – 9px; }

#css_menu ul { list – style: none; }

#css_menu ul li { }

#css_menu ul li a { display: block; text – decoration:none; color: Black; line – height: 25px; border – bottom – style: groove; border – bottom – width:1px; border – bottom – color: White; padding – left:25px; cursor:pointer; margin – right : 3px; margin – left : – 37px; }

#css_menu ul li a:hover { color: White; background – image:url(img/hover1.png); background – repeat:repeat – x; }

#css_menu ul li a strong { margin – right:10px; }

Разместим наше CSS меню в левой части нашего сайта, как показано на изображении:

Размещение

HTML код нашего каркаса после добавления меню навигации примет следующий вид:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ id=»main_table»>
<tr>
<td height=»136″ id=»td_header»><table width=»100%» border=»0″ align=»right» cellpadding=»0″ cellspacing=»0″>
<tr>
<td width=»19%»><img src=»img/plata_header.png» width=»300″ height=»150″></td>
<td width=»69%» valign=»bottom»>&nbsp;</td>
<td width=»12%»></td>
</tr>
</table></td>
</tr>
<tr>
<td height=»422″><table width=»100%» border=»0″ cellpadding=»0″ cellspacing=»0″ >
<tr>
<td width=»8%» height=»493″ valign=»top» id=»td_menu»>

<div id=»css_menu»>
<ul>
<li><a href=»»><strong>ГЛАВНАЯ</strong></a></li>
<li><a href=»»><strong>ТОВАРЫ</strong></a></li>
<li><a href=»»><strong>УСЛУГИ</strong></a></li>
<li><a href=»»><strong>ДОСТАВКА</strong></a></li>
<li><a href=»»><strong>КОНТАКТЫ</strong></a></li>
<li><a href=»»><strong>О НАС</strong></a></li>
<li></li>

</ul>
</div>

</td>
<td width=»83%» valign=»top» id=»td_center»></td>
<td width=»9%» valign=»top» id=»td_menu_right»>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height=»39″ id=»td_footer»></td>
</tr>
</table>


В этом уроке мы создали красивое меню навигации для нашего сайта, которое будет корректно отображаться в большинстве браузеров и прекрасно индексироваться ПМ.

А теперь пришло время заполнить страницы нашего сайта информацией, чем мы и займемся в следующем уроке.

Вы читаете учебник как создать свой сайт.