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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое CMS?

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

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

Карта сайта

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

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

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

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

Заголовки

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

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

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

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

Метаданные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

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

Главная « Уроки Web-мастерства « Создание компонентов интерфейса в XHTML

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

Элементы навигации и меню на базе списков

Элементы навигации и CSS-меню на базе списков…

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

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

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

 
Списки

Списки…

Существует три вида списков: нумерованные, ненумерованные и списки определений. Для их создания используется похожий код, но применять их следует исходя из предназначения:

  • в ненумерованных списках по умолчанию для каждого пункта используется маркер, вы можете изменить маркер на пустой кружок, квадрат, изображение или тильду (˜);

  • в нумерованном списке пункты по умолчанию нумеруются, для чего можно выбрать в том числе латинские цифры и буквы;

  • списки определений (или вложенные списки) содержат подпункты; такой тип списка можно использовать, например, для предметного указателя.

Ненумерованный список открывается с тега <ul>, который содержит несколько пунктов списка (li) и закрывается тегом <⁄ul>.

Нумерованный список очень похож на ненумерованный, но для него используются теги <ol>…<⁄ol>. В таком списке каждый пункт последовательно пронумерован арабскими или латинскими цифрами либо буквами, в зависимости от значения свойства list-style-type. Поместить маркер пунктов списка можно как снаружи, так и внутри списка с помощью свойства list-style-position.

 
Добавление стилей к спискам

Добавление стилей к спискам…

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

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

Итак, начнем с добавления стилей к списку навигационных ссылок, которые красуются в левой панели практически любого сайта. Ниже приведен код разметки ненумерованного списка, расположенного внутри div, то есть содержащего навигацию элемента, в данном случае это левая колонка разметки.

Код:
<div id="menunav">
   <ul>
      <li>раздел №1</li>
      <li>раздел №2</li>
      <li>раздел №3</li>
      <li>раздел №4</li>
      <li>раздел №5</li>
      <li>раздел №6</li>
      <li>раздел №7</li>
   </ul>
</div>

Вначале отобразим границы <div>, в котором находится наш список (рис. 1):

Код:
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
 
(рис. 1) Ненумерованный список внутри <div> с включенными границами.

Затем включим границы для элементов <ul> и (li), чтобы понять расположение отдельных элементов списка (рис. 2).

Код:
ul {
   border: 1px solid #ff0000;
}
li {
   border: 1px solid #008000;
}
 
 
(рис. 2) Включив границами для <ul> и (li), мы видим, что Firefox (вверху) и IE (внизу) по умолчанию применяют разные стили к спискам.

На рис. 2 граница <ul> выделена красным, а граница (li) - зеленым цветом. Как видно, браузер Firefox использует отступы для <ul>, чтобы сместить список (зеленые элементы отодвигаются от красного контейнера <ul>), а также добавляет небольшие верхнее и нижнее поле, чтобы отделить список от окружающих элементов.

Internet Explorer добавляет поля к <ul> (обратите внимание, что <ul> плотно обхватывает элементы (li), и оба они смещены от <div>), а также добавляет только нижнее поле. Эти различия затрудняют создание одинакового облика списков в различных браузерах. Единственным способом обойти их является изначальный сброс значений полей и отступов по умолчанию и последующее явное их указание.

Итак, зададим поля и отступы для <ul> и (li) обоих элементов списка равными нулю (рис. 3):

Код:
ul {
   border: 1px solid #ff0000; margin: 0; padding: 0;
}
li {
   border: 1px solid #008000; margin: 0; padding: 0;
}
 
 
(рис. 3) Теперь и Firefox (вверху), и IE (внизу) отображают списки идентично. Обратите внимание, что когда в Internet Explorer маркеры смещены за пределы <ul>, они не отображаются.

Теперь списки выглядят одинаково и в Firefox, и в Internet Explorer. Обратите внимание, что маркеры, принадлежащие элементам (li), теперь находятся за пределами <div>. Если <div> расположен прямо возле кромки окна, маркеры полностью не видны. Поэтому необходимо к <ul> добавить левое поле минимального размера, чтобы маркеры оставались внутри <div> и не накладывались на соседние элементы или, как в случае с Internet Explorer, попросту не исчезали.

Итак, зададим левое поле (рис. 4):

Код:
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
   border: 1px solid #008000; margin: 0;
}
 
(рис. 4) Задав для <ul> левое поле 15px, мы вернули маркеры обратно в <div>.

Обратите внимание, что все поля указаны в одном правиле. Ведь если не обнулить явно значения всех полей, браузер попытается добавить верхние или нижние поля, в зависимости от внутреннего стиля, и список снова будет выглядеть по-разному. Кроме того, теперь мы можем в любой момент при необходимости указать значения других полей, просто заменив (0) на нужное значение.

Давайте поменяем расстояние между пунктами списка, так как сейчас они расположены слишком близко друг к другу:

Код:
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
   border: 1px solid #008000; margin: 0; padding: 5px; 0;
}

Самый простой способ сделать это - использовать свойства margin-top или margin-bottom для элементов (li), но я предпочитаю применять идентичные отступы сверху и снизу.

Чтобы показать вам преимущества этого подхода над использованием полей, заменим рамки вокруг элементов на горизонтальные линии между ними (рис. 5):

Код:
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 1px solid #ff0000; margin: 0 0 0 15px; padding: 0;
}
li {
   border-bottom: 2px solid #800000; margin: 0; padding: 5px; 0;
}
 
(рис. 5) Добавление горизонтальных линий является первым шагом на пути к приданию списку более дизайнерского облика.

Добавив верхние и нижние отступы для увеличения высоты элементов (li) вместо применения полей, мы получили расположение элементов (li) точно посередине каждой строки.

Теперь слегка подчистим этот список:

  1. Удалим маркеры;

  2. Добавим поля для <ul>, чтобы выровнять список внутри <div>;

  3. Сместим пункты меню, создав отступы.

Вот какие изменения кода следует для этого выполнить (рис. 6):

Код:
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
 
(рис. 6) Теперь список выглядит лучше, однако с линией над первым элементом было бы более профессионально.

Наиболее заметные изменения мы внесли с помощью свойства list-style-type со значением none, удалив маркеры. С помощью свойства text-indent мы сместили текст от края списка, и добавив поле к элементу <ul> расположили список более привлекательно внутри контейнера.

Очевидно, что список будет выглядеть гораздо лучше, если мы добавим первому элементу верхнюю горизонтальную линию (рис. 7). Идеальным решением в данном случае будет использование border-top. Сделать это очень просто с помощью псевдокласса CSS :first-child. К сожалению, Internet Explorer не распознает этот псевдокласс.

Это значит, что мы либо можем использовать псевдокласс и признать, что этот способ не сработает в Internet Explorer, либо использовать трюк. Для начала используем псевдокласс, а затем подумаем о том, как обойти этот дефект в менее совместимом со стандартами, но популярном браузере Internet Explorer.

Вот код:
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
li:first-child {
   border-top: 2px solid #800000;
}
 
(рис. 7) Мы добавили верхнюю линию для первого элемента с помощью псевдокласса :first-child.

А теперь давайте познакомимся с простой уловкой для Internet Explorer. Когда мы удалили маркеры, элемент <ul> сузился до ширины элементов списка. Мы можем создать линию, применив стиль к элементу <ul>, содержащему все пункты списка.

Вместо приведенного выше кода допустимо использовать следующий, отображающий верхнюю линию и в Internet Explorer:

Kод:
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
   border-top: 2px solid #800000;
}
li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}

Иногда можно найти простые ходы для решения проблем Internet Explorer, но бывает, приходится признать, что не все пользователи увидят страницу в одинаковом облике.

Теперь наш список начинает приобретать черты панели навигации. Осталось лишь превратить простой текст в ссылки - и перед нами привлекательный и функциональный элемент навигации (рис. 8).

Сделать это просто с помощью следующего кода:

Код:
<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
      <li><a href="#">раздел №5</a></li>
      <li><a href="#">раздел №6</a></li>
      <li><a href="#">раздел №7</a></li>
   </ul>
</div>
 
(рис. 8) Мы добавили ссылки. Теперь текст отображается с подчеркиванием.
 
Добавление стилей к ссылкам

Добавление стилей к ссылкам…

Теперь добавим ссылкам определенный стиль. Вначале удалим подчеркивание для обычного пассивного состояния, а затем сделаем так, чтобы при наведении указателя мыши на ссылку она меняла цвет.


внимание!

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

Так как это последний этап настройки навигации, следует подчистить код: настроить нижнее поле <ul>, добавить контекст к селекторам, чтобы эти стили применялись только к элементам внутри <div> с именем menunav, и добавить трюк (а точнее, два трюка) чтобы линия над первым элементом отображалась в Internet Explorer для Windows.

Вот окончательный CSS-код для компонента навигации на базе списка (рис. 9):

Код:
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
div#menunav ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
div#menunav li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
div#menunav li:first-child {
   border-top: 2px solid #800000;
}
div#menunav a {
   text-decoration: none;
   color: #0099cc;
}
div#menunav a:hover {
   color: #ff3300;
}
/* трюк для IE Win \*/
* html div#menunav ul {
   border-top: 2px solid #800000;
}
/*конец трюка*/
 
(рис. 9) Готовое меню с выделением элемента при наведении на него указателя.
 
Трюк со звездочкой и обратной косой чертой

Трюк со звездочкой и обратной косой чертой…

Трюком я называю использование CSS не так, как это описывается в спецификациях. Трюки используются для включения или скрытия CSS от определенных браузеров. Зачастую трюки применяются для обхождения дефектов Internet Explorer.

 
Трюк со звездочкой

Трюк со звездочкой…

Как мы знаем, прапрадедушкой всех элементов разметки является HTML; все другие элементы - его наследники. Однако Internet Explorer уникален тем, что содержит безымянный элемент, являющийся родительским для HTML. Ссылаясь на этот элемент, в селекторе мы создаем правило, понимаемое только Internet Explorer. Так как имя у этого элемента отсутствует, сошлемся на него с помощью звездочки (*).

Например, так:

Код:
div * ul {
 ...правила CSS...
}

В этом правиле <ul> не будет выбран, если он является дочерним элементом для <div>, и будет, если является внучатым. Мы используем звездочку, чтобы указать, что нам не важно, какие промежуточные элементы находятся между <div> и <ul>.

То есть, чтобы создать правило, понимаемое только Internet Explorer, мы пишем:

Код:
* html ...более точные селекторы... {
 ...правила CSS...
}

Например:

Код:
div#box {
   border: 1px solid #00ffff;
}
* html div#box {
   border: 1px solid ff0000;
}

В этом примере синюю рамку покажут все браузеры, кроме Internet Explorer, который отобразит красную рамку.

Тем не менее, браузер Internet Explorer для Mac более совместим со стандартами и может обработать как правила с (*), так и некоторые CSS-правила, недоступные IE/Win.

Поэтому следует убедиться, что используемый вами трюк со звездочкой будет воспринят только IE для Windows.

 
Трюк с обратной косой чертой

Трюк с обратной косой чертой…

Если мы напишем комментарий с обратной косой чертой перед закрывающей звездочкой:

Код:
/* комментарий \*/

Internet Explorer для Mac посчитает, что комментарий не закрыт, и воспримет весь последующий код как комментарий, до тех пор пока не встретит обычное закрытие комментария, состоящее из звездочки и косой черты.

Например:

Код:
/*трюк для IE Win  \*/
* html div#menunav  ul {
   border-top: 2px solid #800000;
}
/* конец трюка*/

Здесь IE/Mac игнорирует строку с селектором * html. Таким образом, мы можем комбинировать трюки со звездочкой и обратной косой чертой, чтобы создать правило только для Internet Explorer для Windows.

 
XHTML-код меню навигационных ссылок

XHTML-код меню навигационных ссылок…

И в завершении этой статьи, привожу полный XHTML-код со встроенным CSS-кодом, для меню навигационных ссылок:

 
Код:
<!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>
<!--
body {
   margin : 0;
   padding : 0;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   background-color: #ffffff;
}
div#menunav {
   border: 1px solid #000000;
   width: 160px;
   font-size: 11px;
   margin: 20px;
}
div#menunav ul {
   border: 0;
   margin: 15px 20px 15px 15px; padding: 0;
   list-style-type: none;
}
div#menunav li {
   border-bottom: 2px solid #800000;
   margin: 0; padding: 5px; 0;
   text-indent: 5px
}
div#menunav li:first-child {
   border-top: 2px solid #800000;
}
div#menunav a {
   text-decoration: none;
   color: #0099cc;
}
div#menunav a:hover {
   color: #ff3300;
}
/* трюк для IE Win \*/
* html div#menunav ul {
   border-top: 2px solid #800000;
}
/*конец трюка*/
-->
</style>
</head>

<body>

<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
      <li><a href="#">раздел №5</a></li>
      <li><a href="#">раздел №6</a></li>
      <li><a href="#">раздел №7</a></li>
   </ul>
</div>

</body>
</html>
Урок написан по материалам книги Чарльза Уайк-Смита
«Стильный сайт с помощью CSS».
 
Урок № 5: | Дата: 16.07.2007 | Автор: Коровенков Юрий

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

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

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

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

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

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

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

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

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

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

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

Оглавление

Списки…

Добавление стилей к спискам…

Включим границы для элементов…

Зададим поля и отступы…

Зададим левое поле…

Зададим горизонтальные линии между элементами…

Удалим маркеры…

Добавим верхнюю линию для первого элемента…

Превращаем простой текст в ссылки…

Добавление стилей к ссылкам…

Трюк со звездочкой и обратной косой чертой…

Трюк со звездочкой…

Трюк с обратной косой чертой…

XHTML-код меню навигационных ссылок…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

наверх

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

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

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

Copyright (©) 2004— by Yuriy Korovenkov