Поскольку сейчас мы рассматриваем больше «ручное» создание лендинга, то для работы нам понадобится программа для удобного написания кода — NotePad++.

И в данной статье мы рассмотрим, какие действия нужно сделать перед тем, как приступать к верстке готового дизайна сайта.

Подготовка к верстке лендинга. О чем важно не забыть?

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

Если такового у вас еще нет — советую установить себе на компьютер виртуальный хостинг Денвер (подробности по этой ссылке) и через него работать так, как буд-то бы у вас есть хостинг.

Я же все будут делать на своем домене VashInternetGid.ru

Теперь можно приступать!

Пошаговая схема подготовки к верстке



Для начала, создайте новую папку, например «landing» (можно через ftp-менеджер, а можно через админку вашего хостинга):

www.vashinternetgid.ru/landing

По-умолчанию, в этой папке будет файл index.html. Вместо него нужно создать index.php, а .html — удалить.

И обязательно обратите внимание, чтобы файл index.php был в кодировке «UTF-8 без BOM»:

Сохранение файла в utf-8 без BOM

Теперь можно наполнять наш файл тегами.

Для начала создадим каркас файла вместе с заголовком:

В обязательном порядке прописываем все метатеги:

Для того, чтобы установить библиотеку jquery, с помощью которой создаются визуальные эффекты, переходим на сайт jquery.com и скачиваем последнюю рабочую версию. После чего «заливаем» ее на свой хостинг в папку «js» и прописываем к ней путь в файле index.php.

Для написания своих скриптов, создайте файл functions.js и разместите его в ту же папку — «js»:

Для отображения иконки, сначала файл с картинкой заливаем в нашу папку, а затем прописываем ее в коде:

Иконку нужно либо сделать самому, либо с помощью онлайн-сервисов (поищите по запросу «создать иконку онлайн»).

Для наших будущих картинок нужно создать папку images.

И не забываем про таблицу стилей. Для этого создаем папку styles и в ней создаем файл style.css. А в файле index.php прописываем путь к этой таблице:

Обязательно нужно создать в корне нашей папки файл «.htaccess» и в него прописываем код для установки правильной кодировки (UTF-8):

И в самом конце, если у вас есть уникальные шрифты, их нужно:

  1. Перекодировать в универсальный формат woff (кодировщики посмотрите в интернете; для перекодирования ttf в woff можете использовать этот кодировщик)
  2. Переместить в папку fonts и в файле main.css указать к ним путь:

font-name — здесь вы сами придумываете название шрифта для системы;

name.woff — это истинное название файла со шрифтом (и путь).

Итоговый вариант

Итак, в конце проделанной работы, у вас должны быть:

  • созданные подпапка или поддомен (кому что больше нравится)
  • созданные папки styles (и файл main.css), js (и файлы jquery-3.1.1.min.js и functions.js), fonts (с файлами необходимых шрифтов), images.
  • в корне — созданы файлы index.php и .htaccess

Итоговый вариант файла index.php должен выглядеть так:

Проверяйте и, если что, исправляйте.

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

Удачи!