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

CSS: Макеты страниц
(CSS: Page Layouts)
Lynda.com [RUS]
​

Автор: James Williamson
Переводчик: Силя Сильхи
Формат: Видеокурс
Продолжительность: 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 рублей