CSS: Макеты страниц
(CSS: Page Layouts)
Lynda.com [RUS]
Автор: James Williamson(CSS: Page Layouts)
Lynda.com [RUS]
Переводчик: Силя Сильхи
Формат: Видеокурс
Продолжительность: 8:57 ч
В курсе CSS: Макеты страниц представлены основные концепции макетов, даны советы, как создавать правильно структурированный HTML, основываясь на прототипах и разметке, а также освещены критические навыки создания макетов, такие как позиционирование и работа со свойством float. Автор Джеймс Вильямсон покажет, как использовать вместе эти приёмы для создания фиксированных, резиновых и отзывчивых макетов. Дизайнеры также узнают, как улучшить восприятие страниц с помощью креативного использования методов CSS для создания нескольких столбцов текста, изменения непрозрачности, и настройки свойства Background (Фон). К курсу прилагаются файлы упражнений.
Темы:
- Обзор блочной модели
- Расчёт процентных значений и значений em
- Контроль отображения элементов
- Создание фиксированного, резинового и отзывчивого макетов
- Структурирование контента при помощи HTML5
- Плавающие элементы
- Использование относительного, абсолютного и фиксированного позиционирования
- Определение размеров колонок
- Создание активов и макетов на основе решётки
- Рассмотрение проблем особенностей мобильного дизайна
- Работа с многоколоночным текстом
- Улучшение дизайна страницы с помощью CSS спрайтов
Джеймс Вильямсон - старший автор на lynda.com и сертифицированный инструктор Adobe. У него многолетний опыт работы с веб, печатью и цифровым видео, и он является популярным докладчиком в Flashforward, а также постоянным докладчиком в Adobe MAX. Также Джеймс ведёт блог (нечасто) о разных вещах в вебе на своём сайте, Simple Primate.
Содержание
- 0. Вступление 4m 20s
- Приветствие 54s
- Использование файлов упражнений 3m 26s
- 1. Основы макета 1h 39m
- Обзор блочной модели 8m 47s
- Расчёт размеров элемента 11m 11s
- Понимание схлопывания отступов Margin 7m 59s
- Расчёт значений Em 7m 41s
- Расчёт процентных значений 7m 51s
- Нормальный ход документа 13m 3s
- Контроль отображения элемента 8m 53s
- Использование CSS-сбросов 7m 11s
- Фиксированные, резиновые и отзывчивые макеты 9m 9s
- Инструменты отладки CSS 6m 46s
- Использование Firebug и WebKit Web Inspector 11m 5s
- 2. Размышления о дизайне 53m 15s
- Рабочий процесс дизайна страницы 3m 6s
- Инструменты дизайна страницы 4m 56s
- Определение структуры страницы 7m 18s
- Создание активов изображений 8m 58s
- Создание начальной структуры страницы 7m 3s
- Добавление смысла при помощи классов и ID 5m 23s
- Структурирование контента при помощи HTML5 6m 6s
- Построение внутренней структуры 10m 25s
- 3. Работа с плавающими элементами 1h 36m
- Плавающие элементы 7m 50s
- Очистка плавания 7m 28s
- Содержание плавающих элементов 7m 50s
- Метод Clearfix 10m 38s
- Плавание строчных элементов 14m 34s
- Двухколоночный макет со свойством Float 8m 17s
- Трёхколоночный макет со свойством Float 11m 30s
- Размышления о высоте колонок 7m 3s
- Создание колонок одинаковой высоты 10m 42s
- Плавающие элементы — Лабораторная 5m 25s
- Плавающие элементы — Решение 5m 21s
- 4. Позиционирование элементов 51m 42s
- Относительное позиционирование 7m 59s
- Абсолютное позиционирование 8m 59s
- Фиксированное позиционирование 4m 23s
- Контроль порядка наложения 8m 31s
- Обрезка контента 8m 21s
- Контроль переполнения контента 5m 38s
- Позиционирование элементов — Лабораторная 3m 59s
- Позиционирование элементов — Решение 3m 52s
- 5. Создание фиксированных макетов 48m 46s
- Размышления о дизайне фиксированных макетов 3m 28s
- Определение сетки макета 7m 57s
- Определение размеров колонок 9m 30s
- Применение сетки при помощи CSS 8m 56s
- Создание активов на основе сетки 8m 26s
- Ресурсы по дизайну на основе сетки 6m 22s
- Создание фиксированных макетов — Лабораторная 4m 7s
- 6. Создание эластичных макетов 44m 35s
- Дизайн для эластичных макетов 2m 30s
- Расчёт процентных значений 8m 45s
- Установка значений эластичной ширины 6m 6s
- Эластичные изображения 8m 10s
- Установка минимальной и максимальной ширины 7m 24s
- Создание эластичных макетов — Лабораторная 4m 53s
- Создание эластичных макетов — Решение 6m 47s
- 7. Создание отзывчивых макетов 49m 36s
- Обзор отзывчивого макета 3m 49s
- Использование медиазапросов 7m 16s
- Организация стилей 8m 39s
- Отзывчивый контент 8m 33s
- Размышления о мобильном дизайне 7m 32s
- Создание отзывчивых макетов — Лабораторная 4m 23s
- Создание отзывчивых макетов — Решение 9m 24s
- 8. Улучшение дизайна страницы 1h 22m
- Создание многоколоночного текста 6m 36s
- Использование границ для улучшения дизайна 13m 59s
- Закругление углов 6m 56s
- Добавление отбрасывания теней 10m 35s
- Работа с непрозрачностью 6m 8s
- Использование свойства Background 15m 5s
- Работа с CSS-спрайтами 7m 58s
- Улучшение дизайна страницы — Лабораторная 6m 22s
- Улучшение дизайна страницы — Решение 8m 38s
- Дополнительные ресурсы 6m 25s
- Дополнительные ресурсы 6m 25s
Скрытое содержимое.
Стоимость перевода: 16 000 рублей