Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

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

Неизменным элементом любого 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 код нашего каркаса после добавления меню навигации примет следующий вид:

 

 

<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>

 


 

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

 

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

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение