МОДУЛЬ 1. «СПЕЦИАЛИСТ-УРОВЕНЬ»

Часть 1. «Нарезка и верстка макетов»
В этой части будет показано, как из макета PhotoShop в формате PSD сделать качественную верстку всех трех сайтов. Таким образом, по итогам первой части у нас будет верстка всех трех созданных в курсе сайтов. В первом блоке «в режиме реального времени» будет разложен по косточкам весь процесс нарезки и последующей верстки наших макетов из формата PhotoShop PSD прямо в HTML.

• Тема 1. Личный блог
Изучив данный блок курса, вы сможете правильно верстать тянущиеся блоки с центрированным контентом, сможете устанавливать и изменять внешний вид галереи, освоите технику правильной профессиональной верстки.
01. Вступление
02. HTML разметка шапки сайта
03. Стили CSS шапки сайта
04. HTML разметка меню
05. Вырезаем изображения для меню
06. Описание стилей CSS для меню
07. Создание каркаса области контента
08. HTML разметка анонсов постов
09. Стили CSS анонсов постов
10. Верстка постраничной навигации
11. Установка галереи
12. HTML разметка поля поиска
13. Стили CSS поля поиска
14. Верстка рекламного блока
15. Верстка блока категорий
16. Верстка блока последних записей
17. Верстка блока facebook
18. HTML разметка первого футера
19. Стили CSS первого футера
20. Верстка основного футера

• Тема 2. Премиум-шаблон сайта-портфолио
В данном блоке курса мы будем создавать сайт-портфолио для фотографа
01. Введение
02. Установка основного фона
03. HTML разметка шапки сайта
04. CSS стили шапки сайта
05. Установка карусели
06. Замена дизайна карусели
07. HTML разметка блоков контента
08. CSS стили блоков контента
09. HTML разметка footer’a
10. CSS стили footer'a
11. Назначение стилей для IE
12. Верстка страницы выставок
13. Верстка страницы о фотографе
14. HTML разметка страницы контактов
15. CSS стили страницы контактов
16. Верстка страницы портфолио
17. Установка галереи
18. Замена дизайна галереи
19. Заключение

• Тема 3. Премиум-шаблон корпоративного сайта компании
В данном блоке курса мы изучим создание корпоративных сайтов на примере создания корпоративного сайта дизайн-студии
01. Вступление
02. HTML разметка шапки сайта
03. CSS стили шапки сайта
04.. HTML разметка меню
05. CSS стили меню
06. CSS стили формы поиска
07. Установка галереи
08. Замена стилей галереи
09. Дополнение галереи контентом
10. Верстка блока подгалереи
11. Верстка блока услуги
12. Верстка центрального заголовка
13. Верстка блока «Последние работы»
14. Верстка подсказки блока «Последние работы»
15. Настройка области табов и аккордеона
16. Установка табов и аккордеона
17. Замена стилей аккордеона
18. Верстка футера
19. Верстка страницы «О нас»
20. Настройка страницы «Портфолио»
21. Верстка навигации страницы
22. Верстка анонсов портфолио
23. Верстка «Pager»
24. Установка галереи
25. Верстка контента портфолио
26. Верстка right-bar портфолио

Часть 2. «БОНУСЫ»
1. Экспресс-видеокурс по азам работы с движком WordPress: «WordPress для самых «маленьких»
- Пятиминутная установка WordPress
- Рубрики, записи, страницы.
- Знакомство с админ, панелью
- Работа с параметрами сайта
- Обновление WordPress
- Работа с плагинами
2. Цикл Премиум-видеоуроков по CMS WordPress
- Хостинг - Перенос сайта под управлением WordPress на другой сервер
- Название и описание рубрик. Работа с расширениями загружаемых файлов
- Выбор статей для вывода
- Использование. Управление ролями, Создаем подпись для статей
- Использование пользовательских шаблонов. Стили меню
- Оформление комментариев
- Понятие цикла и мультицикла в WordPress
- Создание сложных шаблонов. Алгоритм реализации
- Создание выпадающего меню для темы WordPress
- Запросы к БД. Простые решения без плагинов
3. Видеоуроки по работе в Adobe Dreamweaver
- Обзор программы
- Начало работы
- Работа с текстовым контентом
- Работа с ссылками
- Вставка графики на страницу
- Работа с мультимедиа-контентом и формами
- Таблицы
- Заключение
4. Видеоуроки - «Полезные инструменты веб-разработчика»
- Инструмент: Firebug
- Инструмент: Web Developer
- Инструмент: css3Updater.
- Инструмент: yslow
- Инструмент: cssllsage

Часть 3: «Работа с макетом в WordPress»
В этой части будет показана установка всех трёх сверстанных шаблонов на движок WordPress. По итогам данного блока курса у нас будет на руках три полноценных сайта на CMS WordPress, полностью управляемые через админку (административную панель). Это значит, что на наших с вами трех полученных сайтах все процессы, связанные с добавлением контента, его редактированием и удалением будут автоматизированы: абсолютно все будет происходить через админку.

• Тема 1. «Личный блог»
01. Документация по WordPress. Анализипунм структуру темы
02. Перенос шаблона в папку темы
03. Разбивка шаблона на составные части
04. Вывод меню сайта
05. Цикл WordPress. Вывод статей сайта
06. Реализация поиска по сайту
07. Реализация виджетов сайдбара
08. Добавление поддержки виджетов футера
09. Пагинация. Создание шаблонов записи и страницы
10. Реализация функции комментариев
11. Добавление нового типа записей

• Тема 2. «Премиум-шаблон сайта-портфолио»
01. Анализ структуры темы
02. Перенос шаблона в папку темы
03. Создание меню
04. Работа со слайдером карусель
05. Вывод записей на главной странице
06. Добавление поддержки миниатюры
07. Реализация виджетов футера
08. Создание шаблона отдельной страницы. Часть 1
09. Создание шаблона отдельной страницы. Часть 2
10. Написание шаблона стандартной рубрики
11. Реализация шаблона рубрики выставок
12. Добавление шаблона записи
13. Создание функционала галереи
14. Добавление мета-данных рубрики выставки
15. Создание страницы контактов. Часть 1
16. Создание страницы контактов. Часть 2
17. Последние штрихи. Завершение создания темы

• Тема 3. Премиум-шаблон корпоративного сайта компании
01. Анализ структуры темы
02. Перенос шаблона в папку темы
03. Создание пользовательских настроек
04. Добавление функционала виджета иконок
05. Создание произвольных меню на сайте
06. Реализация слайдера главной страницы
07. Вывод главной страницы
08. Создание блока записей «About Us»
09. Создание блока записей «Our Work»
10. Написание функции списка меток
11. Вывод записи аккордеона и вкладок
12. Создание шаблона записи
13. Добавление блока «Наша команда»
14. Блок виджетов «Наши клиенты»
15. Добавление шаблона рубрики
16. Работа с метками рубрики
17. Написание функции пагинации
18. Создание индивидуального шаблона для записей рубрики Our Work
19. Вывод слайдера записей портфолио
20. Добавление виджетов шаблона портфолио
21. Реализация блока связанных постов
22. Создание шаблонов страниц, меток и поиска

МОДУЛЬ 2 - «ГУРУ УРОВЕНЬ» Создание адаптивной WordPress темы
Основная задача модуля «ГУРУ» – адаптировать созданные нами темы под мобильные устройства. Этот процесс называется созданием адаптивного дизайна. Это значит, что сайт будет приспосабливаться под различные разрешения мобильных устройств: от смартфона и до планшета и будут использоваться две концепции.
- Первая концепция будет отталкиваться от того, что мы делаем тему с нуля: у нас есть итоговая верстка, и мы можем адаптировать нашу тему, отталкиваясь от верстки.
- Вторая концепция (второй подход) будет отталкиваться от того, что у нас не было никакой верстки и никогда не будет, и мы будем добиваться адаптивного дизайна WordPress прямо на движке WordPress.

• Тема 1. Личный блог
01. Вступление
02. Убираем фиксированную ширину
03. Установка адаптивной галереи
04. Адаптируем под планшет. Часть 1
05. Адаптируем под планшет. Часть 2
06. Адаптируем под смартфон
07. Создание адаптивного меню
08. Тестирование готовой верстки
09. Адаптируем тему. Часть 1
10. Адаптируем тему. Часть 2

• Тема 2. Премиум шаблон сайта-портфолио
01. Вступление
02. Адаптируем главную страницу под планшет. Часть 1
03. Адаптируем главную страницу под планшет. Часть 2
04. Адаптируем внутреннюю страницу под планшет
05. Адаптируем страницы портфолио и выставки.
06. Устанавливаем адаптивное меню
07. Адаптируем сайт под смартфон
08. Адаптируем страницу контактов
09. Заключение

• БОНУС. Премиум Курс по CSS 3
01. Введение. Обзор курса ч.1
02. Введение. Обзор курса ч.2
03. Границы, тени, фоновые изображения
04. Прозрачность
05. Градиенты
06. Текст - Газетнаястраница
07. Радиальные градиенты
08. Работа с текстом - шрифты
09. Текстовые эффекты
10. Псевдоклассы
11. Селекторы атрибутов
12. Трансформации
13. Переходы в CSS 3
14. Анимации