Самоучитель по креативному веб-дизайну. Книга 2, стр.20

класса div. fLeft.

Глава 4. Каскадные списки стилей 22 7





Отцентрируйте изображение в контейнере за счет введения полей между

изображением и левым и правым краем контейнера. Пр^ этом Web-брау —

зер отцентрирует текст под изображением, конечно, если общая ц|ирина изображе —

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



Управление курсором

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

тель мыши определенного вида. Как правило, вид указателя мы|пи определяется

автоматически на основании типа содержимого, которое в данный момент вре —

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

указатель в виде руки. Изменение вида указателя позволяет посетителю понять,

что под указателем находится не простой текст или изображение.

Тем не менее, иногда Web-браузер не изменяет вид указателя, даже если на

Web-странице находится специальный элемент, который посетитель может ис —

пользовать. Например, в несколько HTML-дескрипторов можно включить атри —

бут title. При наличии атрибута titl e Web-браузер при наве)цении указателя мыши на соответствующий элемент Web-страницы выводит на экран короткую

подсказку. Предположим, например, что HTML-страница содержит следующий код:



Web Design Tips and Techniques»> HWDTT предлагает прекрасный набор советов, которые можно

использовать при исследовании Web-технологий.

Если посетитель подведет указатель мыши к слову «HWDTT» В предложении

«HWDTT предлагает прекрасный набор советов, которые можно использо —

вать при исследовании web-технологий», Web-браузер выведет на экран на не —

сколько секунд подсказку «Книга HTML & Web Desig n Tip s an

ПРАКТИКУМ

К сожалению, Web-браузеры не имеют никаких средств для сообщения посетите —

лю о наличии подсказок, определенных с помощью атрибута titjie. Для предос —

тавления визуального ориентира наличия на Web-странице скрытых возможнос — тей можно воспользоваться свойством cursor каскадных списков стилей, которое позволяет вывести на экран указатель мыши в виде указателя справки (как пра- вило, знака вопроса) при наведении посетителем указателя мыли на элемент

Web-страницы. Например, для изменения внешнего вида указателя на знак воп — роса при подведении его к элементам, определенным с помощью дескрипторов

, , ИЛИ Любым Другим Элементом, ОТМечеННЫМ КЛаССОМ help,

включите в каскадный список стилей на странице следующий код:



abbr, acronym, .help {border-bottom:Ipx dotted black; cursor:help}

Правило списка стилей в данном примере фактически предоставляет два ви — зуальных ориентира, как показано на рис. 4.24.

228 Глава 4. Каскадные списки стилей





Рис. 4.24. Web-страница с всплывающими подсказками. Элементы, для которых определены

всплывающие подсказки, отмечены пунктирным подчеркиванием

За счет подчеркивания текста пунктирной линией (не сплошной) вы отмечае —

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

имеется дополнительная информация.) Более того, чтобы посетитель не перепу- тал подчеркивание, означающее наличие справочной информации, с подчерки- ванием, обозначающим гиперссылки, правило указывает, что при наведении ука — зателя мыши на аббревиатуры и сокращения, объявленные с использованием атрибута title, Web-браузер должен использовать указатель в виде знака вопроса

(указатель справки). *

А теперь, давайте предположим, что код из предыдущего примера будет пере — писан следующим образом:

Книга Web Design Tips and Techniques’^ HTWDT предлагает исключительно полезные советы

на все случаи использования

class=»help» title=»tables, forms, CSS, ASP, Graphics»>

Web-технологий

В этом случае Web-браузер поместит пунктирное подчеркивание под словами

«HWDTT» и «Web-технологии», что позволит посетителю понять, что для этих слов имеется дополнительная информация. При наведении указателя мыши на любой из этих элементов текста Web-браузер изменит внешний вид указателя, использующийся по умолчанию, на знак вопроса. Кроме того, если посетитель оставит указатель на месте на несколько секунд, на экране появиться всплываю — щая подсказка, текст которой определен в атрибуте titl e в HTML-коде Web — страницы.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

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

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 070
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 058
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 129
  • 04.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.20
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.120
  • 03.09.2011">Parental Skype Recorder
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.79
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 014
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 145
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.122
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 008
  • 07.05.2012">Самыми вредоносными сайтами являются религиозные, а не порнографические
  • 04.09.2011">Создаем шапку для сайта с помощью программы XHEADER
  • 04.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.31
  • 12.04.2012">Новая модификация троянца Android.Gongfu скрывается в дистрибутиве Angry Birds Space
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...