Мини-лекции 12. Создание фотоальбомов

Владимир Сысолятин
   Даже не сомневаюсь в том, что Вы сталкивались с таким явлением как фотоальбомы. Нет не те, что у Вас дома, а в интернете. И неважно, что он вовсе не фото, а просто набор каких-то картинок?.. Это уже дело десятое... Как организовать всё это, — Ваш выбор. Я Вас познакомлю со своими альбомами, в смысле как организовано. В общем виде, на Главной странице ссылки на основные темы. И в том числе на фотоальбомы, картины и рисунки русских художников и любимые мелодии. Всех их объединяет один и тот же принцип построения (организации). Итак, по ссылке с Главной попадаете на страницу ФОТОАЛЬБОМЫ, фрагмент на рис1. Там всё просто. 27 ссылок на 27 фотоальбомов. И как пример мой семейный. Все ссылки располагаются как абзацы в столбик: название фотоальбома и небольшая иконка в тему. И всё! Чуть меньше половины правой стороны страницы пустуют.

   По ссылке (она прячется под названием фотоальбома) попадаете на нужную страницу, нужного фотоальбома рис2. Как видите иконки, уменьшенная копия реальной фотографии, либо фрагмента фотографии (в основном вертикального исполнения). Здесь ссылки прячутся уже под иконками. И далее по ссылке попадаете, нет не на фото, а на страничку рис1а. Правда для экономии места я её немного подрезал. Под фото текст пояснения: кто, что и зачем... Да, Вы можете непосредственно показать файл фотографии, а пояснение прямо в фотошопе и на самой фотографии, — Ваше решение. Кроме основного у меня у каждой иконки есть всплывающая подсказка как на рис2. И, что же ещё? А ещё нужно Вам выбрать путь реализации своего фотоальбома (фотоальбомов)?!

   О чём это я? О том какой тип страницы под Ваш фотоальбом (фотоальбомы) выбрать? С фиксированной шириной или «резиновую» страницу? Все (наверное?) фотоальбомы которые я встречал были заключены в фиксированную ширину. Хорошо это или плохо? Мы на предыдущей мини-лекции рассматривали ширинные плюсы-минусы. Но тогда в основном речь шла о тексте, а здесь о изображении и не одном?! Не пытаясь навязать Вам своё мнение, на примере моих фотоальбомов хочу показать... Да, показать как это выглядит на «резиновой» странице. Так уж получилось, что когда я методом тыка в 2003-2005-м годах состряпал эти фотоальбомы, они оказались «резиновыми»! В то время не особо соображал про всякие WEB-премудрости...

   Вот на рис2 оно и есть. Правда я показал только примерно половину изображений. Чтобы представить полностью, нужно продлить вправо столько же. Сделаем вид, что мы не в курсе и всё, что видим это и всё! Пимпочкой в правом верхнем углу переведём окно в сжатый (свёрнутый) режим. Теперь можно мышкой ухватившись за правый край окна, сжать его. Так примерно будет выглядеть окно при разных разрешениях мониторов. У каждого пользователя своё... У меня рабочее 1024 точки. Имеется ввиду только ширина (что нас больше волнует!). И если при просмотре страниц появляется прокрутка, значит страница с фиксированной шириной и с большей нежели Ваша. Итак, мы начали сжимать страницу по ширине. А это всё равно как бы уменьшить разрешение. Что произойдёт? Правильно изображения будут также как и текст перетекать: справа-налево и вниз. Всё это выглядит так, словно мы весь блок с иконками начинаем растягивать по направлению красных стрелок. И при максимуме растяжения все картинки-иконки вытянутся в вертикальную линию рис1b.

   В нашем случае мы видим только первую строку. А ниже в том же порядке будут располагаться и остальные строки. Конечно в реальности (при смене разрешений) до такого дело не дойдёт, но представлять процесс Вы должны. Да, конечно страница удлинится и появится вертикальная прокрутка... Но вертикальная может появиться при любых видах страниц. Во-первых, размер иконок может быть соизмерим с реальным размером фотографий, а во-вторых их может быть неограниченное количество. Так, что вертикальная прокрутка, как ни крути будет присутствовать... И если в «резиновом» варианте только одна, то в фиксированном две!

   Если Вы решитесь на фиксированный режим и на основе только HTML, то Вам придётся картинки поместить в таблицу. И по-видимому с многочисленными ячейками. Если же совместно с CSS, то такое нагромождение как у меня нужно заключить в блок <DIV> и в правилах разместить свойство WIDTH, указав размер. А также место размещения в странице: слева, справа или по центру?! Надеюсь, что у Вас всё получится!