Разработка содержимого сайта
Каждая страница сайта находится в соответствующем HTML файле (см. Таблица 1).
Таблица 1
| Имя файла | Назначение файла |
| index.html | Для отображения главной страницы сайта |
| index1.html | Для отображения страницы сайта «Он-лайн табло» |
| index2.html | Для отображения страницы сайта «Авиакомпании» |
| index3.html | Для отображения страницы сайта «Транспорт» |
| index4.html | Для отображения страницы сайта «Для пассажиров» |
| index5.html | Для отображения страницы сайта «Партнёрам» |
| index6.html | Для отображения страницы сайта «О персонале» |
| air.html | Для отображения страницы сайта «Аэроэкспресс» |
| elektro.html | Для отображения страницы сайта «Электропоезд» |
| expr.html | Для отображения страницы сайта «Экспресс» |
| karta.html | Для отображения страницы сайта «Карта сайта» |
| magaz.html | Для отображения страницы сайта «Магазины» |
| marh.html | Для отображения страницы сайта «Маршрут» |
| parkovki.html | Для отображения страницы сайта «Парковки» |
| post.html | Для отображения страницы сайта «Почтовые услуги» |
| rcv.html | Для отображения страницы сайта «Прилёт» |
| reg.html | Для отображения страницы сайта «Регистрация» |
| rekl2.html | Для отображения страницы сайта «Outdoor реклама» |
| rekl3.html | Для отображения страницы сайта «indoor реклама» |
| rekl.html | Для отображения страницы сайта «Размещение рекламы» |
| snd.html | Для отображения страницы сайта «Вылет» |
| sprav.html | Для отображения страницы сайта «Справочник должностей» |
| taxi.html | Для отображения страницы сайта «Маршрутное такси» |
| texnika.html | Для отображения страницы сайта «Продажа техники» |
| tr_obshectven.html | Для отображения страницы сайта «Общественный транспорт» |
| vip.html | Для отображения страницы сайта «vip сервис» |
| ysl.html | Для отображения страницы сайта «Услуги» |
| таблица вылетов.htm | Для отображения таблицы вылетов на странице сайта «прилёт» |
Графические изображения к страницам сайта находятся в каталоге «images».
При разработке сайта использовалась техника оформления текста с помощью каскадных таблиц стилей. Лист стилей был создан в отдельном файле с именем default.css (см. Приложение1). Связь с листом стилей всех страниц сайта осуществляется через помещение в контейнер тега <head> записи <link href="default.css" rel="stylesheet" type="text/css" /> для каждого HTML файла страницы.
Разработанные стили и их назначение представлены в таблице 2.
Таблица 2
| Наименование стиля | Назначение |
| headerFon | Для отображения фона, названия и рисунка в блоке заголовка сайта. Блок заголовка отображается в верхней части по всей ширине страницы. Название сайта сделано ссылкой на главную страницу белыми буквами. |
| header | |
| header * | |
| header h1 | |
| karta | Для отображения страницы «карта сайта» в правом верхнем углу под заголовком сайта. |
| content | Для отображения содержательной части сайта, находящейся между заголовком и нижним информационным блоком. |
| colTwo | Для отображения навигационного меню в левой области содержательной части страницы. Пункты меню имеют фиксированный размер и организованы в виде ссылок на соответствующие страницы. Ссылки выделяются подчёркиванием при наведении на них курсора. |
| colTwo ul | |
| colTwo li | |
| colTwo li li | |
| colTwo h2 | |
| colTwo a | |
| colTwo a:hover | |
| colOne | Для отображения заголовка, разделителя и содержательной части по выбранному пункту навигационного меню справа от него. Позволяет изменять размеры содержательной части пропорционально изменениям размера страницы. Организует строку навигационного меню для страницы с вложением больше двух. |
| colOne .post | |
| colOne .title | |
| colOne .story | |
| colOne .meta | |
| colOne .meta p | |
| colOne .menu | |
| footer | Для отображения в нижней части страницы по всей её ширине информационного блока, содержащего ссылку на главную страницу и год разработки сайта. |
| footer p | |
| footer a | |
| tablevilet | Для отображения в едином стиле таблиц данных. |
| body | Общий стиль для всех элементов контейнера body |
| h1, h2, h3 | Стиль для соответствующих заголовков. |
| а, a:hover | Стиль для ссылок. |
| blockquote | Стиль для контейнера blockquote. |
При разработке страниц сайта использовались следующие возможности HTML:
· в контейнер <head></head> заголовка документа был включен тег <title> для присвоения названия документу. Также применялся элемент meta со свойствами «keywords», "description" для использования в поисковых системах;
· в контейнере <body></body> оформлялись информационные блоки данных при помощи контейнера <div></div>. Это позволило использовать для соответствующих блоков информации различные стили отображения данных;
· меню навигации организовано при помощи контейнера <ul></ul> для создания неупорядоченного списка. Элементы списка оформлены тегами <li>;
· текстовые ссылки реализованы при помощи тега <a> и его атрибута href;
· контейнер <blockquote></blockquote> использовали для выделения текстовой информации с отступом от левого поля.
Большинство страниц сайта оформлены аналогично друг другу. Рассмотрим более подробно оформление главной страницы сайта, HTML код которой представлен в файле index.html (см. Приложение 2).
Первые строки кода в файле index.html содержат контейнер заголовка страницы сайта (далее документа)head:
<head> <title>Сайт АЭРОПОРТА</title> </head>. Он включает элемент title - название документа. Само название расположено между тегами <title> и </title>. Это позволило отобразить название документа в строке заголовка браузера и в пиктограмме свёрнутого окна браузера (см. Рис. 2).
Рис. 2 Использование тега title
Далее, в контейнере <body></body> были оформлены информационные блоки данных при помощи следующих контейнеров <div></div>:
1. <div id="headerFon"> </div>. В этом контейнере используется стиль headerFon, который отображает по всей ширине окна браузера картинку, находящуюся в файле images/ img4.jpg. Это голубой фон заголовка страницы.
2. <div id="header"> <h1><a href="index.html"> Сайт АЭРОПОРТА </a></h1> </div>. В этом контейнере используется стиль header, который отображает в левой части браузера поверх голубого фона картинку, находящуюся в файле images/ img1.jpg. Это картинка самолёта. Применение стилей «header h1», «header *» и «а» позволило отобразить поверх картинки самолёта название «Сайт АЭРОПОРТА» белыми буквами крупным шрифтом, и сделать это название ссылкой на главную страницу сайта, находящегося в файле index.html. Ссылка отображается без подчёркивания(см.Рис. 3). 
Рис. 3 Заголовок страницы
3. <div id="karta"><a href="karta.html">карта сайта</a></div>. В этом контейнере используется стиль «karta», который отображает под заголовком страницы в правой части браузера определённым шрифтом текст - «карта сайта» (см. Рис. 4). Использование содержимого блока <a></a> позволило отобразить ссылку на страницу сайта «карта сайта», находящуюся в файле «karta.html». Ссылка отображается с подчёркиванием.
Рис. 4 Карта сайта
4. <div id="content">……></div>. В этом контейнере используется стиль «content», который позволяет сделать внешний отступ на 20 пиксел от предыдущего блока данных, то есть заголовка страницы. Внутри контейнера «content» расположены следующие блоки данных:
· <div id="colTwo">
<ul>
<li><h2>Навигация</h2>
<ul><li><a href="index.html">Главная</a></li>
<li><a href="index1.html">Он-лайн табло</a></li>
<li><a href="index2.html">Авиакомпании</a></ <li><a href="index3.html">Транспорт</a></li> <li><a href="index4.html">Для пассажиров</a></li>
<li><a href="index5.html">Партнёрам</a></li>
<li><a href="index6.html">О персонале</a></li>
</ul></li>
</ul>
</div>. В этом контейнере используются стиль «colTwo» для отображения блока данных щириной 210 пиксел в левой части браузера. При помощи тегов <ul>,<li>, < h2> и <а> организовано вертикальное меню, состоящее из семи пунктов (см. Рис. 5).
Рис. 5 Меню
Каждый пункт меню является ссылкой на соответствующую страницу сайта. При этом используются стили «colTwo ul» и «colTwo li li» для указания высоты, ширины, позиции и фона каждого пункта меню. Шрифт заголовка меню «Навигация» указан в стиле «colTwo h2».
· <div id="colOne">
<div class="post">
<h2 class="title">Наша история</h2> <div class="story"></div>
<div class="meta">
<blockquote>
<h1<p><span class="style1">Авиакомпания была основана в июне 1997 года, ………. </span></p></h1>
</blockquote>
</div>
</div>
</div>. В этом контейнере для отображения блока данных содержательной информации справа от навигационного меню по всей ширине браузера используются стиль «colOne». Используемые вложенные стили «colOne post» и «colOne title» позволяют отобразить заголовок «Наша история» информационного блока соответствующим шрифтом и цветом в центре над блоком данных (см. Рис. 6).
Рис. 6 Заголовок информационного блока данных
Под заголовком информационного блока, при помощи стилей «colOne story» и «colOne meta», располагается разделительная линия на голубом фоне. Ниже находится текст информационного блока, оформленный в контейнер «blockquote»«/blockquote». При помощи тегов <h1>, <p> и стилей «style1» и «colOne meta p» этого контейнера текст отображается соответствующим образом (см. Рис. 7).
Рис. 7 Информационный блок
· <div style="clear: both;"> </div>. Этот контейнер предназначен для запрета обтекания со всех сторон следующих элементов страницы и вставки пробела после информационной части страницы. Это своеобразный переход к блоку, расположенному в самом низу страницы.
· <div id="footer">
<p class="style2">Copyright c 2011 <a href="index.html">
<strong>Сайт Аэропорта</strong></a></p>
<span class="style2">></span>
</div>. В этом контейнере используются стиль «footer» для отображения блока данных высотой 26 пиксел в нижней части браузера по всей его ширине (см. Рис. 8).
Рис. 8 Нижний блок данных
Стиль позволил отобразить соответствующую картинку (голубой фон) из файла images/img2.gif, и, при помощи стилей «footer p», «footer a», «style2» и тегов <strong>,<span> разместить по центру блока соответствующие надписи и ссылку на главную страницу сайта.
заключение
Выполненная курсовая работа показывает, как при помощи языка разметки HTML и применения таблиц стилей CSS можно разработать простой, надёжный, красивый, содержательный и информативный сайт.
В данной курсовой работе были решены следующее задачи:
· разработан дизайн страниц сайта;
· подготовленные рисунки размещены на сайте;
· спроектированы и применены таблицы стилей CSS на страницах сайта;
· создано навигационное меню, карта, система ссылок на сайте;
· созданы страницы сайта на основе HTML.
Таким образом, все поставленные задачи были выполнены, а цель данной курсовой работы полностью достигнута.
Список литературы
1. Браун, Марк, Р., Хоникатт, Джерри, и др.. Использование HTML 4, 4-е издание. Специальное издание.: Пер. с англ. – М.; СПб.; К.:Издательский дом «Вильямс», 1999. – 784 с.
2. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. – СПб.: БХВ-Петербугр, 2002. – 672 с.
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Рязанский государственный радиотехнический университет
Кафедра Автоматизированных Систем Управления
УТВЕРЖДЕН
КР-02069154-135-04-11
«Разработка WEB-сайта аэропорта»
Приложение 1
Рязань 2011
Приложение 1