Пояснительная записка (WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения), страница 5
Описание файла
Файл "Пояснительная записка" внутри архива находится в следующих папках: WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения, Ким Е.Д. Документ из архива "WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения", который расположен в категории "". Всё это находится в предмете "дипломы и вкр" из 8 семестр, которые можно найти в файловом архиве ДВГУПС. Не смотря на прямую связь этого архива с ДВГУПС, его также можно найти и в других разделах. .
Онлайн просмотр документа "Пояснительная записка"
Текст 5 страницы из документа "Пояснительная записка"
3.2 Верстка страниц
После продуманного дизайна страниц и палитры цветов для элементов следует приступить к верстке макетов страниц.
Как говорилось ранее, верстка страниц производится с помощью языка разметки HTML и каскадных таблиц стилей CSS.
Структура web-страницы выглядит следующим образом:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="">
<script>
</script>
</head>
<body>
тело страницы
</body>
</html>
где тег <html> обозначает начало и конец документа (</html>),
<head> – шапка документа, в котором располагаются такие теги как <meta>, <title>, <link>, <script> и некоторые другие.
Тег <meta> предоставляет информацию про документ HTML. Мета данные не будут отображены на странице.
Мета данные обычно используют для определения описания страницы, ключевых слов, автора документа...
Тег <meta> всегда находится в шапке документа.
Мета данные могут использоваться браузерами, поисковиками, и другими веб-сервисами.
В тегах <script></script> содержится JavaScript код. Данный тег понадобится далее.
Тег <link> позволяет подключать стили (файл каскадных таблиц стилей).
Тег <body> является телом документа – в нем располагается основная информация: header, footer, навигация и так далее.
Поскольку выбрана блочная верстка, то в теле документа все элементы будут располагаться в нескольких больших блоках (разделах, все строится с помощью тега <div>).
С помощью HTML будет задана структура документа.
Пример кода панели навигации документа можно увидеть ниже:
<nav>
<div class="drop_menu1">
<div>Об институте</div>
<ul id="about_institute">
<li><a href="?option=history"><p>История</p></a></li>
<li><a href="?option=kafedra"><p>Кафедра</p></a></li>
</ul>
</div>
<div class="drop_menu2">
<div>Абитуриентам</div>
<ul id="abiturient">
<li><a href="?option=rus_abit"><p>Российским абитуриентам</p></a></li>
<li><a href="http://www.dvgups.ru/inostrannym-grazhdanam6"><p>Иностранным гражданам</p></a></li>
</ul>
</div>
<div class="drop_menu5">
<div>Международная деятельность</div>
<ul id="international_activity">
<li><a href="?option=festu_int_club"><p>FESTU International Club</p></a></li>
<li><a href="?option=obmen_programms"><p>Программа международной мобильности</p></a></li>
<li><a href="?option=sblog"><p>Блог студента за границей</p></a></li>
</ul>
</div>
<div class="menu_cell">
<a href="?option=contacts"><div>Контакты</div></a>
</div>
<div class="sign_in">
<a href="?option=admin"><div>Войти</div></a>
</div>
</nav>
С помощью CSS структуре документа придается внешний вид.
Результат изображен на рисунке 9.
Рисунок 9 – Панель навигации
Далее необходимо сверстать все блоки главной страницы. Рисунки блоков главной страницы, а так же основные типы сверстанных макетов остальных страниц представлены ниже (рисунки 10-18).
Рисунок 10 – Блок приветствия
Рисунок 11 – Блок приветствия директора
Рисунок 12 – Блок «10 причин поступить в ИМС
Рисунок 13 – Блок «Это интересно»
Рисунок 14 – Блок новостей института
Рисунок 15 – Страница истории института
Рисунок 16 – Страница истории института
Рисунок 17 – Страница «Задать вопрос директору»
Рисунок 18 – Страница «Панель администратора»
Алгоритм реализации функционала панели администратора описан в следующих главах.
В ходе верстки использованы возможности HTML5 и CSS3, такие как:
– тег <video>, который позволяет разместить видео средствами HTML5. Видео требуется так же определенного формата (.mp4 и др.). Для подготовки видео использована программа Adobe Premiere Pro CC;
– специальный теги <nav>, <header> и др., позволяющие браузерам нового поколения быстрее ориентироваться в документе;
– web-формы для ввода различных новых типов: email, phone, number (позволяет ввести типизацию внутри html-формы, а так же проверку на правильность);
– свойства CSS3, такие как border-radius, background-image, word-wrap;
Код с использованием тега <video> приведен ниже:
<video src="videos/front_video.mp4" loop autoplay></video>
Атрибуты данного тега обозначают следующее:
– видео располагается по следующему источнику: videos/front_video.mp4;
– видео зациклено;
– видео начинает воспроизводиться автоматически после загрузки страницы.
Код с использованием новых типов полей для ввода в web-формах:
<div class="punkt">Электронная почта</div> <br />
<input type="email" required placeholder="E-mail" class="input_title" name="email_festu_reg" />
3.3 Реализация динамики сайта
На данном этапе имеются html-документы всех страниц. Далее необходимо придать динамики web-страницам.
Как описывалось ранее, динамика будет придаваться с помощью языка JavaScript, а так же технологиях, основанных на нем.
На данном этапе произведено следующее:
– изменение CSS-свойств элементов (создание анимации) в зависимости от положения пользователя относительно страницы;
– добавление модуля галереи «Owl carousel»;
Для того, чтобы добавить анимацию с помощью фреймворка jQuery необходимо написать код в тегах <script></script>.
Код добавления анимаций представлен ниже.
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/scrollreveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.drop_menu1').hover(function(){
$('#about_institute').stop().animate({'opacity': '1'}, 100);},
function() {$('#about_institute').stop().animate({'opacity': '0'}, 100);
});
$('.drop_menu2').hover(function(){
$('#abiturient').stop().animate({'opacity': '1'}, 100);},
function() {$('#abiturient').stop().animate({'opacity': '0'}, 100);
});
$('.drop_menu3').hover(function(){
$('#student').stop().animate({'opacity': '1'}, 100);},
function() {$('#student').stop().animate({'opacity': '0'}, 100);
});
$('.drop_menu4').hover(function(){
$('#graduate').stop().animate({'opacity': '1'}, 100);},
function() {$('#graduate').stop().animate({'opacity': '0'}, 100);
});
$('.drop_menu5').hover(function(){
$('#international_activity').stop().animate({'opacity': '1'}, 100);},
function() {$('#international_activity').stop().animate({'opacity': '0'}, 100);
});
window.sr = ScrollReveal().reveal('.reason_container, .whats_interesting_text, .whats_interesting_text2', { duration: 1000, easing : 'ease-in-out', rotate : { z: 3 }, distance : '90px'}, 200);
});
</script>
Функция $(document).ready() выполняется только тогда, когда загрузится вся web-страница.
Сначала идет подключение необходимых библиотек (jQuery, animate, scrollreveal), с помощью которых будет производиться анимация.
С помощью функции hover() реализуется событие при наведении указателем мыши на какой-либо объект web-страницы. В данном случае при наведении на пункты панели навигации появляются соответствующие им подпункты; появление подпунктов реализовано с помощью библиотеки animate и одноименной функции animate() (результат представлен на рисунке 19).
Рисунок 19 – Придание динамики панели навигации
Далее с помощью библиотеки ScrollReveal необходимо создать анимацию элементов в зависимости от прокрутки пользователя.
Данную работу возьмет на себя функция ScrollReveal(), аргументами которой являются названия классов и идентификаторов элементов, к которым необходимо применить данную анимацию, длительность анимации, стиль анимации, параметры вращения, а также дистанцию между прокруткой пользователя и расположением элемента, при которой анимация будет запускаться. Анимацию при прокрутке можно увидеть на рисунке 20.
Рисунок 20 – Анимация при прокрутке
Так же с помощью модуля OwlCarousel необходимо подключить слайдер.
Результат можно увидеть на рисунке 21.
Рисунок 21 – Добавленный модуль-слайдер
Таким образом, на добавлена анимация, «оживляющая» web-сайт. Это очень важный этап, поскольку интерактивность и динамика сайта является важным аспектом и влияет на посещаемость и впечатления от сайта, а значит и на имидж института.
3.4 Создание базы данных
3.4.1 Нормализация отношений
Для нормализации отношений до первой нормальной формы (где это возможно) необходимо сделать значения всех атрибутов сущности атомарными (в одной ячейке – одно значение).
Например, сущность «сотрудники» имеет атрибут «ФИО». Однако данная форма не подходит под определение. Необходимо разбить данный атрибут на три атрибута – фамилия, имя и отчество.
Данную операцию необходимо проделать со всеми отношениями. Исключением станут некоторые атрибуты, например, «вопрос директору», как правило, будет содержать несколько значений, однако привести к 1 нормальной форме нельзя, а хранить в базе данных необходимо.
После нормализации таблиц получены следующие таблицы:
– таблица «сотрудники» хранит данные о сотрудниках;
– таблица «вопросы директору» хранит отправленные вопросы студентов, абитуриентов, школьников, родителей через форму обратной связи;
– таблица «заявки на регистрацию в Международный клуб» хранит заявки на регистрацию в данном клубе;
– таблица «новости» хранит данные о постах;
– таблица «блоги» хранит данные о блогах студентов;
– таблица «пользователи» хранит данные о пользователях для входа в панель администратора;
