Как создать многостраничный сайт
Наверняка вы задумывались над тем, как сделать многостраничный сайт самому без знаний html, программирования и дизайна. В данной статье мы расскажем об этой технологии.
- Как создать сайт статей или блог.
- Как создать интернет магазин.
- Как создать сайт учителя.
- Как создать сайт воспитателя.
И в качестве примера попробуем создать многостраничный сайт бесплатно на конструкторе сайтов. Для удобства разобьем весь процесс на несколько этапов.
Шаг 1. Выбор и установка шаблона
На странице Шаблоны сайтов выберите подходящий шаблон. Либо начните делать сайт с нуля, нажав на кнопку Создать сайт. Установленный шаблон появится в вашем аккаунте на странице Проекты.
Выбрать вы можете, как одностраничный шаблон и увеличить его затем до многостраничного, так и многостраничный шаблон и просто изменить его под себя.
Шаг 2. Создание структуры многостраничного сайта
Определите, какие страницы будут на сайте. Для этого можете начертить примерный список страниц в текстовом редакторе.
Примерный набор страниц для многостраничного сайта:
- Главная
- О компании
- Услуги, которые могут подразделяться на дополнительные страницы:
3.1.Услуга 1
3.2. Услуга 2
3.3. Услуга 3 - Примеры работ/Отзывы
- Контакты
- Блог
На этом этапе желательно хотя бы в текстовом виде прописать, какие основные моменты будут находиться на каждой странице.
Далее нужно отредактировать главную страницу сайта. Остальные страницы мы добавим позже.
Перед началом работы над созданием сайта рекомендуем подобрать 2-3 основных цвета и шрифта для сайта и далее придерживаться их при оформлении дизайна.
Шаг 3. Настройка и редактирование главной страницы
Чтобы отредактировать главную страницу перейдите в Проекты и нажмите рядом со страницей кнопку «Редактировать сайт».
Если вы делаете сайт с помощью шаблона, то просто отредактируйте блоки сайта под свою компанию. Удалите те блоки, которые вам не нужны и добавьте новые, нажав на кнопку «Добавить блок«.
Как сделать Главную страницу с нуля
На главную страницу мы будем добавлять такие блоки:
- Меню.
- Обложка с формой.
- Текстовый блок с изображением или без.
- Блок Преимущества компании.
- Блок Галерея
- Форма обратной связи.
- Карта с контактами.
- Подвал.
Рекомендуем на Главной странице добавлять 2-3 формы обратной связи на ваше усмотрение.
Теперь переходим к добавлению блоков:
- Зайдите в редактор страницы.
- Нажмите на кнопку «Добавить блок».
- Выберите раздел «Шапка и меню» и нажмите на любое меню, которое вам нравится. Меню добавиться на сайт. Редактировать его пока необязательно.
- Далее добавим обложку. Нажмите на «Добавить блок» и выберите раздел «Обложка«. Нажмите на блок, например, самый первый 201 блок. Страница теперь выглядит так:

Далее нажмите на «Добавить блок» и выберите раздел либо «Текстовый блок» либо «Контент«, в зависимости от того, какой текстовый блок хотите добавить: с картинкой или без. Добавьте блок, нажав на него. Теперь под обложкой появился текстовый блок.

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

Далее из раздела Галерея добавьте блок с фотографиями. Здесь вы сможете добавить фото услуг вашей компании.

Форму обратной связи вам нужно добавить из раздела Форма и кнопка.

В библиотеке блоков перейдите в раздел Контакты и выберите блок с картой.

И, наконец, добавьте подвал из раздела Подвал сайта.

Когда вы добавили все блоки, поправьте их под себя. Добавьте информацию, касающуюся вашей компании.
В процессе редактирования нажимайте периодически на кнопку Сохранить!
Чтобы отредактировать карту, воспользуйтесь инструкцией: Как сделать метки на Яндекс картах
Блок меню рекомендуем оформлять после того, как добавлены остальные страницы сайта.
Шаг 4. Добавление новых страниц к сайту
Теперь нужно создать другие страницы сайта.
-
Для этого нужно зайти на страницу Проекты и под своим сайтом нажать на кнопку «Добавить страницу». У вас появилась новая страница.

Также можно скопировать страницу Главной и создать новую страницу. Для этого нажмите на три точки рядом с кнопкой РЕДАКТИРОВАТЬ и выберите первую кнопку:

Через кнопку «Добавить страницу» добавьте еще несколько страниц. Первая страница, где открыт глаз — это Главная страница. В остальных страницах глаза должы быть закрыты.

Когда страницы добавлены, вы видите, что вместо названий страниц отображается набор чисел и количество просмотров, заказов и конверсия. Эти показатели используются при AB тестировании. Сейчас это вам не нужно, поэтому отключим их и переведем названия страниц в обычный вид.

Перейдите в «Настройки проекта» и в основных настройках нажмите на «Использовать страницы вместо A-B тестирования», активируйте ее, чтобы переключатель стал зеленым. Сохраните.

Вернитесь на страницу с проектами. Теперь сайт со страницами выглядит так:
Подробнее о том, как копировать страницу в статье: Как добавить страницу к сайту.
Шаг 5. Как переименовать страницы и прописать URL
Далее вам нужно переименовать все страницы. Для примера переименуйте Главную:
-
Нажмите на 3 точки рядом с кнопкой Редактировать.

Нажмите на первую кнопку с файлом и карандашом.

Появится окно с настройками. Пропишите название «Главная». Для других страниц соответствующие им названия.

Далее увидите поле URL страницы. На Главной его нужно оставить пустым! Для других страниц вашего сайта вам нужно сделать URL, нажав на кнопку «Заполнить». Или можно добавить другой URL с помощью сайта Транслит. Используйте транслитерацию для поисковиков.

Далее вы можете прописать SEO вашей страницы, это нужно для продвижения сайта — title и description. Вот подробная инструкция, как прописать мета-теги.

Если SEO настройки выключены, то переключатель становится неактивным и выглядит так:

Таким же образом настраиваем остальные страницы сайта. Далее в редакторе каждой страницы добавляем блоки, по примерно такому алгоритму, как на Главной странице.
Если вы добавили новую страницу через кнопку копирования главной страницы, то внутри редактора каждой страницы у вас будут те блоки, которые есть на главной странице. Вы сможете просто удалить ненужные блоки, нажав на корзину при наведении на блок и оставить те, что нужны.
Шаг 6. Создание меню на сайте
Важный шаг — создание единого меню на сайте.
- Сначала отредактируйте меню на Главной странице. В статье Как сделать горизонтальное меню на сайте подробно написано о том, как сделать горизонтальное обычное меню и выпадающее меню.
- Далее нужно добавить сделанное меню на остальные страницы сайта. Чтобы созданное вами меню появлялось на каждой странице, не нужно ставить меню на каждую страничку сайта. Можно поступить гораздо проще. Вам нужно добавить меню с помощью блока-ссылки. Инструкция, как добавить меню с помощью блока-ссылки.
Не забывайте нажимать кнопки сохранения между выходом из страниц!
После того, как добавите меню с помощью блока-ссылки на каждую страницу, вам нужно будет редактировать его только на Главной странице. На остальных страницах меню будет меняться автоматически.
С помощью блока-ссылки можно добавить любой блок на любую страницу сайта. Подвал добавляется по такому же алгоритму.
Подключение домена, Яндекс Вебмастер и Яндекс Метрика
После того, как сделали сайт вам нужно подключить домен, а затем добавить его в Яндекс Метрику и Яндекс Вебмастер.
- Подключение домена. Доменное имя – это адрес сайта, который выходит в поисковой строчке. Если сайт вообще не имеет никакого доменного имени, в Интернете его просто напросто не будет. После подключения домена, если у вас тариф выше тарифа BIZ, рекомендуем подключить SSL сертификат для защищенного соединения с сайтом.
- Как подключить Яндекс Метрику. Яндекс.Метрика – это сервис, который позволяет отслеживать работу сайта – его посещаемость, поведение посетителей на сайте и многое другое.
- Как добавить сайт в Яндекс Вебмастер. Яндекс Вебмастер — это сервис, с помощью которого вы сможете контролировать, насколько хорошо работает сайт. Он проводит диагностику ошибок сайта, также проверяет настройки мета тегов, показывает индексацию страниц сайта в поиске и многое другое.
Настройка начального SEO многостраничного сайта
После того, как добавили всю информацию на сайт и отредактировали страницы настройте первоначальное SEO. Это нужно для того, чтобы улучшить результаты выдачи в поисковой системе.
Делаем первичную SЕО оптимизацию сайта:
- Сбор ключевых запросов сайта. Ключевые запросы — это словосочетания, которые, обычно, вводят люди, для поиска нужной информации, услугу или товара. Зайдите на сервис Wordstat Yandex. Введите основную тему вашего сайта и соберите некоторые ключи, которые вы далее сможете добавить в мета теги сайта, а также в тексты на сайте.
- Мета-теги. Пропишите мета теги (seo-заголовок и seo-описание) у каждой страницы или у всего сайта, если ранее этого не сделали. При заполнении мета тегов используйте собранные ключевые запросы для сайта. Заголовки страниц обязательно должны быть уникальными! Инструкция: Как прописать title, description, keywords.


Если вы пройдетесь по данному чек-листу и сделаете все эти пункты, это повлияет на то, что поисковые системы начнут показывать ваш сайт и поймут, что он существует.
Далее для более глубокого SEO продвижения предстоит большая работа с сайтом.
Основные рекомендации для SEO продвижения многостраничного сайта
- Текст на сайте должен быть полезным и интересным для людей. А чтобы поисковики поняли, что сайт полезен, в тексты на сайте нужно добавить ключевые запросы. Можете добавить подобные запросы несколько раз на одной странице, желательно не более пяти, но это больше зависит от количества символов в тексте.
- Продвигайте сайт с помощью ссылок: бесплатных и платных. Как разместить ссылки для сайта.
- Дополняйте сайт контентом постоянно. Для этого также можно добавить Блог со статьями на сайт. Собирайте ключевые запросы для статей также через сервис Wordstat. Для того, чтобы сделать статьи вам понадобятся инструкции-алгоритм создания блога:
Также читайте в другой статье про SEO-продвижение сайта.
- Если у вас многостраничный сайт, настройки проекта можно не заполнять, достаточно настроек страниц сайта.
- На нашем конструкторе возможно создать многостраничный сайт (лендинг).
- Есть возможность добавлять доп. страницы.
- На конструкторе возможно создать много страничные сайты.
- Как на одном сайте сделать несколько страниц.
Пользователи также ищут:
- Возможно ли на вашем конструкторе создать сайт, чтобы на нем можно было расположить стили, в которых я работаю, по отдельным полкам. Что-то вроде главных папок с заголовками, кликая на которые посетитель будет открывать нужный раздел
- Как сделать так, чтобы главная страница сайта была доступна только по одному адресу
- Можно ли поменять шаблон сайта на другой за такие же деньги? — Нет, это сделать нельзя.
- Как сделать, чтобы при нажатии на кнопку перекидывало на другую страницу?
- Можно ли настроить, чтобы, нажав кнопку «пройти тест», переходило на сам тест? — Да, конечно. Для этого вам нужно в настройках кнопки указать переход (поставить ссылку) на страницу с тестом
- Сайт открывается, но картинки и эффекты загружаются дольше. Подскажите, можно что-то сделать, чтобы сайт открывался сразу загруженный? — Относительно загрузки сайта многое зависит от скорость интернета, а также от того, насколько много и насколько «тяжелые» картинки или видео применяются на страницах проекта
- Мне нужно сделать многостраничный сайт, я сделала все по инструкции, первое время страницы переключались, потом перестали (вылезает страница 404 ошибка). Как быть? — В этом случае необходимо прописать URL страницы Каталога в настройках страницы. Если URL по какой-то причине слетает, необходимо закрыть все вкладки, установить URL, нажать «сохранить». Только потом открыть редактор. Тогда всё будет оптимально работать.
многостраничный сайт, как правильно организовать?
Делаю многостраничный сайт. Footer и Header (по советам из сети), думаю сделать в отдельном файле(шаблон) и при загрузке страницы подгружать(через js ). Есть вопросы по поводу .sass файлов, получается мне придется делать отдельный syle.sass и media.sass файлы для каждой внутренней страницы? Я новичок в webe , есть неплохой опыт в верстке LP , многостраничный делаю впервые. Как все это грамотно организовать? Гуглил, почти везде описываются какие-то частные случаи. Буду рад любой ссылке или совету) P.S Во внутренних страницах наблюдается такая странность: при клике на любую ссылку происходит переход на index.html . Как исправить?(пользуюсь gulp )
Отслеживать
973 7 7 серебряных знаков 14 14 бронзовых знаков
задан 9 мар 2018 в 16:35
codecaramel codecaramel
31 1 1 серебряный знак 4 4 бронзовых знака
Зачем код? я спрашиваю как правильно организовать проект
9 мар 2018 в 16:55
Что значит на чистом JS? Многостраничный сайт можно сделать и на чистои HTML, о чем речь? Да и зачем подгружать страницы, они так много весят что нельзя сразу всех загрузить?
9 мар 2018 в 16:56
заголовок исправил. Я спрашиваю как правильно организовать сайт. Footer и header хочу сделать как шаблон, и чтобы по сто раз не писать — добавлять этот код при переходе на внутреннюю страницу. На самом деле, я не знаю как организовать и поэтому спрашиваю, как будет лучше
9 мар 2018 в 17:04
Лучше используйте MVC
– user245150
31 окт 2018 в 19:47
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Переношу/перевожу ответ с англоязычного SO.
По сути вы просто хотите подключать модули в виде обычных HTML конструкций, которые будут серией div а так же ID или CSS файлы, установите каждому display: none. Потом используйте jQuery .show() и .hide() что бы показыть или скрыть их.
Что бы быть точнее вы хотите организовать навигацию примерно так:
$("#my-home-nav").click(function()< $("#my-home-div").show(); // or .fadeIn(), etc. $("#my-about-div").hide(); $("#my-contact-div").hide(); >);
Этот код может быть крайне неудобным если страниц будет очень много. Следующий код может упростить задачу:
var pageNames = ["home", "about", "contact"]; var namespace = "my"; var pages = pageNames.map(function(pageName) < return < nav: pageNameSelector(pageName, "nav"), div: pageNameSelector(pageName, "div") >; >); pages.forEach(function(page) < page.nav.click(function() < clearPages(pages); page.div.show(); >); >); function pageNameSelector(pageName, type) < return $(["#" + namespace, pageName, type].join("-")); >function clearPages(pages) < pages.forEach(function(page) < page.div.hide(); >); >
Теперь все что нужно делать это следовать данной структуре, где id для nav/div даны в виде NAMESPACE-PAGENAME-TYPE и когда вы добавляете дополнительные страницы в pageNames функциональность показать/скрыть будет работать без пробелем.
Или можно просто использовать jQuery Tabs или что-то подобное.
Как правильно создать многостраничный сайт на чистом HTML CSS JS?
Мне нужно создать многостраничный сайт, сначала делал по-простому, то-есть много HTML доков в проекте и по нажатию на кнопку открывался тот или иной документ. Но были перезагрузки. Вот ссылка на сайт, в хедере наглядно видно. https://famous-dango-326bce.netlify.app
- Вопрос задан 09 февр.
- 678 просмотров
Комментировать
Решения вопроса 1

Немного не понимаю вашего вопроса, вы всё правильно делаете. Можно для каждой страницы создавать директорию, а в ней считывать index.html, но это немного не правильно. Хотя решит проблему, если у вас сотня страниц и разделов сайта, тогда будет логично разделить разделы на директории. Не совсем понял проблемы с первзагрузкой, страницы на вашем сайте и должны перезагружается, у вас ведь не SPA приложение, а HTML сайт.
Ответ написан 09 февр.
vittallyyaaa @vittallyyaaa Автор вопроса
я бы и не спрашивал, не видел проблемы, мне просто сказали что так не должно быть. Спасибо!
vittallyyaaa @vittallyyaaa Автор вопроса
Может у вас есть какие-то рекомендации, это мой первый сверстаный сайт, был бы рад услышать

vittallyyaaa, у вас два пути (на самом деле больше, но это на любителя) — либо много папок и в каждой файл index.html или много html файлов с разными именами в корне (как сейчас). Оба имеют права на жизнь, но мне вот например больше нравится когда адреса site.ru/page вместо site.ru/page.html
Но в целом, если вы не планируете продвижение сайта (не продукта) в печатном формате, то всем по большому счёту плевать что там в адресной строке.
Ещё вам наверно стоит почитать про сборщики и/или шаблонизаторы. Вот у вас допустим 15 страниц, но на всех есть одинаковые блоки (подвал, навигация и тд). Если через полгода вам понадобится что-то там убрать, добавить или поменять, то нужно будет это сделать 15 раз или 1, если используете сборщик.
8 этапов создания многостраничного сайта

Перед формированием интернет-ресурса для бизнеса, его владелец теряется в вариантах – какой вид сайта лучше выбрать и вообще, что такое многостраничный сайт или лэндинг, в чем здесь принципиальная разница, и как с этим быть.
Конечно, разница есть и с учетом размаха бизнеса необходимо определиться с подходящим вариантом, чтобы в дальнейшем с успехом использовать созданный ресурс в коммерческих целях.
Определение понятия

Многостраничный сайт – это возможность создать сайт с несколькими страницами, каждая из которых предназначена для определенных целей, например, контакты, каталоги, главная страница и прочее.
При этом задача такого сайта обеспечить свободное передвижение по его страницам клиента посредством ссылок и не допустить попадание его на ресурсы конкурента.
Эффективен ресурс при наличии активно развитого бизнеса, которой имеет широкую базу продукции и способен обеспечить клиента различного рода информацией.
Важно: такой сайт обеспечивает легкость применения и передвижения по различным запросам, что в свою очередь увеличивает трафик поиска, легкость раскрутки необходимого продукта.
Кроме этого большое количество страниц обеспечивает применение неограниченных ключевиков, которые обеспечат отличное ранжирование сайта.
Большое количество страниц привлечет целевую аудиторию в неограниченном количестве, так как пользователю будет интересно перемещение по сайту.
С другой стороны, сайт с множеством страниц нуждается в постоянном обслуживании, обновлении контента и поиске свежей информации, на что нужно время и определенное количество персонала.
Правила создания многостраничного сайта рассмотрены в этом видео:
Виды многостраничника
По своей сути к многостаночнику можно отнести:
- Визитку – она несет основную информацию о создателе, указывает на его контакты и реквизиты, описывает краткую историю создания, дает перечень услуг/продуктов. Однако такой сайт можно создать и в качестве лэндинга одной страницей, кратко описав всю основную информацию о компании.
- Корпоративный сайт – предназначен для удобной связи между работниками одного большого производства или отрасли. При этом обеспечивается доступ к публичной информации, чтобы целевой клиент понимал, что производство стабильно, сплоченно и расположено к нему с доверием.
- Интернет-магазин – это также многостраничник, обеспечивающий пользователя самыми разнообразными товарами, так как он представляет собой своеобразную витрину товара, находящегося на складе. Здесь вы узнаете, как создать и раскрутить интернет-магазин ВКонтакте.
- Информационные сайты – на которых ежедневно обновляется информация, они также имеют много страниц, с целью предоставления клиенту как можно больше информации.

Каталог – в данном случае присутствует очень много страниц, такие интернет-ресурсы используются, например, фармацевтикой, медицинскими учреждениями и прочими организациями, предлагающими населению обслуживание.
Создание многостраничного сайта
В процессе создания сайта необходимо соблюдать определенные этапы, итак:
- изначально следует определиться с разделами, которые будут присутствовать в сайте;
- создается 2-я версия в сайте посредством страницы «Проекты» – «копировать представление»;
Важно: в процессе копирования следует убрать галочку ротации, не надо показывать это представление прочим или же надо закрыть глазик представление на сайте.
- формирование меню сайта;
- выполнение оптимизации сайта – улучшение внешнего вида ссылок и структуры;
- отметить квадратик «Использовать страницы вместо А – В тестирования»;
- далее настроить ссылки на сайт;
Важно: чтобы ссылка имела соответствующий вид необходимо использовать инструмент «Транслит Яндекс онлайн»;
- после этого на каждую страницу необходимо составить Title, description, keywords;
- для доступного применения сайта следует создать многостраничное меню, что облегчит работу с сайтом от 40 страниц.
В отношении дизайна следует соблюдать также несколько основных моментов:

- использование полноэкранных обложек и фоновых видео, при этом желательно соблюсти гармоничность и оформить все в одном стиле;
- соблюсти требования относительно стилистики и цветовой гаммы;
- в процессе выбора дизайна использовать bootstrap;
- при наличии неограниченного количества, например, техники дизайн должен подходить ко всем вариантам – телефоны, ноутбуки и прочее;
- на станицах с предложениями дизайн может быть одинаковым, отличие будет только в тексте;
- кроме этого создавать дизайн необходимо с учетом, что он будет натянут, например, на WordPress.
Лэндинг Пейдж или многостраничник

Лэндинг в настоящее время имеет большую популярность из-за своего предназначения продавать, это одностраничный сайт с продающим текстом и грамотной презентацией, он призывает пользователя к одному только действию – покупка.
Важно: лэндинг – это быстрое продвижение товаров для пользователя, который предлагает только один или несколько товаров/услуг.
Конечно, в идеальном состоянии – эти два отдельных варианта следует использовать отдельно, но их общее призвание – продажа, пробуждает желание выполнить объединение инструментов, чем собственно говоря многие активно пользуются.
Выглядит это примерно следующим образом:
- При наличии большого ассортимента товара используется многостраничный сайт, но среди такого разнообразия всегда имеется продукция наименее популярная. Тогда используется для ее продвижения лэндинг, который поможет создать в краткие сроки необходимый поток клиентов и продвинуть продукцию.
При этом можно создать несколько одностраничных сайтов для продвижения менее популярных товаров и с успехом их реализовать.
Важно: в такой способ можно продавать и эксклюзив, продукт, предназначенный для специфического покупателя или слишком обеспеченного.
- Может быть и обратный поворот событий – когда у пользователя существует несколько одностаничников, так как он начинающий бизнесмен, при этом дела идут настолько хорошо, что появляется необходимость в формировании системы лояльности и группирования постоянных клиентов.
Тогда разрабатывается многостраничный сайт с полным функционалом.
- Также можно использовать и третий вариант – на многостраничном сайте создать несколько страниц в стиле лэндинг или его главную страницу. Тогда пользователь забываясь зачем пришел, начинает переходить от одной страницы к другой и попадает на лэндинг, который уж точно не даст забыть о главном.
Эффект от такого совмещения очевиден:
- простой и доступный формат страниц;
- продвижение сразу всех продуктов, даже не очень популярных за счет ярко выраженных преимуществ одной позиции;
- при этом сайт будет располагать кейсами с портфолио или эскизами, отзывами клиентов, формой обратной связи.

Важно: кроме этого формирование многостраничника в стиле Landing Page обеспечивает SEO-оптимизацию сайта.

Цена вопроса
Стоимость многостраничного сайта зависит от многих факторов:
- его вида;
- наполненности;
- количества проделанной работы.

В его создании работает много специалистов, начиная от копирайтера, дизайнера, маркетолога и заканчивая SEO-оптимизаторами, программистами.
В среднем при полной разработке сайте от начала и до конца цена варьируется в Москве от 10 000 рублей за информационный сайт до 25 000 рублей за интернет-магазин. Тут вы узнаете, как и где можно купить готовый сайт для бизнеса.
Заключение
Многостраничный сайт – это возможность продавать, презентовать или продвигать неограниченное количество товара и услуг.
При этом продавец может обеспечивать пользователя всей необходимой информацией, контактными данными, анонсом. Формировать на страницах сайта новостные разделы и сообщать о жизни компании, проводить конкурсы и розыгрыши, совершать запись, например, на прием.
Как правильно создать несколько страниц на сайте – смотрите тут:
