Урок 1. Подготовка к работе, расстановка направляющих
В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не "налазили" и "прятались" друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.
Урок 2. Шапка сайта
- Тема: Веб-дизайн
- Время ролика: 00:58:53
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.
Урок 3. Проработка меню, контента, правого блока и футера
- Тема: Веб-дизайн
- Время ролика: 00:29:48
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем простое и удобное меню, поиск по сайту, красивый ротатор картинок на всю ширину, правый блок с категориями стран. Также создадим посты, которые будет удобно читать, и сделаем футер, который не будет отвлекать от контента, но будет давать всю необходимую информацию о сайте.
Урок 4. Продумываем разметку страницы и нарезаем макет - верстка сайта с нуля
- Тема: HTML, CSS
- Время ролика: 00:57:52
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы продумаем разметку будущей HTML страницы, выделим основные блоки из которых она будет состоять. Вырежем из макета все необходимые для работы изображения. Сверстаем «шапку» сайта, меню и форму для поиска. Так же установим логотип и слоган сайта.
Урок 5. Верстаем область основного контента
- Тема: HTML, CSS
- Время ролика: 00:66:41
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS 3. А так же, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.
Урок 6. Устанавливаем слайдер, дорабатываем сайт
- Тема: HTML, CSS
- Время ролика: 00:23:01
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS 3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Так же в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.
Урок 7. Создание темы WordPress. Часть 1
- Тема: WordPress
- Время ролика: 01:07:30
- Cложность: средняя
- Прикладные программы: WordPress
- Автор: Кудлай Андрей
Этот урок мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы.
После установки CMS WordPress и создания папки для будущей темы, мы рассмотрим наиболее часто используемые функции WP, знание которых является неотъемлемой частью при создании любой темы. При этом уже на данном этапе Вам станут понятны принципы создания и работы с темами WordPress.
После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. Ну и, наконец, мы разделим шаблон на логические части: header (шапка), footer (подвал), sidebar (боковая колонка), которые подключим к главному шаблону темы (index).
Урок 8. Создание темы WordPress. Часть 2
- Тема: WordPress
- Время ролика: 01:14:24
- Cложность: средняя
- Прикладные программы: WordPress
Этот урок мы начнем с рассмотрения понятия "безопасного подключения скриптов". Узнаем, почему желательно выбрать именно данный вариант подключения, который рекомендован в документации WordPress. Ну и, конечно же, выберем именно этот способ, безопасно подключив к теме скрипты и стили.
Далее в цикле WordPress мы осуществим вывод статей на главную страницу. Добавим теме поддержку произвольных меню, создадим эти меню и выведем на сайт.
Также добавим теме поддержку виджетов и создадим области для виджетов в сайдбаре и футере. В конце урока создадим два дополнительных шаблона: шаблон отдельной статьи (single) и шаблон страницы (page).
Урок 9. Создание темы WordPress. Часть 3
- Тема: WordPress
- Время ролика: 01:18:00
- Cложность: средняя
- Прикладные программы: WordPress
Фактически наша тема уже готова. Остались некоторые мелочи, которые мы и реализуем в последнем уроке. В частности, мы создадим следующие шаблоны:
- шаблон для результатов поиска;
- шаблон 404-ой ошибки;
Кроме шаблонов мы реализуем две вещи, которые практически всегда реализуются при помощи специальных расширений - плагинов. Мы реализуем постраничную навигацию (пагинацию) для материалов сайта, а также реализуем управление слайдером из админки. При этом для решения последней задачи нам необходимо будет познакомиться с пользовательскими типами записей и создать новый тип постов для сайта.