Разработка веб-ресурса с использованием HTML, CSS, JavaScript, PHP. Применение базовых технологий для создания фотоархива в веб-интерфейсе. Захаркина В.В. - 5 стр.

UptoLike

Составители: 

8
Итак, в этом случае было принято (и реализовано) традиционное в тот
исторический период решение: щелчком по миниатюре выводить
полномасштабное изображение в новом окне.
Необходимость открыть окно заданных размеровочень
распространенная ситуация. Одно из распространенных (и вполне
технологичных) решений состоит в выводе заранее заготовленных
миниатюр, щелчком по которым в отдельном окне
показывается
полномасштабное изображение. При этом, разумеется, возможны
разные варианты в рамках дизайнерской концепции.
Все изображения одинакового размера (точнее, при
предварительной обработке фотоматериала приведены к
одинаковому размеру). В этом случае миниатюры также
одинакового размера.
Изображения разного размера и разных пропорций. Но
миниатюры представляют собой вырезанные и масштабированные
фрагменты одинакового размера
.
Изображения разного размера и разных пропорций. Миниатюры
также имеют разные пропорции, но масштабированы таким
образом, чтобы вписаться в квадрат заданных размеров. Кстати,
именно такой вариант реализован в большинстве программ
просмотра графических объектов. Так организован и вывод
миниатюр в MS Windows «проводнике» в режиме «эскизы
страниц».
9
Технологический аспект
Этот простой вариант, в принципе, может быть реализован только с
помощью HTML. Верстка такого варианта фотоархива в HTML
элементарна: последовательно объявляются элементы img с
соответствующими атрибутами. Если эту последовательность
заключить в раздел с атрибутом
<div style=”text-align:center”>,
миниатюры будут выровнены по центру.
Простейший вариант компоновки абсолютно технологичен и удобен
для дальнейшего сопровождения
. Не надо задумываться о том,
сколько миниатюр надо вывести в одном ряду в зависимости от
разрешения клиентского монитора. Браузер сам их расположит таким
образом, чтобы максимально использовать свободное пространство
окна.
Итак, компоновка средствами HTML близка к идеалу. Но как быть с
показом полномасштабной фотографии? Можно каждую миниатюру
оформить как гиперссылку на
полномасштабное изображение, и
открывать целевой документ гиперссылки в новом окне. Однако в
этом случае новые окна откроются с полным набором интерфейсных
элементов: адресной строкой, панелями инструментов и т.д. Это
некрасиво и нефункционально. К тому же, средствами HTML нельзя
повлиять на размер и положение нового окна.
Для удобной реализации просмотра придется привлечь
язык
клиентского программирования JavaScript.
Простой вариант фотоархива с
аннотациями
Вот пример простейшего расположения графического материала,
снабженного аннотациями (фрагмент фотоархива Д.С.Лихачева).
Фотографии имеют существенно разные пропорции, поэтому вывести
их одну за другой нельзя - будет некрасиво. Применив таблицу,
расположим фотографии вертикально, заодно остается место для