CSS. Рецепты программирования

CSS. Рецепты программирования.Автор: Кристофер Шмитт

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

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

Дополненное обсуждением особенностей поведения новейших Web-обозревателей, включая Internet Explorer, Firefox и Opera, второе издание уделяет особое внимание сложному взаимодействию технологии CSS и графики.

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

Книга сокращает путь от теории к практике, предлагая решение следующих задач:

  • применение технологии CSS в программах Adobe Dreamweaver и Microsoft Expression Web Designer;
  • размещение элементов на странице с помощью плавающей модели, абсолютного и относительного позиционирования;
  • подробное описание популярных методов замещения HTML-текста изображением;
  • стилевое оформление элементов, определяющих типографику Web-страницы;
  • проектирование форм средствами CSS;
  • создание пользовательских навигационных меню;
  • разработка таблиц стилей для печати Web-страницы;
  • тестирование отображения Web-сайтов в различных Web-обозревателях с помощью одного компьютера.

Если Вам досаждают ошибки Web-обозревателей и для борьбы с ними Вам необходим программистский трюк или искусственный прием, обратитесь к книге — она поможет решить сотни распространенных проблем, связанных с таблицами стилей.

Купить можно на ozon.ru.

Доступность и привлекательность текста

Урок #9. Создание привлекательных всплывающих подсказок.
20 минут

Комментарий к видеоуроку содержит текстовое изложение решения задачи.

Зачем нужны подсказки на сайте?

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

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

Сравните два варианта подсказок (просто наведите курсор мыши на ссылку):

1. Стандартный способ создания подсказки с помощью title:

<a href="#" title="Научитесь создавать сайты за сутки. Возможно ли это?">Вышел новый обучающий курс на DVD.</a>

2. Создание всплывающей подсказки с помощью тега span или b.

HTML-код:
<a href="#">Вышел новый обучающий курс на DVD.<b>Научитесь создавать сайты за сутки. Возможно ли это?</b></a>

CSS:

b {
display: none;
}

a:hover b {
display: block;
width: 440px;
position: absolute;
left: 410px;
border: 3px groove;
margin-top: -65px;
padding: 10px;
background-color: #DEF0FC;
}

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

Интересная особенность IE 6.0. Подсказка не появится, пока вы не добавите правило:

a:hover {
background: none;
}

Блок с нестандартной подсказкой может состоять из нескольких предложений, и он будет хорошо читаемым. Такая подсказка есть на этой странице у ссылки «Печатная версия» (в конце этого блока).