Для расположения элементов на форме и подписей к ним используйте не HTML-таблицы, а элементы и. Для форматирования и позициони- рования элементов формы, помещенных в контейнеры и, создайте

в списке стилей три класса:



div. row {clear:both; padding-top:5px; font-size:12pt}

div. row {clear:both; padding-top:12px}

div. row span. label {float:left; width:110px; text-align:right}

div. row span. element {float:right; width:375px; text-align:left}

Свойство floa t в классах style, labe l и styl e. element указывает Web-брау —

зеру, как располагать элементы внутри контейнера. Форматирование и позицио —

нирование текстовых элементов (т. е. надписей) с помощью класса style. labe l

Глава 4. Каскадные списки стилей 2 2 3





приводит к их выравниванию по левому краю других находящиеся в контейнере

объектов. Применение же класса style. elemen t для форматирования и позици —

онирования элементов формы выравнивает их по правому Kpaip других находя —

щихся в контейнере объектов.

Для форматирования и позиционирования дескрипторов и , со — держащих надписи и элементы ввода формы, используются классы div. row,

span. label и span. element, определенные в предыдущем примере:





border:limegreen lpx solid; padding:5px»>

Ямя:



22 4 Глава 4. Каскадные списки стилей





Затем для каждого требуемого поля задайте в дескрипторе атрибут

clas s с указанием класса span. reqLabai. При этом не забудьте указать где-ни — будь возле кнопки Submit, что означает красный цвет.

Кстати, значение 475 пикселей для атрибута width контейнера — это

не просто произвольное значение. Форма, используемая в качестве примера в

ЭТОМ СОВете, требует 475 ПИКСелеЙ, При ЭТОМ НаДПИСЬ «Адрес электронной поч — ты:» при выводе ее красным полужирным шрифтом (на рисунке не показано) упирается в левый край формы, а многострочное поле ввода текста — в правый и нижний края формы. Для определения ширины дескрипторов, которая

требуется для вывода на экран форм, измените классы span, labe l и

span. element, как показано ниже, для вывода на экран пунктирной границы

вокруг каждого элемента раздела:



div. row span. label {float:left; width;110px; text-align:right;

border:Ipx dotted}

div. row span. element {float:right; width;345px; text-align:left;

border:Ipx dotted}

Вывод на экран пунктирной границы вокруг каждого элемента раздела позво — ляет легко визуально проследить эффект изменения ширины разделителя в

объявлениях классов span. label и span. element. Уменьшайте ширину каждого разделителя до тех пор, пока пунктирная граница не будет находиться непосред — ственно вокруг надписи или элемента ввода.

Затем уменьшайте ширину контейнера формы, пока границы формы не вый — дут за границы контейнера, в котором содержатся элементы формы. Перед от — правкой готовой Web-страницы на Web-сервер не забудьте удалить объявление

свойства border В описаниях классов span, labe l И span. element.



Вывод на странице галереи миниатюр с заголовками

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

в котором это изображение хранится. А чем больше размер файла, тем больше времени требуется браузеру для загрузки и вывода изображения на экран.

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

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