Глава 2. HTML-таблицы il l





Чтобы с помощью таблицы отобразить группу изображений-миниатюр, создайте

таблицу с отдельной ячейкой под каждую миниатюру. Чтобы связать миниатюру

с соответствующим ей полноразмерным изображением, вставьте дескриптор

с атрибутом href в каждую ячейку, содержащую изображение-миниатюру. Деск — риптор создает ссылку от миниатюры к полноразмерному изображению. На —

пример, следующий код связывает изображение-миниатюру home_i. jpg с Web —

страницей, содержащей полноразмерное изображение (page_i. htm):





Когда посетитель сайта щелкает на миниатюре, Web-браузер загружает стра- ницу, содержащую соответствующее полноразмерное изображение. Дескриптор

с атрибутом href в приведенном ниже коде связывает миниатюру (заданную

атрибутом sr c в дескрипторе ) с соответствующим ей полноразмерным изоб — ражением и создает Web-страницу, немного похожую на показанную на рис. 2.19:





Как только Web-браузер отобразит страницу с миниатюрами, посетителю ос — тается только щелкнуть на выбранной миниатюре, чтобы отобразить полнораз —

мерное изображение. Например, при щелчке на «миниатюре в верхнем левом углу рисунка 2.19 Web-браузер отобразит полноразмерное изображение, которое пока — зано на рис. 2.20.

112 Глава 2. HTML-таблицы







Поскольку миниатюра — это уменьшенная версия полноразмерного изображе — ния, используйте правила именования, связывающие миниатюры с исходными

изображениями. Если, например, вы создали и сохранили изображение с име —

нем home i. jpg, назовите соответствующую миниатюру home is. jpg. Создание ассоциативных имен файлов помогает быстро идентифицировать файлы, по — скольку в стандартном списке файлов имена будут отображаться в алфавитном порядке.



Создание маркеров и списков

с помощью таблиц и графики

Web-дизайнеры всегда имели возможность создавать списки с квадратным или круглым маркером перед каждым элементом списка. К сожалению, при создании стандартного маркированного (или, пользуясь принятым в языке HTML терми —

ном, неупорядоченного) списка дизайнер может обозначать его элементы только маркерами из ограниченного количества символов. Например, следующий код сгенерирует маркированный список, приведенный на рис. 2.21.