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

UptoLike

ВУЗ: 

СПбГУ | Санкт-Петербург

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

Рубрика: 

32
ов». Однако в этом случае никак не удается заставить все основные
браузеры выполнить вертикальное выравнивание миниатюр по
центру. А выравнивание по верхней границе выглядит некрасиво.
Чтобы не загромождать страницу ненужным кодом, рассмотрим более
простой случай: миниатюры разных пропорций без подписей. Но
текст подписи всплывает при наведении курсора мыши.
Приведен фрагмент скриншота фотогалереи храма Спаса
Преображения на Нередице. Верстка все-таки выполнена с помощью
таблиц.
Пусть максимальный размер миниатюры 150х150px. Размеры
квадратной таблички должны быть несколько больше, например,
166ъ166px. Опишем класс CSS следующим образом:
.thumb { margin:5px; border:1px #F4EBE2 solid;
text-align:center;
width:166px; height:166px;
cursor:pointer;
float: left; overflow:hidden }
.thumb:hover { border:1px #664B3D solid }
В предположении, что обработчиком onClick миниатюры является
некая функция showPhoto(), задание миниатюры в HTML может
быть таким:
<table class='thumb'><tr><td>
<img src="… адрес миниатюры …"
onClick=
"showPhoto(… список аргументов …)"
width="100" height="150"
title="… текст подписи …">
</tr></td></table>
33
Никакие дополнительные атрибуты таблицы или ячейки указывать не
надо. Свободные поля вокруг таблицы и горизонтальное
выравнивание содержимого ячейки задано с помощью CSS.
Вертикальное же выравнивание содержимого табличной ячейки по
умолчанию проводится по центру (align="middle"), что как раз
нам и нужно.
Вариант без фреймов и новых окон
Как было отмечено в предыдущем разделе, в этом случае
единственное разумное технологическое решение – динамическое
формирование страницы с фотографией. При этом могут быть
использованы как клиентские (JavaScript), так и серверные (PHP)
технологии. Рассмотрим один из возможных клиентских вариантов.
Пусть набор миниатюр выведен в разделе div с заданным
значением атрибута id, например
<div id="content">
...
описания миниатюр
...
</div>
Как описаны остальные элементы страницы, нас сейчас не интересует.
Они могут иметь достаточно сложную структуру, содержать таблицы
(как на приведенных скриншотах).
Простейшая идея реализации показа полномасштабной фотографии
при сохранении остальных элементов интерфейса состоит в замене
содержимого указанного раздела с id="content" на динамически
сформированное HTML описание фотографии, текста и ссылки

Страницы