Файл: Разработка web-страницы туристического предприятия (Статически и динамические сайты).pdf

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 29.06.2023

Просмотров: 122

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

- body { margin: 2em }

- body { margin: 1em 2em }

- body { margin:1em 2em 3em }

- body {margin-top: 1em; margin-right: 2em;}

CSS поддерживает 4 вида позиционирования:

- статическое (static);

- абсолютное (absolute);

- относительное (relative);

- фиксированное (fixed).

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

Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей [22].

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

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

Плавающее размещение не является схемой позиционирования. Оно было введено как средство, позволяющее получить обтекание элементов, но не для создания макета страницы [32].

Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:

img {float: right; padding: 15px;}

Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

После создания разметки и применения стилей, внешний вид вебстраницы прибрел вид, показанный на рис. 16 - 18.

Рисунок 16 – Внешний вид веб-страницы

Рисунок 17 – Внешний вид веб-страницы

Рисунок 17 – Внешний вид веб-страницы


Вывод по 2 главе

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

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

Заключение

Все методы разработки веб-сайтов можно условно поделить на две группы. К первой группе относятся методы создания сайтов ручного написания с использованием языка разметки HTML и различных языков программирования. Для написания статического сайта достаточно сочетания HTML и CSS. Но если необходим более сложный, динамический сайт, то тут подключают языки программирования. Основными языками программирования, которые наиболее часто используются для разработки сайтов, являются PHP, Javascript, APS.NET. В динамических веб-сайтах, структура данных хранится отдельно от информационных данных, причем информация заполняется в соответствии со структурой при каждом запросе пользователя. Вследствие этого при изменении одной структуры, эти изменения повлияют на все веб-страницы сайта.

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

В результате работы была создана статическая веб-страница для туристического предприятия.

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

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

Список использованной литературы


  1. Вальчевский А. С. Технология системы управления контентом [Электронный ресурс] / А. С. Вальчевский, Е. Б. Никитин // http://belisa.org.by/pdf/PTS2005/219-220.pdf (дата обращения 19.09.2016)
  2. Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS) / С. Г. Горнаков. – М.: ДМК Пресс, 2009. – С. 20 – 31.
  3. Грачев А. Создаем свой сайт на WordPress: быстро, легко и бесплатно. Работа с CMS WordPress 3 / А. Грачев — СПб.: Питер, 2011. — 288 с.
  4. Дунаев В. HTML, скрипты и стили / В. Дунаев. - СПб: БХВ-Петербург, 2011- 816 с.
  5. Заболеева-Зотова А.В. Лингвистические системы: модели, методы, Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова - СПб: НИУ ИТМО, 2012. – 70 с.
  6. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова - СПб: НИУ ИТМО, 2012. – 70 с.
  7. Кисленко Н. П. HTML. Самое необходимое / Н. П. Кисленко. - СПб: БХВ-Петербург, 2012 – 352 с.
  8. Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. - СПб: Питер, 2012 – 304 с.
  9. Котляров И. Д. Комплекс интернет-маркетинга / И. Д. Котляров // Интернет маркетинг. - 2012. - № 5. - С. 288–294.
  10. Круг С. Как сделать сайт удобным. Юзабилити по методу Стива Круга / С. Круг – СПб.: Питер, 2010. – 208 с.
  11. Купер А. Алан Купер об интерфейсе. Основы проектирования взаимодействия / Алан Купер. – Пер.с англ. – СПб.: Символ-Плюс, 2010. – 688 с.
  12. Курзыбова Я. В. Средства создания динамических web-сайтов: учеб. пособие / Я. В. Курзыбова. – Иркутск: Изд-во ИГУ, 2011. – 121 с.
  13. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. - М.: Вильямс, 2011 – 272 с.
  14. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
  15. Методы верстки сайтов [Электронный ресурс] / Режим доступа: http://webformyself.com/metody-verstki-sajtov/ (Дата обращения: 18.11.2016).
  16. Муравьев А. Технические аспекты веб-разработки [Электронный ресурс] / А. Муравьев, А. Григорьев. – Режим доступа: http://netology.ru/files/2930/Технические аспекты веб-разработки.pdf (дата обращения 16.10.2016)
  17. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. - Ульяновск: УлГТУ, 2014. – 91 c.
  18. Паршенцев А. А. Проблема и перспективы развития электронных магазинов / А. А. Паршенцев // Маркетинг в Украине и за рубежом. - 2000. - № 3. - С. 84-89.
  19. Примеры красивого оформления списков [Электронный ресурс] / Режим доступа: http://html5book.ru/krasivoe-oformlenie-spiskov/ (Дата обращения: 18.11.2016).
  20. Принципы анимации для веба [Электронный ресурс] / Режим доступа: https://habrahabr.ru/company/htmlacademy/blog/255583/ (Дата обращения: 18.11.2016).
  21. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. - Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 19.10.2016)
  22. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. - 2011 – 68 с.
  23. Румянцев Д. Интернет-маркетинг от А до Я / Д. Румянцев. – М: АСТ, 2014. – 350 с.
  24. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  25. Современные формы на HTML5 и CSS3 [Электронный ресурс] / Режим доступа: http://webformyself.com/sdelajte-sovremennye-formy-s-pomoshhyu-css3-i-validacii-html5/ (Дата обращения: 18.11.2016).
  26. Станке У. Р. Microsoft Windows Server® 2012. Справочник администратора: Пер. с англ. У. Р. Станке— М.: Издательство «Русская редакция»; СПб.: «БХВ-Петербург», 2014. — 688 с.
  27. Стилизация списков с помощью псевдо-элементов [Электронный ресурс] / Режим доступа: http://ruseller.com/lessons.php?id=1479&rub=2 (Дата обращения: 18.11.2016).
  28. Топ 10 Конструкторов сайтов [Электронный ресурс] / Режим доступа: http://sitebuilders.club (Дата обращения: 18.11.2016).
  29. Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
  30. Фролов А. Практика применения PHP, Apache и MySQL для активных web–сайтов/ Г. Фролов. – М.: Издательско–торговый дом “Русская Редакция”, 2002. – 576 с.
  31. Шапошников И. Профессиональное PHP программирование/ И. Шапошников. - СПб.: Питер, 2007. – 192 c.
  32. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
  33. CSS3 анимация для сайта [Электронный ресурс] / Режим доступа: http://beloweb.ru/javascript-jquery/css3-animatsiya-dlya-sayta.html (Дата обращения: 18.11.2016).

Приложения

Исходный код веб-страницы

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Веб-страница туристисческого сайта">

<title>TourHouse - Туристические услуги</title>

<!-- подключение стилей бутстрап -->

<link href="css/bootstrap.css" rel="stylesheet">

<!-- подключение файла стилей -->

<link href="css/heroic-features.css" rel="stylesheet">

</head>

<body>

<!-- Навигация -->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Навигация</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">TourHouse</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

</div>

</div>

</nav>

<div class="container">

<header class="jumbotron hero-spacer">

<h2>Добро пожаловать на сайт TourHouse!</h2>

<p>Экскурсионные туры в Европу, отдых за границей, цены. Выбрав экскурсионные туры, Вы получите интересный,

насыщенный и комфортный отдых за границей.</p>

<p><img src="images/jumbotron.jpg" class="img-responsive center-block"></p>

<p><a class="btn btn-primary btn-large">Выбрать тур!</a>

</p>

</header>

<hr>

<div class="row">

<div class="col-lg-12">

<h3>Наши туры</h3>

</div>

</div>

<div class="row text-center">

<div class="col-md-3 col-sm-6 hero-feature">

<div class="thumbnail">

<img src="images/europe.jpg

" alt="">

<div class="caption">

<h3>Европа</h3>

<p>Интересные туры по странам Европы</p>

<p>

<a href="#europe" class="btn btn-primary">Заказать!</a> <a href="#europe"

class="btn btn-default">Читать</a>

</p>

</div>

</div>

</div>

<div class="col-md-3 col-sm-6 hero-feature">

<div class="thumbnail">

<img src="images/america.jpg" alt="">

<div class="caption">

<h3>Америка</h3>

<p>Занимательные туры по странам Африки</p>

<p>

<a href="#america" class="btn btn-primary">Заказать!</a> <a href="#america"

class="btn btn-default">Читать</a>

</p>

</div>

</div>

</div>

<div class="col-md-3 col-sm-6 hero-feature">

<div class="thumbnail">

<img src="images/asia.jpg" alt="">

<div class="caption">

<h3>Азия</h3>

<p>Страны Азии, прекрасное место для отдыха</p>

<p>

<a href="#asia" class="btn btn-primary">Заказать!</a> <a href="#asia" class="btn btn-default">Читать</a>

</p>

</div>

</div>

</div>

<div class="col-md-3 col-sm-6 hero-feature">


<div class="thumbnail">

<img src="images/africa.jpg" alt="">

<div class="caption">

<h3>Африка</h3>

<p>Очень интересные и прекрасные места</p>

<p>

<a href="#africa" class="btn btn-primary">Заказать!</a> <a href="#africa"

class="btn btn-default">Читать</a>

</p>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-lg-12">

<div class="thumbnail">

<div class="row text-center">

<h4><a name="europe">Туры по Европе</a></h4>

</div>

<img class="img-responsive img-rounded center-block" src="images/europe.jpg">

<h5 class="text-center">Экскурсионные туры по Европе и отдых за границей</h5>

<p class="text-info text-justify">Выбрав экскурсионные туры, Вы получите интересный, насыщенный и

комфортный отдых за границей. Ночью в

наших турах вас ждут самые уютные европейские отели с прекрасным сервисом и аппетитными блюдами. Из

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

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

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

этого города романтиков. Впрочем, туры во Францию – это не только Эйфелева башня, Елисейские поля,

изумительная кухня и Мулен Руж. Это еще и экскурсионные туры на солнечный Лазурный Берег, ароматные

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

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

остаются самыми вкусными воспоминаниями о турах в Европу.</p>

<h5 class="text-center"> Отдых за границей, о котором вы мечтали</h5>

<p class="text-info text-justify">Пройтись по узким улочкам латинского квартала в Париже, проехаться на

велосипеде по Монмартру, а

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

Венского кофе… Попробовать шоколадные трюфели в Бельгии и увидеть яркие карнавалы Испании, посетить

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

музыку в Гранд Опера, а может быть, просто отдохнуть в шумном берлинском клубе или перехватить бокал

хорошего пива в компании старого и мудрого баварца – такой отдых может стать не мечтой, а

реальностью, если вы выберете туры от компании «Туртранс-Вояж». Туры в Европу – это не просто

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