Файл: Создание собственного ресурса: сайта-визитки, корпоративного портала или интернет-магазина.pdf

В CSS3 осуществлена поддержка разных технических свойств устройств, на основе которых нужно загружать различные стили. Например, можно установить смартфон с максимальным расширением 640 px и для него определить определенные стилевые свойства и так для каждого устройства. Помимо этого, возможно задавать разные характеристики, такие как присутствие монохромного экрана, портретной или альбомной ориентации и т.д.

Особо стоит отметить CSS3 анимацию. CSS3 анимация в последнее время заслужила большую популярность среди web-разработчиков. С её помощью создаются эффекты, которые до этого осуществлялись с использованием скрипта и графических редакторов.

При помощи анимации стало возможным делать web-страницы живыми, что придает даже типовым страницам индивидуальность и оставляет след в сознании пользователя. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after. Полный список элементов представлен на рисунке 5.

Рисунок 5 - Список свойств, которые можно анимировать

CSS3-анимация состоит из 2х компонентов: сперва объявляется @keyframes, которое позже требуется для определения свойства animation элемента. Правило @keyframes дает возможность разрабатывать анимацию с использованием ключевых кадров — положений объекта в данный момент времени. На рисунке 6 можно увидеть реализацию @keyframes.

Рисунок 6 - Реализация @keyframes

После объявления @keyframes, мы ссылаемся на него в свойстве animation. Это показано на рисунке 7

Рисунок 7 - Свойство animation

На сайте подключена библиотека Animate.css. Animate.css — сборник превосходных кроссбраузерных CSS3 анимаций в одном месте. Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, содержит

«вход» и «выход» из анимирования элемента, а так же несложный конструктор, который даёт возможность включить в файл только требуемые эффекты.

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

Адаптивность сайта осуществлялась на основе медиа запросов. CSS3 медиа запросы позволяют задать набор стилей, которые будут применяться для различных типов устройств.

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

Медиазапрос состоит из правила @media, которое определяет тип носителя путем установления какой-то проверяемой характеристике носителя в данный момент времени. Вид такого запроса показан на рисунке 8.

Стили указанного медиазапроса, находящиеся с фигурных скобках, применяются тогда, когда ширина области просмотра не превышает 600px. Если увеличивается, браузер игнорирует стили указанного медиазапроса.

Рисунок 8 - Медиазапрос на максимальную ширину экрана 600 px

Чтобы сделать дизайн сайта адаптивным, нужно установить различные

стили для всех возможных разрешений экранов, используя контрольные точки. Как это выглядит показано на рисунке 9.

Рисунок 9 - Адаптивный дизайн при помощи медиазапроса

ЗАКЛЮЧЕНИЕ

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

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

Во второй главе осуществлен выбор программных и аппаратных средств и определены необходимые для конкретного проекта.

В третьей главе поэтапно показан процесс создания макетов будущего сайта. Установлены основные этапы разработки дизайна и вёрстки сайта.

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Якоб Нильсен. Веб-дизайн. — [Текст] СПб: Символ-Плюс, 2006, 512с
2. Иоханнес Иттен. Искусство формы. Мой форкурс в Баухаузе и других школах. - [Текст]М.: Издатель Дмитрий Аронов, 2011, 136с.
3. Иоханнес Иттен. Искусство цвета. - [Текст] М.: Издатель Дмитрий Аронов, 2015, 96с.
4. Стивен Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание - [Текст] СПб: Символ - Плюс, 2008, 224с.
5. Алан Купер об интерфейсе. Основы проектирования взаимодействия. — Символ-Плюс, 2009, 687с.
6. Web студия: задачи, функции, перспективы - http://www.ldi.ru/web- studiya-zadachi-funktsii-perspektivy.html
7. Rambler&Co (Компания). Сетки для адаптивного дизайна. - [Электронный документ] (https://habrahabr.ru/company/rambler-co/blog/261679/), 2015
8. Данил Фимушкин. Модульная сетка в веб-дизайне. - [Электронный документ] (http://fimushkin.ru/work/modulnaya-setka/), 2015
9. Кинзябулатов Рамиль. Landing page. Что такое. Из чего состоит. Виды. Процесс работы. - [Электронный документ] (https://habrahabr.ru/post/273917/), 2015
10. Я люблю ИП (Компания). 7 правил создания красивых интерфейсов - [Электронный документ] (https://habrahabr.ru/company/iloveip/blog/261857/), 2015
11. Кожинова Ольга. 8 распространённых ошибок в дизайне (и как их избежать) - [Электронный документ] (https://habrahabr.ru/post/260605/), 2015
12. Seo Design. 11 веб-дизайн трендов на 2016 год - [Электронный документ] (http://seo-design.net/trendy-web/web-design-trends-2016), 2016
13. Seo Design.Цвета в Web дизайне: колор-тенденции (яркие тона) - [Электронный документ] (http://seo-design.net/trendy-web/bright-colors-in- web-design), 2015
14. Андрей Тарицын. Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? - [Электронный документ] (https://habrahabr.ru/post/148224/), 2012
15. Frontender Magazine. Адаптивно-отзывчивый: разбираемся в терминологии. - [Электронный документ] (http://frontender.info/adaptive- vs-responsive-terminology/), 2013
16. Carrot quest. Капельный маркетинг. Создание цепочек сообщений и продвинутых сценариев продаж. - [Электронный документ] (https://habrahabr.ru/company/carrotquest/blog/299352/), 2016