Техника Web-дизайна для студента
Видимость объектов
Возможность скрывать и вновь показывать объекты представляет интерес только при создании страниц, содержимое которых изменяется динамически в процессе просмотра. Управление внешним видом таких страниц осуществляется с помощью программ-сценариев. Примеры таких программ будут рассмотрены в главах 8 и 9. Здесь же нам предстоит предварительно познакомиться с двумя свойствами, позволяющими скрывать объекты или делать их видимыми:
О Display— может принимать значения: "block"— объект отображен на странице, "попе" — объект скрыт. Таким образом, в случае применения значения "попе" объект полностью удаляется со страницы, и на его место перемещается следующий за ним объект. При выборе значения "block" объект отображается, а последующие объекты смещаются, чтобы освободить для него место. В качестве примера рассмотрим документ в листинге 7.13.
Листинг 7.13. Изменение видимости объекта с использованием свойства Display
<body>
<р style="font-size:14pt; background-color: yellow; width: 150рх">Это первый абзаце/р>
Cimg src="l. jpg" width="151" height="100" style="display: block"> <р style="font-size:14pt; background-color: yellow; width: 150рх">Это второй абзац</р>
</body>
На рис. 7.12 показаны результаты открытия в окне браузера двух документов: первый — с установленным значением "block" свойства display, второй — после изменения значения свойства display на "попе".
|
Рис. 7.12. Результаты открытия одинаковых документов с разными значениями свойства display: block и попе |
О visibility — может принимать значения: "inherit" —
Унаследованная видимость, "hidden" — объект скрыт, visible — объект отображен. При выборе "inherit" видимость объекта определяется видимостью родительского объекта. В отличие от свойства display, скрытие объекта не сопровождается его удалением со страницы, поэтому следующие за ним объекты в процессе скрытия/отображения всегда будут оставаться на своих местах. Пример использования свойства visibility приведен в листинге 7.14.
Листинг 7.14. Изменение видимости объекта с использованием свойства visibility
<body>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это первый абзаце/р>
<img src="l. jpg" width="151" height="100" style="visibility: visible">
<p style="font-size: 14pt; background-color: yellow; width: 150рх">Это второй абзац</р>
</body>
На рис. 7.13 показаны результаты открытия двух документов СО значениями свойства visibility: visible И hidden.
|
Рис. 7.13. Результаты открытия одинаковых документов, но с разными значениями свойства visibility: visible и hidden |
