Чтение онлайн

на главную - закладки

Жанры

HTML, XHTML и CSS на 100%

Квинт Игорь

Шрифт:

На рис. 4.4 виден результат обработки браузером кода из листинга 4.4, текст обтекает картинку слева.

Рис. 4.4. Выравнивание по горизонтали

При горизонтальном выравнивании текст плотно обтекает картинку и для внешнего вида страницы важным параметром становится расстояние между текстом и изображением.

Расстояние между текстом и изображением

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

Чтобы отодвинуть текст от картинки, используют атрибуты hspace и vspace элемента IMG. Они задают расстояние в пикселах между изображением и текстом по горизонтали и вертикали.

В листинге 4.5 указано очень большое расстояние по вертикали (100 пикселов) и очень маленькое по горизонтали (1 пиксел). На рис. 4.5 видно, что такое сочетание расстояний неудобно для чтения.

Рис. 4.5. Задано расстояние от картинки до текста

Листинг 4.5. Задание расстояния от текста до изображения

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="100" hspace="1"/>Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их. <br/> </body>

</html>

Рамка вокруг изображения

Кроме регулировки расстояния до текста, есть еще один способ отделить картинку от остального содержимого страницы.

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

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

Рис. 4.6. Рамка

Листинг 4.6. Задание рамки вокруг изображения

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="10" hspace="10" border="20"/>Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.

</body>

</html>

Альтернативный текст

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

Иногда получается так, что картинка не загружается, например, когда пользователь отключил загрузку картинок или сервер, на котором она расположена, «упал». Если размеры картинки указаны в явном виде, то посетитель имеет о них представление, однако зачем ему этот размер, если он не может даже предположить, что изображено на рисунке.

В таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан при наведении указателя мыши на картинку или если картинка не загрузится. Это даст возможность пользователям, которые не видят картинок, понять, хотят ли они увидеть их вообще, а тем, кто видит, поможет понять, что именно они видят.

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

Листинг 4.7. Альтернативный текст

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

<img src="image.jpg" width="100" align="right" vspace="50" hspace="50" alt="Фотография карликового вислоухого кролика"/>

</body>

</html>

На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.

Рис. 4.7. Альтернативный текст при загруженном рисунке

Альтернативный текст всплывает при наведении указателя мыши на картинку.

На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.

Рис. 4.8. Альтернативный текст при незагруженном рисунке

Вместо картинки виден поясняющий текст, и при наведении указателя мыши на рисунок появляется всплывающая подсказка.

Предварительная загрузка

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

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

Поделиться:
Популярные книги

Стеллар. Трибут

Прокофьев Роман Юрьевич
2. Стеллар
Фантастика:
боевая фантастика
рпг
8.75
рейтинг книги
Стеллар. Трибут

Ботаник 2

Щепетнов Евгений Владимирович
2. Ботаник
Фантастика:
фэнтези
боевая фантастика
6.00
рейтинг книги
Ботаник 2

Наследник

Кулаков Алексей Иванович
1. Рюрикова кровь
Фантастика:
научная фантастика
попаданцы
альтернативная история
8.69
рейтинг книги
Наследник

Моров. Том 8

Кощеев Владимир
7. Моров
Фантастика:
альтернативная история
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Моров. Том 8

Идеальный мир для Лекаря 23

Сапфир Олег
23. Лекарь
Фантастика:
юмористическое фэнтези
аниме
фэнтези
5.00
рейтинг книги
Идеальный мир для Лекаря 23

Как я строил магическую империю 11

Зубов Константин
11. Как я строил магическую империю
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Как я строил магическую империю 11

Предопределение

Осадчук Алексей Витальевич
9. Последняя жизнь
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Предопределение

Позывной "Князь" 4

Котляров Лев
4. Князь Эгерман
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Позывной Князь 4

Звездная Кровь. Изгой II

Елисеев Алексей Станиславович
2. Звездная Кровь. Изгой
Фантастика:
боевая фантастика
попаданцы
технофэнтези
рпг
5.00
рейтинг книги
Звездная Кровь. Изгой II

Убивать чтобы жить 8

Бор Жорж
8. УЧЖ
Фантастика:
боевая фантастика
космическая фантастика
рпг
5.00
рейтинг книги
Убивать чтобы жить 8

Идеальный мир для Лекаря 19

Сапфир Олег
19. Лекарь
Фантастика:
юмористическое фэнтези
аниме
5.00
рейтинг книги
Идеальный мир для Лекаря 19

Вперед в прошлое 6

Ратманов Денис
6. Вперед в прошлое
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Вперед в прошлое 6

Как я строил магическую империю 5

Зубов Константин
5. Как я строил магическую империю
Фантастика:
попаданцы
аниме
фантастика: прочее
фэнтези
5.00
рейтинг книги
Как я строил магическую империю 5

Страж Кодекса. Книга II

Романов Илья Николаевич
2. КО: Страж Кодекса
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Страж Кодекса. Книга II