Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress

веб-дизайн

От автора: 8 бесплатных видеоуроков покажут Вам, как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress.

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

Тема: Веб-дизайн

Время ролика: 15:41

Cложность: легкая

Прикладные программы: Adobe Photoshop CS5

Автор: Захаренко Алексей

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Тема: Веб-дизайн

Время ролика: 58:53

Cложность: средняя

Прикладные программы: Adobe Photoshop CS5

Автор: Захаренко Алексей

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

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

Тема: Веб-дизайн

Время ролика: 57:52

Cложность: средняя

Прикладные программы: Adobe Photoshop CS5

Автор: Захаренко Алексей

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

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

Тема: HTML, CSS

Время ролика: 57:52

Cложность: средняя

Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8

Автор: Бернацкий Андрей

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

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

Тема: HTML, CSS

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Время ролика: 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

Автор: Кудлай Андрей

получить мини-курс

Ваши пожелания, отзывы и рекомендации оставляйте в комментариях!

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (117)

  1. Михаил

    Уроки просто отличные , Только что скачал , но немного уже посмотрел. Теперь надо применить на практике ….. Спасибо всем за уроки.

  2. Валентина Алексеевна

    Здравствуйте!
    Здорово! Ваши уроки — волшебные. Мне Ваш курс очень помог.Создавая первые сайты как на бесплатном так и платном хосте, я допустила массу ошибок. Одно дело — читать грамотные уроки Андрея Бернацкого,другое — видеть, слышать и тут же выполнять.
    Спасибо!
    Удачи Вам!
    А платный курс скомпонуйте! Здорово получится!

  3. Анатолий

    Уважаемые Виктор и Андрей! Огромное СПАСИБО Вам за этот МИНИ-КУРС!!! Очень полезен для меня… Пробежался почти по ВСЕМ урокам и даже добавил меню АДМИНА на сайт — ОЧЕНЬ удобная ВЕЩЬ!!! Начну более тщательно изучать и строить себе новый шаблон грамотно!!! СПАСИБО! ЗДОРОВЬЯ И УСПЕХОВ ВАМ!!!
    Анатолий

  4. Нина

    Здравствуйте. Не знаю как у других, но у меня ничего кроме исходника дизайна не скачалось. Урока в вашей ссылке на яндексе не было.

  5. Александр

    Ребята!Спасибо Вам огромное за ваш труд.Всё очень доходчиво,понятно и красиво.С уважением Александр.

  6. Нина

    Кстати, письма со сылкой на скачивание урока я так и не получила, хотя подписывалась раза 3. Это что акой прикол? А есть ли вообще эти уроки?

    • Андрей Кудлай

      Судя по отзывам скачавших — есть :)
      Нина, попробуйте указать другой e-mail при подписке, возможно антиспамовые фильтры Вашего почтовика попросту не пропускают ответное письмо.

  7. Сергей

    Начал скачивать курс я в восторге я таких курсов ещё не видел, а тут все так хорошо разжёвано только применяй на практике, Спасибо ребята так держать!

  8. евгений

    Огромное спасибо за обучалку! Раньше делал сайт совсем просто по готовым шаблонам,но с вами интереснее и больше возможностей в дизайне.

  9. Ирина

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

  10. Жан

    Здравствуйте у меня тоже ссылка на скачивание не открывается и на исходники тоже

  11. Александр

    Материал вполне понятен и доступен, но на его тщательный анализ и практическое применение, увы, просто не хватает свободного времени.
    А за науку — большое спасибо!

  12. Игорь

    Спасибо Андрею за миникурс! Не ожидал получить такие видеоуроки бесплатно. И хотелось бы отметить, что весь материал на видео действительно очень полезный. Изложен простым, понятным языком. Чтобы получить такого рода информацию нужно или заплатить или долго бороздить просторы интернета в поисках. А здесь всё в одном качественном флаконе. ))) Огромное спасибо, удачи и дальнейшего процветания!!

  13. Виктория

    Да, вначале у меня тоже не скачались уроки — вернее при распаковке выбило ошибку. Но я просто повторила скачивание — все отлично. Ваши уроки изучаю взахлеб. Спасибо!

  14. Валерий

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

  15. Виктор

    Огромное спасибо за такой важный материал. Давно искал нечто подобное и вот случилось. Теперь все вошло в систему и стало понятно что делать от начала до конца. Снес со своего компьютера все остальные обучающие курсы и теперь знаю у кого учиться. Спасибо еще раз.

  16. irina-ovsyannikova@mail.ru

    Отличный обучающий курс. всё понятно, доходчиво. море информации. Такого огромного бесплатного курса в Рунете я не знаю. Спасибо за ваш труд!

  17. Михаил

    Ни когда ни сталкивался с DreamWeaver 8.Проблематично.А так всё доходчего и понятно.Большое спасибо!

  18. Николай

    Третий урок при закачке показывает вирус.
    Это только у меня?

    • RohViktor

      Это проблема из-за Яндекс Народ. Они не смогли своим местным антивирусов проверить файл и выставили его статус как «нельзя проверить».

      Рекомендую в таком случае скачать архив себе на компьютер и не распоковывая архив проверить его своим антивирусником.

  19. Pocherk

    Отличный курс! Лично для меня, самыми полезными оказались уроки 7 и 8.

  20. Михаил

    Отличный курс, очень актуальная информация, молодцы, спасибо!

  21. Татьяна

    Уроки отличные! Спасибо!

  22. Горлов Юрий

    Андрей и вся команда Info-DVD! Я благодарю Вас за этот замечательный курс. У меня скопилось много курсов по сайтостроению, но после первых ваших уроков я удалил их все. Очень доходчивый и простой в подаче и понимании курс. Буду его продвигать на своем сайте Gorlov-68.ru как одно из направлений по созданию саморазвивающегося бизнеса. Спасибо Вам и успехов.

  23. Алсу

    Спасибо. Хорошие уроки.

  24. Сергей

    Такого курса я больше нигде не видел!
    Всё сделано на совесть, просто и понятно!
    Спасибо за Ваш труд!
    С уважением,
    Сергей К.

  25. Sibirskiy

    Почму то не скачивается 5-й урок

  26. Алексей

    Здравствуйте. Не могу скачать уроки.

    Веб-страница по адресу http://narod.ru/disk/26896198001/lesson4mini.zip.html недоступна!!!

    И так все ссылки на скачивание!
    Проверте пожалуйста ссылки!

  27. Геннадий

    Огромное спасибо за отличные уроки
    Удачи Вам, а всем читателям — успеха в создании и продвижении сайтов …

  28. Лариса

    Я получила БЕСПЛАТНО уроки по сайтостроению с нуля для новичков(да и не только).Мне понравилось,потому что ясно подается материал.Сейчас занимаюсь своим 1-м сайтом,так что видео-обучение как нельзя кстати.Спасибо за Вашу работу.

  29. Тарас

    Спасибо Вам. Мне все очень понравилось. Жду новых уроков.

  30. Olga

    Спасибо,понравилось!!!

  31. Артур

    Сайт есть, давно хотел сделать тему. Вот появился повод

  32. Sibirskiy

    Здрвствуйте! Никак не могу скачать урок №5 При нажатии на ссылку открывается страница с текстом: «Too many connections to this file from you». Может что то посоветуете?

  33. Сергей Щетинин

    Огромное спасибо Авторам курса за предоставленный материал! Респект Вам))) Прошел только 6 уроков-вроде все хорошо, но есть косяки(не в материале, а в моем обучении) Я вот, что не могу сделать:Дизайн хорошо отображается только в GoogleChrome, а в остальных не хочет ладится! ДА и с кодировкой Я так и не понял, что делать-одни квадраты вместо букв! Если есть возможность помочь
    Помогите пожалуйста:

  34. Елена

    Курс очень хороший!Грамотная и хорошо поставленная речь, что очень важно,слушать и воспринимать информацию очень легко. К сожалению существуют многие курсы,которые,несмотря на полезное содержание имеют такое изложение,что слушать невозможно, а ваш курс просто замечательный! Спасибо вам огромное за него!И вообще спасибо за все ваши уроки!!!

  35. Виталий Владимирович

    Прекрасный курс! Мне очень понравился. Работа с фотошопом. Слои и как их использовать это просто замечательно. Также очень доходчиво изложено — работа с КСС стилями, такого нигде не найдешь. Я не сайтостроитель — но мне очень понравилосЬ, может быть когда-то нарисую сайт.Спасибо за курс. С уважением В.В.

  36. Виталий Владимирович

    Кус прекрасный и толковый спасибо за курс. Много было прказано как прфвильно и грамотно работать с фотошопом, со стилями ксс. Как правильно размечать сайт и т.д. Курс дает прекрасный толчек для творчества молодым сайтостроителям. Спасибо и с найлучшими пожеланиями. Виталий Владимирович.

  37. Трофим

    Ознакомился пока с пятью уроками. Отличный курс. Особенно понравились уроки Захаренко Алексея. Уроки по программе «Photoshop». Этого блока явно не хватает в Вашем обучающем курсе «Киберсант Вебмастер», который был приобретен мною. Разумеется, и материал, предложенный Бернацким Андреем, можно оценить только в превосходных степенях.
    Для меня эти уроки ценны тем, что изложены по системе «быстрый старт». То есть прослушав сравнительно небольшой курс, можно приступать к собственным проектам. А со всеми нюансами разбираться либо дополнительно по книгам, либо более тщательно изучая уроки.
    И еще хочу заметить такую вещь. Даже изучив самый навороченный супер-бупер курс, невозможно стать профессионалом. Обязательно нужно все попробовать на практике. Это может быть и пошаговое повторение уроков. И работа над собственными сайтами. Без практических упражнений достичь успеха будет весьма проблематично, если не невозможно.
    Большое спасибо авторам, и всей команде webformyself за предоставленный материал.
    В качестве наглого пожелания хотелось бы ознакомиться с уроками, по созданию заставок к урокам, ну и по созданию самих уроков.

  38. Lana

    Благодарю за хорошие уроки!

  39. bopa

    Признателен за благородное дело!
    Вдохновения, успеха и хорошего настроения в реализации Ваших планов.
    Будьмо!!!

  40. Юрий

    Спасибо за курс! Очень позновательный

  41. Анатолий

    Что правда, то правда такого бесплатного курса в Рунете я не видел. Молодцы ребята, большое спасибо.
    С уважением Я Денисов Анатолий.

  42. Борис

    Большое спасибо!

  43. Михаил

    Ваще просто высший пилотаж!!

  44. Виктор-Самара

    К выше сказанному и добавить то нечего.Хочу сказать,многие рассылки просто вода и от них стараешся сразу же отписаться,чтобы не тратить своё время.Андрей,Виктор и весь Ваш дружный и подкованный коллектив;-не забывайте нас,ведь в реалии не бабки глава всему.Может кто-то на них и помешался,но счастья они мало кому принесли.За поданый материал действительно можно,да вероятно и нужно бы назначить н-н-ю сумму и без сомнения многие бы забрали продукт,но…99% сразу же забыли кто есть кто.Андрей,благодарен Вам за Ваши труды.С гл.уважением,Виктор.

  45. Владимир(adgika)

    Доброе Вам время суток!
    Я немного поработал на шаблоне взятом из ВордПреса, и осталось какое-то чувство не спокойствия за свою работу. Уже долгое время знакомлюсь и изучаю Ваши материалу. Нравится!? думаю что это не то слова. Буду теперь создавать собственное произведение-сайт в Интернете. Расставаться в ближайшее время с Вами не собираюсь. Жду от Вашей команды чего-нибудь новенького, к примеру: работа с фотошопом или еще что-то приятное. С уважением Владимир. Большое спасибо за просвещенческий труд!

  46. Ирина

    Спасибо огромнейшее!!! Обалденный курс!!! Я начинающий блоггер, поэтому для меня все уроки очень актуальны. Успехов вам!

  47. Жан

    не получается скачать-уже всё перепробовал с разных браузеров пишет веб стр. недоступна

  48. Бубка Гоп

    Да не качаются они, пробовали не раз.

  49. Виктор-Самара

    Андрей,Виктор!!!Вам всего хорошего и успехов в Вашем начинании.Относительно скачивания:-не все браузеры способны открыть даже ДЕМО-файл.На всякий случай я установил 5-ть браузеров и проблем нет. Вдобавок,дополнительный Ж.Д.на котором установлены операционки без обновлений и при случаи затруднений всегда можно переставить в РС(операция 5-ть минут)решают многие поблемы. Просто нужно пробовать варианты.Сколько приходило писем от Андрея-никаких тормозов в чтении и в закачке.Спасибо Вам друзья в предоставлении ценных материалов,Здоровья.Самара.

  50. Mariangell

    Хоть я и «миллионный повтор благодарности»))) — но удержаться.. не могу!..Только благодаря Вашему сайту и видеоурокам у меня появилась надежда сделать хорошую страничку для института на дипломную работу! Буду по Вашим урокам изучать CSS и DW!!! Спасибо! Всех благословений Вам ребята!

Добавить комментарий