| |
р не забудьте удалить объявление
свойства border В описаниях классов span, label И span.element.
Вывод на странице галереи миниатюр с заголовками
Как вы уже знаете, миниатюра представляет собой уменьшенную версию пол-
норазмерного изображения. Миниатюры для загрузки и вывода на экран требуют
гораздо меньшего времени по сравнению с полными изображениями. При увели-
чении размера выводимого на экран изображения увеличивается и размер файла,
в котором это изображение хранится. А чем больше размер файла, тем больше
времени требуется браузеру для загрузки и вывода изображения на экран.
Миниатюры используются вместо полноразмерных изображений в тех случа-
ях, когда вероятнее всего, посетитель просмотрит только некоторые изображения
из имеющихся, при этом при просмотре на экран будет выводиться только по
одному изображению. Несмотря на то что для еще большего сокращения време-
ни загрузки и отображения Web-страницы можно использовать гиперссылки, ми-
ниатюры, по крайней мере, позволяют получить определенное представление о
виде полноразмерного изображения. Предположим, например, что вы создаете
Web-сайт для риэлтора, у которое есть полноэкранные цифровые фотографии
каждого продаваемого им дома. Вместо того чтобы заставлять посетителя загру-
жать каждое полноэкранное изображение на экран, можно вывести миниатюры с
размерами, в десять раз меньшими размеров реальных фотографий. Таким обра-
Глава 4. Каскадные списки стилей 225
зом, вам удастся вывести десять фотографий за то же время, что выводится одна
полноэкранная фотография. Если посетители) понравиться описание одного их
домов, он может загрузить его полноэкранную фотографию.
Если для выравнивания миниатюр изображений и надписей к ним использу-
ется HTML-таблица, браузер не сможет варьировать количество йакетов, выводи-
мых в одной строке, основываясь исключительно на размере окна браузера.
Если, например, вы создали таблицу с 10 столбцами, браузер должен будет все-
гда выводить в одной строке 10 миниатюр, даже если одновременно на экране в
горизонтальном направлении будет помещаться, скажем, не более 5 миниатюр.
Как результат, в этом случае посетителю для просмотра всех миниатюр придется
пролистывать содержимое Web-страницы в горизонтальном направлении. С по-
мощью каскадных списков стилей вы можете варьировать количество миниатюр,
выводимых в окне Web-браузера, в зависимости от его ширины.| Таким образом,
требования к нашей галерее миниатюр достаточно просты. В IjTML-документе
напишите код, который будет вставлять изображение, за ним Поместите деск-
риптор <Ьг> и текстовое описание, центрируемое под изображением.
:.-.. " ПРАКТИКУМ
Для указания Web-браузеру автоматически определять количество выводимых в
строке изображений, поместите каждое изображение (и его заголовок) в отдель-
ный контейнер И выровняйте каждый такой контейнер 1ю левому краю.
Кроме того, установите стиль элемента абзаца таким образом, чтобы- брау
|
|
