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

Неизменным элементом любого 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 меню в левой части нашего сайта, как показанно на изображении:

Css меню навигации

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

</ul>
</div>

</td>
<td width="83%" valign="top" id="td_center"></td>
<td width="9%" valign="top" id="td_menu_right"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="39" id="td_footer"></td>
</tr>
</table>

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

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

Наверх

Источник: Создание сайтов