- Урок №1. Обзор необходимых программ и ресурсов
Во вводном уроке я подробно расскажу о том, какие программы вам понадобятся и для чего. Не всегда мы будем применять их по назначению. Например, программу для снятия скриншотов мы будем использовать в качестве линейки, чтобы измерять размер в пикселах различных элементов на экране.
Кроме программ мы будем много пользоваться разными сайтами. С них мы будем скачивать иконки, текстуры и картинки для нашего лендинга.
- Урок №2. Изучаем из каких файлов состоит универсальный шаблон лендинга
Здесь вы узнаете, какие файлы составляют шаблон, на основе которого мы будем учиться делать лендинг, и для чего они предназначены. Вы увидите, в каком файле находится контент лендинга (тексты, картинки, видео) – это HTML-страница, а какие файлы хранят в себе всё оформление лендинга.
Также я здесь затрону вопрос разделение контента и форматирования в лендинге. Вы узнаете, почему это важно.
- Урок №3. Познаем необходимую теорию по HTML и CSS
Многие не любят теорию. Но этот урок – ключевой. Без него двигаться дальше невозможно. Из него вы узнаете, что такое теги, как устроена структура кода HTML-страницы лендинга, как устроен код стилей CSS и что такое классы, а также научитесь подключать CSS-стили к веб-странице.
Дальше вы увидите, как для построения лендинга используются виртуальные кирпичи – DIV-контейнеры. Несмотря на кажущиеся сложными названия, вы убедитесь, насколько это просто.
- Урок №4. Подключаем шрифты к сайту
Наверняка вы замечали, что на любом привлекательном лендинге используется шрифт или несколько шрифтов, которые отличаются от стандартных. Шрифты придают лендингу своё, особенное лицо, и делают его стильным.
На страницу с хорошо подобранными шрифтами приятно смотреть. Поэтому здесь я покажу как выбирать шрифты и подключать их к веб-странице. Сделаем мы это с помощью специального сервиса Google.
- Урок №5. Задаем стили основных элементов страницы
Основные элементы – это сами разделы, заголовки, подзаголовки и абзацы. У большинства из них будут одинаковые параметры форматирования: отступы, размер, цвет, шрифт.
Поэтому эти параметры задаются только один раз в свойствах CSS, а потом автоматически используются на всем лендинге.
- Урок №6. Создаем хеадер (шапку) лендинга
Начиная с этого урока, мы будем последовательно создавать раздел за разделом, двигаясь по шаблону сверху вниз.
Хеадер – это верхняя часть лендинга, его шапка. Он очень важен, потому что именно это место видит посетитель, только что оказавшийся на странице. От того, заинтересует его хеадер или нет зависит, станет он просматривать страницу дальше или уйдет.
В уроке мы подберем картинки для создания фона этого раздела и обработаем их в Фотошопе, чтобы получился цельный коллаж. Еще я покажу как разместить фоновое изображение раздела по середине экрана. А также как оформить заголовки: под главным заголовком у нас будет цветной фон, а подзаголовок мы разделим на две части так, чтобы они располагались вокруг головы человека на фоновой картинке.
- Урок №7. Создаем блок «Формулировка проблемы»
Оформляя этот раздел, мы освоим три важных приема работы.
Во-первых, заполнение фона раздела бесшовной текстурой.
Во-вторых, расположение картинки поверх уже имеющегося фона раздела.
В-третьих, размещение контента в две колонки.
- Урок №8. Создаем блок «Основные ошибки»
В этом разделе в качестве фона используется фотография, которая была затемнена, чтобы был контраст с текстом белого цвета. Я покажу как обработать исходное изображение, чтобы добиться нужного эффекта.
Еще вы научитесь увеличивать отдельные символы в заголовке, на примере знака вопроса, который будет занимать высоту, равную трем строкам текста.
Затем мы оформим маркированный список и назначим ему в качестве маркера иконку определенного размера.
- Урок №9. Создаем связку «Что делать? - Представление продукта»
Заголовок этого раздела имеет собственный фоновый цвет. Вы узнаете, как сделать его полупрозрачным.
Потом вас ждет знакомство с фоном элементов в виде круга. Это не картинка, а сделано с помощью CSS. Вы узнаете, как задать диаметр фоновой окружности, ее цвет и позиционирование внутри контейнера.
Еще здесь мы впервые столкнемся с векторной графикой. Это изображение пьедестала, которое нам нужно будет открыть в Adobe Illustrator, кое-что изменить, а затем перенести в Фотошоп для дальнейшей обработки. В нем мы поместим на пьедестал изображение нашего продукта, добавим к нему тень, а также нарастим красную ковровую дорожку до нужной длины.
На последнем шаге я покажу как располагать текст «ёлочкой», когда каждая следующая строка длиннее предыдущей.
- Урок №10. Создаем содержание (меню, описание уроков, пример урока)
Размещая картинку с меню курса, вы научитесь добавлять с помощью CSS тень для изображения.
Оформляя описание каждого урока вы познакомитесь с таким свойством как различные рамки. Их можно добавлять как со всех сторон элемента, так и с отдельных его сторон. А также задавать цвет, толщину и тип линии, которая используется при создании рамки.
Также я покажу хитрый прием обработки изображения, не являющегося текстурой, чтобы его можно было использовать для бесконечного заполнения фона раздела, и чтобы это выглядело гармонично.
В последней части урока я покажу как добавить изображение компьютерного монитора и вставить в него видео с Yoytube.
- Урок №11. Создаем блок «Результаты применения»
Основной частью этого раздела является таблица с разноцветными клетками.
Я покажу как сделать такую конструкцию с помощью уже хорошо известных нам DIV-контейнеров и расположить их в три колонки внутри страницы. При необходимости вы сможете задать и другое число колонок в этой «сетке».
В HTML есть специальный тег для создания таблиц. Но если вы не расскажете, что это сделано с помощью DIV, никто не узнает :)
- Урок №12. Создаем блок «Цена и форма заказа»
Работая над этим разделом, мы повторим и закрепим многие приемы, уже встречавшиеся раньше: задание индивидуальных отступов, цветов, размеров и рамок для разных частей текста.
Во второй части мы создадим самый важный элемент раздела – кнопки заказа. Вы сможете задать им любой цвет по умолчанию, а также цвет при наведении мыши. И прикрепите к этим кнопкам свои ссылки на оформление заказа (у меня использованы ссылки сервиса Justclick, через который я работаю, но это могут быть совершенно любые ссылки, как на какой-либо сервис, так и на ваш скрипт, установленный на сайте).
Вы также сможете оставить только одну кнопку, если необходимости во второй нет.
- Урок №13. Создаем блок с отзывом
Если до сих пор мы добавляли фоновое изображение ко всему разделу целиком, то здесь я покажу как добавить фоновую картинку для отдельного элемента – прямоугольной рамки с текстом отзыва.
Дальше мы разместим фотографию автора отзыва рядом с его подписью.
А еще вы узнаете, как на картинку наложить цветной градиент, чтобы сделать фоновое изображение раздела более интересным.
- Урок №14. Добавляем блок «Ответы на вопросы»
В этом разделе нам понадобится изменить цвет отдельной части фоновой фотографии, оставив нетронутой другую ее часть. Я покажу как это делается в Фотошопе.
Дальше мы оформим тексты вопросов и ответов, придав каждой части нужное форматирование.
А напоследок я покажу, как можно смещать фоновое изображение внутри раздела в разные стороны.
- Урок №15. Оформляем футер
Футер – самый простой раздел, там нет даже заголовка, только простой текст. Обычно это разные копирайты, контактные данные и ссылки на различные ресурсы автора (службу поддержки, пользовательское соглашение и т.п.).
Как обычно, мы зададим нужный цвет фона, размер текста и его цвет.
- Урок №16. Добавляем кнопки перехода к форме заказа
Посетителю нужно дать возможность перейти к оформлению заказа не только из раздела «Цена и форма заказа», но и из других мест лендинга, где это уместно. Например, из раздела с примером урока.
Поэтому мы создадим специальные кнопки, которые разместим в разных местах страницы. При клике по такой кнопке будет мгновенно открыт раздел «Цена и форма заказа», или любое другое место на странице, которое вы сами зададите.
- Урок №17. Загружаем готовый лендинг на хостинг
Теперь наш лендинг готов, и мы можем разместить его в интернете, чтобы все желающие могли на него зайти.
Для примера я использую популярный хостинг Джино, но вы можете использовать любой другой, даже бесплатный. Лендинг не предъявляет никаких особых требований к хостингу и будет работать на любом.
Я покажу какие файлы и куда нужно закачивать, чтобы лендинг стал доступен через интернет и корректно отображался.
- Урок №18. Кое-что о кроссбраузерности
Кроссбраузерность – это способность страницы одинаково отображаться в разных браузерах, а также в разных версиях одного браузера.
Дело в том, что разные версии браузеров могут по-разному обрабатывать одни и те же свойства CSS. Поэтому вебмастера стараются учесть это и прописать свойства так, чтобы соответствовать особенностям разных браузеров. Тогда большее число посетителей увидят лендинг в том виде, как было задумано.
Я покажу несколько мест в лендинге, которые отображаются иначе в Google Chrome и Internet Explorer, чем в Firefox’е.
И, конечно, объясню в чем заключается проблема и как ее исправить.
