- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
CSS-фреймворки презентация
Содержание
- 1. CSS-фреймворки
- 2. CSS-фреймворк – фреймворк, созданный для упрощения работы
- 3. Преимущества упрощается и ускоряется процесс создания макета
- 4. Обзор фреймворков 1. Gumby framework http://www.gumbyframework.com/ 2. Bootstrap http://getbootstrap.com/
- 5. ДЗ скачать фреймворк Bootstrap, посмотреть видеоуроки
- 6. LESS – это динамический язык стилей. Bootstrap был изначально разработан с использованием LESS.
- 7. Семантическая верстка Семантической называют верстку, использующую для
- 8. Блочные элементы Элемент Определяет верхнюю часть
- 9. Элемент Используется для определения нижнего колонтитула
- 10. Элемент Тег определяет раздел страницы, в
- 11. Элемент Обозначает основное меню сайта (панель
- 12. Элемент Используется для разделения раздела страницы
- 13. Элемент Обрамляет боковую панель (сайдбар), на странице сайта.
- 14. section, header, nav, article, aside, footer { display: block; }
- 15. Схема семантической верстки
CSS-фреймворк – фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).
Слайд 2CSS-фреймворк – фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и
исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).
Слайд 3Преимущества
упрощается и ускоряется процесс создания макета сайта;
кроссбраузерность;
возможность использования генераторов кода и
визуальных редакторов.
Недостатки
может содержать много лишнего кода, который не будет использоваться в проекте;
дизайн будет зависеть от css-библиотеки.
Недостатки
может содержать много лишнего кода, который не будет использоваться в проекте;
дизайн будет зависеть от css-библиотеки.
Слайд 4Обзор фреймворков
1. Gumby framework
http://www.gumbyframework.com/
2. Bootstrap
http://getbootstrap.com/
http://mybootstrap.ru/
3. Uikit
http://getuikit.com/
4. Zurb Foundation
http://foundation.zurb.com/
5. Semantic UI
http://semantic-ui.com/
6. Blueprint CSS
7. 960 Grid System
Слайд 6LESS – это динамический язык стилей.
Bootstrap был изначально разработан с использованием
LESS.
Слайд 7Семантическая верстка
Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют
код на логические блоки, определяющие их роль и содержание в структуре web-страницы.
Слайд 8Блочные элементы
Элемент
Определяет верхнюю часть страницы или элемента, шапку страницы сайта.
заголовок
(девиз, слоган компании);
логотип сайта (компании);
контактную информацию (телефоны, часы работы).
Теги нельзя помещать внутрь тегов
логотип сайта (компании);
контактную информацию (телефоны, часы работы).
Теги
Слайд 9Элемент
Используется для определения нижнего колонтитула страницы (подвал) или элемента (подвал).
правовая информация (копирайты);
имя автора;
название сайта и/или компании;
телефон и/или адрес компании и т.п.
Не может содержать в себе
Слайд 10Элемент
Тег определяет раздел страницы, в котором размещается логически связанная
информация, имеющая свой заголовок.
Каждый раздел может иметь свои собственные теги и
Каждый раздел может иметь свои собственные теги
Слайд 11Элемент
Обозначает основное меню сайта (панель навигации).
В меню nav располагают
ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д.
Слайд 12Элемент
Используется для разделения раздела страницы на логические блоки, блок должен
быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы.
