Среды и языки разработки WEB-приложений

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

Среды и языки разработки WEB-приложений



Содержание

Введение

1. Теоретическая часть

1.1 Описание языка HTML

1.2 Версии HTML

1.3 Описание MySQL

1.4 Описание WEB разработчика Денвер

1.5 Язык программирования PHP

1.6 Актуальность темы

1.7 Анализ информационного ресурса по выбранной теме на примере сайта ArtHit.ru

2. Разработка информационного ресурса «Интернет-магазин Art-ASV.ru»

2.1 Создание главной страницы сайта

3. Интернет магазин картин Art-SV

Заключение

Литература



Введение

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

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

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

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

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

- не соответствие сайта психофизиологическим требованиям, которое приводит к повышенной утомляемости или отвлечению внимания;

- увлечение анимацией, графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки, автоматически влечет за собой уменьшение количества потенциальных посетителей web-сайта, так как повышает требования к пропускной способности Интернет-соединения и объем трафика;

- избыточность или недостаток представленной информации;

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

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

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

Предмет исследования- web-технологии.

Объект - среды и языки разработки web-приложений.

Цель работы - рассмотреть возможности практического использования языков и средств для разработки web-приложений, после этого создать свой сайт.



1. Теоретическая часть

1.1 Описание языка HTML

Hyper Text Markup Language - «HTML» (язык разметки гипертекста) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо.

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

Для того чтобы вам было легче дальше понимать о чем я с вами говорю давайте рассмотрим основные термины которые употребляются в HTML:

· Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста -- возможность вложения элементов.

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

· Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

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

· Фрейм (frame) -- этот термин имеет два значения. Первое -- область документа со своими полосами прокрутки. Второе значение -- одно изображение в сложном (анимационном) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».

· HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.

· Апплет (applet) -- программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

· Скрипт или сценарий (script) - программа, включенная в состав Web-страницы для расширения ее возможностей.

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

· CGI (Common Gateway Interface) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.

· Код HTML -- гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.

· Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.

· Сайт (site) -- набор Web-страниц, расположенных в одном месте и связанных между собой.

· Браузер (browser) - программа для просмотра Web-страниц.

· Загрузка (downloading) - копирование файлов с сервера на компьютер-клиент.

· URL (Uniform Resource Locator) или универсальный указатель ресурса.

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

Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.

1.2 Версии HTML

Первая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.

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

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

Официальная спецификация HTML 4 (Dynamic HTML) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.

1.3 Описание MySQL

MySQL -- свободная система управления базами данных (СУБД). MySQL является собственностью компании Sun Microsystems, осуществляющей разработку и поддержку приложения. Распространяется под GNU General Public License и под собственной коммерческой лицензией, на выбор.

MySQL является решением для малых и средних приложений. Входит в LAMP. Обычно MySQL используется в качестве сервера, к которому обращаются локальные или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего сервера, позволяющая включать MySQL в автономные программы.

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM, поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.

MySQL возникла как попытка применить mSQL к собственным разработкам компании: таблицам, для которых использовались ISAM -- подпрограммы низкого уровня. В результате был выработан новый SQL-интерфейс, но API-интерфейс остался в наследство от mSQL. Откуда происходит название «MySQL» -- доподлинно не известно. Разработчики дают два варианта: либо потому, что практически все наработки компании начинались с префикса My, либо в честь девочки по имени My, дочери Майкла Монти Видениуса, одного из разработчиков системы.

Логотип MySQL в виде дельфина носит имя «Sakila». Он был выбран из большого списка предложенных пользователями «имён дельфина». Имя «Sakila» было отправлено Open Source-разработчиком Ambrose Twebaze.

MySQL имеет двойное лицензирование. MySQL может распространяться в соответствии с условиями лицензии GPL. Однако по условиям GPL, если какая-либо программа включает исходные коды MySQL, то она тоже должна распространяться по лицензии GPL. Это может расходиться с планами разработчиков, не желающих открывать исходные тексты своих программ. Для таких случаев предусмотрена коммерческая лицензия компании MySQL AB, которая также обеспечивает качественную сервисную поддержку.

MySQL портирована на большое количество платформ: AIX, BSDi, FreeBSD, HP-UX, GNU/Linux, Mac OS X, NetBSD, OpenBSD, OS/2 Warp, SGI IRIX, Solaris, SunOS, SCO OpenServer, SCO UnixWare, Tru64, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP, Windows Server 2003 и Windows Vista. Существует также порт MySQL к OpenVMS. Важно отметить, что компания MySQL AB предоставляет для свободной загрузки не только исходные коды СУБД, но и откомпилированные и оптимизированные под конкретные операционные системы готовые исполняемые модули, которые можно загрузить с зеркал, представленных на официальном сайте разработчика.

1.4 Описание WEB разработчика Денвер

Денвер (Джентльменский Набор Web-Разработчика, Д.Н.W.Р.) - это модульная система, позволяющая за несколько шагов организовать целую лабораторию для веб-программиста. Ядро системы - базовый комплект.

Базовый пакет Денвера включает в себя:

- Инсталлятор (поддерживается также инсталляция на flash-накопитель).

- Apache, SSL, SSI, mod_rewrite, mod_php.

- PHP5 с поддержкой GD, MySQL, sqLite.

- MySQL5 с поддержкой транзакций.

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

- Система управления запуском и завершением всех компонентов Денвера.

- phpMyAdmin -- система управления MySQL через Web-интерфейс.

- Эмулятор sendmail и SMTP-сервера

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

- Денвер устанавливается в один-единственный каталог и вне его ничего не изменяет. Он не пишет файлы в Windows-директорию и не «гадит» в Реестре. При желании вы можете даже поставить себе сразу два Денвера, и они не будут конфликтовать.

- Никакие «сервисы» NT/2000 не «прописываются». Если вы запустили Денвер, то он работает. Если завершили -- то перестает работать, не оставляя после себя следов.

- Системе не нужен деинсталлятор -- достаточно просто удалить каталог.

- Установив Денвер однажды, вы можете затем просто переписывать его на другие машины (на произвольный диск в произвольную директорию). Это не приведет ни к каким побочным эффектам.

- Все конфигурирование и настройка под конкретную машину происходит автоматически.

Эти же правила распространяются и на пакеты расширений.

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

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

За счет применения виртуального диска Денвер «изнутри» похож на маленький Unix: у него есть своя директория /home, /usr, /tmp… Различные компоненты и серверы расположены так, как это принято в Unix. Например, в /home располагаются виртуальные хосты, а в /usr -- программные компоненты.

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

Вопреки распространенному мнению, Денвер не является чем-то статическим и неизменным. Никто не мешает вам устанавливать поверх него дополнительные программы и компоненты (например, сервер СУБД PostgreSQL). Они просто будут для него «как родные».

Зачем вообще нужен локальный сервер? В последнее десятилетие во всем мире наблюдается настоящий бум среди Web-разработчиков (по преимуществу это программисты). Они устанавливают у себя на Windows-машине сервер Apache с различными дополнениями к нему: PHP, Perl, MySQL и т.д. -- преимущественно в целях более удобной отладки сайтов.

Многие (преимущественно дизайнеры) могут спросить: зачем вообще нужен локальный Web-сервер, когда страницы можно открывать и так -- прямо с диска? Если это обычные (статические) HTML-страницы, то да, сервер не нужен. Однако даже для такой мелочи, как SSI (Server-side Includes -- директивы в страницах, позволяющие вставлять на нужное место содержимое других файлов), уже необходим сервер. Не говоря уж о скриптах -- они без сервера просто не запустятся.



1.5 Язык программирования PHP

PHP (Hypertext Preprocessor - Препроцессор Гипертекста)- это широко используемый язык сценариев общего назначения с открытым исходным кодом.

PHP - язык программирования, специально разработанный для написания web-приложений (скриптов, сценариев), исполняющихся на Web-сервере. Синтаксис языка во многом основывается на синтаксисе C, Java и Perl. Он очень похож на С и на Perl, поэтому для профессионального программиста не составит труда его изучить. С другой стороны, язык PHP проще, чем C, и его может освоить веб-мастер, не знающий пока других языков программирования.

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

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

PHP способен генерировать и преобразовывать не только HTML документы, но и изображения разных форматов - JPEG, GIF, PNG, файлы PDF и FLASH. PHP способен формировать данные в любом текстовом формате, включая XHTML и XML.

PHP - кроссплатформенная технология. Дистрибутив PHP доступен для большинства операционных систем, включая Linux, многие модификации Unix, Microsoft Windows, Mac OS и многих других. PHP поддерживается на большинстве вебсерверов, таких, как Apache, Microsoft Internet Information Server (IIS), Microsoft Personal Web Server и других.

Для большинства серверов PHP поставляется в 2-х вариантах - в качестве модуля и в качестве CGI препроцессора.

PHP поддерживает работу с ODBC и большое количество баз данных: MySQL, MSQL, Oracle, PostgreSQL, SQLite и др.

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

Язык PHP постоянно совершенствуется, и ему наверняка обеспечено долгое доминирование в области языков web -программирования.

1.6 Актуальность темы

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

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

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

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

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



1.7 Анализ информационного ресурса по выбранной теме на примере сайта ArtHit.ru

Достоинства сайта

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

Рисунок 1. Страница Контакты

2. На сайте представлены картины различных направлений

Рисунок 2. Главная страница

3. На сайте есть перевод на английский язык

4. Отражаются новые поступления, новые авторы

5. Публикуются новости

Недостатки

1. На сайте нет четкой структуры, из-за чего он сложен в использовании

2. Нет поиска по авторам картин

3. Сайт перегружен излишней информацией

4. Нет форума для покупателей



2. Разработка информационного ресурса «Интернет-магазин Art-ASV.ru»

2.1 Создание главной страницы сайта

В начале работы выбрать тип сайта, который будете создавать. Тип сайта: Интернет-магазин. Далее определиться с тематикой сайта: Тематика сайтов: Интернет-магазин картин. Для начала создаем главную страницу сайта под названием index.php используя <table>, <tr>, <td> и другие дескрипторы HTML и PHP. Вставляем на начальную <td> баннер потом в <tr> вставляем фото, в следующий <tr> мы вставляем текст который будет находиться по середине нашей главной страницы сайта и наконец в крайний <tr>. Здесь же мы объявляем переходы на другие страницы: главная, каталог, контакты, ссылки, альбом, тест.

Рисунок 3. Главная страница сайта Art-SV



Код первой страницы:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" href="stylemenu.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />

<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a.gallery, a.iframe").fancybox();

url = $("a.modalbox").attr('href').replace("for_spider","content2");

$("a.modalbox").attr("href", url);

$("a.modalbox").fancybox(

{

"frameWidth" : 400,

"frameHeight" : 400

});

$("a.gallerys").fancybox(

{

"padding" : 20, // отступ контента от краев окна

"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE

"zoomOpacity" : false,// изменение прозрачности контента во время анимации (по умолчанию false)

"zoomSpeedIn" : 1000,// скорость анимации в мс при увеличении фото (по умолчанию 0)

"zoomSpeedOut" : 1000,// скорость анимации в мс при уменьшении фото (по умолчанию 0)

"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)

"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600, // высота окна, px(355px - по умолчанию)

"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay

"overlayOpacity" : 0.2, // Прозрачность затенения (0.3 по умолчанию)

"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE

"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу

});

$("#menu a, .anim").hover( function() {

$(this).animate({"paddingLeft" : "10px"}, 300)},

function() {$(this).animate({"paddingLeft" : "0"}, 300);

});

$("a.iframe").fancybox(

{

"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600 // высота окна, px(355px - по умолчанию)

});

});

</script>

<title>Art-SV</title>

</head>

<body background="bg.jpg">

<div class="clearfix"></div>

<table width="1024" height="768" align="center">

<tr>

<td height="100"><img src="images/1_01.jpg" width="1024" height="180" /></td>

</tr>

<tr>

<td height="40">

<div id="menu_wrapper" class="black">

<div class="center"></div><? include 'inc/menu.php'; ?>

</div>

<br>

</td>

</tr>

<tr bgcolor="#FFFFFF">

<td class="krug" valign="top">

<p class="p">

<a class="gallery" rel="group" href="1.jpg"><img src="1.jpg" width="278" height="252" align="right" hspace="7px"/></a>

<h3>Планета Art-SV</h3> в интернет-вселенной -- уютная бухта для всех, кому интересна информация по вопросам истории искусства и культуры, живописи, скульптуры, архитектуры, фотоискусства, истории астрологии, магии и алхимии. Географически Планета Art-SV состоит из шести частей света -- Живопись, Архитектура и Скульптура, Фотоискусство, Библиотека, Астрология, Магия.

<h4>Виртуальный музей живописи</h4>

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

Боттичелли, Веронезе, Джорджоне, Микеланджело, Карпаччо, Корреджо, Рафаэля, Тициана, многих других художников.<br><br><br>

<a class="gallery" rel="group" href="123.jpg"><img src="123.jpg" width="278" height="252" align="right" hspace="7px"/></a>

<h3>Северный Ренессанс.</h3> Этим общепринятым термином по аналогии с итальянским Возрождением определяют культуру и искусство Нидерландов, Германии, Франции 15 и 16 столетий. Художники -- Бальдунг, Босх, Кранах, Брейгель, Дюрер, Гольбейн, ван Эйк и другие живописцы. Маньеризм, течение в европейском искусстве 16 века. Мастера маньеризма -- Аахен, Аллори, Вазари, Эль Греко, Пармиджанино, Шпрангер, Тинторетто, Эйтевал, Бронзино. Искусству эпохи Барокко свойственны пышность и динамика, интенсивность чувств, совмещение иллюзорного и реального, сильные контрасты света и тени. Художники эпохи барокко -- Вермеeр Делфтский, Караваджо, Аверкамп, Веласкес, Йорданс, Рембрандт, Рени, Рубенс, Рейсдал, Стен. Рококо.

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

<h3>Классицизм.</h3> Важнейшей чертой классицизма являлось обращение к формам античного искусства, как к идеальному эстетическому и этическому эталону. Мастера классицизма -- Пуссен, Давид, Энгр, Каналетто, Тьеполо, Брюллов. Романтизм утверждал стремление к безграничной свободе, жажду совершенства и обновления, пафос личной и гражданской независимости. Художники романтизма -- Уильям Блейк, Гойя, Жерико, Делакруа, Констебл, Фридрих, Фюссли, Хайес, Этти. Импрессионизм, направление в искусстве, мастера которого, фиксируя свои впечатления, стремились наиболее естественно запечатлеть реальный мир в его подвижности и изменчивости. Художники-импрессионисты -- Эдгар Дега, ван Гог, Гоген, Мане, Моне, Писсарро, Ренуар, Сезанн, Сера, Сислей, Цорн и другие.

<h3>Модерн.</h3> Для живописи стиля модерн характерны сочетание орнаментальных фонов и натуралистической осязаемости фигур, силуэтность, использование больших цветовых плоскостей. Художники символизма и стиля модерн -- Климт, Тулуз-Лотрек, Матисс, Модильяни, Муха, Руссо, Ходлер, Шаванн, Штук и другие. Экспрессионизм провозглашал субъективные ощущения и подсознательные импульсы основой художественного творчества. Экспрессионисты -- Кандинский, Леже, Марк, Мунк, Пикассо, Шагал, Шиле. Сюрреализм. Дали, Дельво, Кирико, Таннинг, Эрнст, Магритт, Кало и другие сюрреалисты считали, что творческая энергия художника исходит из сферы подсознания, которая проявляет себя в состоянии сна, гипноза, бреда, внезапных озарений. Живопись исторического жанра представляют художники Альма-Тадема, Бёрн-Джонс, Бугеро, Лейтон, Гюстав Моро, Уотерхаус, Уотс. Также в музее в большом числе присутствуют картины русских живописцев -- Айвазовского, Богаевского, Васнецова, Верещагина, Врубеля, Исачева, Куинджи, Кустодиева, Рериха, Федотова, Серова и других мастеров; картины художников-передвижников -- Крамского, Маковского, Нестерова, Перова, Прянишникова, Репина, Сурикова. Картины современных художников, работы мастеров гиперреализма и фэнтези представлены творчеством таких живописцев, как: Мэттьюз, Ахиллеос, Паркинсон, Прайор, Кабрал, Паркес, Пеннингтон, Торренс, Шо, Келли, Бёрнс, Джонсон, Блейк, Уэлан, Спенс, Фишл, Хоу, Коттон, Моррилл, Чен, Эдвардс, Перлстайн, Рихтер, Де Андреа, и других художников.Наряду с репродукциями картин станковой живописи, в виртуальном музее есть и работы великих живописцев в виде фрески, секко. В музее представлена монументально-декоративная живопись (росписи Сикстинской капеллы, другие панно), иконопись, декорационная живопись, гравюры, иллюстрации, портрет и рисунки.

</td>

</tr>

<tr> <td valign="baseline">

<? include 'inc/b_menu.php' ?>

</td>

</tr>

</table>

</body>

</html>

Далее создаем вторую страницу, где публикуются новости нашего интернет-магазина

программирование данные страница сайт



Рисунок 4. Страница Новости

Код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" href="stylemenu.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />

<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a.gallery, a.iframe").fancybox();

url = $("a.modalbox").attr('href').replace("for_spider","content2");

$("a.modalbox").attr("href", url);

$("a.modalbox").fancybox(

{

"frameWidth" : 400,

"frameHeight" : 400

});

$("a.gallerys").fancybox(

{

"padding" : 20, // отступ контента от краев окна

"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE

"zoomOpacity" : false,// изменение прозрачности контента во время анимации (по умолчанию false)

"zoomSpeedIn" : 1000,// скорость анимации в мс при увеличении фото (по умолчанию 0)

"zoomSpeedOut" : 1000,// скорость анимации в мс при уменьшении фото (по умолчанию 0)

"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)

"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600, // высота окна, px(355px - по умолчанию)

"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay

"overlayOpacity" : 0.2, // Прозрачность затенения (0.3 по умолчанию)

"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE

"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу

});

$("#menu a, .anim").hover( function() {

$(this).animate({"paddingLeft" : "10px"}, 300)},

function() {$(this).animate({"paddingLeft" : "0"}, 300);

});

$("a.iframe").fancybox(

{

"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600 // высота окна, px(355px - по умолчанию)

});

});

</script>

<title>Art-SV</title>

</head>

<body background="bg.jpg">

<div class="clearfix"></div>

<table width="1024" height="768" align="center">

<tr>

<td height="100"><img src="images/1_01.jpg" width="1024" height="201" /></td>

</tr>

<tr>

<td height="40">

<div id="menu_wrapper" class="black">

<div class="center"></div>

<? include 'inc/menu.php'; ?>

</div>

<br>

</td>

</tr>

<tr bgcolor="#FFFFFF">

<td class="krug" valign="top">

<p class="p">

<h3><center> Новости в мире картин </h3>

<br>

<a class="gallery" rel="group" href="images/news1.jpg">

<img src="images/news1.jpg" width="300" height="250" align="right" hspace="8px"> </a>

<strong><h4><center>

"Харьков-Донецк. Первая художественная выставка". ХВЦ"АРТДонбасс", г.Донецк, Украина. 23.12.11 - 04.02.12</h4></strong>

С 23 декабря в ХВЦ "АРТДонбасс" будет экспонироваться выставка художественных работ харьковских мастеров. Свое творчество дончанам представят известные скульпторы, работы которых не перестают восхищать своим изящным мастерством. Работы из бронзы и мрамора представят 15 скульпторов, среди которых Феликс Бетлиемский, Сергей Сбитнев, Людмила Бетлиемская, Саид Ахмади, Владимир Лемешко,Александр Ковалев, Элишад Сайяд, Дмитрий Ив, Валерий Пирогов (около 60 работ).Живописную харьковскую школу представят члены НСХУ: Нина Вербук, Андрей Гладкий, Алексей Дмитриев, Владимир Носань, Наталья Третьякова, Денис Чернов, Дмитрий Шевченко, выдающийся мастер колорита Валерий Шматько. Пленэрная живопись представлена художниками молодого поколения, среди которых

преподаватели, выпускники и студенты Харьковской государственной академии дизайна и искусств (Александр Бритцев, Карина Волошко, Екатерина Гончарова, Владимир Ковалев, Дмитрий Маковецкий ,Елена Маркович, Татьяна Коваленко, Елена Мельникова, Александр Тюнькин, Мария Чепелева). Среди подавляющего большинства полотен, выполненных в традиционной манере и ставшей традиционной манере импрессионизма и соцреализма, есть автор авангардного направления - Андрей Гладкий. Среди художников,

которые тяготеют к экспрессионизму, необходимо выделить Ленура Валиляева, Александра Винника и Владимира Носаня, Анастасию Чистякову. Студенты и преподаватели, связанные с отделением монументальной живописи харьковской академии узнаются своим характерным почерком, среди них: Лариса Лященко, Анна Саенко, Олег Омельченко. Александр Тюнькин представил свой дипломный проект «Герои Аджимушкая». Евгений Петраков среди монументалистов отличается графической

точностью своих композиций.

Графические работы, предоставленные Екатериной Гончаровой, Надеждой Кудрявцевой,

Денисом Черновым, являются своеобразной изюминкой всей экспозиции.

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

Всего представлено около 300 работ.

Галерея открыта ежедневно с 11-00 до 19-00, по адресу: г.Донецк, ул. Челюскинцев, 189 (возле Донбасс-Арена).

Выставка продлится до 4 февраля 2012 года.

</pre>

<br>

<br>

<br>

<br>

<a class="gallery" rel="group" href="images/news2.jpg">

<img src="images/news2.jpg" width="300" height="350" align="right" hspace="8px">

</a>

<strong><h4><center>

Продажа картины, долгие годы висевшей в доме шведского пенсионера, принесла ему более миллиона долларов </h4></strong>

На аукционе в городе Упсала (Швеция) была продана картина Айвазовского "Битва за Бомарзунд",

написанная художником в 1858 году, которую случайно нашли среди старых вещей. Владелец картины и

не догадывался о ценности полотна, долгие годы украшавшего интерьер его дома.

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

от ненужных ему вещей и предложил их для продажи в местный аукционный дом "Метрополь".

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

Полотно выставили на аукцион по стартовой стоимости около полутора тысяч долларов.

Но лот вызвал огромный ажиотаж, и торги были приостановлены. Аукционисты "Метрополя"

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

Эксперты установили, что картина принадлежит кисти Ивана Айвазовского.

Картину снова выставили на аукцион, и ее купил русский коллекционер, имя которого не называется, за сумму, эквивалентную 1, 2 млн. долларов.

<br>

<br>

<br>

<br>

<br>

<br>

<a class="gallery" rel="group" href="images/news3.jpg">

<img src="images/news3.jpg" width="300" height="350" align="right" hspace="8px"> </a>

<strong><h4>

Фонд Сальвадора Дали купил картину художника по рекордной цене<center></h4></strong>

Фонд "Гала - Сальвадор Дали" купил "Пейзаж с загадочными элементами" кисти знаменитого

художника-сюрреалиста за 7, 8 млн. евро. Это - рекордная для Фонда цена за картину Дали.

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

"Пейзаж с загадочными элементами" размером около 60х73 см датируется 1934 годом. Дали изобразил

на полотне голландского художника Яна Вермеера, пишущего "загадочный" пейзаж, а также самого себя в детстве.

В марте этого года Фонд уже совершил крупное приобретение, купив за 4, 7 млн. евро картину

Сальвадора Дали "Мед слаще крови".

<br>

<br>

<br>

Попытки создать отечественную часовую промышленность предпринимались еще при Екатерине II. В 1769 году правительством были организованы часовые фабрики в Петербурге и Москве, но они действовали недолго - выпускали часы "всякого сорта", как карманные, так и стенные с боем, не уступавшие западноевропейским образцам. Однако и его продукция предназначалась главным образом для удовлетворения нужд царского двора и лишь небольшая часть попадала на рынок.

<br>

<br>

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

<br>

<br>

</p></td>

</tr>

<tr>

<td valign="baseline">

<? include 'inc/b_menu.php' ?>

</td>

</tr>

</table>

</body>

</html>

Далее создаем страницу Картины, которая содержит базу данных, где хранятся картины. Выбрав картину, можно оформить заказ.



Рисунок 5. Картины

Создаем базу данных. Запускаем Денвер. Создаем базу данных Time.Создаем таблицу Products. Создаем 6 полей: id- это поле будет являться ключем таблицы, avtor- здесь будет храниться ФИО авторов картин, art- наименование картины , opisanie- описание картины , image- заносим картины в базу данных , price- цена картины.

Рисунок 6. База данных

После того, как создали таблицу заносим все данные



Рисунок 7. Заполнение полей

Затем создаем еще одну таблицу Zakazi. Здесь обрабатываются заказы.

Рисунок 8. Обработчик



Рисунок 9. Оформление заказа

Затем создаем следующие страницу TOP ART, где опубликованы лучшие картины.

Рисунок 10. TOP ART



Код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" href="stylemenu.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />

<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a.gallery, a.iframe").fancybox();

url = $("a.modalbox").attr('href').replace("for_spider","content2");

$("a.modalbox").attr("href", url);

$("a.modalbox").fancybox(

{

"frameWidth" : 400,

"frameHeight" : 400

});

$("a.gallerys").fancybox(

{

"padding" : 20, // отступ контента от краев окна

"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE

"zoomOpacity" : false,// изменение прозрачности контента во время анимации (по умолчанию false)

"zoomSpeedIn" : 1000,// скорость анимации в мс при увеличении фото (по умолчанию 0)

"zoomSpeedOut" : 1000,// скорость анимации в мс при уменьшении фото (по умолчанию 0)

"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)

"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600, // высота окна, px(355px - по умолчанию)

"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay

"overlayOpacity" : 0.2, // Прозрачность затенения (0.3 по умолчанию)

"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE

"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу

});

$("#menu a, .anim").hover( function() {

$(this).animate({"paddingLeft" : "10px"}, 300)},

function() {$(this).animate({"paddingLeft" : "0"}, 300);

});

$("a.iframe").fancybox(

{

"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600 // высота окна, px(355px - по умолчанию)

});

});

</script>

<title>Art-SV</title>

</head>

<body >

<div class="clearfix"></div>

<table width="1024" height="768" align="center">

<tr>

<td height="100"><img src="images/1_01.jpg" width="1024" height="201" /></td>

</tr>

<tr>

<td height="40">

<div id="menu_wrapper" class="black">

<div class="center"></div>

<? include 'inc/menu.php'; ?>

</div>

<br>

</td>

</tr>

<tr bgcolor="#FFFFFF">

<td class="krug" valign="top">

<p class="p">

<p>

<H1><CENTER> <font color="#003366">Лучшие картины</font></CENTER></H1>

<br>

</p>

<p>

<strong>

3 место:Гарасюта Прохор-Бабочка-40 000 руб.

</strong> <br>

</p>

<div style="text-align: center">

</div>

<center>

<a class="gallery" rel="group" href="images/w12.jpg">

<img src="images/w12.jpg" title="Бабочка" style="width:400px; height:500px" />

</a>

</center>

<p>

<strong>

2 место: Коробкина Диана - 135 000 руб.

</strong> <br>

</p>

<div style="text-align: center">

</div>

<center>

<a class="gallery" rel="group" href="images/w2.jpg">

<img src="images/w2.jpg" title="Карелия. Хвойный" style="width:429px; height:250px" />

</a>

</center>

<p>

<strong>

1 место: Харченко Виктория- 400 000 руб.

</strong> <br>

</p>

<div style="text-align: center">

</div>

<center>

<a class="gallery" rel="group" href="images/w33.jpg">

<img src="images/w33.jpg" title="Долгий путь" style="width:429px; height:700px" />

</a>

</center>

</p></td>

</tr>

<tr>

<td valign="baseline">

<? include 'inc/b_menu.php' ?>

</td>

</tr>

</table>

</body>

</html>

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



Рисунок 11. Страница Великие художники

Код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" href="stylemenu.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />

<script type="text/javascript" src="js/fancybox/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a.gallery, a.iframe").fancybox();

url = $("a.modalbox").attr('href').replace("for_spider","content2");

$("a.modalbox").attr("href", url);

$("a.modalbox").fancybox(

{

"frameWidth" : 400,

"frameHeight" : 400

});

$("a.gallerys").fancybox(

{

"padding" : 20, // отступ контента от краев окна

"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE

"zoomOpacity" : false,// изменение прозрачности контента во время анимации (по умолчанию false)

"zoomSpeedIn" : 1000,// скорость анимации в мс при увеличении фото (по умолчанию 0)

"zoomSpeedOut" : 1000,// скорость анимации в мс при уменьшении фото (по умолчанию 0)

"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)

"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600, // высота окна, px(355px - по умолчанию)

"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay

"overlayOpacity" : 0.2, // Прозрачность затенения (0.3 по умолчанию)

"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE

"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу

});

$("#menu a, .anim").hover( function() {

$(this).animate({"paddingLeft" : "10px"}, 300)},

function() {$(this).animate({"paddingLeft" : "0"}, 300);

});

$("a.iframe").fancybox(

{

"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)

"frameHeight" : 600 // высота окна, px(355px - по умолчанию)

});

});

</script>

<title>Art-SV</title>

</head>

<body background="bg.jpg">

<div class="clearfix"></div>

<table width="1024" height="768" align="center">

<tr>

<td height="100"><img src="images/1_01.jpg" width="1024" height="201" /></td>

</tr>

<tr>

<td height="40">

<div id="menu_wrapper" class="black">

<div class="center"></div>

<? include 'inc/menu.php'; ?>

</div>

<br>

</td>

</tr>

<tr bgcolor="#FFFFFF">

<td class="krug" valign="top">

<p class="p">

<h2><center>Великие художники</h2>

<br>

<a href="B.php"<h3><font color="#464451">Буонарроти Микеланджело</h3></a>

<font color="black">

<br>

<br>

<div style="text-align: center">

</div>

<center>

<a class="gallery" rel="group" href="images/b1.jpg"><img src="images/b1.jpg" style="width:115px; height:120px"></a>

<a class="gallery" rel="group" href="images/b2.jpg"><img src="images/b2.jpg"style="width:115px; height:120px"></a>

<a class="gallery" rel="group" href="images/b3.jpg"><img src="images/b3.jpg" style="width:115px; height:120px"></a>

<a class="gallery" rel="group" href="images/b4.jpg"><img src="images/b4.jpg" style="width:115px; height:120px"></a>

<a class="gallery" rel="group" href="images/b5.jpg"><img src="images/b5.jpg" style="width:115px; height:120px"></a>