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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое CMS?

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

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

Карта сайта

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

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

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

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

Заголовки

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

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

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

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

Метаданные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

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

Главная « Уроки Web-мастерства « CSS-методы замены текста изображениями

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

Наиболее популярными CSS-методики …

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

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

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

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

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

В этой статье я вас познакомлю с наиболее популярными CSS-методами замены текста изображениями, а также с их преимуществами и недостатками. Чтобы ознакомиться стекущим состоянием CSS-методов замены, обращайтесь к списку Дэвида Ши (David Shea) (известному в Zen Garden: www.csszengarden.com) и к статьe: Revised Image Replacement.

 

Первоначальный вариант (FIR) …

Методика замены текста изображениями, которая положила начало всем другим, - эта метод замены Фарнера (Fahrner Image Replacement, FIR), который был создан Тоддон Фарнером (Todd Fahrner) и популяризован Дугом Боуменом (Doug Bowman) (см. исходную статью: Using Background-Image to Replace Text).

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

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

Разметка выглядит следующим образом:

Код:
<h1 id="header"><span>Это заголовок</span></h1>

Стилевые правила, скрывающие текст и заменяющие его фоновым изображением, очень просты:

Код:
#header {
   background: url(headline.gif) top left no-repeat;
   width: 240;
   height: 20;   
}
#header span {   
   display: none;   
}

Главный недостаток FIR в том, что, хотя содержимое элемента h1 сохраняется в исходном коде документа, что, по-видимому, обеспечивает его доступность для всех пользователей и устройств, оказывается, что некоторые средства чтения с экрана соблюдают правило display: none и просто не читают элемент.

Так что FIR не проходит теста на доступность [это было проверено и описано специалистом по доступности Джо Кларком (Joe Clark)].

Другой аспект FIR, вызывающий неодобрение, - это то, что этот метод требует вставки бессмысленного элемента span в исходный код, что считается «плохим» вариантом разметки.

Как и большинство других методов замены, этот метод не работает, если по какой-то причине пользователь не видит изображений, но поддержка CSS в его браузере включена (сценарий «CSS-вкл/Изображения-выкл»).

 

Метод замены Лихи-Ленгриджа (LIR) …

Этот метод, разработанный одновременно Симусом Лихи (Seamus Leahy) и Стюартом Ленгриджем (Stuart Langridge), скрывает текст путем задания для высоты элемента значения 0 (нуль), а все содержимое, находящееся за пределами блока элемента (text overflow) в hidden. Фоновое изображение применяется к области интервала, размер которой задается равной высоте изображения.

Код:
<h1 id="header">Это заголовок</h1>

#header {
   /* фоновое изображение видно через верхний интервал, размер которого равен высоте изображения */
   padding: 20px 0 0 0;
   overflow: hidden;
   background-image: url(headline.gif);
   background-repeat: no-repeat;
   height: 0рх !important;
   /* это обходной маневр для IE */
   height /**/: 20рх;
}

Этот метод имеет следующие преимущества:

  • не нужно дополнительного элемента span;

  • доступно для средств чтения с экрана.

Недостатки:

  • Требуется обход проблем блочной модели в Internet Explorer 5 для Windows. Internet Explorer игнорирует правило !important (поскольку он не поддерживает нотацию !important) и заменяет его вторым объявлением высоты. Другие соответствующие стандартам браузеры распознают и используют первое объявление высоты и игнорируют второе.

  • Метод не работает в сценарии «CSS-вкл/Изображения-выкл».

 

Метод Rundle/Phark …

Этот метод был разработан Майком Рандлом (Mike Rundle) для его сайта Phark. В этом методе текст скрывается путем задания очень большого отрицательного значения text-indent, которое «выдавливает» текст с экрана влево, и он перестает быть виден.

Код:
<h1 id="header">Это заголовок</h1>

#header {
   height: 20px;
   text-indent: -5000px;
   background: url(headline.gif) no-repeat;
}

Этот метод дает следующие преимущества:

  • не нужно дополнительного элемента span;

  • доступно для средств чтения с экрана;

  • не используется никаких обходных маневров.

Недостатки:

  • вызывает проблемы в Internet Explorer 5.0 для Windows (вместе с текстом может быть смещен фон);

  • не работает в сценарии «CSS-вкл/Изображения-выкл»;

  • некоторые поисковые системы плохо относятся к страницам, где используются большие отрицательные значения text-indent.

 

Метод Гилдера/Левина …

Этот метод, названный в честь Тома Гилдера (Tom Gilder) и Александра Левина (Alexander Levin), несколько отличается от других тем, что отображает текст, но потом сразу скрывает его непрозрачным изображением, помещенным в пустой элемент span. Это единственный метод замены текста изображением, который обеспечивает доступность в условиях «CSS-вкл/Изображения-выкл».

Код:
<h1 id="header">
   <span></span>Это заголовок
</h1>

#header {
   width: 240px;
   height: 20px;
   position: relative;
}  /* создаем блок-контейнер */

#header span {
   background: url(headline.gif) no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
}

Этот метод предлагает следующие преимущества:

  • доступно для средств чтения с экрана;

  • текст отображается, если не отображается изображение, что разрешает дилемму «CSS-вкл/Изображения-выкл».

Недостатки:

  • используется несемантический пустой элемент span;

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

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

 

Какой метод использовать?

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

Если вам необходимо обеспечить 100-процентную доступность с учетом пользователей, у которых вообще нет вывода изображений, то метод «наложения» Гилдера/Левина будет единственным вариантом. Вам придется пожертвовать семантической чистотой документа и использовать пустой элемент span. И вам придется смириться с непрозрачными изображениями.

Если вы готовы примириться со сценарием «CSS-вкл/Изображения-выкл», то наиболее популярным среди использующих стандарты дизайнеров на данный момент является метод Rundle/Phark, который хорошо работает во всех браузерах. Исходный метод FIR считается устаревшим, и его использовать не следует из-за фундаментальных проблем с доступностью.

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

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

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

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

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

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

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

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

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

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

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

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

Оглавление

Первоначальный вариант (FIR)…

Метод замены Лихи-Ленгриджа (LIR)…

Метод Rundle/Phark…

Метод Гилдера/Левина…

Какой метод использовать?

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

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

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

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

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

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

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

Создаем 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