Самоучитель по креативному веб-дизайну. Книга 1, стр.96

Глава 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.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 002
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.103
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 118
  • 07.11.2011">10 примеров навигации по сайту
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 060
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 108
  • 01.02.2013">Частные уроки вождения
  • 22.04.2012">Facebook добавила кнопку «Слушать» на страницы музыкантов
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 104
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 054
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.92
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 071
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 110
  • 26.02.2011">Руководство по actionscript. часть 6, стр. 060
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 019
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...