Денис Герасимов

Создать лендинг. Самому на HTML и CSS.

Заставка к видео - Создать лендинг. Самому на HTML и CSS.

Приветствую! С вами Денис Герасимов, сайт rek9.ru и мы поговорим про то, как создать лендинг самому, при этом еще адаптивный и современный.

Выставим некоторые требования к нашему будущему лендингу:

  1. Быстрый, то есть быстро загружался. Поэтому будем делать его сами, на HTML и CSS.
  2. Адаптивный, то есть подстраивался под экраны разных устройств. Чтобы на наш лендинг могли зайти с ПК, планшета, смартфона и т.п. и на всех устройствах он выглядел красиво и удобно.
  3. Современный, то есть мы могли бы встроить на него слайдер, добавить различные модальные окна, либо всплывающие какие-то подсказки.
  4. Красивый. То есть мы могли бы добавить иконки и кнопки, которые органично бы смотрелись на нашем лендинге.

Как создать современный и красивый лендинг самому?

  1. Необходимы хотя бы начальные знания html и css, то есть вы должны представлять, как добавить в структуру html хотя бы класс css, чтобы изменить его внешний вид. если вы используете некоторые трудности с этим, то я могу вам порекомендовать бесплатные курсы от Евгения Попова, которые содержат несколько уроков, после просмотра которых вы уже начнете понимать, что это такое (ссылка).
  2. Изучить документацию по фреймворк bootstrap. Вы можете выбрать фреймворк самостоятельно. Это специальный фреймворк, который содержит наборы стилей и ява скриптов, которые можно легко встроить в наш сайт, и они будут смотреться очень органично. Так же он содержит ячеистую структуру, которая позволит нам создать адаптивный дизайн.
  3. Выбрать структуру сайта. То есть представлять, как будет выглядеть каркас нашего будущего сайта. Например, мы хотим, чтобы сверху у него был заголовок, так называемая шапка, затем размещено какое-то изображение и форма подписки. Нам необходимо создать эту структуру, каркас.
  4. Воспользоваться конструктором для создания структуры сайта. Конструктор находится по адресу www.layoutit.com, с помощью него можно создать структуру сайта, даже не обладая специальными навыками и знаниями.
  5. Скачать полученную структуру на компьютер и изменить ее дизайн. Готовый лендинг после этого можно смело закачивать на сервер.

Перейдем к практике

На примере лендинга, созданного мной lp.rek9.ru, на котором я раздаю 20 советов по настройке Яндекс.Директ. Bootstrap содержит разные элементы дизайна, например иконки, которыми можно воспользоваться. А также содержит различные ява скрипты, с помощью которых можно сделать модальные окна, всплывающие, которые можно закрыть либо сверху, либо снизу. Это пример простейшего лендинга, который в-принципе не плохо работает, у него хорошая конверсия.

Давайте познакомимся с документацией Bootstrap

Фреймворк bootstrap можно скачать по адресу www.getbootstrap.com. Этот продукт от создателей Twitter. Этот фреймворк постоянно развивается и на данный момент последняя его версия 3.3.4. Для подключения к нему сайта нужно скачать этот архив и прописать определенные строчки в коде html. В итоге вы получите доступ к css, components, javascript. Также bootstrap можно подключить не скачивая его, используя технологию CDN, просто прописав в коде определенные строчки. Эта технология выбирает ближайший физически расположенный сервер к вашему посетителю и уже с него подгружает файлы стилей или ява скриптов. Это ускоряет загрузку вашего лендинга. При этом данный код минимизирован.

Ячеистая структура bootstrapПосле подключения bootstrap вы получите доступ к набору стилей CSS. Он имеет ячеистую структуру Grid System, состоящую из 12 колонок. Нужно понимать, как создаются эти колонки. Допустим вы хотите, чтобы на вашем сайте было 2 колонки. Одна из которых занимает 2/3 части страницы, а другая 1/3. В большую колонку хотите, например, вставить изображение, а в меньшую форму для заполнения. Для этого необходимо прописать строчку, в ней прописать колонку со стилем 8 и колонку с 4, указанным на сайте bootstrap. После того, как вы пропишите стили необходимые вам, то зайдя на ваш сайт с мобильного устройства, колонка, которая идет второй спускается ниже. В итоге, ваш дизайн становится адаптивным. Если вы хотите структуру с тремя колонками, равными, то необходимо 12 разделить на 3 и уже прописать код с цифрой 4, в коде страницы. И так далее.

Чтобы не запутаться в работе с ячеистой структурой, я предусмотрел для вас работу в конструкторе www.layoutit.com. Более подробную работу с конструктором я опубликую в следующей статье.

Кнопки в бутстрапТакже bootstrap содержит файлы для Typography, с набором различных стилей заголовков, которые вы можете выбрать для своего лендинга и прописать в коде. Внутри этого раздела есть так же классы выравнивания Alignment classes, например, если вы хотите, чтобы текст был по центру, достаточно скопировать определенный код и вставить его в код лендинга. Так же есть файлы списков Lists и многое другое. Можно создать таблицы с разными стилями в разделе Tables, формы Forms (можно сделать формы столбиком, в одну строчку, форму с дополнительными символами, форму во всю строчку и т.д.). В разделе Buttons вы можете выбрать стили кнопок на вашем лендинге. Вы сможете задать цвет кнопок, размеры, активные или неактивные кнопки. В разделе Images можно задать стили изображений. Например, чтобы изображение было круглым необходимо вставить определенный код. В разделе Helper Classes можно изменить цвет текста, фон текста и т.п.

Glyphicons для bootstrapТак же мы получаем доступ к различным компонентам, например, к глиф иконкам. Для добавления какой-либо иконки на сайт необходимо прописать определенный спан класс (span class). Под изображением каждой иконки написано какой класс необходимо прописывать в коде, чтобы получить нужное изображение на своем лендинге. Также можно получить доступ к Dropdown выпадающим спискам, Button groups группам кнопок, Navs навигации и многому другому. Все эти возможности вы можете посмотреть по разделам в списке в правой части страницы сайта bootstrap.

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

Это было небольшое ознакомление с bootstrap и его структурой. В следующей статье мы уже будем создавать структуру лендинга в специальном конструкторе, адаптивную структуру нашего будущего лендинга.

Сайт можно скопировать. Как скопировать лендинг читайте здесь!

До встречи!

Вторая часть здесь

↓ Презентация cloud.mail.ru

Подпишитесь на YouTube канал

  • https://plus.google.com/110514184186324982177 Денис Майнер

    Доброго дня. Возник такой вопрос. Так как я новичок в этом,не судите за возможный абсурд.,
    Просто я слышал что сайт должен быть на какам либо движке. У меня к примеру основа на вордпресс. Я к примеру хочу создать лендинг страницу моего магазина. Вот я например создал и закинул все папки на хостинг. Будет ли эта страница индексироваться поискавиками. И вообще она как бы получается вне основного сайта.

    • https://rek9.ru Денис Герасимов

      Здравствуйте, Денис

      Страница будет индексироваться при 2 условиях, — на нее есть ссылки с уже проиндексированных страниц и, если страница не закрыта от индексирования в файле роботс.тхт (robots.txt) в корне сайта.

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