Пояснительная записка (WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения), страница 5

2020-10-05СтудИзба

Описание файла

Файл "Пояснительная записка" внутри архива находится в следующих папках: 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 нормальной форме нельзя, а хранить в базе данных необходимо.

После нормализации таблиц получены следующие таблицы:

– таблица «сотрудники» хранит данные о сотрудниках;

– таблица «вопросы директору» хранит отправленные вопросы студентов, абитуриентов, школьников, родителей через форму обратной связи;

– таблица «заявки на регистрацию в Международный клуб» хранит заявки на регистрацию в данном клубе;

– таблица «новости» хранит данные о постах;

– таблица «блоги» хранит данные о блогах студентов;

– таблица «пользователи» хранит данные о пользователях для входа в панель администратора;

Свежие статьи
Популярно сейчас
Зачем заказывать выполнение своего задания, если оно уже было выполнено много много раз? Его можно просто купить или даже скачать бесплатно на СтудИзбе. Найдите нужный учебный материал у нас!
Ответы на популярные вопросы
Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
Отзывы студентов
Ставлю 10/10
Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
Лучшая платформа для успешной сдачи сессии
Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
Студизба ван лав ❤
Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
Отличный сайт
Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
Маленький отзыв о большом помощнике!
Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
Студ. Изба как крупнейший сборник работ для студентов
Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
Спасательный островок
Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
Всё и так отлично
Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
Отзыв о системе "Студизба"
Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
Отличный помощник
Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
Спасибо за шикарный сайт
Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
Популярные преподаватели
Добавляйте материалы
и зарабатывайте!
Продажи идут автоматически
5288
Авторов
на СтудИзбе
417
Средний доход
с одного платного файла
Обучение Подробнее