(ПОВТОР) CSS: Макеты страниц — Lynda.com [RUS]

CSS: Макеты страниц (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