Разработка состава и структуры Web- сайта гостиничного комплекса

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

КУРСОВОЙ ПРОЕКТ

по дисциплине "Вычислительные системы, сети и телекоммуникации"

по теме: Разработка состава и структуры Web- сайта гостиничного комплекса

Содержание

Введение

1. Анализ структуры и содержания Web-сайтов

1.1 Виды структур Web-сайтов

1.1.1 Линейная структура

1.1.2 Древовидная структура

1.1.3 Решетчатая структура

1.1.4 Произвольная структура

1.2 Анализ структуры и содержания сайта гостиничного комплекса Воздвиженское

1.2.1 Содержание сайта

1.3 Анализ структуры и содержания сайта гостиничного комплекса Смоленска

1.3.1 Содержание сайта

1.4 Анализ структуры и содержания сайта гостиничного комплекса Иртыш

1.4.1 Содержание сайта

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

2.1 Анализ и выбор программных средств разработки Web-сайта

2.1.1 Основные идеи сайта и целевая аудитория

2.1.2 Технические ограничения

2.1.3 Тип сайта

2.1.4 Структура сайта

2.1.5 Вид сайта

2.2 Разработка шаблонов страниц

3. Программная реализация Web - сайта, заполнение страниц информацией, тестирование его работоспособности

3.1 Структура внутренних связей

3.2 Разработка описания программы. Анализ и комментирование исходного кода каждой Web - страницы

Заключение

Список использованных источников

Приложение

Введение

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

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

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

1. Анализ структуры и содержания Web-сайтов

1.1 Виду структур Web-сайтов

1.1.1 Линейная структура

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

Рисунок 1 - Линейная структура сайта

1.1.2 Древовидная (иерархическая) структура

Древовидная (иерархическая)структура, представлена на (Рисунке 2).Каждая страница такой структуры, кроме главной, является подразделом страниц более высокого уровня. Такая структура имеет начало -- первую страницу, корень дерева, а конец просмотра связан с исчерпанием всего материала на сайте. Основным недостатком данного вида структуры является сложность соблюдения баланса между глубиной и шириной. Если дерево сайта будет расти только вглубь, то пользователю, чтобы дойти до интересующей его страницы, придется загрузить и просмотреть слишком большое количество страниц. Если же сайт будет только расширяться, то чтобы найти нужную информацию, пользователь будет тратить много времени на выбор нужного раздела. И первое, и второе вызывает негативные эмоции у пользователя, и чаще всего он покидает сайт разочарованным. Поэтому необходимо постоянно следить за разрастанием ресурса и придерживаться "золотой середины".

Рисунок 2 - Древовидная (иерархическая) структура

1.1.3 Решетчатая структура

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

Рисунок 3 - Решетчатая структура

1.1.4 Произвольная структура

Произвольная структура, представлена на (Рисунке 4).Страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.

Рисунок 4 - Произвольная структура

1.2 Анализ структуры и содержания сайта фирмы ТРИЛАЙН

Сайт фирмы Трилайн, представленный на (Рисунке 5) имеет произвольную структуру, представленную на (Рисунке 4).

Рисунок 5 - Страница сайта ТРИЛАЙН

1.2.1 Содержание сайта

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

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

1.3 Анализ структуры и содержания сайта фирмы GLOBAL

Сайт фирмы GLOBAL, представленный на (Рисунке 6) имеет произвольную структуру, представленную на (Рисунке 4).



Рисунок 6 - Страница сайта GLOBAL

1.3.1 Содержание сайта

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

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

1.4 Анализ структуры и содержания сайта фирмы GEOTRACER

Сайт фирмы GEOTRACER, представленный на (Рисунке 7) имеет произвольную структуру, представленную на (Рисунке 4).

Рисунок 7 - Страница сайта GEOTRACER

1.4.1 Содержание сайта

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

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

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

2.1 Анализ и выбор программных средств разработки Web-сайта

HTML - редакторы можно разделить на две группы:

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

- Текстовые редакторы. Это инструмент для непосредственного редактирования HTML и CSS кода. Некоторые редакторы имеют общее назначение и в них нет специальных опций поддержки веб кода. Другие специализированы для использования веб языков, таких как HTML, CSS, JavaScript и PHP, и имеют встроенные свойства для быстрого ввода HTML тегов, CSS свойств, и так далее. Многие из таких редакторов позволяют просматривать веб страницу в отдельном окне.

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

- редактор Kompozer, который годится как для начинающих, так и для профессионалов. Существуют его версии для Windows и Linux;

- редактор страниц Amaya и одновременно браузер (два в одном), который одобрен W3C, он правильно поддерживает все стандарты для html;

- набор программ SeaMonkey для работы в интернете, включающий браузер, почтовую программу, IRC-чат и редактор страниц. Создан на основе продуктов Mozilla;

- совсем новая разработка BlueGriffon, появившаяся в 2010 году. Впрочем, она считается преемником более раннего редактора NVU, развитие которого заглохло несколько лет назад.

Набор платных визуальных редакторов достаточно велик. Среди них можно выделить такие, как CoffeeCup HTML Editor, Namo WebEditor, RapidWeaver, Web Builder и др. Однако наиболее популярными уже долгое время являются редактор Dreamweaver и линейка редакторов от Microsoft.

- визуальный редактор Dreamweaver , многие годы удерживающий заслуженное лидерство среди программ для создания. Изначально был разработан и долгое время развивался компанией Macromedia, а затем купившей её компанией Adobe, которая ради Dreamweaver отказалась от дальнейшего развития собственного html-редактора Adobe GoLive. Сейчас Dreamweaver входит в набор продуктов Adobe Creative Suite, представляющий комплексное решение для создания веб-сайтов. Впрочем, его вполне можно использовать и отдельно. На сайте Adobe можно загрузить 30-дневную пробную версию программы.

Популярными программами для создания сайтов также являются визуальные редакторы от Microsoft. Долгое время многие вебмастера пользовались для создания сайтов редактором FrontPage, но затем Microsoft прекратила его поддержку, предложив взамен две новых программы - Microsoft Expression Web (считается основным html-редактором от Microsoft) и Microsoft SharePoint Designer, который в большей мере можно считать преемником FrontPage.

Microsoft Expression Web является частью Microsoft Expression Studio - комплекса программ для разработки сайтов.

Microsoft SharePoint Designer является частью Microsoft SharePoint - комплекса программ для организации совместной работы (в т. ч. через интернет, поэтому включает мощные средства для создания сайтов). SharePoint Designer 2007 Microsoft сделала полностью бесплатным, его можно скачать на сайте Microsoft.

Для выполнения данной курсовой работы мной выбрано средство для создания веб-сайтов - Adobe Dreamweaver. Программное обеспечение для веб-дизайна Adobe Dreamweaver CS6 содержит интуитивно понятный визуальный интерфейс для создания и редактирования веб-сайтов HTML и мобильных приложений.

2.1.1 Основные идеи сайта и целевая аудитория

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

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

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

2.1.2 Технические ограничения

Сайт должен быть облегчен, но являться удобным в использовании и содержать достоверную и краткую информацию об гостиничном комплексе. Данное решение обусловлено тем, что среднестатистические посетители данных сайтов имеют ПК средней мощности и невысокую скорость соединения с интернетом, по разливным данным средняя скорость составляет от 512 кбит/с до 2,56 Мбит/с. Путешественникам больше нужна мобильность и низкая энергопотребляемость, в связи с этим они выбирают технику со средней и слабой производительностью и часто пользуются мобильным интернетом, имеющим не очень высокую скорость соединения. Организации, в связи с теми задачами, что они выполняют, как правило, имеют в своем распоряжении машины средней и слабой мощности и среднюю скорость соединения с интернетом. Для того чтобы максимально расширить круг потенциальных клиентов сайт должен иметь небольшой вес.

Сайт будет реализован при помощи языка HTML - (от англ. Hyper Text Markup Language - "язык разметки гипертекста") - стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

2.1.3 Тип сайта

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

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

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

2.1.4 Структура сайта

Файловая структура сайта, представленная на (Рисунке 8),будет иметь вид:

Рисунок 8 - Файловая структура сайта

В корневой папке "globaltrek.ru" содержится папка "www", в которой будут находится все файлы html и папка "images", содержащая изображения.

Структура разрабатываемого Web-сайта, представленная на (Рисунке 9),будет произвольная:

Рисунок 9 - Структура разрабатываемого сайта.

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

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

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

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

2.1.5 Вид сайта

Мною выбран следующий вид для главной страницы сайта:



Рисунок 10 - Вид главной страницы сайта

Рисунок 11 - Макет и вид шаблона



Рисунок 11 - Макет и вид шаблона сайта

Остальные страницы сайта будут иметь вид:

Рисунок 12 - Вид остальных страниц сайта



Рисунок 13 - Макет и вид страниц сайта

2.2 Разработка шаблонов страниц

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

Шаблон для остальных страниц сайта:

HTML код шаблона станицы находится в приложение А.

3. Программная реализация Web - сайта, заполнение страниц информацией, тестирование его работоспособности

Сайт реализован при помощи языка HTML. На основе шаблона станицы были созданы остальные страницы сайта. В них была внесена соответствующая информация.

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

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

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

3.1 Структура внутренних связей

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

- Ссылка на главную страницу сайта <a href="index.htm">

- Ссылка на страницу продукция <a href="produkcei.htm">

- Ссылка на страницу системы мониторинга <a href="sistema.htm">

- Ссылка на страницу дополнительные услуги

<a href="Dopolnitelnie_uslegi.htm">

- Ссылка на страницу контакты <a href="kontakti.htm">

HTML код текстового меню сайта находится в приложение А

Скриншоты созданного сайта находятся в приложении Б.

Сайт был загружен на локальный сервер Denwer, и в адресной строке браузера была введена ссылка http://www.globaltrek.ru/. Сайт работоспособен. Все ссылки работают. В браузерах Opera, Mozilla Firefox и Chrome сайт отображается корректно.

Заключение

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

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

Данный сайт был создан с помощью языка HTML.

Список использованных источников

1. Базы данных: разработка и управление: Книга/ Хансем Г., Хансем Дж. - М.: Бином, 2010. - 704 с.

2. HTML справочник [Электронный].- Код доступа: свободный.- http://html.manual.ru/.- Название с экрана: manual.ru.-

Дата доступа 22.04.13

3. Master-live.- Код доступа: свободный.- http://www.master-live.ru/arhiv/webmaster.html .-Название с экрана: Master-live.-

Дата доступа 22.04.13

4. Web-технологии.- Код доступа: свободный http://htmlweb.ru/html/bhtml.php .- Название с экрана: Web-технологии.- Дата доступа 22.04.13

5. Трилайн.- Код доступа: свободный.- http://www.trxline.ru/.- Название с экрана:

Трилайн.- Дата доступа 22.04.13

6. Geotracer.- Код доступа: свободный.- http://www.geotracer.ru/.- Название с экрана: Geotracer .- Дата доступа 22.04.13

7. Global.- Код доступа: свободный.- http://www.kgk-global.com.-

Название с экрана: Global.- Дата доступа 22.04.13

Приложение А

Текст программы

A.1 HTML код шаблона станицы:

<html> <head> <title>Ресторан</title> </head> <body bgcolor="#67DC61"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="blue" width="1000"> <tr> <td colspan="2" height="150" background="image/1.jpg"> <font size="7" color="white"><center> ООО"ГлобалТрек"</center></font> </td> </tr> <tr> <td colspan="2" height="40" bgcolor="blue"> <table border="0" cellpadding="5" cellspacing="0" align="center"> <tr> <td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> главная</font></a> | <a href="nomera.htm"> <font color="white" size="5"> номера</font></a> | <a href="restoran.htm"> <font color="white" size="5"> рестоан</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> контакты</font></a> </font> </td> </tr> </table> </td> </tr> <tr> <td height="600" bgcolor="white" valign="top"> </td> </tr> <tr> <td> <table border="0" align="center" bgcolor="green" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 38-59-31, 38-59-33</address> <address> globatrek@mail.ru </address> <br></center> </td> </tr> </table> </td> </tr> </table> </body> </html>

A.2Текстовое меню сайта:

<font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> Системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> контакты</font></a> </font>

A.3 Главная страница:

<html> <head> <title>Главная</title> </head> <body bgcolor="#616ddc"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="Blue" width="1000"> <tr> <td colspan="2" height="150" background="image/1.jpg"> <!Шапка с картинкой и текстом> <font size="9" color="white"><center>ООО"ГлобалТрек"</center></font></td> </tr> <tr> <!Конец шапки> <td colspan="2" height="40" bgcolor="Blue"> <!Текстовая навигационная панель> <table border="0" cellpadding="5" cellspacing="0" align="left"> <tr><td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> <!Ссылка на старницу номера> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> <!Ссылка на старницу системы мониторинга> системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> <!Ссылка на старницу дополнительные услуги> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> <!Ссылка на старницу контакты> контакты</font></a> </font> </td></tr> </table> </td> </tr> <!Конец навигационной панели> <tr> <td width="800" height="1000" bgcolor="white" valign="top"> <!Контент главной страницы> <table border="0" cellpadding="10" cellspacing="0"> <!Таблица с контентом гланвой страницы> <tr> <td> <p align="justify"><img src="image/index-19.jpg" width="350" height="250" align="right" hspace="10" vspace="3" alt="Зданеи гостиницы"> Компания была образована в 2013 году группой единомышленников для разработки и внедрения систем контроля подвижных объектов в пространстве. За прошедшее время, помимо систем "трекинга" было разработано множество решений для систем промышленной автоматизации, метрологическому обеспечению, потребительской электроники. Мы разработали уникальные измерительные комплексы, внесённые ныне в государственный реестр. Были получены лицензии на телематическую деятельность, области аккредитации на поверку и калибровку метрологического оборудования. Было произведено более пяти тысяч единиц электронных устройств различного назначения. Мы не останавливаемся. Мы двигаемся вперед, внедряя новейшие разработки. Клиенты нашей компании, крупные операторы и дистрибьютеры, ценят тот положительный опыт сотрудничества, который приобретается в процессе работы с нашей компанией.</p> <p align="justify"> </p> <table> <!Дополнительная тоблицы с картинками находящаяся внутри табицы контент> <tr> <td><img src="image/6(87).jpg" alt="Ресторан"></td> </tr> </table> <!Конец дополнительной тоблицы с картинками находящаяся внутри табицы контент> </table> </td> <!Конец контента главной страницы> <td width="200" height="1000" bgcolor="white" valign="top"> <!Новостной раздел> <table border="7" bordercolor="white"> <table border="0" bordercolor="black" cellspacing="0" cellpadding="10"> <tr> <!Шапка новостного раздела> <td bgcolor="blue"><font size="4" color="white"><b><center>Новости</center></b></font> </td> </tr> <!Конец шапки новостного раздела> <tr> <!Первая новость> <td><b>21.01.2013</b> <p align="justify">21-01-2013 Оборудование NetBorder теперь в доступно в России. Разработанное при нашем участии оборудование теперь доступно для заказа. Наша компания в партнерстве с Канадской компанией Sangoma представляет линейку NetBorder. Более подробно о линейке читайте в разделе Шлюзы телефонии и Пограничные контроллеры.</p> </td> </tr> <!Конец перовй новости> <tr><!Вторая новость> <td> <b>01.01.2013 г.</b> <p align="justify"> 01-01-2013 С новым Годом! Наша компания поздравляет вас с Новым Годом! Желаем в Новом году исполнения тех желаний, которым не суждено было исполниться в прошлом году. Мы постараемся вам в этом посильно помогать. </p> </td> </tr> <!Конец второй новости> </table> </table> </td> <!Конец новостного раздела> </tr> <tr> <!Подвал сайта> <td> <table border="0" align="center" bgcolor="blue" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 73-16-97, 73-58-95</address> <address>globatrek@mail.ru</address> <br></center> </td> </tr> </table> </td> </tr> <!Конец подвала сайта> </table> </body> </html>

A.4 Страница продукция:

<html> <head> <title>Главная</title> </head> <body bgcolor="#616ddc"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="Blue" width="1000"> <tr> <td colspan="2" height="150" background="image/1.jpg"> <!Шапка с картинкой и текстом> <font size="9" color="white"><center>ООО"ГлобалТрек"</center></font></td> </tr> <tr> <!Конец шапки> <td colspan="2" height="40" bgcolor="Blue"> <!Текстовая навигационная панель> <table border="0" cellpadding="5" cellspacing="0" align="left"> <tr><td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> <!Ссылка на старницу номера> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> <!Ссылка на старницу системы мониторинга> системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> <!Ссылка на старницу дополнительные услуги> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> <!Ссылка на старницу контакты> контакты</font></a> </font> </td></tr> </table> </td> </tr> <!Конец навигационной панели> <tr> <td width="800" height="1000" bgcolor="white" valign="top"> <!Контент главной страницы> <table border="0" cellpadding="10" cellspacing="0"> <!Таблица с контентом гланвой страницы> <tr> <td> <p align="justify"><img src="image/index-19.jpg" width="350" height="250" align="right" hspace="10" vspace="3" alt="Зданеи гостиницы"> Компания была образована в 2013 году группой единомышленников для разработки и внедрения систем контроля подвижных объектов в пространстве. За прошедшее время, помимо систем "трекинга" было разработано множество решений для систем промышленной автоматизации, метрологическому обеспечению, потребительской электроники. Мы разработали уникальные измерительные комплексы, внесённые ныне в государственный реестр. Были получены лицензии на телематическую деятельность, области аккредитации на поверку и калибровку метрологического оборудования. Было произведено более пяти тысяч единиц электронных устройств различного назначения. Мы не останавливаемся. Мы двигаемся вперед, внедряя новейшие разработки. Клиенты нашей компании, крупные операторы и дистрибьютеры, ценят тот положительный опыт сотрудничества, который приобретается в процессе работы с нашей компанией.</p> <p align="justify"> </p> <table> <!Дополнительная тоблицы с картинками находящаяся внутри табицы контент> <tr> <td><img src="image/6(87).jpg" alt="Ресторан"></td> </tr> </table> <!Конец дополнительной тоблицы с картинками находящаяся внутри табицы контент> </table> </td> <!Конец контента главной страницы> <td width="200" height="1000" bgcolor="white" valign="top"> <!Новостной раздел> <table border="7" bordercolor="white"> <table border="0" bordercolor="black" cellspacing="0" cellpadding="10"> <tr> <!Шапка новостного раздела> <td bgcolor="blue"><font size="4" color="white"><b><center>Новости</center></b></font> </td> </tr> <!Конец шапки новостного раздела> <tr> <!Первая новость> <td><b>21.01.2013</b> <p align="justify">21-01-2013 Оборудование NetBorder теперь в доступно в России. Разработанное при нашем участии оборудование теперь доступно для заказа. Наша компания в партнерстве с Канадской компанией Sangoma представляет линейку NetBorder. Более подробно о линейке читайте в разделе Шлюзы телефонии и Пограничные контроллеры.</p> </td> </tr> <!Конец перовй новости> <tr><!Вторая новость> <td> <b>01.01.2013 г.</b> <p align="justify"> 01-01-2013 С новым Годом! Наша компания поздравляет вас с Новым Годом! Желаем в Новом году исполнения тех желаний, которым не суждено было исполниться в прошлом году. Мы постараемся вам в этом посильно помогать. </p> </td> </tr> <!Конец второй новости> </table> </table> </td> <!Конец новостного раздела> </tr> <tr> <!Подвал сайта> <td> <table border="0" align="center" bgcolor="blue" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 73-16-97, 73-58-95</address> <address>globatrek@mail.ru</address> <br></center> </td> </tr> </table> </td> </tr> <!Конец подвала сайта> </table> </body> </html>

A.5 Страница системы мониторинга:

<html> <head> <title>Ресторан</title> </head> <body bgcolor="#616ddc"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="blue" width="1000"> <tr> <td colspan="2" height="150" background="image/1.jpg"> <!Шапка с картинкой и текстом> <font size="7" color="white"><center>ООО"ГлобалТрек"</center></font> </td> </tr> <!Конец шапки> <tr> <!Текстовая навигационная панель> <td colspan="2" height="40" bgcolor="blue"> <table border="0" cellpadding="5" cellspacing="0" align="left"> <tr> <td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> <!Ссылка на старницу системы мониторинга> системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> <!Ссылка на старницу дополнительные услуги> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> <!Ссылка на старницу контакты> контакты</font></a> </font> </td> </tr> </table> </td> </tr> <!Конец навигационной панели> <tr> <td height="600" bgcolor="white" valign="top"> <!Контент страницы ресторан> <table border="0" cellpadding="10" cellspacing="0"> <tr> <td> <p> <img src="image/restaurant-33.jpg" align="right"> </p><br> <p> </p><br> <p> </p> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr><!Конец контента страницы ресторан> <tr> <!Подвал сайта> <td> <table border="0" align="center" bgcolor="blue" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 73-16-97, 73-58-95</address> <address>globatrek@mail.ru</address> <br></center> </td> </tr> </table> </td> </tr> <!Конец подвала сайта> </table> </body> </html>

A.6 Страница дополнительные услуги:

<html> <head> <title>Сервис</title> </head> <body bgcolor="#616ddc"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="blue" width="1000"> <tr> <!Шапка с картинкой и текстом> <td colspan="2" height="150" background="image/1.jpg"> <font size="7" color="white"><center>ООО"ГлобалТрек"</center></font> </td> </tr> <!Конец шапки> <tr> <!Текстовая навигационная панель> <td colspan="2" height="40" bgcolor="blue"> <table border="0" cellpadding="5" cellspacing="0" align="left"> <tr> <td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> <!Ссылка на старницу ресторан> системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> <!Ссылка на старницу дополнительные услуги> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> <!Ссылка на старницу контакты> контакты</font></a> </font> </td> </tr> </table> </td> </tr> <!Конец навигационной панели> <tr> <td height="1000" bgcolor="white" valign="top"> <!Контент страницы дополнительные услуги> <table cellspacing="20"> <tr> <td> <h3>Дополнительные услуги</h3> <ul type="disk"> <li>Установка оборудования</li> <li>Обслуживание оборудования</li> <li>изделия на заказ</li> </ul> </td> </tr> <tr> <td> </ul> </td> </tr> </table> </td> </tr> <tr> <!Подвал сайта> <td> <table border="0" align="center" bgcolor="blue" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 73-16-97, 73-58-95</address> <address>globatrek@mail.ru</address> <br></center> </td> </tr> </table> </td> </tr> <!Конец подвала сайта> </table> </body> <!коенц тела старницы> </html>

A.7 Страница контакты:

<html> <head> <title>Контакты</title> </head> <body bgcolor="#616ddc"> <table border="0" cellpadding="0" cellspacing="0" align="center" bordercolor="blue" width="1000"> <tr> <!Шапка с картинкой и текстом> <td colspan="2" height="150" background="image/1.jpg"> <font size="7" color="white"><center>ООО"ГлобалТрек"</center></font> </td> </tr> <!Кнец шапки сайта> <tr> <!Конец шапки> <td colspan="2" height="40" bgcolor="blue"> <!Текстовая навигационная панель> <table border="0" cellpadding="5" cellspacing="0" align="left"> <tr> <td> <font color="white" size="5"> <a href="index.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> главная</font></a> | <a href="produkcei.htm"> <font color="white" size="5"> <!Ссылка на старницу продукция> продукция</font></a> | <a href="sistema.htm"> <font color="white" size="5"> <!Ссылка на старницу системы мониторинга> системы мониторинга</font></a> | <a href="Dopolnitelnie_uslegi.htm"> <font color="white" size="5"> <!Ссылка на старницу дополнительные услуги> дополнительные услуги </font></a>| <a href="kontakti.htm"> <font color="white" size="5"> <!Ссылка на старницу контакты> контакты</font></a> </font> </td> </tr> </table> </td> </tr> <!Конец навигационной панели> <tr> <td height="800" bgcolor="white" valign="top" align="center"> <!Контент страницы контакты> <table> <tr> <td> <h2>Наш адрес </h2> <address>Москва, Сибирский проезд, дом 2, строение 10.</address> <h2>Схема проезда</h2> </td> </tr> <tr> <td> <br> <img src="image/карта.jpg" align="center"> </td> </tr> <tr> <td> <br> </td> </tr> </table> </td> </tr> <!Конец контента страницы контакты> <tr> <!Подвал сайта> <td> <table border="0" align="center" bgcolor="blue" width="1000"> <tr> <td><center>Связь круглосуточно:<br> <address>8 (4812) 73-16-97, 73-58-95</address> <address>globatrek@mail.ru</address> <br></center> </td> </tr> </table> </td> </tr> <!Конец подвала сайта> </table> </body> </html>

Приложение B

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

B.1 Разработка описания программы. Анализ и комментирование исходного кода каждой Web - страницы.

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

<html>…</html> - указывает программе просмотра страниц что это HTML документ.

<title>…</title> - заголовок страницы.

<head>… </ head > - определяет место, где помещается различная информация не отображаемая в теле документа.

<body>…</body> - определяет видимую часть документа.

<table>… </table> - это корневой элемент любой таблицы, между открывающим и закрывающим тегами которого находятся все остальные теги.

<tr>… </tr> - определяют табличный ряд.

<td>…</td> - используется для создания строк таблиц.

<border> - устанавливает толщину рамки в пикселях.

<bordercolor> - устанавливает цвет фона веб-страницы.

<cellpadding> - определяет расстояние между границей ячейки и ее содержимым. <align> - для изображений можно указывать их положение относительно текста или других изображений на веб-странице.

<colspan> - устанавливает число ячеек, которые должны быть объединены по горизонтали.

<width> - указывает ширину столбцов, таблицы, изображения.

<height> - высота изображения, таблицы, ячеек таблицы.

<valign> - вертикальное выравнивание содержимого ячеек.

<font>…</font> - выделять цветом как всю ссылку, так и отдельные её части.

<a>…</a> - в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы.

<href="…"> - задаёт имя и путь к документу на который указывает ссылка.

<color> - цвет символов.

<size> - размер символов.

<B>…</B> - жирное начертание символов.

<p>…</p> - абзац.

<i>…</i> - выделят текс курсивом.

<br> - на новую строку.

<img src="…"> - вставка изображения.

<alt> - при наведении на изображение выдает надпись, указанную в данном теге.

<address>…</address> - используется для выделения адресов, телефонов.

<center>…</center> - выравнивание центру.

<h>…</h> - выделение заголовков

B.2 Главная страница

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

B.3 Страница продукция:

Рисунок B.3- Страница продукция

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

B.4 Страница системы мониторинга:

Рисунок B.4- Страница системы мониторинга

B.5 Страница дополнительные услуги:

Рисунок B.5- Страница дополнительные услуги

B.6 Страница контакты:

Рисунок B.6- Страница контакты

Размещено на Allbest.ru