Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Что такое HTTP 12 страница




Рис. 13.3. Сетевые Java-приложения не имеют тех широких возможностей, которые есть у программ, хранящихся на жестком диске, но они тоже довольно интересны

Если вы не собираетесь самостоятельно заниматься написанием Java-апплетов (для этого нужно быть не веб-дизайнером, а все-таки программистом), можете посмотреть в Интернете, что предлагают другие. Там можно найти бесплатные программки, которые можно использовать на своем сайте. Можно начать с такого места:
http://www.yahoo.com/Computers_and_Internet/Programming_Languages/ Java/Applets. Как вы, наверное, уже поняли, это сайт Yahoo!. Разработчик Java, фирма Sun, на своем сайте тоже выложила ряд интересных приложений: http:// java.sun.com/openstudio/.

Что представляют собой Java-апплеты? В большинстве случаев это игры. Ну а кроме того, средства, улучшающие технологии веб-коммуникации. Самое полезное, что есть в Сети из апплетов, это средства работы с базами данных на сайтах. Есть очень много разного рода анимационных штучек, онлайновых обучающих систем и даже виртуальных мест встречи знакомых и не очень знакомых людей. Более серьезные применения апплетов — это решения для электронной коммерции, деловые приложения, программы типа текстовых редакторов и т. п. Как видите, область применения весьма обширна, и со временем она только расширяется, поэтому знание хотя бы основных принципов работы Java в Сети и умение включать апплеты в состав своих страниц не будет для вас лишним.

Включение апплетов с помощью <object>

Как вы уже могли убедиться, читая эту главу, <object> — это чуть ли не основной элемент HTML 4.01, XHTML 1.0 и последующих версий. Когда-то существовал специфический элемент <applet>, однако сейчас он уже находится на стадии вымирания. По крайней мере, XHTML Strict уже не помнит о нем ничего. Большинство современных браузеров спокойно работает с <object>, так что лучше им и пользоваться.

Вот пример использования <object> для включения Java-апплета:

<object codetype="application/java"
classid="java:myapp1et.class" standby="Идет загрузка апплета"
width=400 height=350>
</object>

В этом примере апплет должен называться myapplet.class и храниться в том же каталоге, в котором находится сам документ. Можно использовать атрибут codebase, значением которого должен являться полный URL апплета, это немного изменит вид всего элемента:

<object codetype="application/java"
codebase="http://www.fakecorp.com/applets/"
classid="java:myapplet.class" standby="Идет загрузка апплета"
width=400 height=350>
</object>

Вот, собственно, и все. Если браузер пользователя умеет работать с Java (а это касается далеко не всех браузеров), апплет будет подгружен и выведен на экран, как и любые другие внедренные элементы.

Резюме

В этой главе мы обсуждали элементы мультимедиа и их связь с веб-страницами. Вы должны были уяснить себе причины их использования, а также причины, по которым следует избегать их. Такой дуализм вызван, с одной стороны, возможностью значительного «оживления» содержимого сайта, а с другой — большими накладными расходами на передачу мультимедиа. Вы научились связывать и внедрять видео, звук и анимацию в веб-страницы. Затем мы обсудили наиболее популярные видеоформаты: QuickTime, RealMedia и Flash. Глава закончилась кратким обсуждением технологии включения Java-апплетов в веб-страницы.

В следующей главе вы познакомитесь с принципами разработки целых сайтов, включая создание таблиц стилей, помогающих придать всему сетевому продукту единообразный вид.+++++++++++++++++

Глава 14. Стили сайтов: разработка, доступность и глобализация

    • Стили сайтов
      • Базовый сайт
      • Разработка стилей
      • Мощь таблиц стилей
    • Таблицы стилей и доступность
    • Глобализация
      • Атрибут lang и элемент <g>
      • Таблицы и направление текста
    • Резюме

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

Речь пойдет и о спецификациях: CSS, а также HTML и XHTML в специальных применениях (в частности, с голосовыми браузерами). Если вы хотите создать полноценный стиль сайта, нужно задуматься о том, чтобы он включал в себя и элементы, необходимые для людей с ограниченными возможностями.

Наконец, мы обсудим и некоторые проблемы, связанные с глобализацией, то есть созданием универсальных разработок для нескольких национальных языков.

Эта глава содержит следующие разделы:

  • создание и реализация стилей сайтов;
  • доступность таблиц;
  • международные соглашения, касающиеся национальных языков; изменение направления текста.

Стили сайтов

Идея использования таблиц стилей уже была затронута в главе 10, однако полностью мы ее не исследовали. Если вы приступаете к созданию собственного сайта и вы стремитесь придать ему профессиональный внешний вид, то я рекомендую вам начать с разработки единого стиля всего сайта. Тогда и структура текста будет ясна, и изменить оформление будет гораздо проще. Если вы потратите время до начала написания сайта на создание продуманного стиля, это избавит вас от многих проблем в будущем.

Если у вас уже есть сайт, над которым вы работаете, к нему запросто можно добавить таблицу стилей. Зачем нужны элементы разметки типа <font> и ему подобные, когда с помощью таблицы стилей можно добиться единообразия как всех заголовков одного уровня, так и обычного текста? К тому же если вам придется когда-нибудь возвращаться к редактированию сайта, то гораздо проще будет разобраться в одном файле, содержащем стили, чем в нескольких десятках страниц, составляющих тело сайта.

Как только вы определились с тем, что вы хотите включить в таблицу стилей, вы создаете один-единственный документ, в котором содержится все, что касается оформления целого сайта. С этим документом связываются все страницы при помощи элемента <style>.

В этом разделе мы обсудим, как применение таблицы стилей может изменить внешний вид всего веб-узла.

Базовый сайт

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

Рис. 14.1. «Сырой» сайт, над которым нам предстоит работать

Мы попытаемся, затратив минимум усилий, придать сайту единообразный вид. Затем мы узнаем, как построить страницы таким образом, чтобы небольшие изме нения в таблице стилей приводили, например, к изменению всех заголовков. Не открывая в редакторе сами страницы! Все изменения будут производиться автоматически, поскольку имеется связь с таблицей стилей.

Рассмотрим пример части кода HTML, описывающей одну из страниц:

<head>
<titlе>Пример без стилей</titlе>
</head>


<body>
<hr width="50%" />
<h2><font face="arial. helvet1ca">0т редактора...</font></h2>
<h4><font face="times. times new roman" size="+l">Прощай,
малышка!</font></h4>
<blockquote>
<p><font face="times. times new roman"><b>Привет
Bceм</b></font></p>

 

<pxfont face="times, times new romman">Как это обычно
бывает среди пишущей братии? Их жизнь состоит не из
поступков, а из впечатлений. Они заводят отношения,
поддерживают и разрывают их только для того,
чтобы прочувствовать сюжеты своих будущих книг.</font></p>
<pxfont face="times. times new готап">Я не могу сказать,
что поддерживаю это болезненное стремление пренебречь
всем, кроме чистого искусства. </font></p>
<р><а href="letter.html ">Продолжение колонки редактора...</а></р>
</blockquote>

 

<hr width=-"50% />
</body>

Как видите, оформление страницы в виде HTML-кода не отличается стройностью и четкостью. Конечно, в браузере все это выглядит не так уж страшно (рис. 14.2). (На самом деле, я немного подумал и решил все-таки чуть-чуть «причесать» код, сделав все буквы в названиях элементов строчными, а ведь они были заглавными.) Первое, что хочется сделать с кодом, — это убрать повторения и длинные описания оформления чуть ли не каждого элемента. Вот здесь-то нам и пригодятся таблицы стилей.

Рис. 14.2. Вот как этот отрывок выглядит в браузере

Разработка стилей

Написание таблицы стилей для веб-узла требует некоторых предварительных размышлений, поскольку нужно хорошо представлять, какие элементы оформления могут потребоваться и как они должны выглядеть. Кроме того, следует осознать, сколько разных стилей могут описывать один и тот же элемент. Например, может возникнуть потребность переопределять элемент <р> раз пять или шесть. Впрочем, как вы, наверное, догадываетесь, в процессе работы можно добавлять стили. Если мы боремся за то, чтобы код веб-страниц был как можно проще, значит, мы допускаем усложнение кода таблицы стилей. Это действительно взаимосвязанные вещи.

Взглянем теперь на последний пример. Думаю, не нужно долго объяснять, какие именно элементы просятся быть записями таблицы стилей. Рассмотрим процесс замены.

  • Если вы предполагаете использовать элемент <hr> с параметром widtn="50%" до статочно часто, можно для начала внести в таблицу его: hr {width: 50%}. Это означает то же самое, что и <hr width="50%>.
  • Давайте оформим все заголовки шрифтом Arial, Helvetica или Sans Serif: h1i, h2, h.3, h4, h.5, h.6 {font-family: Arial, Helvetica, Sans Serif}.
  • В оригинале элемент <h2> выступал в качестве первого заголовка. Так посту пать не рекомендуется, а в примере, видимо, пытались сделать шрифт заголовка чуть поменьше за счет замены <hl> на <h2>. Но в таблице стилей мы можем просто переопределить <hl>, если не хотим видеть на сайте большие заголовки: h1 {font-size: 18pt}.
  • Опять же, в оригинале сразу после заголовка второго уровня (<h2>) следовал заголовок четвертого уровня (<h4>). Это, разумеется, тоже не лучший вариант, но <п4> здесь работает не заголовком, а подзаголовком. Давайте мы определим подзаголовок отдельно: р.subhead {font-family: Times, Times New Roman, Serif; font-size: 16pt: color: blue}.
  • Теперь определим абзац с отступом, чтобы избежать использования элемента <blockquote>. Это мы сделаем следующим образом: font-size: 12pt: margin-left: 50px; margin-right: 50px}.

Даже после этих действий у нас уже вырисовывается некоторая таблица стилей:

hr {width: 50%}
h1. h2. h3. h4. h5. h6 {font-family: Anal. Helvetica. Sans Serif}
h1 {font-size: 18pt}
p.subhead {font-family: Times. Times New Roman.
Serif: font-size: 16pt: font-weight: bold} I
p.indent {font-family: Times. Times New Roman.
Serif: font-size: 12pt: margin-left: 50px;
margin-right: 50px}

Будем исходить из предположения, что все контейнеры <р> оформляются шрифтами Times или Times New Roman размером 12 пунктов. Мы можем определите это для себя, а затем применять принцип наследования в таблицах стилей. При этом нам нужно будет только добавлять новые свойства уже имеющихся стилей.

ПРИМЕЧАНИЕ

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

Итак, теперь наша таблица стилей выглядит следующим образом:

hr {width: 50%}
h1 h2. h3. h4. h5. h6 {font-family: Arial. Helvetica. Sans Serif}
h1 (font-size: 18pt }
p {font-family: Times. Times New Roman.
Serif: font-size: 12pt}
p.subhead {font-size: 16pt: font-weight: bold} p.indent
{margin-left: 50px: margin-right: 50px}

 

 

Обратите внимание на то, как легко читаются стили. Вначале определяется главный элемент, <р>, затем последовательно описываются классы, каждый из которых использует базовое определение и добавляет что-то свое.

Сохраните таблицу стилей под именем default.css и поместите этот файл в каталог с.html-файлами вашего сайта. Последующий код приведет к результатам, показанным на рис. 14.3.

<head>
<title>Пример таблицы стилей</title>
<link rel="stylesheet" href="default.css" />
</head>

<body>
<hr />
<h1>0т редактора...</h1>
<p class="subhead">Прощай, малышка</p>
<p class="indent"><b>Привет всем</b></р>
<p class="indent">Kaк это обычно бывает среди пишущей
братии? Их жизнь состоит не из поступков, а из впечатлений.
Они заводят отношения, поддерживают и разрывают
их только для того, чтобы прочувствовать сюжеты своих
будущих книг. </р>
<р class="indent">Я не могу сказать, что поддерживаю это
болезненное стремление пренебречь всем, кроме
чистого искусства. Ибо оно теряется в нечестных поступках,
перестает быть чистым, а иногда и вовсе перестает
быть искусством.</р>
<р class="indent"><a href="letter.html">Пpoдoлжeниe
колонки редактора...</а></р>
<hr />
</body>

 

Рис. 14.3. Та же страница, но с применением таблицы стилей

Посмотрим на результат. На рисунке видно, что оформление почти не изменилось по сравнению с первоначальным вариантом, зато код стал значительно «чище». Уб раны стоявшие не на своем месте элементы типа <h4> и <blockquote>. А если страницу просматривать с помощью какого-нибудь необычного браузера, то она останется вполне читабельной. Проделано всего несколько шагов, которые позволили нам немного «подчистить» оформление и дали возможность более эффективно обновлять страницы и сайт в целом. Впрочем, думаю, вы увидели, что рис. 14.3 практически не отличается от рис. 14.2 — вся разница заключается только в исходном коде.

Мощь таблиц стилей

Вы увидели, как легко таблицы стилей работают с веб-страницами, однако главное их достоинство состоит в том, что одни и те же определения могут распростра пяться на целый сайт. Описав несколько главных элементов и создав для каждого: из них некоторое количество классов, вы создадите прозрачный и соответствующий всем стандартам XHTML-код. Кроме того, можно создать несколько таблиц стилей для одного и того же веб-узла и переключаться между ними при помои элементов <link />.

Таблицы стилей предоставляют широкое поле для экспериментов. Произведя несколько изменений в одном файле, вы увидите, как весь сайт начнет выглядеть по другому. Внимательно посмотрите на код, приведенный далее, и попробуйте по нять, в чем заключаются отличия от предыдущего варианта:

a: hover {color: yellow: background-color: blue}
indent (margin-left: lOOpx: margin-right: 1OOpx;
padding-left: lOpx: padding-right: Юрх:
background-color: ffccff}
hr {width: 50*}
h1. h2. h3. h4. h5. h6
{font-family: Anal, Helvetica.
Sans Serif: font-variant: small-caps)
p {font-family: Times.
Times New Roman. Serif: font-size: 12pt}
p.subhead
{font-family: Courier, Courier New.
Monaco: font-size: 16pt; color: blue}

Внеся указанные изменения, сохраните таблицу стилей в файле default.css. Сейчас мы увидим, как похорошеет наша страница. Для этого 'воспользуемся элементом <div class="indent"> (так делается из-за того, что класс indent был определен без указания какого-либо конкретного элемента). Что это даст? Мы сможем распространить стиль на все имеющиеся абзацы с отступом. Попробуем немного поэкс периментировать с оформлением страницы (рис. 14.4). Рассмотрим окончатель ный вариант:

<head>
<title>Пример таблицы стилей</title>
<link rel="stylesheet" href="default.css" />
</head>

 

<body>
<hr/>
<h1>OT редактора...</h1>

 

<div class="indent">
<p class="subhead">Прощай, малышка!</р>

 

<р><b>Привет всем</b></р>

 

<р>Как зто обычно бывает среди пишущей братии? Их жизнь состоит

не из поступков, а из впечатлений. Они заводят отношения,
поддерживают и разрывают их только для того, чтобы
прочувствовать сюжеты своих будущих книг.</р>

 

<р>Я не ногу сказать, что поддерживаю это болезненное стремление

пренебречь всем ради чистого искусства. Ибо оно теряется
в нечестных поступках, перестает быть чистым
вовсе перестает быть искусством.</р>

 

<р><а href="letter.html">Продолжение колонки редактора...</а></р>
</div>

 

<hr/>
</body>

 

Рис. 14.4. Страница после некоторых экспериментов

Не следует забывать о чувстве меры. Знаете, о чем гласит один из законов Мерфи? «Чем дольше дизайнер возится с оформлением кнопок телевизора, тем уродливей они получаются». И все же невозможно не восхититься возможностями таблиц стилей, позволяющими изменять оформление целого сайта, не открывая ни одной его страницы.

Таблицы стилей и доступность

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

Итак, обратимся к речевым возможностям CSS2. В таблице 14.1 показаны многие элементы, реализующие их.

ПРИМЕЧАНИЕ

Как я уже отмечал в главе 10, CSS2 отличается от спецификации CSS1 исключительно дополнительными элементами. Кроме речевых возможностей, CSS2 включает в себя элементы оформления таблиц. Позиционирование с помощью CSS обсуждается в главе 19.

Таблица 14.1. Речевые элементы CSS2

Свойство Значения Описание
azimuth left, center-left, center, center-right, right или угол (от -360° до 360°) Позволяет задать угол, под которым находится воображаемый источник звука относительно слушателя
cue-after url Проигрывает звуковой файл, расположенный по указанному URL, после прочтения текста
cue-before url Проигрывает звуковой файл, расположенный по указанному URL, до прочтения текста
elevation below, level, above или значение угла (от -90° до 90°) Угол в вертикальной плоскости, под которым расположен воображаемый источник звука
pause-after секунды или миллисекунды Пауза после проговаривания элемента
pause-before секунды или миллисекунды Пауза перед проговариванием элемента
pause секунды или миллисекунды Пауза до и после проговаривания элемента
pitch low, medium, high или частота (Гц) Высота звучания голоса
pitch-range 0, 50 или другое число Величина колебания частот: 0 — монотонно, 50 — нормально
play-during url Адрес звукового файла для фонового воспроизведения
speak none, normal, spell-out Манера произношения
speak-numeral digits, continuous Манера произнесения числительных: цифра за цифрой либо все число сразу
speak-punctuation и т. д.) none, code Значение «code» означает, что все знаки пунктуации нужно называть («точка», «запятая»
speak-rate slow, medium, fast, число слов в минуту Скорость речи
voice-family male, female, Zervox, Princess, child «Чьим» голосом говорить (как и шрифты, голоса должны быть установлены на компьютере пользователя)
volume silent, soft, medium, loud Громкость

Эти свойства можно использовать внутри определения стиля точно так же, как любые другие. Например:

h1 {volume: loud; voice-family:
Princess: pause: 1: speak-numerals: digits}
p {volume: loud: voice-family:
male: speak-punctuation: none}

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

Свойства azimuth, elevation и pitch — это уже какая-то эзотерика, но, в принципе, они позволяют настроить звучание, расположив мнимый источник звука в пространстве и задав высоту его звучания. Можно сделать так, чтобы, например, заголовки и обычный текст звучали из «разных углов» помещения.

ПРИМЕЧАНИЕ

Было бы неплохо иметь речевой браузер, чтобы все это проверить, не так ли? Стандарт еще очень молод, я надеюсь на скорый выход обновлений, и все-таки хочется привести хотя бы один пример такого браузера. Ищите его на сайте http://www.cast.org/bobby/.

Глобализация

Еще один шаг, который нужно сделать в процессе планирования сайта, — это определить, какие национальные языки он будет поддерживать. Для этого в стандарте XHTML существует даже специальный атрибут lang, элемент <q>, а также специальные команды, касающиеся таблиц и блоков текста.

Атрибут lang и элемент <q>

lang может быть атрибутом целого ряда различных элементов. Он определяет их национальный язык. Значение представляет собой двухбуквенное обозначение, например:

<р lаnd="ru">Этот абзац написан по-русски.</р>

Зачем он нужен? Неужели и так непонятно, на каком языке что написано на странице? Ну, во-первых, это не всегда очевидно, но не в этом дело. Атрибут lang позволяет браузеру принять решение о том, как отображать элемент, как его произносить (если браузер речевой), он также помогает поисковым системам в классификации сайтов. По умолчанию язык, на котором написана страница, является частью определения XML, которое пишется в начале кода. Это уже обсуждалось в главе 4. Так что если lang встречается где-то посередине страницы, значит, временно изменился ее язык.

Вот некоторые двухбуквенные обозначения языков: а г означает арабский, de — немецкий, es — испанский, fr — французский, he — иврит, hi — хинди, It — итальянский, ja — японский, nl — голландский, pt — португальский, ги — русский, sа — санскрит и ch — китайский.

Атрибут lang может использоваться с элементом <q>, если цитата приводится на иностранном языке:

<p><q lang="en">I can't believe she said that</q>.
- сказал Филипп.</р> <p><q lang="es">
Si. es verdad</q>, - ответила Мария.</р>

Таблицы и направление текста

Интересно отметить тот факт, что внутри таблицы, да и во многих других нужных местах, можно задать направление текста. Для этого используется атрибут di r. Например:

<р dir="rtl">3TOT текст будет написан справа налево,
а не слева направо</р>

Атрибут di г может быть включен в элементы <tr> или <td>, тогда в строке или ячейке
изменится направление текста. Эта возможность особенно часто используется при написании текста на таких языках, в которых принято писать справа налево (например, на иврите).

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

Резюме

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

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

Глава 15. Добавление HTML-форм

    • Основы HTML-форм
      • Элемент <form>
      • Другие атрибуты <form>
    • Создание форм
      • Текстовые поля и атрибуты
      • Элемент <input>
      • Создание меню
      • Пример полноценной формы
    • Дизайн электронных бланков
      • Проблемы дизайна бланков
      • Разрывы строк, абзацы и горизонтальные линии
      • Горизонтальные линии
      • Использование абзацев
    • Другие элементы дизайна форм
      • Использование списков в электронных бланках
      • Использование таблиц в электроных бланках
      • Структура формы
      • Общедоступность: метки и клавиатурный доступ
    • Резюме

Язык HTML позволяет включать в состав веб-страниц такие элементы интерфейса, как меню, переключатели и текстовые области, благодаря чему посетители сайтов имеют возможность отправки своих данных. Эти данные могут быть как предельно простыми (например, электронный адрес), так и достаточно сложными. Например, пользователь может работать в онлайновом режиме с каким-нибудь Интернет-приложением (скажем, можно вызвать врача через сайт НМО или взять в аренду автомобиль с помощью сайта соответствующей организации).

В этой главе вы узнаете о создании и редактировании электронных форм на HTML В главе 16 будет показано, как создаются скрипты для обработки этих форм.

В данной главе содержатся следующие разделы:

  • основы HTML-форм;
  • добавление полей, кнопок и элементов управления формами;
  • другие элементы организации форм;
  • списки, таблицы и CSS в применении к формам.

Основы HTML-форм

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

  • Вопросы, ответы на которые следует набирать в специальных текстовых полях (например, сведения об имени или адресе, а также жалобы, комментарии и т. п.).
  • Вопросы, ответы на которые следует выбирать из предлагаемого списка. Последний может быть организован как в виде меню, так и в виде набора флажков.
  • Вопросы, единственные ответы на которые нужно выбирать с помощью набора переключателей.

Формы создаются с использованием набора элементов XHTML, определяющих поля ввода, переключатели и т. п. Каждый создаваемый вами элемент управления будет иметь свое уникальное имя, которое будет использоваться в качестве переменной. Выбор, который сделает пользователь, будет значением этой переменной. Например, если полю ввода присвоить имя city, и пользователь введет Boston, это будет означать, что переменной city присвоили значение Boston.

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




Поделиться с друзьями:


Дата добавления: 2014-12-29; Просмотров: 308; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.079 сек.