Тз для верстки сайта на wordpress

Тз для верстки сайта на wordpress
Сверстать отдельную версию для десктопов, версию для планшетов, версию для
мобильных телефонов. Все три макета прорисованы.
Всего страниц: Главная, Анонсы, Новости, Выпускники, О Магу, Содержание обучения,
Фото и видео, Контакты, Преподаватели, Трудоустройство, Цифры и факты, Спецкурсы.
Отдельные версии для 3 устройств сделать только для страниц: Главная, новости, анонсы,
выпускники.
Анимация отображается только на десктопной версии. На планшетах и мобильных
телефонах – нет.
Все фоны тянутся по ширине до 1920px.
Картинки оптимизировать так, чтобы сайт загружался быстро.
Обеспечить легкое добавление слайдов и текста для слайдов через cms.
Обеспечить легкое добавление новостей и анонсов через cms.
Обеспечить легкое добавление выпускников через cms.
На всех страницах ниже заголовка слева сделать модуль социальных сетей addthis, как на
сайте kolteko.com.
Сделать Фавикон из логотипа.
Главная страница:
При нажатии на кнопку поступить – вылезает форма обратной связи с прикреплением
файлов. Все поля должны проверяться на ввод данных, при успешной отправкке – окно –
информация успешно отправлена.
Выше кнопки поступить – модуль с социальными кнопками как на сайте kolteko.com
При движении мышью задний фон флаг ходит на 20-30px как мышь.
При нажатии на кнопку расписание - скачивается файл с расписанием.
Поиск по сайту ищет весь текст который есть на сайте и показывает страницы с
результатами.
!За место кнопки заказать звонок в шапке и футере – кнопка Задать вопрос.
Должны корректно работать «хлебные крошки»
Меню – будет многоуровневое. При наведении – появляется синяя рамка и вниз
открываются все подменю этого меню. При наведении на три полоски в меню – ховер
синим цветом. При клике – отображаются все пункты меню и подменю – пример на сайте
http://synergy.ru/
Слайдер – текст с фоном выезжает слева направо. Стрелочки изначально синие, при
наведении подсвечиваются красным.
Анонсы – само слово кликабельно – переходит на страницу со всеми анонсами. При
наведении на строку с анонсом – заливка круга меняется на белую, цифра становится
синей, текст меняется местами с цифрой. Заполнить последние 5 Анонсов с сайта
magu.psu.ru.
Новости - само слово кликабельно – переходит на страницу со всеми новостями. При
наведении на строку с новостью – заливка прямоугольника меняется на белую, цифра
становится синей, текст меняется местами с цифрой. Заполнить последних 5 новостей с
сайта magu.psu.ru.
5 блоков со ссылками на страницы – при наведении синяя заливка становится красной.
При клике – переход на соответствующую страницу.
Блок образовательная программа Магу – слайдер состоящий из 5 слайдов. Автоматически
пролистывается. При наведении синяя заливка прямоугольника становится красной, и
картинка немного приближается к нам. Заголовок и фото для остальных 2х слайдеров
взять со страницы
http://magu.psu.ru/%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0
%B8%D0%B5%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F/%D0%BE%D0%B1%D1%
80%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D
0%B0%D1%8F-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0
При наведении на стрелочку – заливка становится красного цвета.
Блок Магу работает при поддержке – все как на макете.
Блок дисциплины обучения – слева блок с захватом информации. Посередине слайдер с
предметами. Пролистывается автоматически. Полное количество предметов здесь https://yadi.sk/i/JnIk407ZhD5ex
При наведении на стрелочку – она заливается красным цветом. Справа форма Задать
вопрос(а не заказать звонок).
Блок Фотогалерея – на макете сделано узко – сделать по ширине на весь экран. Темные
блоки справа и слева убрать. Фотографии взять из группы - https://vk.com/magu_perm
Блок Мы в социальных сетях - слева блок с подпиской на паблик вконтакте https://vk.com/magu_perm, посередине последние записи стены как на сайте
justlike.pro/seo.
Футер – аналогично шапке сайта, добавляется блок заказать подобный сайт – при
наведении фон заливается на синий, при клике – ссылка на justlike.pro.
Страница Анонсы:
Стандартно по макету. Анонсов на одну страницу – 5. Далее нужно перейти на страницу 2,
3 и тд. Справа подписка на паблик вконтакте https://vk.com/magu_perm
Страница Новости:
Стандартно по макету. Новостей на одну страницу 5. Далее нужно перейти на страницу 2,
3 и тд. Справа подписка на паблик вконтакте https://vk.com/magu_perm
Страница Выпускники:
При клике на кнопку Я выпускник, хочу добавить информацию – отображается форма с
захватом информации и прикреплением файлов.
Страница О Магу:
Взять и вставить информацию отсюда, брать только текст и фотографии. Соблюдать
форматирование текста, выделять жирным нужную информацию:
http://magu.psu.ru/%D0%BE-%D0%BC%D0%B0%D0%B3%D1%83%D0%BF%D0%B5%D1%80%D0%BC%D1%81%D0%BA%D0%BE%D0%B3%D0%BE%D0%BA%D1%80%D0%B0%D1%8F/%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D0%
B0%D1%8F%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8F
Страница Содержание обучения:
Сама страница содержит информацию – взять с сайта
http://magu.psu.ru/%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0
%B8%D0%B5-%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F
Содержит 3 подменю – Образовательная программа, Формат работы, Проекты и
спецкурсы.
Взять информацию с сайта magu.psu.ru
Страница Фото и Видео:
Сама страница фото и видео некликабельна.
Содержит 2 подменю – Фото, Видео
Страница Фото – Сделать несколько фотогалерей с названием альбома, фото взять из
паблика вк - https://vk.com/magu_perm
Страница Видео – Расположить по 2 видеозаписи в строчку, сверху написать название
видеозаписи, взять с сайта magu.psu.ru
Страница Контакты:
Карта тянется по ширине экрана 2 гисовская, слева на фоне карты контактная
информация:
Дирекция МАГУ
(342) 203-00-53
ул. Генкеля 5а, корпус №3, каб. 646 (3 этаж)
Страница Преподаватели:
Текстовая информация – взять отсюда http://magu.psu.ru/%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0
%B8%D0%B5%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F/%D0%BF%D1%80%D0%
B5%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B8
Страница Трудоустройство:
Взять полностью информацию отсюда - http://magu.psu.ru/%D0%BE%D0%BC%D0%B0%D0%B3%D1%83%D0%BF%D0%B5%D1%80%D0%BC%D1%81%D0%BA%D0%BE%D0%B3%D0%BE%D0%BA%D1%80%D0%B0%D1%8F/%D1%82%D1%80%D1%83%D0%B4%D0%BE%D1%83%D1%
81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE-
%D0%B2%D1%8B%D0%BF%D1%83%D1%81%D0%BA%D0%BD%D0%B8%D0%BA%D0%BE%D0%
B2
Страница Цифры и факты:
Текстовую информацию полностью взять отсюда - http://magu.psu.ru/%D0%BE%D0%BC%D0%B0%D0%B3%D1%83%D0%BF%D0%B5%D1%80%D0%BC%D1%81%D0%BA%D0%BE%D0%B3%D0%BE%D0%BA%D1%80%D0%B0%D1%8F/%D1%86%D0%B8%D1%84%D1%80%D1%8B-%D0%B8%D1%84%D0%B0%D0%BA%D1%82%D1%8B