Совершенствование WEB - сайта предприятия ООО "РеалТрансТревел"

HTML-код (или HTML-документ) состоит из  нескольких разделов. Все элементы  страницы описываются специальными  командами — тегами. Поэтому и  структура документа определяется  какой-либо командой.

Создание Web-сайтов является одной из важнейших технологий разработки ресурсов Internet.

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

Программная реализация Web – сайта требует тщательной проработки структуры и содержания. В свою очередь содержание Web-страницы является одним из основных преимуществ, которые может получить фирма, если разместит на ней нужную пользователям информацию. Важной составной частью Web-сайта является содержательная часть, которая хранится на рабочей станции или на сервере в виде готовых HTML-страниц, связанных между собой гипертекстовыми ссылками. Структура Web-сайта для предприятия ООО "РеалТрансТревел"  представлена на  рис. 2.3

 

 

 

Рис. 2.3. Структура Web-сайта для   предприятия ООО "РеалТрансТревел"

Данная схема отображает основные структурные модули Web-сайта:

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

Рис. 2.4. Экранная форма заголовочной части сайта

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

 

 

 

Рис. 2.5. Меню навигации Web-сайта для   предприятия ООО "РеалТрансТревел"

Меню Web-сайта содержит прямые ссылки на его разделы:

• раздел «О компании» - содержит информацию о компании и ее коллективе;
• раздел "Образование" - содержит информацию об образовании за рубежом
• раздел «Программы» - содержит информацию о предлагаемой программы данной компании;
• раздел «Стоисость услуг» - содержит информацию о предоставляемых услугах и ценах. (см. табл. 2.1). Пункт меню «E – MAIL» загружает Outlook Express и позволяет послать сообщение о заказе на определенный вид услуг данной фирмы (см.рис. 2.6).

Рис. 2.6. Экранная форма загружаемая, при выборе пункта меню «E – MAIL»

Последняя возможность выгодно  отличает данный продукт по сравнению с традиционным использованием Outlook Express.[20]

 

2.4 Файловая организация Web – сайта

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

На рис. 2.7 приведена структура файловой организации Web – сайта. Рисунок отражает структуру файловой организации, которая состоит из следующих файлов:

• файл index.htm – модуль запуска главной страницы сайта;
• файл okompany.htm – модуль страницы о компании;
• файл spprodukt.htm – модуль страницы с информацией о продукции;
• файл spyslug.htm – модуль страницы с информацией об услугах;

Весь проект находиться в директории Сайт «Р», в подкаталоге Images находятся файлы рисунков в формате jpg.

На этапе проектирования структуры сайта выделены следующие составляющие:

• заголовок;
• меню навигации сайта;
• содержательная часть.

Рис. 2.7. Файловая структура сайта компании ООО "РеалТрансТревел"

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

• главная;
• о компании;
• контакты;
• образование;
• стоимость;
• работа;
• визы;
• форум.

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

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

На рис. 2.9–2.11 представлен внешний вид страниц «О компании»,  «Список продукции»  и  «Список услуг».

При выборе пункта меню E-MAIL загружается Outlook Express и позволяет послать сообщение о заказе на определенный вид услуг (рис. 2.12).

 

 

 

 

 

 

 

 

 

 

 

 

Рис. 2.8. Экранная форма главной страницы сайта предприятия ООО "РеалТрансТревел

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рис. 2.9. Экранная форма страницы «О компании» сайта ООО "РеалТрансТревел"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рис. 2.10. Экранная форма страницы "Стоимость" сайта ООО "РеалТрансТревел"

 

 

 

Рис. 2.11. Экранная форма страницы "Образование" сайта ООО "РеалТрансТревел"

 

 

 

Рис. 2.12. Экранная форма страницы "Визы" сайта ООО "РеалТрансТревел"

 

2.5 Разработка HTML-документов средствами визуальных интегрированных сред

Программы разработки интерактивных Web-документов позволяют в процессе создания визуально наблюдать добавление новых компонентов к формам документа, что соответствует принципу WISYWYG (что вы видите на экране то и получите). Такие средства программирования принято называть визуальными интегрированными средами.

Интегрированные среды, по сравнению с другими средствами, предоставляют разработчику при создании HTML-документов следующие преимущества:

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

Среди удачно разработанных интегрированных сред визуальной разработки HTML-документов, можно выделить Dream Weaver, разработанный фирмой Macromedia и Front Page фирмой Microsoft.

Для разработки Web - сайта была выбрана среда Dream Weaver 7.0. Это обусловлено используемым в программе разработки более простым и интуитивно понятным интерфейсом, а так же более продуманным алгоритмом генерации HTML-документов в плане избыточности формируемого кода. Среда обладает всеми функциональными возможностями интегрированной среды фирмы Microsoft [21].

Рассмотрим основные возможности Dream Weave. На рис. 2.12 изображен вид программы на экране монитора при запуске.

Рис.2.13  - Вид программы DreamWeaver 7.0

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

• Rollover Image  - вставляет на страничку конструкцию, которая Image (картинка) - вставляет на страничку графический элемент;
• имитирует анимированную кнопку (кнопку изменяющую свой вид при наведении на нее);
• Table (таблица) - вставляет на страничку таблицу;
• Tabular data (табличные данные) - вставляет готовую с таблицу с готовыми данными (например из Exel);
• Horizontal Rule (линейка) - вставляет декоративный элемент - линейку (обычно используется как разделитель абзацев);
• Navifgation Bar - вставляет навигационную панель, состоящую из нескольких кнопок;
• Draw Layer (нарисовать слой) - вставляет на страничку слой (как в   PhotoShop);
• Line Break (мягкий перенос) - вставляет на страничку (в тексте) мягкий перенос;
• E-mail Link (сслыка на электронную почту) - вставляет на страничку ссылку на электронный адрес;
• Date (дата) - вставка в документ текущей даты (можно с автообновлением);
• Flash - вставляет флеш-анимацию в страничку;
• ShockWave - вставляет Shockwave-анимацию;
• Generator - вставляет заготовку Generator;
• FireWorks - вставляет объект FireWorks;
• Applet - вставляет ява-апплет;
• ActiveX - вставляет ActiveX;
• Plugin - вставляет объект, проигрываемый плагином;
• SSI - вставляет инклюд (подключаемый внешний HTML файл);

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

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

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

 

2.6 Создание справочных систем  средствами DHTML

 

DHTML (Dynamic Hyper Text Markup Language) – язык динамической разметки гипертекста, является очень мощной технологией разработки современных диалоговых систем используемых не только для сетевого представления но и для локального применения.

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

DHTML – это объектно-ориентированная технология, включающая в себя три компоненты:

• язык гипертекстовой разметки документов;
• языки создания сценариев (JavaScript, VBScript);
• технологии создания интерактивных приложений (аплетов, сервлетов) таковыми являются объектно-ориентированный язык Java и технология ActiveX;
• технологию контроля над созданием макета страницы – CSS (Cascade Style Sheets) – каскадные таблицы стилей.

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

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