Разработка web-сайта туристического агентства "Verona Тур"

90

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

ПЕРЕЧЕНЬ УСЛОВНЫХ ОБОЗНАЧЕНИЙ, СИМВОЛОВ, ЕДИНИЦ, СОКРАЩЕНИЙ И ТЕРМИНОВ

HTML - язык разметки гипертекстов (HyperText Markup Language)

CSS - каскадная таблица стилей

WEB-сайт - электронное издание

ВВЕДЕНИЕ

web сайт туристический агентство

Интернет (англ. Интернет, от лат. inter -- между и англ. net -- сеть), всемирная компьютерная сеть, соединяющая вместе тысячи сетей, включая сети вооруженных сил и правительственных организаций, образовательных учреждений, благотворительных организаций, индустриальных предприятий и корпораций всех видов, а также коммерческих предприятий (сервис-провайдеров), которые предоставляют частным лицам доступ к сети. Среди типов доступа в Интернет различают on line доступ, который позволяет использовать сеть в режиме реального времени, и off line доступ, когда задание для сети готовится заранее, а при соединении происходит лишь передача или прием подготовленных данных. Такой доступ менее требователен к качеству и скорости каналов связи, но дает возможность пользоваться только e-mail -- электронной почтой.

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

Последние годы ознаменовались бурным развитием систем телекоммуникаций, одним из ключевых элементов которых стала глобальная компьютерная сеть Интернет и ее главный сервис www (World Wide Web) или всемирная паутина. Интернет представляет собой первую реализацию опосредованной компьютерами гипермедийной среды, которая обладает уникальными маркетинговыми характеристиками.

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

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

1 АНАЛИЗ ЗАДАНИЯ И ПОСТАНОВКА ЗАДАЧИ НА ПРОЕКТИРОВАНИЕ

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

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

Представлена общая блок-схема построения web-сайта (рисунок 1.1). Она включает четыре основных этапа.

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

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

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

Рисунок 1.1 - Блок схема построения web-сайта

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

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

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

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

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

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

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

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

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

2 АНАЛИТИЧЕСКИЙ ОБЗОР ДОСТИЖЕНИЙ В ПРОИЗВОДСТВЕ И ПРИМЕНЕНИЕ ЭЛЕКТРОННЫХ ИЗДАНИЙ

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

Автором языка HTML является Тим Бернерс-Ли, выпускник Оксфордского университета, работавший в то время по контракту в Женеве, в Европейской лаборатории физики элементарных частиц (CERN, Conseil Europeen pour la Recherche Nucleaire) консультантом по программному обеспечению. CERN - достаточно большая организация, и потому, чтобы лучше ориентироваться в ее структуре, не хранить в памяти данные о большом количестве проектов, должностных лиц и пр., Тим Бернерс-Ли разработал для своего личного пользования программу Enquire, на основе которой через несколько лет для лаборатории было создано своего рода информационное пространство. Программа Enquire позволяла осуществлять так называемый "нелинейный" поиск документов - т.е. переходить от одного документа к другому без обращения к оглавлению или справочнику.

Отсутствие единого стандарта, которого придерживались бы разработчики браузеров и web-серверов, привело бы к тому, что невозможно было бы создать сайта, который одинаково выглядел бы в разных браузерах. Пришлось бы под каждый браузер писать свой сайт. Во избежание этого по инициативе Тима-Бернерса Ли в июле 1994 года на базе Массачуссетского технологического института был создан World Wide Web consortium (или просто W3C). Основная цель W3C - обеспечить как можно большую совместимость программного обеспечения web-публикаций. W3C не является административным органом, это нечто вроде форума для выработки компромиссных решений в области web-технологий.

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

По своим функциям и свойствам сайты бывают:

— визитками;

— электронными магазинами;

— информационными сайтами;

— корпоративными представительствами;

— порталами;

— системами управления предприятием.

Сайт визитка.

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

Цель - представить компанию в Интернете.

Промо-сайт.

Сайт, являющийся прямой рекламой отдельно взятого товара или события.

Цель - представить продукт, явление, действие для пользователей Интернет.

Электронный магазин.

Сайт, предназначен для продажи товаров, услуг через Интернет. Как правило, содержит каталог продукции, прайс-листы, систему заказов.

Цель -  представить компанию в Интернете, продажи товара он-лайн, сервис и поддержка клиентов.

Информационный сайт.

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

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

Корпоративное представительство.

Такого типа сайты, как правило, автоматизируют деятельность компании. Может нести такие функции как: электронный магазин, систему заказов, коммуникационные сервисы, электронный обмен документами, on line переговоры и т.д.

Цель: автоматизировать деятельность предприятия, а также представить его на рынке в Интернете.

Портал.

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

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

Система управления предприятием.

Сайт, с интегрированной корпоративной информационной системой предприятия.

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

3 ВЫБОР ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ РАЗРАБОТКИ ЭЛЕКТРОННОГО ИЗДАНИЯ «VERONA ТУР»

3.1 HTML-редакторы

Каждый выбирает свой инструмент для создания web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

Web-страницы можно создавать в редакторах двух основных типов:

- WYSIWYG-редакторы: Word, Dreamweaver, FrontPage и т.д.

- Не - WYSIWYG, или текстовые: HomeSite, HotDog, FirstPage, и т.д.

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

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

FrontPage -- WYSIWYG-редактор HTML, входящий в состав пакета приложений Microsoft Office.

Данное приложение при разработке страниц веб-узла пользуется движком Internet Explorer (Trident). В браузерах, использующих другие движки (например, Gecko), страницы, созданные с помощью FrontPage могут отображаться по-другому. Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени.

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

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

DreamWeaver - HTML-редактор, который относится к категории WYSIWYG-редакторов, разработан и поддерживался компанией Macromedia до 8-й версии(2005 год). Следующие версии (начиная с Dreamweaver CS3 (2007)) выпускает Adobe.

Программное обеспечение AdobeDreamweaver CS5.5 -- передовое средство разработки и редактирования веб-сайтов на базе отраслевых стандартов, которое позволяет создавать проекты для настольных ПК, смартфонов, планшетов и других устройств в визуальном режиме и с помощью кода. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире.

Новые функции AdobeDreamweaver CS5.5:

- поддержка CSS3/HTML5: возможна проектировка при помощи панели CSS, которая теперь поддерживает новые правила CSS3. Представление «Дизайн» теперь поддерживает медиазапросы и применяет различные стили при изменении размеров экрана. Создавайте код для современных web-сайтов при помощи технологии HTML5, используя удобные подсказки по коду и визуализацию представления «Дизайн». Интерактивный просмотр теперь поддерживает теги <video> (в том числе для QuickTime) и <svg>.

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

- интеграция с Adobe BrowserLab1,2: возможно выполнять предварительный просмотр динамических страниц и локального контента при помощи различных средств просмотра, диагностики и сравнения. Dreamweaver поддерживает интеграцию с Adobe BrowserLab, онлайн-услугой Adobe CS Live, предназначенной для быстрого и точного тестирования веб-контента в различных web-браузерах и операционных системах.

Недостатком считается добавление «лишнего» кода.

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

Последняя версия AdobeDreamweaver CS5.5 (рисунок 3.1)

Рисунок 3.1 - HTML-редактор AdobeDreamweaver CS5.5

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" ( вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

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

В Web Page Maker встроен FTP-менеджер, с помощью которого вы сможете легко опубликовать свой сайт в интернете.

Главные преимущества визуального редактора:

- не требуется знаний HTML и никакого опыта создания WEB-страниц;

- перетаскивание объектов -- WYSIWYG дизайн;

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

- создание одновременно большого количества сайтов;

- наличие готовых шаблонов веб-сайтов;

- возможность использования каскадных таблиц стилей (CSS);

- сотни функций: эскизы, эффекты при наведении мыши, сценарии Java, таблицы, формы, фреймы и так далее;

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

- совместимость со всеми видами браузеров, включая Netscape, Mozilla, Opera, Internet Explorer и др.

Последняя версия Web Page Maker (рисунок 3.2)

Рисунок 3.2 - Web Page Maker

3.2 Графические редакторы

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

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

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

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

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

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

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

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

Редакторы растровой графики

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

Рисунок 3.3 - Графический редактор Microsoft Paint

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

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

Рисунок 3.4 - Графический редактор Adobe Photoshop CS2

Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady, предоставляющие огромные возможности по обработке графики под web (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.

Редакторы векторной графики

Adobe Illustrator. Этот пакет был задуман как редактор векторной графики, однако дизайнеры используют его в самых разных целях, в том числе и в виде иллюстратора. Он очень удобен для быстрой разметки страницы с логотипом и графикой -- простого одностраничного документа. Программа обладает интуитивно понятным интерфейсом, легким доступом ко многим функциям, широким набором инструментов для рисования и продвинутыми возможностями управления цветом, текстом, что позволяет создавать векторные изображения любого уровня сложности. И является наиболее удобным редактором для создания различных макетов для прессы или наружной рекламы. В этом пакете также существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с изображениями (CorelGallery).

Последняя версия Adobe Illustrator CS5 (рисунок 3.5)

Рисунок 3.5 - Adobe Illustrator CS5

По своей мощности он эквивалентен растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как .cdr (Corel Draw) и .swf (Flash).

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

Рисунок 3.6 - Графический редактор CorelDraw

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

4 ПРОЕКТИРОВАНИЕ ЭЛЕКТРОННОГО ИЗДАНИЯ ТУРИСТИЧЕСКОГО АГЕНТСТВА «VERONA ТУР»

4.1 Разработка структуры сайта

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

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

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

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

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

— объявление HTML;

— заголовочная часть;

— тело документа.

Объявление HTML

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

Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

Тело документа.

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.

Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется.

Для начала нового абзаца используется тег <P> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение".

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

Для осуществления связи между HTML - документами применяются гипертекстовые ссылки. Она состоит из двух частей: псевдокнопки и адресной части. Для создания ссылки применяется тег <A>.

Современный Web - сайт практически не мыслим без графического оформления. Хорошо оформленные сайты привлекают к себе большее число посетителей. Изображение может быть использовано в качестве фона. Уже известный нам тег <BODY> имеет атрибут BACKGROUNG.

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис языка Java - поэтому его часто называют Java-подобным. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.

Основные области использования языка JavaScript при создании интерактивных HTML-страниц:

— динамическое создание документа с помощью сценария;

— оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;

— создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

— взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном в HTML-страницу.

4.2 Создание структурной схемы

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

Рисунок 4.1 - Структурная схема

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

Главная страница содержит остальные ссылки присутствующие на информационном сайте.

4.3 Создание модульной сетки сайта

Рассмотрим основные идеи сайта:

— определим информационную часть сайта (статическая составляющая) и активную часть, которая требует от пользователя выполнения действий, например, заполнения форм, просмотр ресурсов и т.п.;

— сгруппируем идеи по содержанию;

— сгруппируем идеи по возможностям;

— определим приоритет каждой из идей.

Из созданной структуры сайта создадим модульную сетку сайта. Модульная сетка сайта -- это своеобразная диаграмма, позволяющая визуально представить web-страницы еще до их построения. Для наглядности нарисуем модульную сетку соответствующей каждой web-странице (рисунок 4.2).

Рисунок 4.2 - Модульная сетка web-страниц

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

а) HEADER:

1) logo

2) main navigation

б) SIDEBAR:

1) additional navigation

2) additional information

в) CONTENT:

1) главное содержимое

г) FOOTER:

1) additional navigation

2) additional information

Тематические разделы.

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

Навигация.

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

5 РАЗРАБОТКА СОДЕРЖАНИЯ ЭЛЕКТРОННОГО ИЗДАНИЯ «VERONA ТУР»

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

Информация, представленная на web-странице, должна удовлетворять следующим критериям:

а) должна соответствовать целям создания web-страницы, цель, ради которой сайт разрабатывается. Ими могут быть:

1) распространение информации (о фирме, ее продукции и услугах)

2) продажа товаров и услуг;

3) формирование благоприятного имиджа сайта;

4) получение от аудитории посещающий сайт оперативной информации о сайте, его услугах, качестве обслуживания и др.

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

в) должна быть в определенной степени уникальной, чтобы привлечь внимание посетителей. Тем более, что в сети Интернет существует множество похожих web-страниц, и конкуренция между ними достаточно сильная;

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

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

е) не должна носить излишне рекламный, навязчивый характер;

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

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

6 РАЗРАБОТКА ГРАФИЧЕСКОГО ДИЗАЙНА ЭЛЕКТРОННОГО ИЗДАНИЯ

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

Интернет-коммуникации реализуются через:

— работу пользователей с интернет-ресурсами (поиск, обработку и анализ информации);

— такие способы общения в Интернете, как чаты, web-конференции, электронная почта;

— самостоятельную работу, используя тематическую литературу, представленную в Интернете.

Задачи информационного web-сайта:

— информационные - расширение информационной базы за счет свободного доступа к информации;

— коммуникативные - обмен опыта с пользователями посредством общения с помощью чатов и форумов;

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

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

6.1 Определение целевого сегмента потребителей

Аудитория сети Интернет огромна. Однако определенную web-страницу увидят далеко не все пользователи сети. Но этого и не требуется. Необходимо, чтобы web-страницу посещали те пользователи, которые могут быть потенциальными клиентами.

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

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

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

6.2 Разработка дизайна web-страницы

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

Универсального решения в области разработки дизайна web-страниц не существует. Возможны совершенно различные варианты исполнения Web-страницы.

Все web-страницы одного сервера должны быть оформлены в едином стиле. Это создаст дополнительное представление о фирме и ее товарах.

Дизайн web-страниц предполагает разработку следующих элементов:

— цвет;

— шрифт;

— графика;

— компоновка web-страницы.

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

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

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

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

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

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

При выборе шрифта необходимо принимать во внимание следующие рекомендации.

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

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

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

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

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

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

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

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

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

Закончив создание web-страницы, нужно посмотреть на нее со стороны потенциального пользователя. Возможно, разработка web-страницы будет происходить на мощном компьютере Power Mac или Sun, однако большинство пользователей могут находиться в значительно худших условиях, и важно знать, как выглядит web-страница с их точки зрения.

7 РАЗРАБОТКА ЭЛЕКТРОННОГО ИЗДАНИЯ «VERONA ТУР»

7.1 О туристическом агентстве

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

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

— у всех гостиниц, компаний проката машин и т.д. существует, как правило, развернутая программа скидок, но клиент, позвонивший "с улицы", получает стандартную цену. Естественно, зачем завлекать Вас скидками, если Вы и так позвонили. Одна из задач турагентства, воспользовавшись своим опытом и информацией, помочь сэкономить Ваши деньги;

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

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

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

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

Туристическое агентство «Verona Typ» было создано в 2011 году и занимает лидирующие позиции как туроператор по направлениям Турция, Египет, Израиль, Таиланд, Объединенные Арабские Эмираты и Европа. Основатель и действующий в настоящее время директор агентства: Сячин Дмитрий Александрович.

Мы предлогаем услуги, которые рассчитаны на потребителей с разным уровнем достатка, начиная от самых экономичных предложений и до VIP-обслуживаний. Также мы занимаемся организацией корпоративных мероприятий, ориентированы на обслуживание малых (до 10 чел.) и средних (до 40 чел.) групп.

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

7.2 Цели сайта

Перед разработкой web-сайта определимся с целями, которые должен решать данный web-сайт:

— предоставить подробную информацию об туристических услугах и продуктах предоставляемых туристическим агенством «Verona Typ», истории создания, основной деятельности компании, её руководителях;

— публикация новостей;

— полезные статьи о странах мира;

— информацию о оформлении виз в различные места;

— возможность выбрать или скомпановать путевку, просмотреть спецпредложения;

— возможность узнать погоду и заказать звонок;

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

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

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

7.3 Разработка структуры сайта

После того, как были определены цели, которые должен решать сайт, были определены задачи web-сайта:

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

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

Третья задача: предложение об оформления виз и их получение. Поместим информамцию в разделе «Визовая поддержка», которая поможет предоставить подробную информацию о получении визы, заполнением анкеты.

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

Пятая задача: рассказать об истории создания компании, основную деятельность и ее партнерах. Эту тему поможет раскрыть раздел «О компании»

Шестая задача: контакты. Раздел «Контакты» представляет собой упорядоченный список адресов, телефонов и других контактных данных, с помощью которых можно связаться с оператором, по телефону или скайпу, и задать дополнительные, интересующие Вас вопросы и в течении нескольких минут наши операторы попытаются на них ответить, а так же в этом разделе вы можете узнать наш адрес и подъехать прямо к нам в офис.

Проанализировав и обобщив эти данные, создадим структуру web-сайта Verona Typ.

Структура web-сайта:

- «Главная» - краткое описание предлогаемых услуг сайта;

- «О компании» - описание истории создания компании и ее партнеров.

- «Полезные статьи» - подробная информация о странах;

- «Туры» - предлогаемые места отдыха;

- «Визовая поддержка» - помощь в оформлении визы;

- «Фотогалерея» - фотографии красивых мест и фотоотчеты клиентов;

- «Контакты» - список телефонов и адресов.

7.4 Программирование дизайна wеб-сайта

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

При создании дизайна web-сайта рекомендуется воспользоваться готовыми пакетами работы с графикой. Например, популярным растровым редактором изображений Adobe Photoshop CS3 (рисунок 7.1).

Рисунок 7.1 - Графический редактор Adobe Photoshop CS3

В верхней части web-сайта обычно помещается так называемая «шапка» - Header. Логотип организации в сочетании с текстом, обычно делается ссылкой на главную страницу. Текстом может быть название этой организации или её слоган. Так же в верхней части экрана расположена панель навигации, для перемещения по страницам сайта и поисковая панель, чтоб быстро найти нужную информацию. Для туристического агентства Header выглядит следующим образом (рисунок 7.2).

Рисунок 7.2 - Header

Так же в Heаder с правой стороны находятся часы созданы с помощь JavaScript, а так же выпадающаю панель для регистрации и входа на сайт под своим именем (рисунок 7.3).

Рисунок 7.3 - Поле регистрации

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