Главная » 2016»Октябрь»21 » Курсы Web дизайна (Html, CSS, Photoshop) для начинающих в Киеве
18:42
Курсы Web дизайна (Html, CSS, Photoshop) для начинающих в Киеве
Курсы Web дизайна (Html, CSS, Photoshop) для начинающих в Киеве
Программа курса
Последовательность изучаемых тем может изменяться.
Знакомство с вебдизайном
• Принципы и особенности растровой и векторной графики
• Образование цвета в компьютерной графики
• Цветовая модель RGB и CMYK
• Пропорция и симметрия в веб-дизайне
• Типология веб-интерфейсов
• Принципы архитектуры сайта
• Обзор программ для создания компьютерной графики
• Виды макетов: фиксированный, резиновый, адаптивный, отзывчивый
• Сетки дизайна
Общее представление о Web и HTML.
• HTML5 СТРУКТУРА СТРАНИЦЫ
• Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
• Структура HTML5-документа. Понятие элементов и атрибутов
• Зачем нужна инструкция
• Что такое тег? Типы тегов. Теги - header, nav, section, article,aside,footer и др. Правила оформления HTML5-документа
• Использование комментариев.
• Создание HTML5-документа в программе Sublime Text 3
• Возможности программы Sublime Text 3: Основы работы. Управление web-сайтом. Редактирование html5-кода
• Создание новых файлов и папок
Технология CSS, её версии и поддержка браузерами.
Одноколоночная фиксированная верстка. Горизонтальные и вертикальные CSS меню
• Верстка web-страниц со стандартными элементами - шапка, навигация, содержание и подвал.
• Создание меню с помощью маркированных списков.
• Введение понятия псевдоклассов.
• Определение float для позиционирования элементов меню.
• Сознание веб страничек и связей между ними.
• HTML-элементы: виды, параметры.
Работа с текстом. Механизмы представления текстовой информации: оформление, выравнивание, отступы и др.
• Использование CSS-свойств: Особенности отображения текста на web-странице.
• CSS-свойства, используемые для оформления текста.
• Примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.
Способы верстки элементов web-страницы при помощи CSS
• Содержимое и слои. Фон слоя. CSS-свойства списков.
• Особенности использования блочной модели.
• Использование фоновых изображений.
Схемы css-позиционирования. элемента. положения
• Способы позиционирования элементов.
• Абсолютное и относительное позиционирование.
• Точное размещение блочных элементов HTML-разметки в окне браузера: размеры блока, абсолютные и относительные координаты.
• Наложение и вложение слоев, свойство z-index.
• Управление видимостью слоя и видимостью содержания слоя.
Разработка макета web-страницы на основе css-позиционирования
• Используемые приемы.
• Особенности оформления.
• Управление шириной слоя, полями и отступами.
• Создание и редактирование макета с фиксированными и масштабируемыми колонками.
• Рекомендации по использованию css-позиционирования. HTML-формы
• Элементы формы.
• Юзабилити форм.
• Средства HTML и CSS для определения визуального отображения элементов форм.
• Примеры использования css-алгоритмов.
• Центрирование страницы средствами css.
• Алгоритм раздвижные двери CSS-спрайты.
Веб-стандарты и их поддержка
• Стандарты W3C. Документация.
• DOCTYPE.
• Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
• Протокол HTTP.
Элементы и атрибуты HTML5 и структура страницы
• Секции, выноски, статьи, навигационные, шапка, подвал.
• Элементы форм и их атрибуты.
• Селекторы перешедшие из HTML4/xHTML.
• Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
• Ролловеры, спрайты.
• Bootstrap
• Foundation
Эффективное использование инструментов разработки веб-страниц
• Инструментарий разработчика. FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
• Составление и анализ требований к вёрстке веб-страниц. Проектирование макетов.
• Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта.
• Контроль качества веб страниц.
Совместимость веб-страниц с различными браузерами
• Условные комментарии.
• Скрипты для поддержки селекторов и изменения поведения старых браузеров.
• Программы эмуляторы старых версий IE.
• Фильтры.
• Принципы нарезки макета из psd-файла.
• Выбор размеров и вариантов верстки.
• Верстка.
Работа в программе Adobe Photoshop
Введение. Создание многослойного изображения. Техника выделения областей изображения. Работа со слоями многослойного изображения
• Особенности, параметры и форматы растровых изображений
• Настройка интерфейса программы. Понятие рабочее пространство (workspace).
• Создание нового документа
• Изменение основных параметров изображений
• Кадрирование изображений
• Способы создания слоя. Работа со слоями. Параметры слоя
• Управление слоями с помощью палитры Layers
• Особенности работы с многослойным изображением
• Обзор способов выделения областей изображения.
Инструменты локального выделения: назначение инструментов, настройка параметров
• Приемы выделения областей сложной формы.
• Модификация формы выделения. Дополнение, вычитание и пересечение областей выделения. Растушевка границы области
• Выделение и связывание нескольких слоев.
• Слияние слоев
• Группировка
• Создание монтажа на основе нескольких изображений
• Текстовые слои. Растрирование текстового слоя. Спецэффекты на слоях
• Перемещение, дублирование, масштабирование, поворот, искажение выделенной области Выбор цвета кисти. Цветовые модели.
• Создание тени, ореола, имитация рельефа и др.
• Работа с текстом в Adobe PhotoShop.
Векторные возможности Adobe Photoshop. Форматы файлов для веб
• Структура векторного контура (кривой Безье)
• Типы векторных объектов, используемых в Photoshop, их назначение
• Использование инструмента Перо (Pen) для вычерчивания контуров
• Создание и редактирование слоев векторных фигур (Shape Layers)
• Создание составных фигур. Использование стилей слоев применительно к слоям фигур
• Использование контуров для точного выделения объектов. Создание и использование обтравочных контуров (Clipping path)
• Создание и использование векторных масок, их особенности
• Обзор форматов файлов, поддерживающих сохранение векторных объектов
• Возможности обмена данными между Adobe Photoshop, Adobe Illustrator и др. программами
• Импортирование векторных файлов. Вставка в документ Photoshop векторных объектов
• Формирование художественных эффектов текста
Выбор хостинга и поддержка сайта
Учебный центр оставляет за собой право частично изменять программу курса ввиду последних тенденций
в развитии данного направления
Практические занятия:
Для закрепления пройденного материала на каждом уроке слушатели выполняют практические задания. Задаются домашние задания. Методический материал выдается в электронном виде.
КОМАЩУК Сергей Сергеевич
8 базовых навыков веб дизайна для начинающих с нуля
