Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

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

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Навигационные CSS-панели на основе списков

Главная « Уроки Web-мастерства « Навигационные CSS-панели на основе списков

версия для печати

Горизонтальные навигационные панели …

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

Если подумать, то имеет смысл разметить навигационные опции в исходном коде в форме списка. Применяя CSS, можно использовать семантическую разметку и при этом визуально отобразить опции в виде знакомой горизонтальной линейки.

Существует два способа превращения маркированного списка в горизонтальную навигационную панель. При первом способе элементы списка отображаются в одну строку вместо столбца (который задан по умолчанию для блочных элементов).

При втором способе для выстраивания в ряд элементов списка и ссылок используются плавающие объекты. В обоих примерах используется приведенная ниже разметка обычного несортированного (маркированного) списка, состоящего из пяти элементов.

На (рис. 1) показано, как такой список выглядит при отображении заданными по умолчанию стилями браузера.

Код:
/* Список без применения стилей */
<ul id="nav">
   <li><a href="#">Вода</a></li>
   <li><a href="#">Огонь</a></li>
   <li><a href="#">Ветер</a></li>
   <li><a href="#">Земля</a></li>
   <li><a href="#">Пятый элемент</a></li>
</ul>
 
(рис. 1) Список без применения стилей.
 

Внутристрочные элементы списков …

Мы начнем с элементарного стилевого правила, удаляющего маркеры списка (list-style-type: none) и отображающего элементы списка рядом друг с другом вместо столбца (display: inline).

Для полей и интервалов задаются нулевые значения, чтобы подготовить почву для применения стилей к элементу-анкеру (а). Результат применения этих стилей показан на (рис. 2).

Код:
/* Горизонтальное отображение списка */
ul#nav {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}
ul#nav li {
   display: inline;
}
 
(рис. 2) Горизонтальное отображение списка.

После всего этого можно применять стиль к элементам-анкерам (а). В данном примере было убрано подчеркивание элементов и добавлены рамка, фоновый цвет и интервалы.

Для состояния наведения был указан альтернативный стиль, как я уже показывал в статье: CSS-эффекты наведения указателя мыши. Готовый навигационный список (рис. 3) - это очень простой пример того, что можно получить.

Код:
/* Добавление стилей к внутристрочному списку */
ul#nav li a {
   padding: 0.5em 0.4em 0.5em 0.5em;
   margin: 0 1.0em 0 0;
   border: 1px solid #0000ff;
   background-color: #fff;
   color: #ee0000;
   text-decoration: none;
   text-align: center;
}
ul#nav li a:hover {
   background-color: #ed0000;
   color: #fffeed;
}
 
(рис. 3) Добавление стилей к внутристрочному списку.
 

Пример простой навигационной панели …

И в завершении первой части статьи, привожу полный HTML-код со встроенным CSS-кодом, для горизонтальной навигационной панели (Пример №1).

Достаточно будет просто скопировать код примера в код вашей страницы, а CSS-правила - в файл таблиц стилей и затем подкорректировать их для конкретных нужд.

Это очень удобно и поможет вам сэкономить время, используя готовые заготовки, лишь слегка изменив их.

 
(Пример №1) Горизонтальная навигационная панель, созданная при помощи внутристрочных элементов списка
 
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Внутристрочные элементы списков | Горизонтальная навигационная панель</title>

<style type="text/css">
<!--

body {
   margin : 0px;
   padding : 0px;
   font-size : 82%;
   line-height : 135%;
   font-family : Arial, sans-serif;
   background-color: #fff;
}

/* Горизонтальное отображение списка */
ul#nav {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
ul#nav li {
   display: inline;
}

/* Добавление стилей к внутристрочному списку */
ul#nav li a {
   padding: 0.5em 0.4em 0.5em 0.5em;
   margin: 0 1.0em 0 0;
   border: 1px solid #0000ff;
   background-color: #fff;
   color: #ee0000;
   text-decoration: none;
   text-align: center;
}
ul#nav li a:hover {
   background-color: #ed0000;
   color: #fffeed;
}

-->
</style>
</head>

<body>

<ul id="nav">
   <li><a href="#">Вода</a></li>
   <li><a href="#">Огонь</a></li>
   <li><a href="#">Ветер</a></li>
   <li><a href="#">Земля</a></li>
</ul>

</body>
</html>
 

Плавающие элементы списка …

В другом методе создания горизонтальных списков используется свойство (float), благодаря которому элементы списка выстраиваются рядом друг с другом.

При использовании свойства (float) важно, чтобы для следующего элемента в исходном коде было задано значение (clear: both), чтобы содержимое страницы не обтекало список.

Вот лишь один из множества вариантов форматирования навигационной панели при помощи плавающих элементов списка.

Первые этапы связаны с отключением отображения маркеров (list-style-type: none), превращением элементов в плавающие (float: left), а затем идет применение стилей к ссылкам (а) как к блочным элементам.

Код:
/* Навигационная панель, созданная при помощи плавающих элементов списка */
ul#nav {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
ul#nav li {
   float: left;
   margin: 0 1.0em 0 0;
   padding: 0;
}
ul#nav li a {
   display: block; /* позволяет задать высоту и ширину элемента */
   float: left; /* только для исправления отображения в IE-Mac */
   width: 100px;
   height: 32px;
   line-height: 32px;
   background: url(back.gif) #0000ff no-repeat;
   color: #fff;
   text-decoration: none;
   text-align: center;
}

/* Трюк с обратной косой чертой скрывает правило от IЕ5-Мас \*/
ul#nav li a {
   float: none;
}
/* Конец обходного маневра для IЕ5-Мас */

ul#nav li a:hover {
   background: url(back_over.gif) #ed0000 no-repeat;
   color: #fff;
}

На этот раз вместо сплошного фонового цвета к каждой ссылке применяется фоновое изображение (Пример №2), меняющееся при наведении (смотрите статью: CSS-эффекты наведения указателя мыши).

 
(Пример №2) Горизонтальная навигационная панель, созданная при помощи плавающих элементов списка.
 

Статьи по работе со списками и навигационными панелями …

Примеры, приведенные в этой статье, - это самые элементарные примеры того, как можно использовать CSS для создания навигационных панелей из семантической и логически правильной разметки списка.

Существуют более сложные методы и более подробные руководства, ниже я приведу только некоторые из многочисленных интернет-ресурсов.

На сайте A List Apart опубликована статья, состоящая из двух частей: «Sliding Doors of CSS, Parts I» и «Sliding Doors of CSS, Parts II», автор Дуглас Боумен (Douglas Bowman).

Проблема с приведенным выше примером плавающих элементов списка состоит том, что, если пользователь изменит размеры текста, текст выйдет за рамки графики. В своей статье Дуглас Боумен предлагает свой оригинальный метод, где графика изменяет размер вместе с текстом.

Статья выдающегося Web-дизайнера Дэвида Ши (David Shea): «Accessible Image-Tab Rollovers», в этой статье навигационная панель на основе списка объединяется с методом замены текста изображением.

И снова статья на сайте A List Apart, автора Марка Ньюхауса (Mark Newhouse): «CSS Design: Taming Lists», в этой статье описывается несколько хитростей применения CSS для управления представлением списков, включая различные области применения внутристрочных элементов списка.

 
Урок № 15: | Дата: 10.03.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Внутристрочные элементы списков…

Пример простой навигационной панели…

Плавающие элементы списка…

Статьи по работе со списками и навигационными панелями…

Пример №1…

Пример №2…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

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

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov