Технология сетевого дизайна и ее программное обеспечение Лекция 5 CSS3. Создание элементов интерфейса с помощью CSS. - презентация

1 Технология сетевого дизайна и ее программное обеспечение Лекция 5 CSS3. Создание элементов интерфейса с помощью CSS

2 CSS (CSS3) HTML (HTML5) JavaScript

3

4 CSS- фреймворк фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки ( проблемы совместимости различных версий браузеров и т. д.). Как и библиотеки скриптовых языков программирования, CSS- библиотеки, обычно имеющие вид внешнего css- файла, « подключаются » к проекту ( добавляются в заголовок веб - страницы ).

5 Некоторые библиотеки используют сброс стилей (reset.css) для приведения в соответствие стилей по умолчанию для разных браузеров, в то время как другие используют нормализацию (Normalize.css), что уменьшает количество изначального кода библиотеки.

6 Twitter Bootstrap Twitter Bootstrap - свободный набор инструментов для создания сайтов и веб - приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб - форм, кнопок, меток, блоков навигации и прочих компонентов веб - интерфейсов, включая JavaScript расширения.

7

8 Создание кнопок 1. Использование тега button Текст кнопки Примечание: тег button имеет открывающий и закрывающий тег, а значит он может содержать дочерние теги. 2. Использование тега input 3. С помощью CSS Из ссылки, тега span или div Текст кнопки

9 Онлайн генератор кода CSS3 для кнопок В визуальном редакторе подбираем параметры для формирования кнопки. Получившийся код CSS3 копируем в свой проект.

10

11 Изменение вида кнопки при наведении или нажатии Динамические эффекты реализуются благодаря псевдоклассам : :hover при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией. :active в момент нажатия кнопки. Когда на странице тут же что - то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить. :focus пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера.