Файл: «Способы оформления web-страниц приложения (CSS, Темы)».pdf

Рис. 21. Структура стиля для создания меню из маркированного списка

Рис. 22. Результат выполнения созданного стиля

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

Глава 3 Использование CSS для макета страниц

3.1 Разметка страницы

Flexbox предоставляет следующие возможности:

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

На данный момент flexbox не поддерживают следующие браузеры: Internet Explorer 9, 8 и более ранних версий [3].

Что же касается всех остальных браузеров, чью поддержку хотелось бы получить (и практически всех браузеров мобильных устройств), то у вас есть возможность воспользоваться большинством, если не всеми свойствами Flexbox.

Структура Flexbox имеет вид, который показан на рисунке 23:

Рис. 23. Структура flexbox

Данная структура будет применена для всех современных браузеров. В том случае, если необходимо получить поддержку со стороны Android-браузеров, а также IE 10, тогда код будет иметь вид показанный на рисунке 24.

Рис. 24. Структура flexbox для более ранних версий браузеров

Необходимость написания всего этого обусловлена тем, что в последние несколько лет во всех браузерах стали доступны экспериментальные версии новых функциональных возможностей, но с использованием так называемого префикса производителя (vendor prefix). У каждого производителя имелся собственный префикс. Например, -ms- для Microsoft, -webkit- для WebKit, -moz- для Mozilla и т. д [4].

Для каждой новой функциональной возможности это означало необходимость написания нескольких версий одного и того же свойства, сначала в форме версий с префиксами, а в конце – в форме официальной версии консорциума W3C.

Flexbox имеет четыре основных характеристик:

• направление (direction);
• выравнивание (alignment);
• определение порядка (ordering);
• и динамическое изменение (flexibility).

Мы рассмотрим все эти характеристики и их взаимоотношения на нескольких примерах. Это намеренно простые примеры, касающиеся простого перемещения блоков и их содержимого и позволяющие понять принципы работы Flexbox [10].

Текст, безупречно выровненный по вертикали.

Разметка выглядит следующим образом:

<div class="CenterMe">

Hello, I'm centered with Flexbox!

</div>

А вот полное CSS-правило, придающее стиль этой разметке:

.CenterMe {

background-color: indigo;

color: #ebebeb;

font-family: 'Oswald', sans-serif;

font-size: 2rem;

text-transform: uppercase;

height: 200px;

display: flex;

align-items: center;

justify-content: center;

}

Результат, показан на рисунке 25.

Рис. 25. Выровненный по вертикали

Большинство пар «свойство – значение» в этом правило просто устанавливают цветовые решения и размер шрифта. Нам интересны лишь три свойства:

.CenterMe {

/* другие свойства */

display: flex;

align-items: center;

justify-content: center;

}

Рассмотрим, что делает каждое из них.

• display: flex – простая настройка элемента на его принадлежность к Flexbox.
• align-items – это свойство приводит к выравниванию элементов внутри Flexbox по поперечной оси.
• justify-content – это свойство задает выравнивание содержимого по центру главной оси. Что касается строки Flexbox, то об этом свойстве можно думать, как о кнопке в текстовом процессоре, выравнивающей текст по левому или правому краю, или по центру [7].

3.2 Адаптивный дизайн

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

Понятие адаптивного дизайна, наряду с понятием «отзывчивого дизайна» (responsive design), возникло после 2010 года. Его идея состоит в выработке таких приемов верстки, которые видоизменяли бы вид web-страницы в зависимости от формата устройства, на котором она отображается [14].

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

CSS3 состоит из набора «привинчиваемых» модулей. Медиазапросы как раз представляют собой такой CSS3-модуль. Они позволяют нацеливать специфические CSS-стили в зависимости от возможностей по отображению информации, имеющихся у того или иного устройства. Использование лишь нескольких строк CSS-кода, моет привести к изменению способа отображения содержимого. В медиазапросах принимают участие такие параметры, как ширина области просмотра, соотношение сторон экрана, ориентация [8].

Без медиазапросов невозможно нацелить отдельные CSS-стили на определенные характеристики устройств. Ярким примером такой характеристики является ширина области просмотра.

При создании адаптивных web-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов устройств (device-width). Остальные характеристики устройств проверяются очень редко.

Сначала нужно создать код CSS для самых скромных по размеру окон просмотра, а затем последовательно добавлять в медиазапросах изменения к различным элементам. Для примера рассмотрим код, который представлен ниже [9].

.rule {

/* Стили для обычных окон просмотра */

}

@media (min-width: 40em) {

.rule {

/* Изменения для окон просмотра среднего размера */

}

}

@media (min-width: 70em) {

.rule {

/* Изменения для более крупных окон просмотра */

}

}

Для того, чтобы понять, как работает медиазапрос, рассмотрим конкретный пример. На рисунке 26, показана структура css-файла.

Рис. 26. Структура CSS-файла

На рисунке 27, показан результат выполнения одного из медиазапросов.

Рис. 27. Результат выполнения медиазапроса

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

@media screen and (min-width: 960px) {

body {

background-color: red;

}

}

На рисунке ?, показан результат выполнения следующего медиазапроса:

@media screen and (min-width: 768px) {

body {

background-color: orange;

}

}[4]

Рис. 28. Выполнение медиазапроса (min-width: 768px)

На рисунке 29, показан результат выполнения медиазапроса:

@media screen and (min-width: 550px) {

body {

background-color: yellow;

}

}

Рис. 29. Выполнение медиазапроса (min-width: 550px)

На рисунке 30, показан результат выполнения медиазапроса:

@media screen and (min-width: 320px) {

body {

background-color: green;

}

}

Рис. 30. Выполнение медиазапроса (min-width: 320px)

Для условной загрузки таблиц стилей в существующую таблицу стилей можно использовать также CSS-конструкцию @import. Например, следующий код импортирует таблицу стилей под названием phone.css при условии, что устройством является экран с максимальной шириной окна просмотра 360 пикселов:

@import url("phone.css") screen and (max-width:360px);

Следует помнить, что при использовании CSS-конструкции @import код добавляется к HTTP-запросам, что влияет на скорость загрузки, поэтому данный метод нужно использовать осмотрительно [5].

3.3 Виды препроцессоров

CSS препроцессор (от англ. CSS preprocessor) – это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

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

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

• читабельность для человека;
• структурированность и логичность;
• производительность.

Основными препроцессорами являются:

• Less;
• Sass (SCSS);
• Stylus.

Самый популярный на данный момент является Less препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript. Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов [11].

Самым мощным из CSS-препроцессоров является Sass. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby. Имеет больше возможностей в сравнении с Less.

Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Данный препроцессор имеет два синтаксиса:

• Sass (Syntactically Awesome Style Sheets) – упрощённый синтаксис CSS, который основан на идентации. На сегодня он считается устаревшим.
• SCSS (Sassy CSS) – основан на стандартном для CSS синтаксисе.

Самым перспективным CSS-препроцессор является Stylus. Он основан в 2010 году TJ Holowaychuk. Данный препроцессор намного гибче чем Sass, написанный на JavaScript. В данном препроцессоре присутствует упрощённый вариант синтаксиса, т.е. отсутствие : , ; , {} и некоторых скобок [6].

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

Заключение

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

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

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

Библиография

1. Браун, Д. Разработка веб-сайта. Взаимодействие с заказчиком, дизайнером и программистом. / Д. Браун, - Спб.; Питер, 2013. – 336 с.
2. Дакетт, Джон. Основы веб-программирования с использованием HTML, XHTML и CSS./ Джон Дакетт, - М.; Эксмо, 2014. – 768 с.
3. Джилленуотер З. Сила CSS3. Освой новейший стандарт веб-разработок./ З. Джилленуотер. – СПб.: Питер, 2012. – 304 с.:
4. Лоусон Б., Шарп Р. Изучаем HTML5./ Б. Лоусон, Р. Шарп. Библиотека специалиста. 2-е изд. — СПб.: Питер, 2014. – 304 с.:
5. Макфарланд Д. Большая книга CSS3/ Д. Макфарланд. 3-е изд. – СПб.: Питер, 2016. – 608 с.
6. Мейер Эрик А. "CSS. Каскадные таблицы стилей. / А. Эрик Мейер. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2015.
7. Роббинс Дж. HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. — 4-е издание. — М. : Эксмо, 2014. — 528 с. +
8. Фрэйн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств./ Б.Фрэйн 2-е изд. – СПб.: Питер, 2017. – 272 с.
9. Фримен, Эрик. Изучаем HTML, XHTML и CSS./ Эрик Фримен, Элизабет Фримен, - Спб.; Питер, 2014. – 656 с.
10. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения./ Б. Хоган. — СПб.: Питер, 2014. — 320 с.
11. А.В. Новожилов, Г.С. Акулов «Поддержка браузерами технологий HTML 5 и CSS3» - Вестник ТГУ, т.19, вып.2, 2016. – с.663-665.
12. М.А. Одинокая. «Об эффективном использовании современных технологий создания интерактивных веб-документов». №13. Педагогический экспресс. - 2017. – с. 55-56.
13. Плохенко В.Г., 2 Симонович Е.И. Применение современных стандартов HTML 5 И CSS при проектировании сайта. Международный журнал экспериментального образования, №9. 2016. – с. 321-322
14. Е. И. Полякова, В. В. Кабаченко Учебный курс адаптивного web-дизайна. №8. Серия «Естественные и физико-математические науки». 2016. – с.107-108