Размещено на http://www.allbest.ru/

ВВЕДЕНИЕ

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

Данный дипломный проект посвящен разработке клиент-серверного веб-приложения «Интернет-аукцион».

Целью данного дипломного проекта является разработка клиент-серверного приложения «Интернет-аукцион».

Задачами дипломного проекта являются:

изучить инструментальные средства для создания веб-приложений;

изучить особенности выбранных интернет-аукционов;

изучить язык объектного анализа и проектирования UML;

разработать веб-приложение интернет-аукциона;

осуществить наполнение и тестирование разработанного интернет-магазина;

Объектом исследования дипломного проекта является веб-приложение «Интернет-аукцион».

В данном дипломном проекте имеются следующие разделы:

Обзор инструментальных средств для создания клиент-серверных веб-приложений и языка объектного анализа и проектирования UML.

Проектирование веб-приложения «Интернет-аукцион».

Разработка веб-приложения «Интернет-аукцион».

Дипломный проект насчитывает 212 страниц, 21 источник, 35 рисунков, 12 листингов.

1. Обзор инструмента РИЯ для создания клиент-серверных веб-приложений

1.1 Концепция Web 2.0

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

Что требуется от современного Web-сайта? Соблюдение при создании трех несложных правил:

Строго соблюдать все интернет-стандарты.

Тщательно продумать наполнение Web-страниц.

Позаботиться о доступности Web-страниц.

Рассмотрим их подробнее. Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung.

Одно объединяет все это аппаратно-программное многообразие - соответствие интернет-стандартам. Иначе устройства в лучшем случае будут отображать Web-страницы неправильно, в худшем - вообще не будут работать.

Из этого следует первое правило из перечисленных ранее - Web-дизайнеры при создании Web-страниц обязаны строго придерживаться современных интернет-стандартов, чтобы их творения одинаково (ну, или почти одинаково) отображались на всех устройствах. Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье - не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.

Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org. Все опубликованные там стандарты обязательны к применению.

Интернет когда-то начинался как сеть ученых, которым было нужно обмениваться результатами исследований. А что представляли собой эти результаты? В основном, текст, возможно, с иллюстрациями. Ученые - публика в этом смысле невзыскательная, им вполне хватало скромных возможностей тогдашнего WWW. Теперь же абсолютное большинство пользователей Интернета - обычные обыватели. Им мало простого текста с парой картинок, им подавай хорошо оформленный текст, музыку и видео. Они требовательнее первых обитателей Сети.

Отсюда вытекает второе правило - Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.

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

Web-страницы должны легко читаться и не "резать" глаза.

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

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

Одним словом - все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка...)

Интернет грозится прийти на самые разные устройства с различными характеристиками: быстродействием процессора, объемом памяти, разрешением экрана, скоростью доступа к Сети. Но все они должны обеспечивать единообразный вывод Web-страниц. Как этого достигнуть?

Вот и третье правило - Web-дизайнеры должны заботиться о доступности Web-страниц.

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

Web-страницы не должны быть чересчур сложными. Чем сложнее Web-страница, тем больше времени и системных ресурсов требует ее обработка и вывод.

Web-страницы не должны требовать для отображения никакого дополнительного программного обеспечения. В идеале для их вывода достаточно только Web-обозревателя.

Но как эти правила реализуются на практике? Давайте откроем какой-нибудь современный Web-сайт, например, принадлежащий организации W3C. Его можно найти по интернет-адресу http://www.w3.org. Сайт приведен на рисунке 1.1.

Из дизайна сайта можно сделать следующие выводы:

Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.

Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.

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

Рис. 1.1 - Сайт консорциума w3c.org

Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо-голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.

Имеется видеоролик.

Web-страница быстро загружается и мгновенно выводится на экран.

Web-страница ничего не требует для своего вывода, кроме Web-обозревателя.

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

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

Особое внимание нужно обратить на структуру и наполнение Web-страниц.

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

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

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

Также концепция Web 2.0 предусматривает четыре принципа, являющиеся "передним краем" Web-дизайна. Пока еще очень мало Web-сайтов им следует (и "домашний" Web-сайт W3C, увы, не исключение...). Рассмотрим их по порядку.

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

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

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

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

В качестве примера Web-сайта, реализующего эти четыре принципа, можно привести Web-сайт, позволяющий загрузить библиотеку Ext JS, расположенный по интернет-адресу http://www.sencha.com/ и показанный на рисунке 1.2. Особенности данного сайта следующие:

Содержимое, представление и поведение составляющих его Web-страниц хранится отдельно, в разных файлах.

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

После загрузки текста статьи на его основе генерируется окончательное ее представление. Фактически мы имеем генерируемое содержимое.

Статьи справочника связаны друг с другом семантически. Эти связи используются для генерирования гиперссылок на "родственные" статьи.



Рис. 1.2 - Сайт Sencha c библиотекой Ext JS

1.2 Язык разметки HTML5

Для форматирования содержимого Web-страниц применяется особый язык - HTML (HyperText Markup Language, язык гипертекстовой разметки). С помощью команд - тегов - этого языка создают и абзацы текста, и заголовки, и врезки, и даже таблицы. Первая версия языка HTML появилась в 1992 году [1, 2, 3, 4, 5].

Язык HTML и его теги. Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку.

Это позволит нам лучше познакомиться с HTML. Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в следующем листинге.

<!DOCTYPE html>

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

<BODY>

<H1>Справочник по HTML</H1>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!

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

<STRONG>HTML</STRONG>.</P>

</BODY>

</HTML>

Создана Web-страница, содержащую заголовок, абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура "HTML").

Пока что ограничимся небольшим фрагментом HTML-кода.

Листинг 1.2

<H1>Справочник по HTML</H1>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!

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

<STRONG>HTML</STRONG>.</P>

Здесь мы видим текст заголовка и абзаца. И еще символы < и > . Рассмотрим смысл этих символов.

Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.

Начнем с тегов <H1> и </H1> , поскольку они идут первыми. Эти теги превращают фрагмент текста, находящийся между ними, в заголовок. Тег <H1> помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег </H1> устанавливает конец "охватываемого" фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.

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

Рассмотренные нами теги <H1> и </H1> в HTML фактически считаются одним тегом <H1> . Такой тег называется парным.

Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)

Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P> . Это значит, что содержимое тега <STRONG> будет отображаться как часть абзаца (тега <P> ).

Давайте выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM> :

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех

Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>.

Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.

Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.

Между символами < , > , / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.

В обычном тексте, не являющемся тегом, не должны присутствовать символы < и > . (Эти символы называют недопустимыми.) В противном случае Web-обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.

Вложенность тегов. Если мы снова посмотрим на приведенный в предыдущем листинге фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег <STRONG> вложен в тег <P> , являясь частью его содержимого. Тег <P> , в свою очередь, вложен в тег <BODY> , а тот -- в "глобальный" тег <HTML> . (Теги <BODY> и <HTML> мы рассмотрим чуть позже.) Такая вложенность тегов в HTML -- обычное явление.

Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега <STRONG> будет наложено на действие тега <P> , и фрагмент абзаца окажется выделенным полужирным шрифтом, при этом оставаясь частью этого абзаца.

Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег <EM> , заключим еще и в тег <STRONG> .

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</STRONG></EM>! Здесь вы сможете найти

. . .

В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега <STRONG> будет наложено на действие тега <EM>.

Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи. Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти

. . .

Web-обозреватель может отобразить нашу Web-страницу неправильно. Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера.

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

Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, - дочерним, или потомком. То же самое, что и в случае тегов.

Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег <P> , то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег <P> .

Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM> , а тот, в свою очередь, - в тег <P> . В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.

Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов. На отображение Web-страницы они никак не влияют.

<BODY>

<H1>Справочник по HTML</H1>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!

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

<STRONG>HTML</STRONG>.</P>

</BODY>

Здесь сразу видно, что теги <H1> и <P> вложены в тег <BODY> , - видно по отступам.

Секции Web-страницы. Снова вернемся в полному HTML-коду нашей Web-странички. Мысленно удалим из него уже рассмотренный фрагмент.

<!DOCTYPE html>

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

<BODY>

. . .

</BODY>

</HTML>

Здесь применены несколько тегов, которые нам не знакомы. Это так называемые невидимые теги - теги, содержимое которых никак не отображается Web-обозревателем. Они занимаются тем, что хранят сведения о параметрах самой Web-страницы и делят ее на две секции, имеющие принципиально разное назначение. Секция тела Web-страницы находится внутри парного тега <BODY> . Она описывает само содержимое Web-страницы, то, что будет выведено на экран. Именно секцию тела мы рассматривали в предыдущих разделах.

А в парном теге <HEAD> находится секция заголовка Web-страницы. (Не путать с заголовком, который создается с помощью тега <H1> !) В эту секцию помещают сведения о параметрах Web-страницы, не отображаемые на экране и предназначенные исключительно для Web-обозревателя.

И заголовок, и тело Web-страницы находятся внутри парного тега <HTML> , который расположен на самом высшем (нулевом) уровне вложенности и не имеет родителя.

Любая Web-страница должна быть правильно отформатирована: иметь секции заголовка и тела и все соответствующие им теги. Только в таком случае она будет считаться корректной с точки зрения стандартов HTML.

Метаданные и тип Web-страницы. Вернемся к сведениям о параметрах Web-страницы, которые находятся в секции ее заголовка. Что это за параметры? И что они задают?

Сначала введем еще пару терминов. Параметры Web-страницы, не отображаемые на экране и предназначенные для Web-обозревателя, назовем метаданными. Это своего рода данные, описывающие другие данные, в нашем случае -- Web-страницу. А HTML-теги, которые задают метаданные, называются метатегами.

Прежде всего, в метаданные входит название Web-страницы. Оно отображается в заголовке окна Web-обозревателя, где выводится содержимое данной Web-страницы, и хранится в "истории" (списке посещенных к настоящему времени Web-страниц). Название помещается в парный тег <TITLE> и располагается в секции заголовка Web-страницы:

<HEAD>

. . .

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

Далее, обычно в секции заголовка расположен особый метатег, задающий кодировку, в которой сохранена Web-страница.

<META> :

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

. . .

</HEAD>

Приведенный тег задает кодировку UTF-8, в которой мы сохранили нашу Web-страничку. Существуют аналогичные теги, задающие кодировки 1251, КОИ-8, кодировка западноевропейских и восточноазиатских языков и др.

Кодировка UTF-8 - это разновидность кодировки Unicode, предназначенная для Web-дизайна. Кодировка Unicode (а значит, и UTF-8) может закодировать все символы всех языков, имеющихся на Земле. Именно она в настоящее время чаще всего применяется для создания Web-страниц.

У метатега <META> нет ни содержимого, ни закрывающей пары! Это так называемый одинарный тег, который имеет только открывающую пару. Такой тег действует в той точке HTML-кода, где он сам находится, и либо задает метаданные, либо помещает в соответствующее место Web-страницы какой-либо элемент, не относящийся к тексту. Впоследствии нам будут часто встречаться одинарные теги.

Теперь осталось рассмотреть последний тег, находящийся в самом начале HTML-кода нашей Web-страницы. Этот тег находится даже вне "всеобъемлющего" тега <HTML> . Метатег <!DOCTYPE> задает, во-первых, версию языка HTML, на которой написана Web-страница, а во-вторых, разновидность данной версии. Так, существуют мета-теги <!DOCTYPE> , указывающие на HTML 5, "строгую" и "переходную" разновидности HTML 4.01 (это предыдущая версия языка HTML, еще действующая на данныймомент) и язык XHTML (ответвление HTML, имеющее несколько другой синтаксис).

Так вот, метатег <!DOCTYPE html> , который мы поставили в начало нашей Web-странички, указывает на HTML 5.

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

Посмотрим на тег <META> , задающий кодировку Web-страницы:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

Здесь мы видим, что между символами < и > , помимо имени тега, присутствуют еще какие-то данные. Это атрибуты тега, задающие его параметры. В частности, два атрибута данного тега <META> указывают, что документ представляет собой Web-страницу, и задают ее кодировку.

Каждый атрибут тега имеет имя, за которым ставится знак равенства, и значение данного атрибута, взятое в двойные кавычки. Так, атрибут с именем HTTP-EQUIV имеет значение "Content-Type" , говорящее о том, что данный метатег задает тип документа. А атрибут с именем CONTENT имеет значение "text/html; charset=utf-8" , обозначающее, что данный документ представляет собой Web-страницу, и указывающее, что она набрана в кодировке UTF-8.

Атрибуты тегов бывают обязательными и необязательными. Обязательные атрибуты должны присутствовать в теге в обязательном порядке. Необязательные же атрибуты могут быть опущены; в таком случае тег ведет себя так, будто соответсвующему атрибуту присвоено значение по умолчанию.

Атрибуты HTTP-EQUIV и CONTENT тега <META> обязательные - кому нужен метатег без метаданных... А вот атрибут ID , поддерживаемый практически всеми тегами HTML, необязательный, он используется только в особых случаях:

<H1 ID="header1">Справочник по HTML</H1>

Ранее мы рассмотрели три правила написания HTML-кода. Добавим к ним еще шесть.

Имена атрибутов тегов могут быть написаны как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена атрибутов тегов пишут прописными буквами, а их значения - строчными, если, конечно, значение не чувствительно к регистру букв.

Имена атрибутов тегов пишут между символами < и > после имени тега и отделяют от него пробелом или разрывом строки. Если в теге присутствуют несколько атрибутов, их отделяют друг от друга также пробелами или разрывами строки.

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

Значение атрибута тега пишут после его имени и заключают в двойные кавычки. Между именем атрибута тега и его значением ставят знак равенства.

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

Символы двойных кавычек недопустимы и не должны присутствовать в обычном тексте, иначе Web-обозреватель посчитает следующий за ними текст значением атрибута тега.

Web-обозреватель. Web-обозревателей на свете довольно много. Но если отбросить старые и специализированные, останется всего пять: Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome и Apple Safari.

Разумеется, все эти программы поддерживают языки HTML, CSS (язык описания каскадных таблиц стилей) и JavaScript (язык, на котором пишутся Web-сценарии).

Большинство этих программ поддерживает некоторый набор возможностей HTML 5 и CSS 3 (новая версия CSS):

Mozilla Firefox - начиная с версии 3.5;

Opera - начиная с версии 9.5;

Google Chrome - начиная с версии 2.0.158.0;

Apple Safari - начиная с версии 4.0.

Отдельные возможности HTML 5 и CSS 3 начали поддерживаться и в более ранних версиях этих программ. Однако, чтобы успешно просматривать Web-страницы, следует использовать указанные версии или более новые.

А что же Microsoft Internet Explorer? Поддерживает ли он HTML 5 и CSS 3 на данный момент? К сожалению, нет. Поддержку HTML 5 и CSS 3 обещают лишь в версии 9.0, которая сейчас только разрабатывается.

Но какой же Web-обозреватель нам выбрать? Какой угодно из перечисленных представителей "передовой четверки" -- Firefox, Opera, Chrome или Safari. А лучше -- сразу все, чтобы удостовериться, что наши Web-страницы в любом из них отображаются правильно.

1.3 Технология CSS

Спецификация языка разметки HTML позволяет разработчику электронных документов изменять внешний вид некоторых элементов страниц. Для этого составляются специальные правила отображения конкретного элемента в HTML-документе, называемые каскадными таблицами стилей (Cascading Style Sheets, CSS) или стилевыми шаблонами [1, 2, 3].

Разберем по составу это понятие - каскадная таблица стилей:

Каскадная.

Спецификация HTML разрешает использовать для одного и того же элемента несколько стилевых правил, интерпретируемых браузером последовательно, другими словами - каскадом;

Таблица.

Формат записи стилевых правил CSS напоминает табличное представление данных. Заголовок таблицы соответствует наименованию элемента, класса или идентификатора стиля. В качестве ячеек и рядов таблицы выступают стилевые свойства и их значения. Судите сами:

DIV

{

font-family: Tahoma;

color: black;

font-size: 12px;

}

стиль. Под стилем принято понимать приведение какого-то явления к общему набору правил и определений. CSS - это способ дополнительного форматирования стандартных тегов HTML. использование внутреннего шаблона и импортирования таблицы стилей и пр. Более подробно о способах определения таблиц стилей будет рассказано в разделе "Способы определения таблиц стилей"этой главы;

независимость от других языков определения стиля (Independence from specific style sheet languages). Спецификация HTML позволяет, помимо CSS, использовать другие языки определения стилевых шаблонов, что делает создаваемый электронный документ стиленезависимым, а значит и более адаптируемым к изменению внешнего вида определенных HTML-элементов;

каскадность (Cascading). Возможность определения нескольких стилевых правил (указания нескольких таблиц стилей) для одного элемента HTML. He все языки таблиц стилей поддерживают каскадность. Свойство каскадное™ реализуется за счет последовательного чтения стилевых данных браузером;

привязанность к носителю информации (Media dependencies). С помощью стилевых шаблонов CSS возможна ориентация создаваемого электронного документа на различные носители информационных данных: операционные системы Windows и Macintosh, телевизионные и игровые приставки, мобильные телефоны и карманные персональные компьютеры (КПК), устройства распознавания человеческой речи и пр;

П альтернативные стили (Alternate styles).

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

Уровни CSS. Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).

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

Создание интерактивных HTML-документов. Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.

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

Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:

ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <LINK> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

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

Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела HEAD HTML-документа;

внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:

<STYLE TYPE="text/css">

< ! --

BODY { font-family: Arial, Helvetica; }

INPUT { background-color: #CECECE; }

-->

</STYLE>

Данная конструкция также должна присутствовать в разделе HEAD. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);

включение в теговые конструкции.

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

<Р ALIGN="justify" STYLE="color: #000000; font-family: Verdana;">

Текст параграфа...

В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:

<TABLE>

<TR>

<TD CLASS="header"x/TD>

<TD CLASS="text"x/TD>

</TR>

</TABLE>

Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):

<STYLE TYPE="text/css">

< ! --

.header { font-weight: bold; color: gray; }

.text { color: black; font-size: llpx; }

-->

</STYLE>

В данном случае текст табличной ячейки класса .header будет отображаться жирным начертанием и серым цветом, а ячейки класса . text -обычным начертанием, черным цветом и размером шрифта 11 пикселов;

импортирование.

Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:

<STYLE TYPE="text/css">

< i --

Simport: url(style.ess);

-->

\

</STYLE>

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

<HTML>

<HEAD>

<Т1ТЬЕ>Совмещение различных способов определения CSS</TITLE>

7 Зак. 863

186 _ Часть II. Создание интерактивных HTML -документов

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

<STYLE TYPE="text/css">

<! --

P { text-align: justify; color: green; }

.title { color: blue; font-weight: bold; font-size: 16px; }

-- >

</STYLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO"

VLINK="blue">

<FONT CLASS="title">Cnoco6bi определения шаблонов CSS</FONT>

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

<UL>

<Ы>Ссылка на внешний файл

<и>Внедрение в документ

<Ы>Включение в теговые конструкции

<Ы>Импортирование

</UL>

</BODY>

</HTML>

Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами:

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

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

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

При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape "плохо относится" к использованию символа нижнего подчеркивания ( _ ) в указании классов для элементов HTML (.news_titie, ._about и т. д.). Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то CLASs = "text">TeKCT</TD> выведет текст по умолчанию, a <TDXFONT CLASs = "text">TeKCT</FONT></TD> отобразит текст заданным стилем. Запись шаблона CSS Группировка и наследование Любое правило таблицы стилей CSS состоит из селектора и определения шаблона. Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора). Определение шаблона - это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки.

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет - синий, шрифт - Tahoma, либо Verdana, либо Arial. Как видно из примера, для одного селектора приведено описание, содержащее два правила - по цвету заголовка и наименованию гарнитуры. Это говорит о том, что CSS позволяет группировать несколько стилевых правил для одного селектора в рамках единого описания шаблона.

Сравнив запись вида:

НЗ ( color: blue; }

НЗ { font-family: Tahoma, Verdana, Arial; }

и

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

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

Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например:

TD, ТН, Р, DIV { text-align: justify; color: gray: font-size: Юрх; }

Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>), а также параграфов (<Р>) и блоков (<DIV>), а именно: тип выравнивания - по ширине, цвет - серый, размер шрифта - 10 пикселов.

Селекторы. В качестве селектора CSS могут выступать:

элементы HTML.

Переопределение стиля для конкретного элемента страницы:

BODY { color: orange; }

В этом случае весь текст в пределах раздела BODY будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек;

классы.

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

red { color: red; }

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

<FONT CLASS="red">TeKCT красным цветом</КОЫТ>

или

<HR CLASS="red">

Если мы дополним селектор класса наименованием конкретного HTML-элемента, то действие стилевого правила будет распространяться только на данный элемент:

HR.red { color: red; }

При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваивамый тип переопределения стиля. Например, запись вида:

HR { text-align: justify; }

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

идентификаторы.

Запись идентификатора начинается с символа # (диез) и заканчивается наименованием:

#black { background-color: black; }

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

<TD ID="black">H4eUKa черного цвета</ТО>

Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом - чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте). В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах.

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

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

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

Согласно спецификации HTML и стандарту CSS, гиперссылка может при нимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши (hover). Первые Три СОСТОЯНИЯ (link, visited, active) обычно ПрОПИСЫваются в теге <BODY> HTML-документа (уровень CSS 1). Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover).

Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне:

A:link { color: blue; }

A:active { text-decoration: underline; }

A:visited { color: gray; }

A:hover { color: orange; }

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

Однако часто возникает необходимость визуально выделить одни ссылки относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов:

A:active.red { color: red; }

A:hover.red ( color: blue; }

A:active.white { color: white; }

A:hover.white ( color: black; }

Применение таблиц стилей CSS. Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<STRONG>), а в CSS - конструкция font-weight: bold,- (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида text-decoration: underline; И Т. Д.

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

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

1.4 Язык программирования JavaScript

JavaScript это созданный фирмой Netscape межплатформенный, объектно-ориентированный язык скриптинга (сценариев). Ядро JavaScript содержит набор основных объектов, таких как Array, Date и Math, и основной набор элементов языка, таких как операции, структуры управления и операторы [6, 12, 15, 16, 17]. Ядро JavaScript может быть расширено для различных целей путём дополнения новыми объектами; например:

Клиентский JavaScript расширяет ядро языка, предоставляя объекты управления браузером (Navigator или другой web-браузер) и Document Object Model (DOM). Например, клиентские расширения дают приложению возможность размещать элементы в HTML-форме и реагировать на действия пользователя, такие как щелчок мыши, ввод данных в форму и навигация по страницам.

Серверный JavaScript расширяет ядро языка, предоставляя объекты, относящиеся к запуску JavaScript на сервере. Например, серверные расширения дают приложению возможность соединяться с реляционной БД, сохранять информацию между вызовами приложения или выполнять работу с файлами на сервере.

JavaScript позволяет создавать приложения, работающие по всей сети Internet. Клиентские приложения работают в браузере, таком как Netscape Navigator, а серверные приложения - на сервере, таком как Netscape Enterprise Server. Используя JavaScript, Вы можете создавать динамические HTML-страницы, обрабатывающие пользовательский ввод и имеющиеся данные, используя специальные объекты, файлы и реляционные БД.

Рис. 1.3 - Компоненты JavaScript

С помощью функциональности JavaScript LiveConnect Вы можете организовать взаимодействие кодов Java и JavaScript. Из JavaScript Вы можете инстанциировать объекты Java и получать доступ к их public-методам и полям. Из Java Вы можете получать доступ к объектам, свойствам и методам JavaScript.

Корпорация Netscape изобрела JavaScript, и JavaScript был впервые использован в браузерах Netscape.

Ядро, Клиентский и Серверный JavaScript. Компоненты JavaScript показаны на рисунке 1.3.

Ядро JavaScript. Клиентский и серверный JavaScript имеют следующие общие элементы:

Ключевые слова

Синтаксис операторов и грамматику

Правила написания выражений, переменных и литералов

Лежащую в основе объектную модель (хотя клиентский и серверный JavaScript имеют разные предопределённые объекты)

Предопределённые объекты и функции, такие как Array, Date и Math

Клиентский JavaScript. Web-браузеры, такие как Navigator (2.0 и более поздние версии) могут интерпретировать операторы клиентского JavaScript, внедрённые в HTML-страницу. Когда браузер (или клиент) запрашивает такую страницу, сервер высылает клиенту по сети полное содержимое документа, включая HTML и операторы JavaScript.

Рис. 1.4 - Выполнение операторов клиентского JavaScript

Браузер читает страницу сверху вниз, отображая результат работы HTML и выполняя операторы JavaScript по мере их обнаружения. Этот процесс, проиллюстрированный на рисунке 1.4, производит результат, который видит пользователь.

Операторы клиентского JavaScript, встроенного в HTML-страницу, могут реагировать на пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам. Например, Вы можете написать функцию JavaScript для проверки ввода пользователем правильной информации в форму, запрашивающую телефонный номер или zip-код. Без передачи по сети внедрённый JavaScript на HTML-странице может проверить введённые данные и вывести диалоговое окно, если пользователь ввёл неверные данные.

Разные версии JavaScript работают со специфическими версиями Navigator'а. Например, JavaScript 1.2 работает с Navigator 4.0. Некоторые возможности JavaScript 1.2 недоступны в JavaScript 1.1 и поэтому недоступны в Navigator 3.0.

Серверный JavaScript. На сервере Вы также можете внедрять JavaScript в HTML-страницы. Серверные операторы могут соединяться с реляционными БД разных производителей, разделять информацию между пользователями приложения, получать доступ к файловой системе сервера или взаимодействовать с другими приложениями через LiveConnect и Java. HTML-страницы с серверным JavaScript могут содержать также клиентский JavaScript.



Рис. 1.5 - Серверный JavaScript в процессе разработки

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

На первом этапе, показанном на рисунке 1.5, Вы создаёте HTML-страницы (которые могут содержать операторы как клиентского, так и серверного JavaScript) и файлы JavaScript. Затем Вы компилируете все эти файлы в единый исполняемый блок.

На втором этапе, показанном на рисунке 1.6, страница приложения запрашивается клиентским браузером. Машина выполнения использует исполняемый блок для просмотра исходной страницы и динамической генерации HTML-страницы, возвращаемой клиенту. Она выполняет все найденные на странице операторы серверного JavaScript. Выполнение этих операторов может добавить новые операторы HTML или операторы клиентского JavaScript в HTML-страницу. Машина выполнения отсылает затем окончательный вариант страницы по сети Navigator-клиенту, который выполняет клиентский JavaScript и отображает результат.

Рис. 1.6 - Серверный JavaScript в процессе выполнения

В отличие от стандартных программ Common Gateway Interface (CGI), все исходники JavaScript интегрированы непосредственно в HTML-страницы, ускоряя разработку и облегчая обслуживание. Служба Session Management Service серверного JavaScript содержит объекты, которые Вы можете использовать для работы с данными, существующими между клиентскими запросами, у нескольких клиентов или нескольких приложений. Служба LiveWire Database Service серверного JavaScript предоставляет объекты для доступа к БД, служащие интерфейсом для серверов Structured Query Language (SQL).

JavaScript и Java. JavaScript и Java напоминают друг друга, но имеют и фундаментальные отличия. JavaScript не имеет статической типизации и строгой проверки типов Java. JavaScript поддерживает большую часть синтаксиса выражений Java и базовые конструкции управления потоком.

В отличие от системы времени компиляции Java, построенной на объявлениях, JavaScript поддерживает систему времени выполнения, основанную на небольшом количестве типов данных: числовых, Булевых и строковых. JavaScript имеет объектную модель на базе прототипов вместо более общей объектной модели на базе классов. Модель на базе прототипов предоставляет возможность динамического наследования; то есть, то, что наследуется, может отличаться для разных объектов. JavaScript также поддерживает функции без специальных требований объявления. Функции могут быть свойствами объектов, исполняемыми как нетипизированные методы.