Курсы веб дизайнер, онлайн обучение

• Теги форматирования
• Спецсимволы
• Изображения
• Списки

• Создание стилевого файла
• Блочные и строчные элементы
• Свойства блочного элемента
• Фоновое изображение
• Поля блока

• Чистка страницы
• Создание блоков с готовым классом
• Относительное позиционирование
• Абсолютное позиционирование
• Вложенные блоки
• Переполнение блока
• Создание блоков
• Копирование (дублирование стиля)

Имитация таблицы

• Оформление верхнего блока

Практическая работа «Табличная вёрстка»

• Планирование шаблона
• Создание таблицы
• Гибкий дизайн

Задания для самостоятельной работы

• Разбиение шапки на фрагменты
• Формирование шапки с помощью таблицы
• Ограничение ширины шапки
• Выравниванеи заголовка по вертикали по центру:
• Использование декоративных шрифтов
• Перемещение шапки на страницу

Практическая работа «Блочная вёрстка»

• «Резиновый» трёхколоночный макет
• Идентификатор Оптимизируем код:
• Создание центрального блока
• Поля для центрального блока
• Создание универсальный селектора
• Шапка для «резинового макета»
• Подвал для «резинового макета»
• Свойство z-index
• Прячем «хвосты»
• Ограничение высоты
• Фиксированный макет
• Центрирование фиксированного макета

• Блочное меню
• Маркеры списка
• Оформление гиперссылок
• Изменение типа элемента
• Текущий элемент
• Копирование страниц
• Блочное меню: вариации

Практическая работа 1 «Меню из табов»

• Создание блока меню со списком пунктов
• Оформление элементов списка
• Оформление гиперссылок
• Настройка полей
• Текущая вкладка
• Граница табов

Практическая работа 2 «Блочная плавающая разметка»

• «Фиксированная разметка» из плавающих блоков
• Формирование блоков
• Выота средних блоков
• Колонки одинаковой высоты: рецепт 1
• Колонки одинаковой высоты: рецепт 2
• Колонки одинаковой высоты: рецепт 3
• Внутренние поля

• Ластик, список, класс
• Оформление рамок миниатюр
• Подписи к фотографиям
• CSS 3: Тень
• CSS3: псевдокласс: ntn-child
• CSS3: Анимация
• Загрузка шрифта

  Практическая работа: «Кнопки CSS3»

• Кнопки в веб
• Кнопка: Создание основы
• Тень кнопки
• CSS3: Прозрачный цвет
• CSS3: Тень текста
• CSS3: Скруглённые уголки
• CSS3: двухцветный градиент
• CSS3: Многоцветный градиент
• Приоритет свойств
• Совместимость

Современный веб сайт, технологии разработки и общий подход. Основные понятия: браузер, домен, хостинг, протоколы HTTP, HTTPS, доменные зоны. CMS и конструктор для создания сайта, осоновные отличия и возможности. Обзор современных технологий по созданию сайта, виды CMS и сравнение возможностей. Преимущества CMS Joomla по сравнению с Wordpress и другими CMS.

Практическая работа: Регистрация домена и хостинга. Установка CMS JOOMLA  на хостинге. 

• создание структуры сайта с помощью категорий и подкатегорий
• удаление и восстановление категорий
• алиас категории, формирование адреса страниц с помощью правильного  алиаса и влияние алиаса на позиции сайта в поисковых системах.

• Как добавить свой материал, грамотная разметка материала тегами HTML
• Работа с менеджером материалов и встроенным редактором для форматирования материалов, настройка расширенного формата редактора
• Исходный код материала, работа с HTML тегами для разметки страниц (H1...H6, P, BR)
• Вывод материалов на сайт с помощью пунктов меню и настройка отображения материала на сайте
• общие настройки для отображения материалов

• Вставка картинки в материал, свойства и атрибуты для изображений
• Общие требования к изображениям на сайте

• Блог категории, с использованием кнопки Подробнее, настройка отображения блога категории
• Список материалов категории, настройка отображения списка материалов

• Организация структуры материалов в виде списков (нумерованные, маркированные, многоуровневые).
• HTML теги списков, свойства и атрибуты
• Спецсимволы HTML для вывода неклавиатурных символов на веб страницу.

• Вставка и настройка свойств таблицы, поля и размеры, адаптивность таблицы, дизайн таблицы
• HTML теги для таблиц, свойства и атрибуты в коде страницы

• Внутренние ссылки, перелинковка страниц
• Ссылки внутри одной страницы, якоря
• Ссылка на файлы различных типов (изображение, архив, pdf, word, excel) для скачивания фалов с вашего сайта
• HTML теги ссылок, атрибуты и свойства

• Внутренние модули Joomla (Хлебные крошки, меню, авторизация, поиск, похожие материалы)
• Создание, настройка и вывод модуля в позицию сайта, просмотр позиций шаблона для вывода модулей на сайт.
• Установка внешних модулей и плагинов для создания галереи и слайдшоу с различными эффектами.
• Суффиксы модуля для быстрой настройки стиля

• установка компонента, работа с панелью управления компонента Widgetkit
• Настройка и вывод интерактивной катры сайта от Яндекс
• Создание слайдшоу и современных галерей с помощью компонента Widgetkit
• Создание страницы контакты

• Суффиксы для создания вертикального и горизонтального меню на сайте
• как создать несколько меню на сайте
• стиль меню

• настройка шаблона Protostar, вывод логотипа
• вывод слайдшоу на главную страницу
• создание и вывод фавикон
• настройка адреса сайта, через общие настройки

• установка плагина для использования видеохостинга YOUTUBE
• настройка видеоплеера
• вывод видео в материал и в любую позицию шаблона

• таблицы стилей сайта на CSS (каскадные таблицы)
• редактирование стилевых файлов шаблона
• синтаксис CSS

• установка шаблона на CMS Joomla
• настройка шаблона
• вывод модулей для нового шаблона

• выбор форм обратной связи для вашего сайта
• чат, обратный звонок, заявка с сайта, социальные кнопки

• Установка и настройка компонента admintools
• установка и настройка каптчи для защиты сайта от спама
• Способы смены пароля от админки
• Резервное копирование, восстановление сайта из резервной копии

• настройка палитры и расположение окон и вкладок 
• открытие изображений в программе
• управление масштабом изображения в программе adobe photoshop
• изучение форматов фотографий для печати

• ширина, высота, разрешение фото для печати
• кадрирование фото с заданными и произвольными настройками
• сохранение настроек для кадрирования фото
• правила формирования кадра
• восстановление фото после кадрирования с помощью фильтров

• плюсы и минусы
• быстрый вызов с помощью клавиатуры

• Уровни
• Кривые
• Тень/Свет
• особенности коррекции засвеченных, затемнённых и тусклых фото

• работа с цветовой пипеткой
• ограничение области коррекции
• установка проб цвета на фото

• установка параметров для создания нового файла
• прозрачность фона

• выбор цвета
• установка точного кода цвета
• градиент: линейный радиальный и другие
• кисть и способы загрузки дополнительных кистей в фотошоп

• создание новых слоёв
• имя слоя
• перемещение слоя
• дублирование и отражение слоёв
• настройка прозрачности слоя
• технология слияния и объединения слоёв
• применение различных фильтров к слоям
• отключение и включение видимости слоёв

• использование фильтра - пластическая операция
• восстановление текстуры кожи
• изменение цвета кожи
• инструменты ретуши: затемнитель, осветлитель, палец

• полигональное и магнитное лассо, практическое применение
• прямоугольное выделение
• волшебная палочка
• выделение сложных объектов с помощью фильтров
• инвертирование выделения
• использование быстрой маски для выделения сложных объектов

• свободная трансформация
• отражение по вертикали и горизонтали
• искажение трансформации

• объём
• тень
• свечение
• копирование и применение стиля слоя к другим слоям

• перо
• режимы пера
• использование режима построения контуров
• использование дополнительной настройки инструмента - резиновая нить
• технология рисования пером
• технология обводки изображения пером

• изучение палитры контуры
• создание новых контуров
• выделение контуров
• заливка и обводка контуров

• создание, размещение и закрепление направляющих для макета
• создание фона с эффектом текстуры
• использование режима наложения цветов для фона
• технология группировки слоёв

• логотип
• шапка сайта
• меню сайта
• кнопок с эффектом градиента
• создание рамки и вензеля для контента сайта
• создание образца контента сайта, создание и оформление текстовых блоков
• подвал сайта

• установка декоративных шрифтов
• настройка инструмента текст
• обработка текста с помощью стилей

• Виды баннеров: имиджевый и обычный баннер для сайта
• алгоритм создания баннера
• рекомендации по созданию баннера

• создание заготовки для баннера
• компановка баннера
• работа с текстом

• настройка палитры Анимация
• разбивка баннера на кадры
• коррекция кадров
• покадровая и автоматическая анимация
• настройка анимации
• оптимизация размера баннера
• сохранение анимационного рисунка

• копирование и клонирование объектов
• группировка

• масштабирование
• поворот
• скос

• точная трансформация
• объединение
• выравнивание и распределение объектов

В этом уроке Вы познакомитесь с основными блоками Landing Page. Научитесь правильно формировать предложение и составлять описание продукта.

• вариант – ручная нарезка
• способ нарезки Slice Tool
• способ нарезка слоями

Теги Joomla:

• для создания шаблона

Структура тегов для Joomla. Переменные joomla. Файл index.php

• Обязательные элементы файла index.php

Подключение фреймворк Bootstrap. Создание файла templateDetails.xml

• синтаксис на примере готового файла

• параметр: Выбор цветовой схемы шаблона
• параметр: Загрузка логотипа сайта, через админку

Применение языковых файлов.

Вёрстка шаблона. Вёрстка шаблона для различных устройств.

• Основные устройства и классы
• Правила написания классов для различных устройств

Вёрстка шапки:

• Вывод логотипа
• Выводим меню

Внешний вид шапки:

• Заливка фона
• Выбор цвета с помощью программы ColorZilla

Вёрстка и оформление основной части шаблона.

Вёрстка контента. Проверка наличия модулей.

• Вывод основной части
• Вывод модулей в правую колонку

Оформление внешнего вида основной части шаблона. Вывод контента и модулей для мобильных устройств. Вёрстка основной части, если в правой колонке нет модулей. Вывод модулей в 3 позиции.

Изменение внешнего вида контента. Модуль Хлебные крошки. Оформление внешнего вида материалов. Изменения внешнего вида модуля по умолчанию. Использование псевдоклассов first-child и last-child. Суффикс класса модуля.

Структура папок. Создание архива в формате zip. Установка шаблон на joomla. Создание модулей и вывод в позиции. Итоговая работа: Создание собственного шаблона для сайта.

Регистрация домена и хостинга для интернет магазина. Установка компонента JoomShopping и шаблона для интернет магазина.

Базовые настройки магазина:

• заполнение информации о мгазине
• настройки для товаров
• плагины в описании товара
• налоги и языки
• валюта
• функции магазина

Категории JoomShopping:

• добавление категорий для товаров
• вывод категорий с помощью модуля
• вывод категорий с помощью пунктов меню

Производители JoomShopping:

• добавление производителей
• вывод производителя в карточку товаров
• сортировка товаров по логотипу производителя

Товары:

• добавление товаров по категориям
• вывод видеоролика в описание товара

Характеристики товара:

• как определить характеристики для своего товара
• добавление характеристик для фильтрации и поиска товаров по характеристикам
• опции характеристик
• вывод характеристик в карточку товара

Атрибуты товаров:

• что такое атрибут
• зависимые, независимые и свободные атрибуты
• как определить атрибуты для своего товара

Добавление сопутствующих товаров.

Настройка процесса покупки: Корзина - простая и расширенная, вывод, оформление и настройка.

Регистрация пользователей:

• виды регистраций
• редактирование полей формы регистрации
• варианты доставки товара: с регистрацией, без регистрации

Доставка товара:

• обзор современных способов доставки для интернет магазинов
• добавление и настройка способов доставки в магазин
• создание цен на доставку с выводом в форму заказа
• цена доставки в зависимости от суммы заказа

Сроки поставки товара:

• создание сроков поставки
• вывод даты поставки в карточку
• доставка товара с учётом сроков поставки товара на склад

Оплата товара:

• обзор современных способов для оплаты товара
• добавление способов оплаты товара в магазин: оплата наличными, оплата по счёту, электронные способы оплаты
• установка и настройка необходимых модулей и плагинов для оплаты товаров

Оформление заказа:

• Что такое статусы заказа и как с ними работать
• настройки для заказа
• управление заказами в админке магазина

Материалы:

• Добавление необходимых материалов для магазина
• вывод материалов на сайт с помощью меню
• Изменение позиций модуля для магазина

Фильтр и поиск:

• установка плагина и модуля для поиска
• установка и вывод фильтра для категорий
• выбор характеристик для фильтрации и поиска товаров

Юзабилити магазина:

• оформление и вывод телефона на главную страницу
• создание личного кабинета для пользователей
• продающая корзина
• установка и настройка коммерческого шаблона

Маркетинг:

• вывод баннера с акцией на главную страницу
• установка и вывод модуля «Хиты продаж» на главную страницу
• установка и вывод модуля «Этикетки на товар» на главную страницу
• зачёркивание цен в карточке
• добавление и использование купонов
• работа с отзывами на товар
• добавление гарантии

Подходы к управлению проектами. Особенности процессных подходов.

Гибкие Agile (джайл) процессы:

• Agile жизненный цикл

Другие гибкие подходы (не методологии).

• KAN BAN

• Памятка заказчику
• Типичный кейс
• Разработка концепции интернет проекта
• Виды проектов в интернет-отделах компаний
• Анализ и разработка концепции

Команда исполнителя. Софт для управления интернет проектами.

• Список CRM

Доменные имена и хостинг:

• Что такое делегирование домена?
• Сквоттеры

Сервис сравнения и подбора CMF

Как правильно создавать ТЗ на сайт

• Создание прототипа сайта