<< Пред. стр.

стр. 43
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>



Choose your newsletters: Pick the days to receive them:

Days
Newsletters
• News • Sunday
• Sport» • Monday
D Weather . • Tuesday
Q Entertainment • Wednesday
• Editorial • Thursday
D Arts D Friday
D Style • Saturday




Puc. 72.2. Используйте тег <legend>, чтобы вставить
короткую строку текста в прямоугольную рамку

Листинг 72.2. Исходный код страницы, вид которой в браузере
показан на рисунке 72.2
<form>


<!-- Начало макета таблицы -->


<pxstrong>Choose you newsletters :</strongx/p>
<fieldset>
<legend>Newsletters</legend>


<!-- Здесь располагается код элементов управления -->


</fieldset>


<!-- Дополнительный макет таблицы -->


<pxstrong>Pick the days to receive them:</strongx/p>
<fieldset>
<legend>Days</legend>


<!-- Код дополнительных элементов управления -->
Строим Web-сайты
402

</fieldset>


< ! - - Конец макета таблицы -->


</form>



Совет
Тег <legend> должен следовать сразу за открывающим тегом
<fieldset>.


По умолчанию цвет текста легенды - синий в Internet Explorer и черный в Netscape.
В этом случае синий цвет представляется неудачным выбором, поскольку он также
является стандартным цветом непосещенных гиперссылок. Синяя легенда может
вызвать у посетителей желание щелкнуть на ней, даже в отсутствие красноречивого
подчеркивания.
К счастью каскадные таблицы стилей позволяют переопределить тег <legend> для
отображения текста легенды с любым требуемым цветом шрифта:
<style type="text/css">


legend {
color: #000000;




</style>
Почему бы заодно не сделать легенду с полужирным начертанием шрифта:
<style type="text/css">


legend {
color: #000000;
font-weight: bold;




</style>
Результаты применения этого стиля показаны на рисунке 72.3.
ГЛАВА 72. Работа с наборами полей 403




Choose your newsletter): Pick the days to receive them:

Days
Newsletters
• News D Sunday
• Sports • Monday
D Weather D Tuesday
П Entertainment D Wednesday
D Editorial U Thursday
О Arts И Fnday
D Style • Saturday




Рис. 72.3. Используйте каскадные таблицы стилей
для изменения внешнего вида легенд наборов полей



Часто задаваемые вопросы
Можно ли создать CSS-СТИЛИ для наборов полей?
Конечно, но будьте внимательны. Помните, что в каскадных таблицах
стилей дочерний тег практически всегда наследует стили своего ро-
дителя. Наборы полей как раз относятся к этим случаям. Все дочер-
ние теги набора полей, включая легенду, элементы управления и
текст, наследуют стили набора полей.


Каскадные таблицы стилей можно также использовать для изменения внешнего вида
рамки, обрамляющей набор полей. Для решения этой задачи прекрасно подойдут ат-
рибуты border-color, b o r d e r - s t y l e и border-width. Для изменения цвета текс-
та внутри набора полей используйте в правиле стиля атрибут color, а для создания
цветной области на заднем фоне набора полей воспользуйтесь атрибутом back-
ground-color. Результат применения этих атрибутов показан на рисунке 72.4.
Листинг 72.3. Исходный код страницы, вид которой в браузере
показан на рисунке 72.3
<head>


<style type="text/css">


<fieldset {
border-style: dashed;
border-width: 4px;
border-color: #FF0000;
color: #FFOOOO;
background-color: #FFCCCC;
Строим Web-сайты
404

}



</style>
</head>
i

<!-- Здесь располагается содержимое -->




Choose yoiu newsletters: Pick the days to receive them:

• Ы*т
D МмАч
D TueM,.»
0 We»*»
П W,..:!Oi-,4«
• Ыггштся
• l],,»;-i.,v
О Am r

a styfc




Рис. 72.4. Для тега <?ieldset> также можно создать правило стиля
ГЛАВА 73.
Работа с метками
Возможно, вы задаетесь вопросом, как правильно разметить метки на форме в соотве-
тствии с требованиями консорциума W3C (World Wide Web Consortium) и с соблюде-
нием существующих стандартов. Для элементов управления предоставляются
собственные теги, поэтому здесь нет повода для беспокойства. К тому же, вероятно,
вы разрабатываете макет формы в виде таблицы, которая размечается собственным
набором тегов. Однако, как насчет текста внутри формы, описывающего то, что посе-
тители должны вводить в поля? Другими словами, существуют ли теги для меток?
Может возникнуть искушение использовать для разметки меток знакомые тексто-
вые теги, например, теги абзацев или некоторые виды заголовков. Проблема сос-
тоит в том, что теги должны точно идентифицировать тип элементов, который
они размечают. На самом деле метка в форме не является абзацем. Это и не заголо-
вок в том смысле, что HTML определяет заголовок как шапку или маркер раздела
страницы.
Данная головоломка не так уж трудна, как может показаться из приведенного выше
вступления. Язык HTML предоставляет мало известный текстовый тег, особенно в
применении к меткам формы: достаточно удобный тег <label >. Результат его приме-
нения показан на рисунке 73.1.


Определение
Метка (label) в форме - это фрагмент текста, который описывает то,
что посетитель должен вводить в соответствующем поле.




Eile ?* tfew. Favorites Tods Help


• News
• Sports
D Business
П Entertainment
• Humor




Puc. 73.1. В коде этой формы для разметки текстовых меток
флажков используются теги <label>
406 Строим Web-сайты

Листинг 73.1. Исходный код страницы, вид которой в браузере -
показан на рисунке 73.1
<form>
<table>
<tr>
<tdxlabel>
<input type="checkbox" name="news" value="yes">
News</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="sports" value="yes">
Sport s</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="business" value="yes">
Business</labelx/td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="entertainment" value="yes">
Entertainment</label></td>
</tr>
<tr>
<tdxlabel>
<input type="checkbox" name="humor" value="yes">
Humor </labelx/td>
</tr>
</table>
</form>
ГЛАВА 73. Работа с метками 407


Как можно заметить, браузер не воспроизводит метки с каким-либо специальным сти-
лем. Метки выглядят как обычный текст. Зачем беспокоиться о дополнительной раз:
метке. На это существуют, по крайней мере, три убедительные причины.
Во-первых, чем точнее разметка, тем лучше становится доступность Web-страницы
для разных категорий посетителей. Если какой-либо элемент на странице можно
идентифицировать как метку, его так и следует размечать. В этом случае, когда кто-ни-
будь посетит ваш сайт с нестандартным устройством просмотра, например, с устрой-
ством чтения с экрана или преобразователем текста в речь, содержимое вашего сайта
будет воспроизведено более точно.
Во-вторых, при использовании тегов < l a b e l > разметка показывает точные взаимос-
вязи элементов на форме. Вы создаете связь между текстом и элементом управления,
которая в противном случае отсутствует. Конечно, посетители с хорошим зрением яс-
но видят, какой фрагмент текста соответствует каждой метке. Однако необходимо
проделать большую работу, чтобы при озвучивании взаимосвязей созданный
Web-сайт был понятен тем, кто не может воспользоваться визуальным представлени-
ем Web-страниц.


Совет
При вложении тега элемента управления внутрь тега <label> эле-
мент управления наследует все CSS-стили, примененные к метке.
Если вы не хотите, чтобы это случилось, не вкладывайте элемент уп-
равления внутрь метки. Выполняйте их разметку раздельно и исполь-
зуйте атрибуты id и for, чтобы создать связи между ними.


В-третьих, можно применить CSS-стиль к тегам < 1 abe 1 > и создать специальный внеш-
ний вид для этих элементов. Не требуется создавать специальный класс абзаца или за-
головка.
Конец рекламы. Обратите внимание, что внутри тега <label> вложен тег <input>
флажка.
<label>
•cinput type="checkbox" name="humor" value="yes">
Humor
</label>
Это один способ, позволяющий сообщить браузеру о связывании метки с ее элемен-
том управления. Но что, если метки и элементы управления отображаются в разных
столбцах таблицы подобно следующему примеру:
<form>
<table>
<tr>
<tdxinput type="checkbox" name="humor" value="yes"x/td>
<td>Humor</td>
Строим Web-сайты
408

</tr>
</table> •
</form>
Данная разметка делает невозможным вложение тега <input> внутрь тега <label >,
поскольку между ними находится пара тегов ячеек таблицы. В таких случаях текст зак-
лючается в теги <label>. Затем, чтобы создать связь между элементами, используйте
вместо вложения пару атрибутов: атрибут id и атрибут for.
<form>
<table>
<tr>
<td>
<input. type="checkbox" name="humor" id="humor" value="yes•";•
</td>
<td>
<label for="humor">Humor</label>
</td>
</tr>
</table>
</form>



Совет
Используйте уникальные ID (идентификаторы) для каждого элемен-
та на странице. Не присваивайте двум или более элементам один и
тот же Ю.
ЧАСТЬ 7.
Специальные приемы

Встраивание мультимедиа
Автоматическое обновление страницы
Автоматическая переадресация браузера
Отображение содержимого, выбираемого
случайным образом
Вывод браузером предупреждения
Отображение всплывающего окна
«Вы покидаете сайт»
ГЛАВА 74.
Встраивание мультимедиа
Мультимедиа — одно из тех модных специальных словечек, подобных контенту и
функции, которые настолько широки по значению, что практически бессмысленны.
Поэтому лучшее, что можно дать для этого термина — расплывчатое определение. 11с
существу, мультимедиа в Интернете — это звуковые файлы, файлы видео, Flash-анима-
ция, SVG-файлы (Scalable Vector Graphics — масштабируемая векторная графика), до-
кументы Acrobat и все, что не является изображением, HTML, каскадными таблицами
стилей, клиентским или серверным скриптом. В таблице 74.1 перечисляются многие
стандартные тины мультимедиа.


Определение
Мультимедиа (multimedia) — это в той или иной мере компоненты
Web-сайта, которые не являются изображением, HTML, каскадными
таблицами стилей, клиентскими или серверными скриптами. К расп-
ространенным типам мультимедиа относятся звуковые файлы, фай-
лы видео, Flash-анимация, SVG-файлы и документы Acrobat.

Табл. 74.1. Стандартные типы мультимедиа

Тип мультимедиа Применение Расширение:
файла
мы, насыщенные PDF
Документы и фор
Adobe Acrobat (Portable Docu-
ment Format - Переносимый форматирована м текстом
формат документов)
AIFF, AIF
Apple Audio Interchange Format Звук
MOV
Apple QuickTime Потоковое аудио и видео
SWF
Macromedia Flash Анимация, ролик и, интерактив-
ные презентации и игры
DCR
Macromedia Shockwave Сложная анимац!1Я, клипы, инте-
рактивные презе нтации и игры
WV
A
Microsoft Wave Звук
Microsoft Windows Media WMA, WMV
Потоковое аудио и видео
MID
MIDI (Musical Instruments Digital Песни, мелодии
Interface - Цифровой интерфейс
музыкальных инструментов)
RM
RealMedia Потоковое аудио и видео
SVG
Scalable Vector Graphics Штриховые иллюстрации,
анимации
AU
Sun Audio Format Звук
ГЛАВА 74. Встраивание мультимедиа 411

Существует несколько способов определить, является ли некий файл мультимедий-
ным. Мультимедиа обычно представляется внешними файлами. Это означает, что
мультимедийный файл обычно отделен от HTML-документа, который отображает
или представляет мультимедиа. Но не всегда. Так, например, SVG-код можно записать
непосредственно в код HTML-страницы.
Более важным является то, что для воспроизведения мультимедийных файлов обыч-
но требуются функции, которые не встроены в стандартный браузер. К примеру, сам
по себе Internet Explorer не может отображать файлы Acrobat. Посетителю необходимо
установить специальное программное обеспечение, называемое подключаемым моду-
лем (plug-in), которое расширяет возможности браузера, предоставляя ему функции,

<< Пред. стр.

стр. 43
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>