Урок 1. Подготовка к работе, расстановка направляющих.

• Тема: Веб-дизайн
• Время ролика: 15:41
• Cложность: легкая
• Прикладные программы: Adobe Photoshop CS5
• Автор: Захаренко Алексей

В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не "налазили" и "прятались" друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.

получить урок

Урок 2. Шапка сайта.

• Тема: Веб-дизайн
• Время ролика: 58:53
• Cложность: средняя
• Прикладные программы: Adobe Photoshop CS5
• Автор: Захаренко Алексей

В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.

получить урок

Урок 3. Проработка меню, контента, правого блока и футера.

• Тема: Веб-дизайн
• Время ролика: 29:48
• Cложность: средняя
• Прикладные программы: Adobe Photoshop CS5
• Автор: Захаренко Алексей

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

получить урок

Урок 4. Продумываем разметку страницы и нарезаем макет.

• Тема: HTML, CSS
• Время ролика: 57:52
• Cложность: средняя
• Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
• Автор: Бернацкий Андрей

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

получить урок

Урок 5. Верстаем область основного контента.

• Тема: HTML, CSS
• Время ролика: 66:41
• Cложность: средняя
• Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
• Автор: Бернацкий Андрей

В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS3. А также, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.

получить урок

Урок 6. Устанавливаем слайдер, дорабатываем сайт.

• Тема: HTML, CSS
• Время ролика: 23:01
• Cложность: средняя
• Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
• Автор: Бернацкий Андрей

Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Также в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.

получить урок

Урок 7. Создание темы WordPress. Часть 1.

• Тема: WordPress
• Время ролика: 87:31
• Cложность: средняя
• Прикладные программы: WordPress 3.2.1-ru_RU
• Автор: Кудлай Андрей

В этом уроке мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы. После установки CMS WordPress и создания папки для будущей темы, мы начнем постепенное изучение функций WP, знание которых является неотъемлемой частью при создании любой темы. После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. После переноса шаблона в тему мы разделим шаблон на логические части (header, footer, sidebar), которые подключим к главному шаблону темы (index). В конце первого урока осуществляется динамический вывод краткого текста статей на страницы блога.

получить урок

Урок 8. Создание темы WordPress. Часть 2.

• Тема: WordPress
• Время ролика: 97:16
• Cложность: средняя
• Прикладные программы: WordPress 3.2.1-ru_RU
• Автор: Кудлай Андрей

Во втором уроке мы закончим создание темы WordPress. Ниже приведен список наших действий по пунктам:

- добавляем поддержку виджетов в тему;

- создаем шаблон для вывода полного текста статей, добавляем поддержку меток (тегов) к статьям;

- реализуем поддержку миниатюр в постах;

- добавляем виджеты в футер;

- динамически выводим постоянные страницы и создаем шаблон постоянных страниц;

- добавляем возможность комментирования постов;

- создаем шаблон 404 для вывода альтернативной информации в случае ошибок;

- знакомимся с особенностями работы файла .htaccess в WordPress;

- в конце урока мы создадим шаблон поиска и добавим скриншот для нашей темы.

получить урок

Отзыв от Оксаны Куценко. Спасибо за труды!

• Имя: Оксана Куценко
• E-mail: okskutsenko@gmail.com

Хочу выразить признательность всем: дорогие Андрей Бернацкий, а также Андрей Кудлай, Рог Виктор и вся Команда webformyself!

Я несказанно рада, что существуют такие люди, которые свой интеллектуальный труд доносят до "чайников" в такой понятной и систематизированной форме!

Низкий уклон за это!

Труды, что представлены на сайте, имеют очень познавательное и глубокое содержание! Все материалы настолько увлекают, что хочется брать любую тему и тут же отрабатывать! Но, к сожалению, знаний еще недостаточно, поэтому закладки и доступные видео теперь хранятся на моем компьютере в ожидании своего времени. Так тяжело оторваться от прослушивания и повторения видеоуроков!

Несмотря на жалобы домочадцев, которым теперь достается меньше внимания, изыскиваю любую минутку, чтобы учиться и маленькими шажками шагать к цели!

Спасибо вам!

В самом начале думала, что никогда не освою эти заумные записи в кодах. Постепенно страх прошел, все разложилось по полочкам. Признаюсь честно, изучение этих уроков проходило нелегко, возникали трудности. Вначале, что касалось прорисовки макета, вопросов не возникало, т.к. немного знакома с Фотошопом, и макет был сделан, но как только дело коснулось верстки – «темный лес». Ведь знаний в этой области в октябре этого года было "ноль". Отложив верстку на потом, пришлось штудировать HTML и знакомиться с CSS. Только после этого, уроки по верстке стали более-менее понятными. Очень выручают прилагаемые к видеоурокам дополнительные материалы - "раздаточный материал по теме". Замечу, что задать вопрос по возникающим мелочам, мне совершенно некому. Поэтому ваш ресурс стал для меня добрым другом-подсказчиком.

Сейчас нахожусь на этапе установки макета на WordPress. До этого следовал долгий мониторинг: что же это такое "система управления контентом", а можно ли без нее, и почему так много уроков заканчиваются именно установкой на WordPress? Но, несмотря на то, что вопросов еще очень много, а их не может не быть в процессе обучения, верю, что у меня все получиться с вашей ОПЕРАТИВНОЙ помощью! Спасибо за техподдержку. Теперь мне не надо собирать в сети Интернет множество статей, касающихся моих вопросов. Знаю, что нужно посмотреть аналогичный видеоурок на сайте или оформить подписку в Премиум раздел(что уже сделала). Кстати замечу, что цена на такое количество подписного материала, вовсе не завышена. Очень даже адекватные цены!

Желаю вам процветания! Пусть ваши проекты приносят вам больше благодарных подписчиков, вам - денег, а также радость тем, кто нуждается в вашей помощи!

Еще раз СПАСИБО!

С уважением, Оксана.