Составители:
Рубрика:
16
Проблем с размером текстовой подписи в этом случае не возникает,
поскольку указывается только дата снимка. Длинные тексты при
такой компоновке, очевидно, неприемлемы. Однако полный текст
подписи можно задать с помощью атрибута title, и он будет
всплывать при наведении мыши на миниатюру.
Технологический аспект
Здесь мы обсуждаем лишь компоновку миниатюр, не рассматривая
вопрос о том, в новом окне или во фрейме открывается
полномасштабная фотография.
Можно ли лишь средствами HTML вывести миниатюры, вписанные
в рамки одинаковой ширины и высоты? Да, теоретически это
возможно, например, вписать миниатюры в ячейки таблицы. Правда,
сразу возникает вопрос:
сколько же ячеек должно быть в табличном
ряду, чтобы удовлетворить любому возможному разрешению экрана?
Если не использовать сценарии JavaScript, придется ограничиться
тем количеством ячеек, которое может уместиться при минимальном
разрешении экрана, на которое ориентирован дизайн. Увы, тогда при
больших разрешениях на экране останется пустое незадействованное
пространство.
Можно с помощью сценария JavaScript определить
разрешение экрана
клиентского монитора, рассчитать нужное количество столбцов
таблицы и динамически в цикле (методом document.write())
вывести все табличные элементы. Попробуйте самостоятельно создать
такой сценарий.
С другой стороны, посмотрим внимательно на миниатюру
приведенного фрагмента скриншота. Неправда ли, это похоже на
маленькую табличку из двух ячеек, в верхней из которых миниатюра,
а в
нижней – текст? Может быть, многие припомнят, что таблице
HTML можно задавать параметр выравнивания align. Кстати,
используется он относительно редко. Задание значений
align=”left” или align=”right” не только прижимает
таблицу к левой или правой границе документа, но и обеспечивает
обтекание прочими элементами. Вставим наши миниатюры и подписи
к ним в ячейки маленьких табличек с
начальным тегом <table
align=”left” ...>. Тогда браузер расположит эти таблички
17
таким образом, чтобы максимально использовать свободное
пространство окна.
Итак, только HTML и никаких сценариев JavaScript? Не совсем.
Параметры выравнивания табличек, цвет и стиль их рамок, фоновые
цвета следует задавать средствами CSS. Также с помощью CSS
можно задать изменение цвета рамки при наведении курсора мыши.
Вариант без фреймов и новых окон
Разнообразные по внешнему представлению варианты
функционального дизайна, приведенные выше, предполагают вывод
полномасштабной фотографии одним из двух способов: в новом окне
либо в одном из фреймов. Во втором случае набор миниатюр
находился в соседнем фрейме и был всегда на виду. Эти варианты
функциональны, удобны для дальнейшего сопровождения, вполне
понятны верстальщику и программисту
. В большинстве случаев
дизайнер-художник также согласится с таким решением.
С другой стороны, вполне реальна ситуация, в которой дизайнер или
специалист по юзабилити возразят против открытия новых окон.
Фреймовая структура с одновременным отображением набора
миниатюр и полномасштабной фотографии также по ряду причин
может быть признана неприемлемой. Например, в случае, когда
необходимо значительную часть экранного пространства отвести
навигационном и декоративным элементам.
Альтернативное решение очевидно – щелчком по миниатюре
выводить фотографию в том же окне, обеспечив при этом
дозированное представление элементов навигации. При этом дизайнер
должен будет сформулировать требования к отображению документа
с полномасштабной фотографией.
Ниже приведены два скриншота первого варианта веб-ресурса,
посвященного
храму Спаса Преображения на Нередице. Цифровые
фотографии снимались разными фотоаппаратами и, следовательно,
имеют разные пропорции. К тому же фотографии имеют различную
ориентацию. Поэтому миниатюры, как предлагалось в разделе
Страницы
- « первая
- ‹ предыдущая
- …
- 7
- 8
- 9
- 10
- 11
- …
- следующая ›
- последняя »
