<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

При наведении указателя мыши на ссылку текст, содержащийся в атрибуте t i t l e ,
отображается как всплывающая подсказка. Это приятный момент для зрячих посети-
телей. Более важно, что инструменты специального доступа, такие, как устройства
чтения с экрана, включают атрибут t i t l e ссылки в свои выходные данные, поэтому
люди с дефектами зрения будут ясно представлять, куда ведут ссылки.


Совет
В атрибуте title ссылки не требуется сообщать Click here (Щелкни-
те здесь), как, например, в предложении «Click here to go to the
Product page» (Щелкните здесь, чтобы перейти на страницу Продук-
ты). Щелканье понятно само собой. Просто сообщите «Go to the
Product page» (Переход на страницу Продукты).
ГЛАВА 65.
Открытие нового окна браузера
Когда ссылка указывает на внешний сайт, общепринято, чтобы при щелчке на ссылке
открывалось новое окно браузера. Внешний сайт загружается в новое окно, при этом
в исходном окне остается открытой страница с исходной ссылкой.
У


Совет
Помните, что если вы умеете что-нибудь, не обязательно это делать
во всех возможных случаях. Открытие нового окна браузера подходит
лучше всего для внешних ссылок и не уместно для внутренних ссы-
лок. Если новое окно появляется для каждой страницы на вашем сай-
те, то посетители, скорее всего, охотно пополнят ряды ненавистни-
ков открывания новых окон.


Некоторые разработчики Web-сайтов насмехаются над этой стратегией. Это обычно
те, кто ненавидит всплывающие окна с такой силой, что сам Фрейд (Freud) затруднил-
ся бы объяснить причины подобной ненависти, которая возможно связана с беспо-
рядком на рабочем столе. Учитывая, что внешние сайты регулярно исчезают, изменя-
ются их URL-адреса или на сайтах используются методы, которые отключают кнопку
Back (Назад) браузера, открытие нового окна браузера не так уж и плохо, как может
показаться на первый взгляд. На самом деле в некоторых кругах это считается любез-
ностью. Вывод посетителям сообщения об ошибке «File Not Found» (Файл не найден)
менее всего выглядит как ошибка, когда избавление от бесполезного сайта сводится к
простому закрытию нового окна браузера.
Открытие нового окна браузера очень просто реализовать для любой ссылки. Просто
добавьте атрибут t a r g e t в тег-анкер и установите для этого атрибута значение
_blank, как в следующем примере:
<а h r e f = " h t t p : / / e x t e r n a l s i t e / " target="_blank">BHemHMU сайт</а>
ГЛАВА 6 6 .
использование именованных анкеров
Тег-анкер необычен тем, что выполняет две разные функции в HTML. С одной сторо-
ны, тег-анкер можно использовать для связи с другой страницей:
<а href="anotherpage.htm">Переход на другую страницу</а>



Определение '
Именованный анкер (named anchor) — это местоположение на
Web-странице, к которому можно привязать ссылку.



С другой стороны, тег-анкер можно применить для задания местоположения, или
именованного анкера, к которому осуществляется привязка:
<а пате="привязатьздесь"х/а>
Способ функционирования тега-анкера зависит от его атрибутов. Когда тег-анкер со-
держит атрибут hr e f, он действует как источник ссылки, или элемент, на котором по-
сетитель щелкает, чтобы перейти на другую страницу. Но когда тег-анкер содержит ат-
рибут name, он функционирует как пункт назначения ссылки, или местоположение,
которое отображается в браузере после щелчка посетителя на ссылке.


Определение
Источник (source) ссылки — это элемент, который посетитель щелка-
ет для перехода на другую страницу. Пункт назначения (destination)
ссылки — это страница, которая загружается в окно браузера.




Задание именованных анкероВ
Чтобы установить анкер на странице, просто поместите тег-анкер точно в том месте,
куда должен переходить браузер. Не забудьте указать атрибут name вместо атриб^/та
href, чтобы тег функционировал как пункт назначения, а не как источник.
Одно из наиболее распространенных применений этого метода — деление длинной
Web-страницы на несколько разделов. Такое деление часто встречается на страницах
вопросов и ответов. Вверху страницы содержатся часто задаваемые вопросы (EAQ —
Frequently Asked Questions), которые являются анкерами hre f. Ответы на вопросы сле-
дуют дальше, каждый со своим тегом именованного анкера, как в следующем примере:
<а name="question01"x/a>
ГЛАВА 66. Использование именованных анкеров 353


<pxstrong>What i s the meaning of life?</strongx/p>
<p>The meaning of l i f e i s money.</p>
<a name="guestion02"x/a>
<pxstrong>What i s the meaning of money?</strongx/p>
<p>The meaning of money i s time.</p>
<a name="question03"x/a>
<pxstrong>What is the meaning of time?</strongx/p>
<p>The meaning of time i s life.</p>
Как показано на рисунке 66.1, сами именованные анкеры не отображаются в окне бра-
узера. Они не являются видимыми элементами. Они просто предоставляют конкрет-
ное место, с которым может устанавливаться связь ссылки.

Fife Edit View Ffivorftes Tods НЫр



FAQs
1 "What is the mealing of life?
2 What is the пнеагшд of money?
What is the meaning of time?
3.




Answers
What is the meaning of life?


The meaning of life is money.




What is the meaning of money?


The meaning of money is time.




What is the meaning of time?


The meaning of tune is life.




'j
Рис. 66.1. Именованные анкеры не отображаются в окне браузера,
но браузер знает об их существовании. Привяжите ссылку
к одному из анкеров, и браузер перейдет точно в местоположение анкера



Привязка к именованным анкерам
Чтобы привязать ссылку к именованному анкеру, необходим еще один тег-анкер, толь-
ко этот тег должен быть анкером-источником, а не анкером-пунктом назначения.
В атрибуте h r e f анкера-источника введите знак порядкового номера (#), сопровожда-
емый именем анкера, к которому требуется привязаться, как в следующем примере:
Строим Web-сайты
354



•clixa href = "#question01">What is the meaning of life?</ax/li>
•clixa href = "#question02">What is the meaning of money ?</ax/li>
<lixa href = "#question03">What is the meaning of time?</ax/li>



Часто задаваемые вопросы
Если именованные анкеры невидимы, то как браузер показыва-
ет, что посетитель перешел на один из них?
Обычно когда браузер переходит на именованный анкер, он прокру-
чивает экран так, чтобы анкер находился вверху.


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


Совет
Хорошим правилом является включение ссылки «Back To Тор» (Назад
вверх) где-нибудь после именованного анкера. В этом случае посе-
титель может быстро и легко вернуться к источнику ссылки.
Возврат в исходное место можно реализовать с помощью еще одно-
го именованного маркера. Предположим в качестве примера, что вы
разрабатываете страницу «Часто задаваемые вопросы». Непосред-
ственно до списка вопросов вставьте именованный маркер с именем
top. Затем после ответов на все вопросы добавьте следующий код
для получения требуемого эффекта:
<а href="#top">Ha3aM вверх</а>


Что делать, если требуется привязать ссылку к именованному анкеру, который на ;(-
дится на какой-нибудь другой странице? Нет проблем. Просто добавьте код именован-
ного анкера в конец пути, как в следующем коде:
<а href="../movies/movies.htm#newreleases">New Releases</a>
С помощью этого смешанного пути браузер находит страницу movie.htm, а затем пере-
ходит на данной странице к именованному анкеру newreleases.
ГЛАВА 67.
Создание ссылок электронной почты
Ссылка электронной почты в действительности не является ссылкой, хотя по внешне-
му виду похожа на нее и использует тег-анкер. Однако вместо направления браузера на
другую страницу или на именованный анкер открывается пустое окно электронной
почты. Используйте ссылки электронной почты на своем сайте как способ связи посе-
тителей с вами.



Определение
При щелчке на ссылке электронной почты (email link) открывается
пустое окно электронной почты.



Ссылка электронной почты выглядит подобно следующему примеру:
<а href-"mailto:name@emailaddress">IIomnMTe мне письмо</а>
Тег-анкер создает ссылку, как и в случае обычной гиперссылки. Им используется так-
же атрибут href, но значением этого атрибута является не путь. Вместо него присва-
ивается специальное значение, называемое по очевидным причинам mailto (почта).
Текст, который следует за mailto, является адресом получателя электронного сооб-
щения. Таким образом, если хотите, чтобы электронное сообщение пришло на ваш
личный электронный адрес, укажите в атрибуте href значение mailto, сопроводив
его двоеточием (:) и своим полным электронным адресом.


Совет
Можно также указать тему сообщения (subject) и адрес для копии со-
общения (СС):
<&
href'="mail to:name@emai1 address?subject=Mail&cc=anoth-
er@emailaddress"'>Пошлите мне письмо</а>
Однако темы и адреса для копий сообщений не работают с некоторы-
ми приложениями электронной почты, поэтому не удивляйтесь, если
они не будут работать и с вашими программами.




12'
356 Строим Web-сайты

Если вы ищите предлог для изменения цвета одной гиперссылки на странице без воз-
действия на стандартные цвета (см. главу 62), то ссылка электронной почты будет от-
личным кандидатом. Окрашивание данной ссылки в другой цвет помогает выделить
ее среди обычных гинерссылок на странице, тем самым подкрепляется идея о теш,
что ссылка электронной почты выполняет другую функцию.


Часто задаваемые вопросы
Я участвую в антиправительственном заговоре. Как ссылки
электронной почты могут помочь мне?
Никто не говорит, что адрес электронной почты в ссылке электронной
почты должен быть обязательно вашим. Если вам не терпится по-
озорничать, вы могли бы создать провокационную Web-страницу, до-
бавить ссылку электронной почты и направить пачки пышущих нена-
вистью сообщений, которые, вероятно, вызовет ваша страничка, не
адрес самой нелюбимой политической организации. Но считайте,
что вы об этом не читали в данной главе.
ЧАСТЬ 6.
Формы

Работа с элементами управления форм
Применение стилей к элементам управления текстом
Проверка достоверности входных данных форм
Навигация с помощью клавиши Tab - изменение
порядка переходов
Работа с наборами полей
Работа с метками
ГЛАВА 68.
Работа с элементами управления форм
Небольшие элементы, на которых вы щелкаете кнопками мыши и в которые вводите
текст на форме, называются элементами управления и иногда также упоминаются
как поля форм или объекты форм. Большая часть времени разработки эффективной
формы уходит на определение различных элементов управления и выяснение того,
какие функции выполняются каждым из элементов.


Определение
Элементы управления (Widgets), также называемые полями фор-
мы (Form fields) или объектами формы (Form objects), - это неболь •
шие фрагменты формы, на которых щелкают кнопками мыши и в ко-
торые вводят текст на форме.


В таблице 68.1 приводится список HTML-элементов управления на тот случай, если
вы забыли некоторые из них. В последующих разделах данной главы рассматривается
каждый из этих элементов управления.
Табл. 68.1. HTML-элементы управления

Тег
Элемент управления Назначение
<input type= "button";-
Запуск функции
Кнопка (общая)
<input type="check-
Флажок Выбор любых вариантов и 3
box" >
числа доступных
<input type="file">
Присоединение внешнего
Поле файла
файла к данным формы
<input type="hidden">
Скрытое поле Хранение скрытых данные
<input type="image">
Отправка данных формы и а
Поле изображения
Web-сервер
<select
Список Выбор любых вариантов и 3
числа доступных (но обыч • size="x"x/select>
ю
только одного)
<select></select>
Меню Выбор любых вариантов и 3
числа доступных (но обыч ю
только одного)
<input type="password":>
Поле пароля Ввод пароля
<input type="radio">
Переключатель Выбор одного из нескольк IX
вариантов
Возврат всех элементов уп эав- <input type="reset">
Кнопка «Сброс»
ления в форме к их состоя ш-
ям по умолчанию
359
ГЛАВА 68. Работа с элементами управления форм

Элемент управления Назначение Тег
<input type="submit">
Кнопка «Передача» Отправка данных формы на
Web-сервер
Ввод нескольких строк текста < t e x t a r e a x / t e x t a r e a >
Текстовая область
Ввод одиночной строки текста <input type="text">
Текстовое поле



Работа с кнопками общего назначения
КНОПКИ общего назначения (см. рис. 68.1) - это элементы графического интерфейса,
которые могут выбираться с помощью щелчка кнопкой мыши на них. Но когда посе-
титель щелкает на этих кнопках, то в отличие от кнопок отправки и сброса ничего не
происходит. Необходимо специально запрограммировать эти кнопки на выполнение
нужных вам функций, что обычно реализуется с помощью запуска функции JavaScript.
Тег input кнопки принимает событие onClick, в котором указывается имя запускае-
мой функции.
Листинг 68.1. Исходный код страницы, вид которой в браузере
показан на рисунке 68.1
<form>
<input type=button" name="totalButton" value="Calculate Total"
onClick="doTotal();">
</form>




Рис. 68.1. Кнопка общего назначения активизируется с помощью щелчка
кнопкой мыши на ней, но она ничего не выполняет до тех пор;
пока вы не добавите в ее тег событие onCl i ck

Атрибут name тега input для кнопки идентифицирует кнопку, а атрибут value содер-
жит метку, которая отображается на кнопке. Значением события onClick является
имя функции Javascript, которая запускается, когда пользователь щелкает на кнопке.
Строим Web-сайты
360


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


File ?d!t tfew Favorites Tools ijelp


Select the newsletters you would like to receive
D News
• Sports
• Business
П Entertainment
Q Humor




Puc. 68.2. Используйте флажки, когда имеется небольшое число вариантов, из которых
посетитель может выбрать требуемое число вариантов (либо даже вообще не выбирать)

Листинг 68.2. Исходный код страницы, вид которой в браузере
показан на рисунке 68.2
<form>
<table>
<tr>
<td>Select the newsletters you would like to receive:</td>
</tr>
<tr>
<tdxinput type="checkbox" name="newsCheck" value = "ye?i"
>News</td>
</tr>
<tr>
<tdxinput type="checkbox" name="sportsCheck" value="yes"
>Sports</td>
</tr>
<tr> .
<tdxinput type="checkbox" name="businessCheck" value="yes"
>Business</td>
ГЛАВА 68. Работа с элементами управления форм 361

</tr>
<tr>

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>