Всего за 134.9 руб. Купить полную версию
Рис. 9.6. Внешний вид меню с группированными пунктами
Подписи элементов управления
Некоторые элементы управления, например кнопки, содержат надписи, по которым пользователь может определить назначение этих элементов управления. Для других элементов типа текстовых полей, флажков и т. п. приходится создавать подписи вручную, смешивая определения элементов управления формы с текстом.
Существует еще один способ задания подписей к элементам управления – использование HTML‑элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML‑документа.
Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами <LABEL> и </LABEL> помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления.
При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом:
<LABEL for = "pass">Введите пароль:</LABEL>
<INPUT type = "password" name = "user_pass" id = "pass">
В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так:
<LABEL>
Введите пароль: <INPUT type = "password" name = "user_pass">
</LABEL>
Текст может находиться до или после определения элемента управления. В теле HTML‑элемента LABEL в этом случае должно быть только одно определение элемента управления.
9.3. Группировка элементов управления
При создании форм есть возможность сделать более выразительным общее предназначение некоторых элементов управления, дополнительно заключив их в рамку так, как показано на рис. 9.1. Рамку можно подписать, а можно оставить без подписи.
Рамка создается при помощи HTML‑элемента FIELDSET. Между парными тегами <FIELDSET> и </FIELDSET> помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.
Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML‑элемент задается при помощи парных тегов <LEGEND> и </LEGEND>, между которыми помещается текст подписи. Можно "поиграть" также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по‑разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.
В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6).
Пример 9.6. Группировка элементов управления
<HTML>
<HEAD>
<TITLE>Пример страницы с формой</TITLE>
</HEAD>
<BODY>
<FORM action="somesite.com/cgi-bin/proc.exe">
<H1>Регистрация почтового ящика</H1>
<P>
<FIELDSET>
<LEGEND>Персональная информация</LEGEND>
Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1"><BR>
Имя: <INPUT name="personal_firstname" type="text" tabindex="2"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Информация о почтовом ящике</LEGEND>
Адрес: <INPUT name="mail_address" tabindex="3"> <BR>
Пароль: <INPUT name="mail_password" type = "password" tabindex="4">
<BR>
Подтверждение пароля: <INPUT name="mail_password" type = "password"
tabindex="5">
</FIELDSET>
<FIELDSET>
<LEGEND>Дополнительные сведения</LEGEND>
Желаете получать рекламные рассылки?
<INPUT name="add_goods" type="radio" value="Yes" tabindex="6">Да
<INPUT name="add_goods" type="radio" checked value="No"
tabindex="7">Нет
<BR>
Желаете получать прогноз погоды на каждый день?
<INPUT name="add_weather" type="radio" value="Yes" tabindex="8">Да
<INPUT name="add_weather" type="radio" checked value="No"
tabindex="9">Нет
</FIELDSET>
<P>
<INPUT type = "submit" value = "Регистрация" tabindex = "10">
<INPUT type = "reset" value = "Сброс" tabindex = "11">
</FORM>
</BODY>
</HTML>
Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI‑приложения, способного обрабатывать форму.
Глава 10
Введение в CSS
Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб‑сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).
10.1. Возможности CSS
Таблицы стилей позволяют управлять отображением практически любого содержимого HTML‑документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры, влияющие на то, как должны показываться заголовки. Можно задать полужирное или еще какое‑нибудь начертание шрифта определений в списке определений. Помните, как это приходилось делать вручную в примерах гл. 4?
С использованием таблиц стилей можно забыть о необходимости физического форматирования текста, а также о настройке отображения таблиц, списков и других элементов HTML‑документов. Кроме того, таблицы стилей позволяют настраивать даже параметры отображения содержимого документа, недоступные при использовании HTML‑элементов (отступы абзацев, стили рамок рисунков и многое другое, вплоть до интервала между буквами текста и свободного позиционирования элементов страницы).
По‑настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Представьте себе, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на С++, содержащее 50 страниц с 200 примерами (листингами). По какой‑то причине нужно поменять цвет шрифта этих самых листингов: ничего не поделаешь, придется вносить изменения в каждый тег <PRE> (200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.
Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по‑разному отображаются на различных типах устройств: от карманного ПК до проектора.
Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.
10.2. Внешние и встроенные таблицы стилей
Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML‑элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
HTML‑элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:
<HEAD>
<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">
<LINK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css">
<HEAD>
Встроенные таблицы стилей задаются внутри HTML‑элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML‑элемента LINK.
Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат: