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

Обычный лендинг представляет собой набор из html-верстки, css-файлов и изображений. Иногда к нему прибавляются JS-скрипты и JQuery-библиотеки.

Итак:

1. Загружаем все изображения в Сайт => Страницы => Файловый менеджер

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

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

Варианты каталогизации:
IMG — папка для изображений
CSS — папка для css стилей
JS — папка для JS-скриптов и JQuery

или

Main — все файлы для главной страницы
Lanpage1 — все файлы для продающей страницы
и т.д.

Вашу фантазию здесь никто не ограничивает. В данном примере рассматриваются пути для корневого (основного) каталога файлового менеджера, в то время как пути до папок в файловом менеджере могут незначительно отличаться.

2. В html-коде и в css-стилях находим и меняем адреса для всех изображений

Файлы с расширением .html и .css открываются блокнотом или любым другим текстовым редактором.

Обычно по-умолчанию путь к картинке прописывается как «…/image.png». В этом случае нужно поменять ссылку, к примеру, на:

Также, можно прописывать не абсолютные пути, как в примере выше, а относительные (из ссылок убираем домен):

3. Загружаем css-стили, js-скрипты и jquery-библиотеки

Так же, как и изображения, располагаем эти файлы в Сайт => Страницы => Файловый менеджер. Копируем и сохраняем пути до файлов.

4. Создаем новую страницу в разделе Сайт => Страницы

При создании страницы в шаблонах выбираем Html-редактор

Открывается страница с редактором.
Присваиваем ей уникальный Идентификатор. Обратите внимание, Идентификатор добавляется в адрес страницы, то есть будет виден посетителям сайта.

5. Копируем весь html-код и вставляем его, выбирая «HTML редактор». Подробнее об этом мы рассказали тут.

Код, вставленный на вкладке «Дополнительно» в поле «Дополнительный код в HEAD:» не работает совместно с HTML редактором, т. е. не появится на странице. Т. е. сюда нужно вставлять весь код вашей страницы.

Если в скопированном html-коде прописаны JS-скрипты, внимательно проверяем их на наличие ссылок на загруженные в Файловый менеджер файлы.

Не забываем менять пути для css-стилей, скриптов и библиотек! Рассмотрим пример, как это сделать правильно. По-умолчанию пути могут быть прописаны так:

для CSS:

для JS:

Вам нужно заменить путь либо на абсолютный так:

для CSS:

для JS:

либо на относительный так:

для CSS:

для JS:

6. Сохраняем изменения и проверяем отображение страницы

Проверить можно просто — введя в адресную строку браузера адрес созданной страницы.

Оценить статью

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 4,50 из 5)
Загрузка...