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

веб-дизайн

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

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

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

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

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

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

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

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

Урок 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

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: , ,

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

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

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

  1. Олег Петров

    Уроки отличные. У меня вопрос технического плана. Можно при построении макета использовать Adobe Photoshop CS2, а не CS5?
    Не могу настроить во втором разметку. Может кто знает как, подскажите

  2. VitaliyY

    Отличный мини-курс.

  3. Алексей

    За уроки спасибо, надо сейчас попробывать свою темку для вордпреса склепать.

  4. Ира

    Спасибо за уроки! Но смогла скачать только первый…остальные — никак.Подскажите пожалуйста, что нужно сделать, чтобы все-таки скачать остальные. Спасибо еще раз. Ира

  5. Владимир

    Спасибо за уроки! Правда в 6-м уроке slider не был выложен тогда с файлами. Есть возможность его продублировать на почту?

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

      Ну так можете взять этот слайдер в исходниках к 7-му и 8-му урокам — он там есть.

      • Владимир

        Хорошо, спасибо!

      • Серегей

        а в каких папках он лежит в 7 или восьмом уроке.

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

          И там, и там есть. В 7-ом уроке мы переносим созданный в предыдущих уроках шаблон на WordPress, соответственно, слайдер (верстка, скрипты, стили) там есть и его можно взять оттуда… ну а в 8-ом уроке идет доработка перенесенного шаблона и слайдер, само собой, там также есть.

          • Сергей

            в Архиве к 7 уроку я не нашел css файлов ни дефаулт ни второго вы не подскажите где он может быть тоесть джаву нашел фотки нашел а таблиц стилей не нашел.

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

            Их (отдельных файлов стилей) там и быть не может — мы ведь переносим шаблон на WordPress. ))
            Все стили, включая и стили слайдера, собраны в одном файле — в файле стилей создаваемой темы style.css. Начиная с 47-ой минуты 7-го урока мы занимаемся переносом шаблона под управление WordPress. Соответственно, смотрите с указанного места урок и отмечаете себе какие именно стилевые правила переносятся в общий файл стилей… а затем берете из общего файла только нужные правила, вот и все :)
            Чтобы было проще — это правила для элементов #slider и #cyclePager.

          • Серегей

            с скопировал все из файла стиля с 8 урока и вставил в default0 но ротатор не работает может потому что prettyPh отсутствует ? я сейчас на 6 уроке

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

            Не могу знать — я же не вижу Ваш код. Сравните Ваш текущий код с тем, что есть в уроке 6, проверьте подключение скриптов… вообще, чтобы не путаться, я говорил о том, чтобы Вы посмотрели 7-ой урок, я даже указал время, с которого можно смотреть урок. Ну и все же лучше решать такие вопросы на нашем форуме, там можно и код выложить и файлы прикреплять.

          • Серегей

            Честно я смотрел но там копируется только с файла default0 я этот код скопировал с файла стиля с 8 урока но вот фаил prettyPh который присутствует в 6 уроке при установке ротатора вообще в 7 уроке отсутствует и не рассматривается дело точно не в нем ?

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

            Сергей, Вы ленитесь :)
            Я говорил, что лучше перенести решение проблемы на форум, а Вы продолжаете здесь… ну да ладно, не хотите, как хотите.
            В 7-ом уроке действительно нет файла prettyPh.css… мне достался от верстальщика готовый шаблон без этого файла, как Вы подметили. Но, тем не менее, слайдер работал и без него, значит проблема все же не в его отсутствии…
            Специально только что взял тему и из нее выделил слайдер — скрипты, стили, разметку, картинки… вот ссылка на него, пользуйтесь ;)

          • Серегей

            кстати дайте адрес форума

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

            Андрей я перешел на форум вечером отпишусь там ещё и с переносом на виртуальный сервер проблема случилась Спасибо за Вашу поддержку и терпение. На на форуме у меня будет ник Sergalas я вас ещё своими вопросами достану ;) Спасибо за ваш курс спасибо за поддержку до встречи на форуме.

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

            Пожалуйста ;)
            И успехов в изучении!

  6. Данил

    Где взять стандартный код для index.php, Вы его ещё копировали на 30 мин. урока 7 из файла start.txt
    Заранее спасибо!

  7. Данил

    Решил залить блог на хостинг, всё работает кроме формы и кнопочки поиска.
    Вот что выдаёт, хотя на денвере всё нормально работает.
    i051.radikal.ru/1202/fb/2757ba8be81b.jpg

    Почитал в гугле, везде пишут, что функция include не работает в целях безопасности и её нужно заменять какой-то другой.
    tods-blog.com.ua/web-development/php-include/
    Перепробовал эти три функции, выдаёт уже другие ошибки.
    Может быть, что-то не правильно менял ?

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

      Данил, в дальнейшем лучше подобные вопросы задавайте на нашем форуме — http://webformyself.com/forum/ — поскольку там удобнее их решать.
      Проблема в том, что сервер не может найти подключаемый файл по указанному адресу.
      Для решения проблемы просто замените в файле header.php эту строку:
      < ?php include(TEMPLATEPATH . './searchform.php');?>
      на эту:
      < ?php include(TEMPLATEPATH . '/searchform.php');?>

  8. Максим

    здравствуйте, прошу прощения, у меня вопрос по следующей проблеме-посмотрел уроки, все отлично, но, как взялся за дело, сразу наткнулся на проблему, проблема в следущем-не могу создать документ по параметрам которые вы указали,создается что то не то, и разметка не получается вот скрин не знаю работают ли bb коды [/spoiler=[URL=http://www.radikal.ru][IMG]http://s017.radikal.ru/i421/1202/9c/0dd2383f731e.jpg[/IMG][/URL]][/spoiler]

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

      Максим, с вопросами по дизайнерской части курса попробуйте обратиться в службу поддержки автора этой части курса — bc.support-desk.ru/form

  9. Максим

    сорри не правильно ссылку оформил [spoiler][URL=http://www.radikal.ru][IMG]http://s017.radikal.ru/i421/1202/9c/0dd2383f731e.jpg[/IMG][/URL][/spoiler]

  10. Элина

    Здравствуйте!

    Я очень давно обучаюсь по материалам компаний Info-DWD и WEB formyself, больше года.
    Благодаря этим талантливым ребятам создала свой первый сайт, потом полностью его переделала, так как уже набралась опыта и знаний, и первый вариант казался одновременно смешным и страшным.

    Второй вариант тоже завис, через некоторое время и этот (МОЙ) дизайн мне разонравился.
    Я подписалась на рассылки и аккуратно собираю все уроки, но каких-то существенных шагов по развитию и продвижению своего сайта не предпринимала. Как будто чего-то ждала.

    И дождалась! Вот оно! Мой сайт — elina-chernova.ru! Мне настолько понравился дизайн, структура, описание, что я, буквально, на одном дыхании его смастерила. Единственная загвоздка была в разработке ротатора, но мастера из службы поддержки очень скоро помогли.

    Конечно, еще много предстоит доработать – «мои статьи», строка поиска, оптимизация и др., но основная часть, скелет есть! И он мне очень нравится : )!

    Да, кстати, это важно! Раньше посещаемость моего сайта была 2-3 в день : (, в новом варианте она возросла до 50-ти. Это при том, что конкретно оптимизацией я не занималась.

    Огромное вам спасибо!!! Теперь мои дела точно пойдут в гору!

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

      И Вам, Элина, спасибо за столь приятный отзыв :)
      Удачи в дальнейшем развитии сайта ;)

  11. Павел

    Здравствуйте!
    Спасибо Вам огромное за Вашу работу и помощь. Все доходчиво и понятно разъяснено, но загвоздка появилась в уроке 6,(уже был вопрос на эту тему). При создании ротатора картинок нае могу найти файлы default0.css и prettyPH.css. В исходниках 7-го и 8-го урока их тоже нет. Помогите пожалуйста! Заранее спасибо.

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

      Здравствуйте!
      В 7-ом уроке стили слайдера переносятся в общий файл стилей. Соответственно, стили слайдера можете взять из общего файла стилей 7-го или 8-го урока.

      • Павел

        Здравствуйте!
        Слайдер запустился. Единственное если входишь первый раз — видна только узкая полосочка сверху, после перехода по страницам — исчезает. Главный вопрос к Вам: подскажите пожалуйста, примерный дизайн хочу использовать для интернет магазина, какой движок Вы посоветуете, для безболезненного воплощения этого дизайна в жизнь? Перелопатил кучу материалов — запутался совсем. Извините если не по-теме.

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

          Здравствуйте.
          Да, в принципе, данный шаблон можно использовать для любого движка, поскольку ничего неординарного в нем нет. Есть шапка, меню, сайдбар с категориями… т.е. все стандартно.
          Что касается CMS под интернет-магазин, то тут уж нужно выбирать. Их очень много (например, в гугле по запросу «cms интернет магазин» можно попробовать что-то подобрать). Даже на том же WordPress можно создать магазин (соответствующие уроки у нас есть на сайте).

          • Павел

            Вот это было моим следующим вопросом..! Спасибо за оперативный ответ! Будем пробовать WordPress.

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

      Пожалуйста ;)

  12. Ксения

    уроки отличные,спасибо большое. Вот только у меня вопрос, Denwer установила, через WordPress сайт наполнила информацией, а как теперь его в интернет выложить???

  13. Alex

    В целом курс отличный — большое спасибо!
    Очень нравится как преподают Андрей Бернацкий и Андрей Кудлай.
    А вот Алексей Захаренко далеко не всё объясняет понятно. Возможно специфика фотошопа сказывается. Очень помогло бы НА ВСЕ действия вставлять картинку горячих клавиш (как в случае с Ctrl-Alt-I) чтобы понять что происходит. Приходилось подолгу искать как реализовать те или иные вещи (например Clipping Mask). Надо ведь понимать что есть люди у которых фотошоп на английском и версия более старая. Это же не бесплатный вордпресс — одинаковый у всех. Думал купить курс по дизайну — пока воздержусь.
    Ну а уроки по верстке и WP как я уже сказал — замечательные. Подписался на 3 месяца на премиум благодаря этому мини-курсу

  14. Юлия

    Спасибо огромное за такие уроки !!! Все просто замечательно — разложено по полочкам! Очень здорово! Я в восторге!!! Спасибо!

  15. ksewka

    Уроки супер!!! доступно, понятно, интересно!!! попробовала у меня все получилось seoobmen.16mb.com/www/

    Проблемы возникли с выкладкой в интернет. Попросила знакомых. Создайте пожалуйста еще и как выложить полученный сайт в интернет

  16. Вячеслав

    Нет файла prettyPh.css с 6 урока.
    Не могли бы дать ссылочку на него?
    Спасибо.

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

      Это все можно взять из исходников к 7-у уроку. Внимательно посмотрите этот урок начиная с 47-ой минуты — все стилевые правила переносятся в один файл. Детальнее смотрите комментарии, где уже обсуждался этот момент, в частности, этот комментарий.

  17. evgeny

    К концу всех уроков думаю получится разобраться достаточно, чтобы ещё пару колонок создать под категориями?)

  18. dantin

    А можно узнать где можно скачать дополнительные материалы к этому мини курсу так как у меня есть только видео?(

  19. Валерий

    Вот еще бы готовый psd-макет получить, который в уроке используется. Чтобы самому ручками попробовать сверстать.

  20. Egor

    Привет, данная верстка актуальна под WordPress 3.5.2?. Если нет, много ли правок нужно внести в макет для его интеграции в данную версию?
    буду очень рад ответу:)

  21. Andrey

    Добрый день.
    Остается верить на слово комментаторам, что ресурс хорош и уроки полезные. По подписке (на 2 адреса пробовал) ничего не пришло.

  22. Алексей

    Здравствуйте!
    Не нашел ни одного файла к 6-му уроку, а очень бы хотелось. На курс подписан, но прохожу его на ТыТрубе по интенсивной программе :)

    Хелп ми плиз! :(

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

      Здравствуйте, Алексей.
      В этом курсе уже устарели последние 2 урока (программная часть). Вот новая версия курса, в которой последние 2 урока были полностью перезаписаны — http://webformyself.com/minikurs/index-subscribe.html
      Относительно исходников. Все исходники с готовой версткой прикреплены к четвертому уроку, так что можете взять их оттуда.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree