Разработка содержимого сайта

Каждая страница сайта находится в соответствующем 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).

Разработка содержимого сайта - student2.ru

Рис. 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). Разработка содержимого сайта - student2.ru

Рис. 3 Заголовок страницы

3. <div id="karta"><a href="karta.html">карта сайта</a></div>. В этом контейнере используется стиль «karta», который отображает под заголовком страницы в правой части браузера определённым шрифтом текст - «карта сайта» (см. Рис. 4). Использование содержимого блока <a></a> позволило отобразить ссылку на страницу сайта «карта сайта», находящуюся в файле «karta.html». Ссылка отображается с подчёркиванием.

Разработка содержимого сайта - student2.ru

Рис. 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).

Разработка содержимого сайта - student2.ru

Рис. 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).

Разработка содержимого сайта - student2.ru

Рис. 6 Заголовок информационного блока данных

Под заголовком информационного блока, при помощи стилей «colOne story» и «colOne meta», располагается разделительная линия на голубом фоне. Ниже находится текст информационного блока, оформленный в контейнер «blockquote»«/blockquote». При помощи тегов <h1>, <p> и стилей «style1» и «colOne meta p» этого контейнера текст отображается соответствующим образом (см. Рис. 7).

Разработка содержимого сайта - student2.ru

Рис. 7 Информационный блок

· <div style="clear: both;">&nbsp;</div>. Этот контейнер предназначен для запрета обтекания со всех сторон следующих элементов страницы и вставки пробела после информационной части страницы. Это своеобразный переход к блоку, расположенному в самом низу страницы.

· <div id="footer">

<p class="style2">Copyright c 2011 <a href="index.html">

<strong>Сайт Аэропорта</strong></a></p>

<span class="style2">&gt</span>

</div>. В этом контейнере используются стиль «footer» для отображения блока данных высотой 26 пиксел в нижней части браузера по всей его ширине (см. Рис. 8).

Разработка содержимого сайта - student2.ru

Рис. 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

Наши рекомендации