Дизайн и верстка красивых веб страниц, в одном «флаконе»! Не секрет, что красивая и лаконичная страница вызывает интерес у посетителя и на подсознательном уровне мысль, что здесь ему предлагают что-то качественное. Видеокурс научит Вас самостоятельному написанию кода HTML и CSS, разобравшись в котором, Вы сможете не только создавать индивидуальные страницы, но и уникализировать уже готовые. Знание кода всегда пригодится и не раз выручит, если Вы пришли в интернет всерьез и надолго.
Кому подойдет видеокурс?
Видеокурс подойдет как тем, кто, например, имеет опыт в создании одностраничников, но не имеет его в создании дизайна, либо наоборот, есть опыт в создании дизайна одностраничников, но нет опыта в его верстке, ну и конечно же тем, у кого нет опыта ни в одной из этих областей либо его очень мало! Автор постарался использовать только такие элементы дизайна, которые легко реализовать (дизайн и верстка) даже новичку, при этом они ничем не уступают даже замысловатым элементам. Простота – сестра таланта!
Содержание:
Структура и дизайн одностраниников (Продающая страница)
Урок 1.1: Разбор продающих страниц.
В самом начале мы поговорим с вами о видах продающих страниц, проанализируем реальные страницы разных авторов, обращу ваше внимание на основные моменты структуры и дизайна таких страниц. Вы узнаете, каким должен быть текст и изображения, каким образом их грамотно сочетать и какими триггерами можно насытить сайт, чтобы он привлекал больше внимания.
Урок 1.2: Информационные разделы.
В этом уроке мы по пунктам разберем какие информационные разделы должен содержать одностраничный сайт и как их написать чтобы подвести посетителя сайта к покупке.
Урок 1.3: Подписная страница
В этом разделе, мы поговорим и о подписных страницах. Проанализируем реальные примеры удачных и неудачных вариантов таких страниц. Расскажу про оптимальный (простой и красивый) вариант подписной страницы.
Создаем макет для будущих одностраничников (Введение в HTML и CSS)
Урок 2.1: Введение в HTML.
В этом уроке я расскажу что такое код Html, для тех кто еще не знаком с ним. Покажу основные принципы написания этого кода, изучим, созданный мной, файл-подсказку, который вам будет пригождаться при создании сайтов. Рассмотрим структуру html-документа.
Урок 2.2: Введение в CSS.
Здесь мы рассмотрим стили css, расскажу вам зачем они нужны. Разберемся с кодом написания стилей. Научу вас пользоваться файлом подсказкой для стилей.
Урок 2.3: Создание основы для одностраничка
В этом уроке мы создадим файл Html и файлы Css, зададим необходимые параметры нашего сайта, напишем заголовок, подзаголовок и несколько абзацев, подготовим стилевую основу будущему одностраничнику (кроссбраузерность, стили для заголовка, подзаголовков, абзацев и т.д.).
Верстка и Дизайн
• Учимся работать в программе Photoshop
Урок 3.1.1: Базовые моменты в программе Photoshop.
В этом уроке я познакомлю вас с программой Photoshop, Автор покажет Вам базовые моменты, разобраться в которых необходимо для того чтобы в дальнейшем редактировать готовые элементы для сайта (блоки, фоны, изображения).Найдете в интернете несколько изображений и отредактируем их под наш сайт.
Урок 3.1.2: Более продвинутые моменты в Photoshop.
В этом уроке Автор покажет Вам некоторые продвинутые моменты, которые помогут вам научиться самостоятельно создавать графические элементы для сайта (блоки с текстом, красивые кнопки, фоны и т.д.), а также более грамотно редактировать готовые.
• Заголовок, шапка сайта
Урок 3.2.1: Разбор разных шапок продающих сайтов.
Здесь мы будем говорить с вами о самой верхней части нашего сайта, т.е. о "шапке", ее называют еще - "header (хэдэр)" по названию тега, который ее задает. Этому элементу я уделю особое внимание, т.к. он является одним из самых важных на странице (это первое, что видит посетитель). Расскажу о факторах, которые нужно учитывать, при написании цепляющего заголовка. Проанализируем многие варианты других авторов. Расскажу что лучше цепляет посетителей.
Урок 3.2.2: Создание простой шапки сайта.
Просто - не значит некрасиво. Простота - сестра таланта, поэтому даже при создании простой шапки, можно сделать ее очень привлекательной, иногда достаточно простой шапки. В этом уроке мы уже будем практиковаться. Покажу как можно при помощи изображения и текста (поэкспериментируем со стилями для текста) создать красивую простую шапку. Так же, в этом уроке рассмотривается помещение изображений или текста поверх других элементов. Автор покажет Вам как этот метод применить в создании незамысловатой шапки для сайта, чтобы сделать ее объемней и красивее, а также данный метод нам пригодиться в последующих уроках при создании блоков.
Урок 3.2.3: Создание эффектной шапки сайта.
В этом уроке Автор покажет где взять, как отредактировать и использовать изображения для создания шапки. Покажу как полностью нарисовать шапку в Photoshop вместе с текстом, научит вас создавать красивые надписи., чтобы потом осталось только вставить изображение в шапку сайта! Даст советы на случай если вы захотите очень красивую, эффектную шапку на свой сайт.
• Фон
Урок 3.3.1: Фон для сайта.
Фон всего сайта, статический и прокручивающийся, фон отдельных блоков и элементов, помещение больших изображений как фон (чтобы браузер не учитывал их ширину) - все это в данном уроке. И еще: работа с программой фотошоп, использование паттернов для фона, редактирование (оптимизация) больших изображений как для фона всей страницы (как сделать чтобы изображение повторялось без стыка) так и для небольших элементов, поиск фонов и паттернов в интернете и др.
Урок 3.3.2: Фон для блоков и других элементов.
Фон всего сайта, статический и прокручивающийся, фон отдельных блоков и элементов, помещение больших изображений как фон (чтобы браузер не учитывал их ширину) - все это в данном уроке. И еще: работа с программой фотошоп, использование паттернов для фона, редактирование (оптимизация) больших изображений как для фона всей страницы (как сделать чтобы изображение повторялось без стыка) так и для небольших элементов, поиск фонов и паттернов в интернете и др.
• Дизайн информационных блоков
Урок 3.4.1: Обзор различных блоков (Дизайн информационных блоков).
В этом уроке Автор сделает обзор различных блоков, на сайтах разных авторов, В основном будет уделяться много внимания блокам на всю ширину экрана, но так же рассмотриваются и блоки ограниченные шириной основного блока, который имеет фиксированную ширину по всей длине сайта.
Урок 3.4.2: Блоки посредством только CSS (Дизайн информационных блоков).
В этом уроке Автор покажет Вам несколько симпатичных блоков, которые можно сделать без использования Photoshop и картинок, только лишь используя стили CSS. При создании своего сайта вы будете не раз их применять, их очень просто создавать.
Урок 3.4.3: Блоки посредством Photoshop + CSS (Дизайн информационных блоков).
В основном на данной странице и вообще, чаще используются именно такие блоки, при небольших навыках в программе Photoshop, их довольно просто создавать, они значительно красивее, чем блоки только лишь средствами CSS, да и сделать их можно какими угодно на что хватит фантазии. Мы рассмотрим самые разные блоки, с информацией о товаре и услуге, блоки выделяющие главные мысли, блоки для отзывов, блок-гарантияи т.д.
Урок 3.5: Списки, иконки.
В этом уроке Автор покажет вам как создавать списки (пункты), например перечень плюсов или минусов используя, например, красивую иконку плюса или минуса слева. А так же покажет где найти и как можно использовать разнообразные иконки.
Бонусы:
1. "Как сохранить и переделать чужой одностраничник под себя"
В этом бонусе Вы научитесь сохранять как отдельные графические элементы с любых сайтов (изображения, фоновые картинки и паттерны, блоки т .п.), так и грамотно сохранять полностью страницы. Автор расскажет Вам как, сохранив страницу, вы сможете переделать ее под себя или использовать с нее отдельные элементы на своей странице предварительно изменив.
2. "Научись менять дизайн формам подписки"
Вы научитесь менять стандартный дизайн форм подписки на собственный. Автор расскажет как искать исходники с дизайном. Все это будет объясняться на примере изменения стандартных форм сервисов SmartResponder и JustClick, при этом Вы сможете работать с любыми формами любых сервисов!
3. "Всплывающее pop-up окно с собственным дизайном"
В этом бонусе Вы научитесь создавать индивидуальные всплывающие окна, в которые вы сможете вставить все что угодно – текст, картинки, видео, формы подписки, кнопки и пр. Вместе с Автором астроите периодичность появления такого окна (один раз за сессию или один раз за неделю или месяц или вообще один раз за все время), чтобы не надоедать посетителю нашего сайта.
4. "Таймер обратного отсчета"
Вы научитесь устанавливать такой таймер, который можно настроить в двух режимах
- Будет отсчитывать время до определенного дня и времени;
- Будет отсчитывать определенное количество дней, часов, минут, секунд, вплоть до завершения, даже если посетитель уйдет со страницы, такой счетчик знает когда тот или иной посетитель зашел на страницу первый раз и всегда будет показывать оставшееся время с момента первого посещения вашего сайта.
5. "Создание меню, закрепленное меню, якорь для кнопки"
Для чего меню на одностраничнике? Кнопки меню могут играть роль перемотки страницы в нужное место (например до блока об авторе), для этого Вы научитесь привязывать кнопку к якорю, к которому и будет происходит плавная прокрутка страницы при нажатии на необходимую кнопку в меню. Также Вы научитесь закреплять меню к верху или низу страницы, т.е. такое меню будет находится на одном месте при скролле страницы.
6. "Грамотная вставка видео на сайт"
В этом бонусе Вы научитесь вставлять видео на сайт с помощью стандартного плеера youtube, расскажу о его настройках – как сделать автозапуск, как сделать чтобы видео запускалась в хорошем качестве, скроем все не нужные элементы. Автор покажет варианты подложек под видео чтобы оно выглядело объемным. Так же Автор расскажет о других популярных сервисах.
7. "Свой шрифт на сайте"
В этом бонусе Вы научитесь искать и устанавливать свои шрифты на сайт.
8. "Эффекты появления элементов на сайте"
Хотите чтобы Ваш сайт выглядел более эффектно и дорого? Отличный вариант - добавить в него визуальных эффектов! Все профессиональные вебстудии используют этот инструмент при создании одностраничников. Автор научит Вас очень просто создавать красивые профессиональные эффекты, для каких угодно элементов (текст, картинки, кнопки, формы и пр.)!
9. "Золотой набор графики"
Часто, легче найти какой-то графический элемент в интернете и Автор Вас этому научит, но и полезно иметь в своем арсенале набор качественных исходников различной тематики, иконок, текстур пользоваться которыми Автор учит в видеокурсе! Этот набор - не мусорка, куда скинуто все, что попало под руку (лишь бы было). Это только самый отборный материал, который копился Автором не один год, все некачественное было удалено!
Выпущено: Россия
Продолжительность: 05:48:37
Язык: Русский
Информация о видеокурсе
Название: Научись создавать красивые, современные подписные и продающие страницы
Год выхода: 2014
Автор: Сергей Немцев
Жанр: Обучающий
Файл
Формат видео: MP4
Качество видео: PCRec
Видео: AVC, 1280x720, ~921 Kbps, 15.000 fps
Аудио: AAC, ~224 Kbps, 44.1 KHz
Доп. материалы: присутствуют (исходники, шаблоны, примеры кодов, готовые результаты)
Размер: 4,55 GB
Скачать Научись создавать красивые, современные подписные и продающие страницы (2014) Видеокурс
|
Главная 
